Skip navigation
harvey waxman
Currently Being Moderated

close popup onmouse out

Nov 26, 2011 5:14 PM

I open a popup message on mouseOver but I don't see how to close it on mouseOut.  Using DW8 Mac 10.5.8

 

Can I?

 
Replies
  • Currently Being Moderated
    Nov 27, 2011 3:28 AM   in reply to harvey waxman

    harvey waxman wrote:

     

    I open a popup message on mouseOver but I don't see how to close it on mouseOut.  Using DW8 Mac 10.5.8

     

    Can I?

    Apparently not!??!!

     

    If you want us to help, it is best to supply us with a link to your site.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 27, 2011 7:10 AM   in reply to harvey waxman

    I believe that you are better off using a collapsible panel as can be seen here http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/colla psible_panel_sample.htm

     

    The following is an example of its use

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <link href="http://labs.adobe.com/technologies/spry/widgets/collapsiblepanel/SpryCollapsiblePanel.css" rel="stylesheet" >
    </head>
     
    <body>
    <div id="CollapsiblePanel1" class="CollapsiblePanel">
      <div class="CollapsiblePanelTab" tabindex="0">200 Lt. James Brown Rd  Directions</div>
      <div class="CollapsiblePanelContent">
        <ul>
          <li>Take Post Road/Route 1N towards Quonset.</li>
          <li>Turn Right onto Route 403 East at traffic light.</li>
          <li>Follow Route 403 East to first traffic light and make a left onto Commerce Park Road.</li>
          <li>Follow Commerce Park Road to the first intersection and make a right onto Callahan Road.</li>
          <li>Follow Callahan Road to the very end, and make a left onto Lt. James Brown Road, and Continue to the Quonset O Club.</li>
        </ul>
      </div>
    </div>
    <script src="http://labs.adobe.com/technologies/spry/includes_minified/SpryCollapsiblePanel.js"></script>
    <script>var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});</script>
    </body>
    </html>
    

     

    Using CSS you can style the widget to suit.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 27, 2011 2:34 PM   in reply to harvey waxman

    The first part of your document should look like

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Poplar Point Association</title>
    <link href="http://labs.adobe.com/technologies/spry/widgets/collapsiblepanel/SpryCollapsiblePanel.css" rel="stylesheet" >
    <style>
    .CollapsiblePanel {
        text-align: left;
    }
    .CollapsiblePanelTab {
        font-size: 1em;
        font-weight: normal;
        border: none;
    }
    .CollapsiblePanelOpen .CollapsiblePanelTab {
        background: transparent url(open.jpg) no-repeat right center;
    }
    .CollapsiblePanelClosed .CollapsiblePanelTab {
        background: transparent url(closed.jpg) no-repeat right center;
    }
    </style>
    </head>
    </head>
    

     

    The panel tab should look like

    <div class="CollapsiblePanelTab" tabindex="0">200 Lt. James Brown Rd</div>
    

     

    And lastly, the images are as follows

    open.jpg -

    open.jpg

    closed.jpg -

    closed.jpg

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 27, 2011 3:31 PM   in reply to harvey waxman
    How can I get the text in the panel tab centered?

    Change the alignment to center in the following

    .CollapsiblePanel {
        text-align: left;
    }
    

     

    Do I use non breaking spaces?
    Use non breaking spaces very sparingly!

    Also, I don't see where to add the open and close images.
    Just right click the relevant image and save to the same directory as the main document.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 27, 2011 3:57 PM   in reply to harvey waxman

    Add/modify the following

    .CollapsiblePanel {

        text-align: left;

        border: none;

    }

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 27, 2011 4:38 PM   in reply to harvey waxman
    Also, is ther a way to eliminate the blue border when you click the tab?

     

    .CollapsiblePanel {

        text-align: left;

        border: none;

       outline: none;

    }

     

    One more question.  Does the code need :

    <link href="http://labs.adobe.com/technologies/spry/widgets/collapsiblepanel/SpryCollapsiblePanel.css" rel="stylesheet" > or am I using all the css locally?  I tried to test it by commenting it out but I seem to have lost the ability to comment out code!

    I have used the CSS that resides on the Adobe site to ensure that we are talking the same language. Normally there files are placed localy. It is up to you.

     

    Gramps

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points