Develop Reference

Trigger Bootstrap 4 dropdown on resolution/mobile

I have a header with some links. When the header gets short enough, it goes into mobile view (collapse style).
I want the dropdown to be shown initially, but can be toggled to hide and show again like normal. Basically what I want is: When the page loads/resizes and the navbar goes into mobile, toggle the dropdown so it's visible.
You can toggle a dropdown by doing:
$("#element").dropdown("toggle");
Play around with my example here: https://codepen.io/anon/pen/ZKbJJV

UPDATE:
$(document).ready(function() {
$(window).resize(function() {
if($(window).width()<=768) {
$("#element").removeClass("dropdown-menu");
}else{
$("#element").addClass("dropdown-menu");
}
});
if($(window).width()<=768) {
$("#element").removeClass("dropdown-menu");
}else{
$("#element").addClass("dropdown-menu");
}
});
Now I've tried again with remove and add classes and it works.
http://codepen.io/julianschmuckli/pen/ybYzQe
You can do execute the code, after the page was finished loading:
$(document).ready(function() {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$("#element").dropdown("toggle");
}
});
To detect if it is mobile, I copied the snippet from here: What is the best way to detect a mobile device in jQuery?
Or you can also try this version to define it with a specific width of page:
$(document).ready(function() {
if($(window).width()<=768) {
$("#element").dropdown("toggle");
}
});

Cash register slide up/slide down effect

I am trying to create a slideUp, slideDown effect with a div. Basically the div contains the contents of a cart. When the user is looking at items the cart should be tucked away but when they tap on an img it should pop up and toggle. It looks like this ...
I have got all sorts of crazy effects and most just about always completely hide the cart when it is toggled. It should just return to the position shown in the image above.
My code at the moment.
$( ".cart" ).on( "click", function() {
if ($('.tabBox').height() > 91)
{
$('.tabBox').height('90px').slideUp();
console.log('slide up');
}
else
{
$('.tabBox').height('150px').slideDown();
console.log('slide Down');
}
});
Codepen here (no images) If you click on an item the cart will popup. You will notice also the cart does not slide up but pops up. I would like it to slide up and slide down gracefully But return to it's original position (not off the screen).

you should use the animate function instead. Also, I'm not quite sure if I got this correct, but it looks like the cart has 3 possible states:
hidden: nicely tucked away, untill somebody clicks an image
minimized: just visible, but only the cart, clicking the cart => maximize
maximized: completely visible, cart + order(?), clicking the
cart => minimize
I'd simply remove the first state, which makes the solution a bit easier, but as you can see, adjusting to accomodate for this 3rd state will not be that hard:
cartMaximized = false;
$( ".cart" ).on( "click", function() {
$('.tabBox').stop( true );
if( cartMaximized ) {
$('.tabBox').animate({ height: '90px' });
}
else
{
// You can play around with outerHeight() and so on, but that's out of scope
// $('.tabBox').animate({ height: $('.content').outerHeight()+45+'px' });
$('.tabBox').animate({ height: '150px' });
}
cartMaximized = !cartMaximized;
});
--- tested and working
But this might be "brittle" due to resizing and so on, but I bet you can figure something out :-)

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

Unhiding tabs with jquery using text boxes unhides the wrong section

I have a form that has a few checkboxes and when the boxes are checked, a corresponding tab with a section underneath is unhidden. Unfortunately, when I check the 2nd or 3rd box, the correct tab appears, but the section that belongs to the first tab us unhidden with it. I have an example in JSFiddle: http://jsfiddle.net/j08691/HyMBD/2/. If you check the box that says Extranet Access, the section for Use Agreement (US 531) appears. Here is the code I am using to unhide my tabs and sections:
//hide/show UA Section
$("#use-agreement-required").click(function() {
if ($("#use-agreement-required").is(":checked"))
{
$(".UASection").show("fast");
} else {
//otherwise hide it
$(".UASection").hide("fast");
}
});
//hide/show Extranet Section
$("#extranet-access").click(function() {
if ($("#extranet-access").is(":checked"))
{
//show hidden class
$(".extranetSection").show("fast");
} else {
//otherwise hide it
$(".extranetSection").hide("fast");
}
});
//hide/show Move It Section
$("#move-it-access").click(function() {
if ($("#move-it-access").is(":checked"))
{
//show hidden class
$(".moveItSection").show("fast");
} else {
//otherwise hide it
$(".moveItSection").hide("fast");
}
});
//Refresh tabs
$("#use-agreement-required,#extranet-access,#move-it-access").click(function () {
$("#contractTypes").tabs("refresh");
});

Are you sure that tabs are what you want to do there? From a UI perspective, I think you're heading down a messy path.
That being said, showing the tab isn't enough, you need to tell the tabs control that you are activating a new tab:
$( "#contractTypes" ).tabs({ active: 1 });
Bear in mind, the index is 0 based.

This messes up your code ..deleted, all fine
//Refresh tabs
$("#use-agreement-required,#extranet-access,#move-it-access").click(function () {
$("#contractTypes").tabs("refresh");
});
http://jsfiddle.net/HyMBD/5/

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.