I am getting images in a loop and in loop I am making a html string, now within loop based on condition I want to add few attributes to specific images, that's not working properly for me, please help .
for(var i = 1; i <= 17; i++) {
//var ind = parseInt(i / 4);
var ind = i;
if(ind==1){
var step = " data-step=\'4\' data-show=\'sports\'data-intro=\'community\'" ;
}
else if(ind==2 ){
var step = " data-step=\'5\' data-show=\'sports\'data-intro=\'community\'" ;
}
else {
setp ='';
}
html +='<img src="'+baseurl+'front/images/layers/small/'+i+'.png" class="img-block cur" id="img-block-'+i+'" data-ls=\'{"index":'+ind+',"width":"'+arrWidthSizes(i)+'"}\' onclick="LoadDemoPopup_create('+i+')" />';
}
How do I add this step within image tag?
Maybe a silly question but I am stuck with this.
Related
I asked this previously but didn't get an answer that applied to my project. I am trying to load images to a table dynamically without having to use server side code. It works, but I want to be able to have an infinite loop that breaks when a picture fails to load, rather than hard code the number of rows I need. That way I won't ever have to update the code, I'll just be able to add pictures to a folder if I want to expand the table.
Right now the "onerror" attribute hides the failed image, but I also want to break out of the outer loop (loop1).
function headCatalogLoader() {
var table = document.getElementById("catalog");
var meshNum = 0;
var uniqueID = 0;
loop1:
for (var i = 0; i <= 50; i++) { // i made it 50 instead of infinite for now
var row = table.insertRow(i);
loop2:
for (var k = 0; k <= 2; k++) { // 2 is because 3 columns
var skinTone = "none";
var cell = row.insertCell(k);
if (k == 0) {
skinTone = "lgt";
}
else if (k == 1) {
skinTone = "med";
}
else if (k == 2) {
skinTone = "drk";
}
cell.innerHTML = "<img src=\"headimgs/head" + skinTone + meshNum + ".png\" id=\"head" + uniqueID + skinTone + "\" onclick=\"previewIt(this)\" onerror=\"$(this).hide();\" />";
uniqueID++;
}
meshNum++;
}
var tbody = $("table tbody");
tbody.html($("tr",tbody).get().reverse());
}
Breaking from within the attribute is out of the loop's scope and doesn't work. Also using
$('img').on("error", function () {
break loop1;
});
inside loop2 doesn't do anything. Someone suggested I use a recursive method and rewrite my function, but that won't work for me since I'm dynamically creating a table and using image names that correspond to the loop. Any help or suggestions would be wonderful!
I'm thinking you could use an XMLHttpRequest to check the response for that URL before trying to put it onto the page. If status is not 404 then insert image else break loop1. Something like this might work:
function headCatalogLoader() {
var table = document.getElementById("catalog");
var meshNum = 0;
var uniqueID = 0;
loop1:
for (var i = 0; i <= 50; i++) { // i made it 50 instead of infinite for now
var row = table.insertRow(i);
loop2:
for (var k = 0; k <= 2; k++) { // 2 is because 3 columns
var skinTone = "none";
var cell = row.insertCell(k);
if (k == 0) {
skinTone = "lgt";
} else if (k == 1) {
skinTone = "med";
} else if (k == 2) {
skinTone = "drk";
}
// note: you'll need to use an absolute path for imageUrl
var imageUrl = "http://example.co.uk/example/headimgs/head" + skinTone + meshNum + ".png";
var xhttp = new XMLHttpRequest();
xhttp.open('HEAD', imageUrl, false);
xhttp.send();
if (xhttp.status !== 404) {
cell.innerHTML = "<img src=" + imageUrl + " id=\"head" + uniqueID + skinTone + "\" onclick=\"previewIt(this)\" onerror=\"$(this).hide();\" />";
uniqueID++;
} else {
break loop1;
}
}
meshNum++;
}
var tbody = $("table tbody");
tbody.html($("tr", tbody).get().reverse());
}
Note: you'll need to use an absolute path for the XMLHttpRequest. I've just used example.co.uk/example because I don't know your URL.
I'm guessing you're only expecting it to error if the image is not found, because that would indicate that you've reached the last image in your folder, which is why I checked !== 404, if you want to break in the case of any error (such as 500 internal server error), it might be best to change if (xhttp.status !== 404) to if (xhttp.status === 200).
I've got several items I'm trying to display within a canvas. I've json my php data to support doing this in javascript.
Now I'm trying to iterate the database names with a for loop so I don't have to write the code for each.
Here's what I've got so far:
for ((var i=2; i<=17; i++) && (var j=3; i<=18; j++)){
if((row.g1c[j]y + row.g1c[j]m != 0) && ((12*row.g1c[j]y + row.g1c[j]m) > (360 + (12*row.O1y + row.O1m)))){
var g1c[i]w = (360-(12*row.g1c[i]y + row.g1c[i]m)-(12*row.O1y + row.O1m));
} else if (row.g1c[j]y +row.g1c[j]m != 0){
var g1c[i]w = ((12*row.g1c[j]y + row.g1c[j]m)-(12*row.g1c[i]y + row.g1c[i]m));
} else {}
var g1c[i]x = ((12*row.g1c[i]y + row.g1c[i]m)-(12*row.O1y + row.O1m));
var lineHeight = 15;
var maxWidth = 2.5*(g1c[i]w);
var x = 80+(2.5*(g1c[i]x))+(maxWidth/2);
}
This isn't working and I'm 99.999% sure it has to do with the i and j syntax, but everything I've looked up and tried hasn't worked.
If someone would tell me where my screw-up is, I'd be eternally grateful.
Thanks in advance!
Decided do go down the PHP route vice Javascript to avoid having to redo my database...
I'm creating a for loop for each database column and row...
for ($j=3; $j<=$count; $j++){
$l = "g1c".$j."m";
$m = "g1c".$j."y";
I can then use php logic as needed for each row of data that needs to be assessed...
if(($row[$l] + $row[$m]) != 0){
.... do something
}
You can probably do this:
for (var i=2; i<=17; i++){
for (var j=3; i<=18; j++){
if((row.g1c[j]y + row.g1c[j]m != 0) && ((12*row.g1c[j]y + row.g1c[j]m) > (360 + (12*row.O1y + row.O1m)))){
var g1c[i]w = (360-(12*row.g1c[i]y + row.g1c[i]m)-(12*row.O1y + row.O1m));
} else if (row.g1c[j]y +row.g1c[j]m != 0){
var g1c[i]w = ((12*row.g1c[j]y + row.g1c[j]m)-(12*row.g1c[i]y + row.g1c[i]m));
} else {}
var g1c[i]x = ((12*row.g1c[i]y + row.g1c[i]m)-(12*row.O1y + row.O1m));
var lineHeight = 15;
var maxWidth = 2.5*(g1c[i]w);
var x = 80+(2.5*(g1c[i]x))+(maxWidth/2);
}
}
I need star rating. In page value are comming from Java/Backend.(I need only javascript or prototypejs solution.)
Eg: If value come 1 then it must show 1 STAR.
If value come 2 then it must show 2 STAR and so on...till 5
This whole thing is happening in dynamic . I am using below code, but this does not create ID.
Javascript
function display() {
var x = "yr";
show_image(x ,2) ;
}
function show_image (id,number) {
var x = number;
var y = id;
for (var i =0; i<x; i++){
var img = document.createElement("img");
img.src = "stars.png";
document.getElementById(y).appendChild(img);
}
}
Thanks for help.
Check this fiddle1 fiddle2
//Just for Demo purpose
function getRating() {
var number = prompt("Enter the rating?");
if(number *= 1 > 0 && number <=5) {
show_image('yr', number);
} else {
alert("Enter valid rating, greater than 0");
}
}
function show_image (id,number) {
document.getElementById(id).innerHTML = '';
for (var i =0; i<number; i++){
var img = document.createElement("img");
img.height=10;
img.src = "http://icons.iconarchive.com/icons/custom-icon-design/flatastic-2/512/star-full-icon.png";
document.getElementById(id).appendChild(img);
}
}
Your code has no issue, it is working fine. Simplest way to call this function from your Java Servlet/JSP response is, added <script>show_image('_some_id_', number_of_star)</script>
Add comment, if you have any query, or if my understanding of problem itself is not correct.
Hello there I'm new to the world of Javascript, and I really really need help for school project.
What I want to do, is to display on another windows not only the text with the price, but also the image itself. I tried to add the id on the image and added it to function. Anybody please?
I have this code here in the body element along with other images:
Nike 1
price:$110.99
Size: 9
10
11
<input type= submit value=submit onclick="a()">
This is my script function:
<script>
function a(){
var size ="";
var price = 0;
if(document.getElementById('nike1').checked)
{
price=document.getElementById("nike1").value;
var x =document.getElementById("myimg").src;
}
else if(document.getElementById('nike2').checked)
{
price=document.getElementById('nike2').value;
}
var inputs = document.getElementsByName('r1');
for(var i =0; i<inputs.lenght; i++){
if(inputs[i].checked){
size = inputs[i].value;
}
}
var inputs1 = document.getElementsByName('r2');
for(var i =0; i <inputs1.lenghts;i++){
if(inputs1[i].checked){
size=inputs1[i].value;
}
}
var myWindow = window.open("","MsgWindow","width=200,height=400");
myWindow.document.write("<p><h1>Order Detail</h1> Your ordered Nike shoes<br/> Size:"+size + "<br/>Price:S"+ price + "</p>");
}
Please indent you code for readability. Here it is, a little bit cleaned and with error fixes.
function a() {
var size, price;
if (document.getElementById('nike1').checked) {
price = document.getElementById("nike1").value;
var x = document.getElementById("myimg").src;
} else if (document.getElementById('nike2').checked) {
price = document.getElementById('nike2').value;
}
var inputs = document.getElementsByName('r1');
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
size = inputs[i].value;
}
}
var inputs1 = document.getElementsByName('r2');
for (var i = 0; i < inputs1.length; i++) {
if (inputs1[i].checked) {
size = inputs1[i].value;
}
}
var myWindow = window.open("", "MsgWindow", "width=200,height=400");
myWindow.document.write('<p><h1>Order Detail</h1> Your ordered Nike shoes<br/>'+
'<img src="path/to/your/image.png" alt="Nike shoes"></img>'+
'<p>Size: ' + size + '<br/>Price: ' + price + '</p>');
}
To solve your problem, write an img element with a src attribute. Change "path/to/your/image.png" with the real path to the image you want to display.
There were also errors in your code. Your two for loops contained a wrong value: your wrote lenght in the first and lenghts in the second. I fixed it. I tested it and it works. This fiddle is fairly simple and incomplete but shows you the result.
I'm new to Stack Overflow and also in JavaScript. So, first of all, hello to everyone and thanks in advance for your help.
I'm using Incomedia Website X5 Evolution to create a website. On one of the page, I want to populate a table with data from a server. So, I've created a table and insert in each cell this HTML code:
<!--#0000,0000-->
Values are representing the row and the column. I managed to write a javascript to change the value of each cell. But when I want to replace the content of the HTML pahe using innerHTML, it does not work. Nevertheless, everything seems correct as the old and the new html content is the same. Even if I just use again the original variable, it still doesn't work.
Could you tell me where is the problem please ?
Here the javascript code:
<script>
var i;
var div = document.getElementById('imTableObject_1');
div = document.getElementsByTagName('table');
var htmlContent = div[0].innerHTML;
var newHtmlContent = div[0].innerHTML;
var test = div[0].innerHTML;
var row,col;
//I can't understand why the scrip stop running at this line. I didn't change anything...
div[0].innerHTML = newHtmlContent ;
for (i=htmlContent.length - 5; i > -1; i--) {
if(htmlContent.charAt(i)=='#') {
//alert(i);
//alert(htmlContent.substring(i+6,i+10));
row = parseInt(htmlContent.substring(i+1,i+5));
col = parseInt(htmlContent.substring(i+6,i+10));
newHtmlContent = insertText(row,col,newHtmlContent,i);
};
};
alert(div[0].innerHTML);
alert(newHtmlContent );
//This does not work
div[0].innerHTML = newHtmlContent ;
alert("Done !");
function insertText (row, col, text, index) {
var length;
var newText;
length = getTextLength (text,index + 13);
//alert(htmlContent.substring(index+13,index+13+length));
newText = text.substring(0,index+13);
newText += "Titi too !";
newText += text.substring(index+13+length,text.length);
//alert(newText);
return newText ;
}
function getTextLength (text,startIndex) {
var i = 0;
for(i = startIndex ; i < text.length ; i++) {
//alert(text.substring(i,i+7));
if(text.substring(i,i+7) == "</span>") {
return i - startIndex ;
};
};
return -1;
}
</script>
You set:
var newHtmlContent = div[0].innerHTML;
And then:
div[0].innerHTML = newHtmlContent ;
You're setting its content to what its content already was. Hence, no change occurs.
Change the 3rd row to
div = document.getElementsByTagName('td');
to look for <td> tags instead of <table> tags. <table>s can't directly store text data so I guess their innerHTML doesn't work as expected either.
I managed to get it working here: http://jsfiddle.net/mgabor/ZMaW6/1/