Forums Retired Products and Controls
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
matt_dmaxx
660
Autohide Scroll Buttons in WebTab
posted

I need the tab scroll buttons to only show when they can be used,  I cannot postback to the server or refresh the page in this application.  I have set the DisabledImage attributes to a solid square image from the styleset that is the same color as the tab bar.  The problem I am having is that there is a white border that shows around the disabled button.  If I add borders using the stylesheets the borders show up fine but the white border remains.  I have tried a variety of images including a transparent box, but with no luck.  I have had the same results with 2 seperate applications and 2 different browsers but it does not show when I use the AppStylist tool.  I am using the default Classic styleset and below is a screen shot and the markup I used for the tab. 

Thanks,

Matt

 

<

 

igtab:UltraWebTab ID="UltraWebTab1" runat="server" Width="100%" SelectedTab="1"

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

DisplayMode

="Scrollable">

 

 

<ScrollButtons Visibility="OnBothSides" MoreTabs-Visibility="OnBothSides" LeftButton-DisabledImage

="igg_bottom.gif"

 

 

RightButton-DisabledImage="igg_bottom.gif"

/>

 

 

<Tabs

>

 

 

<igtab:Tab Text

="tab1">

 

 

<ContentPane

>

 

 

<iframe id="iframe1" runat="server" src

="about:blank"

 

 

width="100%" height="300px" title="Testing title"

/>

 

 

</ContentPane

>

 

 

</igtab:Tab

>

 

 

<igtab:Tab Text

="tab 2">

 

 

<ContentPane

>

 

 

<iframe runat="server" id="iframe2" frameborder="0" width="100%" src

="about:blank">

 

 

</iframe

>

 

 

</ContentPane

>

 

 

</igtab:Tab

>

 

 

<igtab:Tab Text

="tab 3">

 

 

<ContentPane

>

 

 

<iframe runat="server" id="iframe3" frameborder="0" width="100%" src

="about:blank">

 

 

</iframe

>

 

 

</ContentPane

>

 

 

</igtab:Tab

>

 

 

</Tabs

>

</

 

 

igtab:UltraWebTab

> 

Parents
No Data
Reply
  • 24497
    Suggested Answer
    posted

    Hi Matt,

    You may hack into internal logic of webtab, check condition when both buttons disabled and hide html elements which represent scroll buttons. The scrolFix is called every time when scroll buttons (or tabs) should be adjusted, the scroll buttons are represented by buttons array which have elem member. Below is possible example

    <script type="text/javascript">
    function initTabs(oWebTab)
    {
     oWebTab._old_scrolFix = oWebTab.scrolFix;
     oWebTab.scrolFix = function(non)
     {
      this._old_scrolFix(non);
      var but0 = this.buttons[0];
      var but1 = this.buttons[1];
      var hide = but0.state == 3 && but1.state == 3;
      if(hide != this._hide_scroll)
      {
       but0.elem.style.display = hide ? 'none' : '';
       but1.elem.style.display = hide ? 'none' : '';
      }
      this._hide_scroll = hide;
     }
    }
    </script>
      <igtab:UltraWebTab ID="UltraWebTab1" runat="server" Height="200px" Width="40%" DisplayMode="Scrollable">
      <ClientSideEvents InitializeTabs="initTabs" />
       <Tabs>
        <igtab:Tab Text="Tab 1"></igtab:Tab>
        <igtab:Tab Text="Tab 2 with long text"></igtab:Tab>
        <igtab:Tab Text="Tab 3"></igtab:Tab>
        <igtab:Tab Text="Tab 4"></igtab:Tab>
       </Tabs>
    </igtab:UltraWebTab>

Children