Jquery Tabs Target with an anchor?

Hey Experts!!

I have a page here:  http://annaydesigns.com/feelgood/
The top image is clickable and changes the below content  using Jquery.  Does anyone know if there is a way to get the page to move down with either an onclick or Jquery function?  I was thinking of maybe using Jquery.ScrollTo, but not sure how to implement it.  I'd really just like to stick with HTML or CSS if possible, but I think I'm going to have to use Jquery.

Thanks in advance.
LVL 30
LZ1Asked:
Who is Participating?
 
kadabaConnect With a Mentor Commented:
I added the class "tabz" in the anchors to make a generic onclick function on page load
$(".tabz").click(function(){
and then have a div with the ids as in the anchor so that it will scroll generically.
let me know.

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>
  <script type="text/javascript" src="jquery.scrollTo.js"></script>     
  <script type="text/javascript">
  $(document).ready(function(){
    $("#tabs").tabs();
        $(".tabz").click(function(){
			var tabId = $(this).attr("href")+"tab";
			$.scrollTo( tabId,800);
        });
  });
  </script>
</head>
<body style="font-size:62.5%;">
  
<div id="tabs">
    <ul>
        <li><a class="tabz" href="#fragment-1"><span>One</span></a></li>
        <li><a class="tabz" href="#fragment-2"><span>Two</span></a></li>
        <li><a class="tabz" href="#fragment-3"><span>Three</span></a></li>
    </ul>
    <div id="fragment-1" style="height:1000px;">
        <div style="height:600px;">
                </div>
                <div id="fragment-1tab" >
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                </div>
    </div>
    <div id="fragment-2" style="height:1000px;">
                <div style="height:600px;">
                </div>
                <div id="fragment-2tab">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                </div>
        </div>
    <div id="fragment-3" style="height:1000px;">
       <div style="height:600px;">
                </div>
                <div id="fragment-3tab">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                </div>
    </div>
</div>
</body>
</html>

Open in new window

0
 
Tony O'ByrneSenior Web DeveloperCommented:
I'm at a bit of a loss here.  I would expect that the code you have would work, but it obviously isn't working.

The following url is a brief on the .scrollto method.  You'll need to download an additional plugin for jQuery.

http://plugins.jquery.com/project/ScrollTo
0
 
LZ1Author Commented:
I downloaded it, however it's also using the Jquery UI tabs.  I need to integrate both plugins together and it isn't working at the moment.  
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
kadabaCommented:
Hello LZ1,

I put together this example for you.
I combined the scripts. on click of the second tab, you will see the scroll in action.
You will be able to understand once you see the code. Let me know

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>
  <script type="text/javascript" src="jquery.scrollTo.js"></script>	
  <script type="text/javascript">
  $(document).ready(function(){
    $("#tabs").tabs();
	$("#tab2").click(function(){
		$.scrollTo( '#tab2div',800);
	});
  });
  </script>
</head>
<body style="font-size:62.5%;">
  
<div id="tabs">
    <ul>
        <li><a id="tab1" href="#fragment-1"><span>One</span></a></li>
        <li><a id="tab2" href="#fragment-2"><span>Two</span></a></li>
        <li><a id="tab3" href="#fragment-3"><span>Three</span></a></li>
    </ul>
    <div id="fragment-1">
        <p>First tab is active by default:</p>
        <pre><code>$('#example').tabs();</code></pre>
    </div>
    <div id="fragment-2" style="height:1000px;">
		<div style="height:600px;">
		</div>
		<div id="tab2div">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
		</div>
	</div>
    <div id="fragment-3">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
</div>
</body>
</html>

Open in new window

0
 
LZ1Author Commented:
That's perfect kadaba.  One last question:
How can I integrate that with more than one tab as in my page above?
0
 
LZ1Author Commented:
Perfect!  Thanks
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.