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/dynamici.../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/dynamici...pdownpanel.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

Code:

<!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

Code:

<!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

Code:

<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

Thread: Simple Info Bar with Customization

Thread Tools

Search Thread

Simple Info Bar with Customization

Bookmarks

Bookmarks

Posting Permissions