?
Solved

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

Posted on 2014-12-20
11
Medium Priority
?
192 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
DFW AZURE MEETUP TONIGHT FRI 6PM

We will be discussing what Azure Stack is, how does it fit into the suit of offerings that Azure has currently, and where can it fit into your organizations technology stack. We will also be discussing limitations of the platform while covering various applicable scenarios.

 
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
 
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 2000 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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

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…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…
Suggested Courses

777 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