Web Analytics Made Easy -
StatCounter How to code side pull out tabs? - CodingForum

Announcement

Collapse
No announcement yet.

How to code side pull out tabs?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • How to code side pull out tabs?

    Hey would appreciate if anyone can help with this:
    Im using bootstrap, and was wondering to create scrolalble side pull out tabs

    Something similar to this example:Spin

    (When you scroll down on the page, two tabs appear fixed on both sides of page)
    But stop scrolling when at certain pointClick image for larger version

Name:	Screen Shot 2016-10-05 at 12.40.33 p.m..png
Views:	1
Size:	22.3 KB
ID:	2283648Click image for larger version

Name:	Screen Shot 2016-10-05 at 12.40.49 p.m..jpg
Views:	1
Size:	19.5 KB
ID:	2283649

    many thanks,

  • #2
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
    <script src="http://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: 'images/contact_tab.gif', //path to the image for the tab //Optionally can be set using css
    imageHeight: '122px', //height of tab image //Optionally can be set using css
    imageWidth: '40px', //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: false //options: true makes it stick(fixed position) on scroll
    });

    });

    </script>

    Comment


    • #3
      many thanks for they reply! However within the html would it be placed outside the div container? And within html + css what classes are assigned ?

      Comment


      • #4
        That would all go right Before your closing </body>

        So, like this:
        Code:
        <!-- all your markup above ^^^^ -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> 
        <script src="http://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: 'images/contact_tab.gif', //path to the image for the tab //Optionally can be set using css
              imageHeight: '122px', //height of tab image //Optionally can be set using css
              imageWidth: '40px', //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: false //options: true makes it stick(fixed position) on scroll
            });
          });
        </script> 
        </body> 
        </html>
        Riley
        Riley-Shannon.com - My Portfolio
        FraktalServices.com - My Company

        Comment

        Working...
        X