Loading Page
Toolbar
U-Trade tutorials
Hello Guest
Links
Google Search
search
categories
css
css
html
html
javascript
javascript
    »   Images
    »   Text effects
    »   Dimensions
    »   Implementations
    »   Menu
photoshop
photoshop
php
php



Paypal
sitemap
contact
request tutorial
recommends
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.

10 Random Tutorials from all categories and subcategories
tutorials U-Trade
tutorials U-Trade
Resizing components : U-Trade
+ Share and Enjoy
Author: Cristea Iulian



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-2008 | Resizing components : U-Trade : U-Trade Tutorials