Scroll and open tab from another link on the page?

JavaScript
1

Hi all

I recently had a thread which for some reason or other wasn’t making much sense to anybody.
I’ve added fiddle example to make things easier - http://jsfiddle.net/88zaS/

My question: How do I get the ‘write a review’ link to scroll and open up the tab?

Hope this makes sense thanks, I’ve already written a bit of JS which doesn’t seem to work??

$("#gotoreview").click(function() {
        $("ul.tabs li").tabs({active: "#addReview"});
    });

Cheers, Barry

2

Hi,

What do you mean by “scroll and open up the tab”?
Are you using jQuery UI?

3

Thanks Pullo

I’m just using jQuery 1.9.1
If you look at the updated example - http://jsfiddle.net/88zaS/2/
You’ll see I can switch between the two tabs simply by clicking each tab.
I’d like the link at the top to open a tab, depending on the ID.

What do you mean by “scroll and open up the tab”?

If these tabs are say near the bottom of the page, I’d like to use links at the top of the page that will scroll down and open that tab.

Making sense?

Cheers, Barry

4

This may be a bit simpistic but did you mean something like this:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 36px;
	width: 100%;
	border-bottom: 1px solid #242424;
}
ul.tabs li {
	float: left;
	margin: 0 3px -1px 0;
	padding: 0 10px;
	height: 36px;
	line-height: 36px;
	border-left: none;
	margin-bottom: -1px;
	background: #1B1B1B;
	overflow: hidden;
	position: relative;
}
ul.tabs li a {
	color:white;
	text-decoration: none;
}
</style>
</head>

<body>
<a href="#thetabs" id="gotoreview">review</a><br>
<a href="#thetabs" id="gotowritereview">write a review</a>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<div id="thetabs">
		<ul class="tabs">
				<li><a href="#userReviews" title="">reviews</a></li>
				<li><a href="#addReview" title="">write a review</a></li>
		</ul>
</div>
<div class="tab_container">
		<div id="userReviews" class="tab_content">
				<h3>reviews</h3>
		</div>
		<div id="addReview" class="tab_content">
				<h3>write a review</h3>
		</div>
</div>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<script>
$(document).ready(function() {

    //Default Action
    $(".tab_content").hide(); //Hide all content

		$("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content
        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return false;
    });
    
    
     $("#gotoreview").click(function() {
        $("ul.tabs li:first-child").click();
    });
		$("#gotowritereview").click(function() {
        $("ul.tabs li:last-child").click();
    });

});

</script>
</body>
</html>

I’m sure Pullo can do that much neater :slight_smile:

5

I see what your doing there Paul slowly progressing :cool:
What happens when we have 7/8 tabs?

I’ve created a fiddle from Pauls code - http://jsfiddle.net/KGbmp/

I also came across .animate which I’ve been messing about with, though only the first link and tab is working ?

$("#gotoreview").click(function() {
        $("html, body").animate({
            scrollTop: $("#userReviews").offset().top
        }, 1000);
     });
    $("#gotowritereview").click(function() {
        $("html, body").animate({
            scrollTop: $("#addReview").offset().top
        }, 1000);
     });

I’ve created another fiddle with the animate code - http://jsfiddle.net/wTMG2/

Thanks, Barry

6

Hi,

As the tabs are on the same horizontal plane you can just scroll to the parent container rather than each individual tab. You can also open the tab by using the index of the link clicked and opening the appropriate tab. This assumes that the links at the top are the same order as the tabs themselves (which would be logical anyway).


$("#toplinks a").click(function() {
        $("html, body").animate({
            scrollTop: $("#thetabs").offset().top
        }, 1000);
				 var theTarget = $(this).index();
				 $("ul.tabs li").eq(theTarget).click();
     });

Full code:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#toplinks a{display:block}
ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 36px;
	width: 100%;
	border-bottom: 1px solid #242424;
}
ul.tabs li {
	float: left;
	margin: 0 3px -1px 0;
	padding: 0 10px;
	height: 36px;
	line-height: 36px;
	border-left: none;
	margin-bottom: -1px;
	background: #1B1B1B;
	overflow: hidden;
	position: relative;
}
ul.tabs li a {
	color:white;
	text-decoration: none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<body>
<div id="toplinks">
<a href="#thetabs" id="gotoreview">review</a>
<a href="#thetabs" id="gotowritereview">write a review</a>
<a href="#thetabs" id="gototab3">Tab 3</a>
<a href="#thetabs" id="gototab4">tab 4</a>

</div>

<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<div id="thetabs">
		<ul class="tabs">
				<li><a href="#userReviews" title="">reviews</a></li>
				<li><a href="#addReview" title="">write a review</a></li>
				<li><a href="#tab3" title="">Tab 3</a></li>
				<li><a href="#tab4" title="">Tab 4</a></li>
		</ul>
</div>
<div class="tab_container">
		<div id="userReviews" class="tab_content">
				<h3>reviews</h3>
		</div>
		<div id="addReview" class="tab_content">
				<h3>write a review</h3>
		</div>
		<div id="tab3" class="tab_content">
				<h3>Tab 3</h3>
		</div>
		<div id="tab4" class="tab_content">
				<h3>Tab 4</h3>
		</div>
</div>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<p>stuff to scroll</p>
<script>
$(document).ready(function() {

    //Default Action
    $(".tab_content").hide(); //Hide all content

		$("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content
        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return false;
    });
    
    
     $("#toplinks a").click(function() {
        $("html, body").animate({
            scrollTop: $("#thetabs").offset().top
        }, 1000);
				 var theTarget = $(this).index();
				 $("ul.tabs li").eq(theTarget).click();
     });
});
</script>
</body>
</html>

As I mentioned above I’m sure Pullo can improve on this and make it more foolproof. :slight_smile:

7

I’m sure there is room for improvement Paul, though this is working great :slight_smile:
Good learning curve for me, and yourself.

The latest version - http://jsfiddle.net/Pr9hj/

Thanks again, this should do the trick for now.
If you do see room for improvement Pullo would be nice to hear.

Cheers, Barry