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');
});
Related
Okay so I have this fiddle here, where you can see I have one small nav, and it changes upon scrolling. The small nav is used minimalstic as the focus is needed on the hero image; and after that the nav becomes a little bit bigger and requests a little bit more focus from the viewer.
But now upon working on my mediaqueries I want to just show the second nav for mobile users, since they cannot hover on the first nav (due to not having a mouse obviously), so they have no use for the first navigation and it's useless for them.
But I only show the second nav with the use of Jquery/JS.
if ($window.scrollTop() > navShiftBreakpoint) {
$navContainer.addClass( 'full' );}
//full = the second nav & //navShiftBreakpoint = 500px
I cannot force to add a class in HTML from css, so any idea on how I can fight this problem?
Thanks for the effort/help in advance.
You can use this script to detect if the device is mobile and if it is, avoid initiating scroll callback and directly apply hidden class.
I have a horizontal sub menu with 8 options (can't add more or it drops to a second line), but now it needs more and i want a particular effect. I want the last option to be an arrow and the whole menu slide horizontally to the left when the arrow is clicked to show more options and a left arrow to slide back.
I have researched for a few days and have found a few examples similar, but just haven't worked in my case. Also, alot of answers to this similar thing involved plug-ins or carousel's and I don't think those are going to work for my particular site.
Right now I have it working kind of how I want but it's not the right effect. I'm using .hide() and .show() in my jQuery function and basically used the class: "firstSide" for the first part of the menu you can see after it drops down from the main menu, and class="slideSide" for the 2nd part. I've also tried .slideToggle() and playing with the widths but haven't got it to work right.
This is my codepen that I've started as an example: CodePen
This codepen isn't pretty but it works for this example, this is my function in it:
$('#arrowRight').on('click', function () {
$('.firstSide').hide(function () {
$('.slideSide').show();
$('#blankSub1').show();
});
});
$('#arrowLeft').on('click', function () {
$('.slideSide').hide(function () {
$('.firstSide').show();
});
});
Also I have the class slideSide set so that it doesn't display along with the first part of the menu or else its all on a 2nd line which i don't want as the width of the 8 menu options is about the full width of the whole site.
.slideSide {
display: none;
}
The desired effect I want can be seen on: http://store.apple.com/us/iphone
I've tried to see how this works but have not figured it out, below is a screen shot of the menu I'm talking about on that page.
Any help or advise would be appreciated as I'm kind of stuck.
Check out this fiddle.
Is this what you are looking for?
you nest a ul within a div and make use of overflow:hidden on the div.
Using jquery you can then implement the sliding via margin-leftor positioning like
position:relative; left:-100%
and you hide the arrows as they are clicked and so the other one.
you can play around with the values to match your needs.
I am trying to implement drag and drop between 2 Div's
Please refer my fiddle below :
http://jsfiddle.net/sandeepkram/SAUCa/
This layout is a replica of my application. In the fiddle you can see that if you drag an element within the first div (on left side) it keeps moving within that div forever - though if you just motion to mouse to drag and drop it onto the right side div, it does actually work.
Here the problem is the indefinite scrolling / dragging of element within left side div. I dont know what the problem is here -
In my application I have another problem, in that when I drag an item out of the left side div, it vanishes though I can drop the cursor on right side div and the drop appears to have worked correctly.
Need help to know why the dragged element is disappearing.
I have looked up all the questions and resources related to this, sortables etc on stackoverflow and the net - but no use.
I have also tried to use the "stack" option but no use
$.each($("ul#secondaryKPIList ul > li"), function (index, tListItem) {
$(tListItem).addClass("SecondaryKPIDraggable");
$(tListItem).draggable({
revert : 'invalid',
stack: '.SecondaryKPIDraggable'
});
});
To solve the visual issue, you could just remove the overflow changes
overflow-y: auto;
overflow-x: hidden;
on the .KpisListItems setting it as the following fiddle: http://jsfiddle.net/GEWLs/2
These rules are messing with the way jQuery sortable handles and calculates the positioning, hence the strange behavior.
I know I'm kinda late, but heres is another solution that I find easier, just add the following css:
.ui-draggable {
z-index:9999;
}
9999 is probably overkill though.
My guess is it's because you are using 'list' markup. If you tried using 'divs' instead for your draggable items I'd wager it would work as it should.
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
After you click a link on the iphone or ipad, it leaves a simulated mouse hover that triggers the a:hover css styling on that link. If the link has a javascript handler that keeps you on same page, the hover state will not change until you click on another link.
This gets weird if you have an ajax widget that asks questions and each answer is link. When you touch one of the answers, it highlights with the hover state, and then when the question and answers are replaced (using javascript) by a new question and answers, the new answer that appears in the same position as the prior answer has its hover state automatically triggered. I want to prevent that from happening to the new answer link.
Is there any way (maybe some something in javascript) that can give me the same result as the "hover" no longer being above this element?
Notes:
I know I could just have a:hover use the same css styling as a, but a:active styling is hardly noticeable since the active state of a touch click is so brief, so I'm hoping for something that can show the hover state on a link until I replace it with new html
I have tried a variety of approaches in javascript, like calling "blur()" on the dom element and some other stuff, but no luck—I'm starting to think that the best solution is to apply classes to the links on javascript events to manage the hover state myself (or just leave it as it is)
The problem is that when you replace the content in place, Mobile Safari treats the new elements as if they were the old ones, because they occupy the same position in the DOM. One workaround is to remove the old elements first, then add the new elements asynchronously. The simplest way to do this is using setTimeout().
http://jsfiddle.net/chad/JNZvu/10/
// When we click on an answer
$('body').on('click', '.answer', function(){
// don't follow it's link
event.preventDefault();
// fade out the container
$('.container').fadeOut(function(){
// remove old elements (happens after fadeOut because we are in the callback)
$('.container').html('');
// add new elements asynchronously and fade container back in.
setTimeout( '$(\'.container\').html(\'<a class="answer" href="#c">link 3</a><a class="answer" href="#d">link 4</a>\');$(\'.container\').fadeIn();', 0);
});
});
When doing this for real, the fadeOut would be called at the same time as the AJAX function, and then the removal/addition would happen in the AJAX callback.
You can try writing another :hover rule that activates when the parent has a particular class, in effect negating the existing hover rule. The class on the parent would need to be added on touchend and removed on touchstart, so that the default rule could take effect on the next link clicked or touched.
I just solved a similar problem where I want hover styling for list items, but since the parent can scroll with one finger using iscroll, I need to cancel that hover effect as soon as the scroll list moves. It's using jQuery, but you get the idea:
$('ul.scroll').bind('touchmove', function(e) {
$(this).addClass('moving');
});
$('ul.scroll').bind('touchstart', function(e) {
$(this).removeClass('moving');
});
here are my style rules:
ul.scroll li:hover {
background-color: #D1E8DA;
}
ul.scroll.moving li:hover {
background-color: #EFEFEF;
}