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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Floating menu issues on slower connection

    Hello All,

    I'm new to javascript and looking for a bit of help if possible?

    I'm trying to create a floating menu (#quickmenu in left hand sidebar of bottom link) that stops at #weather whilst also re-calculating the bottom = $(\'#weather\').offset().top; every 0.5 seconds...

    Page to test: Bristol International Jazz & Blues Festival 2014 | Festival Archive

    The recalculation is key as I use expandable content in the main body. Also, if possible I need only #weather.offset.top to be recalculated every 5 seconds, not the whole script otherwise it refreshes and flickers...

    I've *tried* to do code it myself and it's not working, it's 99% not coded correctly but can't figure out what's going wrong? The logic seems to be correct though... if (y >= top && z <= bottom) { ....

    Thanks,
    Paul

    Code:
    <script type="text/javascript">
    
    $(document).ready(function () {
    
    	top = $('#quickmenu').offset().top;
    	var didScroll = false;
    
    $(window).scroll(function() {
    	didScroll = true;
    });
    
    setInterval(function() {
    if ( didScroll ) {
    
    	didScroll = false;
    	bottom = $('#weather').offset().top;
    	y = $(this).scrollTop();
    	z = y + $('#quickmenu').height();
    
    	if (y >= top && z <= bottom) {
    		// if so, add the fixed class
    		$('#quickmenu').addClass('fixed');
    	} else if(z > bottom) {
    		// otherwise remove it
    		$('#quickmenu').removeClass('fixed').addClass('absolute');
    	} else {
    		// otherwise remove it
    		$('#quickmenu').removeClass('fixed');
    	}
    
        }	
    }, 500);
    
    });
    
    </script>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .topanchor {
      width:200px;height:200px;background-Color:#FFFFCC;border:solid red 1px;margin-Top:300px;
    }
    
    #bottomanchor {
      width:200px;height:1200px;background-Color:#FFFFCC;border:solid red 1px;margin-Top:300px;
    }
    
    .menu {
      z-Index:101;width:200px;height:200px;background-Color:#FFFFCC;border:solid red 1px;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <div class="topanchor" >topanchor</div>
    <div id="menu" class="menu" >menu</div>
    <div id="bottomanchor" >bottomanchor</div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Float Menu (03-March=2014)
    // by: Vic Phillips - http://www.vicsjavascripts.org/
    
    
    var zxcFloatMenu={
    
     init:function(o){
      var id=o.MenuID,ms=o.Refresh,m=document.getElementById(id),ba=document.getElementById(o.BottomAnchorID);
      if (m,ba){
       var d=m.cloneNode(false),p=this.pos(m);
       d.removeAttribute(id);
       d.style.visibility='hidden';
       d.style.height=m.offsetHeight+'px';
       m.parentNode.replaceChild(d,m);
       m.style.position='absolute';
       document.body.appendChild(m);
       o.m=m;
       o.d=d;
       o.ba=ba;
       o.s=-1;
       this.scroll(o);
       typeof(ms)=='number'&&ms>100?o.to=setInterval(function(){ zxcFloatMenu.scroll(o); },ms):null;
       this.addevt(window,'scroll','scroll',o);
      }
     },
    
     scroll:function(o){
      var p=this.pos(o.d),my=this.pos(o.ba)[1]-o.m.offsetHeight,s=window.innerHeight?window.pageYOffset:document.documentElement.clientHeight?document.documentElement.scrollTop:document.body.scrollTop,s=s>p[1]?s>my?2:1:0;
      if (s!=o.s){
       o.m.style.left=p[0]+'px';
       o.m.style.top=(s==0?p[1]:s==1?0:my)+'px';
       o.m.style.position=s!=1?'absolute':'fixed';
      }
      o.s=s;
     },
    
     pos:function(o){
      var rtn=[0,0];
      while(o){
       rtn[0]+=o.offsetLeft;
       rtn[1]+=o.offsetTop;
       o=o.offsetParent;
      }
      return rtn;
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    
    }
    
    zxcFloatMenu.init({
     MenuID:'menu',                 // the unique ID name of the menu element.           (string)
     BottomAnchorID:'bottomanchor', // the unique ID name of the bottom anchor element.  (string)
     Refresh:5000                   //(optional) the refresh interval delay in millisec. (number, default = no refresh)
    });
    /*]]>*/
    </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/


  •  

    LinkBacks (?)

    1. 03-03-2014, 11:43 AM

    Posting Permissions

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