How do I add break point to slide and push responsive menu - javascript

I have two menus on my responsive site. A horizontal menu when the browser width is greater than 1024px and the Slide and Push (Right) Menu when the browser window is less than 1024px (I'm using the slide push menu found: http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/).
If the browser window is less than 1024px and I click the toggle button the menu works fine, but with the menu open, when I expand my browser window greater than 1024px the Slide and Push Menu is still open and my horizontal menu is also showing now. My questions is , using javascript, how can I retract or push the menu back once my browser window reaches 1024px or greater.
Here is a link to the working files http://tinyurl.com/qxp7gjn
Here is the javascript for my menu:
var menuRight = document.getElementById('cbp-spmenu-s2'),
showRightPush = document.getElementById('showRightPush'),
body = document.body;
showRightPush.onclick = function () {
classie.toggle(this, 'active');
classie.toggle(body, 'cbp-spmenu-push-toleft');
classie.toggle(menuRight, 'cbp-spmenu-open');
disableOther('showRightPush');
};
$(window).resize(function () {
// Window width with legacy browsers.
windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
if (windowWidth > 800) {
classie.toggle(this, 'active');
classie.toggle(body, 'cbp-spmenu-push-toright');
classie.toggle(menuRight, 'cbp-spmenu-close');
disableOther('showRightPush');
}
});
function disableOther(button) {
if (button !== 'showRightPush') {
classie.toggle(showRightPush, 'disabled');
}
}

Subash is on the right path, but this is a higher-performance version w/ support for older browsers as well:
$(window).resize(function() {
// Window width with legacy browsers.
windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
if (windowWidth > 1023) {
// Do opposite of showRightPush.onclick.
}
});
Speed comparison: http://jsperf.com/jq-width-vs-client-width/5
(shameless plug) check out Responsive Menus for examples.
I really like that style, codrops has great stuff. I'm going to add it to the RM module.

You can use window resize function to do so. Below is the sample code. Please note that code only demonstrates the idea. You need to complete it to get it working like you expect.
$(window).resize(function () {
windowWidth = $(this).width();
if (windowWidth >= 1224 ) {
// push back the menu
}
}

Related

Height change closes sidebar

I have a sidebar while displaying on mobile and entering the search input field, it closes once mobile keyboard is open and also if the height of the page is changed in browser inspection as shown in the following images:
this is the only code contains innerHeight
function fitContent() {
var top = $(window).scrollTop() < 340 ? 270 - $(window).scrollTop() : 0;
rightSide.css("top", top + "px");
content.css("min-height", window.innerHeight - 130 + "px");
var window_Width = window.innerWidth;
if (window_Width < 1366) {
closeRightSide();
} else {
openRightSide();
}
}
and fitContent functions runs under window.resize and document.ready. Also that sidebar has open and close functions which toggle between two classes and changes the boolean value of an attribute.
function openRightSide() {
body.removeClass("shrink");
body.addClass("expand");
rightSide.attr("data-expand", "true");
}
I noticed that data-expand attribute turns to false when the height is changed. and there is no additional code or css related to it.
The Question:
How can I prevent height changes from closing the sidebar? What piece of code can I use?

ScrollMagic and GSAP on mobile only

You can see from my codepen that I have a logo on my website that fades out as you scroll down the page, which is triggered after a certain trigger has been fired. This is working the way I want it, except I only want this to fire on mobile browsers and mobile screen sizes.
I'm using scrollmagic.js with this also.
Does anyone know how to set this up so the effect will only work on mobile and screen sizes < 768px.
I'm fairly new to JS and so would appreciate baby steps.
thanks
// When the DOM is ready
$(window).on('load', function() {
// Init ScrollMagic Controller
var scrollMagicController = new ScrollMagic();
// Create Animation for 0.5s
var tween = TweenMax.to('#animation', 0.5, {
opacity: 0
});
// Create the Scene and trigger when visible
var scene = new ScrollScene({
triggerElement: '.scene',
offset: 150 /* offset the trigger 150px below #scene's top */
})
.setTween(tween)
.addTo(scrollMagicController);
// Add debug indicators fixed on right side
scene.addIndicators();
});
Codepen of what I currently have
I would wrap the scrollMagic block on an if statement that checks if it is a touch device or if it has a minimum with, depending on which behaviour you are interested in.
With Modernzr:
var agent = navigator.userAgent.toLowerCase();
var onlyTaps = Modernizr.touch ||
(agent.match(/(iphone|ipod|ipad)/) ||
agent.match(/(android)/) ||
agent.match(/(iemobile)/) ||
agent.match(/iphone/i) ||
agent.match(/ipad/i) ||
agent.match(/ipod/i) ||
agent.match(/blackberry/i) ||
agent.match(/bada/i));
if (onlyTaps) {
//magicScroll block here
} else {
//something else here
}
Now, if you are only interested on the device width then you can use screen.width:
if (screen.width < 480) {
//magicScroll block here
} else {
//something else here
}
The only caveat is that screen.width might return real pixels or not on some high density devices. It works as expected on iPhones and Macbook Pro w/retina displays.

jQuery - Move element with children triggered by window resize

I have a filter on my website positioned in an aside with a class 'left-bar'. My site is responsive and i want the filter to move to the div with the class 'mobile-top-bar'.
With the first 'if' i check if the window isn't already below 992px and when that's the case the filter will be moved to the 'mobile-top-bar' (this works great)
if ($(window).width() < 992) {
$('#moveableFilter').prependTo('.mobile-top-bar');
}
With the second piece of code i've made a function that should move the filter back and forth, but that doesn't happen. The filter already disappears from the 'left-bar' when i slightly change the width of the window (when it's still above 992px) and when i change it below 992px it isn't present in the mobile-top-bar.
What did i do wrong?
$(window).on('resize', function(){
var win = $(this);
if (win.width() < 992) {
$('#moveableFilter').prependTo('.left-bar');
} else if (win.width() >= 992) {
$('#moveableFilter').prependTo('.mobile-top-bar');
}
});
It looks like you switched the cases around by accident. Try this:
$(window).on('resize', function(){
var win = $(this);
if (win.width() >= 992) {
$('#moveableFilter').prependTo('.left-bar');
} else if (win.width() < 992) {
$('#moveableFilter').prependTo('.mobile-top-bar');
}
});
... However, I do agree with the comment that says that it would be better not to use two different bars, but to move it with CSS media queries.

Jquery Nav Detecting Screen Sizes

I'm encountering a slight problem with my navigation. When I resize my browser to check the mobile menu and click the 'header' a couple times for the dropdown menu, then resize my page back to a tablet or desktop size, my navigation disappears. This problem resolves itself if I delete this segment of code:
if ( width == GetWidth() ) {
return;
}
width = GetWidth();
But I need this section of code so the navigation does not disappear when I scroll down on mobile.
var screensize = document.documentElement.clientWidth;
$(document).ready(function(){
var isMobile = window.matchMedia("only screen and (max-width: 600px)");
if (isMobile.matches) {
$('#mobile_active li a').on('click',function() {
$('.Back a').text('Back');
$('#mobile_active li ul li a').slideToggle(150);
e.preventDefault();
});
}
$(window).resize(function(){
if ( width == GetWidth() ) {
return;
}
width = GetWidth();
if( $(window).width() < 600) {
$('#mobile_active').hide();
} else {
$('#mobile_active').show();
}
});
$('header').on('click', function() {
$('#mobile_active').slideToggle(500);
e.preventDefault();
});
});
Any advice or input would be of great help. Thank you.
I agree you should use media queries and javascript for this type of thing, but I think I have found the cause of your issue.
When in mobile mode you have a click event attached to your <header> with a slideToggle. This slideToggle sets an inline style of display:block; or display:none; on the #mobile_active after it animates; depending on wether its closed or opened. When you resize to desktop size the #mobile_active still has an inline style of display:none; which is why you can not see it any more.
It looks like you may have code to correct this on your resize event:
if( $(window).width() < 600) {
$('#mobile_active').hide();
} else {
$('#mobile_active').show();
}
I think it just needs placed before this code block:
if ( width == GetWidth() ) {
return;
}
width = GetWidth();
Which may be why when you remove it, it works

Do not execute jQuery script if CSS is of particular value

On my website, I have a sidebar DIV on the left and a text DIV on the right. I wanted to make the sidebar follow the reader as he or she scrolls down so I DuckDuckGo'ed a bit and found this then modified it slightly to my needs:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function(){
var $sidebar = $('#sidebar'),
sidebarOffset = $sidebar.offset(),
$window = $(window),
gap = $('#header').css('marginBottom').replace(/[^-\d\.]/g, ''),
distance = ($window.scrollTop()) - (sidebarOffset.top - gap),
footerHeight = $('#footer').outerHeight();
$window.scroll(function(){
distance = ($window.scrollTop()) - (sidebarOffset.top - gap);
if ( distance > 0 ) {
$sidebar.css({'top': gap + 'px', 'position' : 'fixed'});
} else {
$sidebar.css({'top': '0', 'position': 'relative'});
}
})
});
});//]]>
</script>
And it works just like I want it to. However, my website uses Skeleton framework to handle responsive design. I've designed it so that when it goes down to mobile devices (horizontal then vertical), sidebar moves from being to the left of the text to being above it so that text DIV can take 100% width. As you can probably imagine, this script causes the sidebar to cover parts of text as you scroll down.
I am completely new to jQuery and I am doing my best through trial-and-error but I've given up. What I need help with is to make this script not execute if a certain DIV has a certain CSS value (i.e. #header-logo is display: none).
Ideally, the script should check for this when user resizes the browser, not on website load, in case user resizes the browser window from normal size to mobile size.
I imagine it should be enough to wrap it in some IF-ELSE statement but I am starting to pull the hair out of my head by now. And since I don't have too much hair anyway, I need help!
Thanks a lot in advance!
This function will execute on window resize and will check if #header-logo is visible.
$(window).resize(function() {
if ($('#header-logo').is(':visible')) {
// Your code
}
});
I think you need to check this on load to, because you don't know if the user will start with mobile view or not. You could do something like this:
$(window).resize(function() {
if ($('#header-logo').is(':visible')) {
// Your code
}
}).resize();
This will get executed on load and on resize.
EDIT: You will probably need to turn off the scroll function if #header-logo is not visible. So, instead of create the function inside the scroll event, you need to create it outside:
$(window).resize(function() {
if ($('#header-logo').is(':visible')) {
var $sidebar = $('#sidebar'),
sidebarOffset = $sidebar.offset(),
$window = $(window),
gap = $('#header').css('marginBottom').replace(/[^-\d\.]/g, ''),
distance = ($window.scrollTop()) - (sidebarOffset.top - gap),
footerHeight = $('#footer').outerHeight();
function myScroll() {
distance = ($window.scrollTop()) - (sidebarOffset.top - gap);
if ( distance > 0 ) {
$sidebar.css({'top': gap + 'px', 'position' : 'fixed'});
} else {
$sidebar.css({'top': '0', 'position': 'relative'});
}
}
$window.on('scroll', myScroll);
} else {
$(window).off('scroll', myScroll);
}
});
Didn't test it, but you get the idea.
$("#headerLogo").css("display") will get you the value.
http://api.jquery.com/css/
I also see you only want this to happen on resize, so wrap it in jquery's resize() function:
https://api.jquery.com/resize/

Categories

Resources