<div id="modal" style="border:3px solid black; background-color:#9999ff; padding:25px; font-size:150%; text-align:center; display:none;">
This is a modal popup!<br><br>
<input type="button" value="OK" onClick="Popup.hide('modal')">
</div>
<a href="#" onclick="Popup.showModal('modal');return false;">Show Modal Popup</a>
<br>
<a href="#" onclick="Popup.showModal('modal',null,null,{'screenColor':'#99ff99','screenOpacity':.6});return false;">Show Modal Popup With A Custom Screen</a>
Monday, November 5, 2012
Javascript popup
how set the dropdown list item size based on lenght in I.E 6
The width of the dropdown grows/shrinks during a mouseover.
here is code to do that :-
here is code to do that :-
<script type="text/javascript">
var MAX_WIDTH = 500; //the biggest width the select is allowed to be
function biggestOption(elem) {
var biggest = 0;
for (var i=0;i<elem.options.length;i++) {
if ( elem.options[i].innerHTML.length > biggest ) {
biggest = elem.options[i].innerHTML.length;
}
}
return roughPixelSize(biggest);
}
function roughPixelSize(charLength) {
//this is far from perfect charLength to pixel
//but it works for proof of concept
roughSize = 30 + (charLength * 6);
if (roughSize > MAX_WIDTH) {
return MAX_WIDTH;
} else {
return roughSize;
}
}
function resizeToBiggest(elem) {
elem.style.width = biggestOption(elem);
}
function resizeToSelected(elem) {
elem.style.width = roughPixelSize(elem.options[elem.selectedIndex].innerHTML.length);
}
</script>
<select onmouseover="resizeToBiggest(this)" style="width:70px" onchange="resizeToSelected(this)" onblur="resizeToSelected(this)" >
<option>test 1</option>
<option>test 2</option>
<option>test 3</option>
<option>this is some really really realy long text</option>
<option>test 4</option>
<option>test 5</option>
</select>
Subscribe to:
Posts (Atom)