Wrox Programmer Forums

Need to download code?

View our list of code downloads.

| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old February 1st, 2005, 08:59 AM
Friend of Wrox
Points: 1,243, Level: 13
Points: 1,243, Level: 13 Points: 1,243, Level: 13 Points: 1,243, Level: 13
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Oct 2003
Location: , , United Kingdom.
Posts: 290
Thanks: 24
Thanked 0 Times in 0 Posts
Default Animation

Hi,

I am trying to learn how to use the setInterval to call a functin and animate a cart but I keep getting the following error:

"There is no source code available for the current location"

I think the problem is happening when I call the function - vartimer = window.setInterval('moveCart()', 100); to set the vartimer.

Also the cart is not moving and sometimes I get an error saying cart is undefined.

I cannot figure out what is wrong and would appreciate if someone could help.

Cheers,

Claudio

<script type="text/javascript">
<!--
    vartimer = 0;
    var incr = 10;

    function moveCart()
    {
        var xPos;
        xPos = cart.style.posLeft + incr;
        if(xPos >= 400)
        {
            incr = -10
            cart.style.filter = "FlipH()";
        }
        if(xPos <= 20)
        {
            incr = 10;
            cart.style.filter = "";
        }
        cart.style.posLeft = xPos;
    }

    function toggleAnim()
    {

        //window.setInterval('moveCart()',100);
        //alert(window.setInterval('moveCart()', 100));

        if(vartimer!=0)
        {
            window.clearInterval(vartimer);
            cmdAnimate.innerHTML = "<input type='button' value='Animation On' onclick='toggleAnim()'>";
            vartimer = 0;
        }
        else
        {
            vartimer = window.setInterval('moveCart()', 100);
            cmdAnimate.innerHTML = "<input type='button' value='Animation Off' onclick='toggleAnim()'>";
        }

    }



-->
</script>

Reply With Quote
  #2 (permalink)  
Old February 1st, 2005, 09:30 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

Can you show a bit more of the page?

--

Joe (Microsoft MVP - XML)
Reply With Quote
  #3 (permalink)  
Old February 1st, 2005, 09:50 AM
Friend of Wrox
Points: 1,243, Level: 13
Points: 1,243, Level: 13 Points: 1,243, Level: 13 Points: 1,243, Level: 13
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Oct 2003
Location: , , United Kingdom.
Posts: 290
Thanks: 24
Thanked 0 Times in 0 Posts
Default

Hi joefawcett,

Sure. below is the whole page. Just find a cart graphic and copy into an image folder. I think the cart should me moving but it isn't this is quite annoying since I cannot spot any errors at all. Thanks for your help.

<html>
  <head>
    <title>setIntervalCSSAnimation</title>
    <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
    <meta name="CODE_LANGUAGE" Content="C#">
    <meta name=vs_defaultClientScript content="JavaScript">
    <meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
    <style>
    H2, P {font-family:tahoma}
    </style>

<script type="text/javascript">
<!--
    vartimer = 0;
    var incr = 10;

    function moveCart()
    {

        var xPos;
        xPos = cart.style.posLeft + incr;
        if(xPos >= 400)
        {
            incr = -10
            cart.style.filter = "FlipH()";
        }
        if(xPos <= 20)
        {
            incr = 10;
            cart.style.filter = "";
        }
        cart.style.posLeft = xPos;
    }

    function toggleAnim()
    {

        //window.setInterval('moveCart()',100);
        //alert(window.setInterval('moveCart()', 100));

        if(vartimer!=0)
        {
            window.clearInterval(vartimer);
            cmdAnimate.innerHTML = "<input type='button' value='Animation On' onclick='toggleAnim()'>";
            vartimer = 0;
        }
        else
        {
            vartimer = window.setInterval('moveCart()', 100);
            cmdAnimate.innerHTML = "<input type='button' value='Animation Off' onclick='toggleAnim()'>";
        }

    }



-->
</script>


</head>



<body MS_POSITIONING="GridLayout">
<h2>Animation</h2>
<p>Click button to move cart</p>

<span id="cart" NAME="cart" style="postion:absolute; top:150px; lef:20px">
    <img src="images/cart.jpg">
</span>

<form name="frmMain" method="post" runat="server" action="setIntervalCSSAnimation.aspx">
    <span id="cmdAnimate">
        <input type="button" value="Animation on" onclick="toggleAnim()">
    </span>
</form>

</body>
</html>

Reply With Quote
  #4 (permalink)  
Old February 2nd, 2005, 06:29 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

You have mispelled 'position' and 'left' in your style attribute of 'cart' span.

--

Joe (Microsoft MVP - XML)
Reply With Quote
  #5 (permalink)  
Old February 2nd, 2005, 07:59 AM
Friend of Wrox
Points: 1,243, Level: 13
Points: 1,243, Level: 13 Points: 1,243, Level: 13 Points: 1,243, Level: 13
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Oct 2003
Location: , , United Kingdom.
Posts: 290
Thanks: 24
Thanked 0 Times in 0 Posts
Default

Thanks Joe.

Is there a way to debug for mispelling like that??

Reply With Quote
  #6 (permalink)  
Old February 2nd, 2005, 08:03 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

You could also simplify toggleAdmin.
Code:
function toggleAdmin(Sender)
{
  if(vartimer!=0)
  {
    window.clearInterval(vartimer);
    Sender.value = "Animation On";            
    vartimer = 0;
  }
  else
  {
    vartimer = window.setInterval('moveCart()', 100);
    Sender.value = "Animation Off";
  }
}
and change your button html to:
Code:
<input type="button" value="Animation on" onclick="toggleAnim(this);">
--

Joe (Microsoft MVP - XML)
Reply With Quote
  #7 (permalink)  
Old February 2nd, 2005, 08:38 AM
Friend of Wrox
Points: 1,243, Level: 13
Points: 1,243, Level: 13 Points: 1,243, Level: 13 Points: 1,243, Level: 13
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Oct 2003
Location: , , United Kingdom.
Posts: 290
Thanks: 24
Thanked 0 Times in 0 Posts
Default

Hi Joe,

What is "Sender.value" ?

I can see you are changing the value of the button but why Sender does that?? I would appreciate if you could elaborate on that.

Cheers,

Claudio

Reply With Quote
  #8 (permalink)  
Old February 2nd, 2005, 10:02 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

The "this" in "toggleAmin(this);" is a reference to the element that fired the event.

--

Joe (Microsoft MVP - XML)
Reply With Quote
  #9 (permalink)  
Old February 2nd, 2005, 10:03 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

Quote:
quote:Originally posted by pallone
 Thanks Joe.

Is there a way to debug for mispelling like that??

Not in any editor I know, they can cope with attributes mispelt but not with inline styles.

--

Joe (Microsoft MVP - XML)
Reply With Quote
  #10 (permalink)  
Old February 2nd, 2005, 03:17 PM
Friend of Wrox
Points: 1,243, Level: 13
Points: 1,243, Level: 13 Points: 1,243, Level: 13 Points: 1,243, Level: 13
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Oct 2003
Location: , , United Kingdom.
Posts: 290
Thanks: 24
Thanked 0 Times in 0 Posts
Default

Thanks ever so much Joe,

Does Sender works for netscape as well ?

Cheers,

Claudio

Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
problem with animation 132591 Java Basics 0 December 8th, 2006 06:45 PM
Text Animation flash2004 Flash (all versions) 2 May 18th, 2005 12:41 AM
Animation Control JelfMaria VB How-To 2 March 14th, 2005 12:11 AM
animation problems chrissy Javascript 1 February 22nd, 2005 12:32 PM



All times are GMT -4. The time now is 11:07 PM.


Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.