Loading Page

Resizing components

Hello Guest
Links
Google Search
search
categories
css
css
html
html
javascript
javascript
    »   Menu
    »   Dimensions
    »   Images
    »   Implementations
    »   Text effects
photoshop
photoshop
php
php



Paypal
Do you have something to do in code, design or animation and you don't know how?
Send us an e-mail and will do a tutorial which will solve your problem.

Documentations for any level of knowledge, from beginners to advanced programmers, and even for those who just want a 'piece of code'
tutorials U-Trade
tutorials U-Trade

Resizing components

+ Share and Enjoy
Author: Cristea Iulian



1 from 3 vots
Vote up
Vote down
Vote this article
There are situations when you want to conserve space but your controls might contain long text. Here is a way to resize at an event, to expand or to collapse when necessary.



Here is the code: 
<script type="text/javascript" language="javascript">


function changeMySize(mode)
{
	if (mode=="expand")
		document.getElementById("mySelect").style.width = "400px";
	else if (mode=="collapse")
		document.getElementById("mySelect").style.width = "100px";
}


</script>
<select style="width:100px;" onfocus="changeMySize('expand')" onblur="changeMySize('collapse')" id="mySelect">
<option value="0">short option</option>
<option value="1">long option to test for expanding this control</option>
</select>

As you can see, we need a function which first test the expand or collapse mode, and then it changes the size of the control. The events that we use in this tutorial are onfocus and onblur


+ post a comment


sitemap   |   terms and conditions   |   contact
U-Trade © All rights reserved 2006-2010 | Resizing components : U-Trade Tutorials
Subdomains
Languages
send us a message
Info
Tools
Contact
preview
Rollover icons to see their description in this box
gadgets