Rollover delay for Map markers - javascript

We had a developer work-up a piece of javascript for animating markers on a map for us. See http://luniablue.com/clients/endowment for it's current state.
The issue I'm having, is that the rollover is too sensitive and I want there to be a 1sec pause before executing the rollover function. From what I've read, I need to declare a setTimeout() function, but I'm not clear on where to insert that.
I have tried every place that I can see and I've had no luck except in breaking the script. I'm sure it's something stupid simple, but javascript isn't my stong point. Can anyone help me out?
Here's the code:
var firstEntry = true;
var lastOn = '';
function showAllPins() {
if ($('#communities').hasClass('theMouseIsOff')) {
var citiesArr = [];
$('.pin').each( function () {
citiesArr.push(this.id);
$('#'+this.id).hide();
});
var stillHidden = citiesArr.length;
while (stillHidden > 0) {
var a = Math.floor(Math.random()*citiesArr.length);
if ($('#'+citiesArr[a]).is(':hidden')) {
$('#'+citiesArr[a]).show().delay(Math.floor(Math.random()*900)).animate({
opacity: 1,
top: '+=40',
}, Math.floor(Math.random()*900), 'easeOutBounce');
stillHidden--;
}
}
firstEntry = true;
$('#communities').removeClass('theMouseIsOff');
}
}
function showPin(relid){
lastOn = relid;
if ($('#communities').hasClass('theMouseIsOff')) $('#communities').removeClass('theMouseIsOff');
if (firstEntry == true) {
$("#communities div[id!=" + relid + "].pin").animate({
opacity: 0,
top: '-=40',
}, 500);
firstEntry = false;
} else {
$("#communities div[id=" + relid + "].pin").animate({
opacity: 1,
top: '+=40',
}, 500, 'easeOutBounce');
}
}
function removeLastPin() {
$('#communities').addClass('theMouseIsOff');
$("#communities div[id=" + lastOn + "].pin").animate({
opacity: 0,
top: '-=40',
}, 500);
setTimeout('showAllPins()',600);
}
$(document).ready( function () {
$('.pin').mouseenter( function () {
relid = $(this).attr('rel');
showPin(relid);
}).mouseleave( function () { removeLastPin() });
});
$(document).ready(function() {
$('.pin').each(function() {
var selector = '#' + $(this).data('tooltip-id');
Tipped.create(this, $(selector)[0], { skin: 'light', hook: { target: 'topmiddle', tooltip: 'bottomleft'}});
});
});

Where you see:
$(document).ready( function () {
$('.pin').mouseenter( function () {
relid = $(this).attr('rel');
showPin(relid);
}).mouseleave( function () { removeLastPin() });
});
You can change it to:
$(document).ready( function () {
$('.pin').mouseenter( function () {
relid = $(this).attr('rel');
setTimeout(function(){showPin(relid)}, 1000);
}).mouseleave( function () { removeLastPin() });
});
By changing the showPin() function to execute after a timeout, the pin should appear after the specified interval.
Update:
If you would like the function only to run if the mouseleave hasn't occurred during the specified interval, you can clear the interval on mouseleave like this:
$(document).ready(function() {
$('.pin').mouseenter(function() {
relid = $(this).attr('rel');
var awaiting = setTimeout(function() {
showPin(relid)
}, 1000);
}).mouseleave(function() {
removeLastPin();
clearInterval(awaiting);
});
});

Related

fullpagejs pause on hover

js and I want to pause the slider when mouse hover the h1 tag but it doesn't, I know that it's a problem with javascript but I'm not able to make it works
http://jsfiddle.net/2dhkR/405/
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3'],
loopBottom: true,
afterRender: function() {
setInterval(function() {
$.fn.fullpage.moveSlideRight();
}, 3000);
}
});
// the function - set var up just in case
// the timer isn't running yet
var timer = null;
function startSetInterval() {
timer = setInterval(showDiv, 5000);
}
// start function on page load
startSetInterval();
// hover behaviour
function showDiv() {
$('#fullpage h1').hover(function() {
clearInterval(timer);
}, function() {
startSetInterval();
});
}
});
Any help would be appreciated, Thanks
http://jsfiddle.net/2dhkR/407/
var interval = undefined;
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3'],
loopBottom: true,
afterRender: function() {
interval = setInterval(function() {
$.fn.fullpage.moveSlideRight();
}, 100);
}
});
$('#fullpage h1').mouseover(function() {
clearInterval(interval);
interval = null;
})
$('#fullpage h1').mouseout(function() {
interval = setInterval(function() {
$.fn.fullpage.moveSlideRight();
}, 100);
});
}); // end document ready
Very simple way (maybe not the clearest) with a bool:
var go = true;
if (go)$.fn.fullpage.moveSlideRight();
$('#fullpage h1').hover(function() {
go = false;
clearInterval(timer);
}, function() {
go = true;
startSetInterval();
});
Try to use jQuery's hover() on mouseenter, then start the slider again on mouseleave.
$(function() {
var interval = setInterval( slideSwitch, 10000 );
$('#slideshow').hover(function() {
clearInterval(interval);
}, function() {
interval = setInterval( slideSwitch, 10000 );
});
});

Stop and Reset Harvest's Tick Counter jQuery Plugin

Anyone knows how to stop and reset Harvest's Tick counter jQuery plugin? I want to stop counter on specific number and reset to primary start up number.
You can checkout my code here.
HTML Markup:
<span class="tick tick-flip tick-promo">5,000</span>
jQuery Logic:
<script type="text/javascript">
$(document).ready(function () {
startCounter();
});
function startCounter() {
$('.tick').ticker({
delay: 1000,
incremental: 1,
separators: true
});
}
var myCounter = setInterval(function resetCounter() {
var lsCurrentTick = $('.tick').find('.tick-new').text();
if (lsCurrentTick > 5010) {
$.fn.ticker.stop();
}
}, 1000);
</script>
I had to read the code to figure this out. Here is a DEMO
$(startCounter);
function startCounter() {
var tickObj = $('.tick').ticker({
delay: 1000,
incremental: 1,
separators: true
})[0];
setInterval(function () {
if (tickObj.value >= 5002) {
tickObj.stop();
tickObj.value = 5000;
tickObj.start();
}
}, 1000);
}
If you are feeling brave you can mess with Tick.prototype.tick DEMO
function startCounter() {
var tickObj = $('.tick').ticker({
delay: 1000,
incremental: 1,
separators: true
})[0];
tickObj.tick = (function (tick) {
return function () {
var ret = tick.call(tickObj);
if (tickObj.value > 5002) {
tickObj.stop();
tickObj.value = 5000;
tickObj.start();
}
return ret;
};
}(tickObj.tick));
}
Have a reference to the ticker and to reset you would have to do
ticker[0].stop();
ticker[0].value = 5000;
ticker[0].start();
Full example
$(document).ready(function () {
var ticker;
startCounter();
});
function startCounter() {
ticker = $('.tick').ticker({
delay: 1000,
incremental: 1,
separators: true,
});
}
var myCounter = setInterval(function resetCounter() {
var lsCurrentTick = $('.tick').find('.tick-new').text();
if (lsCurrentTick > 5003) {
reset();
}
}, 1000);
function stop(){
ticker[0].stop();
}
function reset(){
ticker[0].stop();
ticker[0].value = 5000;
ticker[0].start();
}
Here is a demo

How to pause a .scrollTop() animation on mouseover? (jsfiddle included)

I am using the following jquery code to create a slow scrolling animation.
http://jsfiddle.net/fhj45f21/
Unfortunately I am having difficulties pausing the animation on mouse over. Could someone please have a look and give me a hint?
function Scroller(y){
this.times = 0;
this.moveInter = 0;
this.backInter = 0;
this.moveBack = function () {
var self = this;
clearInterval(this.moveInter);
this.backInter = setInterval(function () {
self.times -= 5;
y.scrollTop(self.times);
if (self.times == 0) {
return self.startMove();
}
}, 1);
}
this.move = function() {
var self = this;
this.moveInter = setInterval(function () {
self.times++;
y.scrollTop(self.times);
if (self.times == 1200) {
return self.moveBack();
}
}, 50);
}
this.startMove = function() {
this.times = 0;
var self = this;
if (this.backInter != null) {
clearInterval(this.backInter);
}
window.setTimeout(function () {
self.move();
}, 1000);
}
}
jQuery('.textBox').each(function () {
y = jQuery(this);
var scroller = new Scroller(y);
scroller.startMove();
});
Thanks a bunch!
Here you go: http://jsfiddle.net/nxk4vseq/
add an y.hover handler with functions for mousein and mouseout
var scrl=this;
y.hover(function(){
clearInterval(scrl.moveInter);
},function(){
scrl.move();
});

Gallery not working on iPad/Mobile Devices

For some reason my gallery isn't working on Mobile devices including iPad, works fine on desktop. Instead of allowing a user to click through, all images appear stacked. The link to my site. The code is
located here
// scroll gallery init
function initCarousel() {
var isTouchDevice = /MSIE 10.*Touch/.test(navigator.userAgent) || ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch;
jQuery('div.view-gallery').scrollGallery({
mask: 'div.frame',
slider: '>ul',
slides: '>li',
btnPrev: 'a.btn-prev',
btnNext: 'a.btn-next',
pagerLinks: '.pagination li',
circularRotation: false,
autoRotation: false,
switchTime: 3000,
animSpeed: 500,
onInit: function(obj){
obj.resizeFlag = true;
obj.win = jQuery(window);
//obj.win.unbind('resize orientationchange load', obj.onWindowResize);
obj.resizeSlides = function(){
obj.slideOffset = obj.slides.eq(0).outerWidth(true) - obj.slides.eq(0).width();
if(!obj.resizeFlag) obj.slides.css({width: ''});
else obj.slides.css({width: obj.mask.width()/2 - obj.slideOffset});
obj.calculateOffsets();
obj.refreshPosition();
obj.refreshState();
}
if(isTouchDevice){
ResponsiveHelper.addRange({
'..767': {
on: function(){
setTimeout(function(){
obj.resizeFlag = true;
obj.resizeSlides();
obj.win.bind('resize orientationchange load', obj.resizeSlides);
}, 100);
}
},
'768..': {
on: function(){
obj.resizeFlag = false;
obj.win.unbind('resize orientationchange load', obj.resizeSlides);
obj.resizeSlides();
}
}
});
}
}
});
jQuery('.scrollable-gallery').scrollableGallery();
}
/*
* scrollableGallery
*/
;(function($) {
function ScrollableGallery(options) {
this.options = {
scrollableArea: '.frame',
listItems: '.list-items',
btnPrev: '.btn-prev',
btnNext: '.btn-next',
animSpeed: 500
}
$.extend(this.options, options);
this.init();
}
ScrollableGallery.prototype = {
init: function() {
this.findElements()
this.setStructure();
this.addEvents();
},
findElements: function() {
this.holder = $(this.options.holder);
this.scrollableArea = this.holder.find(this.options.scrollableArea);
this.listItems = this.scrollableArea.find(this.options.listItems);
this.items = this.listItems.children();
this.lastItem = this.items.last();
this.btnPrev = this.holder.find(this.options.btnPrev);
this.btnNext = this.holder.find(this.options.btnNext);
this.scrollAPI = new jcf.modules.customscroll({
replaces: this.scrollableArea[0]
});
},
setStructure: function() {
var that = this;
if (that.listItems.css('position') === 'static') {
that.listItems.css('position', 'relative');
}
setTimeout(function() {
that.refreshState();
}, 50);
},
refreshState: function() {
this.listItems.css('width', 32700);
this.listItems.css('width', this.lastItem.position().left + this.lastItem.outerWidth(true) + 1);
this.scrollableArea.add(this.scrollableArea.parent()).css({
width: '',
height: ''
});
this.scrollAPI.refreshState();
},
addEvents: function() {
var that = this;
that.btnPrev.bind('click', function(e) {
e.preventDefault();
that.prevSlide();
});
that.btnNext.bind('click', function(e) {
e.preventDefault();
that.nextSlide();
});
win.bind('resize orientationchange load', function() {
that.refreshState();
});
},
nextSlide: function() {
var that = this;
var curPos = this.scrollableArea.scrollLeft();
var pos;
for (var i = 0; i < that.items.length; i++) {
pos = that.items.eq(i).position().left;
if (pos > curPos) {
that.scrollAnimate(curPos, pos);
break;
}
}
},
prevSlide: function() {
var that = this;
var curPos = this.scrollableArea.scrollLeft();
var pos;
for (var i = that.items.length - 1; i >= 0; i--) {
pos = that.items.eq(i).position().left;
if (pos < curPos) {
that.scrollAnimate(curPos, pos);
break;
}
}
},
scrollAnimate: function(from, to) {
var that = this;
var start = new Date().getTime();
setTimeout(function() {
var now = (new Date().getTime()) - start;
var progress = now / that.options.animSpeed;
var result = (to - from) * progress + from;
that.scrollAPI.hScrollBar.scrollTo(result);
if (progress < 1) {
setTimeout(arguments.callee, 10);
} else {
that.scrollAPI.hScrollBar.scrollTo(to);
}
}, 10);
}
}
var win = $(window);
$.fn.scrollableGallery = function(options) {
return this.each(function() {
if (!$(this).data('ScrollableGallery')) {
$(this).data('ScrollableGallery', new ScrollableGallery($.extend({}, {holder: this}, options)));
}
});
}
}(jQuery));
After looking through your code, there were numerous errors with syntax. I have cleaned them up as best as I could, this should help you out.
http://jsfiddle.net/wvWrY/1/
For example, this area was missing a semicolon (no way to call the findElements function, as JS will simply skip to the next line without a semicolon there.)
init: function() {
this.findElements()
this.setStructure();
this.addEvents();
Run your code through a linter, it will greatly improve your syntax structure and ensure little leave out errors like semicolons and commas and brackets aren't omitted.
EDIT: Ok, having looked at your code it appears this is actually due to the !importants in your allmobile.css file. The width and height are set to max-width: 100% (this breaks it because the way the slider works is to extend the gallery as far off screen as possible) and the height to auto (this breaks it because it allows the images to just keep piling on). Once you remove those for the page, it become much much much better and actually works.

How do I animate on hover or timeout with jquery/javascript?

So I want to animate and display a menu on an element hover or when certain time has passed without a hover.
This I what I've got but it doesn't work.
var didAnimationStart = 0;
$(document).ready(function() {
$('#logoi').hover(startAnimation());
var t = setTimeout("if (didAnimationStart==0) startAnimation();",10000);
});
function startAnimation()
{
didAnimationStart = 1;
$('.linea').animate({
width: "93%",
}, 3000 );
$('.menu-txt').animate({
opacity: "1",
}, 2500 );
}
Try this:
var didAnimationStart = 0;
$(document).ready(function() {
$('#logoi').hover(startAnimation);
var t = setTimeout(function() {
if (didAnimationStart==0) startAnimation();
},10000);
});
function startAnimation()
{
didAnimationStart = 1;
$('.linea').animate({
width: "93%",
}, 3000 );
$('.menu-txt').animate({
opacity: "1",
}, 2500 );
}
I got rid of the () in this line: $('#logoi').hover(startAnimation);

Categories