PDA

View Full Version : Expandable Sticky Bar - installed great, but want to tweak something



uriahdortch
05-31-2012, 09:15 PM
1) Script Title: Expandable Sticky Bar

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/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
06-04-2012, 05:11 PM
Come on admins. Help a guy out! Is there an ability to do this?

uriahdortch
06-11-2012, 03:45 PM
ttt. Has anyone else wondered about this? Sometimes people don't want to hide these things from the start only afterwards.

vwphillips
06-11-2012, 04:00 PM
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
06-12-2012, 03:01 PM
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
01-25-2013, 04:15 AM
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
01-25-2013, 02:21 PM
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
01-28-2013, 04:04 AM
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!