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):
Step 1: Insert the below code in the <head> section of your page:
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:
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: { |
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 ? ' ' + 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">