Skip to Main Content

APEX

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

jQuery Scroll Follow Plugin

Tony FatourosMar 22 2009 — edited Mar 23 2009
Hi,

Hoping someone can get this plug-in working within Oracle ApEx as unfortunately I can't seem to. I can though get it working outside of ApEx but when I attempt to do the following within a HTML Region (No Template), it doesn't seem to work.

I am using the jQuery Scroll Follow Plugin from :> http://kitchen.net-perspective.com/open-source/scroll-follow/

and I am specically trying to implement this example from the same website, i.e. :> http://kitchen.net-perspective.com/sf-example-2.html

Within ApEx, I can get the menu to appear but it doesn't follow me when I scroll down the page like it does in the example above, i.e example-2.

This is the code I have entered within the HTML Region (see below).

would really appreciate anyones help with getting this example-2 working within ApEx.

Thanks.
Tony.

ps I think some of the code like the div id = "example2" has been stripped out but please see example-2 source code.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Simple Slide Panel</title>

<script type="text/javascript" src="#WORKSPACE_IMAGES#jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="#WORKSPACE_IMAGES#jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript" src="#WORKSPACE_IMAGES#jquery.scrollfollow.js"></script>



<script type="text/javascript">
$( document ).ready( function ()
{
$( '#example2' ).scrollFollow(
{
speed: 1000,
offset: 60,
killSwitch: 'exampleLink',
onText: 'Disable Follow',
offText: 'Enable Follow'
}
);
}
);
</script>

<style type="text/css">
body {
margin: 0;
padding: 0;
height: 3000px;
font-family: Georgia;
font-size: 0.9em;
line-height: 1.4em;
}

#example2 {
position: relative;
width: 180px;
margin: 10px;
padding: 20px 20px 20px;
background: #eee url(/images/sfbgTile.png);
border: 2px solid #42CBDC;
}

p {
margin: 7px 0 0 0;
}

a {
color: blue;
text-decoration: underline;
cursor: pointer;
}
</style>
</head>

<body>

<div id="example2">


<img src="/images/ducks2.png" alt="Ducks" />

<p>

This is an example of Scroll Follow using some parameters.
</p>

<p>
It should take one second
to animate the scroll. Click the link below to toggle the sliding on/off.
</p>

<p>
<a id="exampleLink">Default Text</a>

</p>

<p>

Back to Scroll Follow home.
</p>
</div><!--end #example-->

</body>
</html>

Edited by: Tony F. on Mar 22, 2009 11:30 PM
Comments
Locked Post
New comments cannot be posted to this locked post.
Post Details
Locked on Apr 20 2009
Added on Mar 22 2009
2 comments
651 views