1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

coding *****s - how to do this on a webpage?

Discussion in 'HTML & JavaScript' started by dconstrukt, May 29, 2011.

  1. dconstrukt

    dconstrukt Registered Member

    Joined:
    Sep 5, 2010
    Messages:
    58
    Likes Received:
    10
    hey guys.... i'm trying to add a lightbox overlay on a page i have and i want the lightbox to show 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 on the html overlay and then it should fade out to the page underneath.

    any idea how to do this?

    tried google but didnt find anything like i needed.
     
  2. pyrogod117

    pyrogod117 Registered Member

    Joined:
    Jul 10, 2010
    Messages:
    52
    Likes Received:
    16
    Location:
    Jersey Shore USA
    Well the click a link part to close the light box is simple. Look at how it closes when you click off of it on a normal page. To load the lightbox when the page loads, try reading this page THOROUGHLY

    Code:
    hxxp://***.dmxzone.com/forum/topic/43596/
    (Replace *** with www and hxxp with http)

    It's more beneficial to try and do this on your own than it is for me to do it for you. If I do it, you won't learn. If you piece it together yourself, you'll remember. Feel free to try it and if you can't get it to work, post back here with what you've done so far and what's going wrong.

    Hope that helps
     
    • Thanks Thanks x 1
  3. nick5014

    nick5014 Junior Member

    Joined:
    May 11, 2011
    Messages:
    100
    Likes Received:
    21
    Location:
    uk/usa
    Have you already figured out how to get the overlay to appear in the first place? You want a div with an opaque background colour with width: 100% Then all your text and links are inside this div.

    To close the overlay you are going to need a little javascript and a bit of css. Basically what you want to do is make the overlays css property "display: hidden" once you click on the text link. Also use javascript to do the fade effect.

    To make it a little fancier I would also use javascript to get the overlay to appear/fade in after a few seconds using a delay.

    If you need more help/the code let me know.
     
  4. dconstrukt

    dconstrukt Registered Member

    Joined:
    Sep 5, 2010
    Messages:
    58
    Likes Received:
    10
    no dude... this stuff is like greek.... i am lost.

    just need to know what to do by someone who isn't a programmer... they speak in non english words and shit.
     
  5. nick5014

    nick5014 Junior Member

    Joined:
    May 11, 2011
    Messages:
    100
    Likes Received:
    21
    Location:
    uk/usa
    lol, try going to (http) bit.ly/k5XvWK

    There is a decent tutorial there. But if none of it makes sense to you, you might be better looking for a wordpress plugin that does it (if you are using wordpress)
     
  6. dconstrukt

    dconstrukt Registered Member

    Joined:
    Sep 5, 2010
    Messages:
    58
    Likes Received:
    10
    yeah just need to figure out how to make the thing show automatically when the page loads
     
  7. nick5014

    nick5014 Junior Member

    Joined:
    May 11, 2011
    Messages:
    100
    Likes Received:
    21
    Location:
    uk/usa
    remove in your css file, the bit thats says, display: none
     
  8. dconstrukt

    dconstrukt Registered Member

    Joined:
    Sep 5, 2010
    Messages:
    58
    Likes Received:
    10
    yeah copied everything just like he shows on the tut but its not working...

    shouldn't be that difficult to do either.
     
  9. pyrogod117

    pyrogod117 Registered Member

    Joined:
    Jul 10, 2010
    Messages:
    52
    Likes Received:
    16
    Location:
    Jersey Shore USA
    Show us what you have so far, and then we can help. You can put it on a blank page for all I care. Don't have to show us what you're doing it for.
     
  10. Baybo.it

    Baybo.it Registered Member

    Joined:
    Aug 9, 2011
    Messages:
    72
    Likes Received:
    39
    Occupation:
    Founder of Baybo.it
    Location:
    San Francisco
    Home Page:
    The best JS framework for this is jQuery. There's a few plugins you can use (jQuery lightbox comes to mind).

    The code would be:

    Code:
    $(document).ready(function() {
    $("#popup").show()
    $("#popup-button").click(function() {
        $("#popup").hide();
    });
    });