Go Back   CodingForums.com > :: Client side development > JavaScript programming

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 07-21-2010, 11:38 PM   PM User | #1
pengume
New to the CF scene

 
Join Date: Jul 2010
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
pengume is an unknown quantity at this point
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
pengume is offline   Reply With Quote
Old 07-22-2010, 12:40 AM   PM User | #2
pengume
New to the CF scene

 
Join Date: Jul 2010
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
pengume is an unknown quantity at this point
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 12:42 AM..
pengume is offline   Reply With Quote
Old 07-22-2010, 04:22 AM   PM User | #3
pengume
New to the CF scene

 
Join Date: Jul 2010
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
pengume is an unknown quantity at this point
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
pengume is offline   Reply With Quote
Old 07-22-2010, 02:14 PM   PM User | #4
Sciliano
Regular Coder

 
Join Date: Nov 2009
Posts: 247
Thanks: 4
Thanked 22 Times in 22 Posts
Sciliano is an unknown quantity at this point
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>
Sciliano is offline   Reply With Quote
Old 07-22-2010, 10:51 PM   PM User | #5
pengume
New to the CF scene

 
Join Date: Jul 2010
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
pengume is an unknown quantity at this point
Thanks I'll try this and let you know if it works for me.
pengume is offline   Reply With Quote
Old 07-23-2010, 12:55 AM   PM User | #6
pengume
New to the CF scene

 
Join Date: Jul 2010
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
pengume is an unknown quantity at this point
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!
pengume is offline   Reply With Quote
Old 07-23-2010, 01:19 AM   PM User | #7
pengume
New to the CF scene

 
Join Date: Jul 2010
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
pengume is an unknown quantity at this point
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);
pengume is offline   Reply With Quote
Reply

Bookmarks

Tags
javascript, sliding image

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 02:16 PM.


Advertisement
Log in to turn off these ads.