Develop Reference

First tab closes when I open the second tab [duplicate]

I'm trying to create an accordion able to expand multiple panels at once. I have tried to find it in the jQuery UI API, but I haven't yet found the proper way.
Please let me know if there is a way of doing this using jQuery UI accordion.

As others have noted, the Accordion widget does not have an API option to do this directly. However, if you must use the widget, it is possible to achieve this by using the beforeActivate event handler option to subvert and emulate the default behavior of the widget.
For example:
$('#accordion').accordion({
collapsible:true,
beforeActivate: function(event, ui) {
// The accordion believes a panel is being opened
if (ui.newHeader[0]) {
var currHeader = ui.newHeader;
var currContent = currHeader.next('.ui-accordion-content');
// The accordion believes a panel is being closed
} else {
var currHeader = ui.oldHeader;
var currContent = currHeader.next('.ui-accordion-content');
}
// Since we've changed the default behavior, this detects the actual status
var isPanelSelected = currHeader.attr('aria-selected') == 'true';
// Toggle the panel's header
currHeader.toggleClass('ui-corner-all',isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top',!isPanelSelected).attr('aria-selected',((!isPanelSelected).toString()));
// Toggle the panel's icon
currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e',isPanelSelected).toggleClass('ui-icon-triangle-1-s',!isPanelSelected);
// Toggle the panel's content
currContent.toggleClass('accordion-content-active',!isPanelSelected)
if (isPanelSelected) { currContent.slideUp(); } else { currContent.slideDown(); }
return false; // Cancel the default action
}
});
See a jsFiddle demo

You could write multiple accordions that are stacked and each accordion have only one panel. This way the panels could be individually toggled.

An accordion is, by definition, a set of expanding elements that toggle in a certain way. You don't want that. You just want a set of expanding elements. It's extremely easy to build that with jQuery. It often needs nothing more than this:
$('.my-heading-class').on('click', function() {
$(this).next('.my-content-class').slideToggle();
});
<div class="my-heading-class">My Heading</div>
<div class="my-content-class">My Content</div>

How to effectively unbind() hoverintent() from an element

I'm using the HoverIntent plugin to create hover drop-downs in my Bootstrap 3 navigation. However, for smaller sizes I want to still use the native click trigger to activate the dropdowns and not the hover. I'm trying to use enquire.js, which allows me to call a function when the screen size enters a specified width, and another when it leaves that width. This is my code so far:
enquire.register("screen and (min-width: 767px)", {
match : function() {
hoverIntentInit();
},
unmatch : function() {
removeHoverIntent();
}
});
function removeHoverIntent(){
// remove the hoverintent() function <-- this is what I need
}
function hoverIntentInit(){
var config = {
timeout: 900,
over: showMenu,
out: hideMenu};
$('.dropdown').hoverIntent(config);
}
function showMenu(){
// code that shows the dropdown (not important)
}
function hideMenu() {
// code that hides the dropdown (not important)
}
I found a similar question here from few years ago. However, the answers over there either don't work or they they remove both the hoverIntent and the click events from the elements which is not what I want (I want the native Bootstrap click event to remain).
Please help me with this, I've spent more than a day on this and still I can't find a solution.
Thanks!

BJQS Slider pause on click

I am using a BJQS slider on my website.
I am also using fancybox on the same website.
I would like BJQS to pause when the fancybox is open and resume when closed.
Does anyone know how I could create a pause/play toggle button for BJQS?
Thanks

fancybox comes with some callbacks, so you should be able to do something like:
Adopting Lee and Edwards idea about virtual hovering..
$(".fancybox").fancybox({
padding : 0,
openEffect : 'elastic',
closeEffect: 'elastic',
beforeLoad: function(){
$(".banner").trigger("mouseover");
},
afterClose: function(){
$(".banner").trigger("mouseout");
}
});

Without editing the source file to provide either a method to pause the slider, or add in a button you can hide and trigger a click on, the quickest method is to trigger the mouse events that cause the slider to pause.
Looking at the demo, you can see that when you mouseover the slider, the slider stops animating until you move your mouse outside of it. Therefore you can simulate these events.
Assuming your slider div is #slider like the demo on the BJQS site, you would do:
On fancybox open
$('#slider').trigger('mouseover');
On fancybox close
$('#slider').trigger('mouseout');
Go here: http://fancybox.net/api to see how to define open/close callbacks (see near bottom of first table, the "on" options)

I check the plugin but I cant' find any method to pause/play the slider.
I see an option called:
hoverpause : true, // enable/disable pause slides on hover
So we can "hack" in this way using it by triggering the over state on the slider itself:
var stopbjqs = false;
$(function () {
$('#dialog').bjqs({
'showmarkers': false,
'responsive': true,
'automatic': true
});
$("#btn").click(function () {
if (!stopbjqs) {
$("#dialog").trigger("mouseover");
stopbjqs=true;
} else {
$("#dialog").trigger("mouseout");
stopbjqs=false;
}
});
});
But it will be definitely better to have some methods to manipulate the slider.
Demo: http://jsfiddle.net/IrvinDominin/P8UgQ/

Came across this whilst trying add a play/pause button to the plugin. #Irvin Dominin's suggestion relating to hoverpause is good but it will fail as soon as you hover the banners as the mouseover/mouseout is triggered.
I decided to extend the plugin with a new setting and turn off hoverpause.
First add the setting to the defaults object e.g.
// slider default settings
var defaults = {
enableplaypause: false // shows play/pause button
};
Next you'll want to set the click binding to your button, this is done in the init() function e.g.
// run through options and initialise settings
var init = function () {
// configurations only avaliable if more than 1 slide
if (state.slidecount > 1) {
//enable play/pause button using setting we defined earlier
if (settings.enableplaypause) {
conf_enableplaypause();
}
}
};
Now for the conf_enableplaypause(); function which handles the state + button bindings:
var conf_enableplaypause = function () {
$('#btn').click(function () {
if (!state.paused) {
clearInterval(state.interval);
state.paused = true;
$('#btn').text('PAUSED');
} else {
state.interval = setInterval(function () {
go(vars.fwd, false);
}, settings.animspeed);
state.paused = false;
$('#btn').text('PLAYING');
}
});
};
Pretty straightforward and is essentially a copy of what hoverpause does except on a button click along with updating the button text.
Hopefully this helps someone

Liquid Slider (Link to another page at end of scroll, rather than scroll back to first tab?) jQuery

jQuery / Javascript / PHP
I am using the Liquid Slider as a pagination mechanism on a website, how I use it is I basically have it smoothly scroll through the pages left-right & vice versa.
What I'm trying to accomplish right now is: to have the dynamic arrows link to an external page at the end of the scroll (once it detects it is at its last page/tab), rather than to have it scroll back to where it first began.
Since such option variety is not originally supported from the author website, I am wondering if anyone from here would have an idea how to accomplish this?
A snippet of my dynamic arrows with their callback functions (functions not included):
$('#slider-id').liquidSlider({
continuous:false,
dynamicArrows:true,
dynamicTabs: false,
callbackFunction: function(){ drawLines() }
});
$('.liquid-nav-right-arrow').click(function(){
simRefresh(), simRefresh2();
});
$('.liquid-nav-left-arrow').click(function(){
simRefresh(), simRefresh2();
});

You can set conditionals based on the current panel (tab).
callbackFunction: function () {
var sliderObject = $.data( $('#slider-id)[0], 'liquidSlider');
if ( (sliderObject).currentTab === 4 ) {
//turn off click event
//update link
}
Then if you want to reset the events again, you can try sliderObject.registerArrows(), although I haven't tested this out.

jQuery function bounces element - not very smooth

I am using the following jQuery plugin on my website. ( http://jqueryfordesigners.com/demo/plugin-slide-demo.html ). Now if you closely examine the demo slider, you will see a slight bump/bounce at the bottom every time a header element opens. Now I have the same problem on my website except the bounce is much worse.
How can I minimize/eliminate that effect? the initialization code is:
$(function () {
$('UL.drawers').accordion({
// the drawer handle
header: 'H2.drawer-handle',
// our selected class
selectedClass: 'open',
// match the Apple slide out effect
event: 'mouseover'
});
});
Also how can I change the above code so that the 'drawer' closes when I do not hover over any header element(tab).
Thank You

Its hard to say without code to test, but it could be a case of the jQuery animation jump problem.