New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

FF1+ IE6+ Opr7+

Text and Image Crawler v1.53

Nov 07, 20112: Script updated to v1.53. Adds: persistence option, initcontent option, and auto detect of a single table with a single row for optionally randomizing its tds.

Description: Text and Image Crawler is a highly configurable, continuous scrolling marquee for the showcasing of rich HTML. The Crawler can go left or right, contain text, images or both. It is a continuous marquee in that there exists no blank gaps in between passes. Instead of automatically scrolling, it can optionally be mouse driven, so the location of the mouse cursor dictates which direction for the Crawler to go and at what speed.

The contents for the Crawler is simply defined as normal HTML on the page, encased in a DIV element with a unique ID attribute. OO code allows as many marquees on the page as one wants. It doesn't get easier than that! And with no onload event, it plays well with many other scripts.

Demos (move mouse over marquees to control it):

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.


Directions Developer's View

Step 1: Insert the below code in the <head> section of your page:

Select All

The code above references an external .js file, which you can download here (right click/ select "Save As"): crawler.js

Step 2: Insert the following sample HTML to your page, which shows two instances of the Crawler marquee on the page. Do not use any <br> tags or block level elements inside your marquees:

Select All

All of your settings for a Crawler are specified via the parameters you enter into marqueeInit(). While there are a myriad of configuration options, the only parameter that is required is the "id" parameter. The below lists all of them:

Parameter Description
uniqueid: 'some_unique_id', Required - id for the marquee's container division tag.
style: {
'width': '100%',
'height': '1.6em',
'color': '#fff',
'background-color': '#32f',
'font-family': 'sans-serif',
'margin': '0 auto'
},
Style object for this marquee container (use quotes on both sides of the : as shown) (defaults to {'margin': '0 auto'}, which centers a marquee) If no width is specified it will default to 100%, if no height is specified, it will default to the offsetHeight of the marquee contents. Marquees whose specified or default width is greater than their contents will be automatically shrunk to avoid empty spots.
inc: 8, Speed/top speed - pixel increment for each iteration of this marquee's movement - If marquee mouse: property is 'cursor driven' this is the top speed. Otherwise, it is the speed of the marquee. (defaults to 2)
addDelay: 20, Additional delay between movement iterations (default delay is 30 milliseconds, the number here will be added to that)
persist: true,

New in v1.53

Specifies whether each crawler should remember and resume the last scroll position of the content when the page is revisited within a browser session. Defaults to false.
mouse: 'cursor driven', Mouseover behaviour ('pause' 'cursor driven' or false). (defaults to 'pause') Using false here will make the mouse have no effect on the marquee.
direction: 'right', ('right' or 'left') Direction of marquee. (defaults to 'left' - easiest for reading text marquees)
random: true,

New in v1.5

Boolean value (true/false). Should script randomize the elements in the marquee? If set to true, the script will shuffle all immediate children of the division with this marquee's uniqueid. (defaults to false). See "Note about Random feature" below for additional info.
noAddedSpace: true, Boolean value (true or false) Should marquee not have an added space at the beginning to ensure that the first and last elements or sentences do not butt up against each other? (defaults to false (a space will be added) - optimal for text marquees and for image marquees with spaces between the images)
noAddedAlt: true,

New in v1.5

Boolean value (true/false). Should marquee not add alt attributes to images missing them? (defaults to false - images with empty or missing alt attributes will have them added) When this is done, if the image also has an empty or missing title, the title will be set to empty to avoid a tooltip like effect in some IE browsers. It's useful to leave this as the default (false) for diagnosing missing/corrupt images. The script will attempt to use the filename of the image or 'Image #x' if the filename is unavailable.
stopped: true, (true or false) Should marquee start out in stopped mode? Useful for some 'cursor driven' marquees. (defaults to false).
 
initcontent: function(contentarray){

}

New in v1.53

If defined, the initcontent() call back function lets you execute your own code once a crawler has initialized, ie, the crawler divisions have been populated and made a part of the DOM. This is useful if you wish to integrate another script inside a crawler, such as a lightbox script to enlarge/view the images inside the crawler.

More info on this function below.

  The 3 parameters below are applicable only in mouse: 'cursor driven' marquees
moveatleast: 4, Minimum speed for 'cursor driven' marquee when mouse is off of it. If not specified and this is a 'cursor driven' marquee, the marquee will stop when moused out. (defaults to no motion onmouseout)
neutral: 150, Size of neutral area for 'cursor driven' marquee. This is size of the area in the center of the marquee where hovering it will stop it. (defaults to 16)
savedirection: true, (true, false, or 'reverse') Directional behaviour of 'cursor driven' marquee that has a moveatleast property when moused out. Will it remember it's initial direction (true), continue it's current direction (false), or will it reverse ('reverse') its current direction? (defaults to false)

Any styling to your marquee should be done via the "style" parameter above. While these parameter takes regular CSS value pairs, note the quotation that's required around both the CSS property and CSS value, for example:

style: {
 'width': '100%',
 'height': '200px',
 'color': '#fff',
 'background-color': '#32f' //<--No comma following the very last line!
}

As mentioned, all styles are optional, though if your marquee consists of a series of images, it is best that you specify an explicit height property that comfortably accommodates the tallest image within your series. For pure text only marquees, the script is able to instantly adjust the marquee's height automatically based on the textual content inside it if there's no explicit height property specified.

For the HTML that you insert into your page, it should simply consist of a DIV element that contains the HTML content you wish to show inside it, with this DIV carrying a CSS class "marquee" and an unique but arbitrary ID attribute:

<div class="marquee" id="mycrawler">
Crawler content here...
</div>

The given CSS class and ID are only used by the script temporarily to initialize the marquee, and is discarded afterwards (their values that is). This means that while may use them in your CSS to style the marquee for non-JavaScript enabled users, it has no bearing on the style of the marquee for regular users. All styling for the marquee in general should be done using the "style" parameter mentioned above.

Note about Random feature

The "random" option when enabled shuffles all of the top level elements within the marquee division, in other words, direct children of the main container DIV. If all you have are images (IMG tags) inside your crawler, all of them will be shuffled. To shuffle pieces of text, however, you should wrap each piece in a SPAN tag so each piece becomes a direct child of the container, for example:

<div class="marquee" id="mycrawler">
<span>A jarring antidisestablishmentarian inconsolably drags that disgruntled ace. </span>
<span>That discriminating aristocrat hospitably crosses those begrudging aspersions. </span>
<span>A dull baker literally wobbles over her ghastly artists. </span>
<span>Our inspired animals inconspicuously chase the disenchanted asparagus. </span>
<span>The hungry aardvarks ably wish for their embarrassed acres. </span>
<span>Those elated backers bodily whisper to an adorable bachelor. </span>
<span>Those hot bongos inconveniently crush their a cappella blocks. </span>
<span>The disgusted banshees incorrigibly thank a dry beagle. </span>
<span>Her disgusting boundaries blurrily avoid your fuzzy boys. </span>
<span>Her becalming borrowers brokenly trip their appeasing cabbages. </span>
</div>

So if you have some img tags inside of a tags, and others not, the a tags will be used for those and the img tags for the images without links. Span tags may also be employed. Only the top level tags get shuffled, taking whatever they contain with them.

initcontent() callback function

The initcontent() call back function lets you execute your own code once a crawler has initialized. It's useful when you wish to so something with the contents within the crawler, such as initalize a lightbox script to enlarge images within a crawler when clicked on, for example:

marqueeInit({
uniqueid: 'mycrawler2',
style: {
'padding': '2px',
'width': '700px',
'height': '240px'

},
inc: 20, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 3,
neutral: 150,
savedirection: true,
random: false,
initcontent: function(contentarray){
var $ = jQuery;
if(typeof $ !== 'undefined' && typeof $.fn.fancybox === 'function'){
$(contentarray[1]).find('a[rel=example_group]').attr('rel', 'example_group2');
$("a[rel^=example_group]").fancybox({
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
}
});
}
}

});

initcontent() is automatically passed a contentarray array parameter, which contains two items, contentarray[0] and contentarray[1]. These items contain one of the now two trains of images and/or text of the Crawler as HTML code on the page. One or both of these may be used to initialize that content to another script. The keyword this (not used in the above example) would refer to the Crawler instance. Here we're integrating the Fancybox lightbox script on the images within a crawler.

Advanced Configuration

While physically each marquee is assigned the CSS class "marquee", in actuality, after initialization the script dynamically modifies to  "marquee#", where # is a number from 0 to whatever based the order in which the marquees appear on the page. Some useful style overrides can be done to each Crawler on your page, since, as mentioned, each marquee has a class name of 'marquee#', knowing the structure of the marquee once initialized gives us added control:

<div class="marquee#">
<div>
<div>contents</div>
<div>contents</div>
</div>
</div>

So, for example, one may override the vertical position of the content in the marquee by a style like:

.marquee0 div div {
 top: 3px!important;
}

Each marquee, when initialized has an array entry in which its properties are stored. These can be accessed as:

marqueeInit.ar[#].prop_name

where # is the number of the instance of the marquee on the page and prop_name is the name of the property. Some of these are read only. You may change:

  • direction
  • addDelay
  • inc (use sinc instead for a 'cursor driven' marquee)
  • neutral (available only for a 'cursor driven' marquee)
  • moveatleast (available only for a 'cursor driven' marquee, and can only be changed if it was set as a positive integer for the marquee during its initialization)

Each marquee has two additional properties you may wish to make use of:

Property Description
stopMarquee: true, Same as above stopped property, but not generally used in the initialization (though it can be) or the operation of the marquee, so is a good choice if you want to develop your own off/on switch for a marquee. (defaults to false).
setup: this(instance), A representation of the marquee's prototypical instance. Has only that one value, and is used for the window resize event and as a flag to prevent multiple internal initializations of the same marquee. With a thorough understanding of the main crawler.js file, this may be used to access and change anything about an existing marquee. Be very careful here, you could effectively ruin a marquee's appearance or performance with this one if applied poorly.

For example (to make an on/off button for the first marquee on a page):

<input type="button"
onclick="marqueeInit.ar[0].stopMarquee = !marqueeInit.ar[0].stopMarquee;"
value="Pause/Resume">