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

Re: tooltip problem

Expand Messages
  • Caridy Patiño Mayea
    ragtek_ragga, why you don´t try another technique to solve your problem? I think that you may use the event bubble up technique to generate each tooltip on
    Message 1 of 12 , May 1, 2007
    • 0 Attachment
      ragtek_ragga, why you don´t try another technique to solve your
      problem? I think that you may use the event bubble up technique to
      generate each tooltip on the fly, without worry about the IDs and you
      don´t need verify each link (at the beginning) to attach the
      corresponding tooltip object. If you have a dynamic ID for each link
      (as you mention in your first post), you can render the active tooltip
      (mouse over a link), on the fly using the corresponding dynamic ID.

      You can see an example of tooltips on the fly here:
      http://bubbling.comarq.com/themes/bubbling/examples/behavior-dynamic-tooltips-bubbling.html

      Full Explination here:
      http://bubbling.comarq.com/eng/node/tooltip-behavior

      Regards
      Caridy (caridy at gmail.com)

      --- In ydn-javascript@yahoogroups.com, "ragtek_ragga"
      <ragtek_ragga@...> wrote:
      >
      > could you help me a second time pls
      >
      > i'd like to build that in a second script now
      >
      > so i included the scriptfiles, added the id="event" tag to the links
      > and put <script type="text/javascript">YAHOO.example.container.tt2 =
      > new YAHOO.widget.Tooltip("tt2", { context:"event" });
      > </script> at the end of the template
      >
      > the link looks like this now
      > <a href="calendar.php?do=getinfo&e=409&day=2007-5-1&c=1"
      > title="http://www.euromayday.at .. treffpunkt(...)</a>
      > at the first link it works
      > on the others not, although the link looks right
      > <a href="calendar.php?do=getinfo&e=417&day=2007-5-3&c=1"
      > title="Toxic Sound
      > No Entry
      > only Tekkno" id="event">Toxic</a>
      >
    • cristopher pierson ewing
      Ho there, I m working on a tabbed interface for managing courses. Each tab contains data that is related to some sub-group of information about the course one
      Message 2 of 12 , May 1, 2007
      • 0 Attachment
        Ho there,

        I'm working on a tabbed interface for managing courses. Each tab contains
        data that is related to some sub-group of information about the course one
        is editing. I've been transferring the whole thing over to YUI and
        dynamically-generated pages from an earlier, self-built version with
        static tab content and I have a few questions. My test environment is OS
        X and I'm using Firefox as my testing browser.

        On to the questions:

        1. There are eight tabs on the page. Each is generated from some
        PHP-built HTML code that is transformed like in the example code here:

        http://developer.yahoo.com/yui/examples/tabview/module_tabs.html

        The problem is that about 15% of the time, the tab interface never
        finished building. I get the first three or four tabs, and the rest
        aren't there. Reloading the page builds the complete set, but that's a
        step my users shouldn't need to take, no?

        I am using the YAHOO.util.Event.onContentReady() to delay building the tab
        set until the content is completely generated, but I'm guessing that this
        isn't actually working right. Are there any suggestions out here for
        ensuring that the full tab set gets built every time?


        2. The content of each tab is generated dynamically by a request object
        that calls another PHP script. I'd like to be able to pass variables on
        to that script based on conditions that arise in the PHP document before
        the 'tab modules' get built. The only way I can see so far to do so is to
        write certain HTML elements into the PHP-genrated tab modules that get
        consumed by the YUI javascript process and translated into GET variables
        passed on in the 'dataSrc' property of the tab it generates. Is there a
        better way to do this?

        My biggest problem is that sometimes the javascript processing of the tab
        modules seems to get ahead of the PHP generation of the HTML modules, and
        errors get thrown because elements that are supposed to be in the module
        have not yet been written. When this condition arises, execuction of the
        Javascript halts, and the page is left in a partially-processed state that
        looks terrible and will be confusing to my users. Perhaps there's a way
        to throw an error that gets caught and generates a fall-back error page,
        but I con't see what it would be.

        Any suggestions.

        I'm enjoying working with the YUI library a great deal. I hope I can
        solve these little issues and get this up and running so my users can
        enjoy the juicy goodness!

        Thanks for any help in advance!

        Cris

        ********************************
        Cris Ewing
        CME and Telehealth Web Services
        Department of Radiology Web Services
        University of Washington
        School of Medicine
        Work Phone: (206) 685-9116
        Home Phone: (206) 365-3413
        E-mail: cewing@...
        *******************************


        On Tue, 1 May 2007, Caridy Patiño Mayea wrote:

        > ragtek_ragga, why you don´t try another technique to solve your
        > problem? I think that you may use the event bubble up technique to
        > generate each tooltip on the fly, without worry about the IDs and you
        > don´t need verify each link (at the beginning) to attach the
        > corresponding tooltip object. If you have a dynamic ID for each link
        > (as you mention in your first post), you can render the active tooltip
        > (mouse over a link), on the fly using the corresponding dynamic ID.
        >
        > You can see an example of tooltips on the fly here:
        > http://bubbling.comarq.com/themes/bubbling/examples/behavior-dynamic-tooltips-bubbling.html
        >
        > Full Explination here:
        > http://bubbling.comarq.com/eng/node/tooltip-behavior
        >
        > Regards
        > Caridy (caridy at gmail.com)
        >
        > --- In ydn-javascript@yahoogroups.com, "ragtek_ragga"
        > <ragtek_ragga@...> wrote:
        >>
        >> could you help me a second time pls
        >>
        >> i'd like to build that in a second script now
        >>
        >> so i included the scriptfiles, added the id="event" tag to the links
        >> and put <script type="text/javascript">YAHOO.example.container.tt2 =
        >> new YAHOO.widget.Tooltip("tt2", { context:"event" });
        >> </script> at the end of the template
        >>
        >> the link looks like this now
        >> <a href="calendar.php?do=getinfo&e=409&day=2007-5-1&c=1"
        >> title="http://www.euromayday.at .. treffpunkt(...)</a>
        >> at the first link it works
        >> on the others not, although the link looks right
        >> <a href="calendar.php?do=getinfo&e=417&day=2007-5-3&c=1"
        >> title="Toxic Sound
        >> No Entry
        >> only Tekkno" id="event">Toxic</a>
        >>
        >
        >
        >
      • alexshusta
        Hey there Cris, 1. PHP generated tabs not building reliably - Just to clarify, the problem is in the javascript but the HTML is _always_ there, right? Then
        Message 3 of 12 , May 1, 2007
        • 0 Attachment
          Hey there Cris,

          1. PHP generated tabs not building reliably - Just to clarify, the
          problem is in the javascript but the HTML is _always_ there, right?
          Then there's an old school work-around for dealing with elements that
          may not yet be rendered into the HTML tree - call your js function
          from the bottom of the page after the HTML has already been parsed by
          the client.

          2. How to pass variables from the current page back to your server
          with the YUI XHR class - You can append as many variable values as
          you'd like to on a request if you use POST instead of GET. See:
          http://developer.yahoo.com/yui/connection/#forms. However, I'm not
          sure if that really addresses your problem.

          You'll still have to iterate over an array of values on the server
          side using the $_POST array. You said that the variables you'd like to
          share with the second script occur within the first PHP script, right?
          You could use local file storage or a database to write the conditions
          out to a known location (say a file with the same name as the current
          userId, you'll need a unique location for each user as many people may
          hit your server at once and you really really don't want to store any
          sensitive data in this way).

          Or you could cheat (not really) and make PHP controller class that
          handles all your connection requests, making calls into the two
          discreet functions that you currently have and passing any data back
          and forth that way. E.g. your controller is instantiated and waits for
          a connection, connection arrives asking for tabs, the controller calls
          the first script, first script returns an array of notable conditions
          to the controller upon completion, controller waits for a connection,
          connection arrives asking for tab contents, controller calls second
          script passing in the array of conditions from the first script.

          That's just off the top of my head though, and there's probably
          (definitely) a more elegant solution available.

          Hope that makes sense, and helps.
          ~Alexander

          --- In ydn-javascript@yahoogroups.com, cristopher pierson ewing
          <cewing@...> wrote:
          >
          > Ho there,
          >
          > I'm working on a tabbed interface for managing courses. Each tab
          contains
          > data that is related to some sub-group of information about the
          course one
          > is editing. I've been transferring the whole thing over to YUI and
          > dynamically-generated pages from an earlier, self-built version with
          > static tab content and I have a few questions. My test environment
          is OS
          > X and I'm using Firefox as my testing browser.
          >
          > On to the questions:
          >
          > 1. There are eight tabs on the page. Each is generated from some
          > PHP-built HTML code that is transformed like in the example code here:
          >
          > http://developer.yahoo.com/yui/examples/tabview/module_tabs.html
          >
          > The problem is that about 15% of the time, the tab interface never
          > finished building. I get the first three or four tabs, and the rest
          > aren't there. Reloading the page builds the complete set, but that's a
          > step my users shouldn't need to take, no?
          >
          > I am using the YAHOO.util.Event.onContentReady() to delay building
          the tab
          > set until the content is completely generated, but I'm guessing that
          this
          > isn't actually working right. Are there any suggestions out here for
          > ensuring that the full tab set gets built every time?
          >
          >
          > 2. The content of each tab is generated dynamically by a request
          object
          > that calls another PHP script. I'd like to be able to pass
          variables on
          > to that script based on conditions that arise in the PHP document
          before
          > the 'tab modules' get built. The only way I can see so far to do so
          is to
          > write certain HTML elements into the PHP-genrated tab modules that get
          > consumed by the YUI javascript process and translated into GET
          variables
          > passed on in the 'dataSrc' property of the tab it generates. Is
          there a
          > better way to do this?
          >
          > My biggest problem is that sometimes the javascript processing of
          the tab
          > modules seems to get ahead of the PHP generation of the HTML
          modules, and
          > errors get thrown because elements that are supposed to be in the
          module
          > have not yet been written. When this condition arises, execuction
          of the
          > Javascript halts, and the page is left in a partially-processed
          state that
          > looks terrible and will be confusing to my users. Perhaps there's a
          way
          > to throw an error that gets caught and generates a fall-back error
          page,
          > but I con't see what it would be.
          >
          > Any suggestions.
          >
          > I'm enjoying working with the YUI library a great deal. I hope I can
          > solve these little issues and get this up and running so my users can
          > enjoy the juicy goodness!
          >
          > Thanks for any help in advance!
          >
          > Cris
          >
          > ********************************
          > Cris Ewing
          > CME and Telehealth Web Services
          > Department of Radiology Web Services
          > University of Washington
          > School of Medicine
          > Work Phone: (206) 685-9116
          > Home Phone: (206) 365-3413
          > E-mail: cewing@...
          > *******************************
          >
          >
          > On Tue, 1 May 2007, Caridy Patiño Mayea wrote:
          >
          > > ragtek_ragga, why you don´t try another technique to solve your
          > > problem? I think that you may use the event bubble up technique to
          > > generate each tooltip on the fly, without worry about the IDs and you
          > > don´t need verify each link (at the beginning) to attach the
          > > corresponding tooltip object. If you have a dynamic ID for each link
          > > (as you mention in your first post), you can render the active tooltip
          > > (mouse over a link), on the fly using the corresponding dynamic ID.
          > >
          > > You can see an example of tooltips on the fly here:
          > >
          http://bubbling.comarq.com/themes/bubbling/examples/behavior-dynamic-tooltips-bubbling.html
          > >
          > > Full Explination here:
          > > http://bubbling.comarq.com/eng/node/tooltip-behavior
          > >
          > > Regards
          > > Caridy (caridy at gmail.com)
          > >
          > > --- In ydn-javascript@yahoogroups.com, "ragtek_ragga"
          > > <ragtek_ragga@> wrote:
          > >>
          > >> could you help me a second time pls
          > >>
          > >> i'd like to build that in a second script now
          > >>
          > >> so i included the scriptfiles, added the id="event" tag to the links
          > >> and put <script type="text/javascript">YAHOO.example.container.tt2 =
          > >> new YAHOO.widget.Tooltip("tt2", { context:"event" });
          > >> </script> at the end of the template
          > >>
          > >> the link looks like this now
          > >> <a href="calendar.php?do=getinfo&e=409&day=2007-5-1&c=1"
          > >> title="http://www.euromayday.at .. treffpunkt(...)</a>
          > >> at the first link it works
          > >> on the others not, although the link looks right
          > >> <a
          href="calendar.php?do=getinfo&e=417&day=2007-5-3&c=1"
          > >> title="Toxic Sound
          > >> No Entry
          > >> only Tekkno" id="event">Toxic</a>
          > >>
          > >
          > >
          > >
          >
        • ragtek_ragga
          theres just one more problem here if i have long url s it would be nice if the part would be cut off just for demo what i mean:
          Message 4 of 12 , Sep 13, 2007
          • 0 Attachment
            theres just one more problem here
            if i have long url's it would be nice if the part would be "cut off"

            just for demo what i mean: http://www.ragtek.org/help.jpg
          • ragtek_ragga
            hi i m putting a tooltip this way on my site: YAHOO.namespace( example.container ); YAHOO.example.container.tt1 = new
            Message 5 of 12 , Nov 18, 2007
            • 0 Attachment
              hi
              i'm putting a tooltip this way on my site:



              <script type="text/javascript">
              YAHOO.namespace("example.container");
              YAHOO.example.container.tt1 = new YAHOO.widget.Tooltip("tt1", {
              context:"hide_unread", text:"Diese Tabelle kann in den Einstellungen
              (später auch durch einen klick hier) deaktiviert werden!" });
              </script>
              <table class="tborder" cellpadding="$stylevar[cellpadding]"
              cellspacing="$stylevar[cellspacing]" border="0" width="100%"
              align="center">
              <tr>
              <td class="alt1"><span id="hide_unread" style="float:right;"><img
              src="http://www.ragtek.org/forum/images/bgold/buttons/collapse_thead.gif"
              /></span>Es gibt <strong><a href="search.php?do=getnew"> neue
              Beiträge</a></strong> seit deinem letzten Besuch!</if></td>
              </tr>
              </table>

              it looks now like this: www.ragtek.org/tool.jpg
              the blue is the point where the mouse should be to show the tooltip
              the red is the tooltip
              1. how can i set the style?
              2. i'd like to show the tooltip more right! because now nobody is
              seeing it because it is left and the hoverpoint is right
            • ragtek_ragga
              ... src= http://www.ragtek.org/forum/images/bgold/buttons/collapse_thead.gif ... solved it, i thought that the css is global included, but it wasn t
              Message 6 of 12 , Nov 18, 2007
              • 0 Attachment
                --- In ydn-javascript@yahoogroups.com, "ragtek_ragga"
                <ragtek_ragga@...> wrote:
                >
                > hi
                > i'm putting a tooltip this way on my site:
                >
                >
                >
                > <script type="text/javascript">
                > YAHOO.namespace("example.container");
                > YAHOO.example.container.tt1 = new YAHOO.widget.Tooltip("tt1", {
                > context:"hide_unread", text:"Diese Tabelle kann in den Einstellungen
                > (später auch durch einen klick hier) deaktiviert werden!" });
                > </script>
                > <table class="tborder" cellpadding="$stylevar[cellpadding]"
                > cellspacing="$stylevar[cellspacing]" border="0" width="100%"
                > align="center">
                > <tr>
                > <td class="alt1"><span id="hide_unread" style="float:right;"><img
                >
                src="http://www.ragtek.org/forum/images/bgold/buttons/collapse_thead.gif"
                > /></span>Es gibt <strong><a href="search.php?do=getnew"> neue
                > Beiträge</a></strong> seit deinem letzten Besuch!</if></td>
                > </tr>
                > </table>
                >
                > it looks now like this: www.ragtek.org/tool.jpg
                > the blue is the point where the mouse should be to show the tooltip
                > the red is the tooltip
                > 1. how can i set the style?
                > 2. i'd like to show the tooltip more right! because now nobody is
                > seeing it because it is left and the hoverpoint is right
                >
                solved it, i thought that the css is global included, but it wasn't
              • Huynh Cao Ky
                Hi Ragtek! 1. You can change your tooltip by CSS. The Tootip object will use create a DOM with id is in your argument. Example: new YAHOO.widget.Tooltip( tt1 ,
                Message 7 of 12 , Nov 20, 2007
                • 0 Attachment
                  Hi Ragtek!

                  1. You can change your tooltip by CSS.
                  The Tootip object will use create a DOM with id is in your argument.
                  Example:
                  new YAHOO.widget.Tooltip("tt1",
                  { context:"ctx",
                  text:"My text was set using the 'text'
                  configuration property" });
                  => HTML of this object is:
                  <div id="tt1" class="yui-module yui-overlay yui-tt" style="z-index:
                  2; left: 127px; top: 147px; visibility: hidden;">
                  <div class="bd">My text was set using the 'text' configuration
                  property</div><div class="yui-tt-shadow"/>
                  </div>
                  => You can change your tip's style in CSS:
                  #tt1 {
                  [Css Code]
                  }

                  Regard,

                  ragtek_ragga wrote:
                  >
                  > hi
                  > i'm putting a tooltip this way on my site:
                  >
                  > <script type="text/javascript">
                  > YAHOO.namespace("example.container");
                  > YAHOO.example.container.tt1 = new YAHOO.widget.Tooltip("tt1", {
                  > context:"hide_unread", text:"Diese Tabelle kann in den Einstellungen
                  > (später auch durch einen klick hier) deaktiviert werden!" });
                  > </script>
                  > <table class="tborder" cellpadding="$stylevar[cellpadding]"
                  > cellspacing="$stylevar[cellspacing]" border="0" width="100%"
                  > align="center">
                  > <tr>
                  > <td class="alt1"><span id="hide_unread" style="float:right;"><img
                  > src="http://www.ragtek.org/forum/images/bgold/buttons/collapse_thead.gif
                  > <http://www.ragtek.org/forum/images/bgold/buttons/collapse_thead.gif>"
                  > /></span>Es gibt <strong><a href="search.php?do=getnew"> neue
                  > Beiträge</a></strong> seit deinem letzten Besuch!</if></td>
                  > </tr>
                  > </table>
                  >
                  > it looks now like this: www.ragtek.org/tool.jpg
                  > the blue is the point where the mouse should be to show the tooltip
                  > the red is the tooltip
                  > 1. how can i set the style?
                  > 2. i'd like to show the tooltip more right! because now nobody is
                  > seeing it because it is left and the hoverpoint is right
                  >
                  >


                  --

                  *HUYNH CAO KY *.
                  HTK-INC
                  http://www.htk-inc.com <http://www.key-king.com/>
                  MSN Messenger huynhcaoky@...
                  Skype huynhcaoky
                Your message has been successfully submitted and would be delivered to recipients shortly.