I'm using the fancybox plugin without image resizing by window height. The gallery images are the right resolution with a height about 800-2000px. So user should scroll every picture in the stack. To make it easier I decided to insert a scrollToTop button. But it didn't work, because fancybox somehow blocks the scroll event. I just tried recreating the scroll event by doing:
$(window).scroll(function() {
alert('Scroll');
});
But it didn't work either.
I guess you should initialize your scrollToTop button within a fancybox (afterShow) callback like :
afterShow: function() {
$("#scrollButtonID").on("click", function() {
$(".fancybox-overlay").scrollTop(0); // or whatever value
});
}
Notice that instead of targeting $(window) we are actually moving to the top of the fancybox overlay $(".fancybox-overlay")
See this jsfiddle
In my DEMO I set the button as an appended element of the fancybox overlay but you could set it as the title of fancybox too. For a smoother transition you could animate the scroll event, but that is cosmetic ;)
You can also use vanilla javascript for this:
window.onscroll = function () {
alert('Scroll');
}
Try binding with .on()?
$(document).on('scroll', function() {
alert('Scroll....');
});
FancyBox - jQuery Plugin
Version: 1.3.4 (11/11/2010)
line from 1073 to 1083, i disable part of code
/*if ($.fn.mousewheel) {
wrap.bind('mousewheel.fb', function(e, delta) {
if (busy) {
e.preventDefault();
} else if ($(e.target).get(0).clientHeight == 0 || $(e.target).get(0).scrollHeight === $(e.target).get(0).clientHeight) {
e.preventDefault();
$.fancybox[ delta > 0 ? 'prev' : 'next']();
}
});
}*/
Related
I use this code to make bootstrap dropdown show when mouse hover
var bMobile; // true if in mobile mode
// Initiate event handlers
function init() {
"use strict";
// .navbar-toggle is only visible in mobile mode
bMobile = $('.navbar-toggle').is(':visible');
var oMenus = $('.navbar-nav .dropdown'),
nTimer;
if (bMobile) {
// Disable hover events for mobile
oMenus.off();
} else {
oMenus.on({
'mouseenter touchstart': function(){
event.preventDefault();
clearTimeout(nTimer);
oMenus.removeClass('open');
$(this).addClass('open');
},
'mouseleave': function() {
nTimer = setTimeout(function() {
oMenus.removeClass('open');
}, 500);
}
});
}
}
$(document).ready(function() {
// Your other code to run on DOM ready...
init();
});
$(window).resize(init);
I use this code to remove hover effect from small screens and work on big screens
How can make this code slide animation ?
and if there is code better than this code please add it in comment
I am bad in English, sorry :)
I recommend using the http://daneden.github.io/animate.css/ project, and adding the css class you want, i'll try to throw together a quick example
Here's a quick and dirty demo
$($(this).find(".dropdown-menu")[0]).addClass('bounceInUp animated');
http://jsfiddle.net/L8nz8zk2/1/
you would want to use something like this to handle the mouse events (no need for the $.on()):
http://api.jquery.com/hover/
so your code would look something like this.
$('CSS SELECTOR OF THE ITEM TO HOVER OVER').hover(function(){
$('CSS SELECTOR OF THE ITEM THAT NEEDS TO SLIDE DOWN').slideDown();
},function(){
$('CSS SELECTOR OF THE ITEM THAT NEEDS TO SLIDE UP').slideUp();
});
The Jquery animation of slideDown() and slideUp() is what you're looking for, and this combined with the .hover() jquery event handler should be able to give you what you need.
you can lose the .on() calls.
I have a dropdown navigation where I want to slide up and down a dropdown which works fine, what I've found however is that if I hover over the link quickly the nav links dont disappear, I've tried adding stop(true,true) etc but with no success. Can anyone advise on how I can resolve this?
Fiddle: http://jsfiddle.net/9QdhN/3/
JS
mouseleave: function() {
if( !isActive ) {
inner.stop(true,true).fadeOut('fast', function(){
if (topLevelLinks.children('.sub-nav').filter(":visible").length === 0) {
subNav.stop(true,true).slideUp();
}
});
}
}
});
You don't need the isActive variable, jQuery does this for you in the stop() method.
Here's the fixed code: http://jsfiddle.net/9QdhN/7/
This question already has an answer here:
Alternative Jquery mouse event
(1 answer)
Closed 9 years ago.
Alright so the code below works fine if I click outside the #nav div. I was asking if it is possible to just move the mouse away from the #nav div to make it disappear. I don't want to 'click' to hide the div. Example
$(document).mouseup(function (e)
{
var container = $("#nav");
if (container.has(e.target).length === 0)
{
container.hide();
}
});
I tried the mouseenter and mouseleav, but they don't work. Example
Any help will be appreciated :)
Try this:
$(document).ready(function(){
$("#logo").mouseover(function() { $("#nav").fadeIn("slow"); });
$("#nav").mouseleave(function (e){
$(this).fadeOut("slow");
});
});
The margin between your nav div and logo div is causing a problem. When the user directs their mouse between those areas, and you've set a mouseout event strictly on the nav div, it causes the window to close. The solution is to add a small timeout to allow the user time to navigate through the menu before closing it. This will avoid other cases in which the user accidentally mouses to the edge of the navigation and is maybe a pixel or two outside of the div.
Here is the jQuery I used to solve this problem:
$('#nav').mouseover(function () {
clearTimeout($.data(this, 'mouseOutTimer'));
});
$('#nav').mouseout(function () {
clearTimeout($.data(this, 'mouseOutTimer'));
$.data(this, 'mouseOutTimer', setTimeout(function () {
$("#nav").hide();
}, 700));
});
http://jsfiddle.net/HyUEu/
you need a mouseleave on the Nav i have added it for you check the link below
$(document).ready(function(){
$("#logo").mouseenter(function() { $("#nav").fadeIn("slow"); });
});
$("#nav").mouseleave(function (e)
{
$("#nav").fadeOut('fast');
});
http://jsfiddle.net/sKpwV/6/
if you want to make a dropdown menu i sugget you take a look at the link here: http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ it does a dropdown with Pure CSS, so it will also work when the user don't have Javascript enabled.
I use the following script to prevent the first tap on a link:
$(document).ready(function () {
$('#container a').bind("touchstart",function(e){
var $link_id = $(this).attr('id');
if ($(this).parent().parent().data('clicked') == $link_id) {
return true;
} else {
e.preventDefault();
}
});
});
Because these links [#container a] are covering the whole screen I am not able to scroll on touch devices.
Is there a way to keep the scrolling behavior working if the user scrolls (touchmove / swipe / drag / …)?
Maybe there is another way / script to get the effect I want without disabling scrolling…?
I found another solution to this problem by using quo.js this library will handle tap event without effecting on scrolling functionality
the code will be like this
$(document).ready(function () {
$$('#container a').tap(function(){
//your function here
});
});
I want to show and hide a piece of code if i scroll and the page is for example half way, i have tried to use window scroll but this doesnt works(no errors, clean code, different browsers, different jQuery versions), but this doesn't trigger anything, so i am looking for a better way to show and hide a div if i scrolldown.
used this to trigger an event(not working)
$(window).scroll(function(){
alert('works')
});
Try using the window.onload function (that's how they use it in jQuery examples):
window.onload = (function(){
$(window).scroll(function () {
if( $(window).scrollTop() > 200 ) {
// Display something
}
})
})