We Keep Coding

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 );
});
});

Dynamic dojo/on event

I have a scenario where I want to generalize a page scrolling event on button click using dojo. I haven't been able to make a breakthrough for quite sometime. I'm a DOJO beginner, would like some pointers to get a good solution. I have a fiddle:
http://jsfiddle.net/sacnayak/Ej39D/3/
Pasting the code in again for first reference:
require(["dojo/fx", "dojox/fx/scroll", "dojo/dom", "dojo/dom-style", "dojo/on", "dojo/domReady!", "dojo/window", "dojo/dom-geometry", "dojo/_base/fx", "dojo/Deferred", "dojo/query"],
function (coreFx, easing, dom, style, on, ready, win, domGeometry, fx, Deferred, query) {
function asyncProcess() {
var deferred = new Deferred();
setTimeout(function () {
deferred.resolve("success");
}, 500);
return deferred.promise;
}
var currentActiveDomButton = query("#screens .screen.active .card-footer-button")[0];
console.log(currentActiveDomButton);
on(dom.byId(currentActiveDomButton.id), "click", function () {
var currentActiveDomNode = query("#screens .screen.active")[0];
console.log(currentActiveDomNode);
var screens = query("#screens .screen");
var nextActiveDiv;
for (i = 0; i < screens.length; i++) {
if (dojo.attr(currentActiveDomNode, "id") != dojo.attr(screens[i], "id")) {
nextActiveDiv = screens[i];
console.log(nextActiveDiv);
break;
}
}
fx.animateProperty({
node: currentActiveDomNode.id,
duration: 500,
properties: {
opacity: {
start: '1',
end: '0.5'
}
}
}).play();
var process = asyncProcess();
process.then(function () {
style.set(nextActiveDiv.id, "display", "block");
//dojo.byId(currentActiveDomButton.id).style.display = 'none';
dojox.fx.smoothScroll({
node: nextActiveDiv.id,
win: window
}).play();
require(["dojo/dom-class"], function (domClass) {
domClass.remove(currentActiveDomNode.id, "active");
domClass.add(currentActiveDomNode.id, "visited");
domClass.add(nextActiveDiv.id, "active");
currentActiveDomButton = query("#screens .screen.active .card-footer-button")[0];
console.log(currentActiveDomButton.id);
});
});
});
});

Was able to fix this. Used a dojo.forEach and set up a event listener for every button.
Here's the fiddle:
http://jsfiddle.net/sacnayak/Ej39D/8/
require(["dojo/fx", "dojox/fx/scroll", "dojo/dom", "dojo/dom-style", "dojo/on", "dojo/domReady!", "dojo/window", "dojo/dom-geometry", "dojo/_base/fx", "dojo/Deferred", "dojo/query", "dojo/dom-class", "dojo/NodeList-traverse"],
function (coreFx, easing, dom, style, on, ready, win, domGeometry, fx, Deferred, query, domClass) {
function asyncProcess() {
var deferred = new Deferred();
setTimeout(function () {
deferred.resolve("success");
}, 500);
return deferred.promise;
}
query(".card-footer-button").forEach(function (buttonNode) {
on(dom.byId(buttonNode.id), "click", function () {
//fetch the current active screen
var currentActiveDomNode = query("#screens .screen.active")[0];
var screens = query("#screens .screen");
var nextActiveDiv;
if (buttonNode.value == "Next") {
for (i = 0; i < screens.length; i++) {
if (dojo.attr(currentActiveDomNode, "id") != dojo.attr(screens[i], "id")) {
if (!domClass.contains(screens[i].id, "visited")) {
nextActiveDiv = screens[i];
break;
}
}
}
} else if (buttonNode.value == "Edit") {
nextActiveDiv = query("#" + buttonNode.id).parent(".screen")[0];
/*fx.animateProperty({
node: nextActiveDiv.id,
duration: 500,
properties: {
opacity: {
start: '0.5',
end: '1'
}
}
}).play();*/
}
fx.animateProperty({
node: currentActiveDomNode.id,
duration: 500,
properties: {
opacity: {
start: '1',
end: '0.5'
}
}
}).play();
var process = asyncProcess();
process.then(function () {
style.set(nextActiveDiv.id, "display", "block");
dojo.byId(buttonNode.id).style.display = 'none';
if(dojo.byId(buttonNode.id + 'Edit') !== null){
dojo.byId(buttonNode.id + 'Edit').style.display = 'block';
}
if (buttonNode.value == "Edit") {
//query(".card-footer-button").forEach(function (buttonArray) {
//if(buttonArray.value == "Next"){
// buttonArray.style.display = "none";
//}
//});
if (buttonNode.id.indexOf("Edit") != -1) {
//console.log('Here');
//console.log('index' + buttonNode.id.indexOf("Edit"));
//console.log('length' + buttonNode.id.length);
var start = 0;
var end = buttonNode.id.indexOf("Edit");
var associatedNextButtonNode = buttonNode.id.substring(start, end);
//console.log(associatedNextButtonNode);
dojo.byId(associatedNextButtonNode).style.display = 'block';
}
}
dojox.fx.smoothScroll({
node: nextActiveDiv.id,
win: window
}).play();
if(nextActiveDiv.style.opacity == '0.5'){
fx.animateProperty({
node: nextActiveDiv.id,
duration: 500,
properties: {
opacity: {
start: '0.5',
end: '1'
}
}
}).play();
}
require(["dojo/dom-class"], function (domClass) {
domClass.remove(currentActiveDomNode.id, "active");
domClass.remove(nextActiveDiv.id, "visited");
if (buttonNode.value == "Next") {
domClass.add(currentActiveDomNode.id, "visited");
}
domClass.add(nextActiveDiv.id, "active");
});
});
});
});
});

HTML on body load run a href link

I have this HTML Link:
Fade and Pop
that uses jquery to bring up a popup box.
how can i make the box appear on body load?
here is the full jquery code:
(function($) {
/*---------------------------
Defaults for Reveal
----------------------------*/
/*---------------------------
Listener for data-reveal-id attributes
----------------------------*/
$('a[data-reveal-id]').live('click', function(e) {
e.preventDefault();
var modalLocation = $(this).attr('data-reveal-id');
$('#'+modalLocation).reveal($(this).data());
});
/*---------------------------
Extend and Execute
----------------------------*/
$.fn.reveal = function(options) {
var defaults = {
animation: 'fadeAndPop', //fade, fadeAndPop, none
animationspeed: 300, //how fast animtions are
closeonbackgroundclick: true, //if you click background will modal close?
dismissmodalclass: 'close-reveal-modal' //the class of a button or element that will close an open modal
};
//Extend dem' options
var options = $.extend({}, defaults, options);
return this.each(function() {
/*---------------------------
Global Variables
----------------------------*/
var modal = $(this),
topMeasure = parseInt(modal.css('top')),
topOffset = modal.height() + topMeasure,
locked = false,
modalBG = $('.reveal-modal-bg');
/*---------------------------
Create Modal BG
----------------------------*/
if(modalBG.length == 0) {
modalBG = $('<div class="reveal-modal-bg" />').insertAfter(modal);
}
/*---------------------------
Open & Close Animations
----------------------------*/
//Entrance Animations
modal.bind('reveal:open', function () {
modalBG.unbind('click.modalEvent');
$('.' + options.dismissmodalclass).unbind('click.modalEvent');
if(!locked) {
lockModal();
if(options.animation == "fadeAndPop") {
modal.css({'top': $(document).scrollTop()-topOffset, 'opacity' : 0, 'visibility' : 'visible'});
modalBG.fadeIn(options.animationspeed/2);
modal.delay(options.animationspeed/2).animate({
"top": $(document).scrollTop()+topMeasure + 'px',
"opacity" : 1
}, options.animationspeed,unlockModal());
}
if(options.animation == "fade") {
modal.css({'opacity' : 0, 'visibility' : 'visible', 'top': $(document).scrollTop()+topMeasure});
modalBG.fadeIn(options.animationspeed/2);
modal.delay(options.animationspeed/2).animate({
"opacity" : 1
}, options.animationspeed,unlockModal());
}
if(options.animation == "none") {
modal.css({'visibility' : 'visible', 'top':$(document).scrollTop()+topMeasure});
modalBG.css({"display":"block"});
unlockModal()
}
}
modal.unbind('reveal:open');
});
//Closing Animation
modal.bind('reveal:close', function () {
if(!locked) {
lockModal();
if(options.animation == "fadeAndPop") {
modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
modal.animate({
"top": $(document).scrollTop()-topOffset + 'px',
"opacity" : 0
}, options.animationspeed/2, function() {
modal.css({'top':topMeasure, 'opacity' : 1, 'visibility' : 'hidden'});
unlockModal();
});
}
if(options.animation == "fade") {
modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
modal.animate({
"opacity" : 0
}, options.animationspeed, function() {
modal.css({'opacity' : 1, 'visibility' : 'hidden', 'top' : topMeasure});
unlockModal();
});
}
if(options.animation == "none") {
modal.css({'visibility' : 'hidden', 'top' : topMeasure});
modalBG.css({'display' : 'none'});
}
}
modal.unbind('reveal:close');
});
/*---------------------------
Open and add Closing Listeners
----------------------------*/
//Open Modal Immediately
modal.trigger('reveal:open')
//Close Modal Listeners
var closeButton = $('.' + options.dismissmodalclass).bind('click.modalEvent', function () {
modal.trigger('reveal:close')
});
if(options.closeonbackgroundclick) {
modalBG.css({"cursor":"pointer"})
modalBG.bind('click.modalEvent', function () {
modal.trigger('reveal:close')
});
}
$('body').keyup(function(e) {
if(e.which===27){ modal.trigger('reveal:close'); } // 27 is the keycode for the Escape key
});
/*---------------------------
Animations Locks
----------------------------*/
function unlockModal() {
locked = false;
}
function lockModal() {
locked = true;
}
});//each call
}//orbit plugin call
})(jQuery);

$('#myModal').click(); or $('#myModal').reveal(); will do this

You can trigger the click event for the link, or just execute the bound function for click($('#myModal').reveal(); in your case if no other data attributes exist for the given link).

Jquery: rebind function on A link click

I have a menu that shows on click (similar to the fb mobile menu). When you click anywhere on the viewport, the menu hides again and the link is disabled (i want to unbind the link because the a links on my viewport will not work without this click function unbound)
However, when i click the showmenu button, i want to be able to bind the viewport click again.
$(function(){
var menuStatus;
$("a.showMenu").click(function(){
if(menuStatus != true){
$("#menu").animate({
height: "44px",
}, 300, function(){menuStatus = true});
return false;
} else {
$("#menu").animate({
height: "0px",
}, 300, function(){menuStatus = false});
return false;
}
});
$("#viewport").bind('click.navclose', function(){
$(this).unbind('click.navclose');
if(menuStatus = true){
$("#menu").animate({
height: "0px",
}, 300, function(){menuStatus = false});
return false;
}
});
});

Try this, hope will make sense
$(function() {
var menuStatus;
$("a.showMenu").click(function() {
$("#viewport").bind('click', handler);
if (menuStatus != true) {
$("#menu").animate({
height: "44px",
}, 300, function() {
menuStatus = true
});
return false;
} else {
$("#menu").animate({
height: "0px",
}, 300, function() {
menuStatus = false
});
return false;
}
});
$("#viewport").bind('click', handler);
var handler = function() {
$(this).unbind('click');
if (menuStatus = true) {
$("#menu").animate({
height: "0px",
}, 300, function() {
menuStatus = false
});
return false;
}
}
});​
look at the updated demo

Rollover delay for Map markers

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);
});
});