Solved

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

Posted on 2014-12-20
11
166 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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Suggested Solutions

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn how to dynamically set the form action using jQuery.
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…

747 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

13 Experts available now in Live!

Get 1:1 Help Now