bloccare eventi pagina fino al caricamento completo

**stiffa** · 09-02-2006, 16:35

ciao.

Spero che qualcuno mi sappia aiutare.
Ho un menu a linguettem fatto in js e css...
Il problema e' che devo impedire di cambiar linguatte finche tutto il contenuto della pagina sia effettivamente caricato....
Altrimenti? Altrimenti se apro la pagina e clikko subito la linguetta 4 mi trovo dentro il contenuto della linguetta 1.

Se copiate il codice avrete il menu, con il codice essenziale...
Spero abbiate capito e che qualcuno possa aiutarmi...

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Terminal Gold</title>
<STYLE>
.conts {
	VISIBILITY: hidden
}
.tab {
	BORDER-LEFT: #e0e0e0 thin solid; BORDER-RIGHT: gray thin solid; BORDER-TOP: #e0e0e0 thin solid; FONT-FAMILY: Verdana; FONT-SIZE: 8pt; FONT-WEIGHT: normal; TEXT-ALIGN: center
}
.selTab {
	BORDER-LEFT: #000080 thin solid; BORDER-RIGHT: #000080 thin solid; BORDER-TOP: #000080 thin solid; FONT-FAMILY: Verdana; FONT-SIZE: 8pt; FONT-WEIGHT: bold; TEXT-ALIGN: center
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script language = "javascript" type="text/javascript">


window.onload=function()
{
	init();
}

//sets the default display to tab tab
function init(){ 
	document.getElementById("tabContents").innerHTML = document.getElementById("t1Contents").innerHTML; 
}


//a public function that the container uses to pass in values for the card containers 
function public_Contents(contents1, contents2, contents3, contents4){ 
document.getElementById("t1Contents").innerHTML = contents1; 
document.getElementById("t2Contents").innerHTML = contents2; 
document.getElementById("t3Contents").innerHTML = contents3; 
document.getElementById("t4Contents").innerHTML = contents4;
document.getElementById("t5Contents").innerHTML = contents5;
init(); 
} 

//this is the tab switching function 
var currentTab; 
var tabBase; 
var firstFlag = true; 

function changeTabs(tabID,id){ 
	if(firstFlag == true){ 
	currentTab = document.getElementById("t1"); 
	tabBase = document.getElementById("t1base"); 
	firstFlag = false; 
	} 
	if(document.getElementById(tabID).className == "tab"){ 
	currentTab.className = "tab"; 
	tabBase.style.backgroundColor = "white"; 
	currentTab = document.getElementById(tabID); 
	tabBaseID = currentTab.id + "base"; 
	tabContentID = currentTab.id + "Contents"; 
	tabBase = document.getElementById(tabBaseID); 
	tabContent = document.getElementById(tabContentID); 
	currentTab.className = "selTab"; 
	tabBase.style.backgroundColor = ""; 
	document.getElementById("tabContents").innerHTML = tabContent.innerHTML; 

	} 
} 
</SCRIPT>
</head>
<body leftmargin="0" topmargin="0"  marginheight="0" marginwidth="0" scrolling = "no">

	<table class="tabbedDialog"  align = "left" valign="top" cellpadding="0" cellspacing="0"> 
		<tr>
			<td valign ="top" height="30" cellspacing="2" >
				<table width="100%" align="left"  >
					<tr> 
						<td class="selTab" onclick="changeTabs('t1','t1')"  height="25" id="t1" >Tab1</td> 
						<td class="tab" onclick="changeTabs('t2','t2')"   id="t2">tab2</td> 
						<td class="tab" onclick="changeTabs('t3','t3')"   id="t3">tab3</td> 
						<td class="tab" onclick="changeTabs('t4','t4')"  id="t4">tab4</td>
						<td class="tab" onclick="changeTabs('t5','t5')"  id="t5">tab5</td> 
					</tr> 
					<tr> 
						<td id="t1base" style="BORDER-LEFT: gray thin solid; HEIGHT:1px; "  ></td> 
						<td id="t2base" style="BACKGROUND-COLOR: white; HEIGHT: 1px;"></td> 
						<td id="t3base" style="BACKGROUND-COLOR: white; HEIGHT: 1px; "></td> 
						<td id="t4base" style="BACKGROUND-COLOR: white; HEIGHT: 1px; "></td> 
						<td id="t5base" style="BACKGROUND-COLOR: white; HEIGHT: 1px; "></td> 	 
					</tr> 
				</table>
			</td>
		</tr>	
		<tr> 
			<td height="100%"colspan="7" id="tabContents" > </td> 
		</tr> 
		<tr >
			<td>
				<div class="conts" id="t1Contents" > 
				
				Sono nella Tab1
				</div> 
				<div class="conts" id="t2Contents" > 
				Sono nella Tab2
				</div> 
				<div class="conts" id="t3Contents" >
					Sono nella Tab 3
				</div> 
				<div class="conts" id="t4Contents" >
					Sono nella Tab 4
				</div> 
				
				<div class="conts" id="t5Contents" >
				Sono nella Tab 5
				</div> 		
			</td>
		</tr>
	</table>			

</body>
</html>

**stiffa** · 09-02-2006, 17:45

Visto che non ne veniamo a capo con il mio codice... chiedo solo una cosa :

E' possibile bloccare l'utente (non fargli piu clikkare i link) finche una pagina non sia completamente caricata? (immagini, scritte, ecc ecc)...?????

Spero cosi di esser stato abb chiaro

**stiffa** · 09-02-2006, 18:52

up

**stiffa** · 10-02-2006, 13:02

up

**Mich_** · 10-02-2006, 13:18

Solo una bozza, da rielaborare (e da verificare se e` adattabile al tuo caso specifico):

<script ...>
var completo = false;
...
</script>
...
<body onload="completo=true;">
...
<a href="...." onclick="return completo;">
(questo in tutti i link che vuoi controllare).

Nota che il tutto richiede JS, per cui non e` accessibile e non funziona se JS e` dsiabiltato.

**stiffa** · 13-02-2006, 16:24

up....
non funziona...
ho postato il codice...se potete testarlo...nel senso ...la tua idea mich era intelligente...ma non dandomi errore non capisco...

appena metto l'onload al body non mi visualizza piu la prima tabb

**Mich_** · 13-02-2006, 18:43

Mi ha tanto l'aria di un errore da qualche altra parte.

In FF o Moz o N7, apri la console javascript;
in IE dovresti abilitare la segnalazione degli errori JS (mi pare stava tra le opzioni avanzate).

PS: se hai una pagina publicata, prova a postare il link....

Discussione: bloccare eventi pagina fino al caricamento completo

Strumenti discussione

Ricerca discussione

Visualizza

bloccare un menu linguetta fino al cariacmento

Permessi di invio