i need a small help for add a class on scroll in bootstrap tabbing carousal.
so here is my page url
when i click on any point from tabing like 1,2,3.. active class is adding on tabing on same that is perfect i use this is script
$('#myCarousel').bind('mousewheel', function(e){$(this).carousel('next');});
$('.tab li').on('click', function(){
$('li.active').removeClass('active');
$(this).addClass('active');
});
it is working perfect as class is adding on li.active but i also want .active class on current tab when i scroll in tab container. i have added scroll code and working perfect but need class to add in .tab li when i scroll
here is HTML code as well
<div class="tab">
<div class="container-tab">
<ul class="list-inline nav">
<li data-target="#myCarousel" data-slide-to="0" class="active"> <a href="#">
<div class="round-tab-num"> 1 </div>
<p>Working Smart <small>not harder</small> </p>
</a> </li>
<li data-target="#myCarousel" data-slide-to="1"> <a href="#">
<div class="round-tab-num"> 2 </div>
<p>Working Smart <small>not harder</small> </p>
</a> </li>
<li data-target="#myCarousel" data-slide-to="2"> <a href="#">
<div class="round-tab-num"> 3 </div>
<p>Working Smart <small>not harder</small> </p>
</a> </li>
<li data-target="#myCarousel" data-slide-to="3"> <a href="#">
<div class="round-tab-num"> 4 </div>
<p>Working Smart <small>not harder</small></p>
</a> </li>
<li data-target="#myCarousel" data-slide-to="4"> <a href="#">
<div class="round-tab-num"> 5 </div>
<p>Working Smart <small>not harder</small></p>
</a> </li>
</ul>
<!--The main div for carousel-->
<div id="myCarousel" class="carousel horizantal slide" data-interval="false">
<!-- Sliding images statring here -->
<div class="carousel-inner">
<div class="item active">
<div class="carousel-caption">
<h3>test1</h3>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>test2</h3>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>test3</h3>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>test4</h3>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>test5</h3>
</div>
</div>
</div>
<!-- Next / Previous controls here -->
<div> </div>
</div>
</div>
</div>
this code is also added
$(document).ready( function() {
$('#myCarousel').carousel({
interval: 4000
});
var clickEvent = false;
$('#myCarousel').on('click', '.container-tab .nav a', function() {
clickEvent = true;
$('.container-tab .nav li').removeClass('active');
$(this).parent().addClass('active');
}).on('slid.bs.carousel', function(e) {
if(!clickEvent) {
var count = $('.container-tab .nav').children().length -1;
var current = $('.container-tab .nav li.active');
current.removeClass('active').next().addClass('active');
var id = parseInt(current.data('slide-to'));
if(count == id) {
$('.container-tab .nav li').first().addClass('active');
}
}
clickEvent = false;
});
});
change your code as below simply remove class from currently active li and add active class to next li as below
$('#myCarousel').bind('mousewheel', function(e) {
$(this).carousel('next');
var $currentlyactive =$('li.active');
$currentlyactive.removeClass('active');
$currentlyactive.next().addClass('active');
});
Updated
$(document).ready(function() {
$('.carousel').carousel('pause');
});
$('#myCarousel').bind('mousewheel', function(e){$(this).carousel('next');});
$('.tab li').on('click', function(){
$('li.active').removeClass('active');
$(this).addClass('active');
});
this is the code in your html page remove this all carousel related code has been done in custom.js..
Related
I'm having a silly problem with a slightly customised Bootstrap carousel when it has more than 10 slides. The slides in double figures are not registering when you click the thumbnails?
<div class="col-md-12" id="slider">
<div id="theGallery" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<div class="item active" data-slide-number="0">
<div class="desc">
<p>This is image 1</p>
</div>
<img src="slide-1.jpg" class="img-responsive"> </div>
<!-- ... 2,3, 4 and so on -->
<div class="item" data-slide-number="10">
<div class="desc">
<p>This is image 11</p>
</div>
<img src="slide-11.jpg" class="img-responsive"> </div>
</div>
<a class="left carousel-control" href="#theGallery" role="button" data-slide="prev"> <span>Previous</span> </a> <a class="right carousel-control" href="#theGallery" role="button" data-slide="next"> <span>Next</span> </a> </div>
</div>
<!-- Thumbnails -->
<div class="thumbs hidden-sm hidden-xs">
<div class="width-auto" id="slider-thumbs">
<ul class="list-inline">
<li> <a id="carousel-selector-0" class="selected"> <img src="slide-1.jpg" class="img-responsive"> </a></li>
<!-- ... 2,3, 4 and so on -->
<li> <a id="carousel-selector-10" class=""> <img src="slide-11.jpg" class="img-responsive"> </a></li>
</ul>
</div>
</div>
$(document).ready(function() {
$('#theGallery').carousel({
interval: 4000
});
// handles the carousel thumbnails
$('[id^=carousel-selector-]').click( function(){
var id_selector = $(this).attr("id");
var id = id_selector.substr(id_selector.length -1);
id = parseInt(id);
$('#theGallery').carousel(id);
$('[id^=carousel-selector-]').removeClass('selected');
$(this).addClass('selected');
});
// when the carousel slides, auto update
$('#theGallery').on('slid', function (e) {
var id = $('.item.active').data('slide-number');
id = parseInt(id);
$('[id^=carousel-selector-]').removeClass('selected');
$('[id=carousel-selector-'+id+']').addClass('selected');
});
});
Probably something really simple. Any help appreciated. Thanks in advance!
Add radix to parseInt:
id = parseInt(id, 10);
I am trying to implement a smooth scroll to another section from my navigation.
The following is the javascript function im using
:
<script type="text/javascript">
function goToByScroll(id){
// Reove "link" from the ID
// Scroll
$('html,body').animate({
scrollTop: $("#"+id).offset().top},
'slow');
}
$("#nav > ul > li > a").click(function(e) {
// Prevent a page reload when a link is pressed
e.preventDefault();
// Call the scroll function
goToByScroll($(this).attr("id"));
});
</script>
My HTML is as following :
<div class="module-group right">
<div class="module left" id="nav">
<ul class="menu">
<li class="">
<a href="#">
Home
</a>
</li>
<li class="">
<a id="about" href="#">
About Us
</a>
</li>
</ul>
</div>
</div>
My section is as below :
<section id="about">
<div class="container" id="">
<div class="row" id="">
<div class="col-sm-12">
<h4 class="uppercase mb80">About Us</h4>
<div class="tabbed-content button-tabs vertical">
<ul class="tabs">
<li class="active">
<div class="tab-title">
<span>Introduction</span>
</div>
<div class="tab-content">
<h5 class="uppercase">Let's Talk about</h5>
<hr>
<p align="justify">
</p>
</div>
</li>
<li>
<div class="tab-title">
<span>History</span>
</div>
<div class="tab-content">
<h5 class="uppercase">Our footprints on the sands of time..</h5>
<hr>
<p align="justify">
</p>
</div>
</li>
<li>
<div class="tab-title">
<span>Mission</span>
</div>
<div class="tab-content">
<h5 class="uppercase">Our Mission</h5>
<hr>
<p align="justify">
</p>
</div>
</li>
<li>
<div class="tab-title">
<span>Vision</span>
</div>
<div class="tab-content">
<h5 class="uppercase">Our Vision</h5>
<hr>
<p align="justify">
</p>
</div>
</li>
</ul>
</div>
<!--end of button tabs-->
</div>
</div>
<!--end of row-->
</div>
<!--end of container-->
</section>
I am facing problems calling the jquery function. I looked up on other questions asked and tried implementing an answer previously given, however it doesnt seem to be working for me.
Change your nav link to About Us.
Then change the function call to goToByScroll($(this).attr("href"));
You can not have two elements with the same id. Use the href like it was intended.
About Us
and when you read the hsah of the clicked anchor
function goToByScroll(id){
$('html,body').animate({
scrollTop: $(id).offset().top},
'slow');
}
$("#nav > ul > li > a").click(function(e) {
e.preventDefault();
goToByScroll(this.hash);
});
basic example:
function goToByScroll(id) {
$('html,body').animate({
scrollTop: $(id).offset().top
},
'slow');
}
$("#nav > ul > li > a").click(function(e) {
e.preventDefault();
goToByScroll(this.hash);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">
<ul>
<li> About Us </li>
</ul>
</div>
<div style="height:300px;">x</div>
<div style="height:300px;">x</div>
<div id="about" style="height:300px; border: 1px solid black;">ABOUT</div>
<div style="height:300px;">x</div>
Use href attribute to store the id you need to scroll to. Also don't forget to wrap javascript in $(document).ready() to make sure event handlers are attached after the page is ready.
Here's javascript:
$(document).ready(function() {
function goToByScroll(id){
$('html,body').animate({
scrollTop: $(id).offset().top
}, 'slow');
}
$("#nav > ul > li > a").click(function(e) {
e.preventDefault();
goToByScroll($(this).attr("href"));
});
});
And in HTML:
<li class="">
<a href="#about">
About Us
</a>
</li>
I really need some help for jquery tabs. I would like to get to a specific tab via external anchor link (http://www.url.com#content2), the navigation link becomes activated and the correct tab is shown.
Other HTML Page
B Title | B Title
HTML
<div class="tabs-container">
<ul class="tabs">
<li class="current"><h4>Title 1</h4></li>
<li><h4>Title 2</h4></li>
</ul>
<div class="border-box group">
<div id="tab1" class="panel group showing" style="display: block;">
a
</div>
<div id="tab2" class="panel group" style="display: none;">
<a id="b">B title A<a><br>
information...... <br><br/>
<a id="bb">B title B<a><br>
information...... <br><br/>
</div>
</div>
</div>
Javascript
<script>
(function(a){a.fn.yiw_tabs=function(b){var c={tabNav:"ul.tabs",tabDivs:".containers",currentClass:"current"};b&&a.extend(c,b);this.each(function(){var b=a(c.tabNav,this),f=a(c.tabDivs,this),e;f.children("div").hide();e=0<a("li."+c.currentClass+" a",b).length?"#"+a("li."+c.currentClass+" a",b).data("tab"):"#"+a("li:first-child a",b).data("tab");a(e).show().addClass("showing").trigger("yit_tabopened");a("li:first-child a",b).parents("li").addClass(c.currentClass);a("a",b).click(function(){if(!a(this).parents("li").hasClass("current")){var e=
"#"+a(this).data("tab");a(this);a("li."+c.currentClass,b).removeClass(c.currentClass);a(this).parents("li").addClass(c.currentClass);a(".showing",f).fadeOut(200,function(){a(this).removeClass("showing").trigger("yit_tabclosed");a(e).fadeIn(200).addClass("showing").trigger("yit_tabopened")})}return!1})})}})(jQuery);
</script>
How can i edit? Thank you for your help.
use jQuery this.hash;
$(document).ready(function(){
$('#tab1').show();
$('.tabs li a.current').addClass('current');
$('.tabs li a').click(function() {
var tabDivId = this.hash;
$('.tabs li a').removeClass('current');
$(this).addClass('current');
$('.panel').hide();
$(tabDivId).fadeIn();
return false;
});
});
.panel{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="tabs">
<li><h4>Title 1</h4></li>
<li><h4>Title 2</h4></li>
</ul>
<div class="border-box group">
<div id="tab1" class="panel group showing">
a
</div>
<div id="tab2" class="panel group">
b
</div>
</div>
Replace the href attribute value to the id of the corresponding Tab and use below code...
HTML
<ul class="tabs">
<li class="current">
<h4><a data-tab="tab1" title="Title 1" href="#tab1">Title 1</a></h4>
</li>
<li>
<h4><a data-tab="tab2" title="Title 2" href="#tab2">Title 2</a></h4>
</li>
</ul>
<div class="border-box group">
<div id="tab1" class="panel group showing" style="display: block;"> a </div>
<div id="tab2" class="panel group" style="display: none;"> b </div>
</div>
Jquery
$('.tabs a').click(function(){
var attr = $(this).attr('href')
$('.tabs li').removeClass('current');
$(this).closest('li').addClass('current');
$('.border-box div').hide();
$(attr).show();
})
css
.border-box div { display:none;}
.showing { display:block;}
You can ask if any assistance required..
There I have used 2 carousel 1st is slide to text and second is navigate image inside mobile frame but both are not sliding same time if it will navigate by navigator then mov
live on http://ashish.net63.net I have used bootstrap carousel here if you have any other carousel for this type of alider please help me thanks in advance
$(function(){
$('.carousel-sync').on('slid.bs.carousel', function(ev) {
$('.carousel-sync').removeClass('sliding');
});
$('.carousel-indicators li').on('click', function() {
$('#myCarousel1,#myCarousel2').carousel(parseInt(this.getAttribute('data-slide-to')));
});
});
<div class="col-md-6 col-sm-12 col-xs-12">
<div id="myCarousel1" class="carousel slide carousel-sync" data-ride="carousel" data-pause="false">
<ol class="carousel-indicators">
<li data-slide-to="0" class="active"></li>
<li data-slide-to="1"></li>
<li data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
<a class="carousel-arrow carousel-arrow-prev" href="[id*=myCarousel]" data-slide="prev">
</a>
<a class="carousel-arrow carousel-arrow-next" href="[id*=myCarousel]" data-slide="next">
</a>
</div><!-- /.carousel -->
2nd carousel from here
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="mo-holder img-responsive">
<div id="myCarousel2" class="carousel slide carousel-sync" data-ride="carousel" data-pause="false">
<div class="carousel-inner">
<div class="item active">
<img src="images/1screen.jpg" class="img-responsive" alt="...">
</div>
</div>
</div>
</div>
You can use something like:
$( document ).ready(function() {
$('#carousel1').carousel({
interval: 10000
});
$('#carousel2').carousel({
interval: 10000
});
});
This way both carousels will start up with an interval of 10 seconds inbetween slides.
How can I toggle the subnav for each item, and if one is open, hide the open one to show the current one? If there are none shown, just toggle. If you click one and show subnav then and click another hide previous and show current.
Here is my html -
<header>
<div class="content-wrapper">
<div class="user-menu-wrapper">
<div class="hsn-logo"></div>
<div class="user-greeting-wrapper">
<div class="user-greeting">Hi, Abraham</div>
</div>
<div class="user-menu">
<ul class="user-menu-items">
<li>#Html.ActionLink(" ", "Index", "Home", new { #class = "my-account" })</li>
<li>#Html.ActionLink(" ", "Index", "Home", new { #class = "my-favorites" })</li>
<li>#Html.ActionLink(" ", "Index", "Home", new { #class = "my-bag" })</li>
</ul>
</div>
</div>
<div class="hsn-nav-wrapper">
<div class="hsn-nav">
<ul class="hsn-nav-items">
<li style="width: 25%">
<a class="shop" href="#">
<span class="hsn-nav-item-wrap">
<span>SHOP</span><span class="drop-down-arrow"></span>
</span>
</a>
</li>
<li style="width: 25%">
<a class="watch" href="#">
<span class="hsn-nav-item-wrap">
<span>WATCH</span><span class="drop-down-arrow"></span>
</span>
</a>
</li>
<li style="width: 25%">
<a class="play" href="#">
<span class="hsn-nav-item-wrap">
<span>PLAY</span><span class="drop-down-arrow"></span>
</span>
</a>
</li>
<li style="width: 15%">
<a href=""><span class="hsn-search-icon"></span>
</a>
</li>
</ul>
</div>
<br class="clear" />
</div>
</div>
</header>
<subnav id="shop" class="shop-subnav">
<div class="hsn-subnav-wrapper">
<div class="hsn-subnav">
<div class="hsn-subnav-left">
<ul>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li><span class="hsn-subnav-callout">Deals</span></li>
</ul>
</div>
<div class="hsn-subnav-right">
<ul>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li><span class="hsn-subnav-callout">Clearance</span></li>
</ul>
</div>
</div>
</div>
</subnav>
<subnav id="watch" class="watch-subnav">
<div class="hsn-subnav-wrapper">
<div class="hsn-subnav">
<div class="hsn-subnav-left">
<ul>
<li>SubnavItem2</li>
<li>SubnavItem2</li>
<li>SubnavItem2</li>
<li>SubnavItem2</li>
</ul>
</div>
<div class="hsn-subnav-right">
<ul>
<li>SubnavItem2</li>
<li>SubnavItem2</li>
<li>SubnavItem2</li>
<li>SubnavItem2</li>
</ul>
</div>
</div>
</div>
</subnav>
Here is my Jquery / JS -
$(document).ready(function () {
$('ul.hsn-nav-items li a').click(function () {
var navitem = $(this).attr('id')
, id = $(this).attr('class')
, subnav = $('subnav.' + id + '-subnav');
$('a.selected').not(this).removeClass('selected');
$(this).toggleClass('selected');
$('#'+id).toggle();
});
});
Just glancing through your html - you have duplicate IDs. Your 'a' that links to 'play' also has an ID of 'play' - that element will be selected, not the subnav!
Also, two of your links are classed watch, none shop.
The simplest way to approach this is to hide all the <subnav> on each click. All your existing code will work just fine which already takes care of toggling the relevant <subnav>.
var $subNavs = $('subnav');
$subNavs.hide();
$('ul.hsn-nav-items li a').click(function () {
$subNavs.hide();
var navitem = $(this).attr('id')
, id = $(this).attr('class')
, subnav = $('subnav.' + id + '-subnav');
$('a.selected').not(this).removeClass('selected');
$(this).toggleClass('selected');
$('#'+id).toggle();
return false;
});
I also added a return false; to stop the default click event on the <a> being executed, which could result in a page load since href="#".
That said, <subnav> is a non-standard element and you would be better off using a simpler markup to describe the data. It may also prove useful to give the each subnav a common class which makes finding them via jQuery simpler.
I have also made a small demo using the following simplified code
HTML
<a class="shop" href="#">
<span class="hsn-nav-item-wrap">
<span>SHOP</span><span class="drop-down-arrow"></span>
</span>
</a><br/>
<a class="watch" href="#">
<span class="hsn-nav-item-wrap">
<span>WATCH</span><span class="drop-down-arrow"></span>
</span>
</a><br/>
<a class="play" href="#">
<span class="hsn-nav-item-wrap">
<span>PLAY</span><span class="drop-down-arrow"></span>
</span>
</a>
<div id="shop" class="shop subnav">
shop
</div>
<div id="watch" class="watch subnav">
watch
</div>
<div id="play" class="play subnav">
play
</div>
JavaScript
var $subNavs = $('.subnav');
$subNavs.hide();
$('a').click(function () {
var $subNavToToggle = $('#' + ($(this).attr('class').split(' ')[0]));
var doToggle = $subNavToToggle.is(':not(:visible)');
$subNavs.hide();
$('a.selected').not(this).removeClass('selected');
$(this).toggleClass('selected');
$subNavToToggle.toggle(doToggle);
return false;
});