Gmail feature

**pstar** · 08-06-2006, 12:24 AM

On gmail if you click the 'attach file' link a text box and browse button appears. How can this be replicated?

**Twey** · 08-06-2006, 12:57 AM

Code:

<script type="text/javascript">
function toggleVisibility(el) {
  if(el.style.display === "none")
    el.style.display = "";
  else el.style.display = "none";
}
</script>
<p><button onclick="toggleVisibility(document.getElementById('attachDiv'));">Attach File</button></p>
<p id="attachDiv">
  <form action="">
    <input type="file" name="userfile">
    <input type="submit" value="Go">
  </form>
</p>

**zeropsi** · 08-06-2006, 12:59 AM

JavaScript

Code:

function toggle(id) {
	var obj = "";

	// Check browser compatibility
	if(document.getElementById)
		obj = document.getElementById(id);
	else if(document.all)
		obj = document.all[id];
	else if(document.layers)
		obj = document.layers[id];
	else
		return 1;

	if (!obj) {
		return 1;
	}
	else if (obj.style)
	{
		obj.style.display = ( obj.style.display != "none" ) ? "none" : "";
	}
	else
	{
		obj.visibility = "show";
	}
}

HTML

Code:

<a href="#" onClick="javascript:toggle('attach');">Attach another file</a>
<div id="attach" style="display:none;"><input type="file" name="file_name"></div>

Hopefully that can help you.

**Twey** · 08-06-2006, 01:15 AM

This one has more support for obsolete browsers. However, it can be condensed:

Code:

function toggle(el) {
	var obj = document.getElementById && document.getElementById(el) ? document.getElementById(el) :
		document.all && document.all[el] ? document.all[el] :
			document.layers && document.layers[el] ? document.layers[el] :
				el;
	// if obj.style isn't defined, it hasn't been hidden
	// in the first place, since we've used CSS to do so.
	obj.style.display = obj.style.display === "none" ? "" : "none";
}

Code:

<a href="#" onClick="javascript:toggle('attach');">Attach another file</a>
<div id="attach" style="display:none;"><input type="file" name="file_name"></div>

The OP asked for a button;
that # will wreak havoc if you don't return false; from the event handler or, even better, use javascript:void(0); instead;
the javascript: pseudo-URL schema has no place in an event handler: javascript: is for URLs;
<input> elements must be in a form.

**zeropsi** · 08-06-2006, 05:52 AM

Originally Posted by Twey

The OP asked for a button;
that # will wreak havoc if you don't return false; from the event handler or, even better, use javascript:void(0); instead;
the javascript: pseudo-URL schema has no place in an event handler: javascript: is for URLs;
<input> elements must be in a form.

I am sure there is a 1 million ways to do it, I just posted up one that could be used.

**Twey** · 08-06-2006, 01:01 PM

It can't, really. That # will irritate users no end; it's still not what the OP actually asked for; and javascript: really shouldn't be parsed in event handlers (although it is error-corrected and ignored).