12 Replies Latest reply: Nov 27, 2011 4:52 PM by harvey waxman RSS

    close popup onmouse out

    harvey waxman Community Member

      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?

        • 1. Re: close popup onmouse out
          Ben Pleysier MVP

          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

          • 2. Re: close popup onmouse out
            harvey waxman Community Member

            Thanks for the offer.  Here is the link  http://poplarpoint.org/events.html  The directions to Lt. James Brown Rd

            • 3. Re: close popup onmouse out
              Ben Pleysier MVP

              I believe that you are better off using a collapsible panel as can be seen here http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/collapsible_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

              • 4. Re: close popup onmouse out
                harvey waxman Community Member

                That looks pretty nice.  If I can ever learn how to modify the css.  

                 

                Thanks a lot.  I'm playing at  http://poplarpoint.org/eventsspry.html

                • 5. Re: close popup onmouse out
                  Ben Pleysier MVP

                  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

                  • 6. Re: close popup onmouse out
                    harvey waxman Community Member

                    Thanks again for all your help.  I updated the page and have a couple of questions.  How can I get the text in the panel tab centered?  Do I use non breaking spaces?

                     

                    Also, I don't see where to add the open and close images.  Sorry for being so uninformed.

                    • 7. Re: close popup onmouse out
                      Ben Pleysier MVP
                      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

                      • 8. Re: close popup onmouse out
                        harvey waxman Community Member

                        I'm getting there.  All the styles show no border yet the panels have a border.

                         

                        .CollapsiblePanelTab {

                            font-size: 1em;

                            font-weight: normal;

                            border: none;

                                  text-align: center;

                        }

                         

                        How do I get rid of it?

                        • 9. Re: close popup onmouse out
                          Ben Pleysier MVP

                          Add/modify the following

                          .CollapsiblePanel {

                              text-align: left;

                              border: none;

                          }

                          Gramps

                          • 10. Re: close popup onmouse out
                            harvey waxman Community Member

                            I should have noticed that myself.  Why do all the other borders say none?  Also, is ther a way to eliminate the blue border when you click the tab?

                             

                            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!

                             

                            thanks again.

                            • 11. Re: close popup onmouse out
                              Ben Pleysier MVP
                              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

                              • 12. Re: close popup onmouse out
                                harvey waxman Community Member

                                Applied to the PanelTab and it worked as you said.  I appreciate all your help.  One other think I noticed.  I tried to place just the images in the tab but the height collapsed to almost nothing.  There needs to be text apparently.  I did a work around and it's just fine.

                                 

                                Thanks again for all your help.  Best for the Holidays to you.