How to hide element with jQuery and css? - javascript

I want to create mobile menu. This same menu I want to use in desktop amd mobile screen but style is a little bit diffrent. In mobile screen menu is hide but hamburger menu is display. When user click the cross in menu, this's going to close. It's very simple. On desktop screen menu is display all the time. Code look like this:
$('.hamburgermenu').on('click', function(){
$('.menu').fadeIn();
});
$('.close').on('click', function(){
$('.menu').fadeOut();
});
It works correctly but css manage to visibility too. I use #media to hide and display menu
#media(min-width: 1200px){
.menu{
position: relative;
display: block;
}
}
And this is my problem. If user close the menu (click on .close, menu doesn't display after change size of browser. For example - I'm testing my website in small window and I close the menu. After I open fullsize window, the menu won't to display.

The problem is when you use fadeOut() on an element, the display of that element remains hide(look at your console and check the inline style of this element).
use $(window).resize(function() {}) to remove inline styles affected by fadeOut() in sizes that you consider as media breakpoint.

One way would be to detect when the user changes the window size, e.g.:
$(window).resize(function(d){
if (window.innerWidth > 1200) {
$('.menu').fadeIn();
}
})

Related

JS function prevents me from changing div height with #media screen

I am currently making a website with a fixed menu on top. When the page get's resized to the point where that menu don't fit, a new dropdown menu appear to take it's place. In order to open and close said dropdown menu you have to click a button with the following onclick JavaScript function:
function showMenu() {
var mb = document.getElementById("menu-bar");
if (mb.style.height != "505px") {
mb.style.height = "505px";
} else {
mb.style.height = "70px";
}
}
the issue I am having is when/if the user were to resize the page to the point where the button disapear while the dropdown menu is still open. My first thought was to change the menu-bar height using #media screen like this:
#media screen and (min-width: 1301px) {
#menu-bar {
height: 70px;
}
}
but due to the JavaScript already controlling the height of the menu-bar this doesn't work. Is there any other way I can achieve this?

Prevent background scroll & Jumping to top on mobile

On our mobile site, when clicking the hamburger icon in the top right I want the drop-down menu to appear and be scrollable, without the background scrolling. I have written javascript to set the body to fixed when you click the menu icon, however, this results in the website jumping to the top of the page. This is not what I want, I would like for it so that when the user clicks on the menu button, the background page stays where it is and does not jump to the top.
Below is the code that I have already tried for this.
Javascript
jQuery(function($) {
$(".x-btn-navbar").on("click", function() {
$("body").toggleClass("noScroll");
});
});
CSS
.noScroll {
position: fixed;
}
EDIT Here is the website: http://s2br5s5r3.gb-02.live-paas.net
href="#" makes page going top, give correctly url ex: href="https://www.google.com/" then the problem of going top will be solved.
css
.noScroll {
overflow: hidden;
/* position: fixed */
}
javascript
jQuery(function($) {
$(".x-btn-navbar").on("click", function() {
$("html, body").toggleClass("noScroll");
});
});
then the <body> will be unscrollable.
first of all remove the css position fixed from the class no-scroll. That's what is causing the page to jump on top when you click the menu button. After you open the menu it is scrollable as it should, i assume what you want is to prevent the page behind the open menu to be scrolled when the menu is open. Ypu can achieve this with javascript event listeners like so:
EventTarget.addEventListener('scroll', noscroll);
instead of EventTarget give the body an id and use the event listener to that when the user clicks on the element, but then when they close the menu you should remove the event listener with:
EventTarget.removeEventListener()
I hope this helps you
Keep in mind though that you have to separate the content of the page from the menu, because if you add the no scroll to the body that will apply also to the menu as long as it is a child of the body

Overriding css elements on responsive issue

I have a mobile menu on responsive, which use a javascript to show all of the elements from the menu. It puts on my <ul> a css code display:block on the element. So on a specific screen in my case:
#media only screen and (max-width:980px){
ul {display:none}
}
If I want to override it with a display none, it doesn't work because the display:block it is inline. I tried to change it like this :
.myclass .myclass2 ul {display:none}
but still doesn't work. I do not want to touch the javascript. How can I override it ?
If you have an inline style as you said display:block the single why to override this from within a CSS file is by using !important. But that wont work in your case if you want to show the menu at a click of a button.
I would use 2 classes for this, one to show the menu and one to hide it, no inline CSS and no !important. On window.onload/document.ready event I would take the width of the document and if its greater than 980px I would add the hidden class to hide the menu, when user clicks the menu button I toggle the show class. The same thing for window.resize event.

jquery .hide() function - Hide mobile, Display Desktop

I'll try my best to set up my scenario so that you can understand my question.
My site is currently taking advantage of css media queries to span between screen resolutions. I have a main drilldown menu that can not be hidden on page load, otherwise the menu will not correctly calculate it's height, and will not display properly.
As a way to still be able to hide this menu when needed, I have found a workaround that hides the menu, yet still allows the menu to correctly calculate it's height on page load.
$(document).ready(function () {
$(".hide-menu").hide();
var $drillDown = $("#drilldown");
});
This is great for pages that do not require the main menu to be displayed initially on both mobile and desktop resolutions. However, for my product pages this solution will not work. I need the menu to hide on load for mobile resolutions, but also display on load for desktop resolutions. Can anyone think of a solution that will work? I'm stumped. Here is the HTML:
<div class="drill-down-wrapper hide-menu hide-on-load hide-pd-page">
<div id="drilldown-breadcrumbs" class="breadcrumbs skin-colorful"></div>
<div id="drilldown" class="skin-colorful">
<!-- #Include virtual="Menu.txt" -->
</div>
</div>
Use media queries to hide and show the menus based on screen resolutions.
Rather than jQuery, try using CSS to show/hide elements. You can use the display rule to do so. Just as an example:
.hide-menu-on-load {
display: none;
}
#media screen and (max-width: 680px) {
.hide-menu-on-load {
display: block;
}
}
Note: display: none removed the element from the flow of the page. visibility: hidden keeps the element's flow on the page, yet simply removes it from view

iOS Odd Link Behavior

I have an odd problem with links on the following site in iOS:
http://www.bllink.net/aircraftindex.asp
Under the "Galleries" menu, tapping the links under the sub-menus (e.g. "Benny") does nothing. It looks as if Safari is going to navigate to the new page, but then it doesn't.
If you tap and hold, you have the option to open the link in a new tab, as expected, however.
Naturally, the site works fine on desktops.
The DIVs holding the links are NOT set to position:fixed, but to absolute.
Any ideas?
Get rid of javascript and use CSS to accomplish a dropdown menu.
This will keep your code much neater and easier to read and your website will be compatible with browsers that have javascript turned off.
You can do this by using the :hover selector in css.
1) So make a list with your menu items or a div containing divs.
2) Hide the submenu's in css by adding: display: none;
3) Use the hover selector to show them on hover. for example:
.menu .menubutton .submenubutton{
/* selects the div or li within the class menubutton within the class menu */
display: none; } .menu .menubutton:hover .submenubutton{
/* uses the hover selector on the menubutton, then shows the submenu it contains */
display: block; }
for an indepth explaination see this article on csswizardry or google for "css dropdown menu":
http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/

Categories

Resources