Universal Post Bar

By Luke Boland — Last update Apr 17, 2009 — Installed 1,320 times.

How it works

in
Subscribe to How it works 1 post, 1 voice

Dec 16, 2008 10:05am
Luke Boland Script's Author

Again, like my previous offering, this script is not easy to read or understand, so I'll try and present the code in a more eye-friendly manner. Firstly, the code, as it stands: 

if(window==parent)

{

   varHead = document.getElementsByTagName("head")[0];

   varBody = document.getElementsByTagName("body")[0];

   var postingButton = document.createElement('div');

   var postingBar = document.createElement('div');



   varHead.appendChild(document.createElement('style')).innerHTML = ".gm_post_button\n{\n   position:absolute;\n   right:0px;\n   top:50%;\n   margin-top:-50px;\n   z-index:99;\n   background-color:#ccccff;\n   border:1px solid black;\n   text-align:center;\n   cursor:pointer;\n   padding: 0px 3px 0px 3px;\n   color:black;\n   font-size:12pt;\n}\n.gm_post_bar\n{\n   position:absolute;\n   right:0px;\n   top:50%;\n   margin-top:-215px;\n   width:4px;\n   z-index:98;\n   background-color:#ccccff;\n   text-align:left;\n   height:430px;\n   overflow:hidden;\n   padding:0px;\n   color:black;\n   font-size:12pt;\n}\n.gm_post_bar ul\n{\n   list-style:none;\n   padding:0px;\n   margin:0px;\n}\n.gm_post_bar ul li\n{\n   margin:8px;\n   height:20px;\n   cursor:pointer;\n   overflow:hidden;\n}";



   varHead.appendChild(document.createElement('script')).innerHTML = "var gm_post_bar_hiding = true;\nvar gm_post_bar_width = 4;\nvar gm_post_bar_size_timer;\nfunction gm_post_bar_click()\n{\n   if(gm_post_bar_hiding)\n   {\n      gm_post_bar_hiding = false;\n      gm_post_bar_show();\n   }\n   else\n   {\n      gm_post_bar_hiding = true;\n      gm_post_bar_hide();\n   }\n}\nfunction gm_post_bar_hide()\n{\n   if(gm_post_bar_width > 4 && gm_post_bar_hiding)\n   {\n      gm_post_bar_width = gm_post_bar_width - 2;\n      clearTimeout(gm_post_bar_size_timer);\n      gm_post_bar_timer = setTimeout(\"document.getElementById('gm_post_bar').style.width=gm_post_bar_width+'px';gm_post_bar_hide();\",1);\n   }\n}\nfunction gm_post_bar_show()\n{\n   if(gm_post_bar_width < 200 && !gm_post_bar_hiding)\n   {\n      gm_post_bar_width = gm_post_bar_width + 2;\n      clearTimeout(gm_post_bar_size_timer);\n      gm_post_bar_timer = setTimeout(\"document.getElementById('gm_post_bar').style.width=gm_post_bar_width+'px';gm_post_bar_show();\",1);\n   }\n}\nfunction gm_post_bar_fb_click()\n{\n   gm_post_bar_post('http://www.facebook.com/sharer.php?u='+encodeURIComponent(location.href)+'&t='+encodeURIComponent(document.title),626,436);\n}\nfunction gm_post_bar_del_click()\n{\n   gm_post_bar_post('http://del.icio.us/post?url=' + encodeURIComponent(location.href) + '&title=' + encodeURIComponent(document.title),850,610);\n}\nfunction gm_post_bar_dig_click()\n{\n   gm_post_bar_post('http://digg.com/submit?phase=2&url=' + encodeURIComponent(location.href),'','');\n}\nfunction gm_post_bar_red_click()\n{\n   gm_post_bar_post('http://reddit.com/submit?url=' + encodeURIComponent(location.href) + '&title=' + encodeURIComponent(document.title),'','');\n}\nfunction gm_post_bar_tec_click()\n{\n   gm_post_bar_post('http://technorati.com/cosmos/search.html?url=' + encodeURIComponent(location.href),'','');\n}\nfunction gm_post_bar_bli_click()\n{\n   gm_post_bar_post('http://blinklist.com/index.php?Action=Blink/addblink.php&url=' + encodeURIComponent(location.href) + '&Title=' + encodeURIComponent(document.title),'','');\n}\nfunction gm_post_bar_fur_click()\n{\n   gm_post_bar_post('http://www.furl.net/storeIt.jsp?u=' + encodeURIComponent(location.href) + '&t=' + encodeURIComponent(document.title),'','');\n}\nfunction gm_post_bar_stu_click()\n{\n   gm_post_bar_post('http://www.stumbleupon.com/submit?url=' + encodeURIComponent(location.href),'','');\n}\nfunction gm_post_bar_mys_click()\n{\n   gm_post_bar_post(\"http://www.myspace.com/Modules/PostTo/Pages/?\" + \"t=\" + encodeURIComponent(document.title)+ \"&u=\" + encodeURIComponent(location.href) + \"&l=\" + 2,'','');\n}\nfunction gm_post_bar_twi_click()\n{\n   gm_post_bar_post('http://twitter.com/home?status=' + encodeURIComponent(document.title + \" - Source:+\") + encodeURIComponent(location.href),'','');\n}\nfunction gm_post_bar_new_click()\n{\n   gm_post_bar_post('http://www.newsvine.com/_tools/seed&save?u=' + encodeURIComponent(location.href) + '&h=' + encodeURIComponent(document.title),'','');\n}\nfunction gm_post_bar_goo_click()\n{\n   gm_post_bar_post('http://www.google.com/bookmarks/mark?op=add&bkmk=' + encodeURIComponent(location.href) + '&title=' + encodeURIComponent(document.title),'','');\n}\nfunction gm_post_bar_ybk_click()\n{\n   gm_post_bar_post('http://bookmarks.yahoo.com/toolbar/savebm?opener=&u=' + encodeURIComponent(location.href) + '&t=' + encodeURIComponent(document.title),'','');\n}\nfunction gm_post_bar_post(url,width,height)\n{\n   window.open(url,'sharer','scrollbars=1,toolbar=0,status=0,width=' + width + ',height=' + height);\n   return false;\n}\nfunction gm_post_bar_m_over(item)\n{\n   item.style.backgroundColor = \"#dedeff\";\n}\nfunction gm_post_bar_m_out(item)\n{\n   item.style.backgroundColor = \"#ccccff\";\n}\nfunction gm_post_bar_email(emailAddress)\n{\n   window.location = \"mailto:\" + emailAddress + \"?Subject=\" + encodeURIComponent(document.title) + \"&Body=\" + encodeURIComponent(location.href);\n   return false;\n}";





   postingButton.innerHTML = "P<br />o<br />s<br />t";

   postingButton.setAttribute("id","gm_post_button");

   postingButton.setAttribute("onclick","gm_post_bar_click();");

   postingButton.setAttribute("class","gm_post_button");



   postingBar.innerHTML = "   <ul>\n      <li onclick=\"return gm_post_bar_bli_click();\" onmouseover=\"gm_post_bar_m_over(this);\" onmouseout=\"gm_post_bar_m_out(this);\"><img src=\"http://blinklist.com/favicon.ico\" alt=\"Blinklist\" border=\"0px\" /> Blinklist</li>\n      <li onclick=\"return gm_post_bar_del_click();\" onmouseover=\"gm_post_bar_m_over(this);\" onmouseout=\"gm_post_bar_m_out(this);\"><img src=\"http://del.icio.us/favicon.ico\" alt=\"Del.icio.us\" border=\"0px\" /> Del.icio.us</li>\n      <li onclick=\"return gm_post_bar_dig_click();\" onmouseover=\"gm_post_bar_m_over(this);\" onmouseout=\"gm_post_bar_m_out(this);\"><img src=\"http://digg.com/favicon.ico\" alt=\"Digg\" border=\"0px\" /> Digg</li>\n      <li onclick=\"return gm_post_bar_fb_click();\" onmouseover=\"gm_post_bar_m_over(this);\" onmouseout=\"gm_post_bar_m_out(this);\"><img src=\"http://static.ak.fbcdn.net/images/share/facebook_share_icon.gif?6:26981\" alt=\"Facebook\" /> Facebook</li>\n      <li onclick=\"return gm_post_bar_fur_click();\" onmouseover=\"gm_post_bar_m_over(this);\" onmouseout=\"gm_post_bar_m_out(this);\"><img src=\"http://furl.net/images/logo-favicon.ico\" alt=\"Furl\" border=\"0px\" /> Furl</li>\n      <li onclick=\"return gm_post_bar_goo_click();\" onmouseover=\"gm_post_bar_m_over(this);\" onmouseout=\"gm_post_bar_m_out(this);\"><img src=\"http://google.com/favicon.ico\" alt=\"Google Bookmarks\" border=\"0px\" /> gBookmarks</li>\n      <li onclick=\"return gm_post_bar_mys_click();\" onmouseover=\"gm_post_bar_m_over(this);\" onmouseout=\"gm_post_bar_m_out(this);\"><img src=\"http://mySpace.com/favicon.ico\" alt=\"mySpace\" border=\"0px\" /> mySpace</li>\n      <li onclick=\"return gm_post_bar_new_click();\" onmouseover=\"gm_post_bar_m_over(this);\" onmouseout=\"gm_post_bar_m_out(this);\"><img src=\"http://newsvine.com/favicon.ico\" alt=\"Newsvine\" border=\"0px\" /> Newsvine</li>\n      <li onclick=\"return gm_post_bar_red_click();\" onmouseover=\"gm_post_bar_m_over(this);\" onmouseout=\"gm_post_bar_m_out(this);\"><img src=\"http://reddit.com/favicon.ico\" alt=\"reddit\" border=\"0px\" /> reddit</li>\n      <li onclick=\"return gm_post_bar_stu_click();\" onmouseover=\"gm_post_bar_m_over(this);\" onmouseout=\"gm_post_bar_m_out(this);\"><img src=\"http://stumbleupon.com/favicon.ico\" alt=\"StumbleUpon\" border=\"0px\" /> StumbleUpon</li>\n      <li onclick=\"return gm_post_bar_tec_click();\" onmouseover=\"gm_post_bar_m_over(this);\" onmouseout=\"gm_post_bar_m_out(this);\"><img src=\"http://technorati.com/favicon.ico\" alt=\"Technorati\" border=\"0px\" /> Technorati</li>\n      <li onclick=\"return gm_post_bar_twi_click();\" onmouseover=\"gm_post_bar_m_over(this);\" onmouseout=\"gm_post_bar_m_out(this);\"><img src=\"http://twitter.com/favicon.ico\" alt=\"Twitter\" border=\"0px\" /> Twitter</li>\n      <li onclick=\"return gm_post_bar_ybk_click();\" onmouseover=\"gm_post_bar_m_over(this);\" onmouseout=\"gm_post_bar_m_out(this);\"><img src=\"http://bookmarks.yahoo.com/favicon.ico\" alt=\"Yahoo Bookmarks\" border=\"0px\" /> Y! Bookmarks</li>\n      <li style=\"text-align:right;height:50px;\"><form><input type=\"text\" id=\"gm_post_bar_email_address\" value=\"Type Email Address Here\" onfocus=\"this.value='';\" /><br /><input type=\"submit\" value=\"Email\" onclick=\"gm_post_bar_email(document.getElementById('gm_post_bar_email_address').value);\" /></form>\n   </ul>";

   postingBar.setAttribute("id","gm_post_bar");

   postingBar.setAttribute("class","gm_post_bar");



   varBody.appendChild(postingButton);

   varBody.appendChild(postingBar);

}

Some explanations:
Line 1: if(window==parent)
This code is designed to stop the script from running in advertising iframes. Unfortunately, it also means that it won't run on any pages that are in a frameset. At this point, however, this seems to be the best way to go at the moment.
The rest of the commands create and populate a script block, a style block, and 2 divs, and insert them into the document.

The style looks like this: 

.gm_post_button
{
   position:absolute;
   right:0px;
   top:50%;
   margin-top:-50px;
   z-index:99;
   background-color:#ccccff;
   border:1px solid black;
   text-align:center;
   cursor:pointer;
   padding: 0px 3px 0px 3px;
   color:black;
   font-size:12pt;
}
.gm_post_bar
{
   position:absolute;
   right:0px;
   top:50%;
   margin-top:-215px;
   width:4px;
   z-index:98;
   background-color:#ccccff;
   text-align:left;
   height:430px;
   overflow:hidden;
   padding:0px;
   color:black;
   font-size:12pt;
}
.gm_post_bar ul
{
   list-style:none;
   padding:0px;
   margin:0px;
}
.gm_post_bar ul li
{
   margin:8px;
   height:20px;
   cursor:pointer;
   overflow:hidden;
}

The script looks like this: 
var gm_post_bar_hiding = true;
var gm_post_bar_width = 4;
var gm_post_bar_size_timer;
function gm_post_bar_click()
{
   if(gm_post_bar_hiding)
   {
      gm_post_bar_hiding = false;
      gm_post_bar_show();
   }
   else
   {
      gm_post_bar_hiding = true;
      gm_post_bar_hide();
   }
}
function gm_post_bar_hide()
{
   if(gm_post_bar_width > 4 && gm_post_bar_hiding)
   {
      gm_post_bar_width = gm_post_bar_width - 2;
      clearTimeout(gm_post_bar_size_timer);
      gm_post_bar_timer = setTimeout("document.getElementById('gm_post_bar').style.width=gm_post_bar_width+'px';gm_post_bar_hide();",1);
   }
}
function gm_post_bar_show()
{
   if(gm_post_bar_width < 200 && !gm_post_bar_hiding)
   {
      gm_post_bar_width = gm_post_bar_width + 2;
      clearTimeout(gm_post_bar_size_timer);
      gm_post_bar_timer = setTimeout("document.getElementById('gm_post_bar').style.width=gm_post_bar_width+'px';gm_post_bar_show();",1);
   }
}
function gm_post_bar_fb_click()
{
   gm_post_bar_post('http://www.facebook.com/sharer.php?u='+encodeURIComponent(location.href)+'&t='+encodeURIComponent(document.title),626,436);
}
function gm_post_bar_del_click()
{
   gm_post_bar_post('http://del.icio.us/post?url=' + encodeURIComponent(location.href) + '&title=' + encodeURIComponent(document.title),850,610);
}
function gm_post_bar_dig_click()
{
   gm_post_bar_post('http://digg.com/submit?phase=2&url=' + encodeURIComponent(location.href),'','');
}
function gm_post_bar_red_click()
{
   gm_post_bar_post('http://reddit.com/submit?url=' + encodeURIComponent(location.href) + '&title=' + encodeURIComponent(document.title),'','');
}
function gm_post_bar_tec_click()
{
   gm_post_bar_post('http://technorati.com/cosmos/search.html?url=' + encodeURIComponent(location.href),'','');
}
function gm_post_bar_bli_click()
{
   gm_post_bar_post('http://blinklist.com/index.php?Action=Blink/addblink.php&url=' + encodeURIComponent(location.href) + '&Title=' + encodeURIComponent(document.title),'','');
}
function gm_post_bar_fur_click()
{
   gm_post_bar_post('http://www.furl.net/storeIt.jsp?u=' + encodeURIComponent(location.href) + '&t=' + encodeURIComponent(document.title),'','');
}
function gm_post_bar_stu_click()
{
   gm_post_bar_post('http://www.stumbleupon.com/submit?url=' + encodeURIComponent(location.href),'','');
}
function gm_post_bar_mys_click()
{
   gm_post_bar_post("http://www.myspace.com/Modules/PostTo/Pages/?" + "t=" + encodeURIComponent(document.title)+ "&u=" + encodeURIComponent(location.href) + "&l=" + 2,'','');
}
function gm_post_bar_twi_click()
{
   gm_post_bar_post('http://twitter.com/home?status=' + encodeURIComponent(document.title + " - Source:+") + encodeURIComponent(location.href),'','');
}
function gm_post_bar_new_click()
{
   gm_post_bar_post('http://www.newsvine.com/_tools/seed&save?u=' + encodeURIComponent(location.href) + '&h=' + encodeURIComponent(document.title),'','');
}
function gm_post_bar_goo_click()
{
   gm_post_bar_post('http://www.google.com/bookmarks/mark?op=add&bkmk=' + encodeURIComponent(location.href) + '&title=' + encodeURIComponent(document.title),'','');
}
function gm_post_bar_ybk_click()
{
   gm_post_bar_post('http://bookmarks.yahoo.com/toolbar/savebm?opener=&u=' + encodeURIComponent(location.href) + '&t=' + encodeURIComponent(document.title),'','');
}
function gm_post_bar_post(url,width,height)
{
   window.open(url,'sharer','scrollbars=1,toolbar=0,status=0,width=' + width + ',height=' + height);
   return false;
}
function gm_post_bar_m_over(item)
{
   item.style.backgroundColor = "#dedeff";
}
function gm_post_bar_m_out(item)
{
   item.style.backgroundColor = "#ccccff";
}
function gm_post_bar_email(emailAddress)
{
   window.location = "mailto:" + emailAddress + "?Subject=" + encodeURIComponent(document.title) + "&Body=" + encodeURIComponent(location.href);
   return false;
}

Not all that complex, really.
Show() and Hide() animate the bar as it is shown and hidden.

Finally, the HTML, which is added to the page a div at a time: 

<div id="gm_post_button" onclick="gm_post_bar_click();" class="gm_post_button">P<br />o<br />s<br />t</div>
<div id="gm_post_bar" class="gm_post_bar">
   <ul>
      <li onclick="return gm_post_bar_bli_click();" onmouseover="gm_post_bar_m_over(this);" onmouseout="gm_post_bar_m_out(this);"><img src="http://blinklist.com/favicon.ico" alt="Blinklist" border="0px" /> Blinklist</li>
      <li onclick="return gm_post_bar_del_click();" onmouseover="gm_post_bar_m_over(this);" onmouseout="gm_post_bar_m_out(this);"><img src="http://del.icio.us/favicon.ico" alt="Del.icio.us" border="0px" /> Del.icio.us</li>
      <li onclick="return gm_post_bar_dig_click();" onmouseover="gm_post_bar_m_over(this);" onmouseout="gm_post_bar_m_out(this);"><img src="http://digg.com/favicon.ico" alt="Digg" border="0px" /> Digg</li>
      <li onclick="return gm_post_bar_fb_click();" onmouseover="gm_post_bar_m_over(this);" onmouseout="gm_post_bar_m_out(this);"><img src="http://static.ak.fbcdn.net/images/share/facebook_share_icon.gif?6:26981" alt="Facebook" /> Facebook</li>
      <li onclick="return gm_post_bar_fur_click();" onmouseover="gm_post_bar_m_over(this);" onmouseout="gm_post_bar_m_out(this);"><img src="http://furl.net/images/logo-favicon.ico" alt="Furl" border="0px" /> Furl</li>
      <li onclick="return gm_post_bar_goo_click();" onmouseover="gm_post_bar_m_over(this);" onmouseout="gm_post_bar_m_out(this);"><img src="http://google.com/favicon.ico" alt="Google Bookmarks" border="0px" /> gBookmarks</li>
      <li onclick="return gm_post_bar_mys_click();" onmouseover="gm_post_bar_m_over(this);" onmouseout="gm_post_bar_m_out(this);"><img src="http://mySpace.com/favicon.ico" alt="mySpace" border="0px" /> mySpace</li>
      <li onclick="return gm_post_bar_new_click();" onmouseover="gm_post_bar_m_over(this);" onmouseout="gm_post_bar_m_out(this);"><img src="http://newsvine.com/favicon.ico" alt="Newsvine" border="0px" /> Newsvine</li>
      <li onclick="return gm_post_bar_red_click();" onmouseover="gm_post_bar_m_over(this);" onmouseout="gm_post_bar_m_out(this);"><img src="http://reddit.com/favicon.ico" alt="reddit" border="0px" /> reddit</li>
      <li onclick="return gm_post_bar_stu_click();" onmouseover="gm_post_bar_m_over(this);" onmouseout="gm_post_bar_m_out(this);"><img src="http://stumbleupon.com/favicon.ico" alt="StumbleUpon" border="0px" /> StumbleUpon</li>
      <li onclick="return gm_post_bar_tec_click();" onmouseover="gm_post_bar_m_over(this);" onmouseout="gm_post_bar_m_out(this);"><img src="http://technorati.com/favicon.ico" alt="Technorati" border="0px" /> Technorati</li>
      <li onclick="return gm_post_bar_twi_click();" onmouseover="gm_post_bar_m_over(this);" onmouseout="gm_post_bar_m_out(this);"><img src="http://twitter.com/favicon.ico" alt="Twitter" border="0px" /> Twitter</li>
      <li onclick="return gm_post_bar_ybk_click();" onmouseover="gm_post_bar_m_over(this);" onmouseout="gm_post_bar_m_out(this);"><img src="http://bookmarks.yahoo.com/favicon.ico" alt="Yahoo Bookmarks" border="0px" /> Y! Bookmarks</li>
      <li style="text-align:right;height:50px;"><form><input type="text" id="gm_post_bar_email_address" value="Type Email Address Here" onfocus="this.value='';" /><br /><input type="submit" value="Email" onclick="gm_post_bar_email(document.getElementById('gm_post_bar_email_address').value);" /></form>
   </ul>
</div>

I hope this has been enlightning...