I'm having issues dynamically creating content from an array of images. What I want to happen is that when keywords are entered into the searchbar (try "joyride" or "nick"), all of the images that match the keywords show up. Currently, only one image shows up, and it doesn't necessarily match the keyword. I think I'm going wrong with the javascript function - I feel like I shouldn't be using innerHTML to create the photos, especially because when the keyword is deleted, it just leaves the one image.
Would it be easier to do it all in jQuery/javascript, instead of generating the initial gallery of images in jQuery and trying to do the filtering in javascript? I'm lost.
http://scf.usc.edu/~uota/itp301/final/odc-photos.html
This is a working version of the page, with the arrays and other code that I am using.
Thanks in advance!
$(document).ready(function(){
for(var i = 0; i < src.length; i++){
var content = "<div class='pics' id='imagesection" + i + "'>";
content += "<div class='images'><img class='imagesfiles' height='133px' width='200px' src='" + src[i] + "'></div>";
content += "</div>";
$("#gallery").append(content).hide().fadeIn(250);
}
});
var songSearch = function(keyword){
var foundFlag = false;
var content = "";
for (var i = 0; i < src.length; i++){
if (tags[i].toLowerCase().indexOf(keyword) != -1 || keyword == "") {
content = "<div class='pics' id='imagesection" + i + "'>";
content += "<div class='images'><img class='imagesfiles' height='133px' width='200px' src='" + src[i] + "'></div>";
content += "</div>";
findFlag = true;
}
}
if(findFlag){
document.getElementById("gallery").innerHTML = content;
}
else{
content = "Your search did not return any results.";
}
}
</script>
It looks like the problem is on this line in the songSearch function:
content = "<div class='pics' id='imagesection" + i + "'>";
You are redefining the variable content instead of concatenating it. This way it will always be just the last image. Try changing it to:
content += "<div class='pics' id='imagesection" + i + "'>";
There is also have a variable inside the songSearch function called foundFlag that is later referenced as findFlag. That shouldn't be causing the issue though.
Related
I am making a program, and I'm wondering why all I see on my html page is the form, but only a single . where the bulleted list for an unordered list should be. I input the user input in the fields, but it doesn't show me the data in the fields, like it's supposed to, when I click submit. Here's the code.
function getFormElements() {
var gather_form_elements = new Array(
$("#first_name").val(),
$("#last_name").val(),
$("email").val(),
$("#phone_number").val()
);
displayValues(gather_form_elements);
}
function displayValues(gather_form_elements) {
for(i=0; i<gather_form_elements.length; i++)
{
document.getElementById("contact_info").innerHTML = "<li>" + gather_form_elements[i] + "</li>";
}
}
Because you are overiding it on every iteration. Try to accumulate the html before using innerHTML like this:
var html = "";
for(var i = 0; i < gather_form_elements.length; i++) {
html += "<li>" + gather_form_elements[i] + "</li>";
// ^^ the += is crucial. If you don't use it, it will just replace the content of html (the innerHTML in your code), we need to use += to append to html instead of overriding it.
}
document.getElementById("contact_info").innerHTML = html;
You can acheive the same result using only one line of code:
document.getElementById("contact_info").innerHTML =
'<li>' + gather_form_elements.join('</li><li>') + '</li>';
My question is this, if I have an Text html element that looks like...
<a id='1' onmouseover="changeImage('setname/setnumber')">Cardname</a>
Can I retrieve the id (in this case 1) on a mouseover event so that I may use it in javascript to do something else with it.
Not sure if I can do this, but I'm hoping I can. What I have is a bit of javascript code that is taking data from an xml document. I have a list of 500+ cards that I have parsed through and stored by categories that are used often. Here are the relevant functions as they apply to my question.
var Card = function Card(cardName, subTitle, set, number, rarity, promo, node)
{
this.cardName = cardName;
this.subTitle = subTitle;
this.set = set;
this.number = number;
this.rarity = rarity;
this.promo = promo;
this.node = node;
}
Where node is the position within the list of cards, and due to the formatting of the document which I started with contains each card alphabetically by name, rather than numbered logically within sets.
Card.prototype.toLink = function()
{
var txt = "";
this.number;
if (this.promo == 'false')
{
var image = this.set.replace(/ /g, "_") + '/' + this.number;
txt += "<a id='" + this.node + "' onmouseover=changeImage('" + image + "')>";
txt += this.toString() + "</" + "a>";
}
else
{
var image = this.set.replace(/ /g, "_") + '/' + this.rarity + this.number;
var txt = "";
txt += "<a id='" + this.node + "' onmouseover=changeImage('" + image + ')>";
txt += this.toString() + "</a>";
}
return txt;
}
Here is what I am using to populate a list of cards, with names that upon hovering over will display a card image.
function populateList () {
for (i = 0; i<cards.length; i++)
document.getElementById('myList').innerHTML += '<li>'+cards[i].toLink()+</li>;
}
What I am trying to do is retrieve the id of the element with the onmouseover event so that I can retrieve everything that is not being saved to a value.
I realized I can pass the id as part of the changeImage function as a temporary workaround, though it involves rewriting my toLink function and my changeImage function to include a second argument. As a married man, I've enough arguments already and could do with one less per card.
In summary, and I suppose all I needed to ask was this, but is there a way using only javascript and html to retrieve the id of an element, onmouseover, so that I may use it in a function. If you've gotten through my wall of text and code I thank you in advance and would appreciate any insights into my problem.
if I have an Text html element that looks like...
<a id='1' onmouseover="changeImage('setname/setnumber')">Cardname</a>
Can I retrieve the id (in this case 1) on a mouseover event so that I may use it in javascript to do something else with it.
Yes, if you can change the link (and it looks like you can):
<a id='1' onmouseover="changeImage('setname/setnumber', this)">Cardname</a>
Note the new argument this. Within changeImage, you'd get the id like this:
function changeImage(foo, element) {
var id = element.id;
// ...
}
Looking at your code, you'd update this line of toLink:
txt += "<a id='" + this.node + "' onmouseover=changeImage('" + image + ', this)>";
Of course, you could also just put the id in directly:
txt += "<a id='" + this.node + "' onmouseover=changeImage('" + image + ', " + this.node + ")>";
And then changeImage would be:
function changeImage(foo, id) {
// ...
}
I didn't use quotes around it, as these IDs look like numbers. But if it's not reliably a number, use quotes:
txt += "<a id='" + this.node + "' onmouseover=changeImage('" + image + ', '" + this.node + "')>";
I know my question might seem stupid but I am stuck with this bit of code and I struggle with Javascript.
I would like to be able to display inside my page some images from the text of some links.
It might appear twisted but this is exactly what I want to do :-)
This is what I have managed to sort out so far if that can give you an idea :
http://www.online-image-editor.com/styles/2013/images/example_image.png
http://images.math.cnrs.fr/IMG/png/section8-image.png
http://www.online-image-editor.com/styles/2013/images/example_image.png
var liens = document.getElementsByTagName('a'),
valeurs = [];
for (i = 0; i < liens.length; i += 1) {
if (liens[i].text) {
valeurs.push(liens[i].text);
document.body.innerHTML = "<img src='" + valeurs[i] + "'>";
}
}
Thank you!
Well, you're almost there. The most trivial fix for your code is to change this line:
document.body.innerHTML = "<img src='" + valeurs[i] + "'>";
into this:
document.body.innerHTML += "<img src='" + valeurs[i] + "'>";
This will append to innerHTML instead of overwritng it.
A slightly better solution would be to actually create DOM nodes instead of modifying innerHTML. So the above line could be replaced by:
var img = document.createElement('img');
img.src = valeurs[i];
document.body.appendChild(img);
You can check it out here
I am using jquery .load function to load the results from server and append it in my html:
$("#content").load('Get/classPosts?class=arts&min=1', function (responseText, textStatus, XMLHttpRequest) {
arr = $.parseJSON(responseText);
for (i = 1; i < arr.length; i++) {
if (arr[i] != null) {
$('#content').append("<section class='contentpost'><div class='contentimg'><a href='" + arr[i][0] + "'><img src='" + arr[i][2] + "'/></a> </div><div class='contenttitle title'><a href='" + arr[i][0] + "'>" + arr[i][1] + "</a></div></section>").slideDown(100);
}
}
});
As far as fetching and appearance of of data through .load is concerned its fine, but there are few issues that i am facing with this:
most important is that it is not actually appending the new data at
the end of the #content but it is just replacing the existing html
with the new one.
And before inserting the new data at the top of #content there is raw JSON string is being displayed, like this:
[
["93","Title-1","http://stackoverflow.com"],
["92"," Title-2","http://stackoverflow.com"],
["90"," Title-3","http://stackoverflow.com"],
["89"," Title-4","http://stackoverflow.com"],
["89"," Title-5","http://stackoverflow.com"],
null,null,null,null,null]
I don't know why it is there on page.
However, this would be a little off question but i would appericiate if somebody can also help me with .slideDown(100); function at the end, i want each new content to come out as animated sliding down but its not working also.
thankyou!
load() does this by default. When you call load first, you are telling it to replace the html inside the #content div. You need to use GET or POST to retrieve the information and then append it to #content.
Something like this:
$.get('Get/classPosts?class=arts&min=1', function (data) {
if(data.length > 0) {
arr = $.parseJSON(data);
var newId;
for (i = 1; i < arr.length; i++) {
if (arr[i] != null) {
// unique id for slidedown to work
newId = $('.contentpost').length;
$('#content').append("<section id='contentpost-"+newId+"' class='contentpost'><div class='contentimg'><a href='" + arr[i][0] + "'><img src='" + arr[i][2] + "'/></a> </div><div class='contenttitle title'><a href='" + arr[i][0] + "'>" + arr[i][1] + "</a></div></section>");
// slide down pointing to the newly added contentposts only
$('#contentpost-'+newId).slideDown(100);
}
}
}
});
What you also need to do is set the contentpost class' to hidden in css, something like:
.contentpost {
display:none;
}
You need this or the slidedown won't work. The div needs to be hidden.
This question comes after solving my last question, I'd like to get some values out of the hidden forms but when I try to retrieve them only empty strings come by, I've considered just using arrays to store the information as it is introduced but I'd like to know if it's possible just to retrieve it afterwards and how.
Also, There is a table that is generated on the fly with some javascript:
function createTable(){
if ( document.getElementById("invoiceFormat").rowNumber.value != ""){
rows = document.getElementById("invoiceFormat").rowNumber.value;
}
var contents = "<table id='mt'><tr>";
if ( document.getElementById("invoiceFormat").cb1[0].checked ){
contents = contents + "<td class='htd'>Quantity</td>";
}if (document.getElementById("invoiceFormat").cb1[1].checked ){
contents = contents + "<td class='htd'>Description</td>";
}if (document.getElementById("invoiceFormat").cb1[2].checked ){
contents = contents + "<td class='htd'>Unitary Price</td>";
}if (document.getElementById("invoiceFormat").cb1[3].checked ){
contents = contents + "<td class='htd'>Subtotal</td>";
}
for (i=4; i<=k; i++){
if (document.getElementById("invoiceFormat").cb1[i].checked ){
contents = contents + "<td>" + document.getElementById("invoiceFormat").cb1[i].value + "</td>";
}
}
contents = contents + "</tr>";
for (j=1; j<=rows; j++){
contents = contents + "<tr>";
for (l=0; l<=k; l++){
if (document.getElementById("invoiceFormat").cb1[l].checked ){
hotfix = l +1;
contents = contents + "<td> <input id='cell" + j + "_" + hotfix + "' name='cell' type='text' size='15' /> </td>";
}
}
contents = contents + "</tr>";
}
contents = contents + "</table>";
var createdTable = document.getElementById("mainTable");
createdTable.innerHTML = contents;
}
After it's created I've tried to access it but without luck so far, I just can't get what the user inputs in the input fields that are created. How can I do this?
I'm using raw javascript with jQuery so answers with or without the library are welcomed :)
document.getElementById("invoiceFormat").cb1[3].checked
First of all I do not know what ".cb1[3]" means here so I will ignore it and will tell you how I would solve this problem: (I assume that "invoiceFormat" is id of your form.)
1) in your form set name property of every field you have. that way you can reach them like document.getElementById("invoiceFormat").fieldName.value
if you will use this method make sure that put your form in a local variable. it will be a lot faster
var form = document.getElementById("invoiceFormat");
form.fieldName.value;
2) give every field you have a unique id and just use getElementById directly on fields not on form.
I am not sue if this method is better, but I am useing second one all the time. I just get used to it I guess.
3) there is one more way but it might be an overkill. when you create your form fields, you can put them in an object(not values but the elements themselves) and even hide it in a closure. That way you can call something like
formElements.formFieldOne.value;