[DHTML] The Crawl

[jscheuer1]

1) CODE TITLE: The Crawl

2) AUTHOR NAME/NOTES: jscheuer1

3) DESCRIPTION: A highly configurable multiuse horizontal marquee script. The Crawl can go left or right, contain text or images or both. It is a continuous marquee that avoids blank space in between passes. It can optionally be mouse driven like DD's Cmotion script. OO code allows as many marquees on the page as one wants, and with no onload event, as well as built in polling for markup not already on the page, it will play nice with many other scripts. Setup is fairly simple, you just put the contents in a division with the class of marquee and a unique id, and initialize with a short script after the closing div tag for that marquee.

4) URL TO CODE: http://home.comcast.net/~jscheuer1/side/thecrawl/

[ddadmin]

Strange name, but very nice nonetheless! It looks like you've pretty much encapsulated most of the frequently requested features in a scroller and rolled it into one. On the top of that list is the continuous, no gap sequence between the last and first slide.

On another note, it seems you've taken a liking to wrapping a function in an anonymous function to execute it immediately?

[jscheuer1]

Thanks. I'm open to suggestion as to the name.

I forgot to mention that it is very cross browser as well - tested in NS 7.2 (includes presumably all FF - I tested in v3.0.6) and up on the Mozilla front, IE 5.5 (perhaps will work in IE 5) and up (including 8 - which was a pain - I hope they fix/change a number of things about that browser before actually releasing it), modern (and probably will work in earlier) Opera, Safari, and Chrome.

I'm still tweaking the script code and the demo page a bit as things strike me, but it certainly is release worthy at this point.

The main advantage in my opinion to the anonymous function wrap, and this can be achieved in other ways as well are that as a coding habit it gives you an object outside of the global scope that can be accessed from it if a single hook (as in this case) is provided. At the same time it allows you to code within it just as one can (but in my opinion much more riskily) within the global scope, with variables available to all functions. Immediate execution is a feature, but not so important in my opinion as the object space created. You can also (not used in this case) pass it objects, functions, strings etc. as arguments.

[ddadmin]

Still retaining the "crawl" word, what about:

- Crawler
- Text and Image Crawler
- Message Crawler

Yes I noticed the anonymous function wrap in your Expando Script as well. I've never tried such an approach yet, but it does seem to have some unique benefits.

[jscheuer1]

Text and/or Image Crawler:

I think would look good and sum it up pretty well, and the script file could then be named crawler.js. I hit on 'The Crawl' because looking at it in early development (I started with just text), it reminded me of what was called 'the crawl' seen on CNN in bygone days, and that many news/information networks feature(d) at the bottom of their screens.

I'll make the necessary changes to the demo index and script file now.

[jscheuer1]

OK, I've made those changes. I went back to test IE 5, just out of curiosity and it doesn't support Array.push or Object.hasOwnProperty, or white-space: nowrap, so I made modifications for that, in the hopes that (I could care less about IE 5 for the PC) it might still work for the odd IE 5 Mac user. I kept the advanced features for all modern browsers, just giving a slightly different path to IE less than 5.5 and supplying an Array.push function for those IE browsers without it.

IE 5 also doesn't support the 'encameling' method I used, so I made one for it. Others still use the more efficient method.

While I was at it, I eliminated all reliance on innerHTML.

[ddadmin]

Sorry for the delay, been fighting a cold, and just getting back to the swing of things. I've started putting together the script page on DD to feature The Crawler. It definitely is feature rich I must say. Here's a rough draft of the script page at this point.

Just some feedback at this point:

1) Potential bug: In IE7, if you view the draft page, a JS error is thrown. It seems to be based on where the marquee is added on the page. If I move the Crawler Marquee outside the table column so it's just inside the BODY tag, the error is gone.

2) This is just an observation/suggestion. I noticed if a Crawler consists of just images, the script will string them together so they appear all on one line. If there is a JS error on the page and the script doesn't run though, the page's width is stretched horizontally, potentially by a lot. This happened when I tried to add a second Crawler to the script page and the script failed in IE. I understand the logic behind stringing the content together, though I believe there are ways to do this without affecting the page's layout, even if it's temporary or when things fail.

3) A small rant: the "style" param. I think the "style" parameter could prove awkward/confusing to use for quite a few people. The double quotes syntax aside, from what I gather styles inside it affect the inner DIV of the marquee, not the marquee itself. But a lot of people don't know or understand the difference between the two. Defining a CSS border using the style param for example fails to add the border to the left/right edges- this needs to be done to the marquee DIV itself. This in turn requires that the user understand that the CSS class name for a marquee is in fact dynamic, something like:

<style type="text/css">

.marquee0{ /*read docs on class name convention used*/
border: 1px solid #CC3300;
}

</style>

This can all get rather confusing very quickly for newbies. Ideally I'd like to just remove the style param altogether, but I understand the main reason for its existence- so users can specify things like padding of the marquee content and have the script pick up on those values easily, without probing any external CSS values. But I just can't help but think there must be a more elegant way around it.

1) above is obviously the must critical issue at the moment.

[jscheuer1]

If you use a table, for IE you must initialize outside (after) the table. I hadn't realized this until you pointed out the problem though (I rarely use tables for new work any more), and I can only imagine for the time being why it is this way (in IE 7 and 6 at least). I'm a bit busy though right now though this has me intrigued, so I will probably test in 8, 5, and 5.5 to see what's what with that one.

BTW. Even though the style is pretty much as you seem to understand it. It's really much simpler. Basically you have:

<div class="marquee#"> <!-- static position -->
 <div> <!-- relative position -->
  <div> content </div> <!-- absolute position -->
  <div> content </div> <!-- absolute position -->
 </div>
</div>

I only added the static positioned wrapper for IE 8. It needs to have a static wrapper with overflow hidden, otherwise it makes a a horizontal scrollbar for the page, even though the relatively positioned element also has overflow hidden - this is a bug in IE 8 RC1 that can be duplicated using only hard coded HTML markup, and has nothing to do with the script.

But, if it were not for this messiness with the table in IE - whatever that is - styling the relatively positioned container would be sufficient for styling the marquee. The static container is irrelevant really. It's just that once you put a marquee in and initialize it in a table in IE, in addition to the error it gives, even if you comment out those lines (they are for fine tuning the width), a number of the styles get lost, both those configured in initialization, and those used by the script internally.

Try these two demos, good:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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>
</head>
<body>
<table>
<tr>
<td><div class="marquee" id="mycrawler">
Those confounded friars dully buzz that faltering jay. An appraising tongue acutely causes our courageous hogs. Their fitting submarines deftly break your approving improvisations. Her downcast taxonomies actually box up those disgusted turtles.
</div></td>
</tr>
</table>
<script type="text/javascript">
marqueeInit({
	uniqueid: 'mycrawler',
	style: {'width': '450px',
		'background': 'lightyellow',
		'border': '1px solid #CC3300',
		'height': '2em',
		'padding': '2px'
	},
	inc: 8, //speed - pixel increment for each iteration of this marquee's movement
	mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
	moveatleast: 4,
	neutral: 150,
	savedirection: true
});
</script>
</body>
</html>

Bad:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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>
</head>
<body>
<table>
<tr>
<td><div class="marquee" id="mycrawler">
Those confounded friars dully buzz that faltering jay. An appraising tongue acutely causes our courageous hogs. Their fitting submarines deftly break your approving improvisations. Her downcast taxonomies actually box up those disgusted turtles.
</div><script type="text/javascript">
marqueeInit({
	uniqueid: 'mycrawler',
	style: {'width': '450px',
		'background': 'lightyellow',
		'border': '1px solid #CC3300',
		'height': '2em',
		'padding': '2px'
	},
	inc: 8, //speed - pixel increment for each iteration of this marquee's movement
	mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
	moveatleast: 4,
	neutral: 150,
	savedirection: true
});
</script>
</td>
</tr>
</table>
</body>
</html>

Added Later:

Also, in an unrelated matter, I've just updated the script due to another IE bug. I had named all functions, even those assigned to objects or variables. This can sometimes prove problematic in IE, even though it is valid and a good practice. The new version simply removes all such naming.

As to IE, 5.01, 5.5, 6, and 7 all have a problem with the 'bad' example above. 8 is fine with both the good and the bad, as are I'm sure all other modern browsers.

I've also added to my demo page:

Important Note: If you are using a marquee within a table, due to a table rendering bug in IE less than 8, you must initialize after the closing </table> tag.

See also:

http://home.comcast.net/~jscheuer1/s...table_good.htm - Good in IE with table

http://home.comcast.net/~jscheuer1/s.../table_bad.htm - Bad in IE with table

[ddadmin]

Thanks for the info John about the placement of the initialization code. Upon following your advice the demo on the script page now works in IE. It's also running the latest version of the .js file. Next up I'll be adding an images based demo to the script page, and see if there are other suggestions I can provide at that point.

p.s: Interestingly I haven't actually tried running the script in IE8 yet. I recently formatted my PC, so all I got at the moment is IE7.

[jscheuer1]

OK, now I know this is just a rough draft, but you currently have two inits at the end:

<!--webbot bot="HTMLMarkup" startspan --><script type="text/javascript">
marqueeInit({
	uniqueid: 'mycrawler',
	style: {
		'padding': '2px'
	},
	inc: 8, //speed - pixel increment for each iteration of this marquee's movement
	mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
	moveatleast: 4,
	neutral: 150,
	savedirection: true
});
</script><!--webbot bot="HTMLMarkup" endspan i-checksum="43437" --><p><!--webbot bot="HTMLMarkup" startspan --><script type="text/javascript">
marqueeInit({
	uniqueid: 'mycrawler',
	style: {
		'padding': '2px'
	},
	inc: 8, //speed - pixel increment for each iteration of this marquee's movement
	mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
	moveatleast: 4,
	neutral: 150,
	savedirection: true
});
</script><!--webbot bot="HTMLMarkup" endspan i-checksum="43437" --></p>

</body>

</html>

But now only one marquee. Also, with the initialization outside the table, you should return to following (from my demo page, emphasis added):

After initialization each marquee will be given a class name of 'marquee#', where # is a number from 0 to whatever, indicating the order in which the marquees appear on the page. These class names may be used to style the marquee or its contents (like borders for images in the marquee), but for the marquee itself, because the script relies upon some of those styles (when present) for its calculations, it is best to use the initialization style object as outlined above.

Basically all styling of the marquee itself should be done with the initialization style object, especially width and height, borders, padding, margin - these are all used in calculating how to vertically center the content, and how to assure that the width specified matches up properly to the content (an adjustment is made to the width if it exceeds that of the content). The marquee# class may be used, as stated to style the content within the marquee, like images, also for power users it is an avenue for further customization. Generally though it need not and probably should not be used.