Develop Reference

Hover effect when user touches sliding through nav elements

I've implemented a sidebar navigation with a hover effect to jump from slide to slide on a custom slider which is working fine using a simple jQuery hover() function:
$('#slider-nav ul li').hover(function() {
$(this).prev().addClass('hover-sib');
$(this).next().addClass('hover-sib');
}, function(e) {
$(this).prev().removeClass('hover-sib');
$(this).next().removeClass('hover-sib');
});
but on mobile it would need to be polished.
The idea is to have the same hover effect on real time while the user slides the finger vertically over the lines, making them grow to the side and the text to appear. Once the user releases on an option it could be interesting to call that slide, but that is not the priority right now. The bigger issue is how to achieve the similar effect of a hover when a user slide the finger through the element...
Any idea? I thought on using 'touchmove' but I don't think that I could tell if the user is over one of those options or even which one of them.
$('#slider-nav ul li').bind('touchmove',function(){
$(this).prev().addClass('hover-sib');
$(this).next().addClass('hover-sib');
});
Sample: https://jsfiddle.net/ac_coding/d7xnndg2/
UPDATE: In case it wasn't properly understood/explained, what I'm trying to achieve here is the same hover effect on a desktop when a mobile user touches the screen and, without lifting the finger, moves from along the vertical right edge, hovering and passing through different lines/options of the nav which would be triggering their "hover" effect.
Using touchstart/touchend will require the user to tap at different points of the nav in order to see the options.
I hope it makes sense, doesn't seem easy to explain :S
UPDATE 2: It seems that I finally found a solution but I don't have the time now. I'll update this question tomorrow explaining it for everyone else. Thanks everybody for your help!

Did you try to bind to the touch event? You need to add "hover-effect" class (where :hover styles are) as your additional CSS selector as well.
$('#slider-nav ul li').bind('touchstart', function() {
$(this).addClass('hover-effect');
$(this).prev().addClass('hover-sib');
$(this).next().addClass('hover-sib');
});
$('#slider-nav ul li').bind('touchend', function() {
$(this).removeClass('hover-effect');
$(this).prev().removeClass('hover-sib');
$(this).next().removeClass('hover-sib');
});

Adding animate in and animate out classes with one menu button

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

simple modal not scroll background <body>

I'm using simple modal. Is there any way to keep the background (behind the overlay) from scrolling when you roll the mouse wheel while outside the boundaries of the modal?
Thanks!

While creating the modal, set overflow:hidden for body. Then you will not be able to scroll the background and when hiding the modal, set overflow:auto for body.

I think you can do this:
$(document).on('mousewheel', '.simplemodal-overlay, .simplemodal-data', function(event) {
event.preventDefault();
});
I'm not sure if mousewheel has full cross-browser support, though.
Edit: I verified this works, but you need the mousewheel plugin: https://github.com/brandonaaron/jquery-mousewheel/downloads
Example: http://jsfiddle.net/jtbowden/AhpLc/
(I pasted jquery.mousewheel.min.js into the script area... Don't do that)

CSS class depending on page position

I have a fixed navigation at the top of the page that has links that smoothly scroll you around to different sections (IDs) of the page via jQuery.
Would there be any possible way to have a css class (e.g. .current) appended to the navigation links depending on what section of the page you're at?
For example, when I click "About", it'll scroll down to the About section and also make the navigation text orange as long as you stay in that section?
I've seen this done somewhere a while ago but I don't remember the website or even how to describe this behavior to search for it.
EDIT: Here's a link to something siliar to what I'm looking for:
http://www.fat-man-collective.com/hello.php
The icons change depending on your position on the page.
Script:
<script>
function goToByScroll(id){
$('html,body').animate({scrollTop: $("#"+id).offset().top - 50},'500');
}
</script>
HTML:
About
[...]
<div id="about">
[...]
</div>
Any help is greatly appreciated.

This would be possible by examing the offset()* function of the desired element and then coding to respond accordingly. You can track the offset of an element, and depending on the resulting offset, you would apply or remove the appropriate classes accordingly.
*See the documentation for offset()

When you click on a section in the navigation, just modify the class so that the style is what you want it to be.
Secondly, you'll need to add an event handler on the scroll event that similar modifies the nav's class.

Try this:
function goToByScroll(id){
$('ul#nav li a').removeClass('active'); // elements in menu
$(this).addClass('active');
$('html,body').animate({scrollTop: $("#"+id).offset().top - 50},'500');
}

Four years later...for those that have the same question since hopefully the OP has solved his problem by now.
Check out Bootstrap's ScrollSpy plugin, which "is for automatically updating nav targets based on scroll position." For an example of using the ScrollSpy plugin see this detailed tutorial on how to make a floating, updating navbar (like the Bootstrap site uses).

Need help on JQuery mouseover on menu with submenus

I have this menu (# jsFiddle) where this will happen given the following mouse events:
Hover on Movies
Then start dragging mouse to mouseover on Movie library
While dragging you accidentally touch the Home menu item
Causing the Home submenu to appear and hiding the Movies submenu.
This is not the desired effect i want. So im seeking some assistance. How can i solve this so that if im dragging my mouse and i accidentally touch some of the other menu options, the javascript will be smart enough to know that it shouldn't hide the selected submenu.
Can i add some kind of delay on the hover? All help is appreciated!

You can use hoverIntent to throttle mousein/mouseouts events to prevent accidential firing (you need this I think...). Check examples on hiverIntent's site. You'll like it.

I think this plugin fits exactly for what you want to do : http://cherne.net/brian/resources/jquery.hoverIntent.html

I hope this is what you want. If not, i'm sure it will guide you to the final solution
$().ready(function(){
$('ul.menu').hover(function(event){
var hoverItem = event.target;
//hide other ul's submenu
$(hoverItem).siblings('li').children('ul').stop(true,true).hide()
//show current submenu
$(hoverItem).children('ul').stop(true,true).fadeIn()
},function(event){
//console.log(event.target);
$('ul.menu li').children('ul').stop(true,true).delay(1500).fadeOut()
})
});
Hope to have helped you. Cheers