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

[uriahdortch]

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

[uriahdortch]

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

[uriahdortch]

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

[vwphillips]

modify function init(show in red)

	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

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)
})

[uriahdortch]

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.

[Trishah]

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?

[vwphillips]

with a session cookie

	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

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
})

[Trishah]

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!