CODEWITHSUNDEEP
jquery
Subliminal Hash
Subliminal Hash

Reputation: 13742

display icons (or content) on mouseover

In twitter, when you hover your mouse over a message a star and a reply icon appears on the right.

Similarly, in facebook when you hover your mouse over to an update, the little 'hide' icon appears on the right also giving a little context menu.

I want to have a similar approach in my project for drag & drop handles. What I can decide is the what the most efficient way is it to accomplish this goal.

is it that everytime I hover the mouse onto a div with an id, do I just inject the html with .append() or similar? or do I show/hide the already existing html.. or is there a better way?

Upvotes: 2

Views: 6447

Answers (3)

antz29
antz29

Reputation: 754

Having done something like this recently, here is an extended example, if you want to test it you will need to grab jquery, jquery ui and my reset.css. On hover, the background and border are changed and the previously hidden icons are shown.

   <html>
          <head>
              <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
              <link rel="stylesheet" href="css/smoothness/jquery-ui.css" type="text/css" media="screen" />

              <style type="text/css">
                  body {
                      font-family: sans-serif;
                      font-size: 13px;
                  }

                  p {
                      font-size: 1em;
                      line-height: 1.5em;
                      margin-bottom: 15px;
                  }                 
                  #items .item .buttons {
                      width: 16px;
                      display: none;
                      float: right;
                      background: transparant;
                  }

                  #items .item .buttons li {
                      height: 16px;
                      width: 16px;
                      margin: 1px 1px 0px 0px;
                      float:right;
                      cursor: pointer;
                  }         

                  #items .item {
                      width: 400px;
                      margin: 10px;
                      border: 1px dotted #fff;
                  }

                  #items .hover {
                      background: #ffe;
                      border: 1px dotted #ccc;
                  }

                  #items .item .contents {
                      margin: 20px 10px 10px 10px;
                  } 
              </style>

              <script src="js/jquery.js" type="text/javascript"></script>
              <script src="js/jquery-ui.js" type="text/javascript"></script>

              <script type="text/javascript">
                  $(function() {
                      $('#items .item').hover(
                          function() {
                              $(this).addClass('hover');
                              $(this).find('.buttons').show();
                          },
                          function() {
                              $(this).removeClass('hover');
                              $(this).find('.buttons').hide();
                          }
                      );

                      $('#items .item .buttons li').hover(
                          function() {
                              $(this).addClass('ui-state-hover');
                          },
                          function() {
                              $(this).removeClass('ui-state-hover');
                          }
                      );
                  });
              </script>

              <link
          </head>
          <body>
              <div id="items">
                  <div class="item">
                      <ul class="buttons">
                        <li class="delete ui-state-default ui-corner-all">
                          <span class="ui-icon ui-icon-close"/>
                        </li>
                        <li class="config ui-state-default ui-corner-all">
                          <span class="ui-icon ui-icon-wrench"/>
                        </li>
                        <li class="info ui-state-default ui-corner-all">
                          <span class="ui-icon ui-icon-info"/>
                        </li>
                      </ul>
                      <div class='contents'>
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet arcu ante. Suspendisse potenti. Praesent vel nisl urna, eu ultricies risus.</p> 
                          <p>Nulla eget mauris ac lectus tempor consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec et lacus ipsum.</p> 
                          <p>Donec rhoncus tincidunt magna, sit amet placerat nulla fringilla iaculis.</p>
                      </div>
                  </div>

                  <div class="item">
                      <ul class="buttons">
                        <li class="delete ui-state-default ui-corner-all">
                          <span class="ui-icon ui-icon-close"/>
                        </li>
                        <li class="config ui-state-default ui-corner-all">
                          <span class="ui-icon ui-icon-wrench"/>
                        </li>
                        <li class="info ui-state-default ui-corner-all">
                          <span class="ui-icon ui-icon-info"/>
                        </li>
                      </ul>
                      <div class='contents'>
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet arcu ante. Suspendisse potenti. Praesent vel nisl urna, eu ultricies risus.</p> 
                          <p>Nulla eget mauris ac lectus tempor consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec et lacus ipsum.</p> 
                          <p>Donec rhoncus tincidunt magna, sit amet placerat nulla fringilla iaculis.</p>
                      </div>
                  </div>
              </div>
          </body>
      </html>

Upvotes: 3

Russ Cam
Russ Cam

Reputation: 125508

There's a better way if you want to display nice tooltips - the tooltip plugin

You could always append content to the DOM and then remove on hover out, that does work. I think it depends on what you're planning on displaying, if it's images then I'd be tempted to hide them on page load and then show on hover but if it's just a block of text then I'd probably be tempted in appending to the DOM and then removing on hover out.

Another aspect to consider is graceful degradation - would you want some/similar functionality to be available if JavaScript is disabled or none?

If you inspect Facebook with Firefox's Firebug plugin, you can see that the hide div is there when the page is loaded, but is hidden and activated through CSS classes.

Upvotes: 1

duckyflip
duckyflip

Reputation: 16499

The speediest solution would be to have a hidden block with the button/drag handle and whenever you mouse-over your element you .show() that div and position it accordingly (with css)

.append()'ing and removing html code on each mouse-over is certainly possible but will most definitely have some performance hit.

Upvotes: 5

Related Questions