I hope you're well.
Short:
My HTML reads:
<img id="JavImage">
<script language="JavaScript" type="text/javascript"
src="http://www.foobar.com/Contents.js"></script>
</img>
and my Contents.js reads:
document.getElementById("JavImage").src="https://www.foobar.com/imgURL.jpg";
It displays the image imgURL correctly in FF15, but doesn't display it at all in IE8. I checked the source and FF added the 'src' attribute appropriately, whereas the 'src' attribute had not been appended in IE8.
From my research on these forums, IE has issues with the getElementById and getElementsByName, however <img id="JavImage" name="JavImage"></img> also didn't work.
Please advise. For more information, see below.
Long:
I have a simple HTML page reading:
<script language="JavaScript" type="text/javascript" src="http://www.foobar.com/JavPage.js"></script>`
and JavPage.js reads:
document.write('<!DOCTYPE html><html><head>...<body><a id="JavHeader"><script language="JavaScript" type="text/javascript" src="http://www.foobar.com/Contents.js"></script></a>...</html>');
and Contents.js reads:
document.getElementById("JavHeader").href="www.foobar.com";
document.getElementById("JavHeader").innerHTML="Foobar";
There are various such elements with corresponding IDs in Contents.js.
My intention was to allow the HTML to be written by an external file, so that it can be edited remotely. Is there a more efficient way of doing this?
The simple HTML page renders the entirety of the Javascript, but some elements work in Firefox/Chrome that don't work in IE (See Short). Please advise.
for
<img id="JavImage"><script language="JavaScript" type="text/javascript" src="http://www.foobar.com/Contents.js"></script></img>
image object might not be rendered by browser when your javascript is being called.
so you can make your function to be called after load of page
Related
I am getting a response from an API like so (This is a part of it)
{
"Content": "<span class="PubAPIAd"><script type="text/javascript" src="http://ru.gwallet.com/r1/ad/MTAuMTAyLjIuNzQgODg4OA==/c366792T246999B22980F24848R13t2?data=zmxnsak48w9msqkeq9hbz4dja7u4sstqxoircsqutictr7inboxhwujhu8n1c9scn5t53xs396h6re6nz4u1a1brbnmzzxjt7qy8difcdkgk9g34ngknd9qky7w5udgzrhm64h74abbpyh47djbgb5acp3f1ghb1kfeysy716j133gqhydk3au6ydj8h14aztefkrjfp7fj3mqj54sntbrhosseh397g7g7ns75ja3rhwcq9gzao5m6g8h9zph5sckzeoahibtru5cbda7bpcfmrra&auction_price=0.05"></script></span> <img src="http://aktrack.pubmatic.com/AdServer/AdDisplayTrackerServlet?operId=1&pubId=51762&siteId=51766&adId=95947&adServerId=243&kefact=0.050000&kaxefact=0.050000&kadNetFrequecy=1&kadwidth=320&kadheight=50&kadsizeid=31&kltstamp=1416004675&indirectAdId=0&adServerOptimizerId=2&ranreq=0.05247270006223126&kpbmtpfact=0.050000&dcId=2&tldId=80779&passback=0&imprId=139A6406-07A0-4DD1-8B76-81C35E5EA412&mobflag=1&ismobileapp=1&modelid=604&osid=7&udidtype=0&campaignId=6575&creativeId=0&pctr=0.000000&wDSPByrId=11&imprCap=1&pageURL=http%3A%2F%2Fatt_1617ee24-7ff6-4402-9e8b-77dcb53f880f.com" width="1" height="1" />"
}
I am trying to append the "content" to a div on my web page using Jquery append or js innerHTML to display an ad. However i do not see an image.
document.getElementById('myDiv').innerHTML = response.Content;
But if i hard code this into my HTML to start with it displays an image.
Would really like to know why this is happening and how i can fix it
Note: I have no control over the backend. Also this image is an ad i am trying to load so please disable ad blocker to try viewing it.
EDIT: This is what is see in the console
Resource interpreted as Image but transferred with MIME type text/html: "http://aktrack.pubmatic.com/AdServer/AdDisplayTrackerServlet?operId=1&pubId…mprCap=1&pageURL=http%3A%2F%2Fatt_1617ee24-7ff6-4402-9e8b-77dcb53f880f.com".
EDIT 2 : Here is an example of it Hard Coded (where it renders properly). Need to disable ad blocker to view --> http://jsfiddle.net/0z1cybrf/
I'm assuming that response.Content returns html that you want to insert into myDiv. In this case you can simply use jQuery.
$('#myDiv').append(response.Content);
also as Samuel Liew pointed out in the comments, your string isn't valid. You can fix this by changing the quotes next to the attributes to ' (single quotes).
EDIT - Try this:
$('#myDiv').append('<span class="PubAPIAd"><script type="text/javascript" src="http://ru.gwallet.com/r1/ad/MTAuMTAyLjIuNzQgODg4OA==/c366792T246999B22980F24848R13t2?data=yydr8ogr3e5zsn1cacgexhma83oaf1xzjfyna3mgdwi473hf3wjcwujhu8n1c9scn5t53xs396h6re6nz4u1a1brbnmzzxjt7qy8difcdkgk9g34ngknd9qky7w5udgzrhm64h74abbpyh47djbgb5acp3f1ghb1kfeysy716j133gqhydksc3h869rc47kzse66wx4hpx4uiqj54sntbrhosseh397g7g7ns75ja3rhwcq9gzao5m6g8h9zph5sckzeoahibtru5cbda7bpcfmrra&auction_price=0.05"></script></span><img src="http://aktrack.pubmatic.com/AdServer/AdDisplayTrackerServlet?operId=1&pubId=51762&siteId=51766&adId=95947&adServerId=243&kefact=0.050000&kaxefact=0.050000&kadNetFrequecy=1&kadwidth=320&kadheight=50&kadsizeid=31&kltstamp=1416004779&indirectAdId=0&adServerOptimizerId=2&ranreq=0.20811005185761733&kpbmtpfact=0.050000&dcId=2&tldId=0&passback=0&imprId=E1FB9573-FF52-4CAC-BFE1-92EDBDC23FD2&mobflag=1&ismobileapp=1&modelid=604&osid=7&udidtype=0&campaignId=6575&creativeId=0&pctr=0.000000&wDSPByrId=11&imprCap=1&pageURL=http%3A%2F%2Fatt_1617ee24-7ff6-4402-9e8b-77dcb53f880f.com" width="1" height="1" />');
Tell me if you get the same result.
### Final Edit ###
It seems the javascript in the script tag isn't executing and that's why the image isn't showing up. To prove this you can insert the Content like you were doing before, and then visit the link given in the <script> src attribute. Copy the script and go to your console. Paste the code into the console and press enter. The image should show up. At least it did for me. You can try hardcoding the script tag into your html, because that wont change.
HTML code
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" ></script>
<script src="functions.js></script>
<script type='text/javascript' src='http://ru.gwallet.com/r1/ad/MTAuMTAyLjIuNzQgODg4OA==/c366792T246999B22980F24848R13t2?data=yydr8ogr3e5zsn1cacgexhma83oaf1xzjfyna3mgdwi473hf3wjcwujhu8n1c9scn5t53xs396h6re6nz4u1a1brbnmzzxjt7qy8difcdkgk9g34ngknd9qky7w5udgzrhm64h74abbpyh47djbgb5acp3f1ghb1kfeysy716j133gqhydksc3h869rc47kzse66wx4hpx4uiqj54sntbrhosseh397g7g7ns75ja3rhwcq9gzao5m6g8h9zph5sckzeoahibtru5cbda7bpcfmrra&auction_price=0.05'></script>
</head>
<body>
<DIV id="myDiv" ></DIV>
</body>
</html>
jQuery Code functions.js
$(document).ready(function() {
$(window).load(function() {
$('#myDiv').append("<img src='http://aktrack.pubmatic.com/AdServer/AdDisplayTrackerServlet?operId=1&pubId=51762&siteId=51766&adId=95947&adServerId=243&kefact=0.050000&kaxefact=0.050000&kadNetFrequecy=1&kadwidth=320&kadheight=50&kadsizeid=31&kltstamp=1416004779&indirectAdId=0&adServerOptimizerId=2&ranreq=0.20811005185761733&kpbmtpfact=0.050000&dcId=2&tldId=0&passback=0&imprId=E1FB9573-FF52-4CAC-BFE1-92EDBDC23FD2&mobflag=1&ismobileapp=1&modelid=604&osid=7&udidtype=0&campaignId=6575&creativeId=0&pctr=0.000000&wDSPByrId=11&imprCap=1&pageURL=http%3A%2F%2Fatt_1617ee24-7ff6-4402-9e8b-77dcb53f880f.com' width='1' height='1' />");
});
});
I'm looking to make a very basic html doc that shows an image (or multiple images) and when I click on the image, it hides the image. I can achieve this using jquery. It works in jsfiddle but for some reason will not work when I just click on the html doc on my desktop and launch it in the browser that way. What am I missing? Here is the exact code as I have it in my html doc:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<img id="book" src="C:\Users\user123\Desktop\homeButton.png" alt="" width="100" height="123">
<script>
$(document).ready(function(){
$( "#book" ).click(function( event ) {
event.preventDefault();
$( this ).hide();
});
});
</script>
</body>
</html>
And here is a link to the working jsfiddle:
http://jsfiddle.net/pLXGu/
When I launch the html doc on my desktop, it takes a long time to load the image (15-20 sec) and when I click the image nothing happens (supposed to hide the image on click).
Local documents have no protocol, so you need to supply one for jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
try
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
When you start a URL with //, browser will try to retrieve the resource using the protocol that is currently being used. So if your URL was //ajax.googleapis.com/...,
when the main document is online (aka document retrieved using HTTP protocol), it will become http://ajax.googleapis.com/...
But in the desktop, you are using the file:// protocol. So it becomes file://ajax.googleapis.com/.... And that does not refer to any filesystem location.
To remedy this, have your link use the full URL including the protocol name.
<script src="http://ajax.googleapis.com/...">
JQuery librery URL must be give it as
https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
instead of
//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
I have a JavaScript code that I got from the site: http://www.micahcarrick.com/change-image-with-jquery.html I only modified the name of the images as to use .png files I have. The issue is if I open this in a web browser locally, then when I click on one of thumbnails called django.gif I am directed to the actual image rather then the new image replacing the other. However, if I put this .html script on a Godaddy.com website and go to it with the same web browser it does work correctly just like the original site: http://www.micahcarrick.com/code/jquery-image-swap/index.html . I notice that at the site I got this code from the author mentions that "The thumbnails are links to full size versions of the images. If a user does not have JavaScript, the links still go to the large image." Does this mean I don't have Java Script? I can run other simple JavaScript codes locally. Why does this work when I put it on a site, but does not work when testing locally, even when using the exact same web browser? Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example: Change Image with jQuery</title>
<style type="text/css">
body { width: 600px; margin: auto; }
#imageWrap {
width: 640px;
height: 420px;
background: url('ajax-loader.gif') center center no-repeat;
}
</style>
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.thumbnail').live("click", function() {
$('#mainImage').hide();
$('#imageWrap').css('background-image', "url('ajax-loader.gif')");
var i = $('<img />').attr('src',this.href).load(function() {
$('#mainImage').attr('src', i.attr('src'));
$('#imageWrap').css('background-image', 'none');
$('#mainImage').fadeIn();
});
return false;
});
});
</script>
</head>
<body>
<h1>Example: Change Image with jQuery</h1>
<p>
Main image is replaced using jQuery when a thumbnail is clicked. See full
description at <a
href="http://www.micahcarrick.com/change-image-with-jquery.html">Change
Image with jQuery</a>
</p>
<a href="bidu.png" class="thumbnail"><img src="django.gif"
alt="Image 1"/></a>
<a href="athex.png" class="thumbnail"><img src="django.gif"
alt="Thumbnail 2"/></a>
<div id="imageWrap">
<img src="bidu.png" alt="Main Image" id="mainImage"/>
</div>
</body>
</html>
Thank you,
Tom
This line right here is what's causing your issues:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
The "//" before the URL tells the browser to use the same protocol as the page is, and when running locally, the protocol is going to be "file:" which the browser will use to look into your local drive to find the jquery library (which it won't find, thus breaking the page). To fix this, prepend "http:" or "https:" to the URL so it looks like
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
I see two problems.
1. Your script tag src attribute for jQuery will not locate the correct resource. Running locally, this syntax (//ajax...) will resolve as file:///ajax.googleapis.com/..., which is not where jQuery is. Try putting a http:// or https:// in front of it.
2. You're using a deprecated jQuery function. .live() is not in version 1.6.2 - you need to use .on() instead, like so:
$(".thumbnail").on("click",function() { ... });
That should work.
Hope this helps.
change the src of the script tag to include the http: protocol
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"
I tried Zclipboard.js for copying the value but it didn't work.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.steamdev.com/zclip/js/jquery.zclip.min.js"></script>
<script>
$(document).ready(function(){
$('#copy-description').zclip({
path:'ZeroClipboard.swf',
copy:$('#description').text()
});
});
</script>
<a id="copy-description" href="#" class="">Copy</a>
<p id="description">This should copy</p>
I referred it from this link. I am just getting a copy link with flash player embedded in it. But I cannot click it. What should I change in code, so that I can copy the description text on clicking copy link
I think the problem might be the swf file. Try this. Hope it works
$(document).ready(function(){
$('#copy-description').zclip({
path:'http://www.steamdev.com/zclip/js/ZeroClipboard.swf',
copy:$('#description').text()
});
});
Make sure that the swf is loaded (using Firebug > Network) and that it is located above the link, as well with Firebug. Most likely the first one will solve your problem
I am using following code for my website:
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script src="js/jquery-migrate-1.2.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("img#logo").load(function() {
alert('Hello');
});
});
</script>
And this is not working in IE but works fine in Firefox, Chrome and Safari.
I can confirm that your code does work in IE 8 on windows 7 64 using unminified version:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script>
$(document).ready(function () {
console.log($.fn.jquery);
$("img#logo").load(function () {
console.log('Hello');
});
});
</script>
</head>
<body>
<img id="logo" src="somegig.gif" onload="console.log('load');"/>
</body>
</html>
This will log 1.10.1 then load and then Hello, maybe you have to validate your html and make sure your html is valid maybe that's a problem.
a quick review of http://api.jquery.com/load-event/ provides some caveats:
Caveats of the load event when used with images
A common challenge developers attempt to solve using the .load()
shortcut is to execute a function when an image (or collection of
images) have completely loaded. There are several known caveats with
this that should be noted. These are:
It doesn't work consistently nor reliably cross-browser
It doesn't fire correctly in WebKit if the image src is set to the same src as before
It doesn't correctly bubble up the DOM tree
Can cease to fire for images that already live in the browser's cache
Note the first and fourth caveats. Clear the cache and try again.
Also, do you need the jQuery migrate ? Lose it and see if it is glitching your IE