Link to home
Start Free TrialLog in
Avatar of Bruce Gust
Bruce GustFlag for United States of America

asked on

How can I avoid my "hide/show" from being seen when my page first loads?

Head out to http://hihatwebdesign.com/test/ and you'll see the page that shows a working model of what I'm currently struggling with.

I've got a recordset that I throw in a temporary table and then break it into two separate recordsets, one being the even numbered ids, the other being the odds in order to facilitate a two column presentation. The page I have referenced above is just the resulting HTML, I didn't recreate the whole database dynamic - I've got that code attached. I tried a couple of different approaches, but the code that I have attached is what gave me what I was looking for.

But...

When I run this from my live server, all of the "hidden" text fields show up briefly and then go away after the page has finished completely loading. What can I do differently that would allow the page to load a little more elegantly? Even if I had a little "loading..." verbiage on the page so it didn't look so clunky as it uploaded.

What do you think?

Here's my code:

	public function term_row_number() {
		
		global $mysqli;
		
		if(!isset($_GET['letter']))
		{
			$sql=" SELECT * FROM `terms` WHERE term REGEXP CONCAT('^(the |a )?', 'a')";
			if(!$query=$mysqli->query($sql))
			{
				$err = 'your search query failed because: '
				.'ERRNO:'
				.$mysqli->errno
				.' ERROR:'
				.$mysqli->error
				.PHP_EOL
				.' and the epic failure we\'re talking about is: '
				.$query.PHP_EOL;
				trigger_error($err, E_USER_NOTICE);
			}			
		}
		else
		{
			$the_letter = $_GET['letter'];
			
			$sql=" SELECT * FROM `terms` WHERE term REGEXP CONCAT('^(the |a )?', '$the_letter')";
			if(!$query=$mysqli->query($sql))
			{
			$err='query_failure:'
			.'ERRNO: '
			.$mysqli->errno
			.'ERROR:'
			.$mysqli->error
			.PHP_EOL
			.' QUERY: '
			.$query
			.PHP_EOL;
			trigger_error($err, E_USER_WARNING);
			}	
		}
		//delete the current term_temp
		
		$sql_4 = "drop table term_temp";
		$query_4 = $mysqli->query($sql_4);
				
		$sql_3 = "CREATE TABLE `term_temp` (
		  `id` int(11) NOT NULL AUTO_INCREMENT,
		  `term` varchar(150) NOT NULL,
		  `definition` blob NOT NULL,
		  PRIMARY KEY (`id`)
		) ENGINE=InnoDB AUTO_INCREMENT=4306 DEFAULT CHARSET=latin1";
		$query_3 = $mysqli->query($sql_3);
		
		//for whatever reason, I had a hard time ensuring that the term_temp table started with an id of 1, so...
		
		$sql_5="ALTER TABLE term_temp AUTO_INCREMENT=1";
		$query_5=$mysqli->query($sql_5);
		
		while($row=$query->fetch_assoc())
		{
			$the_term=$mysqli->real_escape_string($row['term']);
			$the_definition=$mysqli->real_escape_string($row['definition']);
			$sql_1="insert into term_temp (term, definition) values ('$the_term', '$the_definition')";
			if(!$query_1=$mysqli->query($sql_1))
			{
			echo $mysqli->error;
			}
		}
    }

Open in new window


After I get the temp table loaded up with my recordset, I then create and display two tables, one being the odd ids, the other being the even ids.

We're looking at total of 500 rows, so even if there's a more elegant way of retrieving and displaying the data, my concern is that there still needs to be something that prevents the data from being displayed until it's ready to presented completely intact.

How can I do that?
SOLUTION
Avatar of Robert Granlund
Robert Granlund
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
The problem can't be solved in PHP.

If you set the style "display:none" on the class slidingDivTerms I thing your problem will be solved.
Because the div will be hidden right on the page load.
You must be hidding those divs in javascript or jquery when the page ends loading i guess.
ASKER CERTIFIED SOLUTION
Avatar of gr8gonzo
gr8gonzo
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
500 rows in two tables with scripting is going to be a problem because table generally need to passes to be rendered, and if there is also scripting that makes the rendering even slower because when script is encountered during parsing, the parsing is suspended  until the script is finished executing because it may have to go back and modify layout.  The problem is that the layout is table based and the rendering engine is completing the layout and flow steps beforee all the styling is complete so it displays the layout and then has to wait for the style mapping to be completed.

The solution of using non-table elements will eliminate the double pass, but you could still have a problem if there is a lot of line scripting and you might then have to go to using defer on the scripts so thst they do not execute until parsing is completed.  That way both layout and painting should not experience enough of a delay to cause a problem.

Cd&
Avatar of Bruce Gust

ASKER

rgranlund - sweet little approach! Thank you!

Gonzo - thanks for taking the time to elaborate like you did. Your counsel inspired me to revisit what I had done and it was then that I was able to determine that the temp table that was supposedly being deleted with every session, wasn't being deleted at all. So instead of having to process a couple hundred rows, after several rounds, there were thousands upon thousands of rows to be process which is why I was seeing the delay.

Once I remedied that nonsense, we were gold.

Rock on!