Page 1 of 1

[56K WARN] using javascript to show and hide an element

Posted: Sun Dec 23, 2007 10:20 pm
by s.dot
OK, so I'm nearly finished with a site. However this little "bug" has been bothering me for months.

Here's my show() and hide() javascript functions.

Code: Select all

function hide(el)
{
	document.getElementById(el).style.display = 'none';
}

function show(el)
{
	document.getElementById(el).style.display = 'inline';
}
Nothing fancy, pretty simple, straight to the point.

Here's a piece of PHP generated HTML that it's working on.

Code: Select all

<table width="730" cellspacing="0" cellpadding="3" border="0" style="border: solid 1px #000;">
	<tr>
		<td bgcolor="#1771D4" colspan="5" align="center"><strong>Banners</strong></td>
	</tr>
	<tr>
		<td width="20" bgcolor="lightblue"><strong>#</strong></td>
		<td width="550" bgcolor="lightblue"><strong>Banner</strong></td>
		<td width="100" bgcolor="lightblue"><strong>Status</strong></td>
		<td width="30" bgcolor="lightblue"><strong>Views</strong></td>
		<td width="30" bgcolor="lightblue"><strong>Clicks</strong></td>
	</tr>
	<tr>
		<td valign="top">1.</td>
		<td valign="top"><a href="http://www.yahoo.com" target="_blank"><img src="http://www.freepsd.com/downloads/graphics/full/36.jpg" alt="" border="0" /></a><br />[<strong>0</strong> Impressions Remaining] - [<a href="javascript:void(0);" onclick="show('b_5');">Assign Impressions</a>] - [<span class="delete"><a href="worker.php?action=delete-banner&banner_id=5" onclick="return confirm('Are you sure you want to delete the banner\nhttp://www.freepsd.com/downloads/graphics/full/36.jpg?');">delete</a></span>]</td>
		<td valign="top">Accepted</td>
		<td valign="top" align="center">0</td>
		<td valign="top" align="center">0</td>
	</tr>
	<tr>
		<td id="b_5" colspan="5" align="center" style="display: none;"><br />
			<form action="worker.php" method="post" onsubmit="return checkimps(document.getElementById('imp_value_5').value, 350);">
			<input type="hidden" name="action" value="assign-impressions" />
			<input type="hidden" name="banner_id" value="5" />
			<p>You may assign up to <strong>350</strong> impressions<br />
			Assign <input class="textform" type="text" id="imp_value_5" name="imps_to_assign" value="0" maxlength="7" size="10" /> Impressions 
			<input class="submit" type="submit" name="submit" value="Assign Impressions" /></p>
			<p>[<a href="javascript:void(0);" onclick="hide('b_5');">nevermind</a>]</p>
			</form>
		</td>
	</tr>
	<tr>
		<td colspan="5">&nbsp;</td>
	</tr>
</table>
When the 'Assign Impressions' link is clicked, the form in the row beneath it is supposed to be shown. IE7 (the first image) shows it how I'd like it to be shown.

IE7:
Image

FF 2.0.0.11
Image

Firefox doesn't tell me of any errors or warnings in the error console, and the page almost validates (just need to turn & into &).

EDIT| Fixed the & thing.. page validates as HTML 4.01 Transitional. Opera 9.25 displays in the same manner as firefox.

Posted: Mon Dec 24, 2007 3:33 am
by VladSun
I've noticed some time ago that display property for table related HTML tags doesn't work as expected - try:

Code: Select all

function show(el)
{
   document.getElementById(el).style.display = '';
}

Posted: Mon Dec 24, 2007 3:40 am
by s.dot
Dude, that's a trip! That worked perfectly.
Thanks a bunch!

Posted: Tue Dec 25, 2007 2:58 am
by VladSun
You're welcome :)
Marry Christmas!

Posted: Tue Dec 25, 2007 3:06 pm
by Jonah Bron
Merry Christmas, folks. Merry Christmas. :wink:

Posted: Tue Dec 25, 2007 4:19 pm
by VladSun
PHPyoungster wrote:Merry Christmas, folks. Merry Christmas. :wink:
:P
"Весела Коледа" [ve'sela ko'leda] from Bulgaria ;)

Posted: Sat Dec 29, 2007 6:07 am
by JAB Creations
Here are a couple of scripts I use that might help you. Also nice to see you've updated your avatar. I couldn't tell it was you until I read your catch line. :wink: I'm not subscribed though if you want my input on this just message me. Have fun and good luck with finishing your site!

JavaScript Class Changer

Code: Select all

// Class Change
function change(id, newClass)
{
identity=document.getElementById(id);
identity.className=newClass;
}
JavaScript Class Changer - Example Function 1/2

Code: Select all

function show_sidebar() {change('side_id', 'side_class');
JavaScript Class Changer - Example Function 2/2

Code: Select all

function show_sidebar() {change('side_id', 'side_class1 side_class2 side_class3');
ID, Property, Value

Code: Select all

// setStyleById: given an element id, style property and
// value, apply the style.
// args:
// i - element id
// p - property
// v - value
//
function setstylebyid(i, p, v) {
var n = document.getElementById(i);
n.style[p] = v;
}
Function for ID, Property, Value

Code: Select all

function prompthideerror() {setstylebyid('prompts_error', 'display', 'none');}

Posted: Sat Dec 29, 2007 6:22 am
by arjan.top
@scottayy:
display:table-row-group is correct for td display

Posted: Tue Jan 01, 2008 7:02 am
by VladSun
arjan.top wrote:@scottayy:
display:table-row-group is correct for td display
Hey, thanks :)
Useful information ;)

http://www.w3.org/TR/REC-CSS2/tables.html

Posted: Tue Jan 01, 2008 7:28 am
by arjan.top
now i see i wrote the wrong one, so not so useful information ( :) ), it should be table-cell of course :oops: