• 0
Sign in to follow this  
Followers 0

Adding Sticky Attribute to Universal Sidebar

Question

Posted · Report post

My apologies for no link to the url, but I'm using Instant Wordpress to try and develop a site to replace an existing one. Basically, what I'm trying to do is place the universal sidebar in the header and add the sticky effects to it like this: http://labs.anthonygarand.com/sticky/ I'm having a really hard time figuring out how to put the .js plugin file into the functions.php located in the customize plugin. the included file looks like:

(function($) {
	    var defaults = {
	            topSpacing: 0,
	            bottomSpacing: 0,
	            className: 'is-sticky',
	            wrapperClassName: 'sticky-wrapper'
	        },
	        $window = $(window),
	        $document = $(document),
	        sticked = [],
	        windowHeight = $window.height(),
	        scroller = function() {
	            var scrollTop = $window.scrollTop(),
	                documentHeight = $document.height(),
	                dwh = documentHeight - windowHeight,
	                extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
	            for (var i = 0; i < sticked.length; i++) {
	                var s = sticked[i],
	                    elementTop = s.stickyWrapper.offset().top,
	                    etse = elementTop - s.topSpacing - extra;
	                if (scrollTop <= etse) {
	                    if (s.currentTop !== null) {
	                        s.stickyElement
	                            .css('position', '')
	                            .css('top', '')
	                            .removeClass(s.className);
	                        s.stickyElement.parent().removeClass(s.className);
	                        s.currentTop = null;
	                    }
	                }
	                else {
	                    var newTop = documentHeight - s.stickyElement.outerHeight()
	                        - s.topSpacing - s.bottomSpacing - scrollTop - extra;
	                    if (newTop < 0) {
	                        newTop = newTop + s.topSpacing;
	                    } else {
	                        newTop = s.topSpacing;
	                    }
	                    if (s.currentTop != newTop) {
	                        s.stickyElement
	                            .css('position', 'fixed')
	                            .css('top', newTop)
	                            .addClass(s.className);
	                        s.stickyElement.parent().addClass(s.className);
	                        s.currentTop = newTop;
	                    }
	                }
	            }
	        },
	        resizer = function() {
	            windowHeight = $window.height();
	        },
	        methods = {
	            init: function(options) {
	                var o = $.extend(defaults, options);
	                return this.each(function() {
	                    var stickyElement = $(this);
	
	                    stickyId = stickyElement.attr('id');
	                    wrapper = $('
') .attr('id', stickyId + '-sticky-wrapper') .addClass(o.wrapperClassName); stickyElement.wrapAll(wrapper); var stickyWrapper = stickyElement.parent(); stickyWrapper.css('height', stickyElement.outerHeight()); sticked.push({ topSpacing: o.topSpacing, bottomSpacing: o.bottomSpacing, stickyElement: stickyElement, currentTop: null, stickyWrapper: stickyWrapper, className: o.className }); }); }, update: scroller }; // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer): if (window.addEventListener) { window.addEventListener('scroll', scroller, false); window.addEventListener('resize', resizer, false); } else if (window.attachEvent) { window.attachEvent('onscroll', scroller); window.attachEvent('onresize', resizer); } $.fn.sticky = function(method) { if (methods[method]) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === 'object' || !method ) { return methods.init.apply( this, arguments ); } else { $.error('Method ' + method + ' does not exist on jQuery.sticky'); } }; $(function() { setTimeout(scroller, 0); }); })(jQuery);[/code] which I then use this to place in the header area to call, no?
[code]

but when I attempted all of this, it broke the theme saying pagelines didn't expect a $ in the functions.php line 41 or something. If there is any way you all can help this noob figure it out that would be awesome. I also tried contacting a pro to figure it out, but to no avail. I fully expect it's me not knowing what the heck I'm doing, and even a point in the right direction would be greatly helpful. Thanks.

Share this post


Link to post
Share on other sites

2 answers to this question

  • 0

Posted · Report post

Hi, WordPress uses a later version of jQuery. Realistically, this is a job for one of our Pros and is likely not to be an easy task even for a developer. For example, one cannot use $ but must use jQuery(). One suggestion might be to use the Content Box, rather than the Universal Sidebar, though I believe you'll still require the help of one of our Pros - http://www.pagelines.com/pros I apologize. This is somewhat outside the scope of forum support.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I thought it might be, but wanted to give it a shot anyway. I'll try another pro. Thanks!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0