On my nav-tabs settings tab I have a nested nav-tabs in a vertical list .tabbable tabs-left When I reload my page only my parent .nav-tabs remember which tab was used.
Question: When I am in my settings tab and I have clicked on a nested
tab how can I make sure when I reload page that both stay on the
correct tab?
CODEPEN DEMO
This script seems to only work for the parent navtabs not nested ones also.
<script type="text/javascript">
$(function() {
//for bootstrap 3 use 'shown.bs.tab' instead of 'shown' in the next line
$('a[data-toggle="tab"]').on('click', function (e) {
//save the latest tab; use cookies if you like 'em better:
localStorage.setItem('lastTab', $(e.target).attr('href'));
});
//go to the latest tab, if it exists:
var lastTab = localStorage.getItem('lastTab');
if (lastTab) {
$('a[href="'+lastTab+'"]').click();
}
});
</script>
HTML
<div class="container">
<div class="row">
<div class="col-sm-12">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content" style="padding-top: 20px;">
<div role="tabpanel" class="tab-pane" id="home"></div>
<div role="tabpanel" class="tab-pane" id="profile"></div>
<div role="tabpanel" class="tab-pane" id="messages"></div>
<div role="tabpanel" class="tab-pane" id="settings">
<div class="row">
<div class="col-sm-3">
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li>Edit Profile</li>
<li>Edit Avatar</li>
<li class="">Privileges</li>
</ul>
</div>
</div>
<div class="col-sm-9">
<div class="tab-content">
<div class="tab-pane" id="a">
Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.
</div>
<div class="tab-pane" id="b">
Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
</div>
<div class="tab-pane" id="c">
Thirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Related
I have this simple screen of an application in Vue.js:
Sample screen
I want to hide these divisions between cells, in a manner that the lines of the itens are continous.
I had tried to alter the classes of the columns to "col-md" and "col-sd", but witout sucesss.
Here is the code of the template session of the application:
<template>
<div class="container">
<h1> Animais </h1>
<br>
<div class="row">
<div class="col-md-6">
<h3>
Animais Cadastrados
<span class="badge badge-info">{{animais.length}}</span>
</h3>
<ul>
<div class="row">
<div class="col">
Nome
<li class="list-group-item" v-for="animal in animais" v-bind:key="animal">
{{animal.nome}}
</li>
</div>
<div class="col">
Idade
<li class="list-group-item" v-for="animal in animais" v-bind:key="animal">
{{animal.idade}}
</li>
</div>
<div class="col">
Raça
<li class="list-group-item" v-for="animal in animais" v-bind:key="animal">
{{animal.raca}}
</li>
</div>
<div class="col">
Informações
<li class="list-group-item" v-for="animal in animais" v-bind:key="animal">
<i #click="Show" class="fa fa-info-circle" aria-hidden="true"></i>
</li>
</div>
</div>
</ul>
</div>
<div class="col-md-6">
<h3>
h3. Lorem ipsum dolor sit amet.
</h3>
<p>
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
</p>
</div>
</div>
</div>
</template>
To make things easier, you can just copy the generated HTML into JsFiddle. I'm trying to guess what you are trying to achieve and I think you can try something like that:
<div class="row" v-for="animal in animais" v-bind:key="animal">
<div class="col-md-3">{{animal.nome}}</div>
<div class="col-md-3">{{animal.idade}}</div>
<div class="col-md-3">{{animal.raca}}</div>
<div class="col-md-3">
<i #click="Show" class="fa fa-info-circle" aria-hidden="true"></i>
</div>
</div>
Again, I'm not sure what you're trying to do but looping 4 times on the same array is probably not the way to go. And yes, you may nest Bootstrap a row inside another.
My Bootstrap carousels are not working. When I click on the slider left or slider right buttons, the webpage just moves down and #bannerCarousel appears in the browser address bar. As for the "Testimonials" carousel, it is supposed to play automatically, but it doesn't do anything. Can someone please help me resolve this issue?
Here is my HTML and Javascript:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function(){
$('.carouselBanner').carousel(),
$('.carouselTestimonial').carousel()
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RialedUp</title>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="css/bootstrap-responsive.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<section class="hero-unit">
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
RialedUp
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About Us</li>
<li>Services</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div><!-- end navbar -->
<div id="bannerCarousel" class="carouselBanner slide">
<div class="carousel-inner">
<div class="active-item">
<div class="hero-unit-inner text-center">
<h1>We build well designed websites</h1>
<h4>Class aptent taciti sociosqu ad litora torquent per conubia nostra.</h4>
Get Started!
Learn More
<div> </div>
<img src="img/browser.png" alt="Browser" />
</div><!-- end hero-unit-inner -->
</div><!-- end item -->
<div class="item">
<div class="hero-unit-inner text-center">
<h1>We build well designed websites</h1>
<h4>Class aptent taciti sociosqu ad litora torquent per conubia nostra.</h4>
Get Started!
Learn More
<img src="img/browser.png" alt="Browser" />
</div><!-- end hero-unit-inner -->
</div><!-- end item -->
<div class="item">
<div class="hero-unit-inner text-center">
<h1>We build well designed websites</h1>
<h4>Class aptent taciti sociosqu ad litora torquent per conubia nostra.</h4>
Get Started!
Learn More
<img src="img/browser.png" alt="Browser" />
</div><!-- end hero-unit-inner -->
</div><!-- end item -->
</div><!-- end carousel inner -->
<a class="carousel-control left" href="#bannerCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#bannerCarousel" data-slide="next">›</a>
</div><!-- end bannerCarousel -->
</div>
</section><!-- end hero-unit -->
<section id="process">
<div class="container">
<div class="row">
<div class="h-line hidden-phone"> </div>
<div class="span3">
<div class="plan text-center">
<span class="process-icon iplan"> </span>
<h4 class="heading">Plan</h4>
<p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p>
Read More
</div>
</div>
<div class="span3">
<div class="design text-center">
<span class="process-icon idesign"> </span>
<h4 class="heading">Design</h4>
<p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p>
Read More
</div>
</div>
<div class="span3">
<div class="develop text-center">
<span class="process-icon idevelop"> </span>
<h4 class="heading">Develop</h4>
<p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p>
Read More
</div>
</div>
<div class="span3">
<div class="launch text-center">
<span class="process-icon ilaunch"> </span>
<h4 class="heading">Launch</h4>
<p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p>
Read More
</div>
</div>
</div>
</div>
</section><!-- end process -->
<section id="portfolio">
<div class="container">
<div class="row">
<div class="span3">
<div class="p-item">
<h4 class="heading">Portfolio</h4>
<p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p>
<strong>Our Portfolio</strong>
</div>
</div>
<div class="span3">
<div class="p-item">
<div class="text-center">
<img src="img/thumbnail/thumb-1.png" class="img-polaroid" alt="Web Design" />
<h5 class="title">LeafireDesigns</h5>
<small class="category">Web Design</small>
</div>
</div>
</div>
<div class="span3">
<div class="p-item">
<div class="text-center">
<img src="img/thumbnail/thumb-2.png" class="img-polaroid" alt="Web Development" />
<h5 class="title">Unity</h5>
<small class="category">Web Development</small>
</div>
</div>
</div>
<div class="span3">
<div class="p-item">
<div class="text-center">
<img src="img/thumbnail/thumb-3.png" class="img-polaroid" alt="Logo Design" />
<h5 class="title">Ingenious</h5>
<small class="category">Logo Design</small>
</div>
</div>
</div>
</div>
</div>
</section><!-- end portfolio -->
<section id="partners">
<div class="container">
<div class="row">
<div class="span3 text-center">
<img src="img/thumbnail/partner-1.png" alt="Graphic Driver" />
</div>
<div class="span3 text-center">
<img src="img/thumbnail/partner-2.png" alt="Theme Forest" />
</div>
<div class="span3 text-center">
<img src="img/thumbnail/partner-3.png" alt="Code Canyon" />
</div>
<div class="span3 text-center">
<img src="img/thumbnail/partner-4.png" alt="Active Den" />
</div>
</div>
</div>
</section><!-- end partners -->
<section id="widgets">
<div class="container">
<div class="row">
<div class="span4">
<div class="testimonials">
<h4 class="heading">Testimonials</h4>
<div id="testimonialCarousel" class="carouselTestimonial">
<div class="carousel-inner">
<div class="active item">
<img src="img/thumbnail/small-thumb-1.png" class="pull-left" alt="Moron" />
<blockquote>
<p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p>
<cite>Moe Ron <br />
www.moron.com
</cite>
</blockquote>
</div>
<div class="item">
<img src="img/thumbnail/small-thumb-1.png" class="pull-left" alt="Moron" />
<blockquote>
<p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p>
<cite>Moe Ron <br />
www.moron.com
</cite>
</blockquote>
</div>
<div class="item">
<img src="img/thumbnail/small-thumb-1.png" class="pull-left" alt="Moron" />
<blockquote>
<p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p>
<cite>Moe Ron <br />
www.moron.com
</cite>
</blockquote>
</div>
</div><!-- end carousel-inner -->
</div><!-- end testimonialCarousel -->
</div><!-- end testimonials -->
</div>
<div class="span4">
<div class="blog">
<h4 class="heading">Our Latest Posts</h4>
<ul class="blog-lists">
<li>
<h5>This is Photoshops version of Lorem Ipsum</h5>
<small>October 4, 2017 | Posted by Admin</small>
</li>
<li>
<h5>This is Photoshops version of Lorem Ipsum</h5>
<small>October 3, 2017 | Posted by Admin</small>
</li>
<li>
<h5>This is Photoshops version of Lorem Ipsum</h5>
<small>October 2, 2017 | Posted by Admin</small>
</li>
</ul>
</div><!-- end blog -->
</div>
<div class="span3">
<div class="tweets">
<h4 class="heading">Latest Tweets</h4>
<ul class="tweet-lists">
<li class="clearfix">
<img src="img/thumbnail/small-thumb-2.png" class="pull-left" alt="Clown" />
<p>Proin gravida nibh vel velit auctor a iquet. http://this.is.me247</p>
</li>
<li class="clearfix">
<img src="img/thumbnail/small-thumb-2.png" class="pull-left" alt="Clown" />
<p>Proin gravida nibh vel velit auctor a iquet. http://this.is.me247</p>
</li>
<li class="clearfix">
<img src="img/thumbnail/small-thumb-2.png" class="pull-left" alt="Clown" />
<p>Proin gravida nibh vel velit auctor a iquet. http://this.is.me247</p>
</li>
</ul>
</div><!-- end tweets-->
</div>
</div>
</div>
</section><!-- end widgets -->
<footer>
<div class="container">
<div class="row">
<div class="span12 text-center">
<div class="table">
<ul class="footer-links">
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</div>
<div id="social">
<span class="social-sprite twitter"> </span>Follow Us on Twitter
<span class="social-sprite facebook"> </span>Like Us on Facebook
</div>
<small> © Rialed Up 2017</small>
</div>
</div>
</div>
</footer>
Change
<div id="bannerCarousel" class="carouselBanner slide">
<div class="carousel-inner">
<div class="active-item">
to
<div id="bannerCarousel" class="carouselBanner slide">
<div class="carousel-inner">
<div class="active item"> <!-- active item not active-item -->
https://jsfiddle.net/jv6xzgm6/
I used this script: http://keith-wood.name/countdown.html
I have more than one 'data-time' attributes on the same page like you see in the code.
The first data-time attribute is 17 nov and the second one gives data-time attribute 18 nov:
<!-- 1st block -->
<div class="kf_event_list_wrap">
<div class="row">
<div class="col-lg-6 col-md-5 col-sm-5">
<!--EVENT LIST THUMB Start-->
<div class="kf_event_list_thumb">
<figure>
<img src="extra-images/event_1.jpg" alt=""/>
<div id="defaultCountdown" data-time="nov 17, 2016 12:00:00" class="defaultCountdown"></div>
</figure>
</div>
<!--EVENT LIST THUMB END-->
</div>
<div class="col-lg-6 col-md-7 col-sm-7">
<!--EVENT LIST DES Start-->
<div class="kf_event_list_des">
<h4>University <span>Convocation</span></h4>
<p>Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisie tiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam.</p>
<ul class="kf_event_list_links">
<li><i class="fa fa-user"></i>John Doe</li>
<li><i class="fa fa-calendar"></i>Saturday 10:00 AM</li>
</ul>
</div>
<!--EVENT LIST DES END-->
</div>
</div>
</div>
<!-- 2th block -->
<div class="kf_event_list_wrap">
<div class="row">
<div class="col-lg-6 col-md-5 col-sm-5">
<!--EVENT LIST THUMB Start-->
<div class="kf_event_list_thumb">
<figure>
<img src="extra-images/event_1.jpg" alt=""/>
<div id="defaultCountdown" data-time="nov 18, 2016 12:00:00" class="defaultCountdown"></div>
</figure>
</div>
<!--EVENT LIST THUMB END-->
</div>
<div class="col-lg-6 col-md-7 col-sm-7">
<!--EVENT LIST DES Start-->
<div class="kf_event_list_des">
<h4>University <span>Convocation</span></h4>
<p>Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisie tiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam.</p>
<ul class="kf_event_list_links">
<li><i class="fa fa-user"></i>John Doe</li>
<li><i class="fa fa-calendar"></i>Saturday 10:00 AM</li>
</ul>
</div>
<!--EVENT LIST DES END-->
</div>
</div>
</div>
But now, the javascript code:
if($('.defaultCountdown').length){
var date1 = $('#defaultCountdown').data('time');
var date = new Date(date1);
$('.defaultCountdown').countdown({ until: date});
}
Now i have a problem that the timer is showing the same countdown. Maybe because the id is the same on the 2 blocks?
I thought that there was something wrong with my javascript and i searched for something else but its also not working. I don't know of this is in the right direction:
if($('.defaultCountdown').length){
$('[data-time]').each(function() {
var $this = $('.defaultCountdown'), finalDate = $(this).data('time');
$this.countdown(finalDate, function(event) {
var date = new Date(finalDate);
$('.defaultCountdown').countdown({ until: date});
});
});
}
I think this will work:
$('[data-time]').each(function() {
var $this = $(this), finalDate = new Date($(this).data('time'));
$this.countdown({ until: finalDate});
// or all in one line
// $(this).countdown({ until: new Date($(this).data('time'))});
});
I think that the problem with what you've tried is that you were using:
$('.defaultCountdown').countdown({ until: date});
Instead of:
$this.countdown({ until: date});
You were setting the countdown to all the elements with class defautlCountdown instead of setting it to the current element $this.
I am using slick slider for a page.Everything works great except one thing: When I drag the slide sometimes the image or text bounces and that's look really bad. What can I do to avoid that problem?
Here is my code
<section class="portfolio" id="portfolio">
<div class="container" style="height:100px">
<div class="row">
<div class="col-lg-12"></div>
</div>
</div>
<div id="portfolio_slider">
<div id="item">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 text-right">
<div id="project_name">
PROJECT<br />
NAME
</div>
<div id="project-info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tortor erat,
laoreet ut ullamcorper vel, fermentum vel ex. Donec convallis leo sit amet auctor
rutrum. Nullam accumsan risus at quam porttitor ec tortor erat, laoreet ut
ullamcorper vel, fermentum vel tristique.
</div>
<div id="read_more">Read More...</div>
</div>
<div class="col-lg-7 col-lg-offset-1" id="project_image">
<img class="img-responsive shadow" src="http://i.imgur.com/35Lun7R.jpg" />
</div>
<div class=" col-lg-1 col-md-1 social_buttons">
<div class="centered">
<div class="flex-item" style="padding-bottom: 50px;">
<i class="fa fa-facebook"></i>
</div>
<div class="flex-item" style="padding-bottom: 50px;">
<i class="fa fa-twitter"></i>
</div>
<div class="flex-item">
<i class="fa fa-instagram"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
in the code pen, in CSS, there is one class, #portfolio_slider #item with margin: top 20px remove it.
I have some jquery tabs working
http://jsfiddle.net/barrycorrigan/e8rfqw8g/
But what I cant work out is if someone clicks on a tab the title changes which is outside the tab content
This is what I tried
$(document).ready(function(){
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab'), $ct = $(this).closest('.tab-ct');
$ct.find('ul.tabs li.current').removeClass('current');
$ct.find('.tab-content.current').removeClass('current');
$ct.find('.tab-title.current').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
});
});
The HTML is
<div class="tab-ct">
<h2 id="tab1" class="tab-title current">Tab 1</h2>
<h2 id="tab2" class="tab-title">Tab 2</h2>
<h2 id="tab3" class="tab-title">Tab 3</h2>
<ul class="tabs">
<li class="tab-link current" data-tab="tab1">Tab 1</li>
<li class="tab-link" data-tab="tab2">Tab 2</li>
<li class="tab-link" data-tab="tab3">Tab 3</li>
</ul>
<div id="tab1" class="tab-content current">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut faucibus metus mauris, sed lacinia ipsum ullamcorper interdum. Suspendisse potenti. Nullam.
</div>
<div id="tab2" class="tab-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut faucibus metus mauris, sed lacinia ipsum ullamcorper interdum. Suspendisse potenti. Nullam.
</div>
<div id="tab3" class="tab-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut faucibus metus mauris, sed lacinia ipsum ullamcorper interdum. Suspendisse potenti. Nullam.
</div>
</div>
The title changes ok but now the tab content doesn't work. Maybe it has something to do with the ID's i'm not sure
Any ideas?
ID of an element must be unique.
When you use an id-selector, it will return only the first element with the given id, in your case both the h2 and .tab-content has the same id so it is returning only the h2 as it is first in the dom structure.
One possible solution in this case is to use a prefix/suffix to one of those ids. In the below solution a suffix -title is added to the h2
<div class="tab-ct">
<h2 id="next-game-title" class="tab-title current">Tab 1</h2>
<h2 id="table-title" class="tab-title">Tab 2</h2>
<h2 id="last-game-title" class="tab-title">Tab 3</h2>
<ul class="tabs">
<li class="tab-link current" data-tab="next-game">17/01/15 - 15:00</li>
<li class="tab-link" data-tab="table">Table</li>
<li class="tab-link" data-tab="last-game">Last Game</li>
</ul>
<div id="next-game" class="tab-content current">Content 1</div>
<div id="table" class="tab-content">Content 2</div>
<div id="last-game" class="tab-content">Content 3</div>
</div>
then
$(document).ready(function () {
$('ul.tabs li').click(function () {
var tab_id = $(this).attr('data-tab'),
$ct = $(this).closest('.tab-ct');
$ct.find('ul.tabs li.current').removeClass('current');
$ct.find('.tab-content.current').removeClass('current');
$ct.find('.tab-title.current').removeClass('current');
$(this).addClass('current');
$("#" + tab_id).addClass('current');
$("#" + tab_id + '-title').addClass('current');
});
});
Demo: Fiddle