3 {{ upvoteCount | shortNum }}
3 {{ upvoteCount | shortNum }}

Linking to # in lightbox, please help...

by nikeman070
2 replies
  • WEB DESIGN
    • |
ok it appears the light box works when this bit of code is at the top

Code:
<div>
          <ul>
   <li><a href="#" id="button">Service Times</a> </li>
          </ul>
               </div>
it links to this

Code:
       
                <!--Popup window-->
        <div id="popupContact"> <a id="popupContactClose" href="#"><img src="Church Best/img/window-close.png" /></a>
            <div id="main-content">
                    <h1 class="replace">Contact Us </h1>
                    <p>If you need to contact us fill out this form and we will get back to you.</p>

                
                <form action="Church Best/contact.php" id="contactform" method="post">
                    <p class="label_name">Name</p>
                    <p class="input_form"><input type="text" name="Name" /></p>
                    
                    <p class="label_name">Email</p>
                    <p class="input_form"><input type="text" name="Email" /></p>
                    
                    <p class="label_name">Message</p>
                    <p class="input_form" id="textarea"><textarea name="Message" rows="5" cols="4" id="message_input"></textarea></p>
                    
                    <p id="submit"><input type="submit" value="Send Message" name="submitButton" class="btn1" /></p>
                    <p id="success">Your message was sent!</p>
                </form>
                <div id="error-msg">
                    <p class="error wrong_name">Please enter your name</p>
                    <p class="error wrong_email">Please enter valid email address</p>
                    <p class="error wrong_message">Please enter your message</p>
                </div>



                </div>
            </div>
        </div>
        <div id="backgroundPopup"></div>
    </div>
when the first bit of code is inside the body for example

Code:
<div class="divider"></div>
        <h3 class="replace">Prayer Request</h3>
                  <p class="left">Can We Pray For You? <br/>
                        Get Prayer From All of Us</p>
                     
                     
                   <div>
          <ul>
   <li><a href="#" id="button">Service Times</a> </li>
          </ul>
               </div>        
          
                    
                    
                    
                    <div class="clear"></div>
                </div>
            </div>
It wont work, It works at the top but when other code surrounds it the lightbox wont appear,

Let me give you an example. go to this link

Church Of The New Covenant

If you notice when you click the first service times lightbox appears, the second one does nothing.

Is there a logical explanation for this I REALLY COULD USE THE HELP ASAP thanks...
#lightbox #linking
  • Profile picture of the author nikeman070
    Cmon it's gotta be a simple mistake I am overlooking I laid out all the details someone has got to have an idea or solution?????
    Signature
    {{ DiscussionBoard.errors[4831375].message }}
  • Profile picture of the author andrejvasso
    IDs (in this case '#button') are meant to be unique! This means you are not supposed to use '#button' more than once per page!

    So my guess would be that the problems can be found there and that the popup script only triggers when clicking the first button and ignores all others ones.


    In 'popup.js', try to change:

    Code:
    //LOADING POPUP
//Click the button event!
$("#button").click(function(){

    //centering with css
    centerPopup();
    //load popup
    loadPopup();

});
    to:

    Code:
    //LOADING POPUP
//Click the button event!
$("#button, #button1, #button2").click(function(){

    //centering with css
    centerPopup();
    //load popup
    loadPopup();

});
    And your html code to:

    Code:
    <ul>
    <li>
        <a href="#" id="button">Service Times</a>
    </li>
</ul>

<ul>
    <li>
        <a href="#" id="button1">Service Times</a>
    </li>
</ul>

<ul>
    <li>
        <a href="#" id="button2">Service Times</a>
    </li>
</ul>
    {{ DiscussionBoard.errors[4832441].message }}

Trending Topics