Text and Image Crawler Expanding Table

[MikeOrlando02]

1) Script Title: Text and Image Crawler

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...wler/index.htm

3) Describe problem: What a great script! Just working on the finishing touches. I have my script set for a width of 748 within a tablet that has a width of 750. The script scrolls through 5-7 photos and works well. When the page loads; however, the script pushes the table to 100% of the sceen width until the page completely loads. On broadband this is only seen as a quick "jumping" of the table from full size and then back to 748 where it should be. On dialup this is more evident. Any work arounds? know that tables and really complicate things!

[jscheuer1]

Yes, avoid tables around this script's division if at all possible.

If you want more help, please tell me what browser(s) this problem is seen in and provide a link to a page where the problem can be observed.

[MikeOrlando02]

Thanks for the quick reply.

I am using IE8; however I hear it happens in other browers.

http://www.crivitzrescue.com/newsite/

This is a test build of the site. You can see when your script is loading, brief, the table expands to 100% and then after loading goes back the way it should be.


Also, is there anything build into the script that would allow me to display a static image in place of the script in the event the person doesn't have JAVA?


Thanks again!

[jscheuer1]

Not really happening in Firefox or Opera here, but that's probably because those browsers are capable of initializing the crawler sooner. IE 8 can too, but only when it's in IE 8 standards mode (your lack of a valid URL DOCTYPE, and perhaps your markup, throw IE 8 into Quirks mode). But that isn't so critical because IE 7 and less will still have to wait (if a table is involved) for page load, otherwise they will give an error.

Here's what I would suggest, killing two birds with one stone, place this in the head of the page:

<style type="text/css">
#mycrawler2 {
 width: 750px;
 overflow: auto;
 white-space: nowrap;
}
</style>

What this should do is limit the width of the crawler to the width it will be until the script sets it. And for non-javascript enabled users, they will see all of the images, but restricted to that same width, with a horizontal scrollbar for that division which allows them to scroll it to see the other images.

Some additional tweaks may be required.

[jscheuer1]

In my previous post I outlined the basic concept here but mentioned that additional tweaks may be required. Use this (highlighted) instead:

<title>Crivitz Rescue Squad, Inc.</title>
<style type="text/css">
#mycrawler2 {
 width: 750px;
 height: 195px;
 overflow: auto;
 white-space: nowrap;
 padding: 2px 0;
}
#mycrawler2 img {
 vertical-align: top;
}
</style>
<script type="text/javascript">
document.write('<style type="text/css">#mycrawler2 {height: 180px;}<\/style>');
</script>
<script type="text/javascript" src="crawler.js">
/*
Text and/or Image Crawler Script ©2009 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/ username: jscheuer1
This Notice Must Remain for Legal Use
*/
</script>

[MikeOrlando02]

Thank you very much! I tried the first snippet and that corrected the issue, then I added the code from the second... I didn't notice any additional improvments; however you would know best.

Thanks again for the quick responses.

[jscheuer1]

The second version is just better for non-javascript enabled users. With javascript enabled you shouldn't notice any real difference in the two versions.

[jscheuer1]

I should also mention that there are a few crucial values in this bit that may have to be changed if you change your crawler:

<style type="text/css">
#mycrawler2 {
 width: 750px;
 height: 195px;
 overflow: auto;
 white-space: nowrap;
 padding: 2px 0;
}
#mycrawler2 img {
 vertical-align: top;
}
</style>
<script type="text/javascript">
document.write('<style type="text/css">#mycrawler2 {height: 180px;}<\/style>');
</script>

The width should be the width set in the crawler's initialization. The first height should be the height set in the crawler's initialization plus 15 (or possibly slightly more or less, you would have to view in a non-javascript enabled browser, preferably IE 7 or 8, as that is where this height would be most crucial, too little and non-javascript users will see a vertical scroll bar, too much and the page will have too much added height with javascript disabled). IE 8 can easily have javascript turned off, hit the F12 key, then choose 'Disable' from the menu, and 'Script' from the drop down (to re-enable script later just make the same menu choices again). The padding should be the padding set in the crawler's init, and the second height should be the crawler's height set in its init.

[MikeOrlando02]

I understand. When I add my images, there are more that what fit within the table width so I also get horizontal scrollbars.

Since the div class="marquee" tag with the images is outside of the script tag I cannot use <noscript> to have alternative content when JAVA is not present.

Is there a way to completly disable/hide your script and images if JAVA is not present and use <noscript> for alternative content?


Thanks!

[jscheuer1]

Not counting whatever the normal scrollbar(s) for the window are, there should only be a horizontal scrollbar below the images, and only if javascript is not available. It is possible that IE may make a brief horizontal bar even with javascript enabled, to avoid that add (highlighted):

<style type="text/css">
#mycrawler2 {
 width: 750px;
 height: 195px;
 overflow: auto;
 white-space: nowrap;
 padding: 2px 0;
}
#mycrawler2 img {
 vertical-align: top;
}
</style>
<script type="text/javascript">
document.write('<style type="text/css">#mycrawler2 {overflow: hidden; height: 180px;}<\/style>');
</script>

Now it is my understanding that if javascript is not available that it would be nice to have all of the images displayed in the same position and width, but with a horizontal scrollbar. And that is just what will happen. But if you would prefer to make up your own noscript content, we can do something else:

<style type="text/css">
#mycrawler2 {
 width: 750px;
 height: 195px;
 overflow: auto;
 white-space: nowrap;
 padding: 2px 0;
 display: none;
}
#mycrawler2 img {
 vertical-align: top;
}
</style>
<script type="text/javascript">
document.write('<style type="text/css">#mycrawler2 {display: block; overflow: hidden; height: 180px;}<\/style>');
</script>

This should make the crawler invisible for non-javascript enabled browsers, allowing you to place a <noscript></noscript> tag either immediately before or immediately after the mycrawler2 division. You may place your non-javascript content in the noscript tag.