Text and Image Crawler overlap bug

**thezone** · 06-18-2010, 05:21 AM

1) Script Title: Text and Image Crawler

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

3) Describe problem:

thanks for a really cool script....

on this site: http://aea100.org/user

once the ticker gets to "M" (alphabetical) another ticker loads on top 2x as fast!!

also, at the end of the list, there is alot of blank space before it starts again. please help

!!

**jscheuer1** · 06-20-2010, 01:48 AM

Not here. Perhaps you did something that changed that since your post. But uncharacteristically for this script there appears to be a long gap between when one train ends and another begins. They are supposed to follow each other in one continuous unending crawl.

I think you may have introduced some wrapping (line breaking) or what amounts to wrapping by making the height less than the font size. Try it without the height (get rid of the highlighted line):

Code:

<script type="text/javascript">
marqueeInit({
	uniqueid: 'mycrawler',
	style: {
		'margin-top': '0px',
'color': '#5280ba',
		'width': '962px',
'height': '24px',
'font-size': '28px',
'font-weight': 'normal',
'text-transform': 'uppercase'

	},
	inc: 1, //speed - pixel increment for each iteration of this marquee's movement
	mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
	moveatleast: 1,
	neutral: 0,
noAddedSpace: true,
	savedirection: true
});
</script>

**thezone** · 06-20-2010, 03:17 AM

i removed the height, there is like 40 sec of no ticker before it starts again...check in safari or ff

**jscheuer1** · 06-20-2010, 05:00 AM

You are welcome but - I made a local mock up of your page. I copied the source code exactly from Firefox's 'view source'. All I added was a base tag here:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">

  <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>User account | Actors' Equity Association 100 - 1913-2013 - From Stage to Stage</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<base href="http://aea100.org/user" />
<link rel="shortcut icon" href="/sites/default/files/aea_favicon.ico" type="image/x-icon" />
    <link type="text/css" rel="stylesheet" media="all" href="/mod . . .

That's required for a local mock up unless I also copy all of your resource files (scripts, styles, images, etc.).

And lo and behold, it worked just fine!

Now, if I view your page live, I definately see the problem. After all, I'm the one who mentioned it first.

There are other inconsistencies. If I disable all externally link styles in Firefox's developer tool bar, in the live version I get something more like the sort of problem you first mentioned:

once the ticker gets to "M" (alphabetical) another ticker loads on top 2x as fast!!

Except that I also see things like:

PETERS PETERS

for every name, the first of which is an image, the second text.

If I disable linked styles in the mock up, I get no added images. I do get the gap though, which i don't have with the styles active.

Here's what I would suggest - substitute the mock up for the actual page. Make a backup copy of the page first. I'm attaching the mock up:

Attachment 3368

**thezone** · 06-20-2010, 07:31 AM

thanks a million!

but this is a page generated from a cms (drupal) the list is dynamic too...so the only change is the <base href="http://aea100.org/user/" /> ?

**thezone** · 06-20-2010, 07:34 AM

if the code is the same....shouldnt it work for both mockup (with viewed source) and dynamic since it is the same html?

wierd ):

**jscheuer1** · 06-20-2010, 09:32 AM

Ah, the light goes on - it's the cufon. It's active on the server, but for some reason or reasons doesn't work in my local mock up.

Either turn it off for the page, or turn it off for the crawler.

Alternatively, if you can get cufon to work its magic before the crawler is initialized, that might work.

What I think is happening now is that crawler is calculating dimensions based upon the content in the crawler, and then cufon comes along and changes that.

The crawler 'trains' are shorter after cufon, hence the extra space between them.

**thezone** · 06-21-2010, 03:47 AM

gotcha...nice one on thinking of that!!! if i cant get cufon to load before the script, do you think maybe i can replicate the 'cufon width' using another font in the style or something?

**thezone** · 06-21-2010, 03:59 AM

or could i multiply whatever width crawler comes up with by the percent difference of the two widths?..where would htat be in crawler.js?

thanks again!!!
r

**jscheuer1** · 06-21-2010, 10:12 AM

Looking over the documentation:

http://wiki.github.com/sorccu/cufon/api

One thing you could try is simply select a font and/or font-size for the crawler that accurately reflects the size (width especially) it will be after Cufon.replace(). If setting a different font-size in the css adversely affects how Cufon transforms the text, you can probably compensate by using the fontSize option for Cufon.replace().

The documentation also gives another possibility. You might be able to use Cufon.now(). If it would work, I'm thinking something like (change your existing cufon init thinger, see highlighted red):

Code:

       <script src="/sites/all/themes/aea/cufon-yui.js" type="text/javascript"></script>
    <script src="/sites/all/themes/aea/TradeGothic1_700.font.js" type="text/javascript"></script>
<script type="text/javascript">
			Cufon.replace('#home_featured .block h3',   { fontFamily: 'TradeGothic1' });
			Cufon.replace('h2.title',   { fontFamily: 'TradeGothic1' });
			Cufon.replace('#mycrawler',   { fontFamily: 'TradeGothic1' });

		</script>

This should target the uninitialized crawler. Then add to the crawler init:

Code:

<script type="text/javascript">
Cufon.now();
marqueeInit({
	uniqueid: 'mycrawler',
	style: {
		'margin-top': '0px',
'color': '#5280ba',
		'width': '962px',

'font-size': '28px',
'font-weight': 'normal',
'text-transform': 'uppercase'

	},
	inc: 1, //speed - pixel increment for each iteration of this marquee's movement
	mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
	moveatleast: 1,
	neutral: 0,
noAddedSpace: true,
	savedirection: true
});
</script>

Two considerations:

I'm assuming this will not be too soon for the rest of the page because all cufon elements will have been parsed by that point.
I'm also assuming that cufon will be quick enough that once the crawler starts to initialize, the true width of the trains will be apparent to it. And that the browser can accurately judge the width of the cufon transformed elements.

Thread: Text and Image Crawler overlap bug

Thread Tools

Search Thread

Text and Image Crawler overlap bug

thanks but.....

so close

Bookmarks

Bookmarks

Posting Permissions