Menù a scorrimento con JS

**Soby** · 16-06-2006, 10:59

Ciao a tutti sono nuovo..avrei bisogno di un grosso aiuto..
io soto facendo un menu a scorrimento...e si trova all'interno di una colonna di una tabelle.Il problema è il seguente:
siccome nella funzione function JSFX_FloatTopDiv() sono stabilite delle unita di misura rispetto alla pagina(var startX = 125, startY = 240

...quando riduco la mia pagina il menu nn si trova piu nella colonna della tabella ma si trova spostato in quanto rispetta le misure assgnate..Quindi come faccio a fargli fare riferimento alla tabella oppure eseguire un controllo che mi gestisca questo problema?...ho bisogno di una risposta subito..grazie!!!

**Mich_** · 16-06-2006, 11:13

Non capisco cosa c'entri questa richiesta con il thread a cui la avevi attaccata.
Anche il forum e` sbagliato: avevi postato in HTML una richiesta che e` chiaramente di JS.

Comunque senza un minimo di codice (ma sarebbe meglio un link in questo caso) non ti si puo` rispondere.

**Soby** · 16-06-2006, 12:22

SI SCUSAMI....CMQ GUARDA IO HO FATTO COSI..MA NN MI FUNZIONA:
<script type="text/javascript">

var verticalpos="frombottom"

if (!document.layers)
document.write('</div>')

function JSFX_FloatTopDiv()
{
var startX = 0
if (screen.width <= 800)
{
startY = 400; //800x600 or less
}
else
{
var startX=125
startY = 400; //greater than 800x600
}
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id)
{
....

il menu deve scorrere all'interno di una colonna di uan tabella..solo che a dimensioni massime funzione...ma quando riduco no!!...si sposta segue altre misure..e nn so proprio come fare...mi puoi aiutare??

IL PUNTO è CHE NN SEGUE I COSTRUTTI...

**Mich_** · 16-06-2006, 12:46

Anzitutto vedo che stai usando roba molto vecchia.
NN (inteso fino al 4) non lo usa praticamente piu` nessuno, e non credo valga la pena di programmare per tale browser.

Poi il tuo script e` un pezzetto, che non ha senso da solo: ha necessita` di altri tag HTML prima.
Invece le funzioni andrebbero inserite nella head.
Lo script fa anche riferimento ad oggetti HTML che non sono evidenziati: non si puo` quindi dire nulla senza conoscere tali oggetti.

**Soby** · 16-06-2006, 13:16

VA BEH NN FAR CASO CHE è ROBA VECCHIA...siccome sto facendo uno stage mi hanno chiesto di afre sta cosa in html...se hai tempo tra un quarto d'ora vado li in azienda e ti passo la pagina web cosi vedi cosa intendo....in poche parole il mio menu che deve rimanere all'interno della colonna della tabella ..quando riduco la finestra si sposta perchè nella funzione JSFX_FloatTopDiv() ci sono impostati parametri che nn so trattare....dopo ti passo la pagina..ok?

**Soby** · 16-06-2006, 13:52

Wee..nn prendermi per pazzo..cmq ti passo il codice...fai un copia e incolla e vedi come è..

ECCOLO!!!!!!!!
MA TE LO PASSO IN DUE PARTI--- PRIMA HEAD

<head>

<style>
#centered {
position:absolute;
background-color:#abcdef;
width:100px;
}
</style>
<script type="text/javascript">
var cell = document.getElementById("cell");

function calcolaSpostamento(elem, type) {
var offset=0;
while(elem){
offset+=elem[type];
elem=elem.offsetParent;
}
return offset;
}
function centra(elem) {
elem.style.top = calcolaSpostamento(cell, "offsetTop") + (cell.offsetHeight - elem.offsetHeight) /2 + "px";
elem.style.left = calcolaSpostamento(cell, "offsetLeft") + (cell.offsetWidth - elem.offsetWidth) /2 + "px";
}

</script>
<style type="text/css">

a{
color:black;
text-decoration:none;
}
body{
font-size:0.8em;
text-align:center;
background-color:white;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
margin:0px;
padding:0px;
}
img{
border:0px;
}

#mainContainer{
width:760px;
margin:0 auto;
text-align:left;
}

#leftContainer{
width:160px;
float:left;
padding-left:5px;
padding-right:5px;
height:300px;
}

#contentContainer{
width:590px;
float:left;
}
.ad{
clear:both;
text-align:center;
padding:5px;
}

#menu{
font-family:arial;
width:200px;

}
#menu li{
list-style-type:none;
margin:0px;
}
#menu ul{
margin:0px;
padding:0px;
}
#menu ul li ul{
padding-left:10px;
}
#menu li a{ /* Colori e decorazioni delle scritte nel menu principale */
text-decoration:none;
color:black;
height:15px;
line-height:20px;
vertical_align:middle;
border:1px solid #000;
background-color:#FFFFCC;
margin:1px;
padding:1px; /* Spazio tra il bordo e il testo*/

display:block;
}
#menu li a:hover,#menu .activeMainMenuItem{
color:white;
background:#ffcc99;
}
.subMenu{
visibility:hidden;
position:absolute;
overflow:hidden;
border:1px solid #000;
background-color:#FFFFCC;
font-family:arial;
text-align: left;
}
.subMenu ul{
margin:0px;
padding:0px;
}
.subMenu ul li{
list-style-type:none;
margin:0px;
padding:2px;
}
.subMenu ul li a{
white-space:nowrap;
text-decoration:none;
color:#000;
height:16px;
line-height:16px;
padding:1px;

display:block;
}
.subMenu ul li a:hover{ /* Effetti di colori al passaggio del mouse sui sottomenu */
color:white; /* Colore della scritta al passaggio del mouse */
background:#ffcc99; /* Colore dello sfondo al passaggio del mouse */
}

</style>
<script type="text/javascript">

var timeBeforeAutoHide = 700;

var slideSpeed_out = 10;
var slideSpeed_in = 10;

var slideTimeout_out = 25;
var slideTimeout_in = 10;

var showSubOnMouseOver = true;

var fixedSubMenuWidth = false;

var xOffsetSubMenu = 0;

var slideDirection = 'right'; // Slide to left or right ?

var activeSubMenuId = false;
var activeMainMenuItem = false;
var currentZIndex = 1000;
var autoHideTimer = 0;
var submenuObjArray = new Array();
var okToSlideInSub = new Array();
var subPositioned = new Array();

function stopAutoHide()
{
autoHideTimer = -1;
}

function initAutoHide()
{
autoHideTimer = 0;
if(autoHideTimer>=0)autoHide();
}

function autoHide()
{
if(autoHideTimer>timeBeforeAutoHide)
{
if(activeMainMenuItem){
activeMainMenuItem.className='';
activeMainMenuItem = false;
}
if(activeSubMenuId){
var obj = document.getElementById('subMenuDiv' + activeSubMenuId);
showSub();
}
}else{
if(autoHideTimer>=0){
autoHideTimer+=50;
setTimeout('autoHide()',50);
}
}
}

function getTopPos(inputObj)
{
var returnValue = inputObj.offsetTop;
while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetTop;
return returnValue;
}

function getLeftPos(inputObj)
{
var returnValue = inputObj.offsetLeft;
while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft;
return returnValue;
}

function showSub()
{
var subObj = false;
if(this && this.tagName){
var numericId = this.parentNode.id.replace(/[^0-9]/g,'');
okToSlideInSub[numericId] = false;
var subObj = document.getElementById('subMenuDiv' + numericId);
if(activeMainMenuItem)activeMainMenuItem.className ='';
if(subObj){
if(!subPositioned[numericId]){
if(slideDirection=='right'){
subObj.style.left = getLeftPos(submenuObjArray[numericId]['parentDiv']) + submenuObjArray[numericId]['parentDiv'].offsetWidth + xOffsetSubMenu + 'px';
}else{
subObj.style.left = getLeftPos(submenuObjArray[numericId]['parentDiv']) + xOffsetSubMenu + 'px';
}
submenuObjArray[numericId]['left'] = subObj.style.left.replace(/[^0-9]/g,'');
subObj.style.top = getTopPos(submenuObjArray[numericId]['parentDiv']) + 'px';
subPositioned[numericId] = true
}
subObj.style.visibility = 'visible';
subObj.style.zIndex = currentZIndex;
currentZIndex++;
this.className='activeMainMenuItem';
activeMainMenuItem = this;
}
}else{
var numericId = activeSubMenuId;
}
if(activeSubMenuId && (numericId!=activeSubMenuId || !subObj))slideMenu(activeSubMenuId,(slideSpeed_in*-1));
if(numericId!=activeSubMenuId && this && subObj){
subObj.style.width = '0px';
slideMenu(numericId,slideSpeed_out);
activeSubMenuId = numericId;
}else{
if(numericId!=activeSubMenuId)
activeSubMenuId = false;
}
if(showSubOnMouseOver)stopAutoHide();
}

function slideMenu(menuIndex,speed){
var obj = submenuObjArray[menuIndex]['divObj'];
var obj2 = submenuObjArray[menuIndex]['ulObj'];
var width = obj.offsetWidth + speed;
if(speed<0){
if(width<0)width = 0;
obj.style.width = width + 'px';
if(slideDirection=='left'){
obj.style.left = submenuObjArray[menuIndex]['left'] - width + 'px';
obj2.style.left = '0px';
}else{
obj2.style.left = width - submenuObjArray[menuIndex]['width'] + 'px'
}
if(width>0 && okToSlideInSub[menuIndex])setTimeout('slideMenu(' + menuIndex + ',' + speed + ')',slideTimeout_in); else{
obj.style.visibility = 'hidden';
obj.style.width = '0px';
if(activeSubMenuId==menuIndex)activeSubMenuId=fals e;
}
}else{
if(width>submenuObjArray[menuIndex]['width'])width = submenuObjArray[menuIndex]['width'];
if(slideDirection=='left'){
obj.style.left = submenuObjArray[menuIndex]['left'] - width + 'px';
obj2.style.left = '0px';
}else{
obj2.style.left = width - submenuObjArray[menuIndex]['width'] + 'px'
}
obj.style.width = width + 'px';
if(width<submenuObjArray[menuIndex]['width']){
setTimeout('slideMenu(' + menuIndex + ',' + speed + ')',slideTimeout_out);
}else{
okToSlideInSub[menuIndex] = true;
}
}
}
function resetPosition()
{
subPositioned.length = 0;
}

function initLeftMenu()
{
var menuObj = document.getElementById('menu');
var mainMenuItemArray = new Array();
var mainMenuItem = menuObj.getElementsByTagName('LI')[0];
while(mainMenuItem){
if(mainMenuItem.tagName && mainMenuItem.tagName.toLowerCase()=='li'){
mainMenuItemArray[mainMenuItemArray.length] = mainMenuItem;
var aTag = mainMenuItem.getElementsByTagName('A')[0];
if(showSubOnMouseOver)
aTag.onmouseover = showSub;
else
aTag.onclick = showSub;
}
mainMenuItem = mainMenuItem.nextSibling;
}

var lis = menuObj.getElementsByTagName('A');
for(var no=0;no<lis.length;no++){
if(!showSubOnMouseOver)lis[no].onmouseover = stopAutoHide;
lis[no].onmouseout = initAutoHide;
lis[no].onmousemove = stopAutoHide;
}
for(var no=0;no<mainMenuItemArray.length;no++){
var sub = mainMenuItemArray[no].getElementsByTagName('UL')[0];
if(sub){
mainMenuItemArray[no].id = 'mainMenuItem' + (no+1);
var div = document.createElement('DIV');
div.className='subMenu';
document.body.appendChild(div);
div.appendChild(sub);
if(slideDirection=='right'){
div.style.left = getLeftPos(mainMenuItemArray[no]) + mainMenuItemArray[no].offsetWidth + xOffsetSubMenu + 'px';
}else{
div.style.left = getLeftPos(mainMenuItemArray[no]) + xOffsetSubMenu + 'px';
}
div.style.top = getTopPos(mainMenuItemArray[no]) + 'px';
div.id = 'subMenuDiv' + (no+1);
sub.id = 'submenuUl' + (no+1);
sub.style.position = 'relative';
if(navigator.userAgent.indexOf('Opera')>=0){
submenuObjArray[no+1] = new Array();
submenuObjArray[no+1]['parentDiv'] = mainMenuItemArray[no];
submenuObjArray[no+1]['divObj'] = div;
submenuObjArray[no+1]['ulObj'] = sub;
submenuObjArray[no+1]['width'] = sub.offsetWidth;
submenuObjArray[no+1]['left'] = div.style.left.replace(/[^0-9]/g,'');
}
sub.style.left = 1 - sub.offsetWidth + 'px';

if(document.all)div.style.width = '1px';

if(navigator.userAgent.indexOf('Opera')<0){
submenuObjArray[no+1] = new Array();
submenuObjArray[no+1]['parentDiv'] = mainMenuItemArray[no];
submenuObjArray[no+1]['divObj'] = div;
submenuObjArray[no+1]['ulObj'] = sub;
submenuObjArray[no+1]['width'] = sub.offsetWidth;
submenuObjArray[no+1]['left'] = div.style.left.replace(/[^0-9]/g,'');
if(fixedSubMenuWidth)submenuObjArray[no+1]['width'] = fixedSubMenuWidth;
}

if(!document.all)div.style.width = '1px';

}
}

menuObj.style.visibility = 'visible';
window.onresize = resetPosition;
}

window.onload = initLeftMenu;

</script>

</head>

**Soby** · 16-06-2006, 13:52

ECCO IL RESTO:

<body leftMargin="0" rightMargin="0" bottomMargin="0" topMargin="0"bgcolor="#FFFFFF" leftmargin=0 topmargin=5>
<table width="775" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>

<td colspan="3" background="C:\Documents and Settings\operatore\Desktop\Pgm Menu\tabella2.gif">

</p>
<p align="center" class="Matematica"><big><big><font color="white">TITOLO</font></big></big> </p>

</p></td>
</tr>
</table>
<table width="775" border="1" align="center" cellpadding="0" cellspacing="0" background="C:\Documents and Settings\operatore\Desktop\Pgm Menu\tabella.gif">
<tr>

<td colspan="2" align="left"><p class="Titolo1"></p>

<div id="topBar">
</div>
<div id="leftContainer">
<script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>
<layer id="divStayTopLeft">
<div id="MENU" onmouseover="on();" onmouseout="off();">

<div id="menu">
<ul>
[*]Home

[*]Web Grafica
<ul>
[*]Competenze
[*]Siti dinamici
[/list]

[*]Traduzione
<ul>
[*]Editoria
[*]Lingua
[*]Settori
[/list]

[*]Servizi editoriali
<ul>
[*]Impaginazione
[*]Pre-stampa
[/list]

[*]Contatti
<ul>
[*]E - mail
[*]Indirizzo
[*]Fax
[/list]

[/list]
</div>
</div>

</div>

</div>

</layer>

</div>
<script type="text/javascript">

//Enter "frombottom" or "fromtop"
var verticalpos="frombottom"

if (!document.layers)
document.write('</div>')
function JSFX_FloatTopDiv()
{
var startX = 123;
startY = 300;

var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.a ll[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x;this.style.t op=y;};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function()
{
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : document.body.scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}

ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
JSFX_FloatTopDiv();
</script>

<script type="text/javascript">
function on()
{
document.getElementById("MENU").style.left = "-10px";
}
function off()
{
document.getElementById("MENU").style.left = "-140px";
}
</script>

<p class="Testo"></p>
<p class="Testo"></p>
<p class="Testo"></p>
<p class="Testo"></p>
<p class="Testo"></p>
<p class="Testo"></p>
<center>
ffasaffsfa

ffasaffsfa

ffasaffsfa

ffasaffsfa

ffasaffsfa

ffasaffsfa

ffasaffsfa

ffasaffsfa

ffasaffsfa

ffasaffsfa

</center>
</td>

</tr>
</table>

</body>
</html>

**Mich_** · 19-06-2006, 09:45

Originariamente inviato da Soby
VA BEH NN FAR CASO CHE è ROBA VECCHIA...siccome sto facendo uno stage mi hanno chiesto di afre sta cosa in html...se hai tempo tra un quarto d'ora vado li in azienda e ti passo la pagina web cosi vedi cosa intendo....in poche parole il mio menu che deve rimanere all'interno della colonna della tabella ..quando riduco la finestra si sposta perchè nella funzione JSFX_FloatTopDiv() ci sono impostati parametri che nn so trattare....dopo ti passo la pagina..ok?

Stavo dicendo che lo script che hai postato (in parte) la prima volta e` obsoleto. Non ha senso lavorare oggi con funzioni fatte per NN4: di solito tali script non considerano i browser moderni.

Il codice che hai inserito dopo non lo ho neppure guardato: troppo lungo per leggerlo cosi.
Se inserisci il codice, devi usare gli appositi marcatori: [ code ] e [ /code ] (senza gli spazi).

Discussione: Menù a scorrimento con JS

Strumenti discussione

Ricerca discussione

Visualizza

Aiuto!!!!!!!!

Permessi di invio