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 the HEAD 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

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post