Is it a bad idea to use jquery's resize() event to toggle an responsive menu?
Okay it's actually not an menu but the idea is almost the same:
I have an sidebar with 4 boxes with different informations. Below a specific device-width I move the sidebar to another place. Now each box is hidden and a <selection> shows up. When the selection changes it'll show the selected box.
$("#my_selection").change(function () {
$.each(all, function () { // "all" are just my boxes
$(this).hide();
});
var val = "#my_box_" + $(this).val();
$(val).show();
});
I hope the concept is clear so far.
So but what happens when the user resizes the window? (aka changing orientation on mobile devices) Right:
Reducing width: Hide boxes
Increasing width again: Boxes are still missing
So.. that sucks. That's my solution:
$(window).resize(function () {
currentDisplay = $('#my_selection').css('display');
if (currentDisplay == lastDisplay)
return;
lastDisplay = currentDisplay;
if (currentDisplay == "none") {
$.each(all, function () {
$(this).show();
})
} else {
$.each(all, function () {
$(this).hide();
})
}
});
But I kinda have the feeling that this is a bit hacky, no? So - are there better solutions for this problem?
Here a simple sketch showing the design I've tried to explain.
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>
My website uses a vertical menu structure, which operates by Mouseover. Move the mouse over a menu item, the sub-menu shows. Move the mouse away from the menu item, the sub-menu hides.
Due to the fact that there are too many menu items to use the hover function properly without everything going all over the place, I need to change the menu to a click function instead. Similar to this, with a slide function also if possible: http://jsfiddle.net/ZCrk4/17/
I've tried changing the ".hover" to ".click" but that just messes the site up for some reason. Here's the code below:
jQuery(document).ready(function(){
"use strict";
jQuery('#main_menu li').each(function()
{
var jQuerysublist = jQuery(this).find('ul:first');
jQuery(this).hover(function()
{
jQuerysublist.addClass('visible');
},
function()
{
jQuerysublist.removeClass('visible');
});
});
jQuery('#menu_wrapper .nav ul li').each(function()
{
var jQuerysublist = jQuery(this).find('ul:first');
jQuery(this).hover(function()
{
jQuerysublist.addClass('visible');
},
function()
{
jQuerysublist.removeClass('visible');
});
});
...
Any help is always appreciated.
Thank you.
Take a look at this, and try it:
jQuery('#main_menu li').click(function(){
var jQuerysublist = jQuery(this).find('ul:first');
if (jQuerysublist.is('.visible')) {
jQuerysublist.removeClass('visible');
} else {
jQuerysublist.addClass('visible');
}
});
Good morning everyone. I have a novice JS question that I need help clearing up. First off I am an extreme beginner and self taught so forgive any ignorance.
I am building a new website for a business and one of the pages has a grid of products for customers. Each product has a button which creates a modal to give more information about the product. I am using a JS I found online to have DIFFERENT Modals inside some of these other modals. If you click the modal in question (star fish or sea horse) after scrolling the page first, the modals appear further down and cut off by the screen.
example: https://my.duda.co/preview/27d7a4cc?device=desktop&pageId=30782523
I know the author of the JS included a var to reposition the modal if the user had scrolled but it is not working in my favor or there is something more I need to do and don't have the knowledge for it.
I also know the code is sloppy and probably redundant in some places, I am not an expert. My JSFiddle: https://jsfiddle.net/shnt7vwu
<script>
var $html = $(document.documentElement);
var $modal = $('.modal-container');
function showModal() {
$html.css('overflow', 'hidden');
$modal.show().css('overflow', 'auto');
}
function hideModal() {
$html.css('overflow', 'visible');
$modal.show().css('overflow','visible')
}
$('.modal-btn').on('click', showModal);
$('.modal-close').on('click', hideModal);
</script>
<script>
var scrollTop = '';
var newHeight = '100';
$(window).bind('scroll', function() {
scrollTop = $( window ).scrollTop();
newHeight = scrollTop + 100;
});
$('.popup-trigger').click(function(e) {
e.stopPropagation();
if(jQuery(window).width() < 767) {
$(this).after( $(this).nextAll('.popup:first') );
$(this).nextAll('.popup:first').show().addClass
('popup-mobile').css('top', 0);
$('html, body').animate({
scrollTop: $(this).nextAll('.popup:first').offset().top
}, 500);
} else {
$('.popup').hide();
$(this).nextAll('.popup:first').removeClass('popup-mobile').css
('top', newHeight).toggle();
};
});
$('html').click(function() {
$('.popup').hide();
});
$('.popup-btn-close').click(function(e){
$(this).parent().hide();
});
$('.popup').click(function(e){
e.stopPropagation();
});
</script>
You can place your whole 'div body grid' stuff inside a div with overflow-y enabled, then have your modals with vh:100 hidden outside
Just disable all the modals, div property until the correct user action is taken.
This way you can avoid calculations which may break between platforms and in edge cases.
I'm creating a feature content slider using jQuery and I have hit a few snags trying to get rid of the last few bugs. It is inspired by http://kleientertainment.com/ so check it out and you'll see what im going for. Any suggestions on achieving this effect even with totally new code would be helpful!
The idea is a simple div swap, but with custom animations for each slide that fire when it is loaded. It also MUST fade to black in between each transition, whether autoplay or clicked.
lets get to the code and bugs:
$(document).ready(function () {
//START SLIDES HIDDEN
$('.slide').css({
'position': 'absolute',
'display': 'none'
});
//RUN FIRST SLIDE
runSlideShow(1);
animation1_swap();
//AUTOPLAY FUNCTION
function runSlideShow(slideNumber) {
$('#slide' + slideNumber).fadeIn(1000).delay(10000).fadeOut(1000, function () {
if (slideNumber == 4) {
animation1_swap();
runSlideShow(1);
}
if (slideNumber == 3) {
animation4_swap();
runSlideShow(4);
}
if (slideNumber == 2) {
animation3_swap();
runSlideShow(3);
}
if (slideNumber == 1) {
animation2_swap();
runSlideShow(2);
}
});
//NAVIGATION BUTTONS
$('#bullet1').click(function () {
$('.slide:visible').stop(true, true).fadeOut(1000, function () {
animation1_swap();
runSlideShow(1);
});
});
$('#bullet2').click(function () {
$('.slide:visible').stop(true, true).fadeOut(1000, function () {
animation2_swap();
runSlideShow(2);
});
});
$('#bullet3').click(function () {
$('.slide:visible').stop(true, true).fadeOut(1000, function () {
animation3_swap();
runSlideShow(3);
});
});
$('#bullet4').click(function () {
$('.slide:visible').stop(true, true).fadeOut(1000, function () {
animation4_swap();
runSlideShow(4);
});
});
}
});
CSS info: .slide sets the dimensions, and #slideX are the individual background images for each. #bulletX are the nav buttons.
Also, the animationX_swap() are the animations specific to that slide. They live in another file and would have made this post way too long.
The bugs:
Right now, the autoplay function is great, you can watch it all day and not see a hiccup. The trouble comes when the nav buttons are used, particularly #bullet1. If i click #bullet1, then go to 2, then back to 1, the autoplay seems to be sped up as the slide fades out before it is supposed to. I am a total beginner but I made it this far, can anyone help me clean this up and essentially reimagine http://kleientertainment.com/ 's slider?
Just discovered jQuery cycle plugin http://malsup.com/jquery/cycle/ from another post.
I remade my slider with that and it preforms exactly as needed. Good stuff!
I'm trying to make a menu that can collapse:
If you click on a button div the menu shows and stays even if you hover the button div.
If you click again on the button div the menu hides.
When the menu is hiding onmouseenter or mouseover it shows onmouseleave or mouseout
it's hiding.
I can't make this happen, this is my code:
$(function() {
$('#arrow').bind('mouseenter', function(){
if($('#hoofdmenu').attr("class") == "show"){
$('#hoofdmenu').addClass("class", "mousehide");
$('#hoofdmenu').hide();
}
else
{
$('#hoofdmenu').removeClass("class", "mousehide");
$('#hoofdmenu').addClass("class", "mouseshow");
$('#hoofdmenu').show();
}
});
$('#arrow').bind('click',function(){
if ($('#hoofdmenu').attr("class") == "show"){
$('#hoofdmenu').attr("class", "hide");
$('#hoofdmenu').hide();
}
else
{
$('#hoofdmenu').attr("class", "show");
$('#hoofdmenu').show();
}
});
});
Someone can help me with this problem?
Kind regards,
Frank
Why do you want to add special classes for this? You can use the hide() and show() function for clicks and the mouseOver() and mouseOut() functions for the mouse hover.
Check this out for more
Edit: For some reason I cannot load jquery.com to point out the right pages
Using attr() and classes a lot is pretty slow, since a DOM reflow is issued each time. Also, make sure to cache elements. We can speed things up a bit doing this:
$(function(){
var menu = $('#menu'),
arrow = $('#arrow'),
isOpen = false;
arrow.hover(function(){
if(isOpen) return;
if(menu.is(':visible'))
menu.hide();
else
menu.show();
});
arrow.click(function(){
if(isOpen)
menu.hide();
else
menu.show();
isOpen = !isOpen; // shift bool
});
});