Develop Reference

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?

Allow mobile scrolling on accordion when li's open

I'm working on this mobile menu and need to allow scrolling of the menu when the the li's are greater than the height of the window. I was close but if you open more than one li the scrolling breaks.
View in mobile...
https://www.sailpoint.com/
$('#menu-wip-mobile').on('click', function(e){
//the li
if($('.dropdown-toggle--submenu'.hasClass('show-submenu')){
// add scroll to mobile menu if li is open
$('.navbar__menu__container ').css("overflow-y", "scroll");
} else{
// remove scroll
$('.navbar__menu__container ').css("overflow-y", "hidden");
}
}
})
Also need to disable body scrolling when the menu is open. This pretty much works when testing.
$('.dropdown-toggle--main').unbind('click').click(function(e) {
// disabling y scrolling when open
if($(this).parent().hasClass('show')){
$('body').css("overflow-y", "hidden");
} else{
$('body').css("overflow-y", "scroll");
}
});

As a simple approach to play with, you could try to set a maximum height to the LI that contains lot of items, and add inner scroll on this LI to allow user to scroll to last items.
Try:
overflow-y: scroll;
max-height: 50vh;
on your .dropdown-submenu.
Looks like this: look at the inner scrollbar in the LI

How to hide element with jQuery and css?

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();
}
})

Sub-menu not showing up after screen resize

I'm trying to build a custom responsive navigation that changes to a 100% width pulldown menu for mobile. I have some javascript that hides any sub menu items that may be open if the window is resized to a new breakpoint (it changes at 768px). However, if I open the sub menu at the mobile size (less than 768px) and then resize the window suddenly the hover effect doesn't work and the sub menu items do not show up on the larger screen size.
Here is a JSFiddle of the stripped down version of my navigation https://jsfiddle.net/5h5bhwu4/2/
The only part that I think might be causing the problem is this javascript:
if (w > 768) {
$("#nav > li > ul").hide();
}
If click on the first menu item at low screen size, then resize the window it will not show the same sub menu when you hover over the parent item. But if you start at a larger screen size (or if you don't open the sub menu in the low screen size) it will work fine. I think the problem is in the javascript but I can't see anything that would stop this sub menu from showing.

You need to do the hover effect on JS, not on CSS.
When you see the size of the window:
if (w > 768) {
$("#nav > li > ul").hide();
// Put hover here
}
You need to force the hover, and you can't do it with the CSS

When you say .hide(), it adds inline style display:none which overwrites the style all the time. Best is to have a class and add that class.
if (w > 768) {
$("#nav > li > ul").removeAttr('style'); // this is for the style added on slideToggle
$("#nav > li > ul").addClass('hidden');
}
CSS
.hidden {
display: none;
}
Fiddle Demo

Hiding an element with hide() causes a page "jump"

I'm trying to create an effect where I display a big logo on page load. When the user scrolls pass the logo and navigation, I want to display a fixed nav bar with a smaller logo. I then want to hide the big logo so that when the user scrolls to the top they still see the fixed nav bar (i.e. the big logo and original navigation stay hidden).
However, when I remove a big block element with the .hide() property it causes the page to "jump" as the display:none property gets set. This reduces the usability of the page, as the location jumps the size of the element that was removed, potentially confusing users.
Is there a way I can get the effect I want, while still providing a smooth experience to the user? I've been thinking of potential options, but have been drawing blanks. Hoping you guys can inspire me :)
A simple JS fiddle can be seen here: http://jsfiddle.net/darudude/vA5WG/ (Note: You'll have to increase the result section to 720+px to get it to work properly - I'm still working on the responsive part)
The code in question:
function UpdateTableHeaders() {
var menu = $(".main_nav_menu"),
offset_top = menu.offset().top;
var scrollTop = $(window).scrollTop();
if (scrollTop > (offset_top + menu.height()))
{
$(".clone").addClass("floating_header");
$(".big_logo").hide();
}
}
$(window).scroll(function(){
UpdateTableHeaders();
});

You can try this ,
Add a new style
<style>
.hide {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
</style>
And change your JS to
$(".big_logo").addClass('hide');
Instead of
$(".big_logo").hide();

Use visibility:hidden then
$(".big_logo").css('visibility','hidden');

Maybe it is because a different browser - margin/padding thing. Have you tried to add this to the body element (or to the container element if it inherits some margins/paddings)
body{
margin:0;
padding:0;
width:100%;
}