I'm using jQuery lightSlider as image slider. I want to have sliders inside bootstrap pills (one slider per pill). Nevertheless, I have found the following situation: In the first pill the slider is OK. In the second pill the slider content is not displayed (resizing the window brings up the slider content!). I don't see how to solve this problem. Any help will be sincerely appreciated.
My (simplified) html:
<div>
<ul class="nav nav-pills">
<li class="active"> <a data-toggle="pill" id="pill1" href="#s1">Pill 1</a>
</li>
<li> <a data-toggle="pill" id="pill2" href="#s2">Pill 2</a>
</li>
</ul>
</div>
<div class="tab-content">
<div class="col-md-12 tab-pane fade in active" id="s1">
<ul id="slider-1">
<li>
<p>one</p>
</li>
<li>
<p>two</p>
</li>
<li>
<p>tree</p>
</li>
</ul>
</div>
<div class="col-md-12 tab-pane fade active" id="s2">
<ul id="slider-2">
<li>
<p>uno</p>
</li>
<li>
<p>dos</p>
</li>
<li>
<p>tres</p>
</li>
</ul>
</div>
</div>
The javascript:
function initSlider(sliderId) {
$('#'+sliderId).lightSlider({
item:2,
loop:false,
slideMove:1
});
}
initSlider('slider-1');
initSlider('slider-2');
And the Jsfiddle reproducing the problem: https://jsfiddle.net/sedtjchs/4/
Thank you for your help!
Problem: You are trying to call lightSlider on the content(#s2) which was already hidden so plugin can not calculate height, width(and etc) on that element.
Add active class to the second .panel-pane.
Jsfiddle
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$('#slider-2').lightSlider({
item:4,
loop:false,
slideMove:2,
pager: false,
easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
speed:600,
responsive : [
{
breakpoint:480,
settings: {
item:2,
slideMove:1
}
}
]
}).refresh();
});
I have the same problem, but the Alex's solution doesn't work for me as my tab wrapper doesn't have a fixed height so it will show blank gap under the 1st tab at the first load.
The Thành Nguyễn's solution is working for me. Basically it's refreshing the slider everytime you click on the tab navigation, so then LightSlider will be able to calculate the active container height.
Here's the complete script :
$(document).ready(function() {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$('#slider-2').lightSlider({
item:4,
loop:false,
slideMove:2,
pager: false,
easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
speed:600,
responsive : [
{
breakpoint:480,
settings: {
item:2,
slideMove:1
}
}
]
}).refresh();
});
});
Related
I am creating a navigation bar that allows a user to view a dropdown after hovering or clicking a link. Each link has a class called "nav_item". There is more than 1 dropdown menu; each one has a class called "dropdown". After hovering over "nav_item" the child element with a class called "dropdown" should be set to "display: block;".
Here's my nav bar code:
<nav>
<div id="nav_title">
Learn Web Design
</div>
<div class="nav_item">
Intro
</div>
<div class="nav_item">
Learn
<ul class="dropdown">
<li>
HTML
</li>
<li>
CSS
</li>
</ul>
</div>
<div class="nav_item">
About
<ul class="dropdown">
<li>
FAQ
</li>
<li>
The Author
</li>
</ul>
</div>
<div class="nav_item">
Support
</div>
<div class="nav_item">
Contact
</div>
</nav>
Here's the jQuery code that is obviously syntactically incorrect:
$(".nav_item").click(function() {
$(this.".dropdown").css("display", "block");
});
There's another method that is clearly incorrect in CSS:
.nav_item:hover {
this.dropdown {
display: block;
}
}
Try this:
$(".nav_item").click(function() {
$(this).find(".dropdown").css("display", "block");
});
To do something similar using hover:
$(".nav_item").hover(
function(){ $(this).find('.dropdown').css('display', 'block'); },
function(){ $(this).find('.dropdown').css('display', 'none'); }
);
I have a sub-menu inside the navbar under the Services nav-item.
The expected behavior is once the Service is clicked, the sub-menu shows up. The actual behavior is: once the Service is clicked, the sub-menu flashes and disappears.
<nav id="main-menu">
<ul class="sf-navbar">
<li>
<a href="#home">
<div data-i18n="nav.home">Home</div>
</a>
</li>
<li>
<a href="#">
<div data-i18n="nav.services.title">Title</div>
</a>
<ul>
<li>
<a href="#service">
<div data-i18n="nav.services.ourservices">Our Services</div>
</a>
</li>
<li>
<a href="#how">
<div data-i18n="nav.services.howwework">How We Work</div>
</a>
</li>
<li>
<a href="#areascontainer">
<div data-i18n="servicearea.title">Service Area</div>
</a>
</li>
<li>
<a href="#why">
<div data-i18n="why.title">Why Choose Us</div>
</a>
</li>
</ul>
</li>
.....
</nav>
JS code:
wei.header = {
init: function(){
wei.header.superfish();
},
superfish: function() {
$( main_menu ).superfish({
popUpSelector : 'ul',
delay : 250,
speed : 350
});
},
...
I have tried to debug it, but have no clue where to start.
Here is the code that I am working on.
http://weistudio.com.au/
For some reason, SuperFish fails here on touchEnd event and only for the menu shown when you at the very top of the page (it works if you scroll page a bit - there is a clone of this menu).
To prevent it you could use something like <a href="#" onTouchEnd="(function (e) {e.preventDefault()})(event)">.
Or move it to an external method and use like this (as you using jQuery already):
$('.header-container').on('touchend', '.sf-with-ul', function (e) {e.preventDefault()})
Im trying to make my accordion collapse on click on the next tab, I am having problems. I believe the code is correct, the tabs open. but if i click on tab 2 tab 1 remains open.
also the arrows are not pointing down if tab is open.
HTML
<ul class="aside-nav d-all grey-border ">
<li class="aside-open-close active">
<a class="aside-opener" href="#">tab1</a>
<div class="slide">
content
</div>
</li>
<li class="aside-open-close ">
<a class="aside-opener" href="#">tab2</a>
<div class="slide">
content
</div>
</li>
<li class="aside-open-close ">
<a class="aside-opener" href="#">tab3</a>
<div class="slide">
content
</div>
</li>
</ul>
JQUERY
// open-close init
function initOpenClose() {
jQuery('.open-close, .aside-open-close').openClose({
activeClass: 'active',
opener: '.opener, .aside-opener',
slider: '.slide',
animSpeed: 400,
effect: 'slide'
});
jQuery('.nav').openClose({
activeClass: 'active',
opener: '.nav-opener',
slider: '.nav-slide',
animSpeed: 400,
effect: 'slide'
});
jQuery('#nav .drop').each(function(){
var holder = jQuery(this);
var opener = holder.children('a');
var drop = holder.children('.drop-holder');
opener.on('click', function(e){
e.preventDefault();
holder.toggleClass('hover');
});
jQuery('body').on('click', function(e){
if(holder.hasClass('hover') && !jQuery(e.target).closest(holder).length) holder.removeClass('hover')
});
});
}
If you set your [ul] tag as accordion it works fine
Adding this
$('.aside-nav').accordion();
Working fiddle
I have trouble in getting materialze.js and fullpage.js working together. Here is an jsfiddle to demonstrate the problem. Fullpage.js is setup to jump in responsive mode at 640px. In normal-mode (641px and above) everythings works as expected. In responsive-mode everythings works fine, as long the Slideout-Menu (materialize.js) is not used. After the Slideout-Menu is been used, mouse-scrolling stopped completely. While keyboard-scrolling works fine.
See jsfiddle.net
materialize markup
<nav id="nav">
<ul id="sidenav" class="side-nav">
<li data-menuanchor="a">a</li>
<li data-menuanchor="b">b</li>
<li data-menuanchor="c">c</li>
<li data-menuanchor="d">d</li>
<li data-menuanchor="e">e</li>
</ul>
<ul id="quick-links" class="right">
<li data-menuanchor="b">b</li>
<li data-menuanchor="c">c</li>
</ul>
<ul>
<li><a id="sidenav-toggle" data-activates="sidenav" href="#!">menu</a></li>
</ul>
</nav>
fullpage markup
<div id="fullpage">
<div id="sa" class="section">a</div>
<div id="sb" class="section">b</div>
<div id="sc" class="section">c</div>
<div id="sd" class="section">d</div>
<div id="se" class="section">e</div>
</div>
materialized js
$("#sidenav-toggle").sideNav({
closeOnClick: true
});
fullpage js
$('#fullpage').fullpage({
menu: '#nav',
anchors: ['a', 'b', 'c', 'd', 'e'],
normalScrollElements: '#nav',
paddingTop: 0,
paddingBottom: 0,
responsiveWidth: 640
});
Materialize menu is somehow removing the overflow: visible; property applied to the body element by fullpage.js on responsive mode.
Just add it again when closing the menu:
$(document).on('click', '.drag-target', function(e) {
//in responsive mode?
if($('.fp-responsive').length){
$('body').css('overflow', 'visible');
}
});
Reproduction online
I have a bxSlider on my webpage.
I'm trying to stop slider when mouse hover my custom paginator.
Here is my html:
<ul id="slider">
<!-- Slide -->
<li class="slider-element">
<a href="'.$sliderLink.'">
<img src="'.$sliderImage.'">
<div class="slider-caption-wrapp">
<div class="slider-caption">'.$sliderTitle.'</div>
</div>
</a>
</li>
<!-- Slide -->
<!-- Slide -->
<li class="slider-element">
<a href="'.$sliderLink.'">
<img src="'.$sliderImage.'">
<div class="slider-caption-wrapp">
<div class="slider-caption">'.$sliderTitle.'</div>
</div>
</a>
</li>
<!-- Slide -->
</ul>
<!-- Paginator -->
<ul id="slider-paginate" class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
<li><a data-slide-index="'.$slideIndex++.'" href="'.$sliderLink.'"><span>'.$slideIndexShow++.'</span></a></li>
<li><a data-slide-index="'.$slideIndex++.'" href="'.$sliderLink.'"><span>'.$slideIndexShow++.'</span></a></li>
</ul>
And here is my js;
// Main Slider
var slider = jQuery('#slider').bxSlider({
auto: true,
speed: 500,
delay: 5000,
autoHover: true,
stopAuto: false,
pagerCustom: '#slider-paginate'
});
Here is what i've tried so far:
$(document).on('hover','#slider-paginate',function() {
slider.stopAuto();
slider.startAuto();
});
Unfortunately it didn't work. What am i missing? What is wrong with my javascript code?
How can i stop bxslider when mouse is hover on paginator elements?
I found answer myself;
i used 2 events;
First one for hover and other for mouseleave
Solution:
$('#slider-paginate').hover(function(){
slider.stopAuto();
});
$('#slider-paginate').mouseleave(function(){
slider.startAuto();
});