Using JavaScript and CSS to create effect

Hi all!

I’m trying to use JavaScript and CSS to create an effect on my web site. I have this search box and besides it I got some options that I’d like to be displayed only if the user mouses over the text. So the “search options” link is actually a Javascript that should display a display: none div on mouse over.

So, I got the div, created some contents, and then set display to none.

Now I don’t want it to just show up on screen. I’d like it to gradually show up… So my plan was to get the offset height and width, the inner html, and then reset the div (taking out the inner html) so I could make it appear on screen.

I’m having some trouble handling the functions and instances though.

Check out my code. Any help will be appreciated.

[code]
//<![CDATA[

function Area_Object(id, initial_display, innerhtml, offset_w, offset_h, initial_x, initial_y) {
// Properties
this.id = id;
this.initial_display;
this.innerhtml;
this.offset_w;
this.offset_h;
this.initial_x;
this.initial_y;
}

function Set_Parameters() {
// this var obj will be replaced by an object
// parameter like Set_Parameters(obj) {
var obj = document.getElementById(“search_options”);
var new_area;

if (!(new_area instanceof Area_Object)) {
new_area = new Area_Object;
new_area.id = obj.id;
new_area.initial_display = obj.style.display;

// show the area to get the ones below
obj.style.display = “block”;

new_area.innerhtml = obj.innerHTML;
new_area.offset_w = obj.offsetWidth;
new_area.offset_h = obj.offsetHeight;
new_area.initial_x = obj.offsetLeft;
new_area.initial_y = obj.offsetTop;

// reset the area afterwards
obj.style.display = “none”;

// Prepare it to be shown
obj.style.width = 0;
obj.style.height = 0;
obj.innerHTML = “”;

//alert( new_area.offset_w );
}

return new_area;

}

// Add Method to Object
Area_Object.prototype.Set_Parameters = Set_Parameters;

function Display_Area() {
var AreaObject = Set_Parameters();

var obj2 = document.getElementById(“search_options”);
var obj2_d = obj2.style.display;

if ( (!obj2_d) || (obj2_d == “none”) || (obj2_d == “hidden”) ) {
obj2.style.display = “block”;

//alert( obj2.style.width );
obj2.style.width = (parseInt(obj2.style.width) + 5) + “px”;
if (parseInt(obj2.style.width) > AreaObject.offset_w) obj2.style.width = AreaObject.offset_w;
obj2.style.height = (parseInt(obj2.style.height) + 5) + “px”;
if (parseInt(obj2.style.height) > AreaObject.offset_h) obj2.style.height = AreaObject.offset_h;
//alert( obj2.style.width );

t = setTimeOut(Display_Area(), 50);
if (parseInt(obj2.style.width) >= AreaObject.offset_w) clearTimeout(t);

}

}

// Add Method to Object
// Set_Parameters.prototype.Display_Area = Display_Area;

//]]>
[/code]

That’s all I got so far. Can’t get the div to “grow” gradually. Guess I’m messing up the class behavior of JavaScript. Really confused! ?

The html is simple

[code]
<div id=”search”>
<div id=”search_contents”>
<div><input name=”search_all” id=”search_all” type=”text” value=”” /></div>
<div id=”search_contents_options”>
<a href=”#” onmouseover=”Display_Area(‘search_options’);” >Op&ccedil;&otilde;es de Pesquisa</a>
<div id=”search_options” >
<input type=”checkbox” id=”por_nome_restaurante” checked=”checked” value=”1″ /><label for=”por_nome_restaurante” >Por Nome do Restaurante</label> <br/>
<input type=”checkbox” id=”por_tipo_comida” checked=”checked” value=”1″ /><label for=”por_tipo_comida” >Por Tipo de Comida</label> <br/>
<input type=”checkbox” id=”por_nome_prato” checked=”checked” value=”1″ /><label for=”por_nome_prato” >Por Nome do Prato</label>
</div>
</div>
<div id=”search_contents_button”><a href=”#” class=”Link_Button_Gold” ><img src=”../images/button_icon_20_search.gif” width=”20″ height=”20″ border=”0″ align=”absmiddle” /><span>Pesquisar</span></a></div>
</div>
</div>
[/code]

Also in #JavaScript _↴