Jquery Slide Out Tab Help

  • mikek

    (@mikek)


    15 years ago

    Very much a novice at Jquery. This slide out tab is exactly what I’m looking for, same exact location, but not for a contact form…rather for a PollDaddy Poll.

    Can anyone shed some light on how to accomplish this? Also, I’m struggling just to figure out how to install this as its a .JS plugin rather than a zip so wordpress doesnt want to recognize it.

    Here is the slideout example: https://wpaoli.building58.com/2009/09/jquery-tab-slide-out-plugin/

    Here is my site: Website

    Thanks to everyone in advance,
    Mike

Viewing 7 replies - 1 through 7 (of 7 total)

  • I can just give some general advice… if its in js….then its not so much a plugin, as a script you need to include. You need to put the js somewhere. I put it in my theme in a folder called scripts

    Then up in the header.php, somwhere within the <head> section you call to it
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/custom.js"></script>

    Then you implement it in your template….how you do that depends on the script I guess…..

    Again….some general help, I dunno specifics on this one

    Thread Starter mikek

    (@mikek)

    much appreciated…that has definitely given me more clarification that this plugin isn’t necessarily a plugin versus code to utilize.

    At this point since im such a novice with jQuery, any assistance is helpful.

    Thanks again,
    Mike

    Thread Starter mikek

    (@mikek)

    anyone else able to add to this?

    Thread Starter mikek

    (@mikek)

    anyone have anymore insight?

    Thread Starter mikek

    (@mikek)

    Ok I got this far: see website link above

    The problem is the tab does not hover over everything else so when i open it, it currently disappears behind the content. I added a:hover in my CSS code but it seemed to mess with the formatting of the box which comes out. Anyone have a simple fix?

    Thanks

    Code Placed in Header.php

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="https://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>

    <script type="text/javascript">
    $(function(){
        $('.slide-out-div').tabSlideOut({
            tabHandle: '.handle',                     //class of the element that will become your tab
            pathToTabImage: '/Poll-Button-50.gif', //path to the image for the tab //Optionally can be set using css
            imageHeight: '50px',                     //height of tab image           //Optionally can be set using css
            imageWidth: '50px',                       //width of tab image            //Optionally can be set using css
            tabLocation: 'left',                      //side of screen where tab lives, top, right, bottom, or left
            speed: 300,                               //speed of animation
            action: 'click',                          //options: 'click' or 'hover', action to trigger animation
            topPos: '200px',                          //position from the top/ use if tabLocation is left or right
            leftPos: '20px',                          //position from left/ use if tabLocation is bottom or top
            fixedPosition: true                     //options: true makes it stick(fixed position) on scroll
        });

    });

    </script>

  <style type="text/css">

      .slide-out-div {
          padding: 20px;
          width: 300px;
          display: block;
          float: left;
          background: #ccc;
          border: 1px solid #29216d;
      }
      </style>

    Code placed in main index.php

    <div class="slide-out-div">
            <a class="handle" href="https://link-for-non-js-users.html">Content</a>
            <h3>Stock Poll</h3>
            <p>Coming Soon
            </p>
            <p></p>
        </div>
    Thread Starter mikek

    (@mikek)

    actually, I don’t think Hover is the code im looking for. I think it might be float but not entirely sure anymore.

    Hey Mike,
    I believe that this has to do with the fact that you have several position:absolute items attempting to overlap each other. When this happens you need to use z-index to have them stack in the correct order.

    You will need to do this in the css code that came with the jquery plugin.
    Find in your code where you put in the css that looks like:

    <style type="text/css">

      .slide-out-div {
          padding: 20px;
          width: 300px;
          display: block;
          float: left;
          background: #ccc;
          border: 1px solid #29216d;
      }
      </style>

    And add z-index: 3000; so that it looks like this:

    <style type="text/css">

      .slide-out-div {
          padding: 20px;
          width: 300px;
          display: block;
          float: left;
          background: #ccc;
          border: 1px solid #29216d;
          z-index: 3000;
      }
      </style>

    I picked 3000 as a random big number to make sure it came out on top and it seems to work. I hope that works for you. Let me know.

    -WillyP

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Jquery Slide Out Tab Help’ is closed to new replies.