Text and Image Crawler issues with "persist: true"

[stoneattic]

1) Script Title: Text and Image Crawler v1.53

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex2/crawler/

3) Describe problem:

The "persist" parameter is great for my wife's site: http://www.thesepawsaremadeforwalking.com/ except for the following:

1. I can't get rid of the spaces between the images. If "persist" is set to "false" there is no gap.
2. "Persist" doesn't work if "random" is true. This kind of makes sense since it probably resets the order but I was hoping there's some way around it that I haven't been able to figure out. I would like the images to be random each visit to the site, but remain not-random during a visit when going between pages.
3. In IE there are black borders around the images that kind of flicker. This is not the case in Firefox or Chrome. I would prefer no border and can't figure out where it is coming from.
(number 3 solved by adding "a img{border:0;}" to style sheet.

I'll still working on the site so there are still some formatting issues. Also, at the moment the domain is masked from another site so you have to right click, "this frame", "view frame source".

any help or suggestions would be greatly appreciated.

[jscheuer1]

1. I can't get rid of the spaces between the images. If "persist" is set to "false" there is no gap.

That's not actually the case, at least not in local testing of a mock up of your page. The gap is there either way, persist or not. To eliminate spaces between the images, remove the line breaks between them (between the a tags actually on your page) and use the noAddedSpace: true, property in the init. Many browsers interpret a line break between two tags as equivalent to a space character. And by default the script adds one space at the beginning. That's best for text crawlers, and evens things out for image crawlers if there are spaces between the images. But you don't want it here.

For #2 you're right, persist and random are mutually exclusive. The crawler will persist in its positioning, but the order of the items will be shuffled each time. However, I have a beta version of the next update to crawler that will include (among other updates) the ability to update the contents of the crawler and use local storage to save it if persist is true (a cookie cannot be expected to hold that much data). This was not intended to be used to do what you're asking for, but it can be adapted.

So first, backup your page and the crawler script, just in case.

Next get rid of those line breaks between the a tags. If you don't understand that part, just ask. You should have:

	<div class="marquee" id="crawler">
one long uninterrupted line of tags with no spaces between them and no line breaks
</div>

Download and use the current beta update version of the script (right click and 'Save As'):

http://home.comcast.net/~jscheuer1/s...crawlerca6s.js

Change this on your page:

<script type="text/javascript">
marqueeInit({
	uniqueid: 'crawler',
	style: {
		'padding': '0px',
		'width': '100%x',
		'height': '100px',
		'margin': '0 auto'
	},
	inc: 1, //speed - pixel increment for each iteration of this marquee's movement
	persist: true,
	mouse: 'pause', //mouseover behavior ('pause' 'cursor driven' or false)
	moveatleast: 2,
	neutral: 150,
	savedirection: true,
	random: false,
});
</script>

to:

<script type="text/javascript">
var crawlerrandom = true;
if(marqueeInit.Marq.prototype.storage && marqueeInit.Marq.prototype.storage.getItem &&
marqueeInit.Marq.prototype.storage.getItem('crawler') && marqueeInit.Marq.prototype.cookie.get('crawler')){
	crawlerrandom = false;
}
marqueeInit({
	uniqueid: 'crawler',
	style: {
		'padding': '0px',
		'width': '100%x',
		'height': '100px',
		'margin': '0 auto'
	},
	inc: 1, //speed - pixel increment for each iteration of this marquee's movement
	persist: true,
	mouse: 'pause', //mouseover behavior ('pause' 'cursor driven' or false)
	moveatleast: 2,
	neutral: 150,
	noAddedSpace: true,
	savedirection: true,
	random: crawlerrandom,
	initcontent: function(m){
		if(this.storage && this.storage.getItem && !this.storage.getItem(this.mq.uniqueid)){
			this.storage.setItem(this.mq.uniqueid, m[0].innerHTML);
		}
	}
});
</script>

The browser cache may need to be cleared and/or the page refreshed to see changes.


As to #3, you're right there too. However the standard way to do that is:

a img {border-width: 0;}

I'm not sure if that's important or not, might be in some browsers.

I also noticed that you have no DOCTYPE on the page inside the frame and that the DOCTYPE you are using on the frameset page is invalid for frames. It should be:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

And it would be a good idea to include a standards invoking DOCTYPE on the page(s) inside the frame:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Is fine there, if that's what you want (looks that way, as it's what you have on the frameset page). But that messes up the hover effects of the page, not sure why (probably non-standard markup*). Having the correct DOCTYPE on the frameset page doesn't seem to hurt anything though.

Again, this might not matter. It will if the pages in the frameset are ever viewed on their own, and the frameset page not having a technically valid DOCTYPE might matter in some browsers

Any questions, or problems, just let me know



*Upon further investigation, although there is non-standard markup, the thing that's making the hover effects get messed up with a standards invoking DOCTYPE on the page inside the frame is the styles:

:link {color: #000000; TEXT-DECORATION: none; background: #B7CEEC}
:visited {color: #000000; TEXT-DECORATION: none; background: #B7CEEC}
:hover {color:  #B7CEEC; TEXT-DECORATION: none; background: #000000}
:active {color :#000000; background:#B7CEEC}

For a standards invoking DOCTYPE, they need to be:

a:link {color: #000000; TEXT-DECORATION: none; background: #B7CEEC}
a:visited {color: #000000; TEXT-DECORATION: none; background: #B7CEEC}
a:hover {color:  #B7CEEC; TEXT-DECORATION: none; background: #000000}
a:active {color :#000000; background:#B7CEEC}

Once that change is made, the page inside the iframe may have a DOCTYPE like:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

I also just noticed that with the beta version of the crawler script, the line breaks between the images don't seem to matter. But, just to be on the safe side, best not have line breaks there. It can't hurt anything not having them, having them there might.

[stoneattic]

John, I made all the changes and corrections you listed and everything is working great!
The frame page is not mine. I believe it's my domain host's way of rediredcting with masking.
I still have some content and formatting to tweak but it's getting there.

I can't thank you enough for the great script and help.

[jscheuer1]

Ooops, I was just looking at this again, and either I copied a typo from you and passed it on, or I introduced it. But here:

marqueeInit({
	uniqueid: 'crawler',
	style: {
		'padding': '0px',
		'width': '100%x',
		'height': '100px',
		'margin': '0 auto'
	},
	inc: 1, //speed - pixel increm . . .

That red x is invalid and will break the script in IE 8 and maybe less. Others error correct for it. Remove it.

I also now have available an update that allows users to drag the crawler with the mouse. It will scroll as it does now, pausing on mouse over, a quick click will still open the larger image in a new window. However, if you mouse down, hold and drag, you will be able to move the images left or right. When you release the mouse, the crawler will either continue pausing (if the mouse is still over it) or continue scrolling (if the mouse position is now off of the crawler).

Soon I may be adding this same functionality for mobile devices.