I have some code that is running a JavaScript image flip, I'm new to JS and I need the image to flip when hovered and and hovered off, if I put it to onhover it flips everytime the mouse is moved, not when the mouse is off.
Here is the code:
$(document).ready(function () {
setInterval(function () {
$('.sponsorFlip').load('script.js');
$('.sponsorFlip').load('jquery.flip.min.js');
}, 30000);
$('.sponsorFlip').one("mouseenter mouseleave", function () {
var elem = $(this);
if (elem.data('flipped')) {
elem.revertFlip();
elem.data('flipped', false)
}
else {
elem.flip({
direction: 'rl',
speed: 250,
onBefore: function () {
elem.html(elem.siblings('.sponsorData').html());
}
});
elem.data('flipped', true);
}
});
$('.sponsorFlip').bind("click", function () {
var elem = $(this);
if (elem.data('flipped')) {
elem.revertFlip();
elem.data('flipped', false)
}
else {
elem.flip({
direction: 'rl',
speed: 250,
onBefore: function () {
elem.html(elem.siblings('.sponsorData').html());
}
});
elem.data('flipped', true);
}
});
});
Make use of classes. ;) Preview - http://jsfiddle.net/TJZmM/3/
$('div').bind('mouseover mouseout', function(){
var self = $(this);
if(self.toggleClass('flipped').hasClass('flipped')) {
self.html('rl');
}
else {
self.html('lr');
}
});
Related
I would like to add a listener that listens for a click on 'html' and then closes the dropdown. It only ever works without the hide function by puttind css display to none. Nothing seems to work!!
Any ideas?
// Drop Down Menu
EZEMAIN.dropDown = {
slideTime: 200,
dropDown: '.dn-drop-down',
arrow: '.dn-menu-arrow',
arrowUp: 'dn-arrow-up',
bindElms: function () {
this.btn = $('.dn-dropdown-btn');
},
html: function(e) {
},
showHide: function (e) {
var self = EZEMAIN.dropDown,
dropDown = $(this).find(self.dropDown),
arrow = $(this).find(self.arrow),
openedDropDowns = $(self.dropDown).is(':visible');
if ($(e.target).parents(self.dropDown).length == 0)
e.preventDefault();
if (dropDown.is(':hidden')) {
if (openedDropDowns) self.hide();
dropDown.slideDown(self.slideTime, function () {
arrow.addClass(self.arrowUp);
});
setTimeout(function () {
$('body').on('click', self.hide);
}, 100);
}
else
self.hide();
},
hide: function () {
var self = EZEMAIN.dropDown;
$(self.dropDown).slideUp(self.slideTime, function () {
$(self.arrow).filter(function () { return $(this).siblings('.dn-basket-btn').length == 0; }).removeClass(self.arrowUp);
});
$("html").click(function () {
//$("#dn-header-basket").css("display", "none");
$(EZEMAIN.arrow).filter(function () { return $(this).siblings('.dn-menu-arrow').length == 0; }).removeClass(self.arrowUp);
});
$('body').off('click', self.hide);
},
init: function () {
this.bindElms();
this.btn.click(this.showHide);
}
};
We've been implementing a lightbox into our wordpress theme and it works perfectly on our development server which is on the same server as our live site and the build is exactly the same to my knowledge as the build for the development site was just taken from a live site backup, but for some reason on some pages i am getting the following error but on others i'm not as if the JS isn't getting loaded before this JS file but i don't understand why it works perfectly every time on the dev server:
Uncaught TypeError: Cannot read property 'imageUrl' of undefined
jQuery(document).ready(function( $ ) {
var WHLightbox = {
settings: {
overlay: $('.portfolio-tile--overlay'),
imageCell: $('.cell-image, .portfolio-tile--image')
},
data: {
images: []
},
init: function() {
this.events();
this.buildImageData();
},
events: function() {
var self = this;
this.settings.imageCell.on('click tap', function(e) {
e.preventDefault();
e.stopPropagation();
// set up the overlay
//self._positionOverlay();
self._openOverlay();
self._preventScrolling();
// create the image slide
self._createImageSlide($(this));
});
$('.portfolio-tile--overlay--close').on('click tap', function(e) {
e.preventDefault();
e.stopPropagation();
self._closeOverlay();
});
$('.portfolio-tile--overlay--controls--prev, .portfolio-tile--overlay--controls--next').on('click tap', function(e) {
e.preventDefault();
e.stopPropagation();
});
$('.portfolio-tile--overlay--controls--prev').on('click tap', function(e) {
e.preventDefault();
e.stopPropagation();
self.showPrev();
});
$('.portfolio-tile--overlay--controls--next, .portfolio-tile--overlay').on('click tap', function(e) {
e.preventDefault();
e.stopPropagation();
self.showNext();
});
},
// public functions
showPrev: function() {
var index = this.currentImageIndex();
if(index === 0) {
index = this.data.images.length;
}
this._createImageSlide(false, index-1);
},
showNext: function() {
var index = this.currentImageIndex();
if(index === this.data.images.length-1) {
// set to -1 because it adds 1 in the _createImageSlide call
index = -1;
}
this._createImageSlide(false, index+1);
},
currentImageIndex: function() {
if(this.settings.overlay.hasClass('open')) {
var imageUrl = $('.portfolio-tile--main-image').attr('src');
for(var i=0; i<this.data.images.length; i++) {
if(this.data.images[i].imageUrl === imageUrl) {
return i;
}
}
} else {
return false;
}
},
// image data
buildImageData: function() {
var self = this,
i = 0;
this.settings.imageCell.each(function() {
self.data.images[i] = {
imageUrl: self._getImagePath($(this))
}
i++;
});
},
// slide
_createImageSlide: function($el, index) {
var imagePath;
if(!$el) {
imagePath = this.data.images[index].imageUrl;
} else {
imagePath = this._getImagePath($el);
}
this.settings.overlay.find('.portfolio-tile--main-image').attr('src', imagePath);
},
_getImagePath: function($el) {
var imagePath,
spanEl = $el.find('span.js-cell-image-background'),
imgEl = $el.find('img.cell-image__image');
if(spanEl.length) {
imagePath = spanEl.css('backgroundImage');
imagePath = imagePath.replace(/url\(["]*/,'').replace(/["]*\)/,'');
} else if(imgEl.length) {
imagePath = imgEl.attr('src');
}
return imagePath;
},
// overlay
//_positionOverlay: function() {
// this.settings.overlay.css({
// position the overlay to current scroll position
// top: $(window).scrollTop()
// });
//},
_openOverlay: function() {
this.settings.overlay.addClass('open');
},
_preventScrolling: function() {
$('html, body').addClass('no-scroll');
},
_reInitScrolling: function() {
$('html, body').removeClass('no-scroll');
},
_closeOverlay: function() {
this.settings.overlay.removeClass('open');
this._reInitScrolling();
}
};
WHLightbox.init();
});
I've got an effect I want triggered one second after page load, then subsequently every 3 seconds (on repeat). When the user hovers over an element (#hover), the effect pauses (temporarily). When they stop hovering over it, the effect resumes after 2 seconds.
I'm having a lot of trouble with overlapping sounds and animations, particularly when I hover and then unhover over the element quickly. What's wrong with my code? (Fiddle)
var test;
function hoverTest(arg) {
if (arg == 'stop') {
clearTimeout(test);
}
if (arg == 'start') {
playSound();
$('#hover').transition({
opacity: 0,
duration: 1000,
complete: function() {
$('#hover').transition({
opacity: 1,
duration: 1000,
complete: function() {
test = setTimeout(function() { hoverTest('start'); }, 3000);
}
});
}
});
}
}
$('#hover').hover(function() {
hoverTest('stop');
}, function() {
setTimeout(function() {
hoverTest('start');
}, 2000);
});
function playSound() {
var sound = new Audio('sound.mp3');
sound.play();
}
setTimeout(function() {
hoverTest('start');
}, 1000);
copy paste this in a file and run that html file.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style>
#hover {
width: 100px;
height: 100px;
background: red;
}
</style>
<div id="hover"></div>
<script type="text/javascript">
var interval = null;
var hoverTest = function(method){
playSound();
$("#hover").fadeOut(1000, function() {
$(this).fadeIn(1000);
});
}
var playSound =function() {
var sound = new Audio('http://www.sounddogs.com/previews/25/mp3/306470_SOUNDDOGS__an.mp3');
sound.play();
}
$(document).ready(function(){
interval = setInterval('hoverTest()',3000);
$("#hover").mouseenter(function(){
clearInterval(interval);
}).mouseleave(function(){
interval = setInterval('hoverTest()',3000);
})
})
</script>
Try adding "clearTimeout(test);" the first thing in the hoverTest function.
eg:
var test;
function hoverTest(arg) {
clearTimeout(test);
if (arg == 'stop') {
clearTimeout(test);
}
if (arg == 'start') {
playSound();
$('#hover').transition({
opacity: 0,
duration: 1000,
complete: function() {
$('#hover').transition({
opacity: 1,
duration: 1000,
complete: function() {
test = setTimeout(function() { hoverTest('start'); }, 3000);
}
});
}
});
}
}
Try this: (clear the timer before starting)
$('#hover').hover(function() {
hoverTest('stop');
}, function() {
clearTimeout(test);
setTimeout(function() {
hoverTest('start');
}, 2000);
});
Does any one know why this is not working?
http://jsfiddle.net/jonevar/2Z2NQ/5/
Here is the whole code:
function ag_alert(message) {
event.preventDefault();
//SetTimeout in case didn't close manualy
var timer = setTimeout(cls_message, 5000),
cur_url = window.location.href;
//Check if its already on
if (! $('.ag_alert_wrapper').is(':visible') ) {
//Set the language
(cur_url.indexOf('/en/') >= 0) ? cls_txt = "close" : cls_txt = "閉じる" ;
$('<div class="ag_mess ag_alert_wrapper"></div><div class="ag_mess ag_alert_wrapper_close">'+ cls_txt +'</div>')
.prependTo('body');
$('.ag_alert_wrapper')
.append('<p>'+ message +'</p>')
.animate({top : 0}, 200, function() {
$('.ag_alert_wrapper_close')
.animate({top : 90}, 200)
.on({
mouseenter : function () {
$(this).animate({
top : 100
}, 200);
},
mouseleave : function () {
$(this).animate({
top : 90
}, 200);
},
click : function () {
cls_message();
}
});
});
//Setups ESC key to close message
$(document).keydown(function(e) {
if (e.keyCode === 27) {
cls_message();
}
});
} else {
//if Alert is already visible
$('.ag_alert_wrapper')
.children('p').html(message)
.end()
.effect("highlight", {
color : '#FF0'
}, 1000);
clearTimeout(timer);
}
}
function cls_message() {
$('.ag_mess').animate({
top : -200
}, 200, function () {
$('.ag_mess').remove();
});
}
This seems to be working fine, test code (using jQuery, but that's not changing the conclusion):
html
<div id="msgs"></div>
js
function other_function() {
$('#msgs').append('other ');
}
function do_something(data) {
var timer = setTimeout(other_function, 500);
if (data === "condition") {
$('#msgs').append('hi ');
} else {
$('#msgs').append('clearing ');
clearTimeout(timer);
}
}
do_something('yay');
do_something('condition');
Outputs this to the div:
clearing hi other
as expected. Live example:
http://jsfiddle.net/mCdxV/
Hope this helps.
HTML Structure:
<a class="fadeThis" id="paperoff" href="#"><span id="paperon" class="hover">News</span></a>
JAVASCRIPT:
$('.fadeThis > .hover').empty();
$('.fadeThis').each(function () {
var text = $(this).text();
$(this).append(''+text+'');
var $span = $('> span.hover', this).css('opacity', 0);
$(this).hover(function () {
$span.stop().fadeTo(500, 1);
}, function () {
$span.stop().fadeTo(500, 0);
}).click (function () {
// HERE SOMETHING THAT TELLS TO NOT FADE BACK THE SPAN (ONLY FOR THE CLICKED DIV).
});
});
Your question is not very clear, but do you want someting like this?
var fadeBlock = false;
$(this).hover(function () {
$span.stop().fadeTo(500, 1);
}, function () {
if (!fadeBlock) {
$span.stop().fadeTo(500, 0);
} else { fadeBlock = false;}
}).click (function () {
fadeBlock = true;
});