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.
Documentation
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) |
noAddedSpace: true, |
(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) |
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.
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">