Solved

How do I pop up the a page in fancyBox when the page loads?

Posted on 2014-12-20
11
169 Views
Last Modified: 2014-12-25
When my page loads, if the user is not logged in I need to pop up the login screen in fancyBox. Apparently some users are complaining that they don't know how to click the "log in" link.

Code for the "log in" link looks like this and works perfectly when clicked:
<div class="login-txt">
<a href="ShowLogin.php" id="loginLink" class="fancybox-login">Log In</a>
</div>

Open in new window


Handling the "is it logged in?" condition is trivial in PHP, so I'll just show the JavaScript that is failing to do the same thing as clicking that link.
<script type="text/javascript">$(document).ready(function (){
			//$('a[href="ShowLogin.php"]').fancybox();
			$("loginLink").fancybox();
		});</script>

Open in new window


A breakpoint in Firebug shows that the line is being executed.  And the Firebug console reports no JS error.

What should I be doing instead to get the page, upon loading, to "click" the Log In link?

Thanks!
0
Comment
Question by:Daniel Wilson
  • 6
  • 5
11 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40511257
$(function(){
    $("#loginLink").fancybox().trigger('click');
})

Open in new window

0
 
LVL 32

Author Comment

by:Daniel Wilson
ID: 40511263
Closer, but not quite.  As I step through it, the form darkens ... as if ... the fancybox'ed form will display ... but then it clears.  If I just let it run, I don't actually see it darken.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40511266
Have you got a link to the page?
Maybe it needs a small delay to give the form a chance to load.

$("#loginLink").fancybox().delay(1000).trigger('click');

Open in new window

0
 
LVL 32

Author Comment

by:Daniel Wilson
ID: 40511269
0
 
LVL 32

Author Comment

by:Daniel Wilson
ID: 40511270
Hold on ... clicking the Log In link isn't working any more either.  I broke something :(
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 32

Author Comment

by:Daniel Wilson
ID: 40511271
Apparently adding the id to the link broke the fancyBox action.  But it's the only way I know to access the link via JavaScript. :(
0
 
LVL 58

Expert Comment

by:Gary
ID: 40511272
In your question you had an ID in the anchor tag but on the site there is no ID
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 500 total points
ID: 40511273
Change the code to

$(".fancybox-login").fancybox().trigger('click');

Open in new window

0
 
LVL 32

Accepted Solution

by:
Daniel Wilson earned 0 total points
ID: 40511278
aha ... you got me within 1 tweak of it!
$(".fancybox-login").trigger('click');
0
 
LVL 58

Expert Comment

by:Gary
ID: 40511279
I wasn't close, the code was correct.
0
 
LVL 32

Author Closing Comment

by:Daniel Wilson
ID: 40517449
Gary's was crazy close ... but for completeness I'm giving the correction.
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

25 Experts available now in Live!

Get 1:1 Help Now