Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Re: crtics and testers wanted

Reply
Thread Tools

Re: crtics and testers wanted

 
 
Richard
Guest
Posts: n/a
 
      07-05-2003

"Richard" <anom@anom> wrote in message news:(E-Mail Removed)...
> http://www.1-large-world.com/states/
>
> Let me know which browsers it won't work in.
> Javascript menu so make sure it's on first.
> When you first load it the entire listing appears in the far right table,
> then when loaded only the first item appears.
>
> The beauty of this one is, I've got 150 images ranging from 3 to 10kb in
> size and the entire document when loaded is now only 18kb or so.
>
> Any ideas for a background appreciated.
> I also notice a few typos and those will get corrected.
>
> There will be more added in the future.
>


Included the style display none thing now and at least the images don't load
all at once and display right away.
What I'd like to do now is to avoid having all 150 images download upon
opening.
Only load what's needed on each click.



 
Reply With Quote
 
 
 
 
Bagbourne
Guest
Posts: n/a
 
      07-05-2003
"Richard" <anom@anom> wrote in message news:(E-Mail Removed)...
>
> Included the style display none thing now and at least the images don't

load
> all at once and display right away.


They do load all at once.

> What I'd like to do now is to avoid having all 150 images download upon
> opening.
> Only load what's needed on each click.


Yes, that's what you need to do. Add some javascript to create an image and
add it to the stat's div on the fly. Do not code the <IMG> tag into the div,
create it, and add it only when the user clicks on that state.

Because of the repetetive nature of the data, you can generate most if not
all of it with Javascript. Put the data into an array, and use
document.createElement() and document.createTextNode() calls to generate the
whole lot...

Of course you have to have your images named consistently they ALL have to
be "xx-flag.gif" ot whatever naming scheme you use. Obviously you wouldn't
include the whole URL of the image, I did in my test because they were on
your site.

Have a play around with this for a start:

<html>
<head>
<style type="text/css">

..flag {
height:100px;
width:120px;
}

..seal {
height:100px
}

</style>
<script type="text/javascript" src="jscript/utils.js"></script>
<script type="text/javascript">
displayedState = null;
function createStateImage(state)
{
if (displayedState != null)
{
displayedState.style.display = "none";
}
displayedState = document.getElementById(state);
if (displayedState == null)
{
alert('Author has not set up <div id="' + state + '">');
return false;
}
if (typeof displayedState.imagesSet == "undefined")
{
var gov = new Image();
gov.src = "http://www.1-large-world.com/states/" + state + "-gov.jpg";
var flag = new Image();
flag.className = "flag";
flag.src = "http://www.1-large-world.com/states/" + state + "-flag2.gif";
var seal = new Image();
seal.className = "seal";
seal.src = "http://www.1-large-world.com/states/" + state + "-seal.gif";
document.getElementById(state + "gov").appendChild(gov);
document.getElementById(state + "flag").appendChild(flag);
document.getElementById(state + "seal").appendChild(seal);
displayedState.imagesSet = "true";
}
displayedState.style.display = (displayedState.style.display == "none") ?
"" : "none";
}
</script>
</head>
<body>
<table border="1" style="height:400px">
<tr>
<td id="menu0">
</td>
<td id="menu1">
</td>
<td valign="top" style="width:500px">
<div id="al" style="display:none">
<h2>Alabama</h2>
<table>
<tr>
<td>Governor <br>Bob Riley</td>
<td id="algov"></td>
<td class="flag" id="alflag"></td>
<td class="seal" id="alseal"></td>
</tr>
</table>
</div>
<div id="ak" style="display:none">
<h2>Arkansas</h2>
<table>
<tr>
<td>Governor <br>Bill Clinton</td>
<td id="akgov"></td>
<td class="flag" id="akflag"></td>
<td class="seal" id="akseal"></td>
</tr>
</table>
</div>
<div id="co" style="display:none">
<h2>Colorado</h2>
<table>
<tr>
<td>Governor <br>Bob Riley</td>
<td id="cogov"></td>
<td class="flag" id="coflag"></td>
<td class="seal" id="coseal"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<!--

etc.......

-->
</body>
<script type="text/javascript">
/*
Build the array of links and add them to column 0 or column 1
*/
var stateCodes = "al/ak/co/az".split("/");
var stateNames = "Alabama/Arkansas/Colorado/Arizona".split("/");
var s
var i = 0;
for (s in stateCodes)
{
var menu = document.getElementById("menu" + ((i < 25) ? "0" : "1"));
var link = document.createElement("a");
link.style.display = "block";
link.onclick = new Function("", "createStateImage('" + stateCodes[s] + "');
return false;");
link.href = "#";
link.appendChild(document.createTextNode(stateName s[s]));
menu.appendChild(link);
i++;
}
</script>
</html>


 
Reply With Quote
 
 
 
 
Richard
Guest
Posts: n/a
 
      07-05-2003

"Bagbourne" <(E-Mail Removed)> wrote in message
news:be5tm9$ch7$(E-Mail Removed)...
> "Richard" <anom@anom> wrote in message

news:(E-Mail Removed)...
> >
> > Included the style display none thing now and at least the images don't

> load
> > all at once and display right away.

>
> They do load all at once.
>
> > What I'd like to do now is to avoid having all 150 images download upon
> > opening.
> > Only load what's needed on each click.

>
> Yes, that's what you need to do. Add some javascript to create an image

and
> add it to the stat's div on the fly. Do not code the <IMG> tag into the

div,
> create it, and add it only when the user clicks on that state.
>
> Because of the repetetive nature of the data, you can generate most if not
> all of it with Javascript. Put the data into an array, and use
> document.createElement() and document.createTextNode() calls to generate

the
> whole lot...
>
> Of course you have to have your images named consistently they ALL have to
> be "xx-flag.gif" ot whatever naming scheme you use. Obviously you wouldn't
> include the whole URL of the image, I did in my test because they were on
> your site.



Thanks. I'll try that out and see what happens.
It's a lot easier to give a working example rather than try to explain it.



 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: crtics and testers wanted spaghetti HTML 2 07-07-2003 05:55 PM
Re: crtics and testers wanted Jacqui or (maybe) Pete HTML 4 07-05-2003 03:59 PM
Re: crtics and testers wanted Hywel Jenkins HTML 0 07-05-2003 07:37 AM
Re: crtics and testers wanted Beauregard T. Shagnasty HTML 0 07-05-2003 05:07 AM
Re: crtics and testers wanted Bagbourne HTML 1 07-05-2003 04:52 AM



Advertisments