JavaScript - How To Appendchild A Hidden Value?

I am making a web page, and as part of it I have a table that the user can add rows to. My code works in FF and Chrome, but IE is broken.
Code:

function addrow() {
              var example=document.getElementById("new");
              var addHere=document.getElementById("ticketTable");
              var node= example.cloneNode(true);
              node.id="added";
              addHere.appendChild(node);
          }

This code is called when a button is clicked. new is the ID of the row I am adding, and ticketTable is the ID of the table I am adding to. Help please!

I'm not a JS programmer, I stumble around.
I have a web page that uses:

d = document.createElement("script");
d.type = "text/javascript";
d.src = "/var/www/html/UpDist.php";
return (document.body.appendChild(d)); <-- what I want to do

UpDist.php returns a value that I need to continue and I can't get the above code to work - UpDist runs, the return value doesn't.

Thanks
Chuck

Hey guys, First post i have searched the web a lot on this subject and am still confused so i thought id try and get some help from the experts, the following function works great in every browser except IE, the line of code that breaks in IE is highlighted in red. I have read some topics about this not working in IE and saw some workarounds with innerhtml or something but i don't really understand. Can someone please take some time to figure out a fix for this?

Code:

function displayStream(live_id) {

		var stream_out = document.getElementById("stream_out");
		for (var j = 0; j < stream_out.childNodes.length; j++) {
			stream_out.removeChild(stream_out.childNodes[j]);
		}
		var object = document.createElement("object");     		
                object.setAttribute("height", "475");
		object.setAttribute("width", "998");
		
		var param = document.createElement("param");
		//param.setAttribute("name", "movie");
                param.name = 'movie';
		param.setAttribute("value", "http://www.own3d.tv/livestream/" + live_id);
		object.appendChild(param);
		
		var param = document.createElement("param");
		param.setAttribute("name", "allowfullscreen");
		param.setAttribute("value", "true");
		object.appendChild(param);
		
		var param = document.createElement("param");
		//param.setAttribute("name", "wmode");
                param.name = 'wmode';
		param.setAttribute("value", "transparent");
		object.appendChild(param);

		var embed = document.createElement('embed');
		embed.setAttribute("type", "application/x-shockwave-flash");
		embed.setAttribute("src", "http://www.own3d.tv/livestream/" + live_id +";autoplay=true");

		embed.setAttribute("allowfullscreen", "true");
		embed.setAttribute("wmode", "transparent");
		embed.setAttribute("height", "475");
		embed.setAttribute("width", "998");
		 object.appendChild(embed); 

		stream_out.appendChild(object);
	}

I have:

Windows server 2008 enterprise edition
Apache 2.2.15 for windows
Netbeans 6.7.1
Glassfish 2.1
Drupal 6.17 (that by default
PostgreSQL 8.4 administrated through pgAdmin 1.10.0 (to store Netbeans elaborated data)
Firefox and Chrome give me the same problem, tools used are even Httpfox and Fiddler2

Problem:

I have a page where the user has to insert his own data, there are 2 types of data, Atributos and Datos. Atributos are on a atributos_user table in PostgreSQL and has 49 columns, Datos on datos_user, that has 119 columns. So when I clic on save, the js file on the page does:

Code:

function guardaTodo(){

var retvalue;

retvalue = guardarMisDatos();
if(retvalue == false) { return retvalue; }
retvalue = guardarAtributos();

}

The function guardarAtributos works fine, so I guess that this one above is written correctly. The function guardarMisDatos is written the same way, and pretends to collect all the data through Netbeans. so whenever I click on the save button, i get in the web console this:



The function guardarMisDatos does like this:

Code:

var param ="&usuario="+usuario+"&nivel="+nivel+gano+porc_gano+gasto+porc_gasto+tengo+porc_tengo+debo+     porc_debo+plazo_debo;
 var s = document.createElement("script");
 s.type = "text/javascript"; s.async = true;
 s.src = server_direction +"setMisDatos?callback=respuestaGuardarMisDatos&param="+encodeURIComponent(param);
 var h = document.getElementsByTagName("script")[0];
 h.parentNode.insertBefore(s, h); //or h.appendChild(s);

where every variable of the "param" is taken like this:

Code:

var plazo_debo_casa1 = (getValor("plazo_debo_casa1"));
var plazo_debo_casa2 = (getValor("plazo_debo_casa2"));
var plazo_debo_casa3 = (getValor("plazo_debo_casa3"));
var plazo_debo_prestamo1 = (getValor("plazo_debo_prestamo1"));
var plazo_debo_prestamo2 = (getValor("plazo_debo_prestamo2"));
var plazo_debo_prestamo3 = (getValor("plazo_debo_prestamo3"));
var plazo_debo ="&plazo_debo_casa1="+plazo_debo_casa1+"&plazo_debo_casa2="+plazo_debo_casa2+"&plazo_debo_casa3="+plazo_debo_casa3+"&plazo_debo_prestamo1="+plazo_debo_prestamo1+"&plazo_debo_prestamo2="+plazo_debo_prestamo2+"&plazo_debo_prestamo3="+plazo_debo_prestamo3;

so anytime I call the function, i mean, i click on save, the browser fires:

Code:

http://www.mirodinero.com:8080/mirodinero-war/setMisDatos?callback=respuestaGuardarMisDatos&param=%26usuario%3DIsa%20Mirodinero%26nivel%3D109%26gano_sal_neto%3D211113.45%26gano_sal_prof%3D234480%26gano_monet%3D0%26gano_renta_fija%3D0%26gano_renta_vble%3D0%26gano_inmuebles%3D6750%26gano_otros%3D23730%26gano_otros_ing%3D411125%26porc_gano_monet%3D0%26porc_gano_rentaf%3D0%26porc_gano_rentav%3D0%26porc_gano_inm%3D2%26porc_gano_otros%3D2%26porc_gano_otros_ing%3D1%26gasto_casa1%3D1306.46%26gasto_casa2%3D2402.38%26gasto_casa3%3D3999.57%26gasto_prestamo1%3D93475.58%26gasto_prestamo2%3D7325.88%26gasto_prestamo3%3D34090.9%26gasto_tarjetas%3D29443.2%26gasto_ibi%3D5670%26gasto_imp_otros%3D6780%26gasto_seg_inm%3D1320%26gasto_seg_pens%3D3451.22%26gasto_seg_vida%3D330%26gasto_seg_plan%3D34230%26gasto_seg_medico%3D1220%26gasto_seg_coche%3D20%26gasto_luz%3D620%26gasto_agua%3D4550%26gasto_gas%3D320%26gasto_telef_f%3D320%26gasto_telef_m%3D350%26gasto_internet%3D20%26gasto_tv%3D3450%26gasto_hogar%3D20%26gasto_comida%3D20%26gasto_cenas_copas%3D20%26gasto_viajes%3D20%26gasto_vacaciones%3D220%26gasto_mobiliario%3D220%26gasto_ropa%3D2320%26gasto_transp%3D20%26gasto_otros%3D620%26gasto_colegios%3D240%26gasto_univ%3D340%26gasto_master%3D2230%26gasto_otros_gastos%3D73433%26porc_gasto_tarjetas%3D0%26porc_gasto_ibi%3D0%26porc_gasto_trib%3D0%26porc_gasto_seg_inm%3D0%26porc_gasto_seg_pens%3D0%26porc_gasto_seg_vida%3D2%26porc_gasto_seg_plan%3D2%26porc_gasto_seg_med%3D0%26porc_gasto_seg_coche%3D0%26porc_gasto_sum_luz%3D2%26porc_gasto_sum_agua%3D2%26porc_gasto_sum_gas%3D0%26porc_gasto_sum_teleff%3D0%26porc_gasto_sum_telefm%3D0%26porc_gasto_sum_int%3D0%26porc_gasto_sum_tv%3D0%26porc_gasto_nivel_hogar%3D0%26porc_gasto_nivel_comida%3D0%26porc_gasto_nivel_cenas%3D0%26porc_gasto_nivel_viajes%3D0%26porc_gasto_nivel_vacac%3D0%26porc_gasto_nivel_mob%3D0%26porc_gasto_nivel_ropa%3D0%26porc_gasto_nivel_transp%3D0%26porc_gasto_nivel_otros%3D0%26porc_gasto_colegios%3D2%26porc_gasto_univ%3D0%26porc_gasto_master%3D0%26porc_gasto_otros_gastos%3D23%26tengo_casa1%3D1231.11%26tengo_casa2%3D10000%26tengo_casa3%3D22240%26tengo_otras%3D23560%26tengo_monetario%3D1212.34%26tengo_planpensiones%3D23230%26tengo_otros%3D23330%26porc_tengo_casa1%3D1%26porc_tengo_casa2%3D0%26porc_tengo_casa3%3D2%26porc_tengo_otras%3D0%26porc_tengo_monet%3D0%26porc_tengo_plan%3D0%26porc_tengo_otros%3D0%26debo_casa1%3D4340%26debo_casa2%3D23450%26debo_casa3%3D23430%26debo_prestamo1%3D23330%26debo_prestamo2%3D6871.11%26debo_prestamo3%3D11340%26debo_tarjetas%3D61340%26porc_debo_casa1%3D30%26porc_debo_casa2%3D10%26porc_debo_casa3%3D12%26porc_debo_prestamo1%3D1%26porc_debo_prestamo2%3D12%26porc_debo_prestamo3%3D1%26porc_debo_tarjetas%3D4%26plazo_debo_casa1%3D230%26plazo_debo_casa2%3D450%26plazo_debo_casa3%3D122%26plazo_debo_prestamo1%3D3%26plazo_debo_prestamo2%3D12%26plazo_debo_prestamo3%3D4

and doesn't work on the first click, or after 30 seconds idle, like browsing another tab, etc.

Tried Solutions:

Tried changing h.appendChild(s) to parentNode.insertBefore(s, h) -> works better but not enough
Change the order of guardaTodo exchanging the 2 functions -> guardarMisDatos never works
Included httpd-default.conf to the httpd.conf file, setting this parameters:

Timeout: The number of seconds before receives and sends time out. Timeout 30000

KeepAlive: Whether or not to allow persistent connections (more than one request per connection). Set to "Off" to deactivate. KeepAlive On

MaxKeepAliveRequests: The maximum number of requests to allow during a persistent connection. Set to 0 to allow an unlimited amount. We recommend you leave this number high, for maximum performance. MaxKeepAliveRequests 0

KeepAliveTimeout: Number of seconds to wait for the next request from the same client on the same connection. KeepAliveTimeout 500

Divide the guardarMisDatos function into more pieces, like saving only part of the Datos -> it works fine on that columns that i'm saving, but deletes all remaining columns

What I'm searching for:

I have been searching what kind of setting I should change in Apache httpd.conf to enable a connection that doesn't timeout and opens on the right time. My Apache httpd.conf is of the kind that includes other httpd-*.conf files.

Findings:

From httpfox i get NS_ERROR_NET_RESET, that occurs on the first click to the "save" button, or after a while that i don't view that page. I counted how much time shall I stay idle to "lose" the connection (and get the same error), it's more or less 30 seconds. So I even checked with fiddler2, and get this kind of message:

"ReadResponse() failed: The server did not return a response for this request."

Observation (Similar case):

I've found this question to have a problem similar to mine, but I already talked with my hosting service and they told me that there is no firewall preventing connections.



Solution:

I don't have a solution, it's been weeks now, and probably nobody helped me because the stuation was not well explained, that's why now i wrote it down with more details as possible. I hope that now this is well explained and to get some help.

i'm working with a javascript on a drupal website, but the saving function seems to work only as soon as i click 2 times on the "save" button. the code that fires the function is:

Code:

var param ="&usuario="+usuario+"&nivel="+nivel+gano+porc_gano+gasto+porc_gasto+tengo+porc_tengo+debo+     porc_debo+plazo_debo;
var s = document.createElement("script");
s.type = "text/javascript"; s.async = true;
s.src = server_direction +"setMisDatos?callback=respuestaGuardarMisDatos&param="+encodeURIComponent(param);
var h = document.getElementsByTagName("script")[0];
h.parentNode.insertBefore(s, h); //or h.appendChild(s);

the chrome console tells me the error is in the last line i copied, but i don't undertand what kind of error it is.

using chrome console (specifically the "network" one), i see that it's written in red, status/text "failed", type "undefined" size/content "13 B / 0 B"; when it works it's: status/text "200/OK", type "text/json", size/content "256 B/ 38B". i'm not an expert with this, is there some more information that could be useful?

the code fires a netbeans function, that stores data to a postgresql database, so i have like 100 variables that has to be stored when i click on the "save button".

Actually before i put parentNode.insertBefore, there used to be appendChild(s), but then i found out this algorithm from google analytics, which seems to be working better than the previous one. Having said that, i can tell you that the GET works after the first time i click perfectly, with some weird things happening, like if i browse another tab for a while, then go back to the page, and click on save, it won't work again (same error).

The variables are written like this:

Code:

var plazo_debo_casa1 = (getValor("plazo_debo_casa1"));
var plazo_debo_casa2 = (getValor("plazo_debo_casa2"));
var plazo_debo_casa3 = (getValor("plazo_debo_casa3"));
var plazo_debo_prestamo1 = (getValor("plazo_debo_prestamo1"));
var plazo_debo_prestamo2 = (getValor("plazo_debo_prestamo2"));
var plazo_debo_prestamo3 = (getValor("plazo_debo_prestamo3"));
var plazo_debo ="&plazo_debo_casa1="+plazo_debo_casa1+"&plazo_debo_casa2="+plazo_debo_casa2+"&plazo_debo_casa3="+plazo_debo_casa3+"&plazo_debo_prestamo1="+plazo_debo_prestamo1+"&plazo_debo_prestamo2="+plazo_debo_prestamo2+"&plazo_debo_prestamo3="+plazo_debo_prestamo3;

and then together in the "param" variable. Is it clearer now?

i tried to copy

document.head.appendChild(s);
instead of parentNode.insertBefore(s,h), but it still behaves the same way.

Still not any suggestions? This is part of the javascript file loading on my page, and since the function setMisDatos is in netbeans and it works correctly as soon as it's fired (at least, that's what i notice after the first click), i don't think it's worth copying part of it here, right? are there maybe too many variables for the GET method? is there a way to check GET errors? i'm sorry for not being an expert but i would really like some help here.

Hi
I discovered something weird that happend to me when trying to add a javascript created table to the document.body.

Basically it doesn't add it in IE, but works fine in FF.

Actually it does add it in IE, but only shows up if I add a <br/> later in a new statement...

What?!?!

try my code to see what is going on. (works fine in FF, does bad thing in IE)

I tried to narrow the code i was working with down to basics and still have the glitch happen so maybe it's just something wrong with this code, but i couldn't pinpoint it.

Also, it's only when i do document.body.appendChild(),
not document.body.innerHTML += entireMassiveElement.innerHTML;

I need it to work in both browsers with the appendChild() method, because innerHTML is much slower.

Any advice appreciated! Thanks!


Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Interace v1.0</title>
<style type="text/css">
/******************
* --Panel Style
******************/

.panel
{
}
.panel table td {padding: 0px;}

.panel_corner
{
	background-color: #00c0ff;
	background-repeat: no-repeat;
	width: 3px;
	height: 3px;
}
.panel_sideX	{height: 3px; background-color: #00c0ff; background-repeat: repeat-x;}
.panel_sideY	{width: 3px; background-color: #00c0ff; background-repeat: repeat-y;}

.panel_topLeft 	{background-position: 0px 0px;}
.panel_topRight {background-position: -3px 0px;}
.panel_bottomLeft  {background-position: -0px -3px;}
.panel_bottomRight {background-position: -3px -3px;}

.panel_top 	{background-position: -3px -6px;}
.panel_right 	{background-position: -3px 0px;}
.panel_left  	{background-position: 0px 0px;}
.panel_bottom 	{background-position: -3px -9px;}

.panel_main
{
	background-color: #00c0ff;
}

.panel_titlebar
{
	color: #ffffff;
	font-family: verdana;
	font-size: 10pt;
	padding: 3px;
	padding-top: 0px;
	overflow: hidden;

	/*
	display: none;
	*/
}
.panel_title
{
	float: left;
	height: 18px;
	overflow: hidden;
}
.panel_buttons
{
	float: right;
}
.panel_toolbar
{
	background-color: #444444;
	color: #eeeeee;
	font-family: verdana;
	font-size: 10pt;
	padding: 3px;
	overflow: hidden;

	
	display: none;
	
}
.panel_content
{
	overflow: auto;
	font-family: arial;
	color: #eeeeee;
	font-size: 7pt;
	font-weight: bold;

	padding: 10px;

	border: 1px inset #cccccc;
	background-color: #444444;

}

</style>
<!--///////////////////////////////////-->

<script type="text/javascript">
function makeElement()
{
	var layout = document.createElement("table");	//the table that is the basic layout
	var top = document.createElement("tr");
	var tl = document.createElement("td");
	top.appendChild(tl);
	var tc = document.createElement("td");
	top.appendChild(tc);
	var tr = document.createElement("td");
	top.appendChild(tr);
	
	var middle = document.createElement("tr");
	var ml = document.createElement("td");
	middle.appendChild(ml);
	var mc = document.createElement("td");
	middle.appendChild(mc);
	var mr = document.createElement("td");
	middle.appendChild(mr);
	
	var bottom = document.createElement("tr");
	var bl = document.createElement("td");
	bottom.appendChild(bl);
	var bc = document.createElement("td");
	bottom.appendChild(bc);
	var br = document.createElement("td");
	bottom.appendChild(br);
	
	layout.appendChild(top);
	layout.appendChild(middle);
	layout.appendChild(bottom);
	
	layout.style.borderCollapse = "collapse";

	tl.className = "panel_corner panel_topLeft";
	tc.className = "panel_sideX panel_top";
	tr.className = "panel_corner panel_topRight";
	tl.style.padding = "0px";
	tc.style.padding = "0px";
	tr.style.padding = "0px";
	
	ml.className = "panel_sideY panel_left";
	mc.className = "";
	mr.className = "panel_sideY panel_right";
	ml.style.padding = "0px";
	mc.style.padding = "0px";
	mr.style.padding = "0px";
	
	bl.className = "panel_corner panel_bottomLeft";
	bc.className = "panel_sideX panel_bottom";
	br.className = "panel_corner panel_bottomRight";
	bl.style.padding = "0px";
	bc.style.padding = "0px";
	br.style.padding = "0px";
	
	//-- Set up the cursors for the bottom, right, and bottomright sides to resize
	mr.style.cursor = "e-resize";
	bc.style.cursor = "s-resize";
	
	// --Now create the internal structure, titlebar, toolbar, content area
	var main = document.createElement("div");
	
	var titlebar = document.createElement("div");
	var toolbar = document.createElement("div");	
	var content = document.createElement("div");
	content.innerHTML = "success!";
	main.appendChild(titlebar);
	main.appendChild(toolbar);
	main.appendChild(content);
	
	mc.appendChild(main);

	main.className = "panel_main";
	titlebar.className = "panel_titlebar";
	toolbar.className = "panel_toolbar";
	content.className = "panel_content";
	
	//-- create the titlebar internals, title, buttons, cleardiv
	var title = document.createElement("div");
	var buttons = document.createElement("div");
	var clear = document.createElement("div");
	titlebar.appendChild(title);
	titlebar.appendChild(buttons);
	titlebar.appendChild(clear);
	
	clear.style.clear = "both";
	
	title.className = "panel_title";
	buttons.className = "panel_buttons";
	
	main.style.width = "200px";
	return layout;
}


function go(select)
{
	var stuff = makeElement();
	
	if(select == 1)
	{
		//-- Add everything to the container
		document.body.appendChild(stuff);
	}
	else if (select == 2)
	{
		//-- Add everything to the container
		//layout is a table, but innerHTML only returns the inner, so i just added on the outer tags.
		document.body.innerHTML += ('<table cellpadding="0" cellspacing="0">' + stuff.innerHTML + '</table>');
	}
	//document.body.innerHTML += "<br/>";
}
</script>

</head>
<body>
<input type="button" value="test append Element" onclick="go(1);"/><input type="button" value="test innerHTML add" onclick="go(2);"/>
<body>
</html>

Please delete, someone had a retard moment

Hello,

I was wondering why my code is perfectly working in Firefox, but does not work in Internet Explorer at all:

Code:

<script language="javascript">
<!--
document.body.onload=document.body.appendChild(document.getElementById('testdiv'));
 --> 
</script>

I don't get any error messages, the div is just not showing how it is supposed to show with body as parent. Any suggestions?

Thanks

Hi, I'm having trouble with some flash players that don't abide by the style attribute of the div they're created in using Javascript. When the flash-players' source is hard-coded into the page source they render fine, but the more players, the more bloat as you can see in the source of the original page. Any help?

Example:
http://mcbryanmd.webs.com/Playertest.htm
Original Page with old code:
http://mcbryanmd.webs.com/
The problem code:
Code:

<script type="text/javascript">
  function clv(obj){
	var strst="http://static.livestream.com/scripts/playerv2.js?channel=";
	var strnm=obj;
	var strnd="&layout=playerEmbedWide&backgroundColor=0x000000&backgroundAlpha=.5&backgroundGradientStrength=0&chromeColor=0x000000&headerBarGlossEnabled=true&controlBarGlossEnabled=true&chatInputGlossEnabled=true&uiWhite=true&uiAlpha=0.5&uiSelectedAlpha=1&dropShadowEnabled=true&dropShadowHorizontalDistance=10&dropShadowVerticalDistance=10&paddingLeft=0&paddingRight=0&paddingTop=0&paddingBottom=0&cornerRadius=3&backToDirectoryURL=null&bannerURL=null&bannerText=null&bannerWidth=320&bannerHeight=50&showViewers=true&embedEnabled=false&chatEnabled=true&onDemandEnabled=false&programGuideEnabled=false&fullScreenEnabled=false&reportAbuseEnabled=false&gridEnabled=false&initialIsOn=true&initialIsMute=true&initialVolume=10&contentId=null&initThumbUrl=null&playeraspectwidth=4&playeraspectheight=3&mogulusLogoEnabled=false&width=100%&height=100%&wmode=window";
	var clsrc=strst + strnm + strnd;
	var pstrm=document.createElement('script');
	document.getElementById('pcont').appendChild(pstrm);
	pstrm.setAttribute("type","text/javascript");
	pstrm.setAttribute("src", clsrc);
}
</script>

<button onclick="clv('random0')" onmouseover="this.style.color='#00FF00'"onmouseout="this.style.color='#FFFFFF'">random0</button>
<button onclick="clv('random1')" onmouseover="this.style.color='#00FF00'"onmouseout="this.style.color='#FFFFFF'">random1</button>
<button onclick="clv('random2')" onmouseover="this.style.color='#00FF00'"onmouseout="this.style.color='#FFFFFF'">random2</button>

<div id="pcont" style="margin-left:250px;display:;position:fixed;top:40px;right:0px;left:0px;bottom:0px;background-color:#CCCCCC;"></div>

Hey guys! How are ya?


Gettin' right to the point, I need a help!

I already created a javascript code to hide my div when click on close "[x]". What I need to do is get it movin' around the website

here's the code:

it's between <head></head>
Code:

<script language=javascript type='text/javascript'>
function hidediv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideShow').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.hideShow.visibility = 'hidden';
}
else { // IE 4
document.all.hideShow.style.visibility = 'hidden';
}
}
}

function showdiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideShow').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.hideShow.visibility = 'visible';
}
else { // IE 4
document.all.hideShow.style.visibility = 'visible';
}
}
}
</script>

and it's between <body></body>
Code:

<div id="hideShow">
<img src="../imagens/tela01CQ_07.jpg" alt="teste"/><a href="javascript:hidediv()">[x]</a></div>

and it's in CSS Code:

#hideShow {
	position:absolute;
	margin: 300px 110px;
	}

thx!

After searching the web most of the day, nothing has resolved this issue:

Code:

<!-- ALERT IS NEVER HIT -->
<html>
	<input type="hidden" id="info" name="info" value="testInformation"/>
	<script type="text/javascript">
		var me = document.getElementById('info').value;
		alert(me);
	</script>
</html>

Code:

<!-- ALERT SAYS "null" -->
<html>
	<input type="hidden" id="info" name="info" value="testInformation"/>
	<script type="text/javascript">
		var me = document.getElementById('info');
		alert(me);
	</script>
</html>

Code:

<!-- WORKS GREAT, BUT I NEED THE INPUT FIELD HIDDEN -->
<html>
	<input type="text" id="info" name="info" value="testInformation"/>
	<script type="text/javascript">
		var me = document.getElementById('info').value;
		alert(me);
	</script>
</html>

Any idea how I can keep the input value "hidden" and have javascript still see the value? And yes, I've even tried using the "defer" method.

hello,

This seems very basic, but I am running into a complication. What I would like to do is check if a certain div is displayed or hidden (really doesnt matter which) then set a map zoom level based upon that.

here is my current function.
function closeDirections(){
gdir.clear();


if(document.getElementById("river").style.display="none"){
map.setZoom(16);
hideID('river');
showID('main');
}
if(document.getElementById("main").style.display="none"){
map.setZoom(12);
hideID('main');
showID('river');
}

}

Also here is a link to my map, just in case. map

I have tried several variations, but from what I can tell with every instance, it only examines the first and never considers the second "if".

I thought to rememdy this issue by using if/else...same issue.

The only thing I could think is a nested if statements, but I am not sure what to use as a parent if.

I have searched for a while, but cannot seem to find something like an .is_hidden().

Something that I could see if its true/false.

Any help would be very much appreciated.

Hi all

I believe this to be a JS quesiton, but perhaps there is something here of CSS too?

I have an "ecard" which is:

- a <div id="outer_ecard"> wrapping an <iframe>...
- is hidden by default (via a JS function that fires onload of the parent doc), ..
- that gets its display and visibility turned on when the user clicks a link in the parent doc, ...
- and then gets its display and visibility turned off again via a call to that same JS function in the parent doc that hid it in the first place by default.

here is just the relevant snip of the hiding JS function -
Code:

elementToSet.style.display = "none";
elementToSet.style.visibility = "hidden";

everything works fine, *BUT* this issue:
after the <div> disappears (the 2nd time, when the above snip is triggered in the iframe's parent via an onload event in the iframe doc)... then hyperlinks (in the parent file) that are geographically positioned underneath the <div id="outer_ecard"> do not work (i.e. they still think the ecard div is sitting on top of them (z-index:1).

Can anyone advise me here? I need the links underneath the ecard to behave as though that div was never there.

Thanks!
-Govinda

Hello. The link below is the result of a product search on a website. It displays 2 results. However, the actual results (picture & information) that are displayed on the web page are not present in the "Page Source".

For example, if you search the page source for the string '860723' (which is one of the product numbers visible on the web page) it is not there. What is going on here? It looks to me like dummy images & information in the HTML are first loaded by the browser, and then that dummy info gets replaced by the real information via a javascript function. Is that what's going on?

http://www.lightsamerica.com/metro/s...mber:SL9469-8;

I'm trying to retrieve that information by downloading the source in my PHP program. The problem is that the information I want isn't present in the source. It stands to reason that the information is somehow being sent to the browser because I can see it... any ideas?


Thanks for your time,
-Scott

My website contains a ton of hidden divs. I thought this would make everything easier for the user because now they can stay on one page and view tons of content but it is making my page load very slowly. Is there a way to not load the pages hidden content until the user clicks the link and makes it visible? I see various tutorials online but I am having trouble learning how to translate that to my site. So again this content is hidden, and an onclick makes it visible, but I would like the onclick to make it visible and load for the first time. Thank you for reading, link to site and code below.

Source: By clicking the info or photo tabs you will see the toggle for hidden divs

Code for my tabs:
PHP Code:
<?php if( $page <= 1 and !$public ) { ?>
<div id="mngl-profile-tab-control">
<ul>
  <li id="mngl-board-tab-button" class="dark"><a href="javascript:mngl_set_active_tab('board');"><span><?php _e('Board', 'mingle'); ?></span></a></li>
  <li id="mngl-info-tab-button"><a href="javascript:mngl_set_active_tab('info');"><span><?php _e('Info', 'mingle'); ?></span></a></li>
  <li id="mngl-log-tab-button"><a href="javascript:mngl_set_active_tab('log');"><span><?php _e('Log', 'mingle'); ?></span></a></li>
<li id="mngl-fav-tab-button"><a href="javascript:mngl_set_active_tab('fav');"><span><?php _e('Favorites', 'mingle'); ?></span></a></li>
<li id="mngl-display-photo-tab-button"><a href="javascript:mngl_set_active_tab('display-photo');"><span><?php _e('Photos', 'mingle'); ?></span></a></li>
<li id="mngl-video-tab-button"><a href="javascript:mngl_set_active_tab('video');"><span><?php _e('Videos', 'mingle'); ?></span></a></li>

</ul>
</div>
<?php } ?>


Code for one of the tabs content. The class mngl-hidden is just a display:none
PHP Code:
<div id="mngl-fav-tab" class="mngl-profile-tab mngl-hidden">
<div style="color:#171717; font-weight:bold;"><?php echo  $user->first_name . "'s Favorites >> For Motivational Posts You Enjoy"?></div>

<?php
    //require_once(MNGL_MODELS_PATH . "/MnglUser.php");
    foreach ($fav_posts as $fav_post)
    {
      $author = MnglUser::get_stored_profile_by_id($fav_post->author_id);
      $owner  = MnglUser::get_stored_profile_by_id($fav_post->owner_id);
      
      if($author and $owner)
        $this->display_board_post($fav_post,$public);
    }
    /*$this->display_board_post('5705',$public);*/
    //echo count($fav_posts).'--'.$page_size;
  ?>
  <?php if( count($fav_posts) >= $page_size ) { ?>
   <!-- <div id="mngl-older-posts"><a href="javascript:mngl_show_older_posts( <?php echo ($page + 1) . ",'" . (($public)?'activity':'boards') . "','" . (($public)?$mngl_user->screenname:$owner->screenname) . "'"; ?> )"><?php _e('Show Older Posts', 'mingle'); ?></a></div>-->
  <?php } ?>

</div>

Javascript that Sets Active Tab
Code:

function mngl_set_active_tab( tab )
{
  jQuery('#mngl-profile-tab-control li').removeClass('mngl-active-profile-tab');
  jQuery('#mngl-' + tab + '-tab-button').addClass('mngl-active-profile-tab');
  jQuery('.mngl-profile-tab').hide();
  if((tab != 'board') && (tab != 'fav')){
  	jQuery('.mngl-board-post').hide();
  } else {
  	jQuery('.mngl-board-post').show();
  }
  jQuery('#mngl-' + tab + '-tab').show();
}