1 2 3 Previous Next 93 Replies Latest reply on Jan 13, 2011 11:24 AM by ATD

    horizontal bar Scroolling.

    Vedant
      hi,

      i want to dispaly a report with horizontal bar Scroolling.

      GHow can i do this.


      Thanks

      Edited by: 805629 on Jan 6, 2011 3:33 AM

      Edited by: 805629 on Jan 6, 2011 9:17 PM
        • 1. Re: horizontal bar Scroolling.
          ATD
          1 person found this helpful
          • 2. Re: horizontal bar Scroolling.
            jariola
            Hi Andy,

            Nice sample.
            it just did give me idea to try same with jQuery
            http://actionet.homelinux.net/htmldb/f?p=100:94

            jQuery code look like this
            $(function(){
             $('#report_data_#REGION_ID# td,#report_data_#REGION_ID# th').css({"white-space":"nowrap"});
            
             var lTH=$('#report_data_#REGION_ID# th:nth-child(1)');
             var lTD=$('#report_data_#REGION_ID# td:nth-child(1)');
            
             $('#report_data_#REGION_ID#').children().wrap('<tr/>').wrap('<td valign="top"/>').wrap($('<div/>',{"css":{"overflow-x":"scroll","width":"400"}})).wrap($('<table/>',{"cellspacing":0,"cellpadding":0,"border":0,"class":"apexir_WORKSHEET_DATA"}));
             var lNewTable=$('<table/>',{"cellspacing":0,"cellpadding":0,"border":0,"class":"apexir_WORKSHEET_DATA"});
             lNewTable.append($('<tr/>').append(lTH));
            
             lTD.each(function(i){
              lNewTable.append( $('<tr/>').append( $(this) ) );
             });
             lNewTable.append( $('<tr/>').append( $('<td/>',{"text":"\u00A0"}) ) );
            
             $('#report_data_#REGION_ID#').children('tr').prepend( $('<td valign="top"/>').append(lNewTable) );
            });
            Report template is just standard, but I did remove class from inner table

            Regrads,
            Jari
            1 person found this helpful
            • 3. Re: horizontal bar Scroolling.
              ATD
              Much easier with jQuery!

              But, of course, my example was pre-Apex 4 and I didn't use jQuery at the time :D
              1 person found this helpful
              • 4. Re: horizontal bar Scroolling.
                jariola
                Hi,

                I know you have done sample while ago.
                I hope my sample gives some ideas to you

                regards,
                Jari
                • 5. Re: horizontal bar Scroolling.
                  ATD
                  Oh, I have loads of ideas! Just haven't had much time to work them out yet!

                  I've done a few tutorials and created a few standalone pages - selecting items is a bit tricky (though, I'm sure it's all very logical!). I haven't seen any document that uses the {"css":{"overflow-x":"scroll","width":"400"}} that you've done - is there a website that shows tricks like that, as the jQuery.com site doesn't (or, least, i can't find it on there!)?

                  Andy
                  1 person found this helpful
                  • 6. Re: horizontal bar Scroolling.
                    jariola
                    Hi,

                    I do not remember where I did learn that, sorry.
                    Probably it was some other forum post.

                    If I find it , I post link

                    Regrads,
                    Jari
                    • 7. Re: horizontal bar Scroolling.
                      ATD
                      Thanks, Jari - I need the "tips and tricks" stuff as it looks easier than the way the tutorials show you :D
                      • 8. Re: horizontal bar Scroolling.
                        jariola
                        Hi,

                        I think it was this link
                        http://api.jquery.com/jQuery/#jQuery2



                        Regards,
                        Jari
                        1 person found this helpful
                        • 9. Re: horizontal bar Scroolling.
                          ATD
                          Ummm... That's actually the site I've been using! I've not seen anything about the {} methods though. Oh well, if it works... :D

                          Thanks

                          Andy
                          • 10. Re: horizontal bar Scroolling.
                            jariola
                            Hi,

                            There is that one example
                            $("<div/>", {
                              "class": "test",
                              text: "Click me!",
                              click: function(){
                                $(this).toggleClass("test");
                              }
                            }).appendTo("body");
                            
                            .....
                            Regards,
                            Jari
                            • 11. Re: horizontal bar Scroolling.
                              ATD
                              Silly me :) They didn't make that clear! I'll carry on searching - this is fun!!

                              Thanks again

                              Andy
                              • 12. Re: horizontal bar Scroolling.
                                jariola
                                Hi,

                                =)

                                I noticed my sample did not work with IE
                                I did make change and now it should work on IE also
                                function setReportScroll(){
                                
                                 $('#report_data_#REGION_ID# td,#report_data_#REGION_ID# th').css({"white-space":"nowrap"});
                                
                                 var lTH=$('#report_data_#REGION_ID# th:nth-child(1)');
                                 var lTD=$('#report_data_#REGION_ID# td:nth-child(1)');
                                
                                 var lBody=$('#report_data_#REGION_ID#').find('tbody').detach()
                                 
                                 var lNewTable=$('<table/>',{"cellspacing":"0","cellpadding":"0","border":"0","class":"apexir_WORKSHEET_DATA"});
                                
                                 lNewTable.append($('<tr/>').append(lTH));
                                
                                 lTD.each(function(i){
                                  lNewTable.append( $('<tr/>').append( $(this) ) );
                                 });
                                 lNewTable.append( $('<tr/>').append( $('<td/>',{"text":"\u00A0"}) ) );
                                
                                 $('#report_data_#REGION_ID#').append(
                                  $('<tr/>').append(
                                   $('<td valign="top"/>').append(lNewTable)
                                  ).append(
                                   $('<td valign="top"/>').append(
                                    $('<div/>',{"css":{"overflow-x":"scroll","width":"400"}}).append(
                                     $('<table/>',{"cellspacing":"0","cellpadding":"0","border":"0","class":"apexir_WORKSHEET_DATA"}).append(lBody)
                                    )
                                   )
                                  )
                                 )
                                }
                                Regards,
                                Jari

                                Edited by: jarola on Jan 6, 2011 7:06 PM
                                • 13. Re: horizontal bar Scroolling.
                                  ATD
                                  The sooner Microsoft drop IE the better ;) Far too many times, things work nicely in FireFox or Chrome/Iron and then fails completely in IE
                                  • 14. Re: horizontal bar Scroolling.
                                    vee
                                    Jari,Andy: Isn't that a lot of JS code just for adding a horizontal scroll bar (No offense intended)?.
                                    To be frank, I can't what all of that does.

                                    The following JS code simply add a horizontal scroll bar to a report(works in IE)

                                    <li>For standard reports*
                                    $('table.report-standard').wrap('<div style="min-width: 300px; _width:300px;overflow-x: auto; display: block; max-width: 500px;">');
                                    <li>and Interactive reports*
                                    $('table.apexir_WORKSHEET_DATA').wrap('<div style="min-width: 300px; _width:300px;overflow-x: auto; display: block; max-width: 500px;">');
                                    Note: Modify numeric values as required
                                    1 2 3 Previous Next