Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Help with sliding element

    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.

    Code:
     $(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

  • #2
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Code:
    <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...al_nettut.html
    Again thanks for any info on this code or maybe how I am applying it wrong.
    Last edited by pengume; 07-22-2010 at 01:42 AM.

  • #3
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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"
    Code:
    <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

  • #4
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    An alternative. No framework used.

    Code:
    <!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>

  • #5
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks I'll try this and let you know if it works for me.

  • #6
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Code:
    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!

  • #7
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

    Code:
    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);


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •