Image roll over script not working as expected - javascript

This is how I am calling the JavaScript function in my HTML page:-
<script type="text/javascript" src="imagerollover.js"></script>
</script>
<script type="text/javascript">
//Following function should be called at the end of the page:
imagerollover();
</script>
</head>
<body>
.
.
.
this is my imagerollover.js:-
function imagerollover(){
var allimages=document.getElementsByTagName("img")
var preloadimages=[]
for (var i=0; i<allimages.length; i++){
if (allimages[i].getAttribute("data-over")){ //if image carries "data-over" attribute
preloadimages.push(new Image()) //preload "over" image
preloadimages[preloadimages.length-1].src=allimages[i].getAttribute("data-over")
allimages[i].onmouseover=function(){
this.src=this.getAttribute("data-over")
}
allimages[i].onmouseout=function(){
this.src=this.getAttribute("data-out")
}
} //end if
} //end for loop
}
//Usage: Call following function at the end of the page:
//imagerollover()
Image tags:
<img src="knitting1.jpg"
data-over="knitting2.jpg"
data-out="knitting1.jpg"
alt="Logo" width="400px" height="90" align="middle" />
Also, both images knitting1.jpg and knitting2.jpg exist in my site's root folder. I don't know what is wrong.
I placed an alert inside imagerollover.js file in the beginning. It is getting called but it is not showing any roll over effect. Why?

You need to run this onload - your images tags are not yet available to the script when you execute the function - you are not actually following the instruction of the script which should have been placed at the end of the page or in my suggestion in the onload
<head>
<script type="text/javascript" src="imagerollover.js"></script>
</script>
<script type="text/javascript">
window.onload=function()
//Following function should be called at the end of the page OR on window.onload!
imagerollover();
}
</script>
</head>

Related

Global variable from a newly loaded script is not accessible within eventlistener

Here is my html file that loads two scripts.
index.html
<html>
<body>
<div id="main">
<div id="content"></div>
</div>
<div id="textscript">
<script id="text" type="text/javascript" src=".scripts/script1.js"></script>
<div>
<div id="indexscript">
<script id="scr" type="text/javascript" src="./index.js"></script>
<div>
</body>
</html>
Scripts are as follows:
script1.js
var x=1
script2.js
var x=2
index.js
var e = document.getElementById("content")
e.textContent=x
function update(e){
replaceScript()
}
document.addEventListener('keypress',update)
function replaceScript(){
document.getElementById("text").remove()
var s = document.createElement("script")
s.setAttribute("id","text")
s.setAttribute("src","./scripts/script2.js")
s.setAttribute("type","text/javascript")
document.getElementById("textscript").appendChild(s)
var c= document.getElementById("content")
c.textContent=x
}
On key press, the expected behavior is that, script1 must be removed and script2 must be added. As a result value of x must be 2 and consequently textContent of div with id="content" must be 2. But it remains that x=1 on first key press. Only on second key press x gets updated to 2.
Can anyone please help.
Thank you.
The script is actually loaded after execution of your function finish. You can listen load event on the script element.
s.addEventListener('load', () => console.log(x));

JavaScript src onload

Ok, I have this code:
<script language="javascript">
window.onload = function(){
var s = document.createElement('script');
s.src = 'jscript.js';
document.getElementsByTagName('body')[0].appendChild(s);
} </script>
<script type="text/javascript" src="https://www.facebook.com/dragosgaftoneanu"
onload = "alert('logged in')"
onerror="alert('not logged in)">
</script>
I want to execute the code from the first script at the onload of the second script. I have jscript.js where it is defined function().
as what i understand, do you want to call the first js file using the second js file?
here is the code
in your file2.html you need to add the src of the first file
<script language="javascript" src='location'></script>
<script language="javascript">
function init()
{
name();//call the function name. It's either in this file or in your first file
}
</script>
<body onload="init()">

javascript module not being found

I have a bunch of web pages where I have an identical construct:
<html>
<head>
<script src="sorttable.js"></script>
<noscript>
<meta http-equiv="refresh" content="60">
</noscript>
<script type="text/javascript">
<!--
var sURL = unescape(window.location.pathname);
function doLoad()
{
setTimeout( "parent.frames['header_frame'].document.submitform.submit()", 60*1000 );
}
function refresh()
{
window.location.href = sURL;
}
//-->
</script>
<script type="text/javascript">
<!--
function refresh()
{
window.location.replace( sURL );
}
//-->
</script>
<script type="text/javascript">
<!--
function refresh()
{
window.location.reload( true );
}
//-->
</script>
</head>
<body>
.
.
.
<script type="text/javascript">
window.onload = function() { sorttable.innerSortFunction.apply(document.getElementById("OpenFace-2"), []); doLoad(); }
</script>
</body>
</html>
This works perfectly in every page except for one, where when the onload function runs it cannot find the sorttable code (which is loaded from sorttable.js up at the top). All these pages are part of the same application and are all in the same dir along with the js file. I do no get any errors in the apache log or the js console until that page loads, when I get:
sorttable.innerSortFunction is undefined
I can't see what makes this one page different. Can anyone see what is wrong here, or give me some pointers on how I can debug this further?
The code I pasted in is from the source of the page where it does not work, but it is identical as the pages where it does work.
Looks like on that page the table with id OpenPhace-2 by which you try to sort have no needed class: sortable
The function innerSortFunction of sorttable object will be present only if there is any table with sortable class exists.

Moving JavaScript from mark-up to separate .js file

My Javascript/html code looks like following which works great and shows country name in Part 1 below.
When i am trying to convert the code in .JS file it doesnt work means doesnt shows the country name in Part 2.. not sure what is wrong in the code
Part 1
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
var strip, strcountry, strcity, strregion, strlatitude, strlongitude, strtimezone
function GetUserInfo(data) {
strip = data.host; strcountry = data.countryName;
}
$(function ()
{
BindUserInfo();
})
function BindUserInfo()
{
document.getElementById('lblCountry').innerHTML = strcountry;
}
</script>
<script type="text/javascript" src="http://smart-ip.net/geoip-json?callback=GetUserInfo"></script>
</head>
<body>
We Ship To <a id="lblCountry"/>
</body>
Part 2
// JavaScript Document
document.write("<script src='http://code.jquery.com/jquery-1.8.2.js' type='text/javascript'></script>");
var strip, strcountry, strcity, strregion, strlatitude, strlongitude, strtimezone
function GetUserInfo(data) {
strip = data.host; strcountry = data.countryName;
}
$(function ()
{
BindUserInfo();
})
function BindUserInfo()
{
document.getElementById('lblCountry').innerHTML = strcountry;
}
document.write("<script type='text/javascript' src='http://smart-ip.net/geoip-json?callback=GetUserInfo'></script>");
Here is the HTML of PArt 2
<head>
<title>Get User Details IP Address, city, country, state, latitude, longitude </title>
<script src="test.js" type="text/javascript"></script>
</head>
<body>
We Ship To <a id="lblCountry"/>
</table>
Include the jQuery reference as a real script tag in your HTML still - and remove the document.write.
Also ; on the end of your var list... Perhaps.
Your <head> tag should be
<head>
<title>Get User Details IP Address, city, country, state, latitude, longitude
</title>
<script src='http://code.jquery.com/jquery-1.8.2.js' type='text/javascript'>
</script>
<script src="test.js" type="text/javascript"></script>
</head>
As Paul notes document.write is deprecated. You should always try to include <script> tags rather than manipulating the DOM. I think that the way you were doing it would mean that the jQuery code in your file would be executing before jQuery had loaded - due to the fact that you are writing the tag directly to the DOM immediately before your code. So there will not have been time to parse it. I would think that this code would have raised an error in fact.

Splitting up a Javascript snippet

The recommendation of the open source web analysis software Piwik is to put the following code at the end of the pages you want to track, directly before the closing </body> tag:
<html>
<head>
[...]
</head>
<body>
[...]
<!-- Piwik -->
<script type="text/javascript">
var pkBaseURL = (("https:" == document.location.protocol) ? "https://piwik.example.com/" : "http://piwik.example.com/");
document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));
</script><script type="text/javascript">
try {
var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 4);
piwikTracker.trackPageView();
piwikTracker.enableLinkTracking();
} catch( err ) {}
</script><noscript><p><img src="http://piwik.example.com/piwik.php?idsite=4" style="border:0" alt="" /></p></noscript>
<!-- End Piwik Tracking Code -->
</body>
</html>
Under the following assumptions:
https is never used
we don't care that the page loads slower because the script is loaded before the DOM
is it okay to convert the above to the following:
HTML file:
<html>
<head>
[...]
<script src="http://piwik.example.com/piwik.js" type="text/javascript"></script>
</head>
<body>
[...]
<noscript><p><img src="http://piwik.example.com/piwik.php?idsite=4" style="border:0" alt="" /></p></noscript>
</body>
</html>
Custom Javascript file with jQuery:
$(document).ready(function() {
try {
var piwikTracker = Piwik.getTracker("http://piwik.example.com/piwik.php", 4);
piwikTracker.trackPageView();
piwikTracker.enableLinkTracking();
}
catch(err) {
}
}
Are there any differences?
You are deferring the tracking until the page is fully loaded. Inline Javascript is executed when the browser finds it, so you'll have different number of visits depending on where you call piwikTracker.trackPageView();. The latter you call it, the lesser number of visits/actions will be counted.
Now, what do you consider a visit/action? If a user click on a link on your page, before the page fully loads, do you consider it a visit?

Categories

Resources