I've tested on JSFiddle without problem
This is the file hosted on a server: http://users3.jabry.com/apasajja/37/file.html
It works perfectly. The image loaded every second.
But when run on local computer, it not works as expected, even the codes are same. The image is not loaded every second.
You can have the same copy: http://users3.jabry.com/apasajja/37/file.zip
try something like this
Change from this
<script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'></script>
to
<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.1.js'></script>
You did not mention DOCTYPE and html
try this one it works.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.js"> </script>
<script type='text/javascript' src='script.js'></script>
<style type="text/css">
#mr3{
height:200px
}
</style>
</head>
<body>
<div id="mr3" style="background:url(http://users3.jabry.com/apasajja /37/banner1.jpg)"> </div>
</body>
</html>
Related
I'm just starting on JavaScript and I'm following along this online course where it claims that if I insert <script> tags at the bottom of the page just before the <body> closing tag I should be able to see the website render first followed by the JavaScript code, but it is actually executing the other way around, the JavaScript code executes first and it's not until after I click "OK" on the message popping up that I'm able to see the website fully rendered.
Here is the code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
<title>JavaScript Basics</title>
</head>
<body>
<div class="container">
<h1>Where to place your JavaScript code.</h1>
</div>
<script src="scripts.js"></script>
</body>
</html>
scripts.js
alert("This text should appear after page is fully rendered");
I honestly don't know if this is how the code is supposed to work. Do alert(); scripts always execute first? Maybe the browser has something to do with it? (I'm using the latest version of Chrome). Anyhow, a well explained answer of what's happening would be much appreciated.
Personally, I would do something more like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
<title>JavaScript Basics</title>
</head>
<body>
<div class="container">
<h1>Where to place your JavaScript code.</h1>
</div>
<script>
window.onload = function() {
alert('This should now load after the page.');
}
</script>
</body>
</html>
The window.onload = fun... says "wait until the page has finished loading". Depending on what the browsers decide to (with images, layout, plugins etc.), this may or may not work for you.
Or even something like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
<title>JavaScript Basics</title>
</head>
<body>
<div class="container">
<h1>Where to place your JavaScript code.</h1>
</div>
<script async defer src="scripts.js"></script>
</body>
</html>
With this example, the async attribute means "grab this script file in the background" and the defer means "wait until the page has loaded to execute it".
this is my html:
<!DOCTYPE html>
<html>
<head>
<title>Free Jokes!</title>
<meta charset="utf-8">
<link href="final%20project.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="left"></div>
<script type="text/javascript">
$(document).ready(function() {
$('#left').load("left.html");
});
</script>
<div id="right"></div>
<script type="text/javascript">
$(document).ready(function() {
$('#right').load("right.html");
});
</script>
</body>
</html>
The html is opening fine, but my left and right html documents aren't showing up. This may be from not correctly typing in the code. Was there anything I did wrong?
Is there any way I can reference my left and right html documents to this without using iframes?
The load function attempts to make an ajax call to the location specified (remember, here in JavaScript we're on the client), so unless you specify absolute URLs, it won't retrieve from the correct location.
Furthermore, assuming that left.html and right.html are complete documents including doctype and <head> etc, that would produce invalid HTML.
Try the following:
<html>
<head>
<title>Free Jokes!</title>
<meta charset="utf-8">
<link href="final%20project.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<iframe id="left" frameborder="0" style="border: 0;" src="left.html"></iframe>
<iframe id="right" frameborder="0" style="border: 0;" src="right.html"></iframe>
</body>
</html>
While it's not perfect, it should at least display the pages correctly.
I am trying to delete the first css rule.
However, this does not work in Firefox 3.6.28. Is this the same for everyone and why is this the case?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
console.log(document.styleSheets);
document.styleSheets[0].deleteRule(0);
console.log(document.styleSheets); // same as the first console.log
});
</script>
<style>
body{font-size:62.5%;}
#mc{padding:310px 0 10px 162px; color:#fff;}
#content{width:500px;}
#header{padding-top:10px;}
#banner{padding:10px 0}
</style>
</head>
<body>
Test JS
</body>
</html>
Update
Just to clarify, the delete seems to be working however the console.log shows the same number of rules before and after the delete.
Seems to work just fine for me
example at http://jsfiddle.net/gaby/JmWwM/
you need to check the length of the cssRules property.
If you log the actual object in firebug then when you try to dig deeper it will show you the current state of the stylesheet, so it will have a reduced number of rules.. (since by the time you start digging the deletion will have occured)
but if you log the actual number of rules before and after the deletion then it will show the correct results..
so the problem is a mistake in understanding how the console.log command works.
According to https://developer.mozilla.org/en/DOM/CSSStyleSheet/deleteRule stylesheet.deleteRule(index) , delete rule accepts an index so your 1 should be a 0.
I created a jsfiddle http://jsfiddle.net/N3zsw/. I had to make some changes to your code since there are other stylesheets on the page so 0 == 3.
It appears to work for me. When you do console.log you should be displaying console.log(document.styleSheets[0]) instead of console.log(document.styleSheets). The CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style>
body{font-size:62.5%;}
#mc{padding:310px 0 10px 162px; color:#fff;}
#content{width:500px;}
#header{padding-top:10px;}
#banner{padding:10px 0}
</style>
<script type="text/javascript">
(function () {
var s = document.styleSheets[0];
console.log(s.cssRules.length);
s.deleteRule(1);
console.log(s.cssRules.length);
s.deleteRule(1);
console.log(s.cssRules.length);
s.deleteRule(1);
console.log(s.cssRules.length);
s.deleteRule(1);
console.log(s.cssRules.length);
})();
</script>
</head>
<body>
Test JS
</body>
</html>
it is working fine, i think its about firebug's object reference thing
I'm new to JavaScript and I've learned that JavaScript can be place between the <head></head> or <body></body> sections, I have been working in a project and it works fine inside the head but not the body section of the page.
examples:
working fine like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example Page</title>
<script>
function yetAnotherAlert(textToAlert) {
alert(textToAlert);
}
yetAnotherAlert("Hello World");
And is not working this way:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example Page</title>
</head>
<body>
<script>
function yetAnotherAlert(textToAlert) {
alert(textToAlert);
}
yetAnotherAlert("Hello World");
</script>
</body>
</html>
Your code snippet didn't show you closing the tag. Double check if you close your script block correctly.
It's also better to specify the type of scripting language too.
<script language='javascript'>
....
</script>
I have this code:
<body onLoad="subcatSelection();">
The function is inside a .js file which is included with this code:
<script type="text/javascript" src="bincgi/search_lists.js"></script>
The function contains an alert('hello'); just for testing purposes to see if it gets called, but it doesn't.
The "Page error" or whatever its called on the bottom left corner of Explorer 6 is displayed and when double clicking it it assumes there is an error on LINE x ROW y, which is the body-onload event.
Anybody has an ide?
If you need more input let me know... Thanks
UPDATE:
Some html before the onload event...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="bincgi/search_lists.js"></script>
<script type="text/javascript" src="bincgi/jsfunctions.js"></script>
<script type="text/javascript" src="bincgi/calendar_eu.js"></script>
<link href="bincgi/main_styles.css" rel="stylesheet" type="text/css">
<link href="bincgi/calendar.css" rel="stylesheet" type="text/css">
<!--[if lt IE 8]>
<link href="bincgi/main_styles_ie_lt7.css" rel="stylesheet" type="text/css">
<![endif]-->
<style type="text/css">
body {
background-color: #fffec7;
background-image: url(Graphics/test_bgr.gif);
background-repeat: repeat-x;
}
</style>
</head>
<body onLoad="subcatSelection();">
If [Juriy] answer didn't work, then try calling your function in your page:
<script type="text/javascript" src="bincgi/search_lists.js"></script>
<script type="text/javascript" >
alert("first test");
subcatSelection();
</script>
If that doesn't work, it has to be a trivial problem (e.g., file in wrong location, need to re-start browser, clean cache, etc.)) that is giving you troube.
As far as I see from the comments, the problem might be in the other line of search_lists.js (that might be before subcatSelection definition). IE just stops parsing it and doesn't load the function correctly. Try to leave a single function definition in that file and see what happens:
function subcatSelection() {
alert ("Hello");
}
It may be possible that there's a syntax error that it is avoiding the correct definition of the function. Make that function the only function in your .js file, put your test alert("hello!), and try again.
Check the permissions, you are running inside a cgi bin folder which operates a bit different
I would also suggest not mixing your js files with your CGI (who uses cgi anymore)
Because you have the problem on IE6 only from what I understand, I would try to first use Fiddler to determine if your file is downloaded correctly, if it is then I would modify the content of search_list.js to be:
alert('Before def');
function subcatSelection() {
alert('In subcatSelection');
}
alert('After def');
Then create a page like this to see if you get the alerts in that order: 'Before def', 'After def', 'Before Call', 'In subcatSelection', 'After Call'.
At that point, you should know for sure where is the problem if it's still there. If you don't have the error, then start plugging back the pieces one by one (move the call in body onload then try, re-add the code in search_list.js then try, re-add the other JS includes then try, etc.)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="bincgi/search_lists.js"></script>
<script type="text/javascript">
alert("Before Call");
subcatSelection();
alert("After Call");
</script>
</head>
<body>test</body></html>