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

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

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

Post 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.
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Post 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 = '';
}
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

Dude, that's a trip! That worked perfectly.
Thanks a bunch!
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Post by VladSun »

You're welcome :)
Marry Christmas!
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
Jonah Bron
DevNet Master
Posts: 2764
Joined: Thu Mar 15, 2007 6:28 pm
Location: Redding, California

Post by Jonah Bron »

Merry Christmas, folks. Merry Christmas. :wink:
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Post by VladSun »

PHPyoungster wrote:Merry Christmas, folks. Merry Christmas. :wink:
:P
"Весела Коледа" [ve'sela ko'leda] from Bulgaria ;)
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post 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');}
User avatar
arjan.top
Forum Contributor
Posts: 305
Joined: Sun Oct 14, 2007 4:36 am
Location: Hoče, Slovenia

Post by arjan.top »

@scottayy:
display:table-row-group is correct for td display
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Post 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
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
arjan.top
Forum Contributor
Posts: 305
Joined: Sun Oct 14, 2007 4:36 am
Location: Hoče, Slovenia

Post by arjan.top »

now i see i wrote the wrong one, so not so useful information ( :) ), it should be table-cell of course :oops:
Post Reply