SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    sweden
    Posts
    646
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Toggle overlay with multiple choices

    I am playing around with toggle overlay to open up a little help window for users.
    If I have a field where they are supposed to fill in something, I added a little question mark image next to the field, where they can click and a little window opens up describing what it's all about.

    It works fine, but now I want to add questionmarks to other fields in the same window, opening up a different message. But, where should I add the code to make this work, so the script knwos what window is connected to what question mark?

    I just found some code where I used copy and paste. So, I have no idea what it's doing and why.

    Here are the stuff I have from the head and body parts. But, as it is now, only the first description opens up when I click the question marks.
    I need something to separate them or id them or whatever... but how?

    PHP Code:
    <style type="text/css">
       
    div#overlay {
        
    displaynone;
        
    z-index2;
        
    background#000;
        
    positionfixed;
        
    width100%;
        
    height100%;
        
    top0px;
        
    left0px;
        
    text-aligncenter;
    }
    div#specialBox {
        
    displaynone;
        
    positionrelative;
        
    z-index3;
        
    margin150px auto 0px auto;
        
    width400px
        
    height200px;
        
    background#666;
        
    color#000;
    }
    </
    style>

    <
    div id="overlay"></div>
    <
    div id="specialBox">
      <
    p>FIELD ONE<br />
      
    This field is for a description of field one.</p
      <
    button onmousedown="toggleOverlay()">Close Overlay</button>
    </
    div>

    <
    div id="overlay"></div>
    <
    div id="specialBox">
      <
    p>This is the second help window telling you what this is about.</p
      <
    button onmousedown="toggleOverlay()">Close Overlay</button>
    </
    div>

    <
    p>FIELD ONE<img onmousedown="toggleOverlay()" src="./img/questionmark.gif" alt="example"><br />
    <
    p>FIELD TWO<img onmousedown="toggleOverlay()" src="./img/questionmark.gif" alt="example"><br /> 

  2. #2
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    sweden
    Posts
    646
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I found more code that I could modify. So, I will make it work now.


Bookmarks

Posting Permissions

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