JavaScript - How To Make It 100% Height And Width In Javascript

function preload(arrayOfImages) 
				{
					$(arrayOfImages).each(function () 
					{
						$('<img />').attr('width', '100px').attr('height', '100px').attr('src',this).appendTo('#img').attr('class', 'img');
						setTimeout(this, 2000);
					});
				}

JavaScript file jsScroller.js:
//Created by Nathan Faubion http://www.n-son.com/scripts/jsScrolling/
function jsScroller (o, w, h) {
	var self = this;
	var list = o.getElementsByTagName("div");
	for (var i = 0; i < list.length; i++) {
		if (list[i].className.indexOf("scroller-content") > -1) {
			o = list[i];
		}
	}
	
	//Private methods
	this._setPos = function (x, y) {
		if (x < this.viewableWidth - this.totalWidth) 
			x = this.viewableWidth - this.totalWidth;
		if (x > 0) x = 0;
		if (y < this.viewableHeight - this.totalHeight) 
			y = this.viewableHeight - this.totalHeight;
		if (y > 0) y = 0;
		this._x = x;
		this._y = y;
		with (o.style) {
			left = this._x +"px";
			top  = this._y +"px";
		}
	};
	
	//Public Methods
	this.reset = function () {
		this.content = o;
		this.totalHeight = o.offsetHeight;
		this.totalWidth	 = o.offsetWidth;
		this._x = 0;
		this._y = 0;
		with (o.style) {
			left = "0px";
			top  = "0px";
		}
	};
	this.scrollBy = function (x, y) {
		this._setPos(this._x + x, this._y + y);
	};
	this.scrollTo = function (x, y) {
		this._setPos(-x, -y);
	};
	this.stopScroll = function () {
		if (this.scrollTimer) window.clearInterval(this.scrollTimer);
	};
	this.startScroll = function (x, y) {
		this.stopScroll();
		this.scrollTimer = window.setInterval(
			function(){ self.scrollBy(x, y); }, 40
		);
	};
	this.swapContent = function (c, w, h) {
		o = c;
		var list = o.getElementsByTagName("div");
		for (var i = 0; i < list.length; i++) {
			if (list[i].className.indexOf("scroller-content") > -1) {
				o = list[i];
			}
		}
		if (w) this.viewableWidth  = w;
		if (h) this.viewableHeight = h;
		this.reset();
	};
	
	//variables
	this.content = o;
	this.viewableWidth  = w;
	this.viewableHeight = h;
	this.totalWidth	 = o.offsetWidth;
	this.totalHeight = o.offsetHeight;
	this.scrollTimer = null;
	this.reset();
};

JavaScript on HTML page:
<script type="text/javascript" src="Scripts/jsScroller.js"></script>
<script type="text/javascript" src="Scripts/jsScrollbar.js"></script>
<script type="text/javascript">
var scroller  = null;
var scrollbar = null;
window.onload = function () {
  scroller  = new jsScroller(document.getElementById("scroller"), 550, 275);
  scrollbar = new jsScrollbar (document.getElementById("scrollbar-content"), scroller, false);
}
</script>

<div class="comment-section">
<div class="comment"><p>This is where text would go. </p></div>
<div class="read-more">Read More</div>
</div>

<script type="text/javascript">
  $(function(if ($".comment".style.height > 100px;){
     {
      $".comment".style.height = 50px;
	  $".read-more".style.display = block; 

    }
  });
</script>

var Dropdown = function(el) {
 
    this.el = el;
 
    this.handle = el.find("div.dropdown-text");
    this.options = el.find("div.dropdown-options");
    this.optionsWrap = this.options.parent();
    this.action = el.attr("action");
    this.type = el.attr("type");
    this.target = el.attr("target");
 
    this.Init();
}
 
Dropdown.prototype.Init = function() {
    var self = this;
 
    var extraPadding = 40;
 
    this.isShown = false;
 
    console.log(this);
 
    this.width = this.options.outerWidth() + extraPadding;
    this.height = this.options.outerHeight();
 
    if (this.height > 300) {
        this.height = 300;
        this.options
                  .height(300)
                  .width(this.width + 12)
                  .addClass("scroll-pane")
                  .jScrollPane({
                      showArrows: true,
                      scrollbarWidth: 9
                  })
        this.width += 12;
 
    } else {
        this.options.width(this.options.width() + extraPadding);
 
    }
 
    var newWidth = (this.width < 220) ? this.width : 220;
 
    this.el.width(newWidth);
 
    this._AddShadow();
 
    this.optionsWrap.css({
        display: "none",
        visibility: "visible",
        width: this.width + 5,
        height: this.height + 5
    });
 
    this._SetEvents();
};
 
Dropdown.prototype.Toggle = function(force) {
     
      if (this.isShown && !force) {
            this.optionsWrap.hide();
            this.isShown = false;
           
      } else if (!this.isShown && false !== force){
            this.optionsWrap.show();
            this.isShown = true;
      }    
}
 
Dropdown.prototype._AddShadow = function() {         
      var shadowWidth = 5, layer;
     
    for (var i = 0; i < shadowWidth; i++) {
        layer = $('<div class="shadow_layer">&nbsp;</div>');
      
        layer.css({
            opacity: 0.055 * (i + 1),
            top: (shadowWidth - i),
            left: (shadowWidth - i),
            height: this.height,
            width: this.width
        });
       
        this.optionsWrap.prepend(layer);
    }
}
 
Dropdown.prototype._SetEvents = function() {
    var self = this;
 
    this.el.bind('click', function(e) {
        var current = $(e.target);
        var type = current.attr("type");
 
        if (current.hasClass('dropdown-text') || current.hasClass('dropdown-arrow')) {
 
            if (!self.isShown) {
                page.HideAllDropdowns();
            }
 
            self.Toggle();
            return false;
        }
 
        if (current.hasClass('dropdown-opt')) {
            switch (type) {
                case 'auto': case 'basic':
                    var html = current.html();
                    self.handle.html(html);
 
                    self.options.find('a.dropdown-opt').each(function() {
                        $(this).removeClass('selected');
                    });
 
                    if ('auto' == type) {
                        page.common.Update({
                            url: current.attr('path'),
                            params: current.attr('params'),
                            target: self.target,
                            parent: true,
                            method: "POST",
                            handler: {
                                handler: function(results) {
                                    var action = this.attr("action");
                                    if (action) { page.events.Fire(action, this, results) };
                                },
                                context: current
                            }
                        });
                    }
 
                    current.addClass('selected');
                    self.Toggle();
                    return false;
 
                case 'multi':
                    current.toggleClass('selected');
                    break;
 
                case 'function':
                    var html = current.html();
                    self.handle.html(html);
 
                    current.Fire();
                    self.Toggle(false);
                    break
            }
        }
 
        return false;
    });
 
}

<?xml version='1.0' encoding='UTF-8'?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html  xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

<body onload="init()">
Hard Coded:

<DIV style="WIDTH: 400px; HEIGHT: 25px;overflow:hidden;">
<TABLE style="border:none; BORDER-SPACING: 0px; WIDTH: 400px; TABLE-LAYOUT: fixed" cellSpacing="0" cellpadding="0">
<col width="100px">
<col width="300px">
<TBODY>
<TR>
<TD style="background-color:blue">
a
</TD>
<TD style="background-color:green">
b
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
Ruler:
<div id='ruler' style="background-color:yellow;width:400px;height:28px;"></div>

Javascript inserted:

<div id="hi">
</div>

</body>
<script  language="javascript">		
	function init() {
		var w = [100, 300]
		// test table create
		var testDiv, testTBody, testTable, testTr, testTd, testCol;
		document.getElementById("hi").appendChild(testDiv = document.createElement("div"));
		with (testDiv.style) {
			width="400px";
			height="25px";
		}
		testDiv.appendChild(testTable = document.createElement("table"));
		with (testTable) {
			style.tableLayout="fixed";
			style.borderSpacing="0px";
			style.width = "400px";
			appendChild(testCol = document.createElement("col"));
			testCol.style.width = 100 + 'px';
			appendChild(testCol = document.createElement("col"));
			//testCol.style.width = 300 + 'px';
			appendChild(testTBody = document.createElement("tbody"));
			cellSpacing= 0
		}
		testTBody.appendChild(testTr = document.createElement("tr"));
		with (testTr){
			
		}
		for (var i= 0; i < 2; i++) {
			testTr.appendChild(testTd = document.createElement("td"));
			testTd.innerHTML = "Testing";
			with (testTd) {
				style.borderTop = "1px solid lightgray";
				style.borderLeft="1px solid lightgray";
				style.borderRight="1px solid black";
				style.borderBottom="1px solid black";
			}
		}
	}
</script>
</html>

var waiting_time = 30;
var range_to = 15;

var shuffle = function(o){
	if(Math.floor(Math.random() * o.length) % 2) return o;
	for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
	return o;
},
isAds = function(o) {
	try {
		return o.href.match(/cks\.php\?k\=[0-9A-Fa-f]+\&cdk\=flase/) != null && o.parentNode.parentNode.parentNode.parentNode.getElementsByTagName('div')[1].className == 'image'
	}
	catch(e) {
		return false
	}
},
correctURL = function(r) {
	return window.location.href.match(r) != null
},
setStatus = function(o, m) {
	o.parentNode.parentNode.parentNode.innerHTML = m
},
addevent = function(o, f) {
	document.getElementById(o).addEventListener('click', f, false)
},
byTag = function(t) {
	return document.getElementsByTagName(t)
},
byName = function(n) {
	return document.getElementsByName(n)
},
newTag = function(t) {
	return document.createElement(t)
},
getwtime = function(o) {
	var i, a = o.parentNode.parentNode.parentNode.parentNode.getElementsByTagName('div');
	for(i = 0; i < a.length; i++)
		if(a[i].className == "counter")
			return a[i].innerHTML.match(/([0-9]+) seconds/)[1]
},
strip = function(s) {
	var str = String(s).split("</td>").join("\r"),
	reg = /<td\s*width=['"]?100\%['"]?\s*>([^\r]+)\r/,
	match = str.match(reg),
	search = str.search(reg),
	out = [], i = 0, tmp;
	while(match) {
		str = str.substr(search + match[0].length, str.length);
		out[i] = match[1].replace(/\s*<script[^>]+>[\S\s]+<\/script>\s*/, "");
		out[i] = out[i].replace(/<img[^>]+>/, "");
		i++;
		match = str.match(reg);
		search = str.search(reg);
	};
	return (out.length ? "<table><tr><td>"+out.join("</td><td>")+"</td></tr></table>" : "NO MATCH");
},
login = function() {
	var a = byTag("a"), I;
	for(I = 0; I < a.length; I++)
		if(a[I].href.match(/logout\.php/)) 
			return true;
	return false
}(),
autosurf = false;
if(correctURL(/\/ads\.php/)) {
	if(login) {
		var A = byTag("a"), i, html = "", timer,
		table = document.getElementById('content'),
		robot = newTag('div'),
		urls = [],
		current = 0,
		msg,
		tmr,
		load = function() {
			clearInterval(timer);
			timer = null;
			if(!urls[current]) {
				if(typeof autosurf == 'function')
					autosurf();
				return
			};
			var ajax = new XMLHttpRequest();
			ajax.onreadystatechange = function() {
				try {
					if(ajax.readyState == 4) {
						if(ajax.status == 200) {
							if(String(ajax.responseText).match(/You have already viewed this advertisement/)) {
								msg.innerHTML = "Ads already opened, loading next ads...";
								setStatus(urls[current], "OPENED");
								current++;
								timer = setInterval(load, 1000)
							}
							else if(String(ajax.responseText).match(/Couldn't find an advertisement/)) {
								msg.innerHTML = "Ads expired, loading next ads...";
								setStatus(urls[current], "EXPIRED");
								current++;
								timer = setInterval(load, 1000)
							}
							else if(String(ajax.responseText).match(/You don't have permission to view this advertisement/)) {
								msg.innerHTML = "Forbidden Ads, loading next ads...";
								setStatus(urls[current], "FORBIDDEN");
								current++;
								timer = setInterval(load, 1000)
							}
							else {
								var j = urls[current].wtime,
								validate = function() {
									var ajx = new XMLHttpRequest();
									ajx.onreadystatechange = function() {
										try {
											if(ajx.readyState == 4) {
												if(ajx.status == 200) {
													msg.innerHTML = "Ad click, opening next ads...";
													setStatus(urls[current], "Ad Clicked & Confirmed");
													current++;
													timer = setInterval(load, 1000)
												}
												else {
													msg.innerHTML = "Connection error, retrying...";
													validate()
												}
											}
										}
										catch(e) {
											msg.innerHTML = "Validation error, retrying...";
											validate()
										}
									};
									msg.innerHTML = "Validating...";
									ajx.open("GET", "cmp.php?complete&amp;", true);
									ajx.send(null)									
								};
								tmr = setInterval(function() {
									if(j < 0) {
										validate();
										clearInterval(tmr);
										tmr = null;
										return
									};
									msg.innerHTML = "Ads loaded, waiting for "+j+" seconds...";
									j--
								}, 1000)
							}
						}
						else {
							msg.innerHTML = "Loading error, retrying...";
							timer = setInterval(load, 1000)
						}
					}
				}
				catch(e) {
					msg.innerHTML = "Loading error, retrying...";
					timer = setInterval(load, 1000)
				}
			};
			msg.innerHTML = "Loading ads <b id='JFClickBot-current'>\""+(urls[current].parentNode.parentNode.parentNode.getElementsByTagName('a')[0].innerHTML)+"\"</b>...<br /><div id='JFClickBot-loading'></div>";
			ajax.open("GET", urls[current].href, true);
			ajax.send(null)
		};
		for(i = 0; i < A.length; i++) {
			try {
				if(isAds(A[i])) {
					urls[urls.length] = A[i];
					urls[urls.length - 1].wtime = getwtime(A[i])
				}
			}
			catch(e) {}
		};
		robot.id = "JFClickBot-container";
		robot.align = "center";
		html = "<style>";
		html += "#JFClickBot-container *{font-family:arial;color:black;font-weight:bold;text-decoration:none}";
		html += "#JFClickBot-container{display:block}";
		html += "#JFClickBot,#JFClickBot-title,#JFClickBot-container a.button{-moz-border-radius:3px;-webkit-border-radius:3px;-khtml-border-radius:3px;border-radius:3px;border: 1px solid #d91a2d}";
		html += "#JFClickBot-container a.button{padding:10px;color:#000;background:#d91a2d}";
		html += "#JFClickBot-container a.button:hover{color:#fff;background:#333}";
		html += "#JFClickBot{padding:2px;display:block;width:900px;background:#fff;text-align:left}";
		html += "#JFClickBot-title{display:block;padding:5px;background:#d91a2d;color:#fff}";
		html += "#JFClickBot-msg{line-height:2em}";
		html += "</style>";
		html += "<div id='JFClickBot'><div id='JFClickBot-title'>JFClickBot For Gen4 Sites</div><br /><div id='JFClickBot-msg' align=center>";
		html += "<b style='font-size:20px'>Warning</b><br />By Using This Tool You Agree to The Terms Of Use On <a href='http://clickbots.justfreebies.net' rel="nofollow" target='_blank'>ClickBots</a>.<br> We Are Not Resposible For Your Action, USE AT YOUR OWN RISK.<br><a href='http://clickbots.justfreebies.net' rel="nofollow" target='_blank'>&copy; PTC ClickBots</a>";
		html += "</div><br />";
		html += "<center>"+(urls.length ? "<a href='javascript:;' class='button' id='adsclick'>Click All Ads ("+urls.length+")</a>" : "<a href='javascript:;' class='button'>No ads</a>")+"&nbsp;&nbsp;<a href='http://clickbots.justfreebies.net/features.php' class='button' rel="nofollow" target='_blank'>Features</a>&nbsp;<a href='http://clickbots.justfreebies.net/purchase.php' class='button' rel="nofollow" target='_blank'>Purcahse Site</a>&nbsp;<a href='http://clickbots.justfreebies.net/donate.php' class='button' rel="nofollow" target='_blank'>Donate</a></center><br />";
		html += "</div></div>";
		robot.innerHTML = html;
		table.parentNode.insertBefore(robot, table);
		msg = document.getElementById("JFClickBot-msg");
		if(urls.length) {
			urls = shuffle(urls);
			addevent("adsclick", function(){
				autosurf = function() {
					msg.innerHTML = "Done !";
					alert(msg.innerHTML);
				};
				this.parentNode.style.display = 'none';
				timer = setInterval(load, 1000);
			})
		};
		addevent('silversurfer', function(){
			alert("Sorry this features isnt available yet.");
			return;
			this.parentNode.style.display = 'none';
			msg.innerHTML = "Auto surf mode activated...";
			var adscontainer = newTag('div');
			document.body.appendChild(adscontainer);
			adscontainer.style.display = 'none';
			autosurf = function() {
				urls = [];
				current = 0;
				msg.innerHTML = "Reloading ads, finding new ads...";
				var sec = Math.ceil(Math.random() * range_to * 60),
				j = sec,
				tm, 
				ajx,
				reloadads = function() {
					msg.innerHTML = "Reloading ads, finding new ads...";
					ajx = new XMLHttpRequest();
					ajx.onreadystatechange = function() {
						try {
							if(ajx.readyState == 4) {
								if(ajx.status == 200) {
									msg.innerHTML = "Loaded, clearing codes and finding available ads...";
									adscontainer.innerHTML = strip(ajx.responseText);
									A = adscontainer.getElementsByTagName('a');
									for(i = 0; i < A.length; i++) {
										try {
											if(isAds(A[i]))
												urls[urls.length] = A[i]
										}
										catch(e) {}
									};
									if(urls.length) {
										urls = shuffle(urls);
										msg.innerHTML = urls.length + " ads found";
										timer = setInterval(load, 1000)
									}
									else {
										msg.innerHTML = "No ads found";
										autosurf()
									}
								}
								else {
									msg.innerHTML = "Loading error, retrying...";
									reloadads()
								}
							}
						}
						catch(e){
							msg.innerHTML = "Loading error, retrying...";
							reloadads()
						}
					};
					ajx.open('GET', 'ads.php', true);
					ajx.send(null)
				};
				tm = setInterval(function() {
					if(j < 0) {
						clearInterval(tm);
						tm = null;
						msg.innerHTML = "Time's up, reloading...";
						reloadads()
					}
					else {
						msg.innerHTML = "Waiting for "+j+" seconds before reloading...";
						j--
					}
				}, 1000)
			};
			if(urls.length)
				timer = setInterval(load, 1000)
			else 
				autosurf()
		})
	}
}
else if(correctURL(/\/register\.php/)) {
	var r = byName('6')[0], ref, cty, ori;
	if(r && force_referal_to) {
		ref = newTag('input');
		ref.type = "hidden";
		ref.name = "6";
		ref.value = force_referal_to;
		r.form.insertBefore(ref, r.form.firstChild);
		r.name = "ref";
		r.value = "";
		cty = byName('7')[0];
		ori = cty.value;
		cty.parentNode.removeChild(cty);
		r.form.getElementsByTagName('table')[0].rows[7].cells[1].innerHTML = "<input type=text name='7' value='"+ori+"' style='text-transform:uppercase' />"
	}
}
else if(correctURL(/\/forum/)) {
	try {
		var name = byName('a_name')[0], tr = newTag('tr');
		name.parentNode.parentNode.parentNode.insertBefore(tr, name.parentNode.parentNode);
		tr.innerHTML = "<td>Username</td><td>:</td><td><input type=text name='a_name' value='"+name.value+"' style='width:100%'/></td>";
		name.parentNode.removeChild(name)
	}
	catch(e) {}
}

<!DOCTYPE html>

<html land="en">
<head>


	<script language="javascript" type="text/javascript">

		
		function showhideContent(articleID) {
			
			
			if(document.getElementById(articleID).style.offsetHeight = '0px'){			

				document.getElementById(articleID).style.height = '250px';
									
			}


			else{
			
				document.getElementById(articleID).style.height = '0px';

			}
	

		}

	</script>



	<style type="text/css">
		p {
			margin:10px;
			font-size:12px;				
		}
		h1 {
			margin:10px;			
		}
		body {
			background-color:lightgrey;
			font-family:Arial;
			font-size:12px;			
		}
		#newsletter {
			width:500px;
			border:solid;
			border-width:1px;
			border-color:black;		
			background-color:white;
			text-align:left;
			font-size:11px;	
		}
		#header {
			height:125px;			
		}
		#footer {
			height:50px;
			background-color:#330033;			
		}
		#headerbar{
			background-color:lightblue;	
			height:35px;
			overflow:hidden;
			font-size:12px;
			-webkit-transition: background-color 1s;
		}
		#headerbar:hover{
			background-color:#3399FF;

		}

		.content{
			background-color:white;	
			height:0px;
			overflow:hidden;
			-webkit-transition: height 0.5s ease-in-out;
		}		
		#expand{
			background-color:red;
		}
	</style>

</head>

<meta charset="UTF-8">

<body>
	
	<center>
	<div id="newsletter">
		
		<section id="header">			
			<img src="newsletter_header_test.jpg">
		</section>
		

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed turpis augue, nec cursus metus. Proin dictum, 

velit vel vulputate vulputate, ante sem iaculis risus, at faucibus nibh tellus et ante. Vivamus quis enim nec arcu 

dictum molestie non quis ipsum.
<br><br>
Proin vel mi eget sapien tincidunt pretium et non eros. Nullam vitae lacus at tortor volutpat feugiat. Vivamus 

venenatis risus in urna aliquet laoreet tempus diam consequat. Praesent viverra placerat venenatis. Quisque arcu 

nisl, congue sed blandit ut, suscipit eu velit. Nam quam massa, sollicitudin et elementum at, tempus nec eros. 

Etiam eget tortor condimentum metus accumsan dignissim eu sed sem.
</p>





		<article>
			<section id="headerbar">
				<div style="float:left;">
					<h1>Introducing: the first article</h1>
				</div>
				<div style="float:right;">
					<p>
					<a id="expand" href="#" onClick="javascript:showhideContent

('article1');return false;">Show/Hide Article</a>
					</p>
				</div>	
			</section>
			<div>
				<section id="article1" class="content">
					<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed turpis augue, nec cursus metus. Proin dictum, 

velit vel vulputate vulputate, ante sem iaculis risus, at faucibus nibh tellus et ante. Vivamus quis enim nec arcu 

dictum molestie non quis ipsum.
<br><br>
Proin vel mi eget sapien tincidunt pretium et non eros. Nullam vitae lacus at tortor volutpat feugiat. Vivamus 

venenatis risus in urna aliquet laoreet tempus diam consequat. Praesent viverra placerat venenatis. Quisque arcu 

nisl, congue sed blandit ut, suscipit eu velit. Nam quam massa, sollicitudin et elementum at, tempus nec eros. 

Etiam eget tortor condimentum metus accumsan dignissim eu sed sem. Quisque ultricies volutpat mauris, nec cursus 

<br><br>
sapien laoreet ut. Maecenas volutpat porta enim et tincidunt. Sed vel lectus eget dolor dictum ultrices in in 

mauris. Praesent laoreet velit vitae est vulputate a varius lorem eleifend.
					</p>
				</section>	

			</div>
		</article>
	





<br>
	






	
	<br>

	
	
	<section id="footer">			
		<p>footer</p>
	</section>

		
	</div>
	</center>	
	

</body>
	
</html>