Hope someone can help me out since I don't really know js and would like to build upon an existing function on a WP site...
I have two versions of a site header. On the homepage the alt (transparent background) version loads, and after scrolling, it swaps to the sitewide non-alt (white bg) version.
I would like to add a condition where the header also swaps to the non-alt version when the the menu button is "toggled" (class="main-navigation toggled").
Here's the existing function. Thanks is advance.
jQuery(document).ready(function ($) {
console.log('ready');
var header = $(".site-header");
if( $("body.home").length ) {
header.addClass("site-header-alt");
}
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if( $("body.home").length ) {
if (scroll <= 100) {
header.addClass("site-header-alt");
} else {
header.removeClass("site-header-alt");
}
}
});
});
Just simply put:
$(document).ready(function () {
// check if .main-navigation contains toggled class
if ( $(".main-navigation").hasClass("toggled") )
{
header.addClass("site-header-alt");
}
// Also listen to the click event of the element that does the toggling.
$(".menu-toggle").click( function () {
if ( $(".main-navigation").hasClass("toggled") )
{
header.addClass("site-header-alt");
}
});
// other stuffs
});
hope that helps
Related
I am super new to Javascript/JQuery, and I'm having trouble figuring out how to do this. I want to add it to a responsive site that I am working on in class.
I have a hamburger menu set up that hides/shows my menu, which works great. The thing is I only want the Javascript to run on a screen width of 414px or less. My menu is to be hidden until I click the hamburger.
For screens 415px, and above I don't want it to hide my menu, or show the hamburger and "X". I can hide the "X" and the hamburger easily enough with media queries if needed, but I still need my menu to display.
I tried to add an event loader, but must have done something wrong, as everything turned on (X, hamburger, & menu), and clicking did nothing. Please help me figure out how to make this work. I am super green at this, so any pointer would be greatly appreciated. Thanks ahead of time
// Hamburger menu
$(document).ready(function () {
$(".cross").hide();
$(".menu").hide();
$(".hamburger").click(function () {
$(".menu").slideToggle("slow", function () {
$(".hamburger").hide();
$(".cross").show();
});
});
$(".cross").click(function () {
$(".menu").slideToggle("slow", function () {
$(".cross").hide();
$(".hamburger").show();
});
});
});
You can use Jquery width() to get the current page width, and use it as a condition.
$(document).ready(function() {
WindowWidth = $(window).width();
if (WindowWidth < 415){
do logic...
}
else {
do other logic...
}
}
But remember that people often resize their screens so you need to handle that as well.
$(window).resize(function () {
WindowWidth = $(window).width();
if (WindowWidth < 415){
do logic...
}
else {
do other logic...
}
}
Based on #m4dm0nk3y
I usually extract the common code in a function and call it on ready, and then on resize.
function alignStuff() {
WindowWidth = $(window).width();
if (WindowWidth < 415) {
console.log('small');
} else {
console.log('large');
}
}
$(document).ready(function() {
alignStuff();
})
$(window).resize(function() {
alignStuff();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I'm trying to add a 'fixed' class to a menu once the scroller hits that menu. I've managed to get it working, but having problems removing the class once the user scrolls back to the top.
Here is the site I'm working on: http://www.allbyor.com/
Here's is my JS code:
$(window).bind('scroll', function () {
var menu = $('.bottom-row');
if ($(window).scrollTop() >= menu.offset().top) {
menu.addClass('menufix');
} else {
menu.removeClass('menufix');
}
});
You need to register the original value of the menu.offset().top in a variable, because once you change its class to fixed the top value will be the same as the $(window).scrollTop().
JSFiddle demo.
var menu = $('.bottom-row');
var menu_top_value = menu.offset().top;
$(window).bind('scroll', function () {
if ($(window).scrollTop() >= menu_top_value) {
menu.addClass('menufix');
} else {
menu.removeClass('menufix');
}
});
I have a class I want to add a style to if a user scrolls down any amount, and I want to remove or add a different class if a user scrolls back up to the top. I am trying to give my nav background a color because its transparent when when the page loads, but the background would kick in if the user scrolls - so my sticky nav can show properly. I don't know if I should use javascript, or where that script should go on in my php to work - ? Any help would be greatly appreciated.
Here is my header code:
Toggle navigation
">" height="height; ?>" width="width; ?>" alt=""/>
Here is what I have so far, placed the script in my :
<script>
$(function () {
$(document).on('scroll', function (ev) {
if ($(document).scrollTop() === 0) {
$('.navbar-fixed-top').removeClass('.colored');
} else {
$('.navbar-fixed-top').addClass('.colored');
}
});
});
</script>
and here is my link: http://o-pd.com/tji16
I'm not able to get the class .colored to be added to .navbar-fixed-top's styles...
Try the following Javascript:
$(function () {
$(document).on('scroll', function (ev) {
if ($(document).scrollTop() === 0) {
$('your-element-selector').removeClass('foo');
} else {
$('your-element-selector').addClass('foo');
}
});
});
Edit: wrapped the code in $(function () {}) so it'll run when the document is ready.
I'm working on creating a mobile accordion nav for a website. I have a basic accordion set up, the problem I am having is when I open one tab I want the other tabs to automatically close so only one tab can be opened at once. Here is the code
$(document).ready(function() {
// Collapsible Menu
function accordion(trigger) {
//variables
var $button = $(trigger),//trigger firing the event
visible = true;//flag for wayfinding
$button.hover().css({'cursor': 'pointer'});
//event
$button.click(function() {
//conditional check
if ( ! visible ) {
$button.removeClass('active');
$('.panel-title .icon').html('⊕');
$(this).next().slideUp('slow',function() {
$(this).addClass('visuallyhidden').slideDown(0);
$('.panel-content').attr( 'aria-expanded','false' );
});
}else {
$button.addClass('active');
$('.panel-title.active .icon').html('⊗');
$(this).next().slideUp(0,function() {
$('.panel-content').attr( 'aria-expanded','true' );
$(this).removeClass('visuallyhidden').slideDown('slow');
});
}
//flag dude
visible = !visible;
return false
});
}
//call to widget trigger1
accordion('#trigger1');
//call to widget trigger2
accordion('#trigger2');
//call to widget trigger3
accordion('#trigger3');
Codepen link - http://codepen.io/Ahhmmogh/pen/WvMMZN
Any help would be greatly appreciated.
Here's a working codepen: http://codepen.io/alezuc/pen/OVQvMV
I've added a check on panel's visibility and on 'active' title
if ( $(this).find('.panel-content').css('display') == 'none' ) {...}
if ( $(this).hasClass('active') ) {...}
I am attempting to get the scroll-to-top function to work when a global error is rendered onscreen, which has an id of "globalError. I currently have a back-to-top function that is working great and was hoping to get help on getting this same function to work when a #globalError id is rendered, as well. Any help would be greatly appreciated.
The back-top code I currently use:
// hide #back-top first
jq("#back-top").hide();
// fade in #back-top
jq(function() {
jq(window).scroll(function() {
if (jq(this).scrollTop() > 100) {
jq('#back-top').fadeIn();
} else {
jq('#back-top').fadeOut();
}
});
// scroll body to 0px on click
jq('#back-top a').click(function() {
jq('body,html').animate({
scrollTop : 0
}, 800);
return false;
});
});