[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Jquery Tabs Target with an anchor?

Posted on 2010-01-04
6
Medium Priority
?
597 Views
Last Modified: 2012-05-08
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.
0
Comment
Question by:LZ1
  • 3
  • 2
6 Comments
 
LVL 6

Expert Comment

by:Tony O'Byrne
ID: 26180616
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
 
LVL 30

Author Comment

by:LZ1
ID: 26180778
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
 
LVL 22

Expert Comment

by:kadaba
ID: 26182505
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 30

Author Comment

by:LZ1
ID: 26183656
That's perfect kadaba.  One last question:
How can I integrate that with more than one tab as in my page above?
0
 
LVL 22

Accepted Solution

by:
kadaba earned 2000 total points
ID: 26186968
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
 
LVL 30

Author Closing Comment

by:LZ1
ID: 31672419
Perfect!  Thanks
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

868 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