Aiutamici Forum
Benvenuto Ospite Cerca | Topic Attivi | Utenti | | Log In | Registra

centrare i tasti dei link Opzioni
danilo62
Inviato: Thursday, March 31, 2011 12:30:16 PM
Rank: Member

Iscritto dal : 3/21/2011
Posts: 22
ho preso questo script per menu dalla rete ... non riesco e non so se si puo' fare, a centrare i tastini (cioè le scritte non sono tasti) dei menu ... vorrei averli al centro e non a sinistra ... posto il codice ... mi potete dare un'occhiatina ... grazie in anticipo:
<!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" lang="it">
<head>
<title>MiniTabs - Esempio JavaScript scaricato da HTML.it</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="it" />
<meta name="Robots" content="All" />
<meta name="Description" content="HTML.it - il sito italiano sul Web publishing" />
<meta name="Keywords" content="Ad ogni apertura di pagina questo script genera un differente colore di sfondo." />
<meta name="Owner" content="HTML.it srl" />
<meta name="Author" content="HTML.it srl" />
<meta name="Copyright" content="HTML.it srl" />
<style type="text/css">
#miniflex {
width: 100%;
float: left;
font-size: small; /* could be specified at a higher level */
margin: 0;
padding: 0 10px 0 10px;
border-bottom: 1px solid #696;
position:relative;
z-index:2;
}

#miniflex li {
float: left;
margin: 0;
padding: 0;
display: inline;
list-style: none;
position:relative;
}

#miniflex a:link, #miniflex a:visited {
float: left;
font-size: 85%;
line-height: 20px;
font-weight: bold;
margin: 0 10px 0 10px;
text-decoration: none;
color: #9c9;
}

#miniflex a.active:link, #miniflex a.active:visited, #miniflex a:hover {
border-bottom: 4px solid #696;
padding-bottom: 2px;
color: #696;
}

#animated-tab {
position: absolute;
z-index: 1;
font-size: 85%;
line-height: 20px;
padding-bottom: 2px;
border-bottom: 4px solid #696;
}
</style>
<script type="text/javascript">

/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Brian McAllister :: http://www.frequency-decoder.com/ */

/*
Animated miniTabs by frequency decoder
Further information on this script can be located
on the authors Web site http://www.frequency-decoder.com/

Based on an idea by Rob L Glazebrook
(http://www.rootarcana.com/test/smartmini/)
which was derived from the original idea of Stephen Clark
(http://www.sgclark.com/sandbox/minislide/)

Changes
=======
05/03/06 : Creation
08/03/06 : Added the cleanUp method to stop IE memory leaks.

This script is distributed under a "Attribution-NonCommercial-ShareAlike 2.0" license

You are free:
1. to copy, distribute, display, and perform the work.
2. to make derivative works.

Under the following conditions:

1. **Attribution*: You must attribute the work in the manner specified
by the author or licensor.
2. Noncommercial*: You may not use this work for commercial purposes.*
3. Share Alike*: If you alter, transform, or build upon this work,
you may distribute the resulting work only under a license identical to this one.
*/


var miniTab = {
currentTab: 0,
activeTab: 0,
destX: 0,
destW: 0,
t: 0,
b: 0,
c: 0,
d: 20,
animInterval: null,
sliderObj: null,
aHeight: 0,

init: function() {
if(!document.getElementById || !document.getElementById("miniflex")) return;

var ul = document.getElementById("miniflex");
var liArr = ul.getElementsByTagName("li");
var aArr = ul.getElementsByTagName("a");

for(var i = 0, li; li = liArr[i]; i++) {
liArr[i].onmouseover = aArr[i].onfocus = function(e) {
var pos = 0;
var elem = this.nodeName == "LI" ? this : this.parentNode;
while(elem.previousSibling) {
elem = elem.previousSibling;
if(elem.tagName && elem.tagName == "LI") pos++;
}
miniTab.initSlide(pos);
}
}

ul.onmouseout = function(e) {
miniTab.initSlide(miniTab.currentTab);
};

for(var i = 0; i < aArr.length; i++) {
if(document.location.href.indexOf(aArr[i].href)>=0) {
miniTab.activeTab = miniTab.currentTab = i;
}
aArr[i].style.borderBottom = "0px";
aArr[i].style.paddingBottom = "6px";
}

miniTab.slideObj = ul.parentNode.appendChild(document.createElement("div"));
miniTab.slideObj.appendChild(document.createTextNode(String.fromCharCode(160)));
miniTab.slideObj.id = "animated-tab";
miniTab.slideObj.style.top = (ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop) + "px";
miniTab.slideObj.style.left = (ul.offsetLeft + + liArr[miniTab.activeTab].offsetLeft + aArr[miniTab.activeTab].offsetLeft) + "px";
miniTab.slideObj.style.width = aArr[miniTab.activeTab].offsetWidth + "px";
miniTab.aHeight = ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop;

miniTab.initSlide(miniTab.activeTab, true);

var intervalMethod = function() { miniTab.slideIt(); }
miniTab.animInterval = setInterval(intervalMethod,10);
},

cleanUp: function() {
clearInterval(miniTab.animInterval);
miniTab.animInterval = null;
},

initSlide: function(pos, force) {
if(!force && pos == miniTab.activeTab) return;
miniTab.activeTab = pos;
miniTab.initAnim();
},

initAnim: function() {
var ul = document.getElementById("miniflex");
var liArr = ul.getElementsByTagName("li");
var aArr = ul.getElementsByTagName("a");
miniTab.destX = parseInt(liArr[miniTab.activeTab].offsetLeft + liArr[miniTab.activeTab].getElementsByTagName("a")[0].offsetLeft + ul.offsetLeft);
miniTab.destW = parseInt(liArr[miniTab.activeTab].getElementsByTagName("a")[0].offsetWidth);
miniTab.t = 0;
miniTab.b = miniTab.slideObj.offsetLeft;
miniTab.c = miniTab.destX - miniTab.b;
miniTab.bW = miniTab.slideObj.offsetWidth;
miniTab.cW = miniTab.destW - miniTab.bW;
miniTab.slideObj.style.top = (ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop) + "px";
},

slideIt:function() {
var ul = document.getElementById("miniflex");
var liArr = ul.getElementsByTagName("li");
var aArr = ul.getElementsByTagName("a");

// Has the browser text size changed?
if(miniTab.aHeight != ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop) {
miniTab.initAnim();
miniTab.aHeight = ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop
};

if(miniTab.t++ < miniTab.d) {
var x = miniTab.animate(miniTab.t,miniTab.b,miniTab.c,miniTab.d);
var w = miniTab.animate(miniTab.t,miniTab.bW,miniTab.cW,miniTab.d);
miniTab.slideObj.style.left = parseInt(x) + "px";
miniTab.slideObj.style.width = parseInt(w) + "px";
} else {
miniTab.slideObj.style.left = miniTab.destX + "px";
miniTab.slideObj.style.width = miniTab.destW +"px";
}
},

animate: function(t,b,c,d) {
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
}
}

window.onload = miniTab.init;
window.onunload = miniTab.cleanUp;
</script>
</head>
<body>
<h1>MiniTabs</h1>
<ul id="miniflex">
<li><a href="/about/" title="">About</a></li>
<li><a href="/archives/" title="">Archives</a></li>
<li><a href="/the-language-in-the-lab/" title="">The Language in the Lab</a></li>
<li><a class="active" href="/demo/animated-minitabs/" title="">MiniTab demo</a></li>
<li><a href="/contact/" title="">Contact</a></li>
</ul>

Sponsor
Inviato: Thursday, March 31, 2011 12:30:16 PM

 
lui49
Inviato: Thursday, March 31, 2011 1:33:56 PM
Rank: AiutAmico

Iscritto dal : 5/4/2003
Posts: 2,845
modifica il valore di padding in #miniflex:

modifica il quarto valore di padding (padding:0 10px 0 10px) che da lo scostamento dal bordo a sinistra con un valore a piacere (prova 200px).
danilo62
Inviato: Thursday, March 31, 2011 2:43:47 PM
Rank: Member

Iscritto dal : 3/21/2011
Posts: 22
ciao Lui49, grazie per la "sempre-tempestiva" risposta... ma un valore a piacere significa che al centro preciso non si puo' mettere ? del tipo " allinea al centro " ?
lui49
Inviato: Thursday, March 31, 2011 3:20:18 PM
Rank: AiutAmico

Iscritto dal : 5/4/2003
Posts: 2,845
una soluzione potrebbe essere questa...ma il risultato cambia

Code:
#miniflex {
/*width: 100%;*/
width:420px;
/*float:left;*/
font-size: small; /* could be specified at a higher level */
/*margin: 0;*/
margin:auto;
padding: 0 10px 0 10px;
border-bottom: 1px solid #696;
position:relative;
z-index:2;
}



edit: lascia perdere...si perde il cursore...me ne sono accorto solo adesso.
danilo62
Inviato: Thursday, March 31, 2011 4:49:14 PM
Rank: Member

Iscritto dal : 3/21/2011
Posts: 22
... quindi bisogna trovare un escamotage ... non si puo' fare con un comando apposito !... un allineamento centrale per un comando definito non è applicabile ?!? se ciò fosse è meglio lasciarlo allineato a sinistra ...
lui49
Inviato: Thursday, March 31, 2011 9:13:51 PM
Rank: AiutAmico

Iscritto dal : 5/4/2003
Posts: 2,845
c'è qualcosa che non mi convince nel codice per quel che riguarda la (class="active") che non viene correttamente assegnata.....da cui penso derivi l'anomalo posizionamento della sottolineatura in partenza. Occorre indagare...
Utenti presenti in questo topic
Guest


Salta al Forum
Aggiunta nuovi Topic disabilitata in questo forum.
Risposte disabilitate in questo forum.
Eliminazione tuoi Post disabilitata in questo forum.
Modifica dei tuoi post disabilitata in questo forum.
Creazione Sondaggi disabilitata in questo forum.
Voto ai sondaggi disabilitato in questo forum.

Main Forum RSS : RSS

Aiutamici Theme
Powered by Yet Another Forum.net versione 1.9.1.8 (NET v2.0) - 3/29/2008
Copyright © 2003-2008 Yet Another Forum.net. All rights reserved.