I currently work for a venue – often times we have shows with multiple acts, so we need to list set times for each artist. Easy enough: I can write a modal-type pop-up window using fancybox that opens when the user clicks a link (“DJ Showtimes here“, for example). But say you want to send an email that links to that list? Since most email clients, web- or desktop-based, don’t allow javascript, I needed to trigger the click based on the URL. Here’s my solution (using a custom jQuery function to avoid conflicts with other libraries in use):
$j('#various2').fancybox({'hideOnContentClick': true, 'hideOnOverlayClick': true, 'showCloseButton': true, 'scrolling': 'auto'}); /* use id of link for fancybox selector */
/* necessary to set if-statement within page ready or load event */
$j(document).ready(function() {
if(document.location.href.indexOf('#various2')>-1){ /* check for anchor text in URL */
$j('#various2').fancybox().trigger('click'); /* chain click trigger on to previously written fancybox declaration */
}});
$j('#fancybox-wrap').css({'margin':'20px auto'}) /* set css for wrapper; safari was centering the inline element to the position of the #various2 element, which was at the top of the page. This resets to 20px top/bottom and in the middle horizontally */
My link looks like this:
DJ Set Times Here
and my content is wrapped with:
CONTENT HERE
Easy, peasy.
Hi there,
Thanks for posting this solution. Would you be able to post or send over a demo file (js and html), I cannot seem to get this solution to work.
Thanks,
Kyle
Nevermind! Got it working, accidentally had the id of various2 on href.
Thanks so much, this saved me a lot of trouble!!!
Kyle
No problem, Kyle – glad you got it to work.
One more question, when going to the fancybox link, the foancybox loads in the middle to bottom of the page, is there a way to stop this and just display it at the top of the page?
I left out the line:
$j(‘#fancybox-wrap’).css({‘margin’:’20px auto’}) /* set css for wrapper; safari was centering the inline element to the position of the #various2 element, which was at the top of the page. This resets to 20px top/bottom and in the middle horizontally */
Thanks,
Kyle
Kyle,
I’m pretty sure you can override using either linked stylesheets or injecting css through jQuery – you can find the block element you want to target using Firebug. From there you can set whatever positioning you’d like (top, left, margin, position, etc.)