Vai al contenuto

è fattibile con css?

duffy duck

Da duffy duck
in Web design e sistemisti

Messaggi raccomandati

jackoverfull

jackoverfull

Inviato
Inviato

sembrerebbe fatto via javascript…

"Errore di configurazione di Windows: mouse e tastiera scollegati. Premere F1 per riavviare."

"Assimilation is futile: Microsoft delenda est!"

6/6/2005: è l'inizio della fine.

Home Page | multiXFinder | OpenArena | SuspendNow!

Link al commento
Condividi su altri siti
sonik

sonik

Inviato
Inviato

scaricateli tutti :fiorellino: tanto è un file solo almeno se vuoi implementare altri effetti linki sempre allo stesso file.. se vuoi io lo sto usando qua (sto cercando di far andare anche i Tips su un div ma ho dei casotti... spero di riuscirci! )

Big power, sticky tyres, no neons, and suspension harder than multiplying in roman numerals ....PMSL =D

Link al commento
Condividi su altri siti
d0sse

d0sse

Inviato
Inviato

l'effetto che cerchi si chiama accordion. Io lo utilizzo (in verticale peró) nel mio sito usando mootools. puoi vedere come é implememtato cliccando il link nella mia firma!

inoltre ti consiglio di visitare il forum sul sito ufficiale e cercare accordion.

NETTuno Fanatic/Creative/Developers

Link al commento
Condividi su altri siti
duffy duck

duffy duck

Inviato
  • Autore
Inviato

veramente bello il sito, complimenti

ma io già mi sto perdendo, praticamente dopo aver inserito in <head>

<script type="text/javascript" src="script/mootools.js"></script>

come devo scrivere la pagina xhtml per avere poi l'effetto

e lo script a fine pagina prima di chiudere il <body> è uguale per tutti? lo devo scrivere anch'io?

grazie

Link al commento
Condividi su altri siti
duffy duck

duffy duck

Inviato
  • Autore
Inviato 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
background: #ff5;
}
#pleah {
width: 440px;
height: 400px;
overflow: hidden;
position: relative;
}
#pleah div {
width: 400px;
height: 400px;
position: absolute;
}
#pleah div h2 {
display: block;
float: left;
text-align: center;
width: 29px;
height: 400px;
background-color:green;
padding-top: 10px;
margin: 0 10px 0 0;
cursor: pointer;
}
#pleah div p {
display: block;
text-align: justify;
margin-right: 50px;
padding: 10px;
}

#fxNavigation {
padding: 10px;
margin-bottom: 20px;
background: #CECECE;
}

#wrapper {
width: 779px;
margin-right: auto;
margin-left: auto;
}
-->
</style>


<script type="text/javascript" src="script/mootools-release-1.11.js"></script>
<script type="text/javascript">

window.addEvent('domready', function(){
var pleahs = $$("#pleah .acContent");
var pleahFx = new Fx.Elements(pleahs, {wait: false, duration: 1000, transition: Fx.Transitions.Back.easeOut});
var moveAmount = 320, interval = 30;
pleahs.each(function(pleah, i) {
	pleah.setStyle("left", i * interval);
	pleah.addEvent("mouseenter", function(event) { 
		var o = {};
		var l = pleah.getStyle("left").toInt()
		o[i] = {left: [l, i * interval]}
		pleahs.each(function(other, j) {
			var l2 = other.getStyle("left").toInt();
			if(i > j) {
				o[j] = {left: [l2, j * interval]};
			}
			if(i < j) {
				o[j] = {left: [l2, (j * interval) + moveAmount]};
			}
		});
		pleahFx.start(o);
	});
});
});
</script>

</head>
<body>
<div id="wrapper"> 
   <div id="pleah">
  		<div class="acContent">
     		<h2>A</h2>
     		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, Ut wisi enim ad minim veniam, quis nostrud sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
     	</div>
   	<div class="acContent" style="background: #BCBCBC">
     		<h2>B</h2>
     		<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, </p>
     	</div>
   	<div class="acContent" style="background: #D1D1D1">
     		<h2>C</h2>
     		<p>vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui suscipit lobortis nisl ut aliquip ex ea commodo consequat.blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
     	</div>
   	<div class="acContent" style="background: #DFDFDF">
     		<h2>D</h2>
   		<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit,  ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
   	</div>
 	</div>
</body>
</html>

come faccio a fare in modo che appena caricata la pagina sia aperta la scheda A e non la D?

com'è lo script c'è da fare qualche modifica per migliorarlo?

grazie

Link al commento
Condividi su altri siti
d0sse

d0sse

Inviato
Inviato

dovesti darmi il link alla pagina, così riesco a capire meglio!

Comunque così su due piedi

prova a cambiare pleahFx.start(o); con pleahFx.start(id del divche vuoi aprire);

visto che i div non anno id dovresti crearli

NETTuno Fanatic/Creative/Developers

Link al commento
Condividi su altri siti
duffy duck

duffy duck

Inviato
  • Autore
Inviato

ciao, la pagina non è online la sto testando in locale con mamp;

ho provato a mettere lo zero ma non va si carica sempre con la D aperta e le altre non scorrono

per la prima soluzione invece non ho capito come devo fare, se hai tempo gli dai uno sguardo?

grazie

ps fatto questo poi vorrei annidare dentro una "scheda" di queste un altro effetto che permette con una freccia a destra e una a sinistra di far scorrere delle foto con descrizione cliccando sulle frecce, è troppo complicato?

Link al commento
Condividi su altri siti
d0sse

d0sse

Inviato
Inviato

Allora la pagina è un po' un casino perché non utilizza un plugin accordion standard ma ne crea uno nuovo da zero fatto solo per funzionare in quel caso.:ghghgh:

Il massimo che sono riuscito a fare è questo:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
background: #ff5;
}
#pleah {
width: 440px;
height: 400px;
overflow: hidden;
position: relative;
}
#pleah div {
width: 400px;
height: 400px;
position: absolute;
}
#pleah div h2 {
border-right: 1px solid black;
display: block;
float: right;
text-align: center;
width: 30px;
height: 400px;
background-color:green;
padding-top: 10px;
margin: 0 0 0 10px;
cursor: pointer;
}
#pleah div p {
display: block;
text-align: justify;
margin-left: 50px;
padding: 10px;
}

#fxNavigation {
padding: 10px;
margin-bottom: 20px;
background: #CECECE;
}

#wrapper {
width: 779px;
margin-right: auto;
margin-left: auto;
}
-->
</style>


<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">

window.addEvent('domready', function(){
var pleahs = $$("#pleah .acContent");
var pleahFx = new Fx.Elements(pleahs, {wait: false, duration: 800, transition: Fx.Transitions.Sine.easeOut});
var moveAmount = 320, interval = 30;
pleahs.each(function(pleah, i) {
	pleah.setStyle("right", i * interval);
	pleah.addEvent("mouseenter", function(event) { 
		var o = {};
		var l = pleah.getStyle("right").toInt()
		o[i] = {right: [l, i * interval]}
		pleahs.each(function(other, j) {
			var l2 = other.getStyle("right").toInt();
			if(i > j) {
				o[j] = {right: [l2, j * interval]};
			}
			if(i < j) {
				o[j] = {right: [l2, (j * interval) + moveAmount]};
			}
		});
		pleahFx.start(o);
	});
});
});
</script>

</head>
<body>
<div id="wrapper"> 
   <div id="pleah">
  		<div class="acContent" style="background: #BCBCBC">
     		<h2>D</h2>
     		<p>DDLorem ipsum dolor sit amet, consectetuer adipiscing elit, Ut wisi enim ad minim veniam, quis nostrud sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
     	</div>
   	<div class="acContent" style="background: #BCBCBC">
     		<h2>C</h2>
     		<p>CCUt wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, </p>
     	</div>
   	<div class="acContent" style="background: #D1D1D1">
     		<h2>B</h2>
     		<p>BBvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui suscipit lobortis nisl ut aliquip ex ea commodo consequat.blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
     	</div>
   	<div class="acContent" style="background: #DFDFDF">
     		<h2>A</h2>
   		<p>AALorem ipsum dolor sit amet, consectetuer adipiscing elit,  ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
   	</div>
 	</div>
</body>
</html>

Praticamente ora sembra che si apra il div A ma in verità si tratta ancora del D! Ho spostato tutte le barre verdi a destra ed ho rinominato D in A, C in B etc..

Inoltre mi sono permesso di cambiare effetto perchè la molla nelle prove mi faceva venire il vomito :haha:

Vedi tu se usarlo o meno... Per me sarebbe meglio rifarlo da zero con un plug-in Accordion standar;)

NETTuno Fanatic/Creative/Developers

Link al commento
Condividi su altri siti
duffy duck

duffy duck

Inviato
  • Autore
Inviato

ciao intanto grazie mille che mi aiuti, non era cosi pessima la molla, ma fa niente, solo che cosi non è come l'avevo pensato, io volevo le barre a sinistra del contenuto e con la A aperta appena caricata la pagina e le altre chiuse sul lato destro cosi che poi quando ci passi il mouse si aprono scorrendo da destra a sinistra

come andrebbe fatto in Accordation standard?

io mica me n ero accorto che questo era non standard, l ha fatto a mo di demo un ragazzo nel thread che mi hai linkato tu e l ho modificato un pochetto passandoci una giornata intera per capire come funzionava e non è che poi l ho capito piu di tanto :ghghgh:

come faccio a farlo standard cosa devo seguire?

grazie mille ancora

Link al commento
Condividi su altri siti
d0sse

d0sse

Inviato
Inviato

Ora il sito di mootools è momentaneamente down...

Devi trovare un esempio che usi il plug-in accordion:

lo riconosci perche utilizza la sintassi var nomechevuoi = my Accordion...

Ora sono un po' preso, vedo se nei prossimi giorni posso fare qualcosa.

NETTuno Fanatic/Creative/Developers

Link al commento
Condividi su altri siti
duffy duck

duffy duck

Inviato
  • Autore
Inviato

ok grazie mille, anch io in questo periodo non ho molto tempo, intanto cercherò quella sintassi poi se ti va, quando puoi naturalmente, di darmi una mano mi fai un favore;

spero per sabato di avere un libro su javascript cosi vedo di imparare le basi

grazie ancora

edit. hanno rilasciato la versione 1.2 ecco perchè era down hanno cambiato anche un po tutto nel sito, adesso ho trovato la versione con il codice di accordion non compattato cosi quando si spera imparo un po di sintassi vedo di provare a capirci un po

pero non ho capito quale devo scaricare se clicco su download si apre una pagina nel browser con il codice che faccio copio e incollo? poi per evere Accordion devo scaricarlo da more builder

oppure se scarico solo il file da more builder ha gia tutto incluso per funzionare?

Link al commento
Condividi su altri siti
duffy duck

duffy duck

Inviato
  • Autore
Inviato

ciao adesso non sono a casa quindi provo dopo, ma in conclusione devo scaricare il core da qui MooTools - download release 1.2 e poi tutti i plug-in da more builder cioè questi MooTools - MooTools 1.2 More Builder

è corretto?

e poi devono rimanere su due file separati e vanno entrambi inclusi nella pagina xhtml oppure incollo i plug-in sotto il core?

scusa se ti sto facendo domande stupide ma non ho ben capito

grazie ciao

Link al commento
Condividi su altri siti

Archiviato

Questa discussione è archiviata e chiusa a future risposte.

Vai alla lista discussioni
×
×
  • Crea Nuovo...