Visualizzazione dei risultati da 1 a 7 su 7
  1. #1

    Posizionamento Menù su sito (dockbar Mac)

    Salve a tutti
    Ho iniziato da poco a leggere javascript ... intanto sto scrivendo il mio sito...
    Ho trovato sul web un codice js che mi permette di inserire un menù di navigazione simile alla dockbar di Mac, ma (capendone ancora poco ) non riesco a capire come regolarne la posizione in modo tale che mi risulti di un tot distaccata dal fondo e dal margine sinistro della pagina...
    Il codice è questo:

    codice:
    var linkList=[
    [ 'http://www.havingfun.altervista.org/' , 'http://www.havingfun.altervista.org/images/home.png' , '', 'Home' ],
    [ 'http://www.havingfun.altervista.org/autoit/autoit.html' , 'http://www.havingfun.altervista.org/images/autoit.jpg' , '', 'AutoIt' ],
    [ 'http://www.havingfun.altervista.org/quenya/quenya.html' , 'http://www.havingfun.altervista.org/images/quenya.jpg' , '', 'Linguaggio Elfico - Quenya (Tolkien)' ],
    [ 'http://www.havingfun.altervista.org/hackesec/hackesec.html' , 'http://www.havingfun.altervista.org/images/hackesec.jpg' , '', 'Hacking/Sicurezza' ],
    [ 'http://www.havingfun.altervista.org/music/music.html' , 'http://www.havingfun.altervista.org/images/music.jpg' , '', 'Musica' ],
    [ 'http://www.havingfun.altervista.org/videos/videos.html' , 'http://www.havingfun.altervista.org/images/videos.jpg' , '', 'Video' ],
    [ 'http://www.havingfun.altervista.org/games/games.html' , 'http://www.havingfun.altervista.org/images/games.jpg' , '', 'Giochi' ],
    [ 'http://www.havingfun.altervista.org/info.html' , 'http://www.havingfun.altervista.org/images/derp.jpg' , '', 'About Me' ],
    ]
    
    
    var startSize=40;  // THE STARTING WIDTH *AND* HEIGHT OF EACH IMAGE (THE IMAGES WILL BE SCALED).
    //<!-- RAJ
    var curSize=50;    // variable used in the first time zoom/shrink
    // RAJ -->
    var endSize=90;   // THE ENDING WIDTH *AND* HEIGHT OF EACH IMAGE (THE IMAGES WILL BE SCALED).
    var useText=true;  // true = USE TEXT UNDER THE LINK, false = NO TEXT UNDER THE LINK.
    var defText=''  // DEFAULT TEXT TO APPEAR UNDER THE LINKS WHEN NOT HOVERED OVER.
                                        // USE AN EMPTY STRING FOR NO TEXT.
    var textGap=10;    // PIXEL GAP FROM BOTTOM OF MENU TO TOP OF OPTIONAL TEXT (WHEN defText IS SET TO true).
    var effectW=2.5;   // THE NUMBER OF ICONS AFFECTED BY OF THE MAGNIFICATION AT ONCE (APPROXIMATE). USE VALUES BETWEEN 2 AND 5.
    
    // BELOW IS THE STYLE-SHEET RULE FOR HOW THE TEXT IS TO BE DISPLAYED. USE VALID CSS RULES.
    
    var textStyle="font-family:cursive; font-size:medium; color:yellow; font-weight:bold";
    
    
    //********** DO NOT EDIT BEYOND THIS POINT **********\\
    
    
    var w3c=(document.getElementById)?true:false;
    var ie4=(document.all && !w3c)?true:false;
    var ie5=(document.all && w3c)?true:false;
    var ns4=(document.layers)?true:false;
    var mx=0;
    var overEl=false;
    var enterEl=false;
    var id=0;
    var elList=new Array();
    var elText;
    var pgLoaded=false;
    if(defText=='')defText=' ';
    effectW=Math.max(2,Math.min(5,effectW))+.5;
    var wA=effectW*endSize/2;
    var mX=wA/1.5;
    
    function getMxy(v){
    mx=(ie5||ie4)?event.clientX:v.pageX;
    }
    
    function getEl(s){
    if(ns4)return findLayer(s,document);
    else return (ie4)?document.all[s]:document.getElementById(s);
    }
    
    function getW(e){
    return parseInt(e.style.width);
    }
    
    function setImgS(i,x){
    elList[i].style.width=x;
    elList[i].style.height=x;
    document.images['linkDockI'+i].width=x;
    document.images['linkDockI'+i].height=x;
    }
    
    function getL(el){
    var x=0;
    var sx=(document.all)?document.body.scrollLeft:0;
    while(el.offsetParent!=null){
    x+=el.offsetLeft;
    el=el.offsetParent;
    }
    return x+el.offsetLeft-sx;
    }
    
    function rAll(){
    // decrease size of zoomed images gradually
    for(i=0;i<elList.length;i++) {
    //<!-- RAJ
    curSize=getW(elList[i]);
    if (curSize>startSize) {
    id=setTimeout('rAll()',10);
    curSize--;
    // RAJ -->
    setImgS(i,curSize);
    }}}
    
    function dockMagnify(){
    var tEl,n1,n2;
    //<!-- RAJ
    if(overEl) {if(curSize<endSize) curSize+=5; } else curSize=50;
    // RAJ -->
    if(overEl){
    for(i=0;i<linkList.length;i++){
    tEl=elList[i];
    if((getL(tEl)>=mx-wA)&&(getL(tEl)<=mx+wA)){
    n1=getL(tEl)+getW(tEl)/2+10;
    n2=mx-wA;
    //<!-- RAJ
    n1=(curSize*Math.sin(Math.abs(n1-n2)/mX));
    // RAJ -->
    setImgS(i,Math.max(n1,startSize));
    }else setImgS(i,startSize);
    }}}
    
    function mOver(){
    overEl=true;
    clearTimeout(id);
    }
    
    function mOut(){
    overEl=false;
    id=setTimeout('rAll()',100);
    }
    
    // FUNCTION TO FIND NESTED LAYERS IN NS4 BY MIKE HALL
    function findLayer(name,doc){
    var i,layer;
    for(i=0;i<doc.layers.length;i++){
    layer=doc.layers[i];
    if(layer.name==name)return layer;
    if(layer.document.layers.length>0)if((layer=findLayer(name,layer.document))!=null)return layer;
    }
    return null;
    }
    
    function writeText(text){
    if(useText && pgLoaded){
    text=(text<0)?defText:linkList[text][3];
    if(text=='')text=' ';
    if(ns4){
    elText.document.open();
    elText.document.write('<center><span style="'+textStyle+'">'+text+'</span></center>');
    elText.document.close();
    }
    else elText.innerHTML=text;
    }}
    
    function writeHTML(){
    var t='';
    if(w3c||ie4){
    t+='<table cellpadding=0 cellspacing=0 border=0 height="'+endSize+'" width="'+(((linkList.length-4)*startSize)+(4*endSize))+'px"><tr valign="bottom" align="center"><td>';
    for(i=0;i<linkList.length;i++){
    t+='<span id="linkDockD'+i+'" style="width:'+startSize+'px; height:'+startSize+'px;">';
    t+='[img]'+linkList[i][1]+'[/img]';
    t+='</span>';
    }
    t+='</td></tr></table>';
    if(useText)t+='<center><div id="dockText" style="'+textStyle+'; padding-top:'+textGap+'px">'+defText+'</div></center>';
    }else{
    t+='<table cellpadding=0 cellspacing=0 border=0 width="'+(linkList.length*startSize)+'"><tr valign="bottom">';
    for(i=0;i<linkList.length;i++)t+='<td height="'+endSize+'">[img]'+linkList[i][1]+'[/img]</td>';
    t+='</tr>';
    if(useText)t+='<tr><td colspan="'+linkList.length+'"><td height="'+textGap+'"></td></tr><tr><td colspan="'+linkList.length+'"><ilayer width="'+(linkList.length*startSize)+'"><layer name="dockText" height="100%"></layer></ilayer></td></tr>';
    t+='</table>';
    }
    document.write(t);
    }
    
    window.onload=function(){
    if(w3c||ie4){
    for(j=0;j<linkList.length;j++){
    elList[j]=getEl('linkDockD'+j);
    elList[j].n=j;
    elList[j].onmouseover=mOver;
    elList[j].onmouseout=mOut;
    }
    document.onmousemove=getMxy;
    setInterval('dockMagnify()',20);
    }
    elText=getEl('dockText');
    if(ns4)writeText(-1);
    pgLoaded=true;
    }
    
    writeHTML();
    qualcuno potrebbe aiutarmi?
    Più che altro per riuscire ad assimilare meglio...
    Grazie mille

  2. #2
    Lo script è antidiluviano, dei tempi di internet explore 5.
    Comunque per modificare il margine inferiore del menu puoi modificare:
    codice:
    var textStyle="margin-bottom:25px; font-family:cursive; font-size:medium; color:yellow; font-weight:bold";
    riguardo il margine sinistro, il menu non è già a centro pagina?

  3. #3

    Non funziona

    La soluzione da te proposta non funge, e penso che sia perchè va a modificare la posizione del testo non della dockbar (che a quanto ho potuto capire leggendo il codice è dentro una tabella)... comunque si per il lato è perfetto già com'è

  4. #4
    Metti uno stile in linea alla tabella allora.

  5. #5
    Purtroppo quello è js non css quindi non so come fare... potresti spiegarti meglio?

  6. #6
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    prova modificando questa riga:
    t+='<table cellpadding=0 style="margin-bottom:25px;" cellspacing=0 border=0 height="'+endSize+'" width="'+(((linkList.length-4)*startSize)+(4*endSize))+'px"><tr valign="bottom" align="center"><td>';
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  7. #7
    Per quel problema ho già risolto, ma mettendo una cifra negativa, perchè gia di suo negli attributi posiziona la riga in "bottom", quindi non farei altro che spostarla più su... Invece mi è sorto un altro problema: io ho risolto così: (il primo "rosso" è per la dockbar, il secondo per il testo)
    codice:
    function writeHTML(){
    var t='';
    if(w3c||ie4){
    t+='<table style= "margin-bottom:-300px"; cellpadding=0 cellspacing=0 border=0 height="'+endSize+'" width="'+(((linkList.length-4)*startSize)+(4*endSize))+'px"><tr valign="bottom" align="center"><td>';
    for(i=0;i<linkList.length;i++){
    t+='<span id="linkDockD'+i+'" style="width:'+startSize+'px; height:'+startSize+'px;">';
    t+='[img]'+linkList[i][1]+'[/img]';
    t+='</span>';
    }
    t+='</td></tr></table>';
    if(useText)t+='<center><div id="dockText" style="'+textStyle+'; padding-top:415px">'+defText+'</div></center>';
    }else{
    t+='<table cellpadding=0 cellspacing=0 border=0 width="'+(linkList.length*startSize)+'"><tr valign="bottom">';
    for(i=0;i<linkList.length;i++)t+='<td height="'+endSize+'">[img]'+linkList[i][1]+'[/img]</td>';
    t+='</tr>';
    if(useText)t+='<tr><td colspan="'+linkList.length+'"><td height="'+textGap+'"></td></tr><tr><td colspan="'+linkList.length+'"><ilayer width="'+(linkList.length*startSize)+'"><layer name="dockText" height="100%"></layer></ilayer></td></tr>';
    t+='</table>';
    }
    document.write(t);
    Il problema che sorge è il seguente: io ho adattato la posizione della tabella alle mie necessita solo per questa pagina... ma come posso rendere le dimensioni relative al testo inserito nella pagina, in modo tale da non dover modificare i parametri ad ogni nuova pagina?

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.