PDA

View Full Version : Simple Info Bar with Customization



Ponder
08-15-2012, 03:34 AM
1) Script Title: Expandable Sticky Bar

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

3) Describe problem: This info bar is very cool and while I got it to work as it is designed, it's a little complicated for my level of knowledge and I think it has much more capabilities than I am looking for.

Anybody know of an information bar on DD that can sit at the top of a page, but not encroach onto the top of the page, stay there so that when the page is scrolled it goes out of view, and can be customized, BG color, Text Color and font size etc. Like to find something like this that allows for most of the code to be external with minimal on the page. Just stationary will work just fine.

Any Ideas....thank You...Ponder

ajfmrf
08-15-2012, 01:21 PM
Here is another option.
http://www.dynamicdrive.com/dynamicindex17/dddropdownpanel.htm

It uses a tab at the top of the page.Click the tab and the info drops down.Click (the page that just dropped down) or the tab and it goes back up out of sight.

vwphillips
08-15-2012, 02:50 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>

<style type="text/css">
<!--

#bar {
position:absolute;z-Index:101;left:0px;top:-50px;width:100%;height:100px;background-Color:red;
}

-->
</style>

<script type="text/javascript">
<!--

function zxcBar(id,to,ms){
var o=zxcBar['zxc'+id],obj=document.getElementById(id);
if (obj&&typeof(to)=='number'){
if (!o){
zxcBar['zxc'+id]=o={
now:obj.offsetTop,
ms:typeof(ms)=='number'?ms:1000
}
}
clearTimeout(o.dly);
this.animate(o,obj,o.now,to,new Date(),o.ms);
}
}

function animate(o,obj,f,t,srt,mS){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
o.now=now;
obj.style.top=now+'px';
}
if (ms<mS){
o.dly=setTimeout(function(){ oop.animate(o,obj,f,t,srt,mS); },10);
}
else {
o.now=t;
obj.style.top=t+'px';
}
}



//-->
</script></head>

<body>
<div id="bar" onmouseover="zxcBar('bar',0,1000);" onmouseout="zxcBar('bar',-50);" >
<a href=#" > content goes here </a>
</div>
</body>

</html>

Ponder
08-15-2012, 09:47 PM
Thanks very much....I'm working on this.....Ponder

Ponder
08-15-2012, 09:49 PM
Thanks VW...Is there some help or documentation somewhere....Could not find anything but need some help to get it styled so I can see what it does.......

Thanks..Ponder

vwphillips
08-16-2012, 08:12 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>

<style type="text/css">
<!--

#bar {
position:absolute;z-Index:101;left:0px;top:-50px;width:100%;height:100px;background-Color:red;
}

-->
</style>

<script type="text/javascript">
<!--
/*

A function to animate an element up or down

The element must be assigned a unique ID name
The element must be assigned a CSS position of 'absolute' or 'relative'
and the appearance defined by CSS class rule or inline HTML or style

The script is executed by calling function zxcBar passing script options as parameters
e.g.
zxcBar('bar',0,1000);
where
parameter 0 = the unique ID name of the element. (string)
parameter 1 = the new top position of the element. (number)
parameter 2 = (optional) the animation duration in milli seconds. (number, default - 1000)

*/
function zxcBar(id,to,ms){
var o=zxcBar['zxc'+id],obj=document.getElementById(id);
if (obj&&typeof(to)=='number'){
if (!o){
zxcBar['zxc'+id]=o={
now:obj.offsetTop,
ms:typeof(ms)=='number'?ms:1000
}
}
clearTimeout(o.dly);
this.animate(o,obj,o.now,to,new Date(),typeof(ms)=='number'?ms:o.ms);
}
}

function animate(o,obj,f,t,srt,mS){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
o.now=now;
obj.style.top=now+'px';
}
if (ms<mS){
o.dly=setTimeout(function(){ oop.animate(o,obj,f,t,srt,mS); },10);
}
else {
o.now=t;
obj.style.top=t+'px';
}
}



//-->
</script></head>

<body>
<div id="bar" onmouseover="zxcBar('bar',0,1000);" onmouseout="zxcBar('bar',-50);" >
<a href=#" > content goes here </a>
</div>
</body>

</html>

ajfmrf
08-16-2012, 08:22 AM
<style type="text/css">
<!--

#bar {
position:absolute;z-Index:101;left:0px;top:-50px;width:100%;height:100px;background-Color:red;
}

-->
</style>

This is where you change how it looks.You can add a border,change link colors,change the background color.You can also change text size and add images if you want too.

you can do quite a bit with the css.

Ponder
08-16-2012, 11:36 AM
Thanks very much.....I can put something together from your help...

Many thanks..Ponder