Looking for a js or css popup bar

Hi, I'm looking for css/js code to add a popup bar to the bottom of my site.

I've looked on google and I've found it really hard to find examples.

When my site loads I want the bar to slide up at the bottom of the page and stick there as the site is scrolled up and down.

Does anyone know of any scripts that do this?

 

.bottomBar {
  position:fixed;
  bottom:0;
  width:100%;
  height:7em;
  line-height:1.4em; /* an even multiple of the 7em height */
}

Code (markup):

Doesn't provide any goofy animation, just loads it fixed there... which is probably better since goofy animated crap is usually a waste of code, particularly in javascript since it's nothing more than crap to get in the way of the important part, getting your content to the user.

IN THAT WAY a fixed header or footer is something I'd advise against even TRYING to do in the first place! Why? Because it decreases the height available to the user for the actual CONTENT? Ever notice you don't see this type of trickery on REAL websites? There's a REASON for that! Don't piss off users by fixing a header or footer forcing a decrease in the available vertical screen space that's available for what they actually came to the site for -- the CONTENT. -- that's bad/inaccessible design... or as I like to call it "Gee ain't it neat" pointless garbage.

Which may be a reason you're not finding a lot of examples either.

 

Hello, thanks for the reply. It's for a temporary advert. That's why I am using it. Is there a way to add a close button?

Thanks for the help!

 

Closing it would take a bit of javascript... easiest way being to have that script set the fixed div to 'display:none;' -- a quick and dirty versions would be:

<span onclick="this.parentNode.style.display='none'; return false;">Close</span>

Sticking that span in your DIV somewhere. (It HAS to be a direct child since it's targeting via parentNode)

A more proper approach would have scripting add that element via the DOM and adding all the proper code hooks... but if it's a one-off even I'd look the other way and not rag on you for using the smaller/simpler 'onclick' version. An even BETTER version might leave a small bit in the bottom corner to let it be re-opened -- swapping a class on the parent instead of playing with display could be leveraged to do that.

You could also get 'fancy' by trying to change it's bottom position with the script and set up some CSS3 transitions, but generally I don't consider that worth the effort or extra code.

 

Hi

Source:
fortysevenmedia

 

Thanks guys. I have actually found some code with a close and open button but I can't get it to work:

<style>
/* ------------- Hompage bottom ad unit ------------------ */
 
#adUnit, #adUnit1 {
position:fixed;
bottom: 0;
left: 0;
padding:0;
height: 90px; 
cursor: pointer;
margin: 0;
margin-Bottom: -90px;
width:100%;
font-family: arial, sans-serif;
font-size: 18px;
text-align: left;
}
#adUnit #adMain, #adUnit1 #adMain{
overflow:hidden;
text-indent:-1000em;
width:325px;
height:90px;
float:left;
}
#adUnit ul {
margin: 30px 16px 0pt 0pt;
padding: 10px 0 0 0 ;
float: right;
font-size: x-small;
list-style-type: none;
}
#adUnit1 ul{
margin: 30px 16px 0pt 0pt;
float: right;
font-size: x-small;
padding-top:4px;
list-style-type: none;
}
#adUnit ul li a, #adUnit1 ul li a{
color:#ffffff;
}
#adUnit p#adSide, #adUnit1 p#adSide{
margin: 35px 0pt 0pt 350px;
}
#adUnit form#adSideForm, #adUnit1 form#adSideForm{
margin: 35px 0pt 0pt 300px;
}
#adUnit a:link, #adUnit a:link {color:#ffffff; text-decoration: none;}
#adUnit a:visited, #adUnit a:visited {color:#ffffff; text-decoration: none;}
#adUnit a:hover, #adUnit a:hover {color:#91BAE2; text-decoration: none;}
#adUnit a:active, #adUnit a:active {color:#91BAE2; text-decoration: none;}
</style>
 
<div title="" style=" visibility: hidden; background-image: url(images/ads/bluebar.gif);  margin-bottom: 0pt;" id="adUnit">
 
<a href="" target="_blank" rel="nofollow"><div style="background-image: url(images/ads/logo.png);" id="adMain"></div></a>
 
<ul>
<li><span title="Click To Close Me" style="color: #FFFFFF; text-decoration: none;" id="closeme" onClick="inter=setInterval('HideBox()',3); return false;">Close advert X</span></li>
</ul>
 
<a href=" target="_blank" rel="nofollow"><p id="adSide" style="padding-top: 10px; color: #ffffff; width: 100%;">text here</p>
</div></a>
 
<div title="" style=" visibility: hidden; background-image: url(images/ads/adbluebg.gif); margin-bottom: 0pt; height:45px;" id="adUnit1">
<ul>
<li><span title="Click To Open Me" style=" vertical-align:top; color: #FFFFFF; text-decoration: none;" id="openme" onClick="inter=setInterval('ShowBox()',3); return false;">Open advert</span></li>
</ul>
<pid="adSide">
</div>

Code (markup):

Is it missing the js library?

 

So far I'm seeing little but examples of how to take something simple, and make it needlessly and pointlessly complex. The code you just posted being some of the worst with invalid/incomplete markup and things (like target) that have no business even being used on any website written after 1997-- and yes, that needs some extra 'scripting for nothing' to make it work too. (likely some fat bloated external library of garbage).

Czech this out:

<div id="bottomAdvert" class="show">
	<span
		onclick="this.parentNode.className='show'; return false;"
		class="showButton"
	>Show</span>
	<span
		onclick="this.parentNode.className='hide'; return false;"
		class="hideButton"
	>Hide</span>
	<div id="bottomAdvertContent">
		Put your content to be shown/hidden here.
	<!-- .content --></div>
<!-- #bottomAdvert --></div>

Code (markup):

#bottomAdvert {
	position:fixed;
	bottom:0;
	left:0;
	width:100%;
}

#bottomAdvertContent {
	padding:1em;
	background:#EEE;
	border-top:2px solid #000;
}

.hide #bottomAdvertContent,
.show .showButton,
.hide .hideButton {
	display:none;
}

.showButton,
.hideButton {
	float:right;
	margin:0.8em 0.5em 0.8em 0;
	padding:0.2em 0.5em;
	line-height:1.2em;
	background:#CCC;
	border:2px solid #666;
	border-radius:0.8em;
}

Code (markup):

Far, FAR simpler. Again, let CSS do all the heavy lifting. If one wanted the height of the inner content DIV could be varied from 0 to a fixed size so you could have CSS3 transitions handle slide-in animated 'gee ain't it neat' nonsense.

 

Great thanks! that's a perfect example of what I was looking for.

Now, one last thing...do you know how to add a cookie to it so once a user closes it, it doesn't keep opening every time they visit the page?

 

That's the point at which I'd get more complex and move all the scripting out of the markup and do it 'right'.

Something like:
http://www.cutcodedown.com/for_others/fadeToBlack22/showHide.html

As with all my examples the directory:
http://www.cutcodedown.com/for_others/fadeToBlack22/

Is wide open so you can get at all the gooey bits.

you'll notice the markup is GREATLY gutted down -- done 'properly' Javascript should enhance markup, not be markup - it's why I'm not a fan of the onxxxxxx attributes.

In the markup I load the script right before </body> and directly call the function that adds the buttons and scripting classes. Loading the file before </body> runs faster than putting it in HEAD, and calling the function instead of adding a onload handler in most browsers will run the script before CSS is applied to the page, preventing any oddball 'jumping' into position or visual reflows.

In the showHide.js I put in the two standard cookie functions I use, and then the actual 'showHideAdd' function to which you pass the id of the element you want to add the show/hide functionality to. Since the functionality on the scripting only does a class swap, you can use this to add show/hide functionality to ANY element by just making custom CSS for each.

The routine grabs the target by it's ID, and sets up the 'show' or 'hide' class based on the cookie status. I then make a generic show/hide function that has all the proper cross-browser hooks to determine what element trigged an 'on' event, determines if we're showing or hiding, sets that state, sets the cookie, and then kills any event 'bubbling'. (NOT that a SPAN should have default event handlers, but just in case I like to do it anyways). I made the cookie date way in the future -- there's a joke to that date, I doubt anyone would get it.

I also make an 'addButton' method on the target... I add these to the target so as to keep them out of the global namespace. Some people get their panties in a twist about doing that, I really don't see the problem. Since both buttons use the same code, there's really no reason to say them twice. I DO pass the handler as a parameter even though it's the same, because at some future point one may want to expand the number of options/buttons with other handlers.

It's a bit more complex script-wise, you'll notice no real changes to the CSS (other than me prettying it up a bit) and the markup becomes simpler -- since the script now builds the scripting only elements. That way when scripting is off/unavailable it's not showing controls that don't even work!

 

Hey, sorry for the late reply. I was travelling. Do you still have the code that you used in those two example links as they don't work anymore.

Thanks!

 

Sorry there, host got hacked, restored from a backup that predates my examples. Links should work now.

 

Thanks, you've been a great help!