jQuery container slider

Hi Guys,

I am wanting to slide the internal contents horizontally of a div via a href links.
I have coded the beginning of what I want to do but can't find the exact answer on the web to complete.

Looking at the code:
If i was to click on 'Slide to Area B' i would like the div 'inner-container' to slide to the left and to have the 2nd area (areaB) to align up with the beginning of 'inner-container'.  And when i click on 'Slide to Area A'  for it to slide back.

<!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>
<style>
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	overflow-x: hidden;
}
#container {
	position:absolute;
	top: 100px;
	left: 100px;
}
#inner-container {
	position:relative;
	width: 4000px;
	height: 300px;
	background-color:#CCCCCC;
}
#areaA {
	position:absolute;
	top: 0;
	left: 0;
	width: 300px;
	height: 300px;
	background-color:#0033FF;
} 
#areaB {
	position:absolute;
	top: 0;
	left: 300px;
	width: 300px;
	height: 300px;
	background-color:#FF0000;
} 
#nav {
	position:absolute;
	top: 430px;
	left: 100px;
}
</style>
</head>
<body>

<div id="container">
	<div id="inner-container">
  	<div id="areaA">Content A</div>
    <div id="areaB">Content B</div>
  </div>
</div>

<div id="nav">
	<div><a href="#">Slide to Area A</a></div>
	<div><a href="#">Slide to Area B</a></div>
</div>

</body>
</html>

Open in new window


Also if i was to load the page with #areaA at the end of the URL for it to show that part of the inner-container DIV.

I'm sure jQuery can do it, or some sort of Javascript.

Hope someone can show me an answer.
Thanks
dev09Asked:
Who is Participating?
 
darren-w-Connect With a Mentor Commented:
From reading your description, I'm guessing this?:
<html>
    <head>
        <title>test</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	overflow-x: hidden;
}
#container {
	position:absolute;
	top: 100px;
	left: 100px;
}
#inner-container {
	position:relative;
	width: 4000px;
	height: 300px;
	background-color:#CCCCCC;
}
#areaA {
	position:absolute;
	top: 0;
	left: 0;
	width: 300px;
	height: 300px;
	background-color:#0033FF;
}
#areaB {
	position:absolute;
	top: 0;
	left: 300px;
	width: 300px;
	height: 300px;
	background-color:#FF0000;
}
#nav {
	position:absolute;
	top: 430px;
	left: 100px;
}
</style>
        <script type="text/javascript">
          $(function(){
              $("#s2b").click(function(){
                  $("#container").animate({
                      left:'-=75'
                  },2500,function(){})
                  
                     $("#areaB").animate({
                      left:'-=300'
                  },2500,function(){})

              })
              $("#s2a").click(function(){
                  $("#container").animate({
                      left:'+=75'
                  },2500,function(){})

                     $("#areaB").animate({
                      left:'+=300'
                  },2500,function(){})

              })})
         
        </script>
    </head>
    <body>
        <div id="container">
            <div id="inner-container">
                <div id="areaA">Content A</div>
                <div id="areaB">Content B</div>
            </div>
        </div>

        <div id="nav">
            <div><a href="#" id="s2a">Slide to Area A</a></div>
            <div><a href="#" id="s2b">Slide to Area B</a></div>
        </div>
    </body>
</html>

Open in new window

0
 
AmickConnect With a Mentor Commented:
Here are two methods that might get you close, but need development to fit your needs.
 <!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>
<style>
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	overflow-x: hidden;
}
#container {
	position:absolute;
	top: 100px;
	left: 100px;
}
#inner-container {
	position:relative;
	width: 4000px;
	height: 300px;
	background-color:#CCCCCC;
}
#areaA {
	position:absolute;
	top: 0;
	left: 0;
	width: 300px;
	height: 300px;
	background-color:#0033FF;
}
#areaB {
	position:absolute;
	top: 0;
	left: 300px;
	width: 300px;
	height: 300px;
	background-color:#FF0000;

}
#nav {
	position:absolute;
	top: 430px;
	left: 100px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
Aclicked=0;
Bclicked=0;
$(document).ready(function(){
  $("button#ButtonA").click(function(){
	if (Aclicked==0){
    	$("div#areaA").animate({left:"300px"},"slow");
    	$("div#areaB").fadeTo("slow",0);

    	Aclicked=1;
    } else {
    	$("div#areaA").animate({left:"0"},"slow");
     	$("div#areaB").fadeTo("slow",1);

    	Aclicked=0;
	}

  });
  $("button#ButtonB").click(function(){
	if (Bclicked==0){
    	$("div#inner-container").animate({left:"300px"},"slow");

    	$("div#areaB").animate({left:"0"},"slow");
    	Bclicked=1;
    } else {
    	$("div#inner-container").animate({left:"0"},"slow");
    	$("div#areaB").animate({left:"300px"},"slow");

    	Bclicked=0;
	}

  });


});

</script>

</head>
<body>

<div id="container">
	<div id="inner-container">
  	<div id="areaA">Content A</div>
    <div id="areaB">Content B</div>
  </div>
</div>

<div id="nav">
	<div><a href="#ButtonA">Slide to Area A</a></div>
	<div><a href="#ButtonB">Slide to Area B</a></div>
</div>

<button id="ButtonA">Method A</button>
<button id="ButtonB">Method B</button>
<br /><br />


</body>
</html>

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.

All Courses

From novice to tech pro — start learning today.