Contact us
Jump to content

Hiding default style/look before JavaScript fires

Franco Simone

By Franco Simone
in WebFOCUS

 Share

Recommended Posts

Franco Simone Rookie

Franco Simone

Posted
Posted (edited)

At today's ibi Expert Office Hours online meeting someone (Reid I think) mentioned a problem he had about javascript and styling/content being flashed before the javascript had a chance to change it.  It was suggested that this get posted on these forums.

I had a similar problem.  I took care of it all within the single fex file.  My issue was that I wanted to show only half of the columns displayed in a report (every odd one I think), and the javascript did this well, but when the fex first loaded all the columns would display and then quickly change to only half of them (after the jQueryfired).  Here is my solution to that... hope you understand it...

Step 1 ) This is at the very top of my FEX... it will hide the whole page by default.  You can ignore the buttons there.  Those are some buttons to hide or show columns.  But Reid's problem was only to show everything only after the javascript fired.  The display:none in the body tag is important here though.
-HTMLFORM BEGIN
<HTML>
<!--The display:none here will hide the whole body so that the CSS and JQuery can do their magic first-->
<body style="display: none;">
    <button id="css_toggle" title="Shows or hides some columns below">Toggle Summary/Detail View</button>
    <button id="time_toggle" title="Toggles between Minutes or Hours">Toggle Hours/Minutes View</button></br>
    </br></br>
-HTMLFORM END

Step 2) Well not really a step... this next part of the fex is the TABLE (or GRAPH) call, all the json to style it and the other usual WebFOCUS code.  I didn't paste it here...

Step 3) This is where most of the magic happens... Please read the comments that I put there more than a year ago, 'cause that version of me was much more in tune with what I did then.  All this code is at the very bottom of the FEX file, after the TABLE command.  I think the only line that Reid would need is the  $('body').css({display:"block"}); line.  This makes it so that only after the html document is ready, does the body actually show.  And this line should be that last one, after all the formatting is taken care of in the lines above.  Again, I haven't touched this in over a year so I'm a little rusty.  And below isn't exactly what Reid talked about, but I think it should help.
-* [FS] 20231024 - Really fun stuff.  So what this bit does is hide and show some columns
-* [FS] 20231024 - in a table.  This bit td:nth-child(n+3):nth-last-child(n+5) says to select
-* [FS] 20231024 - the 3rd to 5th last TDs in a row.  The other x6-12 bit is for some special
-* [FS] 20231024 - formatting that needed to be dealt with also (hidden).
-* [FS] 20231024 - ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-* [FS] 20231024 - There is also a button at the top of this file to drive this functionality
-* [FS] 20231024 - ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-HTMLFORM BEGIN
<HTML>
<HEAD>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        //This deals with some across columns than need to get their colspan reduced from 8 to 4
        $('td.x7, td.x8').attr('colspan',4);
        //This function will hide all but the first and Total columns
        $('#css_toggle').click(function() {
               $('td:nth-child(n+2):nth-last-child(n+9), td.x6, td.x7, td.x8').toggleClass('hideThem');
            $('td.x7, td.x8').removeClass('switchTimes');
        });
        //This initializes the table
        $('#css_toggle').click();

        //This function will toggle the visibility of all the columns starting from the second column.
        $('#time_toggle').click(function() {
             $('td:nth-child(n + 2)').toggleClass('switchTimes');
            $('td.x7, td.x8').removeClass('switchTimes');
        });
        //These next two lines initialize the table
        $('td:nth-child(2n + 3)').addClass('switchTimes');
        $('#time_toggle').click();
        //This makes it so that the body is displayed.  Initiatially we want to hide the body so that the user doesnt see all those columns that get hidden by jquery
        $('body').css({display:"block"});
    });
</script>
<style>
    .hideThem {
        font-weight: bolder;
        font-style: italic;
        display: none;
    }
    .switchTimes {
        background-color: #DD0;
        display: none;
    }

</style>
</HEAD>
-HTMLFORM END

Edited by Franco Simone
  • Like 3
David Beagan Community Regular

David Beagan

Posted
Posted (edited)

Thanks, I like it.

I played around with it. Here's an example, of using it to do a fade in effect on the report. Jquery library is accessed on the local server (I think installed by default). 

-HTMLFORM BEGIN
 <html> <body style="display: none;">
-HTMLFORM END

TABLE FILE GGSALES
SUM UNITS
BY REGION
BY ST
ON TABLE SET PAGE NOLEAD
END

-HTMLFORM BEGIN
<html>
<head>
<script src="/ibi_apps/jquery/js/jquery.min.js"></script>
<script>
    $(document).ready(function(){
    $('body').fadeIn(3000);
    });
</script>
</head>
-HTMLFORM END

 

Edited by David Beagan

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...
© 2024 Cloud Software Group, Inc. All rights reserved.