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
    Regular Coder
    Join Date
    Feb 2005
    Posts
    191
    Thanks
    6
    Thanked 0 Times in 0 Posts

    StickyFloat js DESTROY help

    Hello,

    I'm using this stick sidenav script that works great for my purposes except I need to destroy the function and am having trouble getting the destroy function to actually work despite it being written exactly as it is in the demo. I'm wondering if someone could check my code and let me know what I might be missing. (The destroy function is commented out)

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<title>STICKY</title>
    	<meta charset="UTF-8" />
    	<style type="text/css">	
    	   body{ margin:0; padding:0; font-size:12px; font-family: helvetica; }
    	  .menu{ position:absolute; left:24px; top:0; padding:15px; width:312px; background: silver; color:#fff; }				
    	</style>
    	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    	<script type="text/javascript">
    	/**
         * stickyfloat - jQuery plugin for verticaly floating anything in a constrained area
         * @version         Version 7.5
         * @author          Yair Even-Or (vsync)
         * @copyright       Copyright (c) 2013
         * @license         MIT and GPL licenses.
         * @link            http://dropthebit.com
         *
         **/
        (function(e){function g(a){a=a.parent();var d=parseInt(a.css("padding-bottom")),c=parseInt(a.css("padding-top"));return{startOffset:a.offset().top,offsetBottom:d,offsetY:c}}var j=window,l=document,h,n,p,q,f,s={duration:200,lockBottom:!0,delay:0,easing:"linear",stickToBottom:!1,cssTransition:!1},t=function(){var a,d=l.createElement("div"),c=["ms","O","Moz","Webkit"],b="transition";if(""==d[b])return!0;b=b.charAt(0).toUpperCase()+b.slice(1);for(a=c.length;a--;)if(""==d[c[a]+b])return!0;return!1}(), r=function(a,d){this.settings=a;this.obj=e(d)};r.prototype={init:function(){var a=this;this.onScroll=function(){a.rePosition()};e(j).ready(function(){a.rePosition(!0);e(j).on("scroll.sticky, resize.sticky",a.onScroll)});this.obj.data("_stickyfloat",a)},rePosition:function(a,d){var c=this.obj,b=this.settings,e=a?0:b.duration,k=j.pageYOffset||l.documentElement.scrollTop,g=j.innerHeight||l.documentElement.offsetHeight,m=c[0].clientHeight;c.stop();b.lockBottom&&(h=c[0].parentNode.clientHeight-m-b.offsetBottom); 0>h&&(h=0);n=k>b.startOffset;p=c.offset().top>b.startOffset+b.offsetY;q=m<g;if((n||p)&&q||d)f=b.stickToBottom?k+g-m-b.startOffset-b.offsetY:k-b.startOffset+b.offsetY,f>h&&b.lockBottom&&(f=h),f<b.offsetY?f=b.offsetY:k<b.startOffset&&!b.stickToBottom&&(f=b.offsetY),5>e||b.cssTransition&&t?c[0].style.top=f+"px":c.stop().delay(b.delay).animate({top:f},e,b.easing)},update:function(a){if("object"===typeof a){if(!a.offsetY||"auto"==a.offsetY)a.offsetY=g(this.obj).offsetY;if(!a.startOffset||"auto"==a.startOffset)a.startOffset= g(this.obj).startOffset;this.settings=e.extend({},this.settings,a);this.rePosition(!1,!0)}return this.obj},destroy:function(){e(window).off("scroll.sticky, resize.sticky",this.onScroll);this.obj.removeData();return this.obj}};e.fn.stickyfloat=function(a,d){return this.each(function(){var c=e(this);if("undefined"==typeof document.body.style.maxHeight)return!1;if("object"===typeof a)d=a;else if("string"===typeof a)return c.data("_stickyfloat")&&"function"==typeof c.data("_stickyfloat")[a]?(c=c.data("_stickyfloat"), c[a](d)):this;var b=e.extend({},s,g(c),d||{}),c=new r(b,c);c.init()})}})(jQuery);
    	</script>
    </head>
    <body>
        <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
    <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
        
        <div class="menu">Test Scroll</div>
    		
    	<script>
    		// init the pluging and bind it to the #menu element
    		$('.menu').stickyfloat();
            // $('.menu').stickyfloat('destroy');
        </script>
        
    </body>
    </html>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,567
    Thanks
    78
    Thanked 4,385 Times in 4,350 Posts
    Why not ask the author???
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Regular Coder
    Join Date
    Feb 2005
    Posts
    191
    Thanks
    6
    Thanked 0 Times in 0 Posts
    I did, he insists the destroy function works although I am having trouble seeing this. Wondering if someone could take a look who knows JS better. Perhaps I am missing something here.

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    Code:
       destroy: function () {
                 e(window).off("scroll.sticky, resize.sticky", this.onScroll);
                 this.obj.removeData();
                 return this.obj
             }
    .remvoeData() only clears data attributes, so yeah I can see where that would be odd. maybe do this if you want it to remove completely

    Code:
       destroy: function () {
                 e(window).off("scroll.sticky, resize.sticky", this.onScroll);
                 this.obj.removeData();
                 this.obj.remove();
                 return this.obj
             }

  • Users who have thanked DanInMa for this post:

    wyclef (09-13-2013)

  • #5
    Regular Coder
    Join Date
    Feb 2005
    Posts
    191
    Thanks
    6
    Thanked 0 Times in 0 Posts
    ah, you're right! remove actually removes however now it removes the object as well as the function and i'm looking to leave the menu. any ideas?

  • #6
    Regular Coder
    Join Date
    Feb 2005
    Posts
    191
    Thanks
    6
    Thanked 0 Times in 0 Posts
    I've found that .removeAttr is working better for my purposes however am having trouble reactivating it after it's been removed. this is what i'm working with.. this is what i'm trying to do utilizing the .removeAttr for destroy but the resize > than isn't right.

    Code:
    function initStickyFloat() { 
        
        jQuery('#sidebar').stickyfloat({ duration: 300 });     
         
         
        if ($(window).width() <= 746) {  
            jQuery('#sidebar').stickyfloat('destroy');
        }
        
         
        $(window).resize(function() {   
            if ($(window).width() <= 746) { 
                console.log($(window).width());
                jQuery('#sidebar').stickyfloat('destroy');
                jQuery('aside').css({ top: '0px' }); 
            } 
            
        });     
        
        $(window).resize(function() {   
            if ($(window).width() > 746) { 
                jQuery('#sidebar').stickyfloat('update',{ duration : 300 });
            } 
            
        });     
        
        
        
    }

  • #7
    Regular Coder
    Join Date
    Feb 2005
    Posts
    191
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Exclamation

    This is where I'm at with this. Any help GREATLY appreciated..

    http://dynodealz.com/sticky

    I am trying to destroy the sticky function below a certain window width because on mobile view the sticky sidebar is not necessary and looks messed up. The author of the script uses a destroy function on line 151 of his script utilizing .removeData which I wasn't able to get to work so it was switched to .removeAttr. I sort of have this working but once you scale the page down then when you go back up I can't figure out how to get the function to reactivate. I am confident this is simpler than it sounds and there is probably a simpler solution to this than what I'm working with.

    I realize this isn't the most straightforward problem, but I've reached a dead end here. Need another set of eyes.

    Thanks.

    EDITING BECAUSE: Plugin author fixed an issue with the script. Don't bother looking into this until I update post with new information.
    Last edited by wyclef; 09-15-2013 at 04:52 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
    •