GmailLike attachments - Revision history

Admin: /* Example */

2009-12-10T07:02:09Z

Example

← Older revision		Revision as of 10:02, 10 December 2009
Line 36:		Line 36:
	var imgrem = document.createElement('img');		var imgrem = document.createElement('img');
	imgrem.setAttribute('src', 'delicon.png');		imgrem.setAttribute('src', 'delicon.png');
			imgrem.setAttribute('alt', 'del');
	imgrem.setAttribute('style', 'border: 0px none;');		imgrem.setAttribute('style', 'border: 0px none;');
	remlink.appendChild(imgrem);		remlink.appendChild(imgrem);
Line 52:		Line 53:
	<div>		<div>
	<input type="file" name="attachment" id="attachment" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />		<input type="file" name="attachment" id="attachment" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
	<a href="#" onclick="addFileInput('moreUploads')"><img src="addicon.gif" style="border: 0px none;" /></a>		<a href="#" onclick="addFileInput('moreUploads')"><img src="addicon.gif" alt="add" style="border: 0px none;" /></a>
	</div>		</div>
	<div id="moreUploads"></div>		<div id="moreUploads"></div>

Admin: /* Example */

2009-12-10T05:43:59Z

Example

← Older revision		Revision as of 08:43, 10 December 2009
Line 52:		Line 52:
	<div>		<div>
	<input type="file" name="attachment" id="attachment" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />		<input type="file" name="attachment" id="attachment" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
	<a href="#" onclick="~~addFileImput~~('moreUploads')"><img src="addicon.gif" style="border: 0px none;" /></a>		<a href="#" onclick="addFileInput('moreUploads')"><img src="addicon.gif" style="border: 0px none;" /></a>
	</div>		</div>
	<div id="moreUploads"></div>		<div id="moreUploads"></div>

Admin: /* Example */

2009-12-10T05:08:30Z

Example

← Older revision		Revision as of 08:08, 10 December 2009
Line 35:		Line 35:

	var imgrem = document.createElement('img');		var imgrem = document.createElement('img');
	imgrem.setAttribute('src', '~~b_drop~~.png');		imgrem.setAttribute('src', 'delicon.png');
	imgrem.setAttribute('style', 'border: 0px none;');		imgrem.setAttribute('style', 'border: 0px none;');
	remlink.appendChild(imgrem);		remlink.appendChild(imgrem);

Admin: /* Example */

2009-12-10T05:07:36Z

Example

← Older revision		Revision as of 08:07, 10 December 2009
Line 32:		Line 32:
	var remlink = document.createElement('a');		var remlink = document.createElement('a');
	remlink.setAttribute("href", "#");		remlink.setAttribute("href", "#");
	remlink.setAttribute("onclick", 'delFileInput(\''+divname+'\', \'att'+upload_number+'\')');		remlink.setAttribute("onclick", "delFileInput('"+divname+"', 'att"+upload_number+"')");

	var imgrem = document.createElement('img');		var imgrem = document.createElement('img');

Admin at 05:04, 10 December 2009

2009-12-10T05:04:46Z

← Older revision		Revision as of 08:04, 10 December 2009
Line 9:		Line 9:
	==Example==		==Example==

	<source lang="~~html~~">		<source lang="html4strict">
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">		<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<head>		<head>

Admin: New page: ==WHY== Because I felt like wanting to have some way of making a dynamic number of attachments. ==HOW== Javascript people. Even if I don't like it too much and I usually block other peopl...

2009-12-10T05:04:00Z

New page: ==WHY== Because I felt like wanting to have some way of making a dynamic number of attachments. ==HOW== Javascript people. Even if I don't like it too much and I usually block other peopl...

New page

==WHY==
Because I felt like wanting to have some way of making a dynamic number of attachments.

==HOW==
Javascript people. Even if I don't like it too much and I usually block other people's JS with the NoScript addon for firefox.

First, created a parent Div in which all the other divs containing the inputs will be inserted. Then created a function which takes that as a param and creates some elements inserting them into the parent div. A second function removes that from the parent div.

==Example==

<source lang="html">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>test</title>
<script type="text/javascript">
var upload_number = 2;
function delFileInput(divname, rem) {
var d = document.getElementById(divname);
var old = document.getElementById(rem);
d.removeChild(old);
return false;
}
function addFileInput(divname) {
var d = document.createElement("div");
d.setAttribute('id', 'att'+upload_number);

var file = document.createElement("input");
file.setAttribute("type", "file");
file.setAttribute("name", "attachment"+upload_number);
d.appendChild(file);

var remlink = document.createElement('a');
remlink.setAttribute("href", "#");
remlink.setAttribute("onclick", 'delFileInput(\''+divname+'\', \'att'+upload_number+'\')');

var imgrem = document.createElement('img');
imgrem.setAttribute('src', 'b_drop.png');
imgrem.setAttribute('style', 'border: 0px none;');
remlink.appendChild(imgrem);

d.appendChild(remlink);

document.getElementById(divname).appendChild(d);
upload_number++;

return false;
}
</script>
</head>
<body>
<form method="post" action="gmaillike.html">
<div>
<input type="file" name="attachment" id="attachment" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
<a href="#" onclick="addFileImput('moreUploads')"><img src="addicon.gif" style="border: 0px none;" /></a>
</div>
<div id="moreUploads"></div>
</form>
</body>
</html>
</source>

[[Category: HTML]]
[[Category: JavaScript]]