Develop Reference

Fading out a video Div if the first menu is not Active

I'm customising a Wordpress theme and have added a background video. The page has custom links with control a slider. I'm trying to get the video to fade out if your not on the first slide (.nav-Intro) but everything I;ve tried fails!
http://www.boytoballer.com/wp/
Please help?
if ($('.nav-Intro').classList.contains("swiper__nav-active")) {
$('.btb-home-vid').fadeIn(1000);
} else {
$('.btb-home-vid').fadeOut(1000);
}

Got it working!
Had to change second ".link.f5" to (THIS)
$( ".link.f5" ).on( "hover", function() {
if ($(this).hasClass('nav-Intro')){
$('.btb-home-vid').fadeIn(1000);
} else {
$('.btb-home-vid').fadeOut(1000);
}
});

ToggleClass not working on live site, but works on staging?

I have a Wordpress powered site, that runs a plugin called UberMenu. As part of modifications to the plugin, I have made some CSS changes to the mobile variation of the menu.
Whilst on mobile, I have set up a very basic toggleClass jQuery code, which toggles a class called "close", which in turn changes the small icon on the right, that is set by CSS:after.
This works a treat on staging:
http://tulaforlife.staging.wpengine.com/
(open site on mobile, tap 'menu', then tap 'products'. note the + sign change to a minus on tap, and back again on close).
I can't however get it working on live:
http://www.tula.com
It just won't toggle the class for the same CSS. Here's the code:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.menu-button-text').attr("onclick","return true");
jQuery('.ubermenu-target').on ('touchstart', function() {
jQuery(this).toggleClass('close');
jQuery('.ubermenu-target').not(this).removeClass('close');
});
jQuery('.ubermenu-target').hover(function () {
jQuery(this).toggleClass("close");
});
});
</script>
CSS:
span.ubermenu-target.ubermenu-item-layout-default.ubermenu-item-layout-text_only:after {
content:"\f067" !important;
}
span.ubermenu-target.ubermenu-item-layout-default.ubermenu-item-layout-text_only.close:after {
content:"\f068" !important;
}
Interestingly, if I change the target of the touchstart in the jQuery to ".ubermenu-target-title" it does toggle the class in the HTML (but only when the actual text is tapped), but it just won't do it for the .ubermenu-target, which is what I want it to do.
Any ideas where I'm going wrong, and why it works on staging but won't work on live? :(

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

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/