Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Can a lightbox control be used only once (disable/removing it after its been clicked)

    I am using a lightbox script (which dims the page when clicked and shows a pop up image).

    This script is called upon by the user clicking on an imageButton.
    I am also trying to close, hide or disable this once it has been clicked on (so it only works once).

    My code is below:

    < a href="lightbox/images/image-1.jpg" name="alightbox" rel="lightbox" >
    < asp:ImageButton ID="ImgBtnWarning" src="lightbox/images/submitCover.gif"
    runat="server" border="0"
    onClick="ImgBtnWarning_Click"
    style="position: relative; top:10px; left: 75px; z-index: 1; display: none;" / >
    < / a>


    The problem is, when I wrap the < a > tags around my imageButton - the image button code doesn't work (and so fails to activate the onClick event - where I disable this once it has run).

    I am probably doing this wrong, but I don't know of another way to get the lightbox to only work once or to disable the ImgBtnWarning from the lightbox.js file.


    FURTHER INFO:
    Lightbox example here:
    http://www.javascriptkit.com/script/...ox/index.shtml

    I have tried a JavaScript piece of code to disable the btn once clicked, but this also needs to use href - and I am already using href to open the lightbox image.

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by sypa View Post
    I am using a lightbox script (which dims the page when clicked and shows a pop up image).

    This script is called upon by the user clicking on an imageButton.
    I am also trying to close, hide or disable this once it has been clicked on (so it only works once).

    My code is below:

    < a href="lightbox/images/image-1.jpg" name="alightbox" rel="lightbox" >
    < asp:ImageButton ID="ImgBtnWarning" src="lightbox/images/submitCover.gif"
    runat="server" border="0"
    onClick="ImgBtnWarning_Click"
    style="position: relative; top:10px; left: 75px; z-index: 1; display: none;" / >
    < / a>


    The problem is, when I wrap the < a > tags around my imageButton - the image button code doesn't work (and so fails to activate the onClick event - where I disable this once it has run).

    I am probably doing this wrong, but I don't know of another way to get the lightbox to only work once or to disable the ImgBtnWarning from the lightbox.js file.


    FURTHER INFO:
    Lightbox example here:
    http://www.javascriptkit.com/script/...ox/index.shtml

    I have tried a JavaScript piece of code to disable the btn once clicked, but this also needs to use href - and I am already using href to open the lightbox image.
    How about something like this (I know nothing about using ASP):
    Code:
    <asp:ImageButton ID="ImgBtnWarning" src="lightbox/images/submitCover.gif" runat="server" border="0" onClick="ImgBtnWarning_Click;this.disabled='disabled';this.style.display='none';" style="position: relative; top:10px; left: 75px; z-index: 1;" />
    Basically, I am just adding script onto the onclick event that disables the button and sets its display to "none" once it has been clicked. I don't know if the ASP syntax needs any changes to make this work, but the same change to a regular html element would work this way.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    sypa (07-22-2010)

  • #3
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thanks for the effort,
    but i'm afraid it doesn't work like that in asp.

    If I take out my <a> tags - the button will disappear.
    This is becasue on the
    onClick="ImgBtnWarning_Click"
    has code on the .vb (code behind page) which disables it ok.
    The problem is that when I place the <a> tags around the button it seems to take this action first and unable to follow through with the second action.

    Perhaps the lighbox.js file which references pop up action could be amended to only work once. But the problem with this is that I would still have <a> tags around the button.
    The code for the lighbox.js file is here:
    http://somethingforbri.pastebin.com/9e502CgY

    ...but I don't understand javascript that much.
    I wonder if its possible to set a variable in the .js file which = false when closed and then say when it opens - only activate if this variable = true ?
    - not sure how/where this variable will be stored so not sure if this is possible?

    Just to recap what the objective is -
    It's like a terms and conditions popup box - but we don't want an ordinary msg box (as we want to fade out the bg and use a better styled box).

  • #4
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I have since found a better way around this.
    Rather than using a lighbox control to fade out the screen,
    i have taken a screenshot of my page and created an animated gif.
    this gif image is used as an imageButton (which can be controlled from the code behind page).


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •