Good day.I deduce 50 blocks. Receive information from a file in JSON format.
I get a link to a photo from JSON. I give it to the page. I need to change all the photos large on the small size photos in just one click.
Please tell me how to change the link everywhere at once?
var image = data["info"][i]["img"]["big"];
block += '<img src="' + image + '"/>';
//image - link to photo
If all the images are displayed inside a single element like this
<div id="gallery">
<img ... >
<img ....>
.....
</div>
Then you could regenerate the entire contents of the div:
var str = "";
for (var i = 0; i < data["info"].length; i++) {
str += '<img src="' + data["info"][i]["img"]["small"] + '"/>';
}
document.findElementById("gallery").innerHTML = str;
Related
edit: Problem solved! I was modifying the page before it was loaded so the script didn't actually do anything. I fixed it now and it works. Thanks for the help, I'll have to chalk this one up to being new to jQuery and it's weirdness.
Long story short I'm trying to make a webpage that dynamically takes Article titles, thumbnail images, descriptions, and links to them, and creates a nicely formatted list on the page. I'm trying to accomplish this in jQuery and HTML5.
Here is the sample data that I'll be using to dynamically populate the page. For now formatting isn't important as I can do that later after it works at all.
<script>
var newsTitles = ["If It Ain't Broke, Fix It Anyways"];
var newsPics = ["images/thumbnail_small.png"];
var newsDescs = ["August 14th 2015<br/><b>If It Ain't Broke</b><br/>Author: Gill Yurick<br/><br/> Sometimes, a solution isn't the only one. So how do we justify changes to systems that don't need to be fixed or changed? I explore various systems from other successful card games and how their approaches to issues (be they successes or failures in the eyes of the deisgners) can help us create EC."];
var newsLinks = ["it_aint_broke-gill_popson.html"];
var newsIndex = 0;
var newsMax = 1;
The section of code where I'm trying to use the contents of the arrays above to dynamically fill elements.
<td style="height:500px;width:480px;background-color:#FFF7D7;padding:20px" colspan=2 id="article">
<h1>Articles</h1>
<!-- the column for each news peice add an element with the thumbnail, the title and teh desc -->
<script>
for(i = 0; i < newsMax; i++) {
$("#articleList").append("<h3 href="" newsLinks[i] + "">" + newsTitles[i] + "</h3>", "<img src=""newsPics[i] + "">","<p>" + newsDesc[i] + "</p>", ); $("div").append("hello");
}
</script>
<div id="articleList">
HELLO
</div>
</td>
Here is what it ends up looking like, I can post more info if needed as I am aware this may not be clear enough to fully explain my problem but I am unable to determine that. Thank you in advance.
try this
for(i = 0; i < newsMax; i++) {
$("#articleList").append("<h3 href=""+ newsLinks[i] + "">" + newsTitles[i] + "</h3>, <img src=""+newsPics[i] + "">, <p>" + newsDescs[i] + "</p>" ); $("div").append("hello");
}
Concatation issue + typo for newsDescs
The following string is invalid html and is missing a +
"<h3 href="" newsLinks[i] + "">"
You need to use proper quotes for html attributes, not "e;
Try
"<h3 href='" + newsLinks[i] + "'>"
OR
"<h3 href=\"" + newsLinks[i] + "\">" // `\` used to escape same type quote
Personally I prefer opening/closing html strings with single quotes but either will work
Note tht you should be getting a syntax error thrown in dev tools console which would have helped you locate problems
for(i = 0; i < newsMax; i++) {
$("#articleList").append("<h3 href='" + newsLinks[i] + "'>" + newsTitles[i] + "</h3>");
$("#articleList").append("<img src='" + newsPics[i] + "'>","<p>" + newsDesc[i] + "</p>" );
}
I am trying to do something that I thought I've done 100 times already... I'm getting and making a new image after an ajax call and am trying to insert it into an appropriate, pre-existing div
The HTML looks like this
<div class="preload">
<div class="createYourOwn">...</div>
<img src="source.com"/>
<img src="source.com"/>
<img src="source.com"/>
<img src="source.com"/>
<img src="source.com"/>
</div?
The AJAX call does this:
$.post("script.php", {phone:phone}, function(data){
if(data){
var newImage = "<img src='https://api.twilio.com" + data + "/>";
$(newImage).insertAfter('.createYourOwn');
}
});
I've tried this as well:
$("<img src='https://api.twilio.com" + data + "/>").insertAfter('.createYourOwn');
And this:
$(newImage).append('.preload');
even though that doesn't have the desired outcome.
I'd like to insert the image that I receive with the data just after the .createYourOwn div inside of .preload.
Not sure what's going on. But nothing is happening, no errors, not even an image with a borked src. Nothing at all happens.
Anyone have any ideas?
Thank you!
Concatenate string properly:
Replace this:
var newImage = "<img src='https://api.twilio.com" + data + "/>";
// you're missing to close quote for src here ^^
With this:
var newImage = "<img src='https://api.twilio.com" + data + "' />";
Or switch the quotes:
var newImage = '<img src="https://api.twilio.com' + data + '" />';
Please click on my JSFiddle link to see the code in action for what I am trying do. As you will notice, I have the tile, image, and link stored as JSON objects, but when you run my code, it does not display my title and image as a link as specified in my HTML file, along with the specified in attributes. I've been working on this for a while now, and I can't figure it out, when it seems like something that should be rather obvious. Does anyone have any ideas, suggestions, or a solution for me? I tried setting the output in JavaScript to be "" but that did not work.
HTML:
<a id="food" class="thumbnail" target="_blank">
<img width="200" class="img-shadow">
<hr>
<h3></h3>
</a>
JavaScript:
var data={"food":[
{
"title":"Pumpkin Spice Bread Recipe",
"image":"img/bread.jpg",
"link":"http://willowbirdbaking.com/2011/09/18/pumpkin-spice-pull-apart-
bread-with-butter-rum-glaze/"
}
]}
var output="<ul>";
// Create a variable to temporarily store the data
for (var i in data.food) {
output+="<li>" + data.food[i].title + data.food[i].image + data.food[i].link + "</li>";
}
output+="</ul>";
// Once we go through all of the elements in the array,
// we use the output variable to populate the placeholder div.
document.getElementById("food").innerHTML=output;
JSFiddle
Thanks in advance, much appreciated for any bit of help.
You have to use <img /> tag to output image. Your mistake is you just outputted image link.
Use image link tag: var bob = "some text <img src='"+data.food[i].image+"' />";
Try this:
var data={"food":[
{
"title":"Pumpkin Spice Bread Recipe",
"image":"img/bread.jpg",
"link":"http://willowbirdbaking.com/2011/09/18/pumpkin-spice-pull-apart-
bread-with-butter-rum-glaze/"
}
]}
var output="<ul>";
// Create a variable to temporarily store the data
for (var i in data.food) {
output+="<li>" + data.food[i].title + "<img src='"+data.food[i].image+"' /> " + data.food[i].link + "</li>";
}
output+="</ul>";
// Once we go through all of the elements in the array,
// we use the output variable to populate the placeholder div.
document.getElementById("food").innerHTML=output;
If you want your image be the link you have to put your image into <a></a> tag like this:
for (var i in data.food) {
output+="<li><a title='" + data.food[i].title + "' href='"+data.food[i].link+"'><img title='" + data.food[i].title + "' src='"+data.food[i].image+"' /></li>";
}
So final code:
var data={"food":[
{
"title":"Pumpkin Spice Bread Recipe",
"image":"img/bread.jpg",
"link":"http://willowbirdbaking.com/2011/09/18/pumpkin-spice-pull-apart-
bread-with-butter-rum-glaze/"
}
]}
var output="<ul>";
// Create a variable to temporarily store the data
for (var i in data.food) {
output+="<li><a title='" + data.food[i].title + "' href='"+data.food[i].link+"'>" + data.food[i].title + "<img title='" + data.food[i].title + "' src='"+data.food[i].image+"' /></li>";
}
output+="</ul>";
// Once we go through all of the elements in the array,
// we use the output variable to populate the placeholder div.
document.getElementById("food").innerHTML=output;
And jsfiddle.
It is inside the <a> tag. You just need a href attribute on it for it to look like a real link.
I have this javascript code where it goes for each movies in jsonp dataType. For each movies I have to display its thumbnail image and its title together with the star rating. To display the star symbols below for each movies I have this code:
var include = '<div class="rateit" data-rateit-value="2.5" data-rateit-ispreset="true" data-rateit-readonly="true"></div>';
$(".prediction").html(include); //DISPLAYS THE PREDICTION RATING
It simply sets the html content of the class prediction to this -> <div class="rateit" data-rateit-value="2.5" data-rateit-ispreset="true" data-rateit-readonly="true"></div>
I tried to use this on directly on my html code and it is fully working I can see the stars. Here it is:
But I tried this on javascript and it is not displaying. I just want to have ratings below for each and every movies.
This is my javascript code:
var html = '';
var count = 0;
$.each(data.movies, function(index, movie) {
html += '<div class="item col-xs-6 col-md-3">';
html += '<div class="thumbnail" style="min-height:320px;max-height:320px;">';
//add link here
html += '<a href="viewMovieDetails.php?id=' + movie.id + '">'
html += '<img src="' + movie.posters.detailed + '" style="width:175px; height: 230px;" class="img-responsive" alt="" ></a>';
html += '<div class="caption">';
html += '<h5>' + movie.title + '</h5>';
html += '<div class="prediction"></div>';
html += '</div></div></div>';
//set a delay (1second) for a call on rotten tomatoes api and
//store data on db
if(count > 5){
setTimeout(function() { storeDataOnDB(movie.id);; }, 1000);
count = 0;
}
else{
count++;
}
});
// Append movies
$('#movie_recommend').html(html);
var include = '<div class="rateit" data-rateit-value="2.5" data-rateit-ispreset="true" data-rateit-readonly="true"></div>';
$(".prediction").html(include); //DISPLAYS THE PREDICTION RATING
What do you think is wrong? Am I missing something? or is there other way to do it. Thanks for the help.
You should notify RateIt plugin, that new data is available, just add this:
$(".rateit").rateit();
after $(".prediction").html(include);
I'm trying to parse an XML in a server and getting that XML's element image URL and then showing it into my document. And to be sure Im also putting some condition where if XML isn't parsed then alert me, but its not alerting me since the parsing is a success. The problem is im not getting anything when load the function.
var xmlDoc = Obj.responseXML;
if(xmlDoc){
var count = xmlDoc.getElementsByTagName("item").lenght;
for(var i = 0; i <= count; i++){
document.getElementById("flow").innerHTML += "<div class='item'> <img class='content' src='" + xmlDoc.getElementByTagName("icon")[i].childNodes[0].nodeValue.replace(/\s+$/g,' ') +"' /></div>";
};
} else {
alert("Parse Not Successfull!");
}
my HTML looks like this,
<div id="coverFlow">
<div class="flow"></div>
</div>
var count = xmlDoc.getElementsByTagName("item").lenght;
^^^^^^
length
^^
and the other issue id!=class
document.getElementById("flow")
^^
<div class="flow"></div>
^^^^^