Download JavaScript Code Examples, Tutorials, Reference

Provide thousands of free JavaScript code examples, DHTML, HTML JavaScript Tutorials, Reference and Help. JavaScriptBank.com is the best JavaScript resources


Sampled by JavaScriptBank.com
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">


Over 2000+ free Javascript
at JavaScriptBank.com Website