• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 257
  • Last Modified:

Moving box from right to left in jQuey

Hi. I'm experimenting with jQuery.

I'm trying to move a 80px x 80px green box from right to left across a webpage using the setInterval method.

Here is the HTML:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="jquery-1.6.2.js"></script>
    <script type="text/javascript" src="JScript.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="box">
    
        Go!</div>
    </form>
    
</body>
</html>

Open in new window


Here's the CSS:
.box
{
    
    width: 80px;
    height: 80px;
    background-color: green;
    margin-left: 861px;
}

Open in new window


And here's the jQuery:
$(function () {
    var greenLeft = $('.box').offset().left;
    setInterval(function () {
        $('.box').css('left', --greenLeft);
    }, 200);
});

Open in new window


When I run the webpage, nothing happens. Would it be easier to use the 'animate' method?
0
WhyDidntItWork
Asked:
WhyDidntItWork
  • 3
  • 2
  • 2
1 Solution
 
Albert Van HalenAnalyst developerCommented:
Set margin-left style property instead of left style property.
Since the box isn't absolute positioned; setting the style property left doesn't do anything.
$(function () {
    var greenLeft = $('.box').offset().left;
    setInterval(function () {
        $('.box').css('margin-left', --greenLeft);
    }, 200);
});

Open in new window

0
 
Gurvinder Pal SinghCommented:
why not use animate function of jquery
http://api.jquery.com/animate/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<style>
		.box
		{
			width:80px;
			height:80px;
			position:absolute;
			left:1000px;
			border:1px solid #ccc;
			background-color:pink;
		}
	</style>
	<script src="jquery-1.4.2.min.js"></script>
	<script>
		$(document).ready(function(){
			
			$(".box").animate({"left":"0px"}, "slow");

		});
	</script>
</HEAD>

<BODY>
	<div class="box">Box</div>
</BODY>
</HTML>

Open in new window

0
 
WhyDidntItWorkAuthor Commented:
Thanks Albert.

It worked like you said it would.

What is the importance of having the box absolute positioned? I'll have to do some digging into that.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
WhyDidntItWorkAuthor Commented:
Thanks for trying Gurvinder. I tried your code and variations of it but I couldn't get it to work. All things said, I would prefer the animate method.
0
 
Gurvinder Pal SinghCommented:
did you change the jquery script url? Since i tried this on IE8, and Chrome6 and it worked
0
 
WhyDidntItWorkAuthor Commented:
Gurvinder, I take it back. It did work but it didn't give the granular control that I was looking for. Thanks for the suggestion.
0
 
Albert Van HalenAnalyst developerCommented:
You can use the animate method though.
The thing is, you can't really control the speed in some cases.

Animate has the duration property which you can set at "fast", "slow" or a number (which is the duration; the higher the number the longer it takes).
Suppose you want to move an element from left to right of the screen. (what a scenario heh)
It just depends on how wide your screen is how fast the element will move.

Another tip : you might want to stop the 'animation' when the element is at the other side of your screen.
Use clearInterval for that.
$(function () {
    var greenLeft = $('.box').offset().left;
    slide = setInterval(function () {
        if(greenLeft == 0)
            clearInterval(slide);

        $('.box').css('margin-left', --greenLeft);
    }, 200);
});

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

  • 3
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now