http://www.dhtmlgoodies.com/scripts/docking-bar/docking-bar.html Docking-bar is at the top in this page. I want it on bottom of the screen. I will pay you $20 for doing this. Anybody interested?
function repositionDockingBar() { if(MSIE && navigatorVersion<6){ dockingBarDiv.style.top = [COLOR="Red"](document.body.scrollTop + screen.availHeight)[/COLOR] + 'px'; }else{ dockingBarDiv.style.top = [COLOR="Red"](document.body.scrollTop + screen.availHeight)[/COLOR] + 'px'; } } Code (markup):
Thanks JavaScriptBank.com for reply. I replaced your function with original function. bar is still at the top. I want something like you have at your site http://javascriptbank.com/ just like "Google Connect" bar at the bottom. Any other suggestion? Thanks again for help. Rep added.
I think i solved your problem. The following code docks menu at the bottom of the screen. It works fine on scroll and also on window resize. I have deleted some unwanted code to make it simpler. Check whether it works for you. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML><HEAD><TITLE>Docking bar - edited</TITLE> <STYLE type=text/css> BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 0.8em; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 100%; PADDING-TOP: 0px; FONT-FAMILY: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; BACKGROUND-COLOR: #e2ebed; TEXT-ALIGN: center; } #mainContainer { BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-TOP: 0px; MARGIN: 0px auto; BORDER-LEFT: #000 1px solid; WIDTH: 760px; BACKGROUND-COLOR: #fff; TEXT-ALIGN: left; } #dockingBar { Z-INDEX: 100; LEFT: 0px; OVERFLOW: hidden; WIDTH: 100%; BORDER-BOTTOM: #a5a397 2px solid; POSITION: fixed; HEIGHT: 43px; BACKGROUND-COLOR: #f1f1ec; TEXT-ALIGN: left; } #dockingBarImageHolder { MARGIN-LEFT: 5px; HEIGHT: 30px; } #dockingBarImageHolder IMG { CURSOR: pointer; } .spacer { BORDER-TOP: #d8d2bd 1px solid; BORDER-BOTTOM: #fff 1px solid; HEIGHT: 0px; } BODY > DIV#dockingBar { POSITION: fixed } #dockingBarSpacer { HEIGHT: 33px } </STYLE> <SCRIPT type=text/javascript> var floatingBarDiv; var dockingBarDiv; var dockingBarDivImages; var MSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false; var Opera = navigator.userAgent.indexOf('Opera')>=0?true:false; var navigatorVersion = navigator.appVersion.replace(/.*?MSIE (\d\.\d).*/g,'$1')/1; /* Functions that are executed when buttons are clicked */ function jsAction1() { alert('You clicked a button'); } /* Buttons for the toolbar */ var toolbarButtons = ['images/button1.gif','images/button2.gif','images/button3.gif','images/button4.gif','images/button6.gif','images/button7.gif','images/button8.gif','images/button5.gif']; /* Javascript functions for the buttons on the toolbar */ var toolbarActions = ['jsAction1','jsAction1','jsAction1','jsAction1','jsAction1','jsAction1','jsAction1','jsAction1'] function addButtons(initObj) { for(var no=0;no<toolbarButtons.length;no++){ var button = document.createElement('IMG'); button.src = toolbarButtons[no]; if(toolbarActions[no]){ eval("button.onclick="+toolbarActions[no]); } initObj.appendChild(button); } } function initMenuWithDocking() { /* Creating spacer of the same height as the top bar */ var dockingBarSpacer = document.createElement('DIV'); dockingBarSpacer.id = 'dockingBarSpacer'; document.getElementsByTagName('body')[0].appendChild(dockingBarSpacer); /* Creating docking bar */ dockingBarDiv = document.createElement('DIV'); dockingBarDiv.id = 'dockingBar'; document.body.appendChild(dockingBarDiv); var spacerRow = document.createElement('DIV'); spacerRow.innerHTML = '<span></span>'; spacerRow.style.marginTop = '5px'; spacerRow.className = 'spacer'; dockingBarDiv.appendChild(spacerRow); dockingBarDivImages = document.createElement('DIV'); dockingBarDivImages.id = 'dockingBarImageHolder'; dockingBarDiv.appendChild(dockingBarDivImages); var spacerRow = document.createElement('DIV'); spacerRow.innerHTML = '<span></span>'; spacerRow.className = 'spacer'; dockingBarDiv.appendChild(spacerRow); addButtons(dockingBarDivImages); // General events repositionDockingBar(); window.onscroll = repositionDockingBar; window.onresize = repositionDockingBar; } // taken from "http://www.howtocreate.co.uk/tutorials/javascript/browserwindow" function returnWindowHeight() { var myHeight = 0; if( typeof( window.innerWidth ) == 'number' ) { //Non-IE myHeight = window.innerHeight; } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6+ in 'standards compliant mode' myHeight = document.documentElement.clientHeight; } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { //IE 4 compatible myHeight = document.body.clientHeight; } return myHeight; } function repositionDockingBar() { availH = returnWindowHeight() - 43; if(MSIE && navigatorVersion<6){ dockingBarDiv.style.top = availH + 'px'; }else{ dockingBarDiv.style.top = availH + 'px'; } } window.onload = initMenuWithDocking; </SCRIPT> </HEAD> <BODY> <DIV id=mainContainer> <P>The Javascript menu at the bottom will stay at the bottom of your content.</P> <P>More content.</P> <P>More content.</P> <P>More content.</P> <P>More content.</P> <P>More content.</P> <P>More content.</P> <P>More content.</P> <P>More content.</P> <P>More content.</P> <P>More content.</P> <P>More content.</P> <P>More content.</P> <P>More content.</P> <P>More content.</P> <P>More content.</P> <P>More content.</P> <P>More content.</P> <P>More content.</P> <P>More content.</P> <P>More content.</P> <P>More content.</P> <P>More content.</P> <P>More content.</P> <P>More content.</P> <P>More content.</P> <P>More content.</P> <P>More content.</P> <P>More content.</P> <P>More content.</P> <P>More content.</P> <P>More content.</P> <P>More content.</P> <P>More content.</P> <P>More content.</P></DIV> </BODY></HTML> Code (markup): Hope this helps and you keep your word.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>None</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> </script> <style type="text/css"> body {height: 1500px; background-color: #f5f5f5;} .fixedPosition {position: fixed; bottom: 3px; left: 3%; height: 25px; width: 95%; border: 1px solid black; background-color: #f0fff0; text-align: center; font-family: arial; font-size: 12pt; font-weight: bold; color: black; padding-top: 10px; cursor: pointer;} </style> <!--[if gte IE 5.5]> <![if lt IE 7]> <style type="text/css"> .fixedPosition {position: absolute; top: expression(document.documentElement.scrollTop + document.documentElement.clientHeight - this.clientHeight - 5 + "px");} </style> <![endif] <![endif]--> </head> <body> <div class="fixedPosition">Something Here</div> </body> </html> Code (markup):