I have an image slider in my webpage. The slider is made according to the code in the below link.
http://www.htmldrive.net/items/show/37/Dot-Slider-simple-easy-to-use-images-slideshow-jquery-plugins
I have a CSS class and the whole code looks like this.
<head>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<link href="css/webwidget_slideshow_dot.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/webwidget_slideshow_dot.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
$("#demo2").webwidget_slideshow_dot({
slideshow_time_interval: '5000',
slideshow_window_width: '256',
slideshow_window_height: '256',
slideshow_title_color: '#FFF',
soldeshow_foreColor: '#999',
});
});
</script>
</head>
<body>
<div class="ads2">
<div id="demo2" class="webwidget_slideshow_dot">
<ul>
<li><img src="images/slideshow_large_1.jpg" width="407" height="301" alt="slideshow_large"/></li>
<li><img src="images/slideshow_large_2.jpg" width="407" height="301" alt="slideshow_large"/></li>
<li><img src="images/slideshow_large_3.jpg" width="407" height="301" alt="slideshow_large"/></li>
<li><img src="images/slideshow_large_4.jpg" width="407" height="301" alt="slideshow_large"/></li>
</ul>
<div style="clear: both"></div>
</div>
</body>
I have a CGI scripts using Perl that runs for 5 minute. But the javascript is not working for these 5 minutes and image allignment is not clear during this time. After the page is loaded the javascript works fine. However the Javascript part is working fine because I have tested with an alert in javascript code and it works at the start of the page. The problem is when I call the Javascript using div it does not works.
$(/*code*/) is a shortcut for ready() which means that the code in $(/*code*/) won't be executed until the HTML document has been loaded.
Is the 5 minute page load time is for some omitted content after your #demo2 div but before the closing body tag?
The fact that you have wrapped your function in $(...) means it won't be invoked until the entire DOM (Document Object Model) is loaded, parsed and ready.
One thing to try would be to move that script block into the body of the html, after the #demo2 div. Also remove the "$(function() {" wrapper from the code. Not familiar enough with the slideshow widget you are trying to use to know if it will work without the entire DOM being ready, though...
Related
Since I started using a html-templatefile for my navbar elements I haven't got one of my scripts to execute(I can execute it via the console). I have experimented with on-load-functions but even that didn't seem to work. My problem is that I understand to little of the execution order and if I'm somehow blocking my script. I don't get any error messages either and when the html-template isn't used (ie - the navbar structure is included with everything else in the same html-file) the page loads as it should. So something there is messing it up. And I can call it from the console as well.
(I have tried a variety of ways but nothing have really worked, other than including the template in the document and that I would like to avoid. This setup is one of many). I hope someone can see the errors I do on the spot. I have cut out som css aswell, for readability.
Edit: Threw js out the window, since ASP was found available. Solved it in about half an hour using asp.
Just place your DOM elements inside body tag. Always render script at the end of the body, and append async javascript files at document ready (or at least this is my view of things).
<html>
<head>
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
<script>
<script src="http://code.jquery.com/jquery.js"></script> // create a local copy of jquery and other async javascript files you can load at $(document).ready(function(){ //here append async scripts like google maps });
<script type="text/javascript" src="d3.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
</script>
Here goes code....
</script>
</body>
</html>
The code you are trying to reference in the $("#pageContainerId").load("navbarTemplate.html"); is outside the body tag and most browsers will cut this out.
Try the following:
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="d3.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
</script>
</head>
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
<script>
Here goes code....
</script>
</body>
</html>
Also as the script is at the top the DOM may not be loaded at the time try the following:
$(document).ready(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
DOM ELEMENT SHOULD INSIDE BODY TAG
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
</body>
Ok, I couldn't get it to work the way I wanted but it turned out we had asp enabled on our server so when I switched to that I got it to work beautiful in about half an hour.
And it's a better way I suspect, in terms of best practice.
Thanks for the responses.
When i keep my javascript/jquery external, my code doesn't work. but when i combine them in my html file everything is fine.
any suggestions as to why this is?
here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type ="text/javascript" src="jquery.js"></script>
<script type ="text/javascript" src="program.js"></script>
</head>
<body>
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Yet one more Paragraph</p>
</body>
</html>
with external javascript
$('#clickme').click(function() {
$('#book').fadeOut('slow', function() {
// Animation complete.
});
});
$("p").click(function () {
$(this).slideUp();
});
VERSUS
<!DOCTYPE html>
<html>
<head>
<script type ="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Yet one more Paragraph</p>
<script>
$('#clickme').click(function() {
$('#book').fadeOut('slow', function() {
// Animation complete.
});
});
$("p").click(function () {
$(this).slideUp();
});
</script>
</body>
</html>
I guess you execute the click event before the DOM finishes loading. Wrap your code inside the dom ready event and it should work, Assuming your path to the external javascript file is correct.
$(function(){
$('#clickme').click(function() {
$('#book').fadeOut('slow', function() {
// Animation complete.
});
});
$("p").click(function () {
$(this).slideUp();
});
});
Always use firebug (console) to see what is wrong with the script, if you run into any script errors.
Your javascript is executed before there are elements on the page. You can get around this by using $(document).ready(function(){...}); or moving your external javascript files to the bottom.
Wrap your js code in external file in
$(document).ready(function(){
//your code goes here
});
Right now you are including external js file in header and it is executed. At this point there is no elements so $('#clickme') and $("p") are empty set. In the second example you run this code after rendering html with that elements.
The reason that there is a difference, is that in the external file your code is executing before the browser has fully parsed the DOM so you are attempting to programatically access elements of the page which the browser is not yet aware of. This is exactly what most people have already said, but let me elaborate a bit further...
Whilst a lot of people have mentioned using jQuery's document ready handler, I would like to point out that a workable solution is simply to move your script tags to the bottom of the page.
Not only will this solve your problem in itself, but it will also improve page load times because of how browsers treat scripts. When the browser encounters a script it stops everything else it is doing (known as a "blocking" operation), and parses and executes the script. This causes the page to just appear to stall from a user's perspective, meaning a bad user experience. Thus, because the scripts are parsed and executed only as they are encountered, by moving your scripts to the bottom you allow the browser to fully render the page so that the JavaScript does not block rendering.
Though rather than just moving scripts to the bottom of the page, I'd also follow what the others recommended and wrap the whole code in the document ready handler just to be extra safe that your code will always be executed at the correct time.
Also, in the debate of inline or external, external scripts are generally preferred as they are easier to maintain and the browser can cache them independently of the page (providing the correct HTTP headers are present).
To sum up here's some example code:
<html>
<head></head>
<body>
<!-- all your markup here -->
<!-- script at bottom, markup already rendered by this point -->
<script type="text/javascript" src="jquery.js"></script>
<!-- inline or external, still wrap in document ready handler -->
<!-- though external is better because the browser can cache it independently of the page -->
<script type="text/javascript">
//wrap in document ready to be extra safe
$(function() { /*code here*/ });
</script>
</html>
Ok, I made 2 posts about this but somehow I can't get it into my little mind.
So I concluded that if we have something like this:
<script type="text/javascript" src="somefile.js"></script>
<script type="text/javascript">
func1();
</script>
and func1() is defined in somefile.js, it is guaranteed to run when browser reaches that inline .
However, what if I have a big page (not taking into account images etc, just html) that takes a few seconds to load and for DOM to become ready (as I understand the DOM becomes ready when the whole html code has been loaded and parsed) and I want some code to be executed and work on parts of the page that have been loaded while the rest of the big page is still loading?
For example something like:
<div id="div1">Some div where content will be inserted by the inline javascript below</div>
<script type="text/javascript"> notifyPartLoaded("div1"); </script>
^^ Does something like this exist?
I'm not certain what your question is, but a simple way to ensure DOM ready is to place your JavaScript at the bottom of the HTML, just in side the closing </body> tag.
<!doctype html>
<html>
<head>
<title>some title</title>
<!-- this script could go toward the bottom too, but it must be before -->
<!-- your script if your script relies on it -->
<script type="text/javascript" src="somefile.js"></script>
</head>
<body>
<div id="div1">Some div where content will be inserted by the inline javascript below</div>
<!-- your HTML -->
<!-- your HTML -->
<!-- your HTML -->
<!-- Place your script last -->
<!-- ...though it would be better to have it in a separate file -->
<script type="text/javascript"> notifyPartLoaded("div1"); </script>
</body>
</html>
Because your code is after all the other elements, they will exist for manipulation when your code finally loads and runs.
I have 2 files. One called foo1.php and the other called foo2.php.
Contents of foo1.php:
<script type="text/javascript" src="yoxview/yoxview-init.js"></script>
<div class="yoxview">
<img src="files/Desert.jpg" alt="First" title="First image" />
<img src="files/hydrangeas.jpg" alt="Second" title="Second image" />
<img src="files/Jellyfish.jpg" alt="Third" title="Third image" />
</div>
Contents of foo2.php:
<script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>
<script>
$(document).ready(function() {
$('.bar').load('foo1.php');
});
</script>
<div class="bar">this text will be replaced</div>
When I go to foo2.php I get a blank white page with a never ending loading favicon. I think this has something to do with loading the script:
<script type="text/javascript" src="yoxview/yoxview-init.js"></script>
in foo1.php since the contents of that page are passed through the .load() function. When I remove that script reference foo1.php loads just fine. I don't think this problem is specific to that particular script. If I try to load any page with a script reference the same result occurs (the blank page/loading favicon).
Is there a way to load content from another page that has script references?
EDIT
Here's the link to the problem script:
http://www.yoxigen.com/yoxview/yoxview/yoxview-init.js
Try using this to intercept the document.write, it's worked for me in the past: https://github.com/iamnoah/writeCapture
Users in my site are seeing a half-second glitch on each page before any jQuery code executes. This code manipulates the page so you can visibly see elements move in one big chunk, making the user experience feel clunky. I'd prefer the page not to display at all until the JavaScript has run.
I'm using jQuery provided by the Google API in a page as follows:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>
<script type="text/javascript" src="MyScript.js"></script>
In MyScript.js:
google.setOnLoadCallback(runOnLoad);
function runOnLoad() {
// Do stuff
}
Does anyone know if it's possible to run the JavaScript before the page is displayed in the browser?
You could probably add a css class to your main div that would hide the content, and then remove that class as the last thing that MyScript.js does.
In your html template:
<body>
<div id="mainContent" class="hidden">
</div>
</body>
The css class:
.hidden
{
display: none;
}
Last executed statement of MyScript.js:
$("#mainContent").removeClass("hidden");
I would agree with Jan.
Most (not all) browsers load CSS first before javascripts.
So CSS would be advisable for you.