I've got a minor problem with my jQuery gallery, and I assume it's related to if statement.
You can see how it works here:
http://mojbastovan.com/gallery/lightbox.html
What I want to do is to show description bellow the picture each time I put a mouse over it, however, that doesn't work. Try opening an image and you'll see that when you put your mouse over the bigger image you don't see its description bellow, but when you move the mouse away from image, and put it back over everything works flawlessly.
So what's the problem? I have even added the if statement but it doesn't work, so can anyone help me out with this one?
Oh, and another question, does show, hide and animate functions work choppy for you in Chrome? I've tested it on several browsers, and it seems that Chrome renders those functions bit choppy.
Here's my code:
$(document).ready(function() {
$("#box, #box2, #black, #bgal, #pic, #button").hide();
$("#main img").click(function(){
$("#load").show()
finished=false;
// alert($("#slike").children().size())
broj=$("#main img").index(this)+1;
x=$(this).attr('src');
$.getJSON('baza.json', function(json){
$.each(json.slike, function(i,v){
if (v.t_sr==x){
nsrc=v.sr;
info=v.info;
detail=v.detail;
zamena(nsrc);
//$("#pic img").attr('src',v.sr);
}
if ((broj > 2) && (broj < 9)) {
$("#slike").animate({
left: -152 *(broj-3)
}, 200)
}
else if (broj<3){
$("#slike").animate({
left:0
}, 200)
}
else if (broj>8){
$("#slike").animate({
left: -152 *5
}, 200)
}
});
});
$("#black").show(200, function(){
$("#bgal").show(200);
});
});
$("#slike img").click(function(){
$("#pic").hide(function(){
$("#load").show();
});
// alert($("#slike").children().size())
broj=$("#slike img").index(this)+1;
if ((broj > 2) && (broj < 9)) {
$("#slike").animate({
left: -152 *(broj-3)
}, 200)
}
else if (broj<3){
$("#slike").animate({
left:0
}, 200)
}
else if (broj>8){
$("#slike").animate({
left: -152 *5
}, 200)
}
x=$(this).attr('src');
$.getJSON('baza.json', function(json){
$.each(json.slike, function(i,v){
if (v.t_sr==x){
nsrc=v.sr;
info=v.info;
detail=v.detail;
zamena(nsrc);
//$("#pic img").attr('src',v.sr);
}
});
});
$("#black").show(200, function(){
$("#bgal").show(200);
});
});
$("#pic img").mouseover(function(t){
clearTimeout(t);
$("#info").text(info);
$("#detail").text(detail);
if (finished == false) {
$("#box2").dequeue().stop(true, true).show('slide', {
direction: 'down'
}, 100);
$("#box").dequeue().stop(true, true).show('slide', {
direction: 'down'
}, 100);
}
});
$("#pic img").mouseout(function(){
t=setTimeout("$('#box2, #box').dequeue().stop(true,true).hide('slide', {direction: 'down'}, 100);",50)
})
$("#button").mouseover(function(){
$("#button img").attr("src","images/button.png");
})
$("#button").mouseout(function(){
$("#button img").attr("src","images/buttono.png");
})
$("#button").click(function(){
$("#bgal").hide(100,function(){
$("#black").hide(100);
$("#pic").hide();
});
});
$("#box2").mouseover(function(){
clearTimeout(t);
})
$("#box2").mouseout(function(){
t=setTimeout("$('#box2, #box').dequeue().stop(true,true).hide('slide', {direction: 'down'}, 100);",50)
});
});
//FUNKCIJE
function zamena(nsrc){
$("#pic").hide();
nimg=new Image;
nimg.src=nsrc; // mora podesena promenljiva iz gl programa
nimg.onload = function(){
$("#load").hide()
$("#pic img").attr('src',nimg.src);
$("#pic").show(1);
$("#button").show();
}
}
$("#pic img").mouseover(function(){
clearTimeout(t);
$("#info").text(info);
$("#detail").text(detail);
if (finished == false) {
$("#box2").dequeue().stop(true, true).show('slide', {
direction: 'down'
}, 100);
$("#box").dequeue().stop(true, true).show('slide', {
direction: 'down'
}, 100);
}
})
Have you tried adding a t within the function?
$("#pic img").mouseover(function(t){
Also I believe you need to add a semicolon at the end of the function. Try:
$("#pic img").mouseover(function(t){
clearTimeout(t);
$("#info").text(info);
$("#detail").text(detail);
if (finished == false) {
$("#box2").dequeue().stop(true, true).show('slide', {
direction: 'down'
}, 100);
$("#box").dequeue().stop(true, true).show('slide', {
direction: 'down'
}, 100);
}
});
I think the issue might be that mouseover event is not being triggered when the image slides under it. There are workarounds (tracking the position of the mouse on the document):
Mouseover/mouseenter not fired by browser on animated/moving element
The animation between my FF and Chrome seemed identical.
Related
This code nearly works but has a slight problem which is where I'm hoping for your help.
The Goal: This goal of this script is to call the parseScroll(); function one time when the user wheels using the mouse.
The Problem: The code initially works. However, if you wheel with your finger on the mouse mutiple times within short proximilty,
the parseScroll(); function isn't called. It does this because it
hasn't realized that the previous wheel has ended since because of the
debouncing algorithm in place to keep the function from being called a
thousand times.
(Update): I found this article which seems to address what I'm looking for. Could someone help me understand it and recreate it in pure JavaScript? http://demos111.mootools.net/Mousewheel
Side Note: This question is specific to OS X but I would appreciate it
if a windows user could tell me if it is doing what it is supposed to
do in windows since I don't have a windows machine to test it with.
Here is a replica of the script that is giving me problems.
window.addEventListener('load', function() {
var scrollStatus = {
wheeling: false,
functionCall: false
};
var scrollTimer = false;
window.addEventListener('wheel', function(e) {
scrollStatus.wheeling = true;
if (!scrollStatus.functionCall) {
parseScroll(e);
scrollStatus.functionCall = true;
}
window.clearInterval(scrollTimer);
scrollTimer = window.setTimeout(function() {
scrollStatus.wheeling = false;
scrollStatus.functionCall = false;
}, 500);
});
function parseScroll(e) {
//console.log(scrollStatus.functionCall)
console.log(e.deltaY)
if (e.deltaY > 0) {
console.log('scrolled down')
}
if (e.deltaY < 0) {
console.log('scrolled up')
}
}
});
html,
body {
width: 100%;
height: 100%;
background: #333;
overflow: hidden;
color: #fff;
}
Please wheel on your mouse and open your web inspector console to see resulting behavior.
Please ask questions in the comments and revisit the question as I may change the description as I find better ways to describe the problem.
I would like my solution to be in JavaScript.
The problem seems to be that debounce function, as you figured out. All you do is change the millisecond interval, and that should fix it.
NOTE: I took out the HTML and CSS to make things less cluttered. I also edited the JS a bit to make it shorter - hope that isn't a problem!
window.addEventListener('load', function() {
var scrollStatus = {
wheeling: false,
functionCall: false
};
var scrollTimer = false;
window.addEventListener('wheel', function(e) {
scrollStatus.wheeling = true;
if (!scrollStatus.functionCall) {
//parseScroll here
console.log(e.deltaY)
if (e.deltaY > 0) {
console.log('scrolled down')
}
if (e.deltaY < 0) {
console.log('scrolled up')
}
scrollStatus.functionCall = true;
}
window.clearInterval(scrollTimer);
scrollTimer = window.setTimeout(function() {
scrollStatus.wheeling = false;
scrollStatus.functionCall = false;
}, 50); //set this millisecond to your liking
});
});
Edit, Updated
Try defining handler as named function, calling .removeEventListener after parseScroll called
window.addEventListener('load', function() {
var scrollStatus = {
wheeling: false,
functionCall: false
};
function wheel(e) {
scrollStatus.wheeling = true;
if (!scrollStatus.functionCall) {
scrollStatus.functionCall = true;
parseScroll(e);
window.removeEventListener("wheel", wheel, false)
}
window.clearInterval(scrollTimer);
scrollTimer = window.setTimeout(function() {
scrollStatus.wheeling = false;
scrollStatus.functionCall = false;
}, 500);
}
var scrollTimer = false;
window.addEventListener('wheel', wheel, false);
function parseScroll(e) {
//console.log(scrollStatus.functionCall)
console.log(e.deltaY)
if (e.deltaY > 0) {
console.log('scrolled down')
}
if (e.deltaY < 0) {
console.log('scrolled up')
}
}
});
html,
body {
width: 100%;
height: 100%;
background: #333;
overflow: hidden;
color: #fff;
}
Please wheel on your mouse and open your web inspector console to see resulting behavior.
I need to know the position of an img in real time in order to change its position while is going up or down. The target is animate it to the bottom 40px at the beginning and animate it to the top later.
My code up to now is the following:
var pos = $('header img').offset().top;
if( pos == 0) {
$('header img').animate({"top": "+=40px"}, 6000);
}else{
$('header img').animate({"top": "-=40px"}, 6000);
}
Any idea?
You can use progress option to detect the position live. I also made some changes so you don't have to use so much duplicated code:
$('#startAnimation').on('click', function () {
var pos = $('header #img').offset().top;
if (pos == 0) {
doAnimate("+=40px");
} else {
doAnimate("-=40px");
}
});
function doAnimate(to) {
$('header #img').animate({
top: to
}, {
duration: 6000,
progress: function (promise) {
console.log('offset top: ' + $('header #img').offset().top);
}
});
}
Fiddle: http://jsfiddle.net/z3jk1g0z/
You could also change it to use start and complete options in animate. More information: http://api.jquery.com/animate/
EDIT: wrong Fiddle
I've followed a tutorial to add to my site a fixed header after scroll and the logo of the site appear on the fixed part.
That works, the code:
var nav_container = $(".nav-container");
var nav = $("nav");
var logo = $("logo");
nav_container.waypoint({
handler: function(event, direction) {
nav.toggleClass('sticky', direction=='down');
logo.toggleClass('logo_sticky', direction=='down');
if (direction == 'down')
nav_container.css({ 'height' : nav.outerHeight() });
else
nav_container.css({ 'height' : 'auto' });
});
});
How can I add a delay with fade-in to the logo, so it doesn't appear suddenly?
Versions I've tried:
logo.toggleClass('logo_sticky', direction=='down').delay(500).fadeIn('slow');
logo.delay(500).toggleClass('logo_sticky', direction=='down').fadeIn('slow');
(before the toggleClass)
logo.delay(500).fadeIn('slow')
logo.toggleClass('logo_sticky', direction=='down');
(after the toggleClass)
logo.toggleClass('logo_sticky', direction=='down');
logo.delay(500).fadeIn('slow')
To be honest I've tried every single combination that came to my mind lol
new version that I'm trying that don't work either:
$(function() {
var nav_container = $(".nav-container");
var nav = $("nav");
var logo = $("logo");
$.waypoints.settings.scrollThrottle = 30;
nav_container.waypoint({
handler: function(event, direction) {
if (direction == 'down'){
nav_container.css({ 'height':nav.outerHeight() });
nav.addClass('sticky', direction=='down').stop();
logo.css({"visibility":"visible"}).fadeIn("slow");
}
else{
nav_container.css({ 'height':'auto' });
nav.removeClass('sticky', direction=='down').stop();
logo.css({"visibility":"hidden"});
}
},
offset: function() {
return (0);
}
});
});
but if I instead of fadeIn put toggle it animes the change but in a bad direction (the img appear and then toggle to disapear)
thanks
http://api.jquery.com/delay/
http://api.jquery.com/fadein/
use $(yourLogoSelector).delay(delayAmount).fadeIn();
here is proof that it works http://jsfiddle.net/6d8cf/
It seems like the fadeIn only works if you don't have the css the property visibility: hidden, but display:none...
you can do a element.hide(); and then element.fadeIn().
since the hide() changes the layout of the page because it eliminates the item from it this is the solution I came across:
$(function() {
// Do our DOM lookups beforehand
var nav_container = $(".nav-container");
var nav = $("nav");
var logo = $("logo");
$.waypoints.settings.scrollThrottle = 30;
nav_container.waypoint({
handler: function(event, direction) {
if (direction == 'down'){
nav_container.css({ 'height':nav.outerHeight() });
nav.addClass('sticky', direction=='down').stop();
logo.css('opacity',0).animate({opacity:1}, 1000);
}
else{
nav_container.css({ 'height':'auto' });
nav.removeClass('sticky', direction=='down').stop();
logo.css('opacity',1).animate({opacity:0}, 1000);
}
},
offset: function() {
return (0);
}
});
});
This is my code:
$("#header").touchwipe({
// if($('#cont-wide').css('left') == '-100%' ){
wipeLeft: function() {
$('#cont-wide').animate({
left: '-201%'
}, 500 );
$('#nav-filters').fadeOut(200);
$('#nav-map-l').delay(300).fadeIn(200);
$('#one .col-inner').delay(500).hide(0);
$('#three .col-inner').css('display','block');
setTimeout(function() {
window.scrollTo(0, 1) },
100);
},
wipeRight: function() {
$('#cont-wide').animate({
left: '1%'
}, 500 );
$('#nav-filters').fadeOut(200);
$('#nav-map-r').delay(300).fadeIn(200);
$('#one .col-inner').css('display','block');
setTimeout(function() {
window.scrollTo(0, 1) },
100);
},
min_move_x: 50,
min_move_y: 50,
preventDefaultEvents: false
// }
});
As it currently is it works fine. However when I remove the comments to add the conditional statement, the code and all my other JavaScript stops working. Thanks
You cannot put the if statement there ...
you could do this :
wipeLeft: function() {
if($('#cont-wide').css('left') == '-100%' ){
// the rest
}
},
wipeRight: function() {
if($('#cont-wide').css('left') == '-100%' ){
// the rest
}
}
Note - the css function my not produce the result you are expecting : http://jsfiddle.net/VccAn/ using a value of 10% for left in my example returns auto on Chrome ! See this question / answer for discussions related to this problem : jQuery .css("left") returns "auto" instead of actual value in Chrome
You can't just shove in an if statement in the middle of a statement.
The best solution would be creating your options object before calling touchwipe():
var options = {};
if($('#cont-wide').css('left') == '-100%') {
options.wipeLeft = function() {
};
options.wipeRight = function() {
};
}
$("#header").touchwipe(options);
Note that the if condition is only evaluated once. If you want it to be evaluated on every event, #ManseUK's answer is the way to go.
Been playing around a bit with JavaScript/JQuery, and made a "shy" button, instead its just a p-tag with a word. It works ok, except the bool goDown doesn't seem to change, so it always goes down. What's wrong with my code?
Also JavaScript debugging in VS2010 doesn't seem to be working very good, is this a known problem?
Thanks in advance!
if (typeof naarBeneden == 'undefined') {
var goDown = new Boolean(true);
}
$(document).ready(function () {
$(".moveme").animate({ "left": "+=500px"
}, 2000);
$(".moveme").hover(move());
});
function move() {
if (goDown) {
$(".moveme").hover(function () {
$(this).animate({ "top": "+=50px" }, 0)
});
goDown = false;
}
else {
$(".moveme").hover(function () {
$(this).animate({ "top": "-=50px" }, 0)
});
goDown = true;
}
}
The main issue is here:
$(".moveme").hover(move());
You're calling move() not using move as a handler, you need it without the parenthesis, like this:
$(".moveme").hover(move);
Even doing that though, you're assigning a new .hover() handler on each hover event, and I doubt that's really what you're after. It's hard to tell exactly what you're after, but I think this is it:
$(function () {
var goDown = typeof naarBeneden != 'undefined';
$(".moveme").animate({ "left": "+=500px" }, 2000);
.hover(function () {
$(this).animate({ "top": goDown ? "+=50px" : "-=50px" }, 0);
}, function() {
$(this).animate({ "top": !goDown ? "+=50px" : "-=50px" }, 0);
});
});
This assigns an up then down animation if goDown is true when you hover/leave the element, and it does the reverse if goDown is false.