Sticky Content script

[kattaie]

1) Script Title: Sticky Content script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex11/stickycontent.htm

3) Describe problem: Try as I might, I am unable to get this to work with an attached css3 menu and style sheet. I am really new to coding, so could use some help. I got the demo to work just fine, but am unclear as to where to place the components, when my css style sheet is separate.

This:



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script src="stickycontent.js">

/***********************************************
* Sticky Content script (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

</script>

<script>

//initialize sticky content:
jQuery(document).ready(function($){

$('#menu').stickyit({
gap: 5,
stickyclass: "docked"
})

})

</script>

</head>

Is as you can see just before the </head> tag.

I put this:


.docked {
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow version*/
}
</style>

here as it is at the end of the little bit of css on my html page.

I also tried putting it in here:



<!-- Start css3menu.com HEAD section -->
<link rel="stylesheet" href="../Documents/GUTCHES/horizontalmenutest_files/css3menu2/style.css" type="text/css" />

<!-- End css3menu.com HEAD section -->

but that didn't do it either.

Any help is greatly appreciated!

[Beverleyh]

Its hard to tell what the problem is without seeing a complete web page.

From the code fragments you've posted, all I can say is to;

- make sure that you've enclosed internal CSS in <style> tags
- make sure that an external stylesheet is uploaded to the location specified (in the href) and check file names/case
- remember that older browsers won't render CSS3 styles/animations/transitions

For more help, please post a link to your page and confirm which browsers you're testing in.

[javi3150]

Can you use two sticky contents at the same time? For example, on both sides of the website? I have tried but I can´t solve it!!
Thanks for your time.

[Beverleyh]

Yes, the demo has two examples given. What have you tried?