JavaScript - Sticky Footer Height Conundrum

Hey guys,

I own an online internet radio station and I have many different way which people can tune in. One way is the browse 'n' play feature.
The browse 'n' play feature allows you to browse the net at the same time as being tuned into the radio. Below, I have installed an 'Expandable Sticky Bar' which is used for the radio panel.

http://www.dynamicdrive.com/dynamici.../stickybar.htm

What I am trying to do, is simply add that bar on every page my visitors visit. So, when the listen chooses 'Browse 'n' Play' I want a new window or tab to open, with Google and my bar at the bottom.

I cannot figure out how I could do this, any ideas on how I could make this happen?

Thanks.

Hello i have a sticky tooltip that when is in "sticky mode" the only way to close it is by clicking outside of it. I wanted to add a mouseover link for a close link so it can also be closed that way.
original code: http://www.dynamicdrive.com/dynamici...ckytooltip.htm

this is my external .js code and if you look about 11 lines down i have the mouseover link setup for the word "CloseMe". However that's where i need to know how to call it properly?

Quote:
/* Sticky Tooltip script (v1.0)
* Created: Nov 25th, 2009. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

var stickytooltip={
tooltipoffsets: [5, -5], //additional x and y offset from mouse cursor for tooltips
fadeinspeed: 1, //duration of fade effect in milliseconds
rightclickstick: true, //sticky tooltip when user right clicks over the triggering element (apart from pressing "s" key) ?
stickybordercolors: ["black", "darkred"], //border color of tooltip depending on sticky state
stickynotice1: ["To Sticky:", "Press Key \"c\"", "or Right click"], //customize tooltip status message
stickynotice2: "Sticky Activated! <a onMouseOver=javascript:LOSTT.HELPP('mystickytooltip'); href=google.com>CloseMe</a>", //customize tooltip status message

//***** NO NEED TO EDIT BEYOND HERE

isdocked: false,

positiontooltip:function($, $tooltip, e){
var x=e.pageX+this.tooltipoffsets[0], y=e.pageY+this.tooltipoffsets[1]
var tipw=$tooltip.outerWidth(), tiph=$tooltip.outerHeight(),
x=(x+tipw>$(document).scrollLeft()+$(window).width())? x-tipw-(stickytooltip.tooltipoffsets[0]*2) : x
y=(y+tiph>$(document).scrollTop()+$(window).height())? $(document).scrollTop()+$(window).height()-tiph-10 : y
$tooltip.css({left:x, top:y})
},

showbox:function($, $tooltip, e){
$tooltip.fadeIn(this.fadeinspeed)
this.positiontooltip($, $tooltip, e)
},

hidebox:function($, $tooltip){
if (!this.isdocked){
$tooltip.stop(false, true).hide()
$tooltip.css({borderColor:'black'}).find('.stickystatus:eq(0)').css({background:this.stickybordercol ors[0]}).html(this.stickynotice1)
}
},

docktooltip:function($, $tooltip, e){
this.isdocked=true
$tooltip.css({borderColor:'darkred'}).find('.stickystatus:eq(0)').css({background:this.stickyborderc olors[1]}).html(this.stickynotice2)
},


init:function(targetselector, tipid){
jQuery(document).ready(function($){
var $targets=$(targetselector)
var $tooltip=$('#'+tipid).appendTo(document.body)
if ($targets.length==0)
return
var $alltips=$tooltip.find('div.atip')
if (!stickytooltip.rightclickstick)
stickytooltip.stickynotice1[1]=''
stickytooltip.stickynotice1=stickytooltip.stickynotice1.join(' ')
stickytooltip.hidebox($, $tooltip)
$targets.bind('mouseenter', function(e){
$alltips.hide().filter('#'+$(this).attr('data-tooltip')).show()
stickytooltip.showbox($, $tooltip, e)
})
$targets.bind('mouseleave', function(e){
stickytooltip.hidebox($, $tooltip)
})
$targets.bind('mousemove', function(e){
if (!stickytooltip.isdocked){
stickytooltip.positiontooltip($, $tooltip, e)
}
})
$tooltip.bind("mouseenter", function(){
stickytooltip.hidebox($, $tooltip)
})
$tooltip.bind("click", function(e){
e.stopPropagation()
})
$(this).bind("click", function(e){
if (e.button==0){
stickytooltip.isdocked=false
stickytooltip.hidebox($, $tooltip)
}
})
$(this).bind("contextmenu", function(e){
if (stickytooltip.rightclickstick && $(e.target).parents().andSelf().filter(targetselector).length==1){ //if oncontextmenu over a target element
stickytooltip.docktooltip($, $tooltip, e)
return false
}
})
$(this).bind('keypress', function(e){
var keyunicode=e.charCode || e.keyCode
if (keyunicode==99){ //if "c" key was pressed
stickytooltip.docktooltip($, $tooltip, e)
}
})
}) //end dom ready
}
}

//stickytooltip.init("targetElementSelector", "tooltipcontainer")
stickytooltip.init("*[data-tooltip]", "mystickytooltip")

below is my html code

Quote:
<a href="http://www.link2.com"><img src="http://www.dynamicdrive.com/ddincludes/logo.gif" data-tooltip="id1" /></img></a>

<div id="mystickytooltip" class="stickytooltip">
<div style="padding:5px">
<div class="stickystatus"></div>

<div id="id1" class="atip" style="width:200px">
<iframe src="http://www.link.com"></iframe></div>
</div></div>

Hi, I need to re-size a div to be 100% of the browser but taking into account the height of an existing header div.

Currently it works but it doesn't factor the height of the above header div, and therefore scrolls off the page (the height of the header div)

I need to manipulate ( subtract the height value of the header) in the javascript somehow.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<script type="text/javascript">
function SetHeightOfDiv(){
var theDiv = document.getElementById('content');
theDiv.style.height = BrowserHeight()+"px";
}

function BrowserHeight() {
var theHeight;
if (window.innerHeight) {
theHeight = window.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight) {
theHeight = document.documentElement.clientHeight;
}
else if (document.body) {
theHeight = document.body.clientHeight;
}
return theHeight;
}
</script>
</head>

<body style="height:100%; background-color:blue; margin:0; padding:0; color:#ffffff; font-size:15px; text-align:center; font-family:monospace,arial"
onload="SetHeightOfDiv()">

<div id="wrapper" style="height:100%; width:900px; background-color:yellow; margin-left:auto; margin-right:auto; overflow:hidden">

<div id="header" style="margin-top:0px; height:130px; width:890px; margin-left:5px; background-color:red; position:fixed">
<p>The FIXED HEADER</p>
</div>

<div id="content" style="margin-top:132px; background-color:grey; width:890px; margin-left:5px">
<p>THE BODY - that extends below the browser window (possibly the height of the header)</p></br>
<p>So how do we manipulate the Javascript to 'Subtract' the height of the HEADER?</p></br>

<p style="text-align:left; padding-left:10px">
function SetHeightOfDiv(){ <br>
var theDiv = document.getElementById('content');<br>
theDiv.style.height = BrowserHeight()+"px";<br>
}<br>
</br>
function BrowserHeight() {<br>
var theHeight;<br>
if (window.innerHeight) {<br>
theHeight = window.innerHeight;<br>
}<br>
else if (document.documentElement && document.documentElement.clientHeight) {<br>
theHeight = document.documentElement.clientHeight;<br>
}<br>
else if (document.body) {<br>
theHeight = document.body.clientHeight;<br>
}<br>
return theHeight;<br>
}</p>
</div>

</div> <!--end of wrapper-->
</body>
</html>

Thanks

I'm trying to remove a vertical scroll that appeared after I added padding 100% to footer. It was suggested that I use javacript to cause the footer not to expand so I don't have to add padding 100% to footer which will eliminate scroll bar. How do I accomplish this when you remove 100% padding from footer?I don't want to see the grey backgroun under footer. I just want to see footer and that's it.

Here's my code
Code:

<!DOCTYPE HTML>
   
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>  
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title></title>
        
        <style type="text/css">
		#wrapper{width:1000px; height: 520px;margin:-25px auto;   background-color: #3d3d3d;}
		 #header {
       width: 100%;
       height: 75px;
       border: 1px solid #000000;
       margin: 0px 0px 0px 0px;
      
                 padding: 0px 0px 10px 0px;
       background-color: #00a3e8;
       float:left;
       color: #FFFFFF;
       }
	   #contact {position:relative;top:500px;} 
	   *{margin:0px; padding:0px}
#col1{width:200px; height:454px; float:left; 
margin:  0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   background-color: #00a3e8; 
     border: 7px solid #000;}
#col2{width:300px; height:454px; float:left;
 background-color: #00a3e8;
   border: 7px solid #000;
   
margin:0px 0px 0px 130px;
padding: 0px 0px 0px 0px;
text-align:center;
   color: #FFFFFF;}
#col3{width:200px; height:454px;background-color:blue;

  margin: 0px 0px 0px 0px;
             padding: 0px 0px 0px 0px;
   background-color: #00a3e8;
   border: 7px solid #000;
   
  float:right;
             color: #000;    }
#footer{width:100%; height:100%; clear:both;
  
   float:left;
    overflow:hidden;
   margin-top:-23px;
    padding: 100% 0px 5px 0px;
   background-color: #00a3e8;
   text-align: center;
   color: #FFFFFF;}

				 
body{overflow-x:hidden; 
    overflow-y:auto;    background-color: #3d3d3d;} 
		</style>
  </head>
    <body>
     <div id="header"><img width="416" height="70" src="MyProfile_clip_image001.gif" alt="UJ" />
    
       </div>
&nbsp;



<div id="wrapper">
  <div id="col1"></div>
  <div id="col2"><div id="contact">Contact Us</div></div>
  <div id="col3"></div>
 
</div>
 <div id="footer"><div id="contact">Contact Us</div></div>
</body>
</html>