Results 1 to 7 of 7

Thread: "Floating" divs that scroll with page, with special conditions.

  1. #1
    Join Date
    Mar 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default "Floating" divs that scroll with page, with special conditions.

    Greetings,

    I am working on a project that I think could benefit from the above described feature. It would work a lot like the below examples, but would also behave a little differently. Hopefully it is coded a little more elegantly and semantically too.

    Example 1:
    http://www.jtricks.com/javascript/na.../floating.html

    Example 2:
    http://www.echoecho.com/toolfloatinglayer.htm

    I am aware of the CSS solution (position: fixed), but that alone will not work for my needs. Maybe it will work in combination with some jQuery, but maybe not.

    Take a look at my project here:
    http://prototism.co.cc/x/x/tsb/

    Don't mind the dummy content, the color schemes, the code, or the possible IE errors; I haven't gotten around to testing it in IE.

    Anyway, notice the "navigation" div (About, Pictures, etc).

    What I want to do with that is have it:
    • Initially be in the position it is in when the page loads; but
    • Move to the top of the viewing port when the viewer scrolls down to the top edge of #navigation; and
    • Move back to it's natural position when the page is scrolled all the way back to the top.


    Basically, I want to have #navigation ALWAYS visible, at the top of the viewing port, except in the conditions described above.

    I presume some position: fixed is involved, but the other conditions probably involve JavaScript.

    I know it's possible, because a number of years ago, I saw a script that did exactly this. The problem is, and the reason I am here, is that I can not for the life of me find it now.

    Thank you,
    Matthew

  2. #2
    Join Date
    Mar 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Skimming though the language in this page seems to be what I am looking for, but this is not the original solution I had those many years ago.

    http://jqueryfordesigners.com/fixed-floating-elements/

  3. #3
    Join Date
    Mar 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I've also just have started torealize that the wonderful "Drop Down" script I have implemented, might interfere with the script this thread is about, due to the vertical space addition and subtraction.

  4. #4
    Join Date
    Mar 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Well, after some backwards engineering, the solution on that page ultimately didn't work. Basically, his solution works only when the floating element appears after the content it floats over. In my case, #navigation appears before the content I want it to float over. Thus, his script, although relatively simple, is not immediately a solution to my application.

    It could probably be tweaked to do so, but I don't have that level of knowledge of JavaScript.

    Hopefully another solution is out there.
    Last edited by prototism; 08-29-2010 at 09:56 AM.

  5. #5
    Join Date
    Mar 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Here is another potential solution that uses beautiful jQuery:

    http://kitchen.net-perspective.com/o...scroll-follow/

  6. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,810
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
    	<title>The Smart Brothers - Acoustic Americana &amp; Folk</title>
    
    	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
    
    	<link rel="stylesheet" type="text/css" href="http://prototism.co.cc/x/x/tsb/css/brownred.css" />
    	<link rel="stylesheet" type="text/css" href="http://prototism.co.cc/x/x/tsb/css/dropdownpanel.css" />
    	<link rel="stylesheet" type="text/css" href="http://prototism.co.cc/x/x/tsb/css/floatingdiv.css" />
    
    	<link rel="stylesheet" type="text/css" href="css/brownred.css" title="brownred" />
    	<link rel="alternate stylesheet" type="text/css" href="http://prototism.co.cc/x/x/tsb/css/grayred.css" title="grayred" />
    	<link rel="alternate stylesheet" type="text/css" href="http://prototism.co.cc/x/x/tsb/css/tanbrown.css" title="tanbrown" />
    	<link rel="alternate stylesheet" type="text/css" href="http://prototism.co.cc/x/x/tsb/css/bluebrown.css" title="bluebrown" />
    	<link rel="alternate stylesheet" type="text/css" href="http://prototism.co.cc/x/x/tsb/css/whiteblue.css" title="whiteblue" />
    	<link rel="alternate stylesheet" type="text/css" href="http://prototism.co.cc/x/x/tsb/css/yellowblue.css" title="yellowblue" />
    
    	<script type="text/javascript" src="http://prototism.co.cc/x/x/tsb/js/styleswitcher.js"></script>
    
    	<script type="text/javascript" src="http://prototism.co.cc/x/x/tsb/js/dropdownpanel.js"></script>
    </head>
    
    <body>
    
    <div id="mypanel" class="ddpanel">
    	<div id="mypanelcontent" class="ddpanelcontent" style="position:absolute;top:600px;" >
    		<ul>
    			<li><strong>Scheme :</strong></li>
    			<li onclick="setActiveStyleSheet('brownred'); return false;">Brown/Red</li>
    
    			<li onclick="setActiveStyleSheet('grayred'); return false;">Gray/Red</li>
    			<li onclick="setActiveStyleSheet('tanbrown'); return false;">Tan/Brown</li>
    			<li onclick="setActiveStyleSheet('bluebrown'); return false;">Blue/Brown</li>
    			<li onclick="setActiveStyleSheet('whiteblue'); return false;">White/Blue</li>
    			<li onclick="setActiveStyleSheet('yellowblue'); return false;">Yellow/Blue</li>
    			<div class="clear"></div>
    
    		</ul>
    	</div>
    	<div id="mypaneltab" class="ddpaneltab">
    		<a href="#"><span></span></a>
    	</div>
    </div>
    
    <div id="wrapper">
    
    	<div id="header">
    		<div id="header-inner">
    
    			<h1>The Smart Brothers</h1>
    			<a href="index.htm"><img src="http://prototism.co.cc/x/x/tsb/img/logo.png" alt="" /></a>
    		</div>
    	</div>
    	<div id="content">
    		<div id="content-inner">
    			<div id="content-inner-inner">
    				<h2>elis ac lacinia vulputate</h2>
    				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi turpis mi, dapibus nec volutpat eu, sodales non felis. Quisque mollis consequat tellus sed rutrum. Ut non magna nibh, ut gravida nibh. Cras vitae velit leo. Donec fringilla, enim quis porta tincidunt, lectus ligula dignissim ante, id accumsan elit lectus fermentum orci. Mauris vel turpis lorem, at tincidunt erat. Vestibulum nisl massa, volutpat non tincidunt nec, semper et neque. Morbi tristique sodales lectus, ultrices facilisis eros ultricies id. Donec faucibus, felis ac lacinia vulputate, quam leo posuere mi, porta condimentum eros enim hendrerit ipsum. Mauris consectetur dignissim metus et fermentum. Vivamus vitae posuere urna. Nam mollis ultricies libero et sollicitudin. In sem dui, lobortis facilisis commodo in, elementum eu neque. Integer eget interdum quam. Vivamus ac nulla sapien. Donec semper tristique vehicula.</p>
    
    				<p>Cras hendrerit faucibus posuere. Proin malesuada, eros eu mattis venenatis, nunc nunc rutrum ligula, sed accumsan leo quam a risus. Phasellus urna nisl, commodo sed aliquet eu, ultrices at tortor. Nulla a mi at erat pulvinar ullamcorper id ut erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu massa sed lacus laoreet venenatis ac a sem. Morbi id est et risus pellentesque mattis. Sed semper lobortis nisl sit amet ultricies. Sed pretium sagittis velit tincidunt dignissim. Quisque gravida ultrices sollicitudin.</p>
    			</div>
    		</div>
    	</div>
    </div>
    <div id="footer">
    	<div id="footer-inner">
    		<ul>
    			<li><strong>Navigation : </strong></li>
    
    			<li><a href="">About</a></li>
    			<li><a href="">Pictures</a></li>
    			<li><a href="">Schedule</a></li>
    			<li><a href="">Music</a></li>
    			<li><a href="">Merch</a></li>
    			<li><a href="">Contact</a></li>
    
    			<div class="clear"></div>
    		</ul>
    		<ul>
    			<li><strong>Scheme :</strong></li>
    			<li onclick="setActiveStyleSheet('brownred'); return false;">Brown/Red</li>
    			<li onclick="setActiveStyleSheet('grayred'); return false;">Gray/Red</li>
    			<li onclick="setActiveStyleSheet('tanbrown'); return false;">Tan/Brown</li>
    
    			<li onclick="setActiveStyleSheet('bluebrown'); return false;">Blue/Brown</li>
    			<li onclick="setActiveStyleSheet('whiteblue'); return false;">White/Blue</li>
    			<li onclick="setActiveStyleSheet('yellowblue'); return false;">Yellow/Blue</li>
    			<div class="clear"></div>
    		</ul>
    		<div>
    			<span>All songs &copy; 2005-2010 Jesse Edwards, Luke Edwards, and/or Michael Reed, unless otherwise noted.</span> <a href="">Full legal disclaimer</a>.
    		</div>
    
    		<div><a href="http://prototism.co.cc">Design &copy; 2010 MDR</a></div>
    	</div>
    </div>
    	<div id="navigation" style="position:absolute;left:0px;top:360px;" >
    		<div id="navigation-inner">
    		<ul>
    			<li><a href="">About</a></li>
    
    			<li><a href="">Pictures</a></li>
    			<li><a href="">Schedule</a></li>
    			<li><a href="">Music</a></li>
    			<li><a href="">Merch</a></li>
    			<li><a href="">Contact</a></li>
    			<div class="clear"></div>
    
    		</ul>
    		</div>
    	</div>
    <script type="text/javascript">
    // Animate (11-January-2010)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
    // With the ability to scale the effect time on specified minimum/maximum values
    // and with three types of progression 'sin' and 'cos' and liner.
    
    // **** Application Notes
    
    // see http://www.vicsjavascripts.org.uk/Animate/Animate.htm
    //
    // **** Functional Code(1.52K) - NO NEED to Change
    
    function zxcAnimate(mde,obj,srt){
     this.to=null;
     this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
     this.mde=mde.replace(/\W/g,'');
     this.data=[srt||0];
     return this;
    }
    
    zxcAnimate.prototype={
    
     animate:function(srt,fin,ms,scale,c){
      clearTimeout(this.to);
      this.time=ms||this.time||0;
      this.neg=srt<0||fin<0;
      this.data=[srt,srt,fin];
      this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
      this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
      this.inc=Math.PI/(2*this.mS);
      this.srttime=new Date().getTime();
      this.cng();
     },
    
     cng:function(){
      var oop=this,ms=new Date().getTime()-this.srttime;
      this.data[0]=(this.c=='s')?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:(this.c=='c')?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1];
      this.apply();
      if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
      else {
       this.data[0]=this.data[2];
       this.apply();
       if (this.Complete) this.Complete(this);
      }
     },
    
     apply:function(){
      if (isFinite(this.data[0])){
       if (this.data[0]<0&&!this.neg) this.data[0]=0;
       if (this.mde!='opacity') this.obj.style[this.mde]=Math.floor(this.data[0])+'px';
       else zxcOpacity(this.obj,this.data[0]);
      }
     }
    
    }
    
    function zxcOpacity(obj,opc){
     if (opc<0||opc>100) return;
     obj.style.filter='alpha(opacity='+opc+')';
     obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
    }
    
    
    </script>
    
    <script  type="text/javascript">
    /*<![CDATA[*/
    
    function Float(o){
     var obj=document.getElementById(o.ID);
     this.min=obj.offsetTop;
     this.oop=new zxcAnimate('top',obj,this.min);
     this.ms=o.Speed||1000;
     this.pole=o.PollSpeed||500;
     this.scroll();
    }
    
    Float.prototype.scroll=function(){
     var oop=this;
     var top=Math.max(zxcWWHS()[3],this.min);
     if (top!=this.oop.data[0]){
     this.oop.animate(this.oop.data[0],top,this.ms,false,'sin');
     }
     setTimeout(function(){ oop.scroll(); },this.pole);
    }
    
    function zxcWWHS(){
     if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
     else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
     return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
    }
    
    new Float({
    ID:'navigation',
    Speed:100,
    PollSpeed:500
    
    });
    /*]]>*/
    </script>
    </body>
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  7. #7
    Join Date
    Mar 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    That's a great looking script Vic. Is jQuery involved at all? I really appreciate the work you did, but is there a way to make is animate as smoothly as jQuery?

    EDIT: I take that back. I like the animation.

    Here it is in use:
    http://prototism.co.cc/x/x/tsb/index3.php

    Notice there is a strange black bar in the middle of the paragraph. Is that caused by the script somehow?

    Thanks a lot, regardless!



    Alternatively, I am currently recoding the website from scratch. This time, I have coded in the ability for #navigation to float, with position: fixed.

    position: fixed works as intended, but to get #navigation to behave as I described above, it probably needs JavaScript.

    This recoded version is here:
    http://prototism.co.cc/x/x/tsb/index2.php

    I have a feeling that the first solution option (http://jqueryfordesigners.com/fixed-floating-elements/), is the answer. I can probably get it to work as how I described it if and when I come to an understanding of how his script works.

    I'm thinking that because I recoded/restructured the HTML/CSS of the site, I may have a better chance of getting it to work.
    Last edited by prototism; 08-29-2010 at 10:29 PM.

Bookmarks

Posting Permissions

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