How can I stop the body scrolling if I open a menu on a mobile device?
function bodyScrollStop() {
$('.header .navbar .navbar-toggler i').on('click', function (event) {
$('body').toggleClass("onScroll");
});
}
bodyScrollStop();
Plz add this in css..
body.onScroll {
overflow:hidden;
}
Well i believe that you are showing that toggle button on mobile screens only. Then you can try below code.
JS Fiddle Link
JS Code:
function bodyScrollStop() {
$('.header .navbar .navbar-toggler i').on('click', function (event) {
$('body').toggleClass("no-scroll");
});
}
bodyScrollStop();
CSS:
i {
background: green;
height: 44px;
width: 44px;
display: inline-block;
color: #fff;
}
.no-scroll {
overflow: hidden;
}
Now if you click on that toggler body will get dynamic class and will prevent it from scrolling.
Let me know if you need more help.
Related
I have a website with side-bar menu. Menu is by default visible. If i click close-btn. Menu is hidden. That works
I would like make menu by default visible for desktops and by default hidden for mobiles.
.side-bar {
background: #1b1a1b;
backdrop-filter: blur(15px);
width: 250px;
height: 100vh;
position: fixed;
top: 0;
z-index: 50;
left: 0px;
overflow-y: auto;
transition: 0.6s ease;
transition-property: left;
}
.side-bar.non-active {
left: -250px;
}
.side-bar.active {
left: 0px;
}
The window.innerWidth < 850 works but i'm not sure if there is something better. 850px i use for #media queries.
$(document).ready(function () {
//jquery for toggle sub menus
$(".sub-btn").click(function () {
$(this).next(".sub-menu").slideToggle();
$(this).find(".dropdown").toggleClass("rotate");
});
//jquery for expand and collapse the sidebar
if (window.innerWidth > 850) {
$(".close-btn").click(function () {
$(".side-bar").addClass("non-active");
$(".menu-btn").css("visibility", "visible");
});
$(".menu-btn").click(function () {
$(".side-bar").removeClass("non-active");
$(".menu-btn").css("visibility", "hidden");
});
}
else {
$(".side-bar").css("left", -250);
$(".close-btn").click(function () {
$(".side-bar").addClass("active");
$(".menu-btn").css("visibility", "visible");
});
$(".menu-btn").click(function () {
$(".side-bar").removeClass("active");
$(".menu-btn").css("visibility", "hidden");
});
}
});
The issue is propably in $(".side-bar").css("left", -250); because in the DOM i can see it as inline style and after click nothing happen. Only .menu-btn disappers.
Is there another way how to set "reverse" logic for mobiles please? Or maybe just easy fix this i hope little bug?
I tried set oposite style for left: -250px; to left:0; via following logic but without any positiv result..
Use this instead:
if (window.matchMedia('(max-width: 850)').matches) { ... }
else { ... }
This uses css media query in JavaScript without any frameworks.
I wanted to make the navbar to stay displaying, not until i left my pointer hovered to that portion. What happens is that if I hover my pointer to the navbar, the display keeps getting toggled (displaying in then hiding.. it's on loop?) I just want it to stay. Then hide again when my pointer left
<script>
$(document).ready(function(){
$(".menu-trigger").hover(function(){
$("li").slideToggle(400, function(){
jQuery(this).toggleClass("nav-expanded").css('show','');
});
});
});
</script>
img {
padding: 0px;
max-width: 100%;
max-height: auto;
}
.menu-trigger {
pointer: cursor;
display: block;
position: fixed;
font-family: Sans-serif;
font-size: 15px;
background-color: #664c7d;
height: 35px;
width: 100%;
}
li{
display: none;
}
li.navbar ul {
}
}
div.nav-expanded {
display: block;
}
Your code has a few errors and it is not entirely clear what you are trying to accomplish (.css('show', '')?).
I assume that what you need is an element that will toggle its class when hovered and will change back to its original state when it is not hovered anymore.
What you need to do, is toggle the class of your navigation bar every time your mouse goes over the element and out of it.
Assuming $nav is your navigation bar, you can use:
$nav.on('mouseover mouseout', function(){
$nav.toggleClass('show');
});
Alternatively (and arguably safer):
$nav.on('mouseover', function(){
$nav.addClass('show');
}).on('mouseout', function(){
$nav.removeClass('show');
});
You can see usage in this JSFiddle.
i am trying to implement accordion.
My accordion should expand on mouse hover on the "accordian head".
And also mouse click on "accordian head" should show/hide the accordion-body.
I got the show/hide working through CSS on hover.
But when i club mouse click event , the functionality is not working
here is the sample
http://jsfiddle.net/yf4W8/157/
.accordion-body{display:none;}.accordion:hover div{display:block;}
you need to change
myDivElement.style.display = none;
myDivElement.style.display = block;
to
myDivElement.style.display = "none"; //double quotes are missing
myDivElement.style.display = "block"; //double quotes are missing
Demo
I have created a working demo, please check the link below not it is working on mouse click. Replace your JavaScript code with this and remove the css properties.
function expandAccordionBody(){
var myDivElement = document.getElementById("accbody" );
var cStyle=window.getComputedStyle(myDivElement, null);
if(cStyle.display=='block'){
myDivElement.style.display='none';
}else{
myDivElement.style.display='block';
}
}
Demo
I took a liberty to change your code a bit. This code works.
Hope that this is what you meant to do....
Instead of using pure Javascript I used jQuery event click and hover.
here is the link for working code
click here for DEMO
HTML code;
<div class="accordion">
<div class="headA">
Head
</div>
<div id="accbody" class="accordion-body">
Body
</div>
</div>
CSS code;
.accordion {
border: 1px solid #444;
margin-left: 60px;
width: 30%;
}
.accordion:hover div {
display: block;
}
.accordion-body a {
background-color: green;
display: block;
color: white;
padding: 25px;
text-align: center;
}
.headA a {
text-align: center;
display: block;
background-color: yellow;
padding: 25px;
}
jQuery code;
$(document).ready(function() {
// on page load hide accordion body
var accordionBody = $('#accbody');
accordionBody.hide();
// first make on click event happening
// when user clicks on "Head" accordion "Body will show up"
$('.headA').click(function() {
if (accordionBody.is(':hidden')) {
accordionBody.slideDown(400);
} else {
accordionBody.slideUp(400);
}
});
$('.headA').hover(function() {
if (accordionBody.is(':hidden')) {
accordionBody.slideDown(400);
} else {
accordionBody.slideUp(400); // turn this off if you want only to slide down and not back up
}
});
});
I'm a bit of a novice with script but have been trying to find a solution that fits my responsive menu solution. I've seen other people with a similar issue but they seem to be using a different method for their menus.
Here is my code:
HTML:
function toggle_visibility(id) {
var e = document.getElementById('menu-items');
if ($(e).css('display') == 'block') {
$(e).slideUp('fast');
} else {
$(e).slideDown('fast');
}
};
.mobile-menu {
display: none
}
#media only screen and (max-width: 680px) {
#menu-items {
display: none
}
.mobile-menu {
display: block;
cursor: pointer;
}
}
<a onclick="toggle_visibility('menu-items');" class="mobile-menu">Menu</a>
<div id="menu-items">
Link
Link
Link
Link
Link
</div>
<!--#menu-items-->
The menu works great but the main issue I am having is that when the user decreases the window size to show the responsive menu toggle, then uses the toggle to open and then close the menu, the menu never returns to the normal view when the window is resized back to desktop view.
Oddly it does return if the user leaves the responsive menu open in mobile view and resizes back to desktop, but not if the user closes the menu.
The only other thing I'd love to work on this menu is if the user clicks anywhere else in the page but the menu, the menu closes. At the moment the user has to click the Menu toggle link to close it.
Any help would be really appreciated!!!
Thanks so much.
Try this :
#media only screen and (min-width: 680px) {
#menu-items {
display: block
}
.mobile-menu {
display: none;
cursor: pointer;
}
}
Using slideUp() and slideDown() here is a little tricky because they set/remove the inline style 'display: none;' which isn't removed when you resize the window. That's why the menu isn't reappearing: the inline style hiding the menu is still active.
What you need to do is use classes to do handle the display at different device widths and add hooks to slideUp's complete callback: (JSFiddle)
CSS:
.mobile-menu {
display: none
}
#media only screen and (max-width: 680px) {
#menu-items {
display: none
}
.mobile-menu {
display: block;
cursor: pointer;
}
.collapsed {
display: none;
}
}
#media only screen and (min-width: 681px) {
.collapsed {
display:block;
}
}
JS:
function toggle_collapsed_class(e) {
$(e).css('display', '').addClass('collapsed');
};
function toggle_visibility(id) {
var e = document.getElementById('menu-items');
if ($(e).css('display') == 'block') {
$(e).slideUp('fast', function(){
toggle_collapsed_class(e)
});
} else {
$(e).removeClass('collapsed').slideDown('fast');
}
};
I'm currently working on my new website and I need help.
When you open the site you get a landing page with icons (sort of menu bar) and you can't scroll.
When you click, tadaaaa it is a one page design. I am thinking about a javascript/jquery kind of script.
Current css:
body {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
overflow: hidden;
}
Example jquery:
$("nav").on("click", function(e) {
$('html, body').css('overflowY', 'visible');
}
I am quite a noob about this so don't blame me for a weird kind of script. I am trying to learn javascript and jquery.
You should do this by adding a class to your page to indicate its state, and then change the styling in your stylesheet.
HTML:
Show whole page
Congratulations. You are viewing the page
JS:
$(document).ready(function () {
$("#loadpage").click(function () {
$("html").addClass("loaded");
});
});
CSS:
#page { display: none; }
html.loaded #page { display: block; }
html.loaded #loadpage { display: none; }
Demo:
http://jsfiddle.net/FHPzb/