4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

I see these things everywhere but I cant find one that works this well.

by jleavitt13
3 replies
  • WEB DESIGN
    • |
I am going to need to pay to get a slide out tab that works this smooth and can contain custom html?

example here


any recommendations for a wordpress pluggin?

Thank you for your time!
#find #things #works
  • Profile picture of the author dotj
    If you know a little php, you can easily implement it yourself. It is just a styled <div> being slided in/out using jQuery.

    You can get the html, javascript, and css from the page you linked (View Page Source, search for <div class="module">), and then just add the code to your themes header.php

    You may need to get/make your own background image for the div.
    {{ DiscussionBoard.errors[4559503].message }}
    • Profile picture of the author Vishalicious
      Originally Posted by dotj View Post

      If you know a little php, you can easily implement it yourself. It is just a styled <div> being slided in/out using jQuery.

      You can get the html, javascript, and css from the page you linked (View Page Source, search for <div class="module">), and then just add the code to your themes header.php

      You may need to get/make your own background image for the div.
      Thanks for da answer mate.
      but you are on wrong forum for your link building.
      Signature
      Outsource Your Offline Business Projects. Just Send me a PM :)
      {{ DiscussionBoard.errors[4559525].message }}
    • Profile picture of the author jleavitt13
      Originally Posted by dotj View Post

      If you know a little php, you can easily implement it yourself. It is just a styled <div> being slided in/out using jQuery.

      You can get the html, javascript, and css from the page you linked (View Page Source, search for <div class="module">), and then just add the code to your themes header.php

      You may need to get/make your own background image for the div.
      So just to make things easy I am "borrowing" the bg image from the example. I put this code into my header:
      <div>

      <script>
      $(function() {
      $('#qtab').hover(function(){
      $('#qtab').animate({right:'-10px'},{queue:false,duration:500});
      }, function(){
      $('#qtab').animate({right:'-170px'},{queue:false,duration:500});
      });
      });
      </script>
      <div id="qtab">
      <table style="margin-left:55px;line-height:220%;font-size:95%;top:22px;position:relative;">
      <tr><td><a <a target="_blank" href="https://chrome.google.com/webstore/detail/onmkoldigcfmebcinpmineoadckalllb?hl=en-US&hc=search&hcp=main">Get the Free XDK</a></td></tr>
      <tr><td><a target="_blank" href="http://www.appmobi.com/documentation/index.php?DOC=CHEAT_APPMOBI_QUICKSTART">XDK Quickstart Guide</a></td></tr>
      <tr><td><a target="_blank" href="http://appmobi.com/documentation/index.html">API documentation</a></td></tr>
      <tr><td><a target="_blank"href="http://www.appmobi.com/documentation/index.php?DOC=CHEAT_JSAPI">API cheat sheet</a></td></tr>
      <tr><td><a onclick="_gaq.push(['_trackEvent', 'aUX', 'Download', 'Download QT']);" target="_blank"href="http://www.appmobi.com/documentation/index.php?DOC=APPMOBI_UI ">aUX JS library</a></td></tr>
      <tr><td><a href="http://www.appmobi.com/?q=node/66">HTML5 App School</a></td></tr>
      </table>
      </div> </div>


      And this code into my style sheet:

      #qtab{
      background-image:url('http://www.appmobi.com/images/QSG_Tab.png');
      position:fixed;
      top:3000px; right:-100px;
      height:218px;
      width:218px;
      z-index:5000;
      cursor:pointer;
      }


      And it shows up, but sits there and does move. I feel like I am missing a big part here...
      {{ DiscussionBoard.errors[4559545].message }}

Trending Topics