We Keep Coding

Close push menu on scroll

How would I go about closing a push canvas menu when the use scrolls? or clicks off of it.
Below is the HTML and Jquery. Thanks in advance!
$(document).ready(function() {
$menuLeft = $('.pushmenu-left');
$nav_list = $('#nav_list');
$nav_list.click(function() {
$(this).toggleClass('active');
$('.pushmenu-push').toggleClass('pushmenu-push-toright');
$menuLeft.toggleClass('pushmenu-open');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="pushmenu pushmenu-left">
<div class="menu-primary-container">
<ul id="menu-primary" class="menu">
<li>Home</li>
<li>Creative</li>
<li>Online</li>
<li>Print</li>
<li>The Studio</li>
<li>Our Work</li>
<li>Snippets</li>
<li>Blog</li>
<li>Get in touch</li>
</ul>
</div>
<div class="mobile-phone">01268 271 858</div>
</nav>

toggle your pushmenu classes on scroll.
window.addEventListener('scroll', function(e) {
$('.pushmenu-push').removeClass('pushmenu-push-toright');
$menuLeft.removeClass('pushmenu-open');
});
you might want to add timer to prevent the menu from scrolling if the user accidentally scrolls before choosing a menu item (could happen on touch devices).

JQuery LightSlider inside Bootstrap pills

I'm using jQuery lightSlider as image slider. I want to have sliders inside bootstrap pills (one slider per pill). Nevertheless, I have found the following situation: In the first pill the slider is OK. In the second pill the slider content is not displayed (resizing the window brings up the slider content!). I don't see how to solve this problem. Any help will be sincerely appreciated.
My (simplified) html:
<div>
<ul class="nav nav-pills">
<li class="active"> <a data-toggle="pill" id="pill1" href="#s1">Pill 1</a>
</li>
<li> <a data-toggle="pill" id="pill2" href="#s2">Pill 2</a>
</li>
</ul>
</div>
<div class="tab-content">
<div class="col-md-12 tab-pane fade in active" id="s1">
<ul id="slider-1">
<li>
<p>one</p>
</li>
<li>
<p>two</p>
</li>
<li>
<p>tree</p>
</li>
</ul>
</div>
<div class="col-md-12 tab-pane fade active" id="s2">
<ul id="slider-2">
<li>
<p>uno</p>
</li>
<li>
<p>dos</p>
</li>
<li>
<p>tres</p>
</li>
</ul>
</div>
</div>
The javascript:
function initSlider(sliderId) {
$('#'+sliderId).lightSlider({
item:2,
loop:false,
slideMove:1
});
}
initSlider('slider-1');
initSlider('slider-2');
And the Jsfiddle reproducing the problem: https://jsfiddle.net/sedtjchs/4/
Thank you for your help!

Problem: You are trying to call lightSlider on the content(#s2) which was already hidden so plugin can not calculate height, width(and etc) on that element.
Add active class to the second .panel-pane.
Jsfiddle

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$('#slider-2').lightSlider({
item:4,
loop:false,
slideMove:2,
pager: false,
easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
speed:600,
responsive : [
{
breakpoint:480,
settings: {
item:2,
slideMove:1
}
}
]
}).refresh();
});

I have the same problem, but the Alex's solution doesn't work for me as my tab wrapper doesn't have a fixed height so it will show blank gap under the 1st tab at the first load.
The Thành Nguyễn's solution is working for me. Basically it's refreshing the slider everytime you click on the tab navigation, so then LightSlider will be able to calculate the active container height.
Here's the complete script :
$(document).ready(function() {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$('#slider-2').lightSlider({
item:4,
loop:false,
slideMove:2,
pager: false,
easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
speed:600,
responsive : [
{
breakpoint:480,
settings: {
item:2,
slideMove:1
}
}
]
}).refresh();
});
});

How to use Snap.js panels with jQuery Mobile?

Does anybody know how to set up Snap.js in jQuery Mobile? I'm trying to migrate from the jQuery Mobile panel widget which has major scroll issues.
http://jsfiddle.net/frank_o/vZBzD/3/
HTML:
<div data-role="page">
<header data-role="header" data-position="fixed" data-tap-toggle="false">
<a id="open-panel">Open panel</a>
<div class="snap-drawers">
<div class="snap-drawer snap-drawer-left">
<ul>
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>...</li>
</ul>
</div>
</div>
</header>
<div data-role="content" id="content" class="snap-content">
<ul>
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>...</li>
</ul>
</div>
</div>
JS:
$(document).on('pagecontainershow', function () {
var snapper = new Snap({
element: document.getElementById('content')
});
if (document.getElementById('open-panel')) {
addEvent(document.getElementById('open-panel'), 'click', function () {
snapper.open('left');
});
}
});

I don't understand what's the problem? You had a JavaScript error with click event binding, I just changed it to jQuery like binding.
Working example: http://jsfiddle.net/Gajotres/as8P4/
$(document).on('pagecontainershow', function () {
var snapper = new Snap({
element: document.getElementById('content')
});
$(document).on('click', '#open-panel',function () {
snapper.open('left');
});
});

As per snap js, you don't need to place the snap js html content inside the jQuery mobile page content html.
You can break the page in two parts cleanly, the snap nav section & the actual jQuery mobile html structure.
Working Demo
http://codepen.io/nitishdhar/pen/pIJkr
I have used jQuery + jQuery Mobile 1.4.2(JS) + jQuery Mobile 1.4.2(CSS) + Snap JS + Snap CSS as resources in the codepen, you can check them in specific JS & CSS sections settings button.
Code Structure - Different Menu on Both Sides
<body>
<!-- Snap Js Code Comes Here -->
<div class="snap-drawers">
<div class="snap-drawer snap-drawer-left">
<div>
<ul>
<li>Default</li>
<li>No Drag</li>
<li>Drag Element</li>
<li>Right Disabled</li>
<li>Hyperextension Disabled</li>
</ul>
</div>
</div>
<div class="snap-drawer snap-drawer-right">
<ul>
<li>Default</li>
<li>No Drag</li>
<li>Drag Element</li>
<li>Right Disabled</li>
</ul>
</div>
</div>
<!-- Snap Js Code Ends Here -->
<!-- Jquery Mobile Code Comes Here -->
<div data-role="page" id="content">
<div data-role="header" data-position="fixed">
<h4>© Test App</h4>
</div>
<div role="main" class="ui-content">
Some Page Content
</div>
<div data-role="footer" data-position="fixed">
<h4>© Test App</h4>
</div>
</div>
</body>
Now apply some CSS as per your requirement of design, but you might need the z-index -
#content {
background: #BFC7D8;
z-index: 1;
}
Now initiate the snap nav -
var snapper = new Snap({
element: document.getElementById('content')
});
This should work fine now.
Alternate Example with same Menu on both sides
Also, if you want to show the same menu on both sides, just remove the menu items from the snap-drawer-right div & only keep menu items in the left one like this -
<div class="snap-drawer snap-drawer-left">
<div>
<ul>
<li>Default</li>
<li>No Drag</li>
<li>Drag Element</li>
<li>Right Disabled</li>
<li>Hyperextension Disabled</li>
</ul>
</div>
</div>
<div class="snap-drawer snap-drawer-right"></div>
Now Add this to your CSS -
/* Show "Left" drawer for the "Right" drawer in the demo */
.snapjs-right .snap-drawer-left {
display: block;
right: 0;
left: auto;
}
/* Hide the actual "Right" drawer in the demo */
.snapjs-right .snap-drawer-right {
display: none;
}
Working Demo - http://codepen.io/nitishdhar/pen/LliBa

Making a nav menu that becomes sticky as the page scrolls down

I have two menus in use on a site I'm building. The second menu is a category menu, and I need to make it stick to the top of the page as a user scrolls down the page to view content. I had it working previously, but had to remove some elements from my header. For whatever reason, it won't work now. Code to follow.
<script type="text/javascript">
function sticky_relocate() {
var window_top = jQuery(window).scrollTop();
var div_top = jQuery('#scroller-anchor').offset().top;
if (window_top > div_top)
jQuery('#navbar').addClass('sticky')
else
jQuery('#navbar').removeClass('sticky');
}
jQuery(function() {
jQuery(window).scroll(sticky_relocate);
sticky_relocate();
});</script>
And the menu structure looks like this...
<div id="scroller-anchor"></div>
<div id="navbar" class="navbar">
<nav id="site-navigation" class="navigation main-navigation" role="navigation">
<h3 class="menu-toggle">Menu</h3>
<a class="screen-reader-text skip-link" href="#content" title="Skip to content">Skip to content</a>
<div class="menu-category-menu-container">
<ul id="menu-category-menu" class="nav-menu">
<li id="menu-item-1408" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1408">
All
</li>
<li id="menu-item-1414" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1414">
Videos
</li>
<li id="menu-item-1409" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1409">
Entertainment
</li>
<li id="menu-item-1412" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1412">
Politics
</li>
<li id="menu-item-1413" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1413">
Sports
</li>
<li id="menu-item-1410" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1410">
Fashion
</li>
</ul>
</div>
</nav><!-- #site-navigation -->
</div>
Help?
EDIT
Forgot to include what was in the sticky class.
.sticky {
position: fixed;
top: 0;
}
EDIT2
Attempted the following fix, still to no avail.
<script type="text/javascript">
var position_to_make_nav_sticky = jQuery('#scroller-anchor').offset().top; //get the Y-position of section
jQuery(window).on({ scroll:function(){ // fires when user scrolls
var current_position = window.pageYOffset; // get the current window Y-Position
if( current_position > position_to_make_nav_sticky )
{ jQuery('#navbar').addClass('sticky'); // add class to make the nav sticky using css
} else { jQuery('#navbar').removeClass('sticky'); // remove sticky css class } });
</script>

for anyone interested in making a sticky nav on scroll:
<script type="text/javascript">
var position_to_make_nav_sticky = jQuery('#scroller-anchor').offset().top; //get the Y-position of section
jQuery(window).on({
scroll:function(){ // fires when user scrolls
var current_position = window.pageYOffset; // get the current window Y-Position
if( current_position > position_to_make_nav_sticky ) {
jQuery('#navbar').addClass('sticky'); // add class to make the nav sticky using css
} else {
jQuery('#navbar').removeClass('sticky'); // remove sticky css class
}
}
});

Vertical CSS slide menu pushing the site up on click

The submenu on each menu item slides underneath the main menu item instead of sliding out whenever I click on a menu item, which is what it's supposed to do. Problem is the site itself automatically scrolls up. Its as if the main menu items have a link to them that is anchored to the top of the site. I click on them, the submenu slide out, but the site itself scrolls up everytime.
How to make the code cross-browser compatible?
The javascript code:
<script type="text/javascript">
<!--//--><![CDATA[//><!--
startList = function() {
if (document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onclick=function() {
this.className = (this.className == "on") ? "off" : "on";
}
}
}
}
}
window.onload=startList;
//--><!]]>
</script>
The html code:
<ul id="nav">
<li>Home </li>
<li>About >
<ul>
<li>History </li>
<li>Team </li>
<li>Offices </li>
</ul>
</li>
<li>Services >
<ul>
<li>Web Design </li>
<li>Internet Marketing </li>
<li>Hosting </li>
<li>Domain Names </li>
<li>Broadband </li>
</ul>
</li>
<li>Contact Us >
<ul>
<li>United Kingdom</li>
<li>France</li>
<li>USA</li>
<li>Australia</li>
</ul>
</li>
</ul>
Based off of this menu: http://www.pmob.co.uk/temp/drop-down-expand.htm#

The reason is because you have "#" in your hrefs...this is telling the browser to return to the top. You need to return false on your onclick so that the default behavior (navigating to the href) doesn't happen on the items that are not truly "links".

You can always add e.preventDefault() to the event listener to remove all hyperlink-effects after clicked.
Using preventDefault is usually more recommended.
http://jsfiddle.net/Z8Uvj/
$("a").click(function(e){
//your stuff
e.preventDefault();
});