Home      Products & Services      Contact Us      Links

WebHatchers will design & develop your site for you.

Website Menu Heaven: menus, buttons, etc.

Send us your questions.

site search by freefind

SEO, Google, Privacy
   and Anonymity
Browser Insanity
Popups and Tooltips
Free Website Search
HTML Form Creator
Buttons and Menus
Image Uploading
Website Poll
IM and Texting
   or Not MySQL
Personal Status Boards
Content Management
Article Content
   Management Systems
Website Directory
   CMS Systems
Photo Gallery CMS
Forum CMS
Blog CMS
Customer Records
   Management CMS
Address Book CMS
Private Messaging CMS
Chat Room CMS
JavaScript Charts
   and Graphs

Free Personal Status Boards (PSB™)

Free Standard Free PSB

Free PSB Pro Version

Free Social PSB

Free Social PSB Plus (with Email)

Free Business PSB

Free Business PSB Plus (with Email)

PSB demo

Social PSB demo

Business PSB demo

So what's all this PSB stuff about?

Chart comparing business status boards

PSB hosting diagram

PSB Licence Agreement

Copyright © 2002 -
MCS Investments, Inc. sitemap

PSBs, social networking, social evolution, microcommunities, personal status boards
PSBs, social networking, business personal status boards
website design, ecommerce solutions
website menus, buttons, image rotators
Ez-Architect, home design software
the magic carpet and the cement wall, children's adventure book
the squirrel valley railroad, model railroad videos, model train dvds
the deep rock railroad, model railroad videos, model train dvds

Enlarge Only 1 Div at a Time

To enlarge only 1 div at a time, try this:

Enlarge Only 1 Div at a Time

Note that s1, s2, s3, and s4 were used for both height and width. There's no reason you cannot use two separate variables for each div, a height variable and a width variable. Also note that the changewidth(w) function gets a parameter passed into the w variable when the function call is triggered by a click event onClick="changewidth('s1') and passes one of the 4 id values ('s1', 's2', 's3', or 's4') into this function so the getElementById("s1") method can access the div to change.

<SCRIPT language="javascript">
var w = "s1";
var s1 = 100
var s2 = 100
var s3 = 100
var s4 = 100

function changewidth(w){
e=document.getElementById("s1");s1=100; if (w=='s1'){s1=200}
e.style.width = s1 + 'px';
e.style.height = s1 + 'px';
e=document.getElementById("s2");s2=100; if (w=='s2'){s2=200}
e.style.width = s2 + 'px';
e.style.height = s2 + 'px';
e=document.getElementById("s3");s3=100; if (w=='s3'){s3=200}
e.style.width = s3 + 'px';
e.style.height = s3 + 'px';
e=document.getElementById("s4");s4=100; if (w=='s4'){s4=200}
e.style.width = s4 + 'px';
e.style.height = s4 + 'px';

function wipe(){window.status= " ";} //erase status bar or give it a desired message here (between quotes)

// -->

<div id="s1" style="position:absolute; top:50px; left:50px; width:100px; height:100px; background-color:red; text-align:center;"><br><br><br><b>div box</b></div><BR>
<div id="s2" style="position:absolute; top:50px; left:550px; width:100px; height:100px; background-color:blue; text-align:center;"><br><br><br><b>div box</b></div><BR>
<div id="s3" style="position:absolute; top:300px; left:50px; width:100px; height:100px; background-color:yellow; text-align:center;"><br><br><br><b>div box</b></div><BR>
<div id="s4" style="position:absolute; top:300px; left:550px; width:100px; height:100px; background-color:green; text-align:center;"><br><br><br><b>div box</b></div><BR>
<div style="position:absolute; left:50px; top:30px;"><a href="javascript:void(0)" onMouseOver="wipe();return true;" onClick="changewidth('s1');">Change size.</a></div>
<div style="position:absolute; left:550px; top:30px;"><a href="javascript:void(0)" onMouseOver="wipe();return true;" onClick="changewidth('s2');">Change size.</a></div>
<div style="position:absolute; left:50px; top:280px;"><a href="javascript:void(0)" onMouseOver="wipe();return true;" onClick="changewidth('s3');">Change size.</a></div>
<div style="position:absolute; left:550px; top:280px;"><a href="javascript:void(0)" onMouseOver="wipe();return true;" onClick="changewidth('s4');">Change size.</a></div>