In this site I'm using Fancybox 2 to trigger a popup that shows some content: http://www.basing.nl/demo/cole/index.html
In the top menu click on 'Ontdekken' and then on 'Folders'.
The problem
The popup opens but the window is scrolled to the top of the page.
The reason
I think it's because the tag doesn't have a preventDefault() action which keeps the browser of doing its default action.
The JS:
var coleApp = (function(){
//global variables
var animationArray = []
var currentPosition
var i = 0
var windowWidth
// public functions
return {
//end the animation? 1 = yes
endAnimation:0,
test: animationArray,
fullscreen: function(callback){
var screenHeight = window.innerHeight
screenHeight = screenHeight - 96
$(".fullscreen").css("height", screenHeight)
//not needed anymore for some reason...?
if(callback){
setTimeout(callback, 1000)
}
},
setWindowWidth: function(){
windowWidth = window.innerWidth
console.log(windowWidth)
},
initialise:function(){
$(document).foundation();
$('img[usemap]').rwdImageMaps();
$('.fancybox').fancybox();
$(".fancybox").click(function(e){
e.preventDefault();
})
},
ontdekkenGallery:function(){
$("#ontdekkenGallery").click(function() {
$.fancybox.open([
{
href : 'cssObjects/assets/img/figureCole.jpg',
title : 'jow'
}, {
href : 'cssObjects/assets/img/figureCole.jpg',
title : '2nd title'
}, {
href : 'cssObjects/assets/img/figureCole.jpg'
}
]);
});
},
addAnimationClass:function(){
currentPosition = window.pageYOffset
var windowHeightHalf = Math.round(window.innerHeight / 2)
if(i < animationArray.length && animationArray[i].executed == 0){
if(currentPosition > (animationArray[i].position - windowHeightHalf)){
$(animationArray[i].element).addClass("activateAnimation")
animationArray[i].executed = 1
i = i+1
}
} else {this.endAnimation = 1}
},
getAnimationTriggers:function(){
var animationTriggers = $(".animationTrigger")
var animationElement
var animationElementPosition
var toBeSaved = {}
for(var i = 0; i < animationTriggers.length; i++){
animationElement = $(animationTriggers[i])
animationElementPosition = Math.round(animationElement[0].offsetTop)
animationID = animationElement[0].id
//save element properties
toBeSaved.element = animationElement
toBeSaved.position = animationElementPosition
toBeSaved.executed = 0
toBeSaved.id = animationID
animationArray.push(toBeSaved)
toBeSaved = {}
}
},
setEventsOnMenu:function(){
for(var i = 0; i < animationArray.length; i++){
var menuElement = animationArray[i].id
var panelPosition = animationArray[i].position
scrollToEvent(panelPosition)
}
function scrollToEvent(panelPosition){
var x = $("." + menuElement);
$("." + menuElement).click(function(e){
$(".off-canvas-list li").removeClass("active")
$(this).parent().addClass("active")
e.preventDefault
if(windowWidth > 1024){
$('html, body').animate({scrollTop: panelPosition - 96}, 600);
} else {
$('html, body').animate({scrollTop: panelPosition}, 600);
}
})
}
}
}
})()
//events
$(function() {
//on app initialisation
coleApp.initialise()
coleApp.fullscreen()
coleApp.setWindowWidth()
coleApp.getAnimationTriggers()
coleApp.ontdekkenGallery()
coleApp.setEventsOnMenu()
//on window resize
$(window).resize(function(){
coleApp.fullscreen()
coleApp.setWindowWidth()
});
//on scroll
$(window).scroll(function(){
//if 1 then end the animation call
if(coleApp.endAnimation == 0){coleApp.addAnimationClass()}
coleApp.changeMenuClassOnScroll()
});
});
The imagemap
<img id="Image-Maps-Com-image-maps-2014-04-16-084714" src="cssObjects/assets/img/imgmap.jpg" border="0" width="1152" height="756" orgWidth="1152" orgHeight="756" usemap="#image-maps-2014-04-16-084714" alt="" />
<map name="image-maps-2014-04-16-084714" id="ImageMapsCom-image-maps-2014-04-16-084714">
<area alt="" title="" class="fancybox" href="#fancy_keukentips" shape="poly" coords="851,80,1090,331,996,448,759,191" style="outline:none;">
<area alt="" title="" class="fancybox" href="#fancy_folders" shape="poly" coords="747,206,885,358,805,428,686,272" style="outline:none; ">
<area alt="" title="" class="fancybox" id="ontdekkenGallery" shape="poly" coords="899,369,983,458,903,570,859,554,851,494,818,443" style="outline:none;">
<area alt="" title="" class="fancybox" href="#fancy_recepten" shape="poly" coords="674,287,821,474,839,535,797,543,615,349" style="outline:none;">
<area alt="" title="" class="fancybox" href="#fancy_leveringen" shape="poly" coords="1099,353,1151,408,1003,631,931,574" style="outline:none;">
</map>
Does anyone know how to prevent the default action on an tag so that the browser stays on the same location?
