|
Note (April 13th, 2011): Script updated to
v1.5, which adds a "shuffle" content option, plus fixes browser crash due
to crawlers with no content or non loading images.
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
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: {
'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) |
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).
|
| |
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.
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">
|
