Loading ...
Sorry, an error occurred while loading the content.

change label color in tabview

Expand Messages
  • manish25.rm
    Hi, I need help on changing the label color in selected tab via javascript? Thanks, Manish
    Message 1 of 3 , May 31, 2007
    • 0 Attachment
      Hi,
      I need help on changing the label color in selected tab via javascript?

      Thanks,
      Manish
    • alexshusta
      Hey Manish, Depending upon your application this may not be the exact response you re looking for, but, the tabview already changes the class of the currently
      Message 2 of 3 , May 31, 2007
      • 0 Attachment
        Hey Manish,

        Depending upon your application this may not be the exact response you're looking for, but, the tabview already changes the class of the currently selected tab so that developers can modify the look of their application without having to change the logic of the class.

        Currently, when a user clicks or hovers over a tab you can see that the background color is changed, that's occurring through a CSS rule. To change the color being used without editing any JavaScript you can edit the rule:

        .yui-navset .yui-nav .selected a, .yui-navset .yui-nav a:hover, .yui-navset .yui-content {
            background-color:#f6f7ee; /* active tab, tab hover, and content bgcolor */
        }

        That rule appears in the file border_tabs.css on line 11. Or, if you're using the YUI files served by Yahoo!, you can override that rule in your application by first including the file, then redefining that one rule:
        <link rel="stylesheet" type="text/css" href="../../build/tabview/assets/border_tabs.css">
        <style type="text/css">
        #demo { width:30em; }
        #demo .yui-content { padding:1em; } /* pad content container */
        .yui-navset .yui-nav .selected a, .yui-navset .yui-nav a:hover, .yui-navset .yui-content {
            background-color:#000; /* active tab, tab hover, and content bgcolor */
        }
        </style>


        To change the JavaScript  that's making the class change on the tab, you'll need to override the function in the tabview class that's being called onClick. But, I suspect it would be easier to just change the CSS.

        ~Alexander


        --- In ydn-javascript@yahoogroups.com, "manish25.rm" <MANISH25@...> wrote:
        >
        > Hi,
        > I need help on changing the label color in selected tab via javascript?
        >
        > Thanks,
        > Manish
        >
      • manish25.rm
        Alexander, Thanks for the reply. Actually I want to change the style of text at runtime. So I want to be able to do it through javascript. Let me know if you
        Message 3 of 3 , Jun 1, 2007
        • 0 Attachment
          Alexander,
          Thanks for the reply.

          Actually I want to change the style of text at runtime.
          So I want to be able to do it through javascript.

          Let me know if you or anyone have any ideas.

          Thanks
          Manish
          --- In ydn-javascript@yahoogroups.com, "alexshusta" <alexshusta@...>
          wrote:
          >
          > Hey Manish,
          >
          > Depending upon your application this may not be the exact response
          > you're looking for, but, the tabview already changes the class of the
          > currently selected tab so that developers can modify the look of their
          > application without having to change the logic of the class.
          >
          > Currently, when a user clicks or hovers over a tab you can see that the
          > background color is changed, that's occurring through a CSS rule. To
          > change the color being used without editing any JavaScript you can edit
          > the rule:
          >
          > .yui-navset .yui-nav .selected a, .yui-navset .yui-nav a:hover,
          > .yui-navset .yui-content {
          > background-color:#f6f7ee; /* active tab, tab hover, and content
          > bgcolor */
          > }
          >
          > That rule appears in the file border_tabs.css on line 11. Or, if you're
          > using the YUI files served by Yahoo!, you can override that rule in your
          > application by first including the file, then redefining that one rule:
          > <link rel="stylesheet" type="text/css"
          > href="../../build/tabview/assets/border_tabs.css">
          > <style type="text/css">
          > #demo { width:30em; }
          > #demo .yui-content { padding:1em; } /* pad content container */
          > .yui-navset .yui-nav .selected a, .yui-navset .yui-nav a:hover,
          > .yui-navset .yui-content {
          > background-color:#000; /* active tab, tab hover, and content
          bgcolor
          > */
          > }
          > </style>
          >
          > To change the JavaScript that's making the class change on the tab,
          > you'll need to override the function in the tabview class that's being
          > called onClick. But, I suspect it would be easier to just change the
          > CSS.
          >
          > ~Alexander
          >
          >
          > --- In ydn-javascript@yahoogroups.com, "manish25.rm" <MANISH25@>
          > wrote:
          > >
          > > Hi,
          > > I need help on changing the label color in selected tab via
          > javascript?
          > >
          > > Thanks,
          > > Manish
          > >
          >
        Your message has been successfully submitted and would be delivered to recipients shortly.