Solved

jQuery container slider

Posted on 2011-03-23
2
431 Views
Last Modified: 2012-05-11
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
0
Comment
Question by:dev09
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 13

Accepted Solution

by:
darren-w- earned 250 total points
ID: 35205524
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
 
LVL 12

Assisted Solution

by:Amick
Amick earned 250 total points
ID: 35205529
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Script refinement question. 1 29
email validation 9 48
Link Anchor Not working 9 46
Select SamAccountName - powershell script 2 18
It is a general practice to get rid of old user profiles on a computer  in a LAN environment. As I have been working with a company in a LAN environment where users move from one place to some other place at times. This will make many user profil…
In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question