Results 1 to 8 of 8

Thread: Expandable Sticky Bar - installed great, but want to tweak something

  1. #1
    Join Date
    May 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Expandable Sticky Bar - installed great, but want to tweak something

    1) Script Title: Expandable Sticky Bar

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici.../stickybar.htm

    3) Describe problem: It installed great and is working nicely. Only thing I am wondering is if it is possible to have it open upon entering the site? Mean once I type www.noaliving.com and the homepage is loaded the sticky bar is already opened and then will need to be closed if they want. Looked through the CSS and JS. Didn't see anything that I thought would help. Any ideas?

    website is : www.noaliving.com

  2. #2
    Join Date
    May 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Come on admins. Help a guy out! Is there an ability to do this?

  3. #3
    Join Date
    May 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    ttt. Has anyone else wondered about this? Sometimes people don't want to hide these things from the start only afterwards.

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,793
    Thanks
    2
    Thanked 418 Times in 412 Posts

    Default

    modify function init(show in red)

    Code:
    	init:function($, setting){
    		var thisbar=this
    		this.$stickybar=$('#'+setting.id).css('visibility', 'visible')
    		this.height=this.$stickybar.outerHeight()
    		this.currentstate="hide"
    		setting.peekamount=Math.min(this.height, setting.peekamount)
    		this.setting=setting
    		if (setting.revealtype=="mouseover")
    			this.$stickybar.bind("mouseenter mouseleave", function(e){
    				thisbar.showhide((e.type=="mouseenter")? "show" : "hide", true)
    		})
    		this.$indicators=this.$stickybar.find('img[data-openimage]') //find images within bar with data-openimage attribute
    		this.$stickybar.find('a[href=#togglebar]').click(function(){ //find links within bar with href=#togglebar and assign toggle behavior to them
    			thisbar.toggle()
    			return false
    		})
    		setTimeout(function(){
    			thisbar.height=thisbar.$stickybar.outerHeight() //refetch height of bar after 1 second (last change to properly get height of sticky bar)
    		}, 1000)
    		this.showhide(setting.revealtype=="show"?"show":"hide")
    	}
    modified initialize call

    Code:
    var mystickybar=new expstickybar({
    	id: "stickybar", //id of sticky bar DIV
    	position:'bottom', //'top' or 'bottom'
    	revealtype:'show', //'mouseover' or 'manual' or 'show'
    	peekamount:35, //number of pixels to reveal when sticky bar is closed
    	externalcontent:'', //path to sticky bar content file on your server, or "" if content is defined inline on the page
    	speed:200 //duration of animation (in millisecs)
    })
    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/

  5. The Following User Says Thank You to vwphillips For This Useful Post:

    uriahdortch (06-18-2012)

  6. #5
    Join Date
    May 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Phillips,

    Worked Great! Thanks.

    I noticed in your tag that you are affiliated with Operation Smile. I would be happy to make a donation. thanks.

  7. #6
    Join Date
    Jan 2009
    Location
    Jersey Shore
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I am using this solution on a WordPress site. As the bar is on every page and it is set to open when the page loads, I want for it to remember that the user has closed the bar when they are navigating the site. So there needs to be a cookie to remember this information during the session, but I'm not sure how to write this code. Can you help me with this?

  8. #7
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,793
    Thanks
    2
    Thanked 418 Times in 412 Posts

    Default

    with a session cookie

    Code:
    	showhide:function(keyword, anim){
    		var thisbar=this, $=jQuery
    		var finalpx=(keyword=="show")? 0 : -(this.height-this.setting.peekamount)
    
    		var positioncss=(this.setting.position=="bottom")? {bottom:finalpx} : {top:finalpx}
    		this.$stickybar.stop().animate(positioncss, (anim)? this.setting.speed : 0, function(){
    			thisbar.$indicators.each(function(){
    				var $indicator=$(this)
    				$indicator.attr('src', (thisbar.currentstate=="show")? $indicator.attr('data-closeimage') : $indicator.attr('data-openimage'))
    			})
    		})
            document.cookie=this.setting.id+'='+keyword+';';  // session cookie
     		thisbar.currentstate=keyword
    	},
    
    	toggle:function(){
    		var state=(this.currentstate=="show")? "hide" : "show"
    		this.showhide(state, true)
    	},
    
        cookie:function(nme){
         var re=new RegExp(nme+'=[^;]+','i');
         if (document.cookie.match(re)){
          return document.cookie.match(re)[0].split("=")[1];
         }
         return null;
        },
    
    
    	init:function($, setting){
    		var thisbar=this,ck=this.cookie(setting.id);
    		this.$stickybar=$('#'+setting.id).css('visibility', 'visible')
    		this.height=this.$stickybar.outerHeight()
    		this.currentstate="hide"
    		setting.peekamount=Math.min(this.height, setting.peekamount)
    		this.setting=setting
    		if (setting.revealtype=="mouseover")
    			this.$stickybar.bind("mouseenter mouseleave", function(e){
    				thisbar.showhide((e.type=="mouseenter")? "show" : "hide", true)
    		})
    		this.$indicators=this.$stickybar.find('img[data-openimage]') //find images within bar with data-openimage attribute
    		this.$stickybar.find('a[href=#togglebar]').click(function(){ //find links within bar with href=#togglebar and assign toggle behavior to them
    			thisbar.toggle()
    			return false
    		})
    		setTimeout(function(){
    			thisbar.height=thisbar.$stickybar.outerHeight() //refetch height of bar after 1 second (last change to properly get height of sticky bar)
    		}, 1000)
            this.setting=setting;
    		this.showhide(ck?ck:setting.onstartreveal?"show":'hide')
    	}

    new option

    Code:
    var mystickybar=new expstickybar({
    	id: "stickybar", //id of sticky bar DIV
    	position:'bottom', //'top' or 'bottom'
    	revealtype:'mouseover', //'mouseover' or 'manual'
    	peekamount:35, //number of pixels to reveal when sticky bar is closed
    //	externalcontent:'stickybarcontent.htm', //path to sticky bar content file on your server, or "" if content is defined inline on the page
    	speed:200, //duration of animation (in millisecs)
        onstartreveal:true  // to reveal the stickybar on initialization
    })
    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/

  9. #8
    Join Date
    Jan 2009
    Location
    Jersey Shore
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Vic, thank you so much for doing this! That's great!

    I'd like to suggest you add this to the script as I think it would be greatly appreciated!

    Best wishes!

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
  •