I created a HTML page with menu & content.
Everything is working fine for desktop, but when menu is clicked in mobile, the content of the body overlaps with menu items when scrolled (when menu is scrolled, the content is also scrolling).
I tried using overflow: hidden and position:fixed,
but it is making entire page non-scrollable, even when the button is not clicked.
Can anyone please help me with this ?
I tried the following :
My JS :
$(document).ready(function () {
$("#mobile-toggle").click(function () {
$('body').css('overflow', 'hidden');
});
});
My button :
<button id="mobile-toggle" class="mobile-toggle">
_('mobile-toggle')<span></span>
</button>
It is disabling scrolling when clicked, but it's not working on mobile.
You need to rework your css so that it is responsive - here would be a good start Responsive Design
Try to target the html element with your selector too:
$('body,html').css('overflow', 'hidden');
Related
I have a mobile menu on a one page that did not close after a tap on a menu item (menus are all redirecting to sections of the one page with anchor tags). I managed to do it by adding a footer script:
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('#offcanvas-wrapper li a').click(function(){
$('#offcanvas-wrapper').toggleClass('hide');
});
});
</script>
However, now if I want to open the mobile menu again, the menu reappears briefly after a tap/click, and then I have to click on the menu icon again to make the menu visible.
This only happens on mobile (reduce your window size to reproduce the glitch).
Here is the link of the one pager:
the one pager
Here is a 30 seconds video of the issue:
video of the issue
Why is the menu reappearing? How can I resolve this? I can handle CSS, Html and a bit of javascript.
Anyone can point me in the right direction?
I wanted to just comment but I don't have enough reputiton yet to do so.
It seems like you have an "open" class that stays on the menu element when you click on a menu option. The open class disappears however when you click outside of the menu. So that could be the issue.
I am using adminLTE template with fixed sidebar. i have issue in the sidebar section. when i click sub menu, sidebar scroll not displayed. but when i load chrome inspect element section, scrollbar appeared. why is that? please check attached images
but when i load inspect element, scroll bar appeared.
I am also facing same issue.The problem from scroll plugin height detection .For first time load its read some height and add scroll on respected data.
Then you expand the menu .its still perform the same height.
Why its working after developer mode open ?
Because the window was resized that scroll plugin detect new height
So we need manualy trigger the resize event on expand menu click/hover .use below code on click/hove while expand menu
setTimeout(function () {
$(window).trigger('resize');
},10)
create click/hover event on menu (inspect to find classname)
$(document).on('click hover','classnameOfMenu',function(){
setTimeout(function () {
$(window).trigger('resize');
},10)
})
I was wondering, for all you javascript and jquery guru's what would be my best way to tackle this problem. What I have is a navigation that is hidden via CSS to the bottom of the screen. I've managed to have it working as a toggle fine - which you can see here http://jsfiddle.net/olichalmers/Lby7vfdf/.
var body = $("body"); $("#menuBtn").click(function() {
body.toggleClass("showMenu");});
This obviously means that the menu slides up and down.
What my problem is is that I want to animate the menu up on the initial click, and then when you click the button again to close it I want the navigation window to slide up. Then when you click it again to open it, it is appearing from the bottom again. I've been trying to get my head around how this would work and what I think is that it would be two classes (one for hide menu, and one for show menu) which would be added and removed from the body. I have a jsfiddle here http://jsfiddle.net/olichalmers/twqd2yj0/
var body = $("body"); $("#menuBtn").click(function() {
if (body.hasClass("hideMenu")) {
body.removeClass("hideMenu").addClass("showMenu");
}
else if (body.hasClass("showMenu")) {
body.removeClass("showMenu").addClass("hideMenu");
}});
This is probably shocking in it's attempt to come to a solution to this problem. I'm using jquery but maybe it is a javascript solution using an event listener that is needed here? My jquery and javascript knowledge is patchy at best as i'm still in the midst of learning so please go easy if I appear very dumb!
Hope i've been clear enough. Thanks.
May I suggest a different approach?
Create your bottom menu in a separate DIV, located at very top of your HTML (directly under BODY tag). Make that DIV position: fixed -- that takes it out of the "flow" and positions it relative ot the viewport (the screen), not to any other divs or to the web page itself. Now, you can move it up/down based on some trigger.
Here is a code example:
jsFiddle Demo
HTML:
<div id="botttrig"></div>
<div id="bottmenu">The menu is here</div>
<div id="wrap">
<div id="content">
<p>Content goes here</p>
<p>Hover over small box at bottom left</p>
</div>
</div>
jQuery:
$('#botttrig').hover(
function(){
$(this).fadeOut();
$('#bottmenu').animate({
'bottom': '0px'
},500);
},
function(){
//do nothing on hover out
}
);
$('#bottmenu').hover(
function(){
//do nothing on hover in
},
function(){
$('#bottmenu').animate({
'bottom': '-80px'
},500);
$('#botttrig').fadeIn();
}
);
See this jsFiddle for another example. I removed the trigger box, and left the top 10px of the menu visible at screen bottom. Upon hover, slide the menu up. You may wish to increase the z-index on the #bottmenu div to always display it above the other DIVs on the page, so that it is always visible.
http://jsfiddle.net/twqd2yj0/4/
I've used slideToggle() and added display:none; to #navHold
I am using mCustomScrollbar script for custom scroll bar effect now I want to scroll page on specific class element. Class position is not fixed, It can be top or bottom.
In my example I have one anchor link and I want to page scroll to active class. Page will scroll only when user click to anchor.
Here is my JS Code:
$( "#scroll" ).click(function() {
//scroll page to active class
});
$("#content_1").mCustomScrollbar({
scrollButtons: {
enable: true
}
});
Here is my JSFiddle: http://goo.gl/6dpT7l
Note: Scroll position is not fixed. It can be anywhere UP/Down.
Any Idea? How to do this?
Thanks.
In your fiddle, it seems to be as simple as scrolling to the paragraph in question's position().top attribute. Replace your alert with this:
$("#content_1").mCustomScrollbar('scrollTo', $('.active').position().top);
I'm using the following code for a simple toggle button to show/hide some extra content:
$(".toggle .button").click(function() {
$(this).next().slideToggle('fast');
});
The problem is if the toggle is at the bottom of the screen, the user has to then scroll down to view the newly opened toggle content. So my question is: how can I make it so the toggled data is automatically shown to the user by jumping the window to the correct position when they click the toggle?
Thanks
You can use animate to do the job:
$('html,body').animate(
{scrollTop: $('#your-content-id').offset().top},
'slow'
);