test this page, please?

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:26

test this page, please?

Poster: wkilc
Dated: Saturday May 29 2004 - 1:16:28 BST

Hi folks,

I know a lot of knowledgable people frequent this forum so I am going to post something non-menu related hoping for a little help/feedback:

I've working on a registration system for an All-State music festival. I've got a neat little script that will dump info into a database, allow it to be recalled later for editing, a numerous other little features that should make it easier for both the people registering students and processig the data.

Anyway... the problem is that due to all the pull-down menus, we're looking at a 160kb page. I've removed the navigation menu and most of the other "extra" code. It is imperitve that the "Instrument" column, the biggest hog, uses a pull-down menu rather than an empty text field. Making any of the others plain text fields doesn't save too much space. I wish there were a way to remove the redundant code... but I fear its necessary for each of the 60 pull-down menus. My solution was to add a script that will show an animation, comforting users while the page is loading.. then display the enitre page when it was finished loading. Seems to work well for me... on dial-up or broadband, on Windows XP with IE 6 and Netscape 7.1.

On the "page is loading" message, I ended up using FLASH instead of an animated GIF because later on, on another page, when a user is trying to recall the saved data, a GIF would not animate in IE when the person clicked the "submit" button. (I've done a little research on this... its a IE bug that seems to not effect other browsers.) I've read that 95% of people have Flash... and if they didn't, then the animation just would show, right?

Anyway... here's a COPY of the page... how does the animation work for y'awl? Mac browsers? Anyone see any other wasy to slim down the page? I'm a music teacher by trade... I've invested alot of time playing with this... I'm not looking to overhaul the whole thing (I hope), but I wouldn't mind tweaking it if it would make it bettter.

Here's the page:

http://rimea.org/test/allstate.html

Thanks a bunch!

~Wayne

Poster: John
Dated: Saturday May 29 2004 - 5:06:29 BST

This is not meant to be snotty, but I'm going to point out the obvious...

1. This Forum is for customers of the Milonic menu system and any problems they might be having with that system.

2. It is not a general help-anybody with non-menu problems (unless they are a customer and, as happens rarely, ask for additional assistance).

3. You mentioned you "... removed the navigation menu...". Why? From another company? If it is Milonic, why not say so up front?

Poster: wkilc
Dated: Saturday May 29 2004 - 11:05:19 BST

Hi John,

Sorry for the confusion.

I am a Milonic client, I purchased a reseller 10 pack in September 2003. I have licensed version of the Milonic menu on 9 websites currently. I'm a big fan of the menu and Milonic's work and service in general, and have been recommending to friends since finding it last fall.

I wasn't trying to take advantage... I posted to the "Anything Goes" forum, only after checking to see that a few other people had recently asked for help for a couple of "non-menu" related issues in the same forum in the past several months. I knew that this forum was a great resource of helpful people with access to many different browsers and OS's.

I removed the Milonic menu from this single page of the website... the Milonic menu and its tag (below) appears on all 243 other pages. I simply removed it from this page, because I was going to have this page open in a new Window, and the page itself is already very big and slow to load, I'm actually considering removing al the graphics as well. When customers finishes the form, the re-direct page would display the menu again.

I guess what I was looking for more than anything was for someone to test the page's ability to display the "loading" animation in several different browsers and OS's.

Sorry... if I'm out of line I wouldn't be upset if you deleted my post.

~Wayne

<div style="position:absolute;visibility:hidden">
/*
Milonic DHTML Website Navigation Menu Version 5.0
Written by Andy Woolley - Copyright 2003 (c) Milonic Solutions Limited. All Rights Reserved.
Please visit http://www.milonic.com/ for more information.

*/
</div>

Poster: Andy
Dated: Saturday May 29 2004 - 12:19:32 BST

Hi Wayne,

As you know I like challenges so here's what I suggest.

Your code includes a lot of replication and this is considered bad practice in progamming.

What you could do is get JavaScript to build the select boxes for you. This will cut down on the amount of data you are sending and hopefully speed things up quite a lot.

Later on.......

Hmm, seems this hasn't helped much, here's the code:

Code:

<p>
<table>
<tr>
   <td valign=left align=top>
      <br>
   </td>
   
   <td valign=left align=top width="100%">
      <font color="red">*</font>Participants:
      <table BORDER COLS=4 WIDTH="55%">
      <tr bgcolor="#3A6B3C">
         <td>&nbsp;<b>LAST name, FIRST name</b></td>
         <td>&nbsp;<b>Division</b></td>
         <td>&nbsp;<b>Grade</b></td>
         <td>&nbsp;<b>Instrument</b></td> 
         <td>&nbsp;<b>Preference<br>(if applicable)</b></td>
      </tr>

      <script>
      registrations=60
      
      divisions=["Junior","Senior"];
      grades=["6"
      ,"7"
      ,"8"
      ,"9"
      ,"10"
      ,"11"
      ,"12"];
      
      instruments=["Jazz-Bass"
      ,"Jazz-Drums"
      ,"Jazz-Guitar"
      ,"Jazz-Piano"
      ,"Jazz-Saxophone-Alto"
      ,"Jazz-Saxophone-Baritone"
      ,"Jazz-Saxophone-Tenor"
      ,"Jazz-Trombone"
      ,"Jazz-Trumpet"
      ,"Percussion-Mallets"
      ,"Percussion-Snare Drum"
      ,"Percussion-Timpani"
      ,"Strings-Violin"
      ,"Strings-Viola"
      ,"Strings-Cello"
      ,"Strings-Double Bass"
      ,"Jazz Vocal-Soprano"
      ,"Jazz Vocal-Alto"
      ,"Jazz Vocal-Tenor"
      ,"Jazz Vocal-Bass"
      ,"Vocal-Soprano"
      ,"Vocal-Alto"
      ,"Vocal-Tenor"
      ,"Vocal-Bass"
      ,"Winds-Bassoon"
      ,"Winds-Clarinet-Bb"
      ,"Winds-Clarinet-Bass"
      ,"Winds-Euphonium-Baritone"
      ,"Winds-Flute"
      ,"Winds-French Horn"
      ,"Winds-Oboe"
      ,"Winds-Saxophone-Alto"
      ,"Winds-Saxophone-Baritone"
      ,"Winds-Saxophone-Tenor"
      ,"Winds-Trumpet"
      ,"Winds-Trombone"
      ,"Winds-Tuba"
      ]
      
      preferences=["Chorus"
      ,"Band"
      ,"Orchestra"
      ]
      
      function drawOptionsFromArray(arrayName)
      {
      returnText=""
      for(x=0;x<arrayName.length;x++)
      {
      returnText+="<option value=\""+arrayName[x]+"\">"+arrayName[x]
      }
      return returnText
      
      }
      
      _d=document
      
      for(y=1;y<registrations;y++)
      {
      
      _d.write(''+
      '      <tr>'+
      '      <td><INPUT TYPE="TEXT"  NAME="Name'+y+'" Size="27" value=""></td>'+
      '      <td>'+
      '      <SELECT NAME="Division'+y+'" Size="1">'+
      '      <option slected="">'+
      drawOptionsFromArray(divisions)+
      '      </SELECT>'+
      '      </td>'+
      '      <td>'+
      '      <SELECT NAME="Grade'+y+'" Size="1">'+
      '      <option slected="">'+
      drawOptionsFromArray(grades)+
      '      </SELECT>'+
      '      </td>'+
      '      <td>'+
      '      <SELECT NAME="Instrument'+y+'" Size="1">'+
      '      <option slected="">'+
      drawOptionsFromArray(instruments)+
      '      </SELECT>'+
      '      </td>'+
      '      <td>'+
      '      <SELECT NAME="Preference'+y+'" Size="1">'+
      '      <option slected="">'+
      drawOptionsFromArray(preferences)+
      '      </SELECT>'+
      '      </td>'+
      '      </tr>')
      }
      
      </script>   
      
      
      </table>
   </td>
</tr>
</table>
</p>

Even with the above code building the SELECT boxes it doesn't appear any quicker.

The only other option os to dynamically build the menus perhaps using code from http://www.milonic.com/scombo/

Cheers
Andy

Poster: Ruth
Dated: Saturday May 29 2004 - 18:05:39 BST

I'm on dial-up about 46k and it loaded in about 38 seconds in all browsers I tested, os win98se. Netscape 4.79, 6, 7.1, Opera 7.11, Firebird .07 The only one that did anything weird was 4.79 which even after it was loaded kept the little clock animation going. I waited two minutes and it was still going.

Ruth

Poster: John
Dated: Saturday May 29 2004 - 19:34:47 BST

Hi Wayne -

wkilc wrote:

Sorry... if I'm out of line I wouldn't be upset if you deleted my post.

No, now that I know what's going on that is certainly not necessary. The volunteer Team Members do not have access to the user database, so I had no way of knowing if you were a Milonic customer. Understand, it's not that we don't want to help, it's just that our help belongs to our customers.

So, my apologies for being just a bit suspicious.

It would appear Andy has been busy for you!

Thanks for your understanding.

Poster: wkilc
Dated: Sunday May 30 2004 - 4:17:03 BST

John, Andy & Ruth,

Thanks very much for your input and especially for your time! I just remembered that I have a version of Netscape 4.79 on my old laptop. Ruth, I had the same result you had... the page loaded... but the clock animation never went away in Netscape 4.79. I've read that NS 4.7x has always been a pain (just look at the Milonic menu... all that extra work to deal with this old browser). The older Netscape browser is thankfully becoming increasingly rare nowadays, right?... should I look for a correction or leave it alone? Might the correction be as simple as adding a extra line of code with language that Netscape 4.7x would understand? Is there a better way to do it than with ColdFusion? (That's what it's called, I believe.)

The code for the "please wait" loading message looks something like this. (I found in a "House of Fusion" forum.)

Code:

<body>
<cfflush> 
    <table 
      border="0" 
      cellpadding="0" 
      cellspacing="0" 
      id="PleaseWaitMessage" 
      width="100%" 
    ><tr><td 
      align="center" 
      valign="bottom" 
    ><span 
      style="font-size: 17px; font-family: 
verdana,arial,helvetica,sans-serif; 
font-weight: 400;" 
    ><b> 
      <br /> 
      <br /> 
      Please wait while form is loading...plus animation</b>
    </span></td></tr></table> 
    <cfflush> 


The main page (big form that takes a while to load) appears here


<script type="text/javascript"> 
if(document.getElementById) { 
     document.getElementById('PleaseWaitMessage').style.display='none'; 
     } 
else { 
     document.all.PleaseWaitMessage.style.display='none'; 
     } 
</script> 
</body>

Thanks all & have a good weekend!

~Wayne

Poster: John
Dated: Monday May 31 2004 - 4:53:14 BST

Wayne, it would appear something has changed, because the page just loaded for me in about 3 seconds flat. Again, I have a pretty high speed line, but it's definitely different than the other day.

However, you mention the possible use of some ColdFusion code on your page. Not possible. Your current page is .html, which will not allow any CF code to run. Also, CF requires a second server (ColdFusion!) be running concurrently, which is complete separate and apart from the regular web server (Apache, IIS, whatever).

If your host supports CF, then you could build this page dynamically very easily from a database (typically Access). It would be similar to what Andy worked out for you in Javascript, but in about 5% of the code. Given Andy did not see a speed difference I'm not sure if CF would help.

Poster: wkilc
Dated: Monday May 31 2004 - 13:33:13 BST

Hi John,

If it's loading faster today... could it be that its still in your cache? I have to delete my Temp Internet files everytime I test page, otherwise it loads instandly on my broadband connection.

The only thing that may possibly may make them load fatser is as Andy said, to make them load dynamically... but that's beyond my level of expertise. Andy was kind enough to write me a sample script, but in the end, he sadi it didn't help the load time very much. Thank you Andy for your effort!

I actually did change something... I removed the <cfflush> tags (which I didn't really understand) and replaced them with a simpler free JavaScript I found on usingit.com. This script contained a workaround for the older Netscape browser.

The new script trimmed about 3kb of the page, but not enough to make a major difference in load time. Again, my thought is that if the little warning "please wait" message works okay in most browsers, I can live with the page size.

The only thing funny about the new JavaScript is that in IE 6, when the page is loading, everything but the message remains hidden until its finshed loading, except for the pull-down menus that read "school" and "preference"... I see these while the rest of the page is still loading. Oh well.

I'd like for my little animation to load faster, too. I've optimized it down to 3.5kb... I just had a thought... I'm going to put the animation on a previous "welcome to registration" page (that page is only 7kb), but hide it... that way it should load faster from the user's cache when I need it, right?

Thanks again!

~Wayne

Poster: Andy
Dated: Monday May 31 2004 - 15:26:52 BST

The problem you have is the shear volume of SELECT objects. Even without any options they take quite a while to load. Seems SELECT boxes are not that efficient after all.

Anyway, all is not lost. What you can do is use text boxes instead. Then using the menu you can use the technique found here: http://www.reacthosting.com/v2/ to emulate a SELECT box.

All you need to do is have one menu for each of the categories. One for Grades, one for Instruments and so on. These menus are then re-used depending on which of the 60 rows is currently being activated.

I've done a little demo if this here:

http://www.milonic.com/users/rimea/

Cheers
Andy

Poster: John
Dated: Tuesday June 1 2004 - 5:31:04 BST

wkilc wrote:

I actually did change something... I removed the <cfflush> tags (which I didn't really understand) and replaced them with a simpler free JavaScript I found on usingit.com.

That would have made no difference either way, because those tags would not work in your setup, as explained above.

Poster: kevin3442
Dated: Tuesday June 1 2004 - 20:40:44 BST

Andy wrote:

...I've done a little demo if this here:

http://www.milonic.com/users/rimea/

Very nice indeed. Especially cool that the same set of menus are used for each row... much less overhead to load. A couple of comments:

(1) Using the transparent.gif as an anchor for the popup() is a clever approach. Another idea might be to put in a "down arrow image" to the right of the text inputs, so that the pseudo-select boxes (the menus) look more like select boxes. You could even use the down arrow image as the popup() point (offsetting to the left to position the menu).

(2) In addition to onclick, you might also want to popup() the menus using the onfocus event. That way the selections will show for someone tabbing through the form.

(3) How about having an initial page that simply asks how many students the visitor wants to register. That input could be passed to the form page, and used to generate only the required number of rows (sort of like Andy's first idea of generating the select boxes dynamically). Might speed up the load time a little more.

Cheers,

Kevin

Poster: wkilc
Dated: Tuesday June 1 2004 - 22:07:24 BST

Thank you Andy!!!! John and Kevin, too! I sincerely appreciate everyone going well above and beyond the call of duty to help me here. Give me your PO boxes and I'll send you all cookies next time I bake!

Quote:

(1) Using the transparent.gif as an anchor for the popup() is a clever approach. Another idea might be to put in a "down arrow image" to the right of the text inputs, so that the pseudo-select boxes (the menus) look more like select boxes. You could even use the down arrow image as the popup() point (offsetting to the left to position the menu).

This sounds great... because my only concern is people might "tab" their way through and simply type in those text boxes rather then slect from the menu. (Only clicking the box brings up the menu.)

Quote:

(2) In addition to onclick, you might also want to popup() the menus using the onfocus event. That way the selections will show for someone tabbing through the form.

Oh yeah... guess I should have kept reading. This is what I'm talking about. This sounds like a perfect solution. I'm not a programmer, I don't want to mess up Andy's code... to modify the (onclick) to the (onfocus). I'm going to try to do this... would it simply invlove changing any lines that for example read:

Code:

by changing them to

Code:

Quote:

(3) How about having an initial page that simply asks how many students the visitor wants to register. That input could be passed to the form page, and used to generate only the required number of rows (sort of like Andy's first idea of generating the select boxes dynamically). Might speed up the load time a little more.

This sounds good... I was considering doing this... but the number of students a teacher may register might change over the process. They may pick 50 or less, and them decide a few weeks later when recalling the data to work on it that they now need 53. The only option at that point might be to submit a second form? I have worked it so that the form will ignore any blank rows when it is ultimately submitted. If there is no text in the name field... it doesn't exist. Andy's modification has already cut the load time down to less than 1/3 of the orginal form. This, along with the "please wait" animation (which will go away when the page finished loading), more than satisfies me. There is a a second page, just the the first, that will be used used when teachers would recall their data, which on top of the 160kb of code contained an extra 45 kb of JavaScript to restore the original pull-down menus. Now that the form would technically be using text-fields... I believe that solves that problem as well!

Also... can anyone else with Netscape 7.1 test Andy's demo? It looks good, except that the "Instrument" menu appears way down near the base of the browser window. I imagine that's something simple.

Thank you! Thank you!

~Wayne

Poster: Andy
Dated: Wednesday June 2 2004 - 17:53:28 BST

Version 5.22pr1 has been posted up (NOT LIVE THOUGH - JOHN)

This goes some way to fixing the problem with Netscape 7.0.

Let me know if there is anything else outstanding.

http://www.milonic.com/users/rimea/

Cheers
Andy

Poster: John
Dated: Wednesday June 2 2004 - 20:20:29 BST

Andy wrote:

Version 5.22pr1 has been posted up (NOT LIVE THOUGH - JOHN)

OK, OK - I got it :!:

Poster: wkilc
Dated: Saturday June 5 2004 - 2:39:28 BST

Thank you Andy for the Netscape fix! You 'da man!

I've begun trying to implement the menu...

Here's the menu... I changed the first line (for now) to use [onfocus] rather than [onclick]... seems to work great... thanks Kevin!
page 1: http://www.rimea.org/members/forms/alls ... state.html
(Of course, because its not a real-pull down menu, folks cannot navigate individual menus with the up/down arrows... but the idea was that they see the menus, right?... otherwise someone tabbing through it would miss them completely?)

There's a separate (& slightly different) page used when the site restores "saved" registrations. Here's that form:
page2: http://www.rimea.org/members/forms/alls ... state.html

...menu still works on page2, just fine. (Previously I used a series of small JavaScripts to restore the pull-down menus... but since these are now technically text fields... it's a much simpler process.)

Here's where I run into a snaffu...
Login to retrieve a saved sample form here:
page3: http://www.rimea.org/members/forms/allstate/login/
E-mail: test __at__ rimea.org
Password: JYzBCb6M

When the script on the login page restores the saved data, its "browser_out" page is page2 mentioned above... except now, the menu functions, but cannot change the values in the text fields. Clicking on menu gives this error:
(Error: Object doesn't support this property or method).

I fugured this probably has something to do with the fact that in order to restore the saved values from the database, I had to define the text fileds as vaule=[Division1] and value=[Instrument1], etc..., but it worked BEFORE the values were restored on page2 (above).

Can anyone see a work-around?

Thanks again.

~Wayne

Poster: wkilc
Dated: Thursday June 17 2004 - 3:18:19 BST

Hello gang,

Problem solved! When recalling data, my form processing Perl script rendered the page, and it ignored script tags with all caps, i.e. <SCRIPT></SCRIPT>. This caused the error. Modifed the form script to be case insensiive, now works like a charm.

THANK YOU! THANK YOU!

Thanks Andy! Long live Milonic!

Very happy to be part of this community...

~Wayne

Re: test this page, please?

Poster: Anonymous
Dated: Monday October 19 2009 - 0:19:15 BST

my .png image that is supposed to be transparent has a greyish background in IE, and it takes the HTML tag "100%" width to be relative to the DIV of the whole page instead of relative to itself in firefox. IE has a more open feel too it though at least sometimes. url deleted Usually people try to make it look relatively the same for each browser, but its cool if the difference produces good looking results, im just going to try to get the image to be transparent.

Re: test this page, please?

Poster: Ruth
Dated: Monday October 19 2009 - 19:45:57 BST

Hi,

That image background is only in IE 6 and below. In those IE versions PNG graphics support transparency only with a 256-color palette. If the transparent PNG images have greater color depths, the transparent parts will be opaque. You can take a look at this post which has a solution

http://www.dynamicdrive.com/forums/show ... hp?t=22176

Or try a search on the web for IE and PNG problems and there are probably other solutions available

Ruth

Milonic for Miracles

Poster: mfurf
Dated: Friday October 23 2009 - 2:19:26 BST

Hey John, Ruthie et al:

Just thought I would stop by and reconnect as I'm still using Andy Wooley's great menu system and it works perfectly for my website including my milonic Zany Menu which scrolls up and down when the user scrolls the iframe.

I'll try to look in here more often. As I've said before, that Andy Wooley is some cat! I couldn't exist without his great menu system.

/mfurf

Re: test this page, please?

Poster: Ruth
Dated: Friday October 23 2009 - 6:25:43 BST

Hiya Mfurf,

Long time, you sound great! Andy's working on a new menu called webplugs. I'm not up on it, but given it's Andy, then I'm sure it's great

Ruth

Re: test this page, please?

Poster: mfurf
Dated: Friday October 23 2009 - 12:50:18 BST

Thanks Ruth!!

Webplugs, huh? Now what could that be all about?

/mfurf

Re: test this page, please?

Poster: Ruth
Dated: Friday October 23 2009 - 19:19:26 BST

Try here, mfurf viewtopic.php?f=8&t=10154

They just put out the first zip file, though I think it's still in 'beta' I mean it hasn't been released yet, they are working on the documentation. I still take care of whatever I can on V5. Trying out webplugs, which is what so many of us were calling V6, but it is really different. I would guess that once I can figure it out, I'll help on that, also.

Ruth