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

problem building explicitly called style classes for button menus..

Expand Messages
  • foggjacob
    Hey everyone, I have spent a good amount of time working with these wonderful little button menus. I was able to successfully skin the button to suit need, but
    Message 1 of 8 , Apr 27 3:54 PM
    • 0 Attachment
      Hey everyone, I have spent a good amount of time working with these
      wonderful little button menus. I was able to successfully skin the
      button to suit need, but then when I started adding other buttons with
      different attributes my css started tripping over itself.. to
      alleviate this problem I carefully walked through the code, customized
      a base css to handle the button menus and set asside the items I need
      to explicitly address(e.g. constants: "div.djoMenuButton
      .yuibutton"... explicits: "#testDrop.djoMenuButton .yuibutton" ) This
      is working beautifully allowing me to only state about 30 lines of CSS
      to build my customized buttons. The problem I am running into is when
      I try to explicitly call the "bd" of the drop down menu... if I call
      it like this ".bd" or "div.bd" it works fine.. but if I call it
      anything else it breaks... I have tried the following:

      #testDrop.djoMenuButton .yuimenu .bd
      #testDrop.djoMenuButton .yuimenu div.bd
      #testDrop.djoMenuButton div.yuimenu div.bd
      #testDrop .yuimenu .bd
      #testDrop .bd

      as well as many others.. I just cannot seem to get it to work unless I
      call it .bd which really becomes a problem for me as I have several
      button menus each with slightly different characteristics (like
      background color and width). I guess as a last resort I could slap an
      ID on the bd but that would really break the fluid ideas behind what I
      am doing.

      please help!
    • alexshusta
      Would adding a second class to the button solve your problem? E.g. class= bd whiteBackground ? Then you could apply all your bd styles to it, and add more CSS
      Message 2 of 8 , Apr 28 8:00 AM
      • 0 Attachment
        Would adding a second class to the button solve your problem? E.g.
        class="bd whiteBackground"?

        Then you could apply all your bd styles to it, and add more CSS rules
        for elements with class == whiteBackground. This provides for a little
        more re-use of code than simply applying id's to the buttons.

        As for highly specific CSS selector rules, those will vary based upon
        the actual realized encapsulation order of elements on the page, so
        I'd have to see the actual HTML to make a comment on that. However, I
        will say, don't forget about the grandparent operator "*" as it's
        often helped me get to build selectors that are targeted enough to be
        really useful while allowing for flexibility in the ordering of child
        elements inside a parent.

        Hope that was helpful,
        ~Alexander

        --- In ydn-javascript@yahoogroups.com, "foggjacob" <foggjacobn@...> wrote:
        >
        > Hey everyone, I have spent a good amount of time working with these
        > wonderful little button menus. I was able to successfully skin the
        > button to suit need, but then when I started adding other buttons with
        > different attributes my css started tripping over itself.. to
        > alleviate this problem I carefully walked through the code, customized
        > a base css to handle the button menus and set asside the items I need
        > to explicitly address(e.g. constants: "div.djoMenuButton
        > .yuibutton"... explicits: "#testDrop.djoMenuButton .yuibutton" ) This
        > is working beautifully allowing me to only state about 30 lines of CSS
        > to build my customized buttons. The problem I am running into is when
        > I try to explicitly call the "bd" of the drop down menu... if I call
        > it like this ".bd" or "div.bd" it works fine.. but if I call it
        > anything else it breaks... I have tried the following:
        >
        > #testDrop.djoMenuButton .yuimenu .bd
        > #testDrop.djoMenuButton .yuimenu div.bd
        > #testDrop.djoMenuButton div.yuimenu div.bd
        > #testDrop .yuimenu .bd
        > #testDrop .bd
        >
        > as well as many others.. I just cannot seem to get it to work unless I
        > call it .bd which really becomes a problem for me as I have several
        > button menus each with slightly different characteristics (like
        > background color and width). I guess as a last resort I could slap an
        > ID on the bd but that would really break the fluid ideas behind what I
        > am doing.
        >
        > please help!
        >
      • foggjacob
        ... That sounds like a winner! I have never used the grandparent operator * ... a little info on that would be greatly appreciated... is it used like
        Message 3 of 8 , Apr 28 9:53 PM
        • 0 Attachment
          --- In ydn-javascript@yahoogroups.com, "alexshusta"
          <alexander.shusta@...> wrote:
          > However, I
          > will say, don't forget about the grandparent operator "*" as it's
          > often helped me get to build selectors that are targeted enough to be
          > really useful while allowing for flexibility in the ordering of child
          > elements inside a parent.
          >

          That sounds like a winner! I have never used the "grandparent operator
          '*'"... a little info on that would be greatly appreciated... is it
          used like "#grandparent * .bd ??

          Thanks again!
        • foggjacob
          Okay, I figured out the problem I am having... I am creating the menu dynamically... so when the button menu is created the the container portion of the menu
          Message 4 of 8 , Apr 29 12:54 AM
          • 0 Attachment
            Okay, I figured out the problem I am having... I am creating the menu
            dynamically... so when the button menu is created the the container
            portion of the menu is not initialized and does not exist in the DOM,
            so I think that when the CSS walks the DOM it is not finding
            "#testDrop .yuimenu .bd"... in fact I cannot even access it via
            JavaScript until I have clicked the button... Is this a Bug? or is
            this by design... to clear up any confusion I am not using the lazy
            load feature... I am hoping there is some sort of work around so that
            I can set the width, height and background-color styles of the
            specific .bd (each of the .bd elements are unique and I will have 6+
            elements on page)... my thought for a workaround was that when I
            initialize the element I could add a CSS style or id of the element to
            the .bd and apply the style that way... however since the element does
            not yet exist that is not working. Any help would be Amazingly
            appreciated!!! I am running behind schedule on this project...

            -jacob


            --- In ydn-javascript@yahoogroups.com, "foggjacob" <foggjacobn@...> wrote:
            >
            > --- In ydn-javascript@yahoogroups.com, "alexshusta"
            > <alexander.shusta@> wrote:
            > > However, I
            > > will say, don't forget about the grandparent operator "*" as it's
            > > often helped me get to build selectors that are targeted enough to be
            > > really useful while allowing for flexibility in the ordering of child
            > > elements inside a parent.
            > >
            >
            > That sounds like a winner! I have never used the "grandparent operator
            > '*'"... a little info on that would be greatly appreciated... is it
            > used like "#grandparent * .bd ??
            >
            > Thanks again!
            >
          • Nick Fitzsimons
            ... It s not called the grandparent operator - it s called the universal selector [1], and it means match anything . So, for example, #thing li will match
            Message 5 of 8 , Apr 29 5:32 AM
            • 0 Attachment
              On 29 Apr 2007, at 05:53:26, foggjacob wrote:

              > --- In ydn-javascript@yahoogroups.com, "alexshusta"
              > <alexander.shusta@...> wrote:
              >> However, I
              >> will say, don't forget about the grandparent operator "*" as it's
              >> often helped me get to build selectors that are targeted enough to be
              >> really useful while allowing for flexibility in the ordering of child
              >> elements inside a parent.
              >>
              >
              > That sounds like a winner! I have never used the "grandparent operator
              > '*'"... a little info on that would be greatly appreciated... is it
              > used like "#grandparent * .bd ??
              >

              It's not called the "grandparent operator" - it's called the
              universal selector [1], and it means "match anything". So, for example,

              #thing li

              will match all "li" elements that are descendants of an element with
              id "thing", but

              #thing *

              will match _any_ (and therefore all) elements that are descendants of
              an element with id "thing". This makes it pretty powerful, but also
              quite dangerous: you can end up affecting all kinds of things you
              didn't want to. Also, it can cause performance issues on a complex
              document [2] so it should be used sparingly.

              (I assume Alexander referred to it as the grandparent operator after
              the terminlogy used in Eric Meyer's article [3] explaining how to
              ensure that a rule is applied to those elements that are
              grandchildren or deeper of a specific node.)

              HTH,

              Nick.

              [1] <http://www.w3.org/TR/CSS21/selector.html#universal-selector>
              [2] <http://developer.mozilla.org/en/docs/
              Writing_Efficient_CSS#Avoid_Universal_Rules.21>
              [3] <http://meyerweb.com/eric/thoughts/2005/05/31/universal-child-
              replacement/>

              --
              Nick Fitzsimons
              http://www.nickfitz.co.uk/
            • foggjacob
              ... Thanks Nick, that really cleared things up for me... I tried it a couple of ways and it still isn t working for me... it is, as you can guess applying the
              Message 6 of 8 , Apr 29 1:31 PM
              • 0 Attachment
                --- In ydn-javascript@yahoogroups.com, Nick Fitzsimons <nick@...> wrote:

                >
                > It's not called the "grandparent operator" - it's called the
                > universal selector [1], and it means "match anything". So, for example,
                >
                > #thing li
                >
                > will match all "li" elements that are descendants of an element with
                > id "thing", but
                >
                > #thing *
                >
                > will match _any_ (and therefore all) elements that are descendants of
                > an element with id "thing". This makes it pretty powerful, but also
                > quite dangerous: you can end up affecting all kinds of things you
                > didn't want to. Also, it can cause performance issues on a complex
                > document [2] so it should be used sparingly.
                >
                > (I assume Alexander referred to it as the grandparent operator after
                > the terminlogy used in Eric Meyer's article [3] explaining how to
                > ensure that a rule is applied to those elements that are
                > grandchildren or deeper of a specific node.)
                >
                > HTH,
                >
                > Nick.
                >
                > [1] <http://www.w3.org/TR/CSS21/selector.html#universal-selector>
                > [2] <http://developer.mozilla.org/en/docs/
                > Writing_Efficient_CSS#Avoid_Universal_Rules.21>
                > [3] <http://meyerweb.com/eric/thoughts/2005/05/31/universal-child-
                > replacement/>
                >
                > --
                > Nick Fitzsimons
                > http://www.nickfitz.co.uk/
                >

                Thanks Nick, that really cleared things up for me... I tried it a
                couple of ways and it still isn't working for me... it is, as you can
                guess applying the style to every element BUT .bd, so I tried the
                *.div and it applied to all the div elements BUT .bd.. the only way I
                can effect the .bd class is by calling it just by ".bd" or "div.bd" ...

                also as I stated in my last post I cannot access the element from the
                DOM until after the initial click of the menu... Again... Is this a
                bug? Can anyone come up with a workaround as I need to specifically
                address 5+ .bd elements on my page...

                The only workaround I can come up with is as follows... when I create
                the element I attach a click handler onto the button and apply either
                a second class or ID to the .bd which could then handle the style...
                This seems a little cumbersome as it would have to run on every click
                of every menu and button menu.

                Any thoughts to how I could address this? Any thoughts as to if this
                is intended functionality or if I should submit a bug report?

                --As always, thanks for all the help!
                -Jacob
              • foggjacob
                Okay, this is driving me crazy!!! I decided to try the workaround I mentioned below so I created the following code:
                Message 7 of 8 , Apr 30 12:49 AM
                • 0 Attachment
                  Okay, this is driving me crazy!!! I decided to try the workaround I
                  mentioned below so I created the following code:

                  YAHOO.util.Event.addListener("testDrop","click",addId);
                  function addId(){
                  var x = document.getElementById('testDrop').childNodes;
                  if(x.length==2){
                  var y = x[1].childNodes[0];
                  y.className = "bd theTest";
                  y.id = "theTest"
                  alert(y.className + ' ' + y.id);
                  YAHOO.util.Event.removeListener("testDrop","click",addId);
                  }
                  }

                  this adds both a class and ID to the .bd with the idea that I can
                  apply the same style needed for the .bd (width:200px;), however it
                  still does not work... WHAT THE HECK!!! please someone give me some
                  sort of idea with this... I cannot make this work without applying
                  specific width styles to the individual .bd's on my page...



                  --- In ydn-javascript@yahoogroups.com, "foggjacob" <foggjacobn@...> wrote:
                  >
                  > --- In ydn-javascript@yahoogroups.com, Nick Fitzsimons <nick@> wrote:
                  >
                  > >
                  > > It's not called the "grandparent operator" - it's called the
                  > > universal selector [1], and it means "match anything". So, for
                  example,
                  > >
                  > > #thing li
                  > >
                  > > will match all "li" elements that are descendants of an element with
                  > > id "thing", but
                  > >
                  > > #thing *
                  > >
                  > > will match _any_ (and therefore all) elements that are descendants
                  of
                  > > an element with id "thing". This makes it pretty powerful, but also
                  > > quite dangerous: you can end up affecting all kinds of things you
                  > > didn't want to. Also, it can cause performance issues on a complex
                  > > document [2] so it should be used sparingly.
                  > >
                  > > (I assume Alexander referred to it as the grandparent operator after
                  > > the terminlogy used in Eric Meyer's article [3] explaining how to
                  > > ensure that a rule is applied to those elements that are
                  > > grandchildren or deeper of a specific node.)
                  > >
                  > > HTH,
                  > >
                  > > Nick.
                  > >
                  > > [1] <http://www.w3.org/TR/CSS21/selector.html#universal-selector>
                  > > [2] <http://developer.mozilla.org/en/docs/
                  > > Writing_Efficient_CSS#Avoid_Universal_Rules.21>
                  > > [3] <http://meyerweb.com/eric/thoughts/2005/05/31/universal-child-
                  > > replacement/>
                  > >
                  > > --
                  > > Nick Fitzsimons
                  > > http://www.nickfitz.co.uk/
                  > >
                  >
                  > Thanks Nick, that really cleared things up for me... I tried it a
                  > couple of ways and it still isn't working for me... it is, as you can
                  > guess applying the style to every element BUT .bd, so I tried the
                  > *.div and it applied to all the div elements BUT .bd.. the only way I
                  > can effect the .bd class is by calling it just by ".bd" or "div.bd" ...
                  >
                  > also as I stated in my last post I cannot access the element from the
                  > DOM until after the initial click of the menu... Again... Is this a
                  > bug? Can anyone come up with a workaround as I need to specifically
                  > address 5+ .bd elements on my page...
                  >
                  > The only workaround I can come up with is as follows... when I create
                  > the element I attach a click handler onto the button and apply either
                  > a second class or ID to the .bd which could then handle the style...
                  > This seems a little cumbersome as it would have to run on every click
                  > of every menu and button menu.
                  >
                  > Any thoughts to how I could address this? Any thoughts as to if this
                  > is intended functionality or if I should submit a bug report?
                  >
                  > --As always, thanks for all the help!
                  > -Jacob
                  >
                • Todd Kloots
                  Jacob - If you pass an HTML element reference, HTML element id or array of YAHOO.widget.MenuItem configuration properties to the button s menu configuration
                  Message 8 of 8 , Apr 30 10:37 AM
                  • 0 Attachment
                    Jacob -

                    If you pass an HTML element reference, HTML element id or array of
                    YAHOO.widget.MenuItem configuration properties to the button's "menu"
                    configuration attribute, then the menu will be lazy loaded. This is not
                    a bug, but rather a performance consideration. The "menu" configuration
                    attribute can also accept a YAHOO.widget.Menu instance, allowing you to
                    create a Menu with a specific id so that you can create more specific
                    style rules to customize the look of each button's menu. Here is an
                    example for you:

                    http://yuiblog.com/sandbox/yui/v222/examples/button/example01.php

                    I hope that helps you with your project.

                    - Todd


                    foggjacob wrote:
                    > Okay, I figured out the problem I am having... I am creating the menu
                    > dynamically... so when the button menu is created the the container
                    > portion of the menu is not initialized and does not exist in the DOM,
                    > so I think that when the CSS walks the DOM it is not finding
                    > "#testDrop .yuimenu .bd"... in fact I cannot even access it via
                    > JavaScript until I have clicked the button... Is this a Bug? or is
                    > this by design... to clear up any confusion I am not using the lazy
                    > load feature... I am hoping there is some sort of work around so that
                    > I can set the width, height and background-color styles of the
                    > specific .bd (each of the .bd elements are unique and I will have 6+
                    > elements on page)... my thought for a workaround was that when I
                    > initialize the element I could add a CSS style or id of the element to
                    > the .bd and apply the style that way... however since the element does
                    > not yet exist that is not working. Any help would be Amazingly
                    > appreciated!!! I am running behind schedule on this project...
                    >
                    > -jacob
                    >
                    >
                    > --- In ydn-javascript@yahoogroups.com, "foggjacob" <foggjacobn@...> wrote:
                    >
                    >> --- In ydn-javascript@yahoogroups.com, "alexshusta"
                    >> <alexander.shusta@> wrote:
                    >>
                    >>> However, I
                    >>> will say, don't forget about the grandparent operator "*" as it's
                    >>> often helped me get to build selectors that are targeted enough to be
                    >>> really useful while allowing for flexibility in the ordering of child
                    >>> elements inside a parent.
                    >>>
                    >>>
                    >> That sounds like a winner! I have never used the "grandparent operator
                    >> '*'"... a little info on that would be greatly appreciated... is it
                    >> used like "#grandparent * .bd ??
                    >>
                    >> Thanks again!
                    >>
                    >>
                    >
                    >
                    >
                    >
                    >
                    > Yahoo! Groups Links
                    >
                    >
                    >
                    >
                  Your message has been successfully submitted and would be delivered to recipients shortly.