Hi All,

Quick question... I am working with a client that wants a popup to automatically launch when you land on the home page. Basically, the popup will be a little bit of text, an image, and a link. I absolutely love the look of the Popup API blue skin, and I want to find a way to make this work but I'm not real sure how.

Is there a way I can have a popup automatically launch when you land on the page? I would like to use one of these types of popups rather than a popup window. But I am not sure how I would go about this. It seems I would need to make a node, that will popup with the popup API (which I am not sure how to do). But more importantly, and perhaps more difficultly, I want it to automatically launch when you get to the home page.

Does anyone have any ideas here?

Thanks for your help!

Comments

Anonymous’s picture

I'd like to have pop-up site registration and newsletter subscription.

ericduran’s picture

Hi,
I'm not sure if you're a developer. If you take a look at the popup api readme file it show you multiple ways you can accomplish this.

If your not a developer I'm going to tell you the easiest way to accomplish this. (this is not by far the best way of doing this)

1. Install the popup api.
2. Make sure the option "Scan all pages for popups links" is checked
3. Create the node you want to pop-up.
4. On the homepage have a link that links to the node you want to popup. (ex. <a href="node/special_msg" class="popups" id="special-popup" > )
5. On your front page template file add this javascript code.

$(document).ready(function() {
 $('#special-popup').click();
});

This is going to trigger the click function on the link which will cause the popup to be display.

Eric

kvoltz’s picture

Fantastic... thank you so much for this.

I am in the process of implementing everything now. Saying I am a developer is a bit of a stretch. I am learning more and more with each passing day. I find that throwing myself in the deep-end and trying to swim out forces me to learn quickly.

Where about should I place that line of Javascript, and how should be implemented into the template file?

i.e. within a <script> tag or something similar?

forgive my naivety, as I said... I am learning.

ericduran’s picture

In a

tag. Make sure is after print $scripts but before

Eric

kvoltz’s picture

Can you clarify that?

Should that look like this:

.....
 <?php print $scripts; ?>
    <?php print $(document).ready(function() {
$('#special-popup').click();
}); ?>
  </head>.....

thanks again!

ericduran’s picture

No,
it should look like this

.......
<?php print $scripts; ?>
<script type="text/javascript">
$(document).ready(function() {
$('#special-popup').click();
});
</script>
 </head>
........

Eric

kvoltz’s picture

Thanks for that - it definitely made things work more than the previous way did. However, now it seems that all of the content has disappeared entirely from my site.

http://70.40.198.126/home

that is the address. Does this make sense?

I have placed the above code into the page.tpl.php file.

I must be doing something wrong.

ericduran’s picture

You just have to place

<script type="text/javascript">
$(document).ready(function() {
$('#special-popup').click();
});
</script>

after the print $styles;

The <?php print $styles should already be on the page template.

Eric

Anonymous’s picture

Make sure your close tag has an 'r' in it = script

ericduran’s picture

actually just notice you have a type o on </script>

Eric

kvoltz’s picture

Thanks guys, that worked perfectly.

I really appreciated the help!

ericduran’s picture

No problem.

Eric