How to make Tab loop using JQuery and JavaScript? - javascript

I have created a tab using JQuery and JavaScript. It's working fine but I need one modification on that.
I want a tab loop type like once we reached the last one it should go to the first tab when I click the next button. but now it's not looping. I tried so many types but I am not getting the output what I expected. I have added my code here. anyone helps me to fix this.
$(document).ready(function () {
$(".tab_content div:not(:first)").toggle(),
$(".previous").css({
opacity: "0.8",
cursor: "not-allowed"
}),
$(".tabs li").click(function () {
var e = $(this).index();
$(this).is(":last-child") ? $(".next").next("li").trigger("click") : $(".next").next("li").trigger("click"),
$(this).is(":first-child") ? $(".previous").css({
opacity: "0.8",
cursor: "not-allowed"
}) : $(".previous").css({
opacity: "1",
cursor: "pointer"
});
var t = $(this).position(),
a = $(this).data("id");
(scroll = $(".tabs").scrollLeft()),
$(".tabs").animate({
scrollLeft: scroll + t.left - 30
}, 200),
$(".tab_content div").hide(),
$("div." + a).toggle(),
$(".tabs li").removeClass("active"),
// $(`.tabs li:nth-child(${e + 1})`).addClass("active");
$(".tabs li:nth-child(" + (e + 1) + ")").addClass("active");
}),
$(".next").click(function (e) {
e.preventDefault(), $("li.active").next("li").trigger("click");
}),
$(".previous").click(function (e) {
e.preventDefault(), $("li.active").prev("li").trigger("click");
});
});
.tabs_indicators li{
height:5px;
display: inline-block;
cursor:pointer;
width:5px;
border-radius:50%;
background:green;
}
ul{
list-style:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="content_wrapper">
<div class="tabs_wrapper">
<ul class="tabs tab_border">
<li data-id="contentOne" class="active">tab 1
</li>
<li data-id="contentTwo">
tab 2
</li>
<li data-id="contentThree">
tab 3
</li>
<li data-id="contentFour">
tab 4
</li>
<li data-id="contentFive">
tab 5
</li>
<li data-id="contentSix">
tab 6
</li>
</ul>
<div class="d_flex">
<div class="tabs_wrapper tabs_indicators">
<ul class="tabs list_unstyled d_flex">
<li data-id="contentOne" class="active"></li>
<li data-id="contentTwo"></li>
<li data-id="contentThree"></li>
<li data-id="contentFour"></li>
<li data-id="contentFive"></li>
<li data-id="contentSix"></li>
</ul>
</div>
<div class="tab_controller d_flex ">
<span class="tab_btn previous mr-10">left arrow</span><br>
<span class="tab_btn next">right arrow</span>
</div>
</div>
</div>
<div class="tab_content">
<div class="tab_content_item contentOne">
content 1
</div>
<div class="tab_content_item contentTwo">
content 2
</div>
<div class="tab_content_item contentThree">
content 3
</div>
<div class="tab_content_item contentFour">
content 4
</div>
<div class="tab_content_item contentFive">
content 5
</div>
<div class="tab_content_item contentSix">
content 6
</div>
</div>
</div>
</body>
</html>


Check next & prev element is there
$("li.active").next("li").length)
$("li.active").prev("li").length)
$(document).ready(function () {
$(document).ready(function() {
$(".tab_content div:not(:first)").toggle(),
$(".tabs li").click(function() {
var e = $(this).index();
var t = $(this).position(),
a = $(this).data("id");
(scroll = $(".tabs").scrollLeft()),
$(".tabs").animate({
scrollLeft: scroll + t.left - 30
}, 200),
$(".tab_content div").hide(),
$("div." + a).toggle(),
$(".tabs li").removeClass("active"),
// $(`.tabs li:nth-child(${e + 1})`).addClass("active");
$(".tabs li:nth-child(" + (e + 1) + ")").addClass("active");
}),
$(".next").click(function(e) {
if ($("li.active").next("li").length) {
e.preventDefault(), $("li.active").next("li").trigger("click");
} else {
e.preventDefault(), $("li:first-child").trigger("click");
}
}),
$(".previous").click(function(e) {
if ($("li.active").prev("li").length) {
e.preventDefault(), $("li.active").prev("li").trigger("click");
} else {
e.preventDefault(), $("li:last-child").trigger("click");
}
});
});
});
.tabs_indicators li{
height:5px;
display: inline-block;
cursor:pointer;
width:5px;
border-radius:50%;
background:green;
}
ul{
list-style:none;
}
.tabs_indicators li.active{background:red;}
.tabs li.active{color:red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="content_wrapper">
<div class="tabs_wrapper">
<ul class="tabs tab_border">
<li data-id="contentOne" class="active">tab 1
</li>
<li data-id="contentTwo">
tab 2
</li>
<li data-id="contentThree">
tab 3
</li>
<li data-id="contentFour">
tab 4
</li>
<li data-id="contentFive">
tab 5
</li>
<li data-id="contentSix">
tab 6
</li>
</ul>
<div class="d_flex">
<div class="tabs_wrapper tabs_indicators">
<ul class="tabs list_unstyled d_flex">
<li data-id="contentOne" class="active"></li>
<li data-id="contentTwo"></li>
<li data-id="contentThree"></li>
<li data-id="contentFour"></li>
<li data-id="contentFive"></li>
<li data-id="contentSix"></li>
</ul>
</div>
<div class="tab_controller d_flex ">
<span class="tab_btn previous mr-10">left arrow</span><br>
<span class="tab_btn next">right arrow</span>
</div>
</div>
</div>
<div class="tab_content">
<div class="tab_content_item contentOne">
content 1
</div>
<div class="tab_content_item contentTwo">
content 2
</div>
<div class="tab_content_item contentThree">
content 3
</div>
<div class="tab_content_item contentFour">
content 4
</div>
<div class="tab_content_item contentFive">
content 5
</div>
<div class="tab_content_item contentSix">
content 6
</div>
</div>
</div>
</body>
</html>


You just have to add 2 checks:
For the "next" case, if there is any next <li> element
For the "prev" case, if the is any previous <li> element
Just change your js like this:
$(".next").click(function (e) {
e.preventDefault();
if($("li.active").next("li").length == 0) {
$("li:first-child").trigger("click");
} else {
$("li.active").next("li").trigger("click");
}
}),
$(".previous").click(function (e) {
e.preventDefault();
if($("li.active").prev("li").length == 0) {
$("li:last-child").trigger("click");
} else {
$("li.active").prev("li").trigger("click");
}
});
$(document).ready(function () {
$(".tab_content div:not(:first)").toggle(),
$(".previous").css({
opacity: "0.8",
cursor: "not-allowed"
}),
$(".tabs li").click(function () {
var e = $(this).index();
$(this).is(":last-child") ? $(".next").next("li").trigger("click") : $(".next").next("li").trigger("click"),
$(this).is(":first-child") ? $(".previous").css({
opacity: "0.8",
cursor: "not-allowed"
}) : $(".previous").css({
opacity: "1",
cursor: "pointer"
});
var t = $(this).position(),
a = $(this).data("id");
(scroll = $(".tabs").scrollLeft()),
$(".tabs").animate({
scrollLeft: scroll + t.left - 30
}, 200),
$(".tab_content div").hide(),
$("div." + a).toggle(),
$(".tabs li").removeClass("active"),
// $(`.tabs li:nth-child(${e + 1})`).addClass("active");
$(".tabs li:nth-child(" + (e + 1) + ")").addClass("active");
}),
$(".next").click(function (e) {
e.preventDefault();
if($("li.active").next("li").length == 0) {
debugger;
$("li:first-child").trigger("click");
} else {
$("li.active").next("li").trigger("click");
}
}),
$(".previous").click(function (e) {
e.preventDefault();
if($("li.active").prev("li").length == 0) {
$("li:last-child").trigger("click");
} else {
$("li.active").prev("li").trigger("click");
}
});
});
.tabs_indicators li{
height:5px;
display: inline-block;
cursor:pointer;
width:5px;
border-radius:50%;
background:green;
}
ul{
list-style:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="content_wrapper">
<div class="tabs_wrapper">
<ul class="tabs tab_border">
<li data-id="contentOne" class="active">tab 1
</li>
<li data-id="contentTwo">
tab 2
</li>
<li data-id="contentThree">
tab 3
</li>
<li data-id="contentFour">
tab 4
</li>
<li data-id="contentFive">
tab 5
</li>
<li data-id="contentSix">
tab 6
</li>
</ul>
<div class="d_flex">
<div class="tabs_wrapper tabs_indicators">
<ul class="tabs list_unstyled d_flex">
<li data-id="contentOne" class="active"></li>
<li data-id="contentTwo"></li>
<li data-id="contentThree"></li>
<li data-id="contentFour"></li>
<li data-id="contentFive"></li>
<li data-id="contentSix"></li>
</ul>
</div>
<div class="tab_controller d_flex ">
<span class="tab_btn previous mr-10">left arrow</span><br>
<span class="tab_btn next">right arrow</span>
</div>
</div>
</div>
<div class="tab_content">
<div class="tab_content_item contentOne">
content 1
</div>
<div class="tab_content_item contentTwo">
content 2
</div>
<div class="tab_content_item contentThree">
content 3
</div>
<div class="tab_content_item contentFour">
content 4
</div>
<div class="tab_content_item contentFive">
content 5
</div>
<div class="tab_content_item contentSix">
content 6
</div>
</div>
</div>
</body>
</html>

Related

Menu is initially open on page load, should be closed until clicked

This may be a silly question but I cannot figure out why my menu displays when the page is loaded. I would like to have it closed and then opened when it is clicked but it is the other way around and I can't seem to fix it.
<html>
<head>
<script>
$(document).ready(function () {
$('#nav p')
.css({ cursor: "pointer" })
.on('click', function () {
var txt = $(this).text() == "MENU" ? "CLOSE" : "MENU";
$(this).text(txt);
$(this).next('ul').toggle();
})
});
</script>
</head>
<body>
<div class="left" id="nav">
<p>CLOSE</p>
<ul>
<li id="light">
Lighting + Video
</li>
<li id="photo">
<a class="active" href="photograms.html">Photograms</a>
</li>
<li id="about">
About
</li>
</ul>
</div>
</body>
</html>

$(document).ready(function(){
$('#nav p')
.css({cursor: "pointer"})
.on('click', function(){
var txt = $(this).text() === "MENU"?"CLOSE":"MENU"; // 3 egals verification
$(this).text(txt);
$(this).next('ul').toggle();
})
});
ul{
display: none; /* ADD this */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="left" id="nav">
<p>CLOSE</p>
<ul>
<li id="light">
Lighting + Video
</li>
<li id="photo">
<a class="active"href="photograms.html">Photograms</a>
</li>
<li id="about">
About
</li></ul>
</div>
</body>
</html>

You can do most of the stuff from CSS. Create .closed class and assign it to #nav.
#nav.closed > ul{
display: none;
}
That's it. You are done with minor changes in jQuery click event!
See the snippet below.
$(document).ready(function(){
$('#nav p').on('click', function(){
$(this).parent().toggleClass("closed");
});
});
#nav{
cursor: pointer;
}
#nav.closed p::after{
content : "CLOSE";
}
#nav p::after {
content: "MENU";
}
#nav.closed > ul{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="left closed" id="nav">
<p></p>
<ul>
<li id="light">
Lighting + Video
</li>
<li id="photo">
<a class="active"href="photograms.html">Photograms</a>
</li>
<li id="about">
About
</li>
</ul>
</div>
</body>
</html>

how to make panels switch automatically

I made panels but i don't know how to make them switch automatically, i would appreciate if you help me.
js:
// akcii panels
$(".load-block:first").addClass('active');
$("#akciiContent li").click(function(event) {
event.preventDefault();
var elemId = $(this).attr("data-akcii");
$("#akciiContent li").removeClass("active");
$(".ak-block").removeClass("selected");
$(this).addClass("active");
$("#"+elemId).addClass("selected");
});
html:
<div class="row">
<div class="akcii-block-one">
<ul id="akciiContent">
<li data-akcii="block-three" class="load-block">
<p>Приведи друга</p>
<div class="loader"></div>
</li>
<li data-akcii="block-four" class="load-block">
<p>Установка центрального охранного прибора бесплатно</p>
<div class="loader"></div>
</li>
</ul>
</div>
<div class="akcii-block-two">
<div id="block-three" class="ak-block">
<img src="includes/icons/akcii-3.jpg">
</div>
<div id="block-four" class="ak-block">
<img src="includes/icons/akcii-4.jpg">
</div>
</div>
</div>

HTML markup
<div class="panels">
<ul>
<li class="active" data-panel="panel1">Tab 1</li>
<li data-panel="panel2">Tab 2</li>
<ul>
<div id="panel1" class="panel active">Panel 1 content</div>
<div id="panel2" class="panel">Panel 2 content</div>
</div>
Jquery function
$(document).ready(function(){
$('.panels ul li').on('click', function(){
if($(this).hasClass('.active')){
//ignore if its already active
return;
}
var active = $('.panels ul li.active, .panels .panel.active');
active.removeClass('active');
//set active tab
$(this).addClass('active');
//set attive panel
$('#' + $(this).attr('data-panel')).addClass('active');
});
});
CSS
.panels .panel{
display:none;
}
.panels .panel.active{
display:block;
}

checking both scrollTop and id offset for sticky menu in single condition

I want to check the scroll position is greater than 350 and menuSticky offset position is 92 in same condition.that condition is not working.I gave my piece of code
$(window).scroll(function(){
if($(document).scrollTop() > 350) {
$('.secMenu').addClass('menuSticky');
} else {
$('.secMenu').removeClass('menuSticky');
}
var menu = $('.menuSticky'); //shows error
// var menu = $('.secMenu'); working
var origOffsetY = menu.offset().top;
console.log(menu.offset().top);
if((($('.menuSticky').offset.top)==92)) {
console.log('true');
$('.dropdown').hover(function() {
$('.secMenu').hide();
$(this).toggleClass("open");
}).mouseleave(function(){
$('.secMenu').show();
});
}
});
.menuSticky{
/*top:14%; */
top:92px;
z-index:999;
position: fixed;
width: 100%;
left:1.1%;
}
#consultant,#segment,#partner,#insights{
min-height:100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="row secMenu">
<div class="col-md-9 col-sm-12 menu">
<ul class="nav navMenu">
<li class="test1" >Consulting & Solutions</li>
<li class="test2" >Segments</li>
<li class="test3" >Our Partners</li>
<li class="test4" >Perspectives</li>
</ul>
</div>
</div> <!--End of second menu -->
<div class="" id="consultant">consultant
</div>
<div class="" id="segment">segment
</div>
<div class="" id="partner">partner
</div>
<div class="" id="insights">insights
</div>
updated
$(window).scroll(function(){
if($(document).scrollTop() > 350) {
$('.secMenu').addClass('menuSticky');
} else {
$('.secMenu').removeClass('menuSticky');
}
var menu = $('.menuSticky');
console.log(menu.length);
if (menu.length==1) {
var origOffsetY = menu.offset().top;
console.log(menu.offset().top);
$('.dropdown').hover(function() {
$('.menuSticky').hide();
$(this).toggleClass("open");
}).mouseleave(function(){
$('.menuSticky').show();
});
}
});
.menuSticky{
/*top:14%; */
top:92px;
z-index:999;
position: fixed;
width: 100%;
left:1.1%;
}
#consultant,#segment,#partner,#insights{
min-height:100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="row secMenu">
<div class="col-md-9 col-sm-12 menu">
<ul class="nav navMenu">
<li class="test1" >Consulting & Solutions</li>
<li class="test2" >Segments</li>
<li class="test3" >Our Partners</li>
<li class="test4" >Perspectives</li>
</ul>
</div>
</div> <!--End of second menu -->
<div class="" id="consultant">consultant
</div>
<div class="" id="segment">segment
</div>
<div class="" id="partner">partner
</div>
<div class="" id="insights">insights
</div>

In your block of code have a condition to remove class menuSticky when scroll position less than 350px. So it will be a case you try to get offset top from an undefined variable menu.
To fix your issue, check menuSticky is existing before doing further.
var menu = $('.menuSticky');
if (menu.length) {
var origOffsetY = menu.offset().top;
console.log(menu.offset().top);
if ((($('.menuSticky').offset.top) == 92)) {
console.log('true');
$('.dropdown').hover(function () {
$('.secMenu').hide();
$(this).toggleClass("open");
}).mouseleave(function () {
$('.secMenu').show();
});
}
}

How to load the content onclick menu?

I have vertical menu. when I click on each menu it should load the content and should display..
here I have my code
<ul id="menu">
<li class="selected">Home</li>
<li>About</li>
<li>Technologies</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
<div id="menu1">
<div class="display" id="menu_home" >
<h3>home page</h3>
</div>
<div class="display" id="menu_about">
<h3>details about the page</h3>
</div>
</div>
so if i click on home menu in div it should show the home page..first function is to highlight the selected menu
and here my jquery
function highlightTab(link_id){
$("a[id^='menu_']").parent().removeClass('selected');
$("#menu_"+link_id).parent().addClass('selected');
}
$(document).ready(function()
{
$('#selected').on('click','a',function()
{
$('.display:visible').fadeOut();
$('.display[id='+$(this).attr('id')+']').fadeIn();
});
});
this is my css code
ul#menu li.selected{
background-color:black;
color:white;
}
.display
{
left: 734px;
position: relative;
}
How to do it?

There were some thing wrong with your code:
You've 2 the same ID's (the A and the DIV), updated with data-target.
You were searching for "#selected" instead of ".selected", updated this to #menu.
In JSFiddle the highlightTab function isn't being found. Why not mixing those two like here?
HTML:
<ul id="menu">
<li class="selected">Home
</li>
<li>About
</li>
<li>Technologies
</li>
<li>Services
</li>
<li>Contact Us
</li>
</ul>
<div id="menu1">
<div class="display" id="menu_home">
<h3>home page</h3>
</div>
<div class="display" id="menu_about">
<h3>details about the page</h3>
</div>
</div>
JS:
function highlightTab(link_id) {
$("a[id^='menu_']").parent().removeClass('selected');
$("#menu_" + link_id).parent().addClass('selected');
}
$(document).ready(function () {
$('#menu').on('click', 'a', function () {
$('.display:visible').fadeOut();
$('.display[id="' + $(this).data('target') + '"]').fadeIn();
});
});
CSS:
ul#menu li.selected {
background-color:black;
color:white;
}
.display {
display: none;
}

Parallax next and previous navigation

At the moment for my parallax site i have next and previous buttons on each section. I would like to just have one set of prev/next navigation that will go to each section.
Can you advise me on whitch route to go down please?
html:
<head>
<title>The history of aeronautics</title>
<meta charset="utf-8" />
<meta name="description" content="A parallax scrolling experiment using jQuery" />
<link rel="stylesheet" media="all" href="css/main.css" />
<script src="js/modernizr.custom.37797.js"></script>
<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="/js/jquery-1.6.1.min.js"><\/script>')</script>
<script src="js/parallax.js"></script>
</head>
<body>
<div id="wrapper">
<div id="car"><img src="images/car.png"></div>
<nav id="primary">
<ul>
<li>
<h1>Hospital</h1>
<a class="hospital" href="#hospital">View</a>
</li>
<li>
<h1>University</h1>
<a class="university" href="#university">View</a>
</li>
<li>
<h1>Health Centre</h1>
<a class="health-centre" href="#health-centre">View</a>
</li>
<li>
<h1>Horiba HQ</h1>
<a class="horiba-hq" href="#horiba-hq">View</a>
</li>
<li>
<h1>Entertainment Hub</h1>
<a class="entertainment-hub" href="#entertainment-hub">View</a>
</li>
<li>
<h1>Vet</h1>
<a class="vet" href="#vet">View</a>
</li>
<li>
<h1>General Hospital</h1>
<a class="general-hospital" href="#general-hospital">View</a>
</li>
</ul>
</nav>
<div id="content">
<article id="hospital">
<img src="images/image1.png"/>
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-2">
<div class="ch-info">
<h3><a class="university" href="#university">Next</a></h3>
</div>
</div>
</li>
</ul>
</article>
<article id="university">
<img src="images/image2.png"/>
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
<div class="ch-info">
<h3><a class="hospital" href="#hospital">Prev</a></h3>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-2">
<div class="ch-info">
<h3><a class="health-centre" href="#health-centre">Next</a></h3>
</div>
</div>
</li>
</ul>
</article>
<article id="health-centre">
<img src="images/image3.png"/>
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
<div class="ch-info">
<h3><a class="university" href="#university">Prev</a></h3>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-2">
<div class="ch-info">
<h3><a class="horiba-hq" href="#horiba-hq">Next</a></h3>
</div>
</div>
</li>
</ul>
</article>
<article id="horiba-hq">
<img src="images/image4.png"/>
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
<div class="ch-info">
<h3><a class="health-centre" href="#health-centre">Prev</a></h3>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-2">
<div class="ch-info">
<h3><a class="entertainment-hub" href="#entertainment-hub">Next</a></h3>
</div>
</div>
</li>
</ul>
</article>
<article id="entertainment-hub">
<img src="images/image5.png" />
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
<div class="ch-info">
<h3><a class="horiba-hq" href="#horiba-hq">Prev</a></h3>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-2">
<div class="ch-info">
<h3><a class="vet" href="#vet">Next</a></h3>
</div>
</div>
</li>
</ul>
</article>
<article id="vet">
<img src="images/image6.png"/>
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
<div class="ch-info">
<h3><a class="entertainment-hub" href="#entertainment-hub">Prev</a></h3>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-2">
<div class="ch-info">
<h3><a class="general-hospital" href="#general-hospital">Next</a></h3>
</div>
</div>
</li>
</ul>
</article>
<article id="general-hospital">
<img src="images/hospital.png"/>
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
<div class="ch-info">
<h3><a class="vet" href="#vet">Prev</a></h3>
</div>
</div>
</li>
</ul>
</article>
</div>
<!-- Parallax foreground -->
<div id="parallax-bg3">
</div>
<!-- Parallax midground clouds -->
<div id="parallax-bg2">
<img id="bg2-1" src="images/blurred-buildings.png" />
</div>
<!-- Parallax background clouds -->
<div id="parallax-bg1">
<img id="bg1-1" src="images/clouds.png" />
</div>
</div>
</body>
js:
$(document).ready(function() {
redrawDotNav();
/* Scroll event handler */
$(window).bind('scroll',function(e){
parallaxScroll();
redrawDotNav();
});
/* Next/prev and primary nav btn click handlers */
$('a.hospital').click(function(){
$('html, body').animate({
scrollTop:0
}, 1000, function() {
parallaxScroll(); // Callback is required for iOS
});
});
$('a.university').click(function(){
$('html, body').animate({
scrollTop:1500
}, 1000, function() {
parallaxScroll(); // Callback is required for iOS
});
});
$('a.health-centre').click(function(){
$('html, body').animate({
scrollTop:3800
}, 1000, function() {
parallaxScroll(); // Callback is required for iOS
});
return false;
});
$('a.horiba-hq').click(function(){
$('html, body').animate({
scrollTop:5500
}, 1000, function() {
parallaxScroll(); // Callback is required for iOS
});
});
$('a.entertainment-hub').click(function(){
$('html, body').animate({
scrollTop:6800
}, 1000, function() {
parallaxScroll(); // Callback is required for iOS
});
});
$('a.vet').click(function(){
$('html, body').animate({
scrollTop:7700
}, 1000, function() {
parallaxScroll(); // Callback is required for iOS
});
});
$('a.general-hospital').click(function(){
$('html, body').animate({
scrollTop:11000
}, 1000, function() {
parallaxScroll(); // Callback is required for iOS
});
});
/* Show/hide dot lav labels on hover */
$('nav#primary a').hover(
function () {
$(this).prev('h1').show();
},
function () {
$(this).prev('h1').hide();
}
);
});
/* Scroll the background layers */
function parallaxScroll(){
var scrolled = $(window).scrollTop();
$('#content').css('left',(0-(scrolled*.9))+'px');
$('#parallax-bg1').css('left',(0-(scrolled*.25))+'px');
$('#parallax-bg2').css('left',(0-(scrolled*.5))+'px');
$('#parallax-bg3').css('left',(0-(scrolled*.9))+'px');
}
/* Set navigation dots to an active state as the user scrolls */
function redrawDotNav(){
var section1Top = 0;
// The top of each section is offset by half the distance to the previous section.
var section2Top = $('#university').offset().left + 1000;
var section3Top = $('#health-centre').offset().left +3000;
var section4Top = $('#horiba-hq').offset().left +4000;
var section5Top = $('#entertainment-hub').offset().left +6000;
var section6Top = $('#vet').offset().left +6800;
var section7Top = $('#general-hospital').offset().left +9100;
$('nav#primary a').removeClass('active');
if($(document).scrollTop() >= section1Top && $(document).scrollTop() < section2Top){
$('nav#primary a.hospital').addClass('active');
} else if ($(document).scrollTop() >= section2Top && $(document).scrollTop() < section3Top){
$('nav#primary a.university').addClass('active');
} else if ($(document).scrollTop() >= section3Top && $(document).scrollTop() < section4Top){
$('nav#primary a.health-centre').addClass('active');
} else if ($(document).scrollTop() >= section4Top && $(document).scrollTop() < section5Top){
$('nav#primary a.horiba-hq').addClass('active');
} else if ($(document).scrollTop() >= section5Top && $(document).scrollTop() < section6Top){
$('nav#primary a.entertainment-hub').addClass('active');
} else if ($(document).scrollTop() >= section6Top && $(document).scrollTop() < section7Top){
$('nav#primary a.vet').addClass('active');
} else if ($(document).scrollTop() >= section7Top){
$('nav#primary a.general-hospital').addClass('active');
}
}
I have tried adding this which can be seen here but it doesnt click through to the next section
js used:
$(function() {
var $tabs = $('#content').tabs();
$(".ui-tabs-panel").each(function(i){
var totalSize = $(".ui-tabs-panel").size() - 1;
if (i != totalSize) {
next = i + 2;
$(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page »</a>");
}
if (i != 0) {
prev = i;
$(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>« Prev Page</a>");
}
});
$('.next-tab, .prev-tab').click(function() {
$tabs.tabs('select', $(this).attr("rel"));
return false;
});
});
Sorry about long post wanted to give as much info as possible
Thanks

You didn't insert anchor tag in href next page, you need to add it for each section of page, then automatically will go to next or previous page by clicking on that.. cause you just insert (#) so thats why nothing happened...

Categories