JavaScript - Adding Border When Window Is Resized?

hi guys im looking for help with a soloution that will enable me to set a divs min-height to 350px then when the window is resized it will increase over that 350 this supose to allow people with larger resoloutions to see more of the content.

make sense any ideas?
cheers.

The javascript tab menu works as you can see he
http://www.mujak.com/test/tabz/

But when it is resized, it overlaps eachother.

How can the tabs that overlap go underneath the other tabs when resized~??



Here is the tabcontent.js file for the JS tab menu:

Code:

//** Tab Content script v2.0- � Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
//** Updated Oct 7th, 07 to version 2.0. Contains numerous improvements:
//   -Added Auto Mode: Script auto rotates the tabs based on an interval, until a tab is explicitly selected
//   -Ability to expand/contract arbitrary DIVs on the page as the tabbed content is expanded/ contracted
//   -Ability to dynamically select a tab either based on its position within its peers, or its ID attribute (give the target tab one 1st)
//   -Ability to set where the CSS classname "selected" get assigned- either to the target tab's link ("A"), or its parent container
//** Updated Feb 18th, 08 to version 2.1: Adds a "tabinstance.cycleit(dir)" method to cycle forward or backward between tabs dynamically
//** Updated April 8th, 08 to version 2.2: Adds support for expanding a tab using a URL parameter (ie: http://mysite.com/tabcontent.htm?tabinterfaceid=0) 

////NO NEED TO EDIT BELOW////////////////////////

function ddtabcontent(tabinterfaceid){
	this.tabinterfaceid=tabinterfaceid //ID of Tab Menu main container
	this.tabs=document.getElementById(tabinterfaceid).getElementsByTagName("a") //Get all tab links within container
	this.enabletabpersistence=true
	this.hottabspositions=[] //Array to store position of tabs that have a "rel" attr defined, relative to all tab links, within container
	this.currentTabIndex=0 //Index of currently selected hot tab (tab with sub content) within hottabspositions[] array
	this.subcontentids=[] //Array to store ids of the sub contents ("rel" attr values)
	this.revcontentids=[] //Array to store ids of arbitrary contents to expand/contact as well ("rev" attr values)
	this.selectedClassTarget="link" //keyword to indicate which target element to assign "selected" CSS class ("linkparent" or "link")
}

ddtabcontent.getCookie=function(Name){ 
	var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
	if (document.cookie.match(re)) //if cookie found
		return document.cookie.match(re)[0].split("=")[1] //return its value
	return ""
}

ddtabcontent.setCookie=function(name, value){
	document.cookie = name+"="+value+";path=/" //cookie value is domain wide (path=/)
}

ddtabcontent.prototype={

	expandit:function(tabid_or_position){ //PUBLIC function to select a tab either by its ID or position(int) within its peers
		this.cancelautorun() //stop auto cycling of tabs (if running)
		var tabref=""
		try{
			if (typeof tabid_or_position=="string" && document.getElementById(tabid_or_position).getAttribute("rel")) //if specified tab contains "rel" attr
				tabref=document.getElementById(tabid_or_position)
			else if (parseInt(tabid_or_position)!=NaN && this.tabs[tabid_or_position].getAttribute("rel")) //if specified tab contains "rel" attr
				tabref=this.tabs[tabid_or_position]
		}
		catch(err){alert("Invalid Tab ID or position entered!")}
		if (tabref!="") //if a valid tab is found based on function parameter
			this.expandtab(tabref) //expand this tab
	},

	cycleit:function(dir, autorun){ //PUBLIC function to move foward or backwards through each hot tab (tabinstance.cycleit('foward/back') )
		if (dir=="next"){
			var currentTabIndex=(this.currentTabIndex<this.hottabspositions.length-1)? this.currentTabIndex+1 : 0
		}
		else if (dir=="prev"){
			var currentTabIndex=(this.currentTabIndex>0)? this.currentTabIndex-1 : this.hottabspositions.length-1
		}
		if (typeof autorun=="undefined") //if cycleit() is being called by user, versus autorun() function
			this.cancelautorun() //stop auto cycling of tabs (if running)
		this.expandtab(this.tabs[this.hottabspositions[currentTabIndex]])
	},

	setpersist:function(bool){ //PUBLIC function to toggle persistence feature
			this.enabletabpersistence=bool
	},

	setselectedClassTarget:function(objstr){ //PUBLIC function to set which target element to assign "selected" CSS class ("linkparent" or "link")
		this.selectedClassTarget=objstr || "link"
	},

	getselectedClassTarget:function(tabref){ //Returns target element to assign "selected" CSS class to
		return (this.selectedClassTarget==("linkparent".toLowerCase()))? tabref.parentNode : tabref
	},

	urlparamselect:function(tabinterfaceid){
		var result=window.location.search.match(new RegExp(tabinterfaceid+"=(\\d+)", "i")) //check for "?tabinterfaceid=2" in URL
		return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index
	},

	expandtab:function(tabref){
		var subcontentid=tabref.getAttribute("rel") //Get id of subcontent to expand
		//Get "rev" attr as a string of IDs in the format ",john,george,trey,etc," to easily search through
		var associatedrevids=(tabref.getAttribute("rev"))? ","+tabref.getAttribute("rev").replace(/\s+/, "")+"," : ""
		this.expandsubcontent(subcontentid)
		this.expandrevcontent(associatedrevids)
		for (var i=0; i<this.tabs.length; i++){ //Loop through all tabs, and assign only the selected tab the CSS class "selected"
			this.getselectedClassTarget(this.tabs[i]).className=(this.tabs[i].getAttribute("rel")==subcontentid)? "selected" : ""
		}
		if (this.enabletabpersistence) //if persistence enabled, save selected tab position(int) relative to its peers
			ddtabcontent.setCookie(this.tabinterfaceid, tabref.tabposition)
		this.setcurrenttabindex(tabref.tabposition) //remember position of selected tab within hottabspositions[] array
	},

	expandsubcontent:function(subcontentid){
		for (var i=0; i<this.subcontentids.length; i++){
			var subcontent=document.getElementById(this.subcontentids[i]) //cache current subcontent obj (in for loop)
			subcontent.style.display=(subcontent.id==subcontentid)? "block" : "none" //"show" or hide sub content based on matching id attr value
		}
	},

	expandrevcontent:function(associatedrevids){
		var allrevids=this.revcontentids
		for (var i=0; i<allrevids.length; i++){ //Loop through rev attributes for all tabs in this tab interface
			//if any values stored within associatedrevids matches one within allrevids, expand that DIV, otherwise, contract it
			document.getElementById(allrevids[i]).style.display=(associatedrevids.indexOf(","+allrevids[i]+",")!=-1)? "block" : "none"
		}
	},

	setcurrenttabindex:function(tabposition){ //store current position of tab (within hottabspositions[] array)
		for (var i=0; i<this.hottabspositions.length; i++){
			if (tabposition==this.hottabspositions[i]){
				this.currentTabIndex=i
				break
			}
		}
	},

	autorun:function(){ //function to auto cycle through and select tabs based on a set interval
		this.cycleit('next', true)
	},

	cancelautorun:function(){
		if (typeof this.autoruntimer!="undefined")
			clearInterval(this.autoruntimer)
	},

	init:function(automodeperiod){
		var persistedtab=ddtabcontent.getCookie(this.tabinterfaceid) //get position of persisted tab (applicable if persistence is enabled)
		var selectedtab=-1 //Currently selected tab index (-1 meaning none)
		var selectedtabfromurl=this.urlparamselect(this.tabinterfaceid) //returns null or index from: tabcontent.htm?tabinterfaceid=index
		this.automodeperiod=automodeperiod || 0
		for (var i=0; i<this.tabs.length; i++){
			this.tabs[i].tabposition=i //remember position of tab relative to its peers
			if (this.tabs[i].getAttribute("rel")){
				var tabinstance=this
				this.hottabspositions[this.hottabspositions.length]=i //store position of "hot" tab ("rel" attr defined) relative to its peers
				this.subcontentids[this.subcontentids.length]=this.tabs[i].getAttribute("rel") //store id of sub content ("rel" attr value)
				this.tabs[i].onclick=function(){
					tabinstance.expandtab(this)
					tabinstance.cancelautorun() //stop auto cycling of tabs (if running)
					return false
				}
				if (this.tabs[i].getAttribute("rev")){ //if "rev" attr defined, store each value within "rev" as an array element
					this.revcontentids=this.revcontentids.concat(this.tabs[i].getAttribute("rev").split(/\s*,\s*/))
				}
				if (selectedtabfromurl==i || this.enabletabpersistence && selectedtab==-1 && parseInt(persistedtab)==i || !this.enabletabpersistence && selectedtab==-1 && this.getselectedClassTarget(this.tabs[i]).className=="selected"){
					selectedtab=i //Selected tab index, if found
				}
			}
		} //END for loop
		if (selectedtab!=-1) //if a valid default selected tab index is found
			this.expandtab(this.tabs[selectedtab]) //expand selected tab (either from URL parameter, persistent feature, or class="selected" class)
		else //if no valid default selected index found
			this.expandtab(this.tabs[this.hottabspositions[0]]) //Just select first tab that contains a "rel" attr
		if (parseInt(this.automodeperiod)>500 && this.hottabspositions.length>1){
			this.autoruntimer=setInterval(function(){tabinstance.autorun()}, this.automodeperiod)
		}
	} //END int() function

} //END Prototype assignment

Here is the CSS for tabcontent.css:

Code:

/* ######### CSS for Shade Tabs. Remove if not using ######### */

tr
{
font-size:12px;
}

.shadetabs{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li{
display: inline;
margin: 0;
}

.shadetabs li a{
text-decoration: none;
position: relative;
z-index: 1;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(shade.gif) top left repeat-x;
}

.shadetabs li a:visited{
color: #2d2b2b;
}

.shadetabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
}

.shadetabs li a.selected{ /*selected main tab style */
position: relative;
top: 1px;
}

.shadetabs li a.selected{ /*selected main tab style */
background-image: url(shadeactive.gif);
border-bottom-color: white;
}

.shadetabs li a.selected:hover{ /*selected main tab style */
text-decoration: none;
}

.tabcontenthome{
display:block;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block !important;
}
}

/* ######### CSS for Inverted Modern Bricks II Tabs. Remove if not using ######### */

.modernbricksmenu2{
padding: 0;
width: 362px;
border-top: 5px solid #D25A0B; /*Brown color theme*/ 
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

.modernbricksmenu2 ul{
margin:0;
margin-left: 10px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}

.modernbricksmenu2 li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

.modernbricksmenu2 a{
float: left;
display: block;
font: bold 11px Arial;
color: white;
text-decoration: none;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
background-color: black; /*Brown color theme*/ 
border-top: 1px solid white;
}

.modernbricksmenu2 a:hover{
background-color: #D25A0B; /*Brown color theme*/ 
color: white;
}

.modernbricksmenu2 a.selected{ /*currently selected tab*/
background-color: #D25A0B; /*Brown color theme*/ 
color: white;
border-color: #D25A0B; /*Brown color theme*/ 
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block !important;
}
}

/* ######### CSS for Indented CSS Tabs. Remove if not using ######### */


.indentmenu{
font: bold 13px Arial;
width: 100%; /*leave this value as is in most cases*/
}

.indentmenu ul{
margin: 0;
padding: 0;
float: left;
/* width: 80%; width of menu*/
border-top: 1px solid navy; /*navy border*/
background: black url(indentbg.gif) center center repeat-x;
}

.indentmenu ul li{
display: inline;
}

.indentmenu ul li a{
float: left;
color: white; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid navy; /*navy divider between menu items*/
}

.indentmenu ul li a:visited{
color: white;
}

.indentmenu ul li a.selected{
color: white !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
background: black url(indentbg2.gif) center center repeat-x;
}


.tabcontentstyle{ /*style of tab content oontainer*/
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block !important;
}
}

Is there a way to make 2 functions load at the same time using window.onload? I have to seperate functions which rotate images, then another that rotates text.

Functions:

showQuote()
iAnimate()

hello,

I am trying to add a window event listener on some links in a loop instead of doing them one by one. I've tried

Code:

function setListeners (){
for (var i = 0; i < document.links.length; i++) {
src=document.links[i].href;
document.links[i].onmousemove=changeIframeSrc(src, 'solid',1, event);
document.links[i].onmouseout=changeIframeSrc(null,'none',0,event);
	}
}

and

Code:

function setListeners (){
for (var i = 0; i < document.links.length; i++) {
src=document.links[i].href;
document.links[i].onmousemove=function(a1,a2,a3,a4){
		return function(){changeIframeSrc(a1,a2,a3,a4);}
 }(src, 'solid',1, event);
 	}
}

but the event keeps coming up undefined. Any ideas on how to do this?

Hi

Im taking a course in web design and am working on a basic javascript page. I have a drop down box where you select a item and it opens a new window. How would I get the back ground color to be the same as the web page color (lightblue), what code would I use and where in my code would I put it?

[CODE]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>
<HEAD>
<TITLE>MEG</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!--
var content;
var oneWindow;
var fullWindow;
var oneWindowStatus = false;
var fullWindowStatus = false;


function closeAllWindows() {
if((oneWindowStatus) && (!oneWindow.closed)) oneWindow.close();
if((fullWindowStatus) && (!fullWindow.closed)) fullWindow.close();
oneWindowStatus = false;
fullWindowStatus = false;
}


function productObject(name,description,use,image) {
this.name = name;
this.description = description;
this.use = use;
this.image = image;
this.displayOne = displayOne;
}

//Add products here
var products = new Array();
products[0] = new productObject("Ears", "Fluffy, pointy, big", "For hearing other dogs near by, for listening to my owner but ignoring her", "images/ears.jpg");
products[1] = new productObject("Eyes", "Shiny, brown, pretty", "To see dogs to bark at, to see when treats are available", "images/eyes.jpg");
products[2] = new productObject("Nose", "Black, wet", "For sniffing out food and squirrels", "images/nose.jpg");
products[3] = new productObject("Mouth", "BIG", "For barking loudly with", "images/mouth.jpg");
products[4] = new productObject("Tongue", "Pink, wet", "To lick you with when you really dont want her to", "images/tongue.jpg");
products[5] = new productObject("Legs", "Short, fluffy", "To run as fast as possible with after squirrels", "images/legs.jpg");
products[6] = new productObject("Paws", "Small", "To raise when I want treats/food of any sort", "images/paws.jpg");

var len = products.length;

function displayOne() {
content="";
content+="<HTML><HEAD><TITLE>" + this.name + "</TITLE></HEAD>";
content+="<BODY><DIV ALIGN='center'>";
content+="<TABLE WIDTH='90%'><TR><TD COLSPAN='3' ALIGN='center'>";
content+="<H3>Name: " + this.name.bold() + "</H3><HR>";
content+="<TR><TD><B>Name:</B> " + this.name;
content+="<TR><TD><B>Description:</B> " + this.description;
content+="<TR><TD><B>Use:</B> " + this.use;
content+="<TR><TD><IMG SRC= '" + this.image + "' HEIGHT='100' WIDTH='100'>";
content+="</TABLE><FORM>";
content+="<INPUT TYPE='button' VALUE='OK' onClick='window.close();'>";
content+="</FORM></DIV></BODY></HTML>";
oneWindow = open("","OneWindow","width=500,height=400");
newWindow(oneWindow);
oneWindowStatus = true;
}

function showAll() {
content="";
content+="<HTML><HEAD><TITLE>All that is Meg</TITLE></HEAD>";
content+="<BODY><DIV ALIGN=center>";
content+="<TABLE WIDTH='90%' BORDER CELLPADDING='2'>";
content+="<TR><TH COLSPAN='2' ALIGN='center'>";
content+="All that is Meg";
content+="<TR><TH>Name<TH>Image";

for (var i = 0; i < len; i++) {
content+="<TR><TD>";
content+="<A HREF='javascript:void(window.opener.products[" + i + "].displayOne());'>";
content+=products[i].name + "</A>";
content+="<TD>" + products[i].description;
}
content+="</TABLE><FORM>";
content+="<INPUT TYPE='button' VALUE='OK' onClick='window.close();'>";
content+="</FORM></DIV></BODY></HTML>";
fullWindow = open("","AllWindow","width=500,height=400,resizable=1");
newWindow(fullWindow);
fullWindowStatus = true;
}

function newWindow(x) {
x.document.close();
x.document.open();
x.document.write(content);
x.document.close();
x.moveTo(20,20);
x.focus();
}

//-->
</SCRIPT>

</SELECT>

</HEAD>
<BODY onFocus="closeAllwindows();" bgcolor="lightblue">
<DIV ALIGN="center">

<H2>Meg</H2>
<HR>
<FORM NAME="prodForm">
<TABLE WIDTH="100%">
<TR>
<TD WIDTH="50%" ALIGN="right">
<SELECT NAME="itemName">

<SCRIPT LANGUAGE="JavaScript">
<!--

for (var i = 0; i < len; i++) {
document.write("<OPTION>" + products[i].name);
}

//-->
</SCRIPT>

</SELECT>
<TD>
<INPUT TYPE="button" VALUE="Get Info"
onClick="
var i = document.prodForm.itemName.selectedIndex;
products[i].displayOne();">
<TR><TD ALIGN="right">
<TR><TD colspan="2" ALIGN="center">&nbsp;
<TR><TD colspan="2" ALIGN="center">
<INPUT TYPE="button" VALUE="Show All Products" onClick="showAll();">
</TABLE>
</FORM>
<img src="images/meg1.jpg" "alt="Meg" border="2"/>
</DIV>
</BODY>
</HTML>

[CODE]

Thanks and hope someone can help

Claire