I've created a toolbar in html that displays a series of icons that act as link to perform a variety of different functions. (the links aren't fully live yet but they will be!). I need to take this html and turn it into a bookmarklet so upon clicking the bookmark my toolbar will appear at the bottom of any given page on the internet.
I've posted the code below, doesn't anyone know how to convert this so I can run it dynamically like suggested above?
Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
background: #7f7f7f url(background.gif) no-repeat center top;
margin: 0;
padding: 0;
font: 10px normal Verdana, Arial, Helvetica, sans-serif;
height: 100%;
}
* {margin: 0; padding: 0; outline: none;}
img {border: none;}
h1 {
font-size: 1.2em;
padding: 5px 10px;
color: #ccc;
width: 940px;
margin: 0 auto;
}
h1 a { color: #fff; }
h1 span {font-weight: normal;}
#footpanel {
position: fixed;
bottom: 0;
z-index: 9999; /*--Keeps the panel on top of all other elements--*/
background: #e3e2e2;
border: 1px solid #c3c3c3;
border-bottom: none;
width: 90%;
margin: 0 3%;
}
*html #footpanel { /*--IE6 Hack - Fixed Positioning to the Bottom--*/
margin-top: -1px; /*--Prevents IE6 from having an infinity scroll bar - due to 1px border on #footpanel--*/
position: absolute;
top:expression(eval(document.compatMode &&document.compatMode=='CSS1Compat') ?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
}
#footpanel ul {
padding: 0; margin: 0;
float: left;
width: 100%;
list-style: none;
border-top: 1px solid #fff; /*--Gives the bevel feel on the panel--*/
font-size: 1.1em;
}
#footpanel ul li{
padding: 0; margin: 0;
float: left;
}
#footpanel ul li a{
padding: 5px;
float: left;
text-indent: -9999px; /*--For text replacement - Shove text off of the page--*/
height: 16px; width: 16px;
text-decoration: none;
color: #333;
position: relative;
}
html #footpanel ul li a:hover{ background-color: #fff; }
html #footpanel ul li a.active { /*--Active state when sub-panel is open--*/
background-color: #fff;
height: 17px;
margin-top: -2px; /*--Push it up 2px to attach the active button to sub-panel--*/
border: 1px solid #555;
border-top: none;
z-index: 200; /*--Keeps the active link on top of the sub-panel--*/
position: relative;
}
#footpanel a.home{
background: url(diverse.png) no-repeat 15px center;
width: 50px;
padding-left: 40px;
border-right: 1px solid #bbb;
text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
}
a.home{ background: url(diverse.png) no-repeat left left; }
a.Facebook{ background: url(facebook.png) no-repeat center center; }
a.twitter{ background: url(twitter.png) no-repeat center center; }
a.Like{ background: url(like.png) no-repeat center center; }
a.dislike{ background: url(dislike.png) no-repeat center center; }
a.add{ background: url(add.png) no-repeat center center; }
a.report{ background: url(report.png) no-repeat center center; }
a.hide{ background: url(hide.png) no-repeat center center; }
#footpanel a small {
text-align: center;
width: 70px;
background: url(pop_arrow.gif) no-repeat center bottom;
padding: 5px 5px 11px;
display: none; /*--Hide by default--*/
color: #fff;
font-size: 1em;
text-indent: 0;
}
#footpanel a:hover small{
display: block; /*--Show on hover--*/
position: absolute;
top: -35px; /*--Position tooltip 35px above the list item--*/
left: 50%;
margin-left: -40px; /*--Center the tooltip--*/
z-index: 9999;
}
#hide a small {
text-align: center;
width: 70px;
background: url(pop_arrow.gif) no-repeat center bottom;
padding: 5px 5px 11px;
display: none; /*--Hide by default--*/
color: #fff;
font-size: 1em;
text-indent: 0;
}
#hide a:hover small{
display: block; /*--Show on hover--*/
position: absolute;
top: -35px; /*--Position tooltip 35px above the list item--*/
left: 50%;
margin-left: -40px; /*--Center the tooltip--*/
z-index: 9999;
}
*html #hide { /*--IE6 Hack - Fixed Positioning to the Bottom--*/
margin-top: -1px; /*--Prevents IE6 from having an infinity scroll bar - due to 1px border on #footpanel--*/
position: absolute;
top:expression(eval(document.compatMode &&document.compatMode=='CSS1Compat') ?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
}
#hide ul {
padding: 0; margin: 0;
float: left;
width: 100%;
list-style: none;
border-top: 1px solid #fff; /*--Gives the bevel feel on the panel--*/
font-size: 1.1em;
}
#hide ul li{
padding: 0; margin: 0;
float: left;
}
#hide ul li a{
padding: 5px;
float: left;
text-indent: -9999px; /*--For text replacement - Shove text off of the page--*/
height: 16px; width: 16px;
text-decoration: none;
color: #333;
position: relative;
}
#hide {
position: fixed;
bottom: 0; right: 0;
z-index: 9999; /*--Keeps the panel on top of all other elements--*/
background: #e3e2e2;
border: 1px solid #c3c3c3;
border-bottom: none;
width: 2%;
margin: 0 3%;
}
</style>
<script language="javascript">
function toggle() {
var ele = document.getElementById("footpanel");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>
</head>
<body>
<div id="footpanel">
<ul id="mainpanel">
<li><a href="http://link.link.com" class="home"> <small c>Visit Us</small></a></li>
<li><a href="http://link.link.com" class="Facebook">Facebook <small>Share on Facebook</small></a></li>
<li><a href="http://link.link.com" class="twitter">Twitter <small>Post to Twitter</small></a></li>
<li><a href="http://link.link.com" class="Like">Like <small>Like this article</small></a></li>
<li><a href="http://link.link.com" class="dislike">Dislike <small>Dislike this article</small></a></li>
<li><a href="http://link.link.com" class="add">Add Link <small>Add this Article</small></a></li>
<li><a href="http://link.link.com" class="report">Report <small>Report this Article</small></a></li>
</ul>
</div>
<div id ="hide">
<ul id="mainpanel">
<li><a id="displayText" href="javascript:toggle();" class="hide">Hide/Show <small>Hide/Show Toolbar</small></a></li>
</ul>
</div>
</body>
</html>