SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile setInterval JS Error

    Hiya

    I'm currently developing a script for a page of products on my site. When you load the products page the script is just meant to scroll naturally through the product images that are listed on that page. If a use hovers their mouse over a link for a product then the image scrolling should stop and show the relevant picture. This should stay on that image permanently until the user rolls off the link and then the auto scrolling should start again. The script works reasonably well so far:


    Code JavaScript:
    <script type="text/javascript" src="includes/prototype.js" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
            var iIntervalID = null;
            myimages = new Array();
            var list = new Array();
            var image = '', c = 0;
     
            function preloadimages()
            {
                for (var i=0; i<preloadimages.arguments.length; i++)
                {
                    myimages[i]=new Image()
                    myimages[i].src=preloadimages.arguments[i]
                }
            }
            preloadimages("images/dat_categories_image-1.jpg","images/dat_categories_image-10.jpg","images/dat_categories_image-4.jpg","images/dat_categories_image-9.jpg","images/dat_categories_image-5.jpg","images/dat_categories_image-11.jpg","images/dat_categories_image-15.jpg","images/dat_categories_image-12.jpg","images/dat_categories_image-13.jpg","images/dat_categories_image-14.jpg","images/dat_categories_image-16.jpg","images/dat_categories_image-6.jpg");
     
            function setimage(event, image)
            {
                if (document.getElementById('targetimage'))
                {
                    document.getElementById('targetimage').src=image.getAttribute('src')
                }
            }
     
            function timedCount()
            {
                setimage('', myimages[c])
                c=c+1;
                if(c>11)
                {
                    c=0;
                }
            }
     
            function startCount()
            {
                iIntervalID = setInterval("timedCount()",2500);
            }
     
            function stopCount()
            {
                clearInterval(iIntervalID);
            }
     
            function attachEvents()
            {
                var list = Element.extend(document.getElementsByClassName('pictrigger'));
     
                for (var a=0; a<list.length; a++)
                {
                    list[a].observe('mouseover', setimage.bindAsEventListener(this,    myimages[a]));
                    list[a].observe('mouseover', stopCount.bindAsEventListener());
                    list[a].observe('mouseout', startCount.bindAsEventListener());
                }
            }
     
            window.onload = function() {
                attachEvents();
                startCount();
            }
     
    </script>

    The problem is that if you try to hover your mouse on the link before the page has finished loading I get an error saying "iIntervalID is undefined" as the setInterval has not returned a value to us yet.

    This means that when the user hovers their mouse over the link the image will automatically flick on after a set amount of time rather than holding till the mouse is off the link.

    Can anybody help me as i'm really stuck with where to go with this now,

    Thanks

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bouncybee View Post
    The problem is that if you try to hover your mouse on the link before the page has finished loading I get an error saying "iIntervalID is undefined" as the setInterval has not returned a value to us yet.

    This means that when the user hovers their mouse over the link the image will automatically flick on after a set amount of time rather than holding till the mouse is off the link.
    You can remove the error like this
    Code:
    function stopCount()
    {
      if(iIntervalID)
         clearInterval(iIntervalID);
    }
    but it will not halt scanning if you mouseover before the script runs.
    Maybe the simplest fix for what you have in place, is never to cancel the interval. Instead the mouseover/out handlers should simply set/reset a flag that determines whether or not timedCount does anything.
    Alternatively, check out PopSlide.
    Tab-indentation is a crime against humanity.

  3. #3
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking Thats Great!

    Hiya

    Yeah I did have an if statement to check that but it still gave the error as you described. I've changed the functionality so that the timed count has a flag check and if its set as false the function effectively doesn't do anything!

    It works a treat with no errors so many thanks for your help, i'd been staring at it for so long I was running out of ideas!

    Code JavaScript:
    <script type="text/javascript" src="http://www.walkerfire.com/includes/prototype.js" charset="utf-8"></script>
    	<script type="text/javascript" charset="utf-8">
    		var iIntervalID = null;
    		myimages = new Array();
    		var list = new Array();
    		var image = '', c = 0, flag = true;
     
    		function preloadimages()
    		{
    			for (var i=0; i<preloadimages.arguments.length; i++)
    			{
    				myimages[i]=new Image()
    				myimages[i].src=preloadimages.arguments[i]
    			}
    		}
    		preloadimages("images/dat_categories_image-1.jpg","images/dat_categories_image-10.jpg","images/dat_categories_image-4.jpg","images/dat_categories_image-9.jpg","images/dat_categories_image-5.jpg","images/dat_categories_image-11.jpg","images/dat_categories_image-15.jpg","images/dat_categories_image-12.jpg","images/dat_categories_image-13.jpg","images/dat_categories_image-14.jpg","images/dat_categories_image-16.jpg","images/dat_categories_image-6.jpg");
     
    		function setimage(event, image)
    		{
    			if (document.getElementById('targetimage'))
    			{
    				document.getElementById('targetimage').src=image.getAttribute('src')
    			}
    		}
     
    		function timedCount()
    		{
    			if(flag == true)
    			{
    				setimage('', myimages[c])
    				c=c+1;
    				if(c>11)
    				{
    					c=0;
    				}
    			}
    		}
     
    		function setFlagTrue()
    		{
    			flag = true;
    		}
     
    		function setFlagFalse()
    		{
    			flag = false;
    		}
     
    		function attachEvents()
    		{
    			var list = Element.extend(document.getElementsByClassName('pictrigger'));
     
    			for (var a=0; a<list.length; a++)
    			{
    				list[a].observe('mouseover', setimage.bindAsEventListener(this,	myimages[a]));
    				list[a].observe('mouseover', setFlagFalse.bindAsEventListener());
    				list[a].observe('mouseout', setFlagTrue.bindAsEventListener());
    			}
    		}
     
    		window.onload = function() {
    			iIntervalID = setInterval("timedCount()",2500);
    			attachEvents();
    		}
     
    	</script>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •