This discussion is archived
1 2 3 7 Previous Next 93 Replies Latest reply: Jan 13, 2011 3:24 AM by ATD RSS

horizontal bar Scroolling.

Vedant Explorer
Currently Being Moderated
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
  • 2. Re: horizontal bar Scroolling.
    jariola Guru
    Currently Being Moderated
    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
  • 3. Re: horizontal bar Scroolling.
    ATD Guru
    Currently Being Moderated
    Much easier with jQuery!

    But, of course, my example was pre-Apex 4 and I didn't use jQuery at the time :D
  • 4. Re: horizontal bar Scroolling.
    jariola Guru
    Currently Being Moderated
    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 Guru
    Currently Being Moderated
    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
  • 6. Re: horizontal bar Scroolling.
    jariola Guru
    Currently Being Moderated
    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 Guru
    Currently Being Moderated
    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 Guru
    Currently Being Moderated
    Hi,

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



    Regards,
    Jari
  • 9. Re: horizontal bar Scroolling.
    ATD Guru
    Currently Being Moderated
    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 Guru
    Currently Being Moderated
    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 Guru
    Currently Being Moderated
    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 Guru
    Currently Being Moderated
    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 Guru
    Currently Being Moderated
    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 Guru
    Currently Being Moderated
    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 7 Previous Next

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points