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
Related
I have a fancy box with tabbed inline content (multiple divs) the user can navigate different "views" by clicking on the tab name once already in the fancybox.
I would like the tabbed content to be accessible when a user clicks the link in the navigation to launch the fancybox.
So for instance if the user clicks the news link (or any link in the .nav-primary or .nav-secondary menu) it will take them directly to the news (or related link) inline content (view) in the fancybox instead of the default view.
How would I target an id i.e. #news within the main fancybox id #menu? How do I achieve this?
HTML
<nav class="navigation">
<ul class="nav-primary">
<li class="nav-primary-item"><a class="menu" href="#menu"><i class="ico plus-yellow">+</i> Sources</a></li>
<li class="nav-primary-item"><a class="menu" href="#menu"><i class="ico plus-yellow">+</i> Topics</a></li>
<li class="nav-primary-item"><a class="menu" href="#menu"><i class="ico plus-yellow">+</i> Geography</a></li>
</ul>
<ul class="nav-secondary">
<li class="nav-secondary-item"><a class="menu" href="#menu"><i class="ico plus-greyishblue">+</i> Tools</a></li>
<li class="nav-secondary-item"><a class="menu" href="#menu"><i class="ico plus-greyishblue">+</i> Learn</a></li>
<li class="nav-secondary-item"><a class="menu" href="#menu"><i class="ico plus-greyishblue">+</i> News</a></li>
</ul>
<div class="nav-menu" style="display: none">
<div class="nav-tabs page_tabs" id="menu">
<ul class="ui-tabs-nav" role="tablist">
<li role="tab">Sources</li>
<li role="tab">Topics</li>
<li role="tab">Geography</li>
<li role="tab">Tools</li>
<li role="tab">Learn</li>
<li role="tab">News</li>
</ul>
<!--Sources and Uses-->
<div id="sources">
Content here
</div>
<!--Topics-->
<div id="topics">
Content Here
</div>
<!--Geography-->
<div id="geography">
Content Here
</div>
<!--Tools-->
<div id="tools">
Content Here
</div>
<!--Learn-->
<div id="learn">
Content Here
</div>
<!--News-->
<div id="news">
Content Here
</div>
</div>
</div>
</div>
JS
<script type="text/javascript">
$('.menu').fancybox({
type: 'inline',
scrolling: 'auto',
width: 940,
height: 'auto',
padding: 0,
autoSize: false,
tpl: {
closeBtn: '<a title="Close" class="fancybox-item fancybox-close fancyboxBtn" href="javascript:;"></a>'
},
helpers: {
overlay: {
locked: false
}
}
});
EDIT
I think the solution lies with changing the hashes on click I can change one broadly by targeting a class and giving it a target hash. How would I be able to apply the sources link to #sources, topics link to #topics etc.
This is my general attempt
$('ul.nav-primary li a').click(function(e){
event.preventDefault();
window.location.hash = '#sources'
});
EDIT 2
On click is there a way I can target the tab index so that that tab is active?
I got the desired results by combining data-target and selecting the tabs directly.
Here is the script
$(document).on("click", ".menu", function() {
var target = $(this).data("target");
if (target == 'sources') {
jQuery('.page_tabs').tabs({ active: 0 });
}
if (target == 'topics') {
jQuery('.page_tabs').tabs({ active: 1 });
}
if (target == 'geography') {
jQuery('.page_tabs').tabs({ active: 2 });
}
if (target == 'tools') {
jQuery('.page_tabs').tabs({ active: 3 });
}
if (target == 'learn') {
jQuery('.page_tabs').tabs({ active: 4 });
}
if (target == 'news') {
jQuery('.page_tabs').tabs({ active: 5 });
}
});
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();
});
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();
});
});
I need help in automatically closing a toggle-nav menu on mobile. Right now it doesn't close when a menu is selected.
HTML:
<!-- fixed header -->
<header id="navbar-top">
<div class="pt_navbar">
<div class="container">
<div class="row">
<div class="col-lg-12">
<!-- start menu-->
<div id="main-nav">
<i class="fa fa-bars"></i> Miracle Trainer
<ul class="pt_nav nav">
<li class="active">
Welcome
</li>
<li>
Training Videos
</li>
<li>
Pricing
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- end menu-->
</div>
</div>
</div>
</div>
</header>
JS:
I need a way to close the toggle-nav when a menu is selected.
$("body").on('click', '#toggle-nav', function(e){
e.preventDefault();
var nav_menu = $("#navbar-top .pt_navbar ul");
if( nav_menu.height() < 10 ){
nav_menu.addClass('open_menu');
}else{
nav_menu.removeClass('open_menu');
}
});
I am currently using this for a slide-out menu:
$('.slideout-menu-toggle, .select').on('click', function(event){
event.preventDefault();
// create menu variables
var slideoutMenu = $('.slideout-menu');
var slideoutMenuWidth = $('.slideout-menu').width();
// toggle open class
slideoutMenu.toggleClass("open");
// slide menu
if (slideoutMenu.hasClass("open")) {
slideoutMenu.animate({
right: "0px"
});
} else {
slideoutMenu.animate({
right: -slideoutMenuWidth
}, 400);
}
});
Some adjustments might work for you.
EDIT: with the above working code in mind, I think your first jQuery line should be like this:
$('#toggle-nav, .select').on('click', function(e){
and add the "select" class to your list items.
I have my template file for home page, Home-template.php, and in it I have a sliding menu html.
This is my script for sliding menu:
$(document).ready(function() {
// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("fast");
});
// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp("fast");
});
$(".toggle a").click(function () {
$(".toggle a").toggle();
});
e.preventDefault();
});
and both jquery and this script are loaded on the page but the slide effect doesnt work, its only poping up and down without effect.
Any help?
here is html code:
<div id="panel">
<nav id="main-menu">
<ul>
<li>Home</li>
<li>About me</li>
</ul>
</nav>
</div>
<div class="toggle"><a id="close" style="display: none;position: absolute;right:5px;top:5px;" class="close" href="#"></a></div>
<div class="toggle" style="position: absolute;right:10px;top:10px;"><a id="open" class="open" href="#"></a></div>
here is a link of a page:
http://pavlovic.com/about-me/
Well for one the e is not defined and secondly I'm not sure how you are including your js so
you should read this: http://wp.tutsplus.com/articles/how-to-include-javascript-and-css-in-your-wordpress-themes-and-plugins/
try the following code which works for me
$(this).effect('slide', { direction: 'down'}, 500);
for the slide effect to work in wordpress along with jquery file the jquery-effects-core and jquery-effects-slide has to be also loaded.
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-effects-slide');
this code also works:
$('#test').effect( "slide", "right" );