6 {{ upvoteCount | shortNum }}
6 {{ upvoteCount | shortNum }}

coding ninja's - how to do this on a webpage?

by davemiz
5 replies
  • WEB DESIGN
    • |
anyone know how to add one o' them lightbox overlays on a page that shows when the page loads.

i have the html for the overlay pop and the main html page.

The user should be able to click a text link in the html overlay and it should fade out to the page underneath.

any idea how to do this?

tried google but didnt find anything like i needed.

thnx
#coding #ninja #webpage
  • Profile picture of the author PeachCoding
    This is pretty straight forward. You'll need to use jQuery and Fancybox.

    jQuery: The Write Less, Do More, JavaScript Library
    Fancybox - Fancy lightbox alternative

    Then for loading the fancybox on page load use the code below:

    Code:
    <script type="text/javascript">
    $(document).ready(function() {
        $("#fancybox_page_load").fancybox().trigger('click');
    });
</script>
    Put the code above inside the <head></head> area of your html, then put
    the link below inside of the <body></body> area of your html; it can go
    anywhere as it is invisible to the web browser.

    Code:
    <a href="http://www.page_that_you_want_on_popin.com/" id="fancybox_page_load" style="display: none;">Hidden Link</a>
    And change the url on the link to the page that has the html code you want
    showing in the fancybox loading on page load.

    Hope that helps.
    Signature

    Services offered: PSD to Wordpress, Joomla, Drupal Templates or Full Site, Custom PHP or C# Programming, Fix problems on any software, and more.

    You will get 25% OFF all services by mentioning the Warrior Forum. PM me here or email me to ivanphp404@gmail.com if interested and/or if you have questions.

    {{ DiscussionBoard.errors[3984840].message }}
  • Profile picture of the author PeachCoding
    Dave, I'm not currently able to reply to PM's as I have less than 50 posts but
    here is my answer to your message.

    You welcome. And you're right that code above is missing the size and type of
    fancybox load type to make it work. Below is the code with those two on them.

    Code:
    <script type="text/javascript">
    $(document).ready(function() {
        $("#fancybox_page_load").fancybox({ 'width': 1024, 'height': 768, 'type': 'iframe' }).trigger('click');
    });
</script>
    Change the width and height values to match your needs, and you can go see
    the code in place at the example page I made for you:
    https://peachcoding.com/fancybox_on_pageload/index.html
    Signature

    Services offered: PSD to Wordpress, Joomla, Drupal Templates or Full Site, Custom PHP or C# Programming, Fix problems on any software, and more.

    You will get 25% OFF all services by mentioning the Warrior Forum. PM me here or email me to ivanphp404@gmail.com if interested and/or if you have questions.

    {{ DiscussionBoard.errors[3990945].message }}
  • Profile picture of the author davemiz
    oh no worries dude... thanks for the help.... if you check out the page, you'll see whats up - no luck still.
    Signature

    “Judge your success by what you had to give up in order to get it.”
    ― Dalai Lama XIV

    {{ DiscussionBoard.errors[3995868].message }}
  • Profile picture of the author Kevin Rayman
    PeachCoding's post should work.
    Signature
    Master of Trollin
    {{ DiscussionBoard.errors[3996021].message }}
  • Profile picture of the author davemiz
    LOL... thanks.
    Signature

    “Judge your success by what you had to give up in order to get it.”
    ― Dalai Lama XIV

    {{ DiscussionBoard.errors[3996278].message }}

Trending Topics