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

Tabview printing

Expand Messages
  • gino.lardon@smals-mvm.be
    Hello We use the yui tabview control to split up a large content page into serveral logical parts. However, when the surfer wants to print the page, all tabs
    Message 1 of 5 , Jun 28, 2007

      Hello

      We use the yui tabview control to split up a large content page into serveral logical parts.  However, when the surfer wants to print the page, all tabs should be printed automatically.  Currently, it seems that the control only allows to print the selected tab.


      Printing is done by using a specific print stylesheet.  Nothing more, nothing less  Is it possible to disable the tabview control in print mode and to display all tabs one below the other?


      Many thanks

      Gino Lardon
    • Caridy Patiño Mayea
      Hi Gino, Unfortunately, the tabview behavior don t use a CSS class to show/hide the tabs, instead use: setStyle with display - none As Nicholas Zakas
      Message 2 of 5 , Jun 28, 2007
        Hi Gino,

        Unfortunately, the tabview behavior don't use a CSS class to show/hide
        the tabs, instead use:

        setStyle with 'display' -> none

        As Nicholas Zakas recommend in his video, we can use a CSS class to
        change elements' styles. I hope the next releases of the YUI
        components be based on this principle.

        In this case, the element (a hidden TAB) has a inline style attribute
        (<div style="display: none;">), and you will not be able to print the
        content without use a javascript code to change the display value.

        Even when you can use the attribute "media" in the style tag in the
        header of the page. If the tabview component will be based on the
        Nicholas principle, we will be able to define something like this:

        <link rel="stylesheet" type="text/css" media="screen"
        href='/build/tabview/assets/tabview.css'/>
        <link rel="stylesheet" type="text/css" media="print"
        href='/build/tabview/assets/tabview-print.css'/>

        And redefine the visual pattern for printing.

        Sorry, but I don't think you can solve this problem, at least without
        write your own code.

        pd: if you solve this problem with the actual tabview component, let
        me know... ;-)

        Regards
        Caridy (caridy at gmail.com)
        http://bubbling.comarq.com/

        --- In ydn-javascript@yahoogroups.com, gino.lardon@... wrote:
        >
        > Hello
        >
        > We use the yui tabview control to split up a large content page into
        > serveral logical parts. However, when the surfer wants to print the
        page,
        > all tabs should be printed automatically. Currently, it seems that the
        > control only allows to print the selected tab.
        >
        > Printing is done by using a specific print stylesheet. Nothing more,
        > nothing less Is it possible to disable the tabview control in print
        mode
        > and to display all tabs one below the other?
        >
        > Many thanks
        > Gino Lardon
        >
      • gino.lardon@smals-mvm.be
        Hi Candy
        Message 3 of 5 , Jun 29, 2007
          Hi Candy

          <<
          Sorry, but I don't think you can solve this problem, at least without
          write your own code.

          >>

          That is what I feared ...
          Should we file a new feature request?


          <<
          pd: if you solve this problem with the actual tabview component, let
          me know... ;-)
          >>


          I will !


          Many thanks
          Gino Lardon
        • gino.lardon@smals-mvm.be
          Hi Caridy ), and you will not be able to print the
          Message 4 of 5 , Jul 4, 2007
            Hi Caridy

            <<
            In this case, the element (a hidden TAB) has a inline style attribute
            (<div style="display: none;">), and you will not be able to print the
            content without use a javascript code to change the display value.
            ...
            pd: if you solve this problem with the actual tabview component, let
            me know... ;-)
            >>


            There is a way to overrule inline styles via an external stylesheet.  
            Add this to your print stylesheet:

            .yui-navset .yui-content div {display:block !important;}


            I have already succesfully smoke tested this on IE6 and FF2 on WinXP and Safari and FF2 on MacOS.

            Best regards
            Gino Lardon
          • Caridy Patiño Mayea
            Hi Gino, That s great, I forgot that we can use this in the CSS for printing... Then we have just 2 problems: 1. Distributing the contents after the
            Message 5 of 5 , Jul 5, 2007
              Hi Gino,

              That's great, I forgot that we can use this in the CSS for printing...

              Then we have just 2 problems:

              1. Distributing the contents after the corresponding tab title.
              2. A solution for dynamic tabs (how to deal with tabs that has been
              loaded yet).

              Some clue?

              Regards
              Caridy (caridy at gmail.com)
              http://bubbling.comarq.com/

              --- In ydn-javascript@yahoogroups.com, gino.lardon@... wrote:
              >
              > Hi Caridy
              >
              > <<
              > In this case, the element (a hidden TAB) has a inline style attribute
              > (<div style="display: none;">), and you will not be able to print the
              > content without use a javascript code to change the display value.
              > ...
              > pd: if you solve this problem with the actual tabview component, let
              > me know... ;-)
              > >>
              >
              > There is a way to overrule inline styles via an external stylesheet.
              > Add this to your print stylesheet:
              >
              > .yui-navset .yui-content div {display:block !important;}
              >
              >
              > I have already succesfully smoke tested this on IE6 and FF2 on WinXP
              and
              > Safari and FF2 on MacOS.
              >
              > Best regards
              > Gino Lardon
              >
            Your message has been successfully submitted and would be delivered to recipients shortly.