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

button slide on hover

I am forced to have my navbar in the middle, because the width of my dropdownbox is 300 px; I would like the button "login" to be in the right side, and when you hover over the "Login", the width slides from right to left, so the dropdownbox width fits the page. And when you remove the mousepointer, the button slide from left to right, to be in the "normal" position.
I have been playing around with this, but how can I solve that it does not slides back again automatically, instead of pushing a button?

you're post is a little confusing to understand. At the moment the code requires you to press the button to first display and then hide the element. What I got is that you'd like this to be automatic.
One way to do this is for a desktop only solution is to use hover instead of click. But this creates some issues of its own (can't click sign-in fast enough), I'm not sure you want to go down this road.
$(".myButton").hover(function () { /* Do this */ });

Remember div hover state after page refresh

I have a navigation bar that grows in width when it is hovered over.
Here's an example:
http://jsfiddle.net/Gsj27/822/
Now, if for example I have a home button in the area that the hover effect applies to, when it is clicked and the home page is loaded the result is as follows:
The page is loaded with the navigation area in default size (small width), and after an instance it increases in width, as per the hover effect, when the hover effect "kicks in".
The Question
How to make the page load with the hover effect keeping its state right before a hyperlink is clicked? So in my example, if the home button is clicked then load home page with the hover effect already active (since home button is on navbar area so hover effect will necessarily be on). But if a hyperlink elsewhere (e.g. gray area in my example) is clicked then load page with hover effect off.
I think this can be achieved using js toggleClass? Something like
$(document).ready(function(){
if(/* hover effect was on */) {
$('nav').toggleClass('hovered');
}
})

You can save status in url:
<a href="?active=true">
if(window.location.href.indexOf('active=true') > 0) {
$('.nav').addClass('hovered');
}
Code: http://jsfiddle.net/Gsj27/824/
Demo: http://fiddle.jshell.net/Gsj27/824/show/
You can also use hash(#) to save status.

Disable scrolling on mousedown-mousemove (Jquery / javascript)

So i want to disable the window scrolling on mousedown+mousemove, i searched everywhere, but i can't find anything.
body { overflow: hidden } doesn't work, you can still scroll if you press the mouse, and you go down.
The problem i have, is that on clicking on an image thumb, it opens a positioned absolute div (100% height & width and a 50% black transparent .png) that shows the original image, and when i press the left mouse button and i move down, all the items behind the absolute div, start to scroll down.
Here is an example of what is happening. http://jsfiddle.net/T2qBw/1/
(Click the black div, a position fixed div opens, press left click, and move down).
Thanks in advance.
PS: I apologize if i made any grammar or spelling mistake. (English isn't my native language)

$(".open-overlay").click(function(){
$(".overlay").css("display","block");
$("body").css({overflow:'hidden'});
$(window).on('mousedown', function(e) {
e.preventDefault();
})
});
Don't forget unbind mouse event
$(window).off('mousedown')

How can I make a DIV slide in and out?

I am currently learning jQuery. I'd like to know how to make an image slide in when you click on its edge, then click again and it slides away. Similar to this:
http://www.karenmillen.com/
If you see the right hand side and click, there is the effect that i'm looking for. I assume this will involve making a div and giving it a background image then using some jquery to make the div slide into view. Of course the div could have other content such as html. Any ideas?
Would the .slideDown() method work?

if you want a div to slideDown() first it has to hidden.
so use $("#div_Id").hide();
after that use $("#div_Id").slideDown('slow');
this will work

Check out slideToggle

Here's what i have so far:
$(document).ready(function() {
$('.inner').hide();
$("button").click(function() {
$("#static_image").hide();
$('.inner').slideToggle(300);
});
});
So basically the animated div begins hidden. There's another div with a background image that is lined up to look as if the animated div is still sticking out a bit. Then clicking a button makes the static div dissapear and the animated div slide into view. However i'm not sure how to make the timing perfect so it's smooth and people won't know there are two divs. The animated div takes a fraction of a second to move up to where the div with the static image was, however the static images disappears immediately leaving a non-smooth animation.
One other thing, how do i get the static image div to return at the moment that the animated div moves back down after a user click? It can't be at the exact moment the user clicks 'retract' button else it'd definitely appear before it's supposed to.

In order to use the animate() function add a CSS class to the <div> tag that has a height attribute, it can either be in pixels or %, this will be the initial height. After that then you can use the animate().
$('#mydiv').animate({
height: 500px
}, 5000, function() {
// Animation complete.
});
This will slide the div to 500px, which will take 5 seconds.