0

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><a href="link1" title="Sky"><img src="images/slideshow_large_1.jpg" width="407" height="301" alt="slideshow_large"/></a></li>
        <li><a href="link2" title="Sea"><img src="images/slideshow_large_2.jpg" width="407" height="301" alt="slideshow_large"/></a></li>
        <li><a href="link3" title="Flower"><img src="images/slideshow_large_3.jpg" width="407" height="301" alt="slideshow_large"/></a></li>
        <li><a href="link4" title="Treelink4"><img src="images/slideshow_large_4.jpg" width="407" height="301" alt="slideshow_large"/></a></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.

Nijin
  • 41
  • 1
  • 4

2 Answers2

0

$(/*code*/) is a shortcut for ready() which means that the code in $(/*code*/) won't be executed until the HTML document has been loaded.

Seth
  • 10,198
  • 10
  • 45
  • 68
  • I am not familiar with javascript. Could you please explain? – Nijin Apr 16 '14 at 14:06
  • I have gone through the link. I have removed both the "(" infront of function. But now the code doesn't loads at all. Could you please rewrite the code for me. – Nijin Apr 16 '14 at 14:25
  • You are incorrect. `.ready()` means "The handler passed to `.ready()` is guaranteed to be executed after the DOM is ready", it's right in the link that you provided. When the DOM is ready and when the page has loaded are two completely separate things. `window.onload` or jQuery's `.load()` method are fired when the page has loaded. If you're confusing the two, read http://stackoverflow.com/questions/3698200/window-onload-vs-document-ready. – Seth Apr 16 '14 at 15:21
  • @veryhungrymike "which means that the code in `$(/*code*/)` won't be executed until the entire page has loaded". You're misleading the OP, and potentially others. That's not what `$()` does. – Seth Apr 16 '14 at 15:52
  • @veryhungrymike The question, or your answer? – Seth Apr 16 '14 at 15:56
0

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...

Victor Bruno
  • 1,033
  • 7
  • 12