Develop Reference

Why is my offcanvas-wrapper reappearing briefly after click-tap? (mobile menu)

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.

scroll bar did not display in adminLTE template

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

image slides vertical scroll with jquery or javascript

I have 5 images and I want to slide those images when we hit the arrow up or down with keyboard button or when we move the scroll bar up or down
For reference:www.webflow.com please just check it from the link. when you will scroll down to the Buil Custom section on the page. you will see the slider and its working with when you hit the arrrow button up and down from keyboard or when you move down or up with scroll bar.

You can use https://api.jquery.com/scrollleft/ to scroll horizontal on an element.
Example: $( "div.slider" ).scrollLeft( 300 );
You will have to first compute the width of each element of your slideshow and scroll exactly that much each time.
You can do this on arrow keys with an event handler: Detecting arrow key presses in JavaScript
The reference you linked shows changes in your page based on the scroll position, reading js: change style based in scroll position might give you hints on where to start there.

How can I reveal a div at the bottom of a page, then jump to it?

I'm building a progressively-enhanced, Bootstraped web application that features task-centric help on every page. The help area div (id="help_area") loads in a hidden state; generally when the user clicks on the "help" button (a id="nav_help_button"), the main content div condenses from span12 to span9, and the help area is revealed as a span3. This works well.
Because I want to support mobile and tablet, I'm using Bootstrap's responsive scaffolding. So if you are viewing the page on a narrow viewport, clicking on the help button "reveals" the hidden help area at the bottom of the page‡. I'm trying to use jQuery's .slideToggle()'s callback method to execute JavaScript (window.location.hash = "help_area";) that "jumps to" the help area after it is revealed, but having no luck with the jumping (it doesn't error; it just doesn't move browser focus to the help area).
How can I reveal a div at the bottom of a page, then jump to it? I'm also using preventDefault so the browser won't try to jump to the internal link before the target is revealed. Could that be the conflict?
Here's the relevant ECMA script:
$('#nav_help_button').click(function(event) {
"use strict"; //let's avoid tom-foolery in this function
event.preventDefault(); //don't let a tag try to jump us to #help_area before we reveal it
//adjust spans of main block and help area, set aria-hidden attribute on help block to help screen-readers
if ( $('#help_area').attr('aria-hidden')==='true' ) {
$('#content_container.span12').switchClass('span12', 'span9', 300);
$('#help_area').delay(300).slideToggle(300, function() { window.location.hash = "help_area"; }).attr('aria-hidden', 'false');
}
else {
$('#help_area').slideToggle(300).attr('aria-hidden', 'true');
$('#content_container.span9').delay(300).switchClass('span9', 'span12', 300);
}
});
I have also set up a JSFiddle that illustrates the problem.
To duplicate
open http://fiddle.jshell.net/jhfrench/HdCbu/7/show
then resize that browser window until "PTO, AIT Life, Hours Worked", etc stacks on top of each other
click on the button in the upper-right corner (the one with three white horizontal bars) to reveal the nav menu
click on the blue "help" button to execute the reveal/jump-to.
‡ As the right-most div, everything to the left of it gets stacked on top, so the newly "revealed" help area is generally below the visible portion of the page.
Related:
Javascript to make the page jump to a specific location
http://api.jquery.com/event.preventDefault/
http://api.jquery.com/slideToggle/

Your JSFiddle does jump when I do exactly as you say (steps 1-4) for my browser, which is Chrome 24. What's your browser?
But perhaps this is your problem. If I navigate to http://fiddle.jshell.net/jhfrench/HdCbu/7/show/#help_area (note the appended hash tag) and perform your steps 1-4, my browser does NOT jump. Note that when you first navigate to that URL, there is no visible #help_area. Thus, the URL you're navigating to specifies a hash tag that's invisible. Perhaps the browser is a bit confused by this and just leaves the #help_area hash tag in a bad state. It won't allow scrolling to it from then on, even after it becomes visible. Speculation, but I hope it's helpful!

Correct way to reset jScrollPane viewport position

I've been looking around for answers and everything I apply to my own code doesn't seem to work. I have a DIV with content. When I click on a link the DIV fades out, the content changes via the jQuery .html event and then the DIV fades back in. This gives the illusion of a gentle page change on my site. This DIV has a jScrollPane which works fine before any links are pressed.
What is happening however is that the scroll pane 'draggable area' stays the same size when the content is re-written and there is more or less, or even if there is no need for one at all.
I need to get the scroll pane 'draggable area' to change size in relation to the new content and I need it to scroll back to the top inbetween the .fadeTo fade out and in effect.
I've tried some of the following:
function showhome() {
$('#infohome').stop(true,true).fadeTo(100,0)
$('#infohome').delay(100).html("NEW CONTENT")
$('#infohome').stop(true,true).delay(200).fadeTo(100,1)
refreshNav();
function refreshNav() {
var element = $('.scroll-pane').jScrollPane({scrollToY(0, animate)});
var api = element.data('jsp');
}
As well as:
myJScrollPane.getVerticalScrollbar().setValue(int Pos);
and a few others.
As always, any help would be greatly appreciated.