Not sure how to write this the correct way. i can make it work but when i view source it looks like this
<img "="" "style="width:30%; height:30%;" src="correctsource"></img>
as you can see at the beggining of the image tag their is two extra quotes & a equal sign.
Here is my code
var img = $(this).attr('src');
//grab the visible div and the div with class edititable within it and append image
$(".open:visible").find('.edititable').append('<img src="' + img + '" "style="width:30%; height:30%;" ">');
Change to:
foo.append(
$("<img />", {
src: img,
style: "width: 30%; height: 30%"
})
);
It's easier to avoid mistakes with mismatched quotes this way, and generally improves readability too
Try this, you had too many double quotes in the string.
$(".open:visible").find('.edititable').append('<img src="' + img + '" style="width:30%; height:30%;">');
remove last double quotes then it will work.You added one extra .
that is write like
.................height:30%;">');
Close, your string simply was formatted incorrectly. You had an extra " infront of style. Tech you wrote it as
$(".open:visible").find('.edititable').text('<img src="' + img + ' " style="width:30%; height:30%;" ">');
Relevant fiddle: http://jsfiddle.net/6cLYf/
Related
I want to display a div inside Colorbox plugin, but it is not working as there are many double quotes inside the div element and is causing problems so how can I do it.
Here is my code
<script>
$(document).ready(function() {
if(localStorage.getItem('welcomehelloState') != 'shown'){
function openColorBox(){
$.colorbox({transition: "fade", top: "2%", width:"67%", height:"17%", html: "<section class="related">
<p>New Content:-</p>
<a href="/part-2/index>
<img src="img/related/Prdha.png" />
<h3>Art</h3>
</a>
<a href="/part-2/index6">
<img src="img/related/Kavi.png" />
<h3>Games</h3>
</a>
</section>"});
}
setTimeout(openColorBox, 100);
localStorage.setItem('welcomehelloState','shown')
};});
</script>
As you can see there are many double quotes and the brackets are not syncing.
The problem is that when you start a string with a double-quote (") and you place an other quote in the string, JS thinks you ended the string. Thats why the quotes which have to be in the string, have to be escaped: \"
Example: var x = "En then he said: \"Hi there\", with a big smile";
Also, JS does not like linebreaks. you have to escape these too if you need it badly, but the better way is to break the string into multiple strings
Example:
var x = "this is" +
"A multiline" +
"String.";
Your code, escaped well, has to be this:
<script>
$(document).ready(function() {
if(localStorage.getItem('welcomehelloState') != 'shown'){
function openColorBox(){
$.colorbox({transition: "fade", top: "2%", width:"67%", height:"17%", html: "<section class=\"related\">" +
"<p>New Content:-</p>" +
"<a href=\"/part-2/index\">" +
"<img src=\"img/related/Prdha.png\" />" +
"<h3>Art</h3>" +
"</a>" +
"<a href=\"/part-2/index6\">" +
"<img src=\"img/related/Kavi.png\" />" +
"<h3>Games</h3>" +
"</a>" +
"</section>"});
}
setTimeout(openColorBox, 100);
localStorage.setItem('welcomehelloState','shown')
}
});
</script>
If you are using Jquery and making html then make sure there is no enter in lines as jquery won't accept this and it will create an syntax error. use your code in this way..
$.colorbox({transition: "fade", top: "2%", width:"67%", height:"17%", html: '<section class="related"><p>New Content:-</p><img src="img/related/Prdha.png" /><h3>Art</h3><img src="img/related/Kavi.png" /><h3>Games</h3></section>'});
Thank you :)
this one may be simple but it has eluded me. I have Javascript code which builds elements in the DOM (using JSON from a server script). Some of the elements have "onclick" calls that I want to pass the ID variable to.
I cannot seem to get the onclick="downloadImg("' + d.data_id + '")" syntax right. What should it be. The code below does not work. Thanks.
temp_html = temp_html + '<img src="/link/to/img.png" onclick="downloadImg("' + d.data_id + '")">';
If you use the double quotations, you will close the previous one, so you create a conflict. So replace " with a single quotation + escape \' like this:
temp_html = temp_html + '<img src="/link/to/img.png" onclick="downloadImg(\'' + d.data_id + '\')">';
Your line should be:
temp_html = temp_html + '<img src="/link/to/img.png" onclick="downloadImg(\\"' + d.data_id + '\\")">';
You basically have many layers of quotes so the
double slash
creates a
\"
in the output that escapes the quote once it gets outputted to HTML
<img src="/link/to/img.png" onclick="downloadImg("' + d.data_id + '")">';
This will resolve to something like: <img src="/link/to/img.png" onclick="downloadImg("1")">
As you can see you have double quotes inside double quotes. Something like this should do it:
<img src="/link/to/img.png" onclick="downloadImg(\'' + d.data_id + '\')">
Change your double quotes to single quotes and escape them:
onclick="downloadImg(\'' + d.data_id + '\')"
I need to add the IE hack for background-size: cover to a dynamically created background image.
I must add thisto my elements inline css:
<div style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + imgsrc + "', sizingMethod='scale');">
I have tried:
var iehackstring = "filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + imgsrc + "', sizingMethod='scale');";
$(this).css(iehackstring);
and:
var iehackstring = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + imgsrc + "', sizingMethod='scale');";
$(this).css("filter" : iehackstring);
But cannot get it to work.
Does anyone know of a good way to do this?
It's not that elegant, but you could try this:
$(this).attr("data-original-style", $(this).attr("style"));
$(this).attr("style", $(this).attr("style") + "[your new style comes here"]);
Just in case you need the original again.. you can just get it from attr("data-original-style") and set it in style again.
I am working with binding dynamic images in the image tag.My problem is Iam not be able to display the image when name contains space.Here is the code:
for(var i=0;i<length;i++)
{
alert(names[i]);
<img style="width:100px;height:100px" src="Water lilies.jpg"></img>/////This code works if name is given directly
imageTags='<img style="width:100px;height:100px" src=' +names[i]+ '></img>';
$("#images").append(imageTags);
}
here Iam getting the two image names in the alert --"Sunset.jpg" and "Water lillies.jpg".
I can see the image sunset.jpg but not Water lillies.jpg.
In the console the image tag looks likes this:
<img style="width:100px;height:100px" src="Water" lilies.jpg>
and got an error:"Failed to load resource "
But when I avoid the space between Water and lillies it works.How can i solve this problem??
Thanks
In the general case:
If an attribute value contains spaces, then it must be quoted. You have failed to include quote marks.
src="' + names[i] + '">
But building HTML by mashing strings together is error prone and hard to read. Don't do that:
var img = jQuery('<img>').
attr('src', names[i]).
css({ width: "100px", height: "100px" });
In this specific case:
URLs can't include (literal) spaces. Encode them.
var img = jQuery('<img>').
attr('src', encodeURIComponent(names[i])).
css({ width: "100px", height: "100px" });
imageTags='<img style="width:100px;height:100px" src=' +names[i]+ '></img>'; // your code
imageTags='<img style="width:100px;height:100px" src="' +names[i]+ '"></img>'; // change
hope this helps..
I am using a dynamic jquery carousel to show thumbnail images in the home page....The carousel is working fine...and i want to add a tooltip to each image....for this i am using jquery tooltip....on hover tooltip should display the original image,uploaded by and so on...
The javascript that adds the tooltip to each image is as follows...
function mycarousel_getItemHTML(url)
{
var url= url.split(",");
return '<img src="' + url[0] + '" width="75" height="75" alt="" />';
};
url[5]=original img src
url[1]=title
url[6]=category name
url[2]=no of views
url[3]=uploaded by
url[0]=thumbnail img source
the above javascript gives me the following error
missing ) after argument list
how can i escape single and double quote properly...Please help me...-
I think the onmouseover portion is wrong, and you want:
onmouseover="Tip(\'<img src=\\\''+url[5]+'\\\' /><br/><b>'+url[1]+'</b><br />Category:'+url[6]+'<br/>Views:'+url[2]+'<br/>Uploaded by:'+url[3]+'\')"
Let me know if that doesn't work - my head's hurting from trying to be a JavaScript interpreter. I think that's on the right lines though.
p.s. I fixed your <img> tag - I think in general <img> tags should be self-closing <img... />, not <img...></img>.
Assuming the HTML " entity gets interpreted properly (and reformatting so people can see what's going on.):
function mycarousel_getItemHTML(url)
{
var url= url.split(",");
// wrapping attributes in double-quotes, so use double-quote
// entity within attribute values:
return '<a href="' + url[4] + '" ' +
'onmouseover="Tip(\'<img src="' + url[5]+'"/><br/>' +
'<b>' + url[1] + '</b><br />' +
'Category:' + url[6] + '<br/>' +
'Views:' + url[2] + '<br/>' +
'Uploaded by:' + url[3] + '\')" ' +
'onmouseout="UnTip()">';
};
Note: you should probably entity-encode all the < to < inside the onmouseover attribute too. That might leave less scope for browsers to bork the tooltip