I'm trying to get the arrows for my jCarousel to show only when I mouse over the container (I will have multiple containers in same page)
But I have no idea how to even approach this.
Does anyone have any hints as to how this can be done?
It would be greatly appreciated!
First you have to hide your arrows by default, so in CSS do:
.arrow-class {display:none;}
Then use jquery to show when you hover over the image
$(".image-class").hover(function(){
$(".arrow-class").show(); //this happens when you mouse in
},
function(){
$(".arrow-class").hide(); //this happens when you mouse out
});
Related
I have a slideshow that’s using jQuery cycle2. I’ve included a jsfiddle with a mockup of how it needs to function in my project: https://jsfiddle.net/b1tfx58o/2/
It has navigational links on the side and it has a red small box on the edge that’s supposed to move to align with the nav link. For example if I click “slide 2” than the red box will slide down and stay there like it does for slide 1. If I click either slide 1 or slide 3 than it will move to be in the middle of the border line for that link. You should also be able to click on the red box to make it go to the next slide. I have that part working but not moving it when I click the links. Any help on this would be much appreciated!
The script so far(checking the JSfiddle will make more sense):
var icon = $('.icon');
var slideshow = $('.cycle-slideshow');
icon.on('click', function(e){
e.preventDefault();
slideshow.cycle('next', function(){
});
});
You need to add click listeners to each list link, to run a function that .getBoundingClientRect() of 'this', referring to the link clicked, then use the 'top' value from getBCR to change the top position of your icon element. You'll likely have to combine it with window.scrollY for your project.
See here https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect & good luck
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');
});
Thanks in advance to anyone who can help me with this.
I am trying to have the background of my website darken when the navigation menu drops down.
I can get it to work great when I hover over the menu after it's dropped, but not just by the menu dropping.
I have a div id "darkness" with an opacity of 70%.
Here is my javascript:
$('.dropdown-menu').hover(function(){
$('#darkness').fadeTo(200, 1);
}, function(){
$('#darkness').fadeTo(200, 0, function(){
$(this).hide();
});
});
Greg Fielding Hi there.
A good way to do this would be to use toggleClass and place a wrapper around the content.
Here is the code I use for this sample.
$(document).ready(function(){
$(".collapsed").click(function(){
$("#coverthishere").toggleClass("coverall");
});
});
Here is a working Fiddle of this sample.
You will see I use the menu class collapsed as the trigger here.
And I target the ID coverthishere to add/remove the class .coverall.
This will still allow the menu to be on top and the cover to below the menu but on top of the body.
Hope this helps.
when I click a box, i can drag it around the screen. You can click the folder icon to open up information view, and a scroll bar will appear because there are a lot of text.
Problem: when i use my mouse to scroll the scrollbar, it also drags the boxes as well. How do I make it not move the box when I click the scroll bar to move the bar?
I am using jsPlumb.draggable() to enable dragging.
jsfiddle: http://jsfiddle.net/7PuN3/2/
I would stop/start dragging:
$(function(){
$('#1 .button_wrap').on('click', function(e){
e.stopPropagation();
$(".info").html(newHtml).show();
jsPlumb.setDraggable("1", false)
});});
$(function(){
$("#1").on("click", ".info .ui-icon-close", function(){
$(".info").hide();
jsPlumb.setDraggable("1", true)
});
});
then in your css add this class, not to let the div fade when dragging is disabled:
.ui-state-disabled{opacity: 1;}
Quick look suggests to me, use relative or absolute positioning not fixed on button wrap. On my mobile it seems to work fine though.
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