Me and a friend have created a bar that runs across the bottom of the browser. For my site this is perfect for advertising our shoutcast station, social networks and any further notices. Here is a demo of this:
http://lazyrecords.net/ajaxbar/test.html
We have added all the pages to the FTP, now we are having trouble placing the javascript data into the style coding. This is the coding for the <head>
HTML Code:
<head>
<title>TEST PAGE</title>
<style type="text/css">
html,
body {
margin: 0px 0px 0px 0px ;
padding: 0px 0px 0px 0px ;
}
#site-body-container {}
#left { float: left;}
#right { float: right;}
#site-body-content {
padding: 15px 15px 15px 15px ;
}
#site-bottom-bar {
background-color: #F0F0F0 ;
background-image : url(div.png);
background-position : top;
background-repeat : repeat-x;
border-top: 2px solid #941617 ;
bottom: 0px ;
font-family: tahoma, verdana ;
font-size: 11px ;
height: 30px ;
position: fixed ;
width: 100% ;
z-index: 1000 ;
}
#site-bottom-bar-frame {
height: 30px ;
margin: 0px 10px 0px 10px ;
position: relative ;
}
#site-bottom-bar-content {
padding: 3px 0px 0px 0px ;
}
#menu-root {
background-color: #E8E8E8 ;
border: 1px solid #D0D0D0 ;
color: #000000 ;
display: block ;
height: 22px ;
line-height: 22px ;
text-align: center ;
text-decoration: none ;
width: 105px ;
}
#menu-root:hover {
background-color: #666666 ;
border-color: #000000 ;
color: #FFFFFF ;
}
#menu {
background-color: #E8E8E8 ;
border: 1px solid #666666 ;
bottom: 32px ;
display: none ;
left: 0px ;
padding: 5px 5px 1px 5px ;
position: absolute ;
width: 200px ;
}
#menu a {
background-color: #E8E8E8 ;
border: 1px solid #FFFFFF ;
color: #000000 ;
display: block ;
margin-bottom: 4px ;
padding: 5px 0px 5px 5px ;
text-decoration: none ;
}
#menu a:hover {
background-color: #666666 ;
border-color: #000000 ;
color: #FFFFFF ;
}
/* -------------------------------------------------- */
/* -- IE 6 FIXED POSITION HACK ---------------------- */
/* -------------------------------------------------- */
html,
body,
#site-body-container {
_height: 100% ;
_overflow: hidden ;
_width: 100% ;
}
#site-body-container {
_overflow-y: scroll ;
_overflow-x: hidden ;
_position: relative ;
}
/* To make up for scroll-bar. */
#site-bottom-bar {
_bottom: -1px ;
_position: absolute ;
_right: 16px ;
}
/* To make up for overflow left. */
#site-bottom-bar-frame {
_margin-left: 26px ;
}
/* To fix IE6 display bugs. */
#menu a {
_display: inline-block ;
_width: 99% ;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
jQuery(function( $ ){
var menuRoot = $( "#menu-root" );
var menu = $( "#menu" );
// Hook up menu root click event.
menuRoot
.attr( "href", "javascript:void( 0 )" )
.click(
function(){
// Toggle the menu display.
menu.toggle();
// Blur the link to remove focus.
menuRoot.blur();
// Cancel event (and its bubbling).
return( false );
}
)
;
// Hook up a click handler on the document so that
// we can hide the menu if it is not the target of
// the mouse click.
$( document ).click(
function( event ){
// Check to see if this came from the menu.
if (
menu.is( ":visible" ) &&
!$( event.target ).closest( "#menu" ).size()
){
// The click came outside the menu, so
// close the menu.
menu.hide();
}
}
);
});
</script>
<script type="text/javascript">
function loadXmlHttp(url, id) {
var f = this;
if (loadXmlHttp.xmlHttp){
f.xmlHttp = loadXmlHttp.xmlHttp();
f.el = document.getElementById(id);
f.xmlHttp.open("GET", url, true);
f.xmlHttp.onreadystatechange = function(){f.stateChanged();};
f.xmlHttp.send(null);
}
else alert('Your browser does not support AJAX!'); // substitute your desired request object unsupported code here
}
loadXmlHttp.xmlHttp = null; loadXmlHttp.re = /^http/.test(window.location.href);
/*@cc_on @*/ // used here and below, limits try/catch to those IE browsers that both benefit from and support it
/*@if(@_jscript_version >= 5) // prevents errors in old browsers that barf on try/catch & problems in IE if Active X disabled
try {loadXmlHttp.ie = window.ActiveXObject}catch(e){};
@end @*/
if (window.XMLHttpRequest && (!loadXmlHttp.ie || loadXmlHttp.re))
loadXmlHttp.xmlHttp = function(){return new XMLHttpRequest();}; // Firefox, Opera 8.0+, Safari, others, IE 7+ when live - this is the standard method
else if (/(object)|(function)/.test(typeof createRequest))
loadXmlHttp.xmlHttp = createRequest; // ICEBrowser, perhaps others
else {
loadXmlHttp.xmlHttp = null;
// Internet Explorer 5 to 6, includes IE 7+ when local //
/*@if(@_jscript_version >= 5)
try{loadXmlHttp.xmlHttp = function(){return new ActiveXObject("Msxml2.XMLHTTP");};}
catch(e){try{loadXmlHttp.xmlHttp = function(){return new ActiveXObject("Microsoft.XMLHTTP");};}catch(e){}}
@end @*/
}
loadXmlHttp.prototype.stateChanged = function(){
if (this.xmlHttp.readyState == 4 && (this.xmlHttp.status == 200 || !loadXmlHttp.re)){
this.el.innerHTML = this.xmlHttp.responseText;
if(this.success){
this.success();
}
}
}
</script>
</head>
When i attempted to paste this into the headerinclude template it wouldnt allow me to save. Im thinking im going to need to add the CSS data into a new CSS template, but even without the CSS data the headerinclude would still not save the remaining the data. Any help?
More Information