I have a jquery animation that toggles the width of a div. Within the div, I have a span that has a link in it. Every time i click the link, instead of being directed to the link url the div's with is toggled instead.
I have a simple demo here: http://jsfiddle.net/ewWFc/
if you expand the orange block and hover over the bottom part, there should be a more link. How do I change my code so the the more link will take me to the corresponding url and take priority over the toggle effect?
Add a click handler that stops the click from bubbling up to the containing div:
$('#slider .more a').click(function(e){
e.stopPropagation();
});
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 am using mCustomScrollbar script for custom scroll bar effect now I want to scroll page on specific class element. Class position is not fixed, It can be top or bottom.
In my example I have one anchor link and I want to page scroll to active class. Page will scroll only when user click to anchor.
Here is my JS Code:
$( "#scroll" ).click(function() {
//scroll page to active class
});
$("#content_1").mCustomScrollbar({
scrollButtons: {
enable: true
}
});
Here is my JSFiddle: http://goo.gl/6dpT7l
Note: Scroll position is not fixed. It can be anywhere UP/Down.
Any Idea? How to do this?
Thanks.
In your fiddle, it seems to be as simple as scrolling to the paragraph in question's position().top attribute. Replace your alert with this:
$("#content_1").mCustomScrollbar('scrollTo', $('.active').position().top);
I have a div called "navbar_menu". When clicked I want the div "nav_overlay" to fade in and then when clicked again, I want it to fade back to not being visible.
At the moment I have set the div 'nav_overlay" to 'display: none' and then using the following javascript, it shows itself when "navbar_menu" is clicked.
$(document).ready(function(){
$(".navbar_menu").click(function(){
$("nav ul").toggleClass("showing");
$("#nav_overlay").fadeTo("fast", 0.8);
});
});
The tag "nav ul" is just a menu that is sliding when "navbar_menu" is clicked. The point is to have an overlay covering the content when the menu slides out and then when the menu slides in again, the overlay disappears.
I'm thinking that I need an if statement testing whether the div is visible or not? I'm just wonering if there is anyone who can help with the best solution for this.
Thanks very much.
Something like this should work:
$("#nav_overlay").fadeToggle()
See the documentation for the options.
PS: I assuming that the overlay has necessary styles to cover the whole page with position: fixed or something.
if( $('#your-element').is(":visible") ){
// #your-element is visible.
} else {
// #your-element is not visible
}
That should test if something is visible or not but a link or jsfiddle to your html as well would be helpful.
Assuming CSS class 'showing' only makes the element appear. You can use the .toggle function to make it hide and reappear on its own.
http://api.jquery.com/toggle/
http://api.jquery.com/fadetoggle/
// Will automatically hide/display element
$("nav ul").toggle();
// Same as toggle but with fade effect
$("#nav_overlay").fadeToggle("fast");
I created a fiddle
jsfiddle.net/ExaLM/1
Now the sub navigation bar is closing on mouse leave event.
But if I hover on sub link bar then also sub link bar closes.
So what changes should I make in my code for that?
code is
$(document).ready(function(){
$("#main-nav li a.main-link").hover(function(){
$("#main-nav li a.main-link").removeClass("active");
$(this).addClass("active");
$("#sub-link-bar").animate({
height: "40px"
});
$(".sub-links").hide();
$(this).siblings(".sub-links").fadeIn();
});
$("#main-nav li a").mouseleave(function(){
$("#main-nav li a.main-link").removeClass("active");
$(".sub-links").fadeOut();
$("#sub-link-bar").animate({
height: "10px"
});
});
});
I updated your Fiddle
Basically, what you want is to avoid hiding the elements when the mouseleave event is fired. To do so, you could bind on both the a.main-link and its <ul> element, or you can do it like I did: bind your jQuery events on the whole <li> so mouseleave is not triggered until you leave both the main link or the sub-links, as it is contained in the whole <li>. I had to change hover to mouseenter to avoid it being fired repeatedly.
I also had to add some .stop() to avoid the animation repeating entirely every time the mouse gets out of the menu and bounce a few times before finally stopping. You should also remove the .hide() because sometimes when moving the mouse fast, the elements are still visible when they are hidden and it makes it look jerky.
I hope this is enough for you to figure out how to fix your menu.
I have lists inside a div called header which I want to expand the lists on hover over each list, but I want all the lists which have been hovered over to stay open until the mouse is moved out of the header div. So far I have fadeIn/fadeOut for each list individually or I can get each list to fadeIn and stay open but not fadeOut whenever I move out of the div.
here is the code that I am using: http://jsfiddle.net/jTCdg/11/
The line commented out in the javascript is what changes between all the lists staying visible or the list fadeIn/fadeOut on hover.
This is my first time using javascript so help would be greatly appreciated. thanks
jQuery hover is a shortcut for the mouseenter and mouseleave event handlers. You can define both separately.
$(document).ready(function() {
$("#header ul").mouseenter(function() {
$(this).find("li").fadeIn();
});
$("#header").mouseleave (function() {
$(this).find("li").fadeOut();
});
});
Also see the updated jsfiddle.