Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Dec 2009
    Posts
    39
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Jquery srollBar with tab panel

    <!-- Start Scroll bar Jquery Code -->
    <link rel="stylesheet" type="text/css" media="all" href="css/demoStyles.css" />
    <link rel="stylesheet" type="text/css" media="all" href="css/jScrollPane.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
    <script type="text/javascript" src="js/jScrollPane.js"></script>
    <style type="text/css">
    .tab {
    font-family: arial;
    font-size: 13px;
    white-space: nowrap;
    text-align: center;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    *background: transparent url(admin/images/corner_right_2.gif) scroll no-repeat top right;
    border-color: #f0e0d3 ;
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 0px;
    padding-bottom: 5px;
    padding-right:6px;
    cursor: pointer;
    }
    .tab1 {
    font-family: arial;
    font-size: 13px;
    white-space: nowrap;
    text-align: center;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    *background: transparent url(admin/images/corner_right_1.gif) scroll no-repeat top right;
    border-color: #f0e0d3 ;
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 0px;
    padding-bottom: 5px;
    padding-right:6px;
    cursor: pointer;
    }
    .tab span {
    *background: transparent url(admin/images/bottom-left_2.gif) scroll no-repeat top left;
    }
    .tab1 span {
    *background: transparent url(admin/images/bottom-left_1.gif) scroll no-repeat top left;
    }
    .tabhold {
    background-color:#f0e0d3; /*color of menu #666666*/
    color: #6f5139;
    font-weight:bold;
    }
    .tabfocus {
    background-color:#f3efe6;
    color: #6f5139;
    font-weight:bold;
    }
    .tabcontent {
    font-family: arial;
    font-size: 12px;


    border-style: solid;
    border-color: #f0e0d3;
    border-width: 1px;


    background-color:#f3efe6;
    }

    #pane2,#pane3,#pane4,#pane5 {
    height: 60px;
    width:440px;
    }

    .osX .jScrollPaneTrack {
    background: url(admin/images/osx_track.gif) repeat-y;
    }
    .osX .jScrollPaneDrag {
    background: url(admin/images/osx_drag_middle.gif) repeat-y;
    }
    .osX .jScrollPaneDragTop {
    background: url(admin/images/osx_drag_top.gif) no-repeat;
    height: 6px;
    }
    .osX .jScrollPaneDragBottom {
    background: url(admin/images/osx_drag_bottom.gif) no-repeat;
    height: 7px;
    }
    .osX a.jScrollArrowUp {
    height: 24px;
    background: url(admin/images/osx_arrow_up.png) no-repeat 0 -30px;
    }
    .osX a.jScrollArrowUp:hover {
    background-position: 0 0;
    }
    .osX a.jScrollArrowDown {
    height: 24px;
    background: url(admin/images/osx_arrow_down.png) no-repeat 0 -30px;
    }
    .osX a.jScrollArrowDown:hover {
    background-position: 0 0;
    }
    .left .jScrollPaneTrack {
    left: 0;
    right: auto;
    }
    .left a.jScrollArrowUp {
    left: 0;
    right: auto;
    }
    .left a.jScrollArrowDown {
    left: 0;
    right: auto;
    }


    /* IE SPECIFIC HACKED STYLES */
    * html .osX .jScrollPaneDragBottom {
    bottom: -1px;
    }
    /* /IE SPECIFIC HACKED STYLES */
    </style>
    <script type="text/javascript">

    $(function()
    {
    // this initialises the demo scollpanes on the page.
    $('#pane2').jScrollPane({showArrows:true, scrollbarWidth: 15, arrowSize: 16});
    $('#pane3').jScrollPane({showArrows:true, scrollbarWidth: 15, arrowSize: 16});
    $('#pane4').jScrollPane({showArrows:true, scrollbarWidth: 15, arrowSize: 16});
    $('#pane5').jScrollPane({showArrows:true, scrollbarWidth: 15, arrowSize: 16});
    });

    </script>
    <!-- End Scroll bar Jquery Code -->
    <script type="text/javascript" language="JavaScript"><!--
    function ManageTabPanelDisplay() {

    var idlist = new Array('tab1focus','tab2focus','tab3focus','tab4focus','tab1ready','tab2ready','tab3ready','tab4ready ','content1','content2','content3','content4');
    if(arguments.length < 1) { return; }
    for(var i = 0; i < idlist.length; i++) {
    var block = false;
    for(var ii = 0; ii < arguments.length; ii++) {
    if(idlist[i] == arguments[ii]) {
    block = true;
    break;
    }
    }
    if(block) { document.getElementById(idlist[i]).style.display = "block"; }
    else { document.getElementById(idlist[i]).style.display = "none"; }
    }
    }
    //--></script>

    <style type="text/css">

    </style>

    <table border="0" cellpadding="0" cellspacing="0" >
    <tr>
    <td>

    <div id="tab1focus" class="tab tabfocus" > <span style="*background: transparent url(admin/images/bottom-left_2.gif) scroll no-repeat top left;"> &nbsp;&nbsp;&nbsp;&nbsp;1stTab&nbsp;&nbsp;</span>
    </div>
    <div id="tab1ready" class="tab1 tabhold" style="display:none;">
    <span style="*background: transparent url(admin/images/bottom-left_1.gif) scroll no-repeat top left; " onclick="ManageTabPanelDisplay('tab1focus','tab2ready','tab3ready','tab4ready','content1')" >&nbsp;&nbsp;&nbsp;&nbsp;1stTab&nbsp;&nbsp;
    </span>
    </div>
    </td>
    <td>&nbsp;
    </td>
    <td>
    <div id="tab2focus" class="tab tabfocus" style="display:none;">
    <span>&nbsp;&nbsp;&nbsp;&nbsp;2ndTab&nbsp;&nbsp;</span>
    </div>
    <div id="tab2ready" class="tab1 tabhold" style="display:block;">
    <span onclick="ManageTabPanelDisplay('tab1ready','tab2focus','tab3ready','tab4ready','content2')">&nbsp;&n bsp;&nbsp;&nbsp;2ndTab&nbsp;&nbsp;</span>
    </div></span>
    </td>
    <td>&nbsp; </td>
    <td>
    <div id="tab3focus" class="tab tabfocus" style="display:none;">
    <span>&nbsp;&nbsp;&nbsp;&nbsp;3rdTab&nbsp;&nbsp;</span>
    </div>
    <div id="tab3ready" class="tab1 tabhold" style="display:block;">
    <span onclick="ManageTabPanelDisplay('tab1ready','tab2ready','tab3focus','tab4ready','content3')">&nbsp;&n bsp;&nbsp;&nbsp;3rdTab&nbsp;&nbsp;
    </div>
    </td>
    <td>&nbsp; </td>
    <td>
    <div id="tab4focus" class="tab tabfocus" style="display:none;">
    <span>&nbsp;&nbsp;&nbsp;&nbsp;More&nbsp;&nbsp;</span>
    </div>
    <div id="tab4ready" class="tab1 tabhold" style="display:block;">
    <span onclick="ManageTabPanelDisplay('tab1ready','tab2ready','tab3ready','tab4focus','content4')">&nbsp;&n bsp;&nbsp;&nbsp;More&nbsp;&nbsp;
    </div>
    </td>
    <td > &nbsp;</td>
    </tr>
    <tr >
    <td colspan="8" >

    <div id="content1" class="holder osX tabcontent" >
    <div id="pane2" >
    www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com
    </div>
    </div>
    <div id="content2" class="holder osX tabcontent" >
    <div id="pane3">
    www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com
    www.google .com www.google .com www.google .com www.google .com
    www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com
    www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com
    </div>
    </div>
    <div id="content3" class="holder osX tabcontent" >
    <div id="pane4">
    www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com
    www.google .com www.google .com www.google .com www.google .com
    www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com
    www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com
    </div>
    </div>
    <div id="content4" class="holder osX tabcontent" >
    <div id="pane5">
    www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com
    www.google .com www.google .com www.google .com www.google .com
    www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com
    www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com
    </div>
    </div>

    </td></tr>
    </table>

  • #2
    New Coder
    Join Date
    Dec 2009
    Posts
    39
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I am trying jQuery scroll bar with tab panel

    http://www.kelvinluck.com/assets/jqu.../examples.html
    #pane2

    now every thing is fine except one thing ... on default position all scroll pane's are coming

    when I change "display: none " it is not displaying anything


    any one plz sugest ...
    Y dont try this on ur pc to solve it
    just copy paste above post , code and look at this website tooo
    http://www.kelvinluck.com/assets/jqu.../examples.html

    any kind of help would be appreciated.....
    advanced thanks
    Last edited by 2009old; 06-18-2010 at 05:41 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •