Other design and implementation tips
Lets go through some general design and implementation tips when it comes to Featured Content Glider.
Do's and don'ts when editing the default .css file
The external .css file featuredcontentglider.css is what you'll be editing to modify the look of your Featured Content Glider. This file is well documented, and it's important to read the comments. Lets see a snippet of the contents of this file, with certain portions highlighted:
.glidecontentwrapper{
position: relative; /* Do not change this value
*/
width: 350px;
height: 230px; /* Set height to be able to contain height of largest content
shown*/
border: 5px solid #687C98;
overflow: hidden;
}
/*
Total wrapper width: 350px+5px+5px=360px
Or width of wrapper div itself plus any left and right CSS border and padding
Adjust related containers below according to comments
*/
.glidecontent{ /*style for each glide content DIV within wrapper.*/
position: absolute; /* Do not change this value
*/
background: white;
padding: 10px;
visibility: hidden;
width: 330px;
}
/*
Total glidecontent width: 330px+10px+10px=350px
Or width of wrapper div itself (not counting wrapper border/padding)
*/
The two CSS "position
" values should never be changed, as they
are required in order for the script to work properly. The dimensions of ".glidecontentwrapper
"
is obviously affected by the "width
" and "height
"
properties. When setting the "height
" property, it should be tall
enough to accommodate the tallest content being shown, otherwise, a portion of
it will be clipped (hidden).
Many of the dimensions related settings in the CSS file deal with the way the Box Model works in CSS. Comments like:
/*
Total wrapper width: 350px+5px+5px=360px
Or width of wrapper div itself plus any left and right CSS border and padding
Adjust related containers below according to comments
*/
are there to guide you, but really, there's no way around it- learn about the CSS Box Model if you're not already familiar with it! Speaking of which...
Add a valid doctype to your page!
Certain browsers like IE will only conform to the rules of the CSS Box Model when an explicit doctype is added to the top of your page. To ensure a uniform look across browsers, you'll want to make sure you have one declared on your page, such as:
<!DOCTYPE HTML>
See this page for a list of valid doctypes.
Syntax conventions for featuredcontentglider.init()
The function featuredcontentglider.init()
is what you call when
you're ready to create a Featured Content instance out of certain HTML content
on your page. Its syntax is a little unusual, so please pay special attention to
the subtleties:
featuredcontentglider.init({
gliderid: "canadaprovinces", //ID of main glider container
contentclass: "glidecontent", //Shared CSS class name of each glider content
togglerid: "p-select", //ID of toggler container
remotecontent: "", //Get gliding contents from external file on server?
"filename" or "" to disable
selected: 0, //Default selected content index (0=1st)
persiststate: false, //Remember last content shown within browser session
(true/false)?
speed: 500, //Glide animation duration (in milliseconds)
autorotate: true, //Auto rotate contents (true/false)?
autorotateconfig: [3000, 2] //if auto rotate enabled, set
[milliseconds_btw_rotations, cycles_before_stopping]
})
- The function begins and ends with a curly parenthesis nested inside a
regular parenthesis. Each "parameter" within this function should be
separated with a comma ('), except the very last parameter!
featuredcontentglider.init({
"
speed: 500, //ending comma here
autorotate: true, //ending comma here
autorotateconfig: [3000, 2] <----no comma following the last parameter
}) featuredcontentglider.init()
is called after the document itself has loaded, so you're free to move this function to theHEAD
section of your page, for example, proceeding the HTML contents it'll be working with.
Multiple Featured Content Glider instances
You can certainly have more than one Featured Content glider instance on your
page. Just follow the same set up
instructions for each instance (be sure to give everyone unique IDs), then
call featuredcontentglider.init()
for each instance:
<script type="text/javascript">
//instance 1 call:
featuredcontentglider.init({
gliderid: "canadaprovinces", //ID of main glider container
contentclass: "glidecontent", //Shared CSS class name of each glider content
togglerid: "p-select", //ID of toggler container
remotecontent: "", //Get gliding contents from external file on server?
"filename" or "" to disable
selected: 0, //Default selected content index (0=1st)
persiststate: false, //Remember last content shown within browser session
(true/false)?
speed: 500, //Glide animation duration (in milliseconds)
direction: "downup", //set direction of glide: "updown", "downup", "leftright",
or "rightleft"
autorotate: true, //Auto rotate contents (true/false)?
autorotateconfig: [3000, 2] //if auto rotate enabled, set
[milliseconds_btw_rotations, cycles_before_stopping]
})
//instance 2 call:
featuredcontentglider.init({
gliderid: "canadaprovincesALT",
contentclass: "glidecontent",
togglerid: "p-selectALT",
remotecontent: "", //Get gliding contents from external file on server?
"filename" or "" to disable
selected: 1,
persiststate: true,
speed: 1000,
direction: "rightleft", //set direction of glide: "updown", "downup",
"leftright", or "rightleft"
autorotate: false, //Auto rotate contents (true/false)?
autorotateconfig: [3000, 2] //if auto rotate enabled, set
[milliseconds_btw_rotations, cycles_before_stopping]
})
</script>
Table Of Contents