PDA

View Full Version : 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/dynamicindex2/crawler/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):


<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:


<!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:

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):


<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:


<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.

thezone
06-21-2010, 04:58 PM
well...thanks again so much!

sadly none of the iterations worked

-changing font size changed it for cufon as well
-using cufon_now made everything default (smaller black text)

not sure whats next

r

i guess the best fix i can come up with is to manually compensate in crawler.js ... can you point me to where?

thanks!!
r

jscheuer1
06-21-2010, 05:39 PM
changing font size changed it for cufon as well

Did you try compensating by using the fontSize option for Cufon.replace (from the documentation linked to in one of my previous posts in this thread):


fontSize - The size of the font. Defined in CSS, you should not touch this value. Only use pixel values if you do.

example values:
'14px', '24px', '72px'

default value:
Defined in CSS

So, like if you have in your css a font-size of 20px and you reduce that to 17px to get it to work out, you could put in your replace:


Cufon.replace('.marquee0', { fontFamily: 'TradeGothic1', fontSize: '20px' });

Did you try that?

As for editing the crawler to get it to compensate, here is where I believe it calculates the width:


this.w = this.m[0].offsetWidth;
this.m[0].style.left = 0;
this.c.id = 'marq_kill_marg_bord';
this.m[0].style.top = this.m[1].style.top = Math.floor((this.c.offsetHeight - this.m[0].offsetHeight) / 2 - oldie) + 'px';
this.c.id = '';
this.c.removeAttribute('id', 0);
this.m[1].style.left = this.w + 'px';
s = this.mq.moveatleast? Math.max(this.mq.moveatleast, this.sinc) : (this.sinc || this.mq.inc);
while(this.c.offsetWidth > this.w - s)
this.c.style.width = isNaN(this.cw[0])? this.w - s + 'px' : --this.cw[0] + this.cw[1];

As you perhaps can see it does a while loop that optionally keys of of two different values until it can fit the crawler properly.

You might be able to just edit this line:


this.w = this.m[0].offsetWidth;

to something like:


this.w = this.m[0].offsetWidth - 735;

or:


this.w = this.m[0].offsetWidth * .75;

The exact number to use would have to be arrived at by trial and error. Since your crawler's overall width is fixed, this might work out. But you would probably have to change it each time something else changed.

But, if you can do as I suggested with the font-size to get the right size and the fontSize to compensate for the Cufon size, it would probably be better and work out regardless of other changes to your content and layout.

jscheuer1
06-21-2010, 06:23 PM
Bad news, the Cufon font is actually a different size depending upon - I'm assuming - whether VML or canvas is used. It certainly varies by browser.

So you would be better off using the Cufon.now() method. It should work. Perhaps it just needs to be applied differently.

Things would be much easier if Cufon had a callback. Then you could wait until Cufon did its magic before initializing the crawler. But as far as I can see from the documentation, Cufon does not have a callback. Perhaps asking in a Cufon forum would provide a method for that. You are using jQuery, it has callbacks for all sorts of things, perhaps that functionality could be combined with Cufon. Again, a Cufon forum might be the place to find that out.

thezone
06-22-2010, 07:20 AM
thanks so much! multiplying by .75 worked exactly!!
nowif the speed would be the same in ie :)

jscheuer1
06-22-2010, 08:31 AM
thanks so much! multiplying by .75 worked exactly!!
nowif the speed would be the same in ie :)

Not here, there is still a gap, varies by browser. It's about 30px in Firefox and about 100px in IE and Opera, haven't checked others.

Unless you have the same results, in which case the .75 should be like .76 or something a little higher, you can use .75823 if it works, whatever. But I'm thinking it looks OK there because you said "exactly", which would mean that it varies by OS/browser, possibly by installed fonts. That's why Cufon.now() would be the way to go.

Cufon.now() is recommended in the documentation for use with IE in general and for all others where there are other body scripts. It almost has to be workable.

But, consider this - the font you have before Cufon.replace('.marquee0'); is fine. If you stop using Cufon on the crawler, you can get rid of the .75 fudge and the crawler will also be fine.

About the speed difference, you appear to be serving a different marqueeInit to IE. One with moveatleast set to 30. As a result, here the crawler whizzes by in IE.

thezone
06-22-2010, 03:45 PM
the ie on whizzes by? waht version of ie? ie7 crawls...ther reason i did it is because i couldnt get cufon now to init before the ticker, and with cufon it was so slow (confirmed by two other people) so i wrote some code to check if the browser is ie...thats so wierd that it flys for you!
r

thezone
06-22-2010, 03:45 PM
Ps- im ok with a little gap :)

jscheuer1
06-22-2010, 04:36 PM
IE 8. I just checked in IE 7 mode. It is a tad slow. I see you now have it to moveatleast 5 for IE. That's OK for IE 8, perhaps a little slow for IE 7.