Forum Moderators: open

Message Too Old, No Replies

removing stuff in div with javascript

         

dmmh

10:52 am on Feb 15, 2005 (gmt 0)

10+ Year Member



ello :)

I have a javascript which generates from a PHP/ mysql script a dynamic drop down menu, its inserted when someone presses a button. what I'd like is to make another button to remove the exact same drop down if someone presses another button. Can this be done? Any pointers?

eltreno

11:21 am on Feb 15, 2005 (gmt 0)

10+ Year Member



I can't remember the netscape layer/div syntax but this works in ie

get a browser sniffer code to work which browser and user code similer in teh function to what i have and this should work

try this in ie and it works fine

<html>
<head>
<script language="JavaScript">
<!--
function off(){
//need broswer sniffer so
//if (ie){
mydiv.style.visibility='hidden';
// } else{ //netscape code below
// document.mydiv.visibility='hidden';//I can't remember the netscape layer code google will help ;)
//}
}

function on(){
//if (ie){//etc
mydiv.style.visibility='visible';
}
//-->
</script>
</head>

<body>

<div id="mydiv">
<select name="something">
<option value="1">first</option>
<option value="2">second</option>
</select>
</div>
<br/><br/><br/><br/><br/>
<a href="javascript:on();">On</a><br>
<a href="javascript:off();">Off</a>

</body>
</html>

Bernard Marx

12:45 pm on Feb 15, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hmmm.

document.mydiv.visibility='hidden';

That style is only for Netscape 4 (1% ish now)
..and the property for Netscape 4 is

"hide"
, not
"hidden"
.

You'll need to use the

[color=brown]display[/color]
property anyway, else space will still be taken up. I take it that you don't actually need to remove the elements.

Come to think of it, if this is a scripted dropdown, then it's simply a matter of nullifying the event handler(s) that trigger it.

Is it possible to see the relevant code?

- Javascript used for menu
- HTML for menu (after it has been processed by PHP)

dmmh

12:59 pm on Feb 15, 2005 (gmt 0)

10+ Year Member



sure, brb with it

dmmh

1:11 pm on Feb 15, 2005 (gmt 0)

10+ Year Member



<script language="JavaScript" type="text/javascript">
<!--
var newGenre = "";
function genreAdd()
{
newGenre+='<select name="genre[]" size="1" class="menu">';
newGenre+='<option value="" selected>select</option>';
newGenre+='<option value="action">action</option>';
newGenre+='<option value="adventure">adventure</option>';
newGenre+='<option value="animation">animation</option>';
newGenre+='<option value="cartoon">cartoon</option>';
newGenre+='<option value="comedy">comedy</option>';
newGenre+='<option value="crime">crime</option>';
newGenre+='<option value="documentary">documentary</option>';
newGenre+='<option value="drama">drama</option>';
newGenre+='<option value="erotica">erotica</option>';
newGenre+='<option value="family">family</option>';
newGenre+='<option value="fantasy">fantasy</option>';
newGenre+='<option value="horror">horror</option>';
newGenre+='<option value="martial-arts">martial-arts</option>';
newGenre+='<option value="music">music</option>';
newGenre+='<option value="musical">musical</option>';
newGenre+='<option value="mystery">mystery</option>';
newGenre+='<option value="romance">romance</option>';
newGenre+='<option value="science-fiction">science-fiction</option>';
newGenre+='<option value="theathre">theathre</option>';
newGenre+='<option value="thriller">thriller</option>';
newGenre+='<option value="tv-series">tv-series</option>';
newGenre+='<option value="war">war</option>';
newGenre+="</select><br/>";
document.getElementById('container').innerHTML = newGenre;
}
-->
</script>

cant post after its been processed by PHP, as those are simply hidden form fields, the menu is dynamic (one is hardcoded, others get added by clicking the following button, into a div with id 'container')
and since its javascript, only one menu will ever show up in the source code ;)

<input type="button" value="+" onClick="genreAdd()" title="add genre" class="postbuttons">

I want to remove the exact same menu as one can insert with + button

Bernard Marx

4:21 pm on Feb 15, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



___.innerHTML = '';

?

eltreno

4:47 pm on Feb 15, 2005 (gmt 0)

10+ Year Member



Think innerHTML isn't supported by netscape is it?

dmmh

5:08 pm on Feb 15, 2005 (gmt 0)

10+ Year Member




Think innerHTML isn't supported by netscape is it?

works fine in NS 7.1, Mozilla FF, and IE

I dont see the problem?

Bernard Marx

8:14 pm on Feb 15, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Yes, innerHTML is an IE-ism that is now supported widely, but not 100% universally. I sometimes wonder whether it's common appearance is a complacency developed in Javascript forums (that seem to have their own logic).

It's worth pointing out that strict browsers in the strictest XHTML mode only obey innerHTML as a read-only property.

Isn't it possible to have the PHP write the SELECT and all the OPTIONs, and set its display to 'none'? Switching the display would be much simpler.

dmmh

9:56 pm on Feb 15, 2005 (gmt 0)

10+ Year Member



well, this is for movie genres....a movie can have at least one genre, but in theory it can have endless amounts of genres.

If you know a way I can dynamically submit this form with - 1 to unknown- nr of genres, I'd like to hear it. And it needs to be able to be added dynamically via a button, as I do know

dmmh

9:58 pm on Feb 15, 2005 (gmt 0)

10+ Year Member



I dont care much for compatibility, I dont have the time to waste on getting everything 100% compatible, Ill settle for 95% of the browser market. Which I think Ive got covered now :)
All I need is for someone with Safari to run a test on my site once its done and Im set :)

dmmh

2:07 pm on Feb 16, 2005 (gmt 0)

10+ Year Member



bump?

Bernard Marx

2:23 pm on Feb 16, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I want to remove the exact same menu as one can insert with + button

(As previously suggested) Set the divs innerHTML to '' - an empty string.

dmmh

12:59 pm on Mar 7, 2005 (gmt 0)

10+ Year Member



ofcourse this will not work, as this will remove everything in the div, I just want to remove one genre select menu, not all

Bernard Marx

2:28 pm on Mar 7, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Look at the W3C DOM method, removeChild()

dmmh

5:54 pm on Mar 11, 2005 (gmt 0)

10+ Year Member



mmm, thx :)