...

View Full Version : Help with sliding element



pengume
07-21-2010, 11:38 PM
Hello I am fairly new to Javascript and found this code online but can't seem to get it to work right.
here is the code I am using it is suppose to apply a style attribute the the id "toplink" but I can't seem to get it to work right.


$(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
var offset = menuYloc+$(document).scrollTop()+"px";
$("#toplink").animate({top:offset},{duration:500,queue:false});
});
});

Thanks in advance

pengume
07-22-2010, 12:40 AM
I am applying this to the id toplink on the image back to top to the right of the page but it still doesn't work

<div id="toplink">
<a href="#top" title="Back to Top" ></a></div>


the website I am trying this code is http://searchforhealth.com
I have seen similar code work on this site here
https://nettuts.s3.amazonaws.com/018_Floating_Menu/demo/dhtml_float_menu_final_nettut.html
Again thanks for any info on this code or maybe how I am applying it wrong.

pengume
07-22-2010, 04:22 AM
Hello again,

I was wondering beccause on the other site where this code is working where the div id is it also has a style attribute top: that changes dynamically if I scroll down and look at the code. DO i need to add anyhting else to this code? like style="something"
<div id="toplink" style="something here">
<a href="#top" title="Back to Top" ></a></div>

or is the whole point that it gets added by the javascript.

Sorry for the newb questions but I am just trying to understand how or why this works. So I can figure out what is wrong

Sciliano
07-22-2010, 02:14 PM
An alternative. No framework used.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>None</title>
<script type="text/javascript">

/* Smooth Scroll Floating Div */
/* Copyright 2009, Michael J. Hill. Used with permission. www.javascript-demos.com */
/* Free use of the code, so long as the above copyright notice is kept intact */

var useWidth = "185"; // this is the width of the floating container
var useHeight = "140"; // this is its height;
var floatContainer = "";
var slideTimer = "";
var initTop = 0;
var nScrollTop = 0;
var nScrollReference = 0;
var prevVal = 0;
var currVal = 0;
var throttlePx = 0;
var resizeTick = 0;
var IE = navigator.appName == "Microsoft Internet Explorer" ? true : false;

function realign(){

if (!IE)
{
initFloat();
}
if (IE && resizeTick == 2)
{
setTimeout("initFloat()", 250);
}
resizeTick++;
}

function throttle(){

throttlePx += Math.floor((nScrollTop - throttlePx) * .5);
floatContainer.style.top = initTop + throttlePx + "px";
if (Math.abs(throttlePx - nScrollTop) > 1)
{
setTimeout("throttle()", 30);
}
else {
floatContainer.style.top = initTop + nScrollTop + "px";
}
}

function stayHome(){

nScrollTop = document.documentElement.scrollTop;
nScrollReference.value = nScrollTop;
prevVal = nScrollReference.value;
if (prevVal == currVal)
{
throttle();
}
currVal = nScrollReference.value;
prevVal = currVal;
slideTimer = setTimeout("stayHome()", 300);
}

function initFloat(){

var nDiv = document.getElementsByTagName('div');
for (i=0; i<nDiv.length; i++)
{
if (nDiv[i].className == "float_container")
{
floatContainer = nDiv[i];
}
}
floatContainer.onclick = function()
{
this.style.display = "none";
}
nScrollReference = document.forms['reference_container']['scroll_reference'];

/*
you can also center the floating div:
floatContainer.style.top = (document.documentElement.clientHeight - 60 - useHeight) / 2 + "px";
floatContainer.style.left = (document.documentElement.clientWidth - 15 - useWidth) / 2 + "px";
*/

initTop = floatContainer.offsetTop;
stayHome();
}

IE ? attachEvent('onload', initFloat, false) : addEventListener('load', initFloat, false);
IE ? attachEvent('onresize', realign, false) : addEventListener('resize', realign, false);

</script>
<style type="text/css">

body
{
height: 2000px;
}

.float_container
{
position: absolute;
top: 35%;
right: 25px;
border: 1px solid black;
padding: 0px;
cursor: pointer;
}

.float_container div
{
padding: 0px;
margin-bottom: -5px;
}

.float_container form
{
display: none;
}

</style>
</head>
<body>

<div class="float_container">
<div>
<form name="reference_container" action="">
<fieldset>
<legend>&nbsp;</legend>
<input type="hidden" name="scroll_reference">
</fieldset>
</form>

<!-- insert your text or image here -->

<img src="./images/Cleve4.jpg" alt="Click to Close" title="Click to Close">
</div>
</div>

</body>
</html>

pengume
07-22-2010, 10:51 PM
Thanks I'll try this and let you know if it works for me.

pengume
07-23-2010, 12:55 AM
Hey Thanks alot It worked for me perfectly however I didn't want it to disappear on mouse click so I got rid of this

floatContainer.onclick = function()
{
this.style.display = "none";
}

Is there any way to make it a little smoother when it scrolls down?Maybe slow it down?
Again thanks for the solution I am very happy about the outcome!

pengume
07-23-2010, 01:19 AM
Also I have this script as well that is suppose to take all anchored links and smooth scroll them to their destination. But since I put this script in, it doesn't seem to work anymore. Was wondering if anyone had any idea why that might be.
Here is the source doe I am using


function ss_fixAllLinks() {
// Get a list of all links in the page
var allLinks = document.getElementsByTagName('a');
// Walk through the list
for (var i=0;i<allLinks.length;i++) {
var lnk = allLinks[i];
if ((lnk.href && lnk.href.indexOf('#') != -1) &&
( (lnk.pathname == location.pathname) ||
('/'+lnk.pathname == location.pathname) ) &&
(lnk.search == location.search)) {
// If the link is internal to the page (begins in #)
// then attach the smoothScroll function as an onclick
// event handler
ss_addEvent(lnk,'click',smoothScroll);
}
}
}

function smoothScroll(e) {
// This is an event handler; get the clicked on element,
// in a cross-browser fashion
if (window.event) {
target = window.event.srcElement;
} else if (e) {
target = e.target;
} else return;

// Make sure that the target is an element, not a text node
// within an element
if (target.nodeType == 3) {
target = target.parentNode;
}

// Paranoia; check this is an A tag
if (target.nodeName.toLowerCase() != 'a') return;

// Find the <a name> tag corresponding to this href
// First strip off the hash (first character)
anchor = target.hash.substr(1);
// Now loop all A tags until we find one with that name
var allLinks = document.getElementsByTagName('a');
var destinationLink = null;
for (var i=0;i<allLinks.length;i++) {
var lnk = allLinks[i];
if (lnk.name && (lnk.name == anchor)) {
destinationLink = lnk;
break;
}
}

// If we didn't find a destination, give up and let the browser do
// its thing
if (!destinationLink) return true;

// Find the destination's position
var destx = destinationLink.offsetLeft;
var desty = destinationLink.offsetTop;
var thisNode = destinationLink;
while (thisNode.offsetParent &&
(thisNode.offsetParent != document.body)) {
thisNode = thisNode.offsetParent;
destx += thisNode.offsetLeft;
desty += thisNode.offsetTop;
}

// Stop any current scrolling
clearInterval(ss_INTERVAL);

cypos = ss_getCurrentYPos();

ss_stepsize = parseInt((desty-cypos)/ss_STEPS);
ss_INTERVAL = setInterval('ss_scrollWindow('+ss_stepsize+','+desty+',"'+anchor+'")',10);

// And stop the actual click happening
if (window.event) {
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (e && e.preventDefault && e.stopPropagation) {
e.preventDefault();
e.stopPropagation();
}
}

function ss_scrollWindow(scramount,dest,anchor) {
wascypos = ss_getCurrentYPos();
isAbove = (wascypos < dest);
window.scrollTo(0,wascypos + scramount);
iscypos = ss_getCurrentYPos();
isAboveNow = (iscypos < dest);
if ((isAbove != isAboveNow) || (wascypos == iscypos)) {
// if we've just scrolled past the destination, or
// we haven't moved from the last scroll (i.e., we're at the
// bottom of the page) then scroll exactly to the link
window.scrollTo(0,dest);
// cancel the repeating timer
clearInterval(ss_INTERVAL);
// and jump to the link directly so the URL's right
location.hash = anchor;
}
}

function ss_getCurrentYPos() {
if (document.body && document.body.scrollTop)
return document.body.scrollTop;
if (document.documentElement && document.documentElement.scrollTop)
return document.documentElement.scrollTop;
if (window.pageYOffset)
return window.pageYOffset;
return 0;
}

function ss_addEvent(elm, evType, fn, useCapture)
// addEvent and removeEvent
// cross-browser event handling for IE5+, NS6 and Mozilla
// By Scott Andrew
{
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent){
var r = elm.attachEvent("on"+evType, fn);
return r;
}
}

var ss_INTERVAL;
var ss_STEPS = 6;

ss_addEvent(window,"load",ss_fixAllLinks);



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum