MooTools Fx.Elements problemino..

**Iron83** · 19-03-2009, 13:58

Ciao a tutti raga,

oggi per la prima volta sto "cercando" di utilizzare MooTools. Ho iniziato con un Fx.Elements visionabile da qui il punto è che una volta che scarico il file mootools-1.2-more.js dopo aver selezionato la voce Fx.Elements e lo linko nella pagina di prova htm, lo script non funziona e non da errori. Di seguito il codice:

Codice PHP:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">



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

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













<style type="text/css">

#kwicks_container { 

    background-color: violet;

    height: 100px;

}

#kwicks {

    position: relative;

}

 

#kwicks .kwick {

    float: left;

    display: block;

    width: 117px;

    height: 100px;

}

 

#kwick_red {background-color: red;}

#kwick_orange {background-color: orange;}

#kwick_yellow {background-color: yellow;}

#kwick_green {background-color: green;}

#kwick_blue {background-color: blue;}

#kwick_indigo {background-color: indigo; color: #fff; }

#kwick_violet {background-color: violet;}

</style>



</head>



<body>

<h3>Kwick</h3>

<div id="kwicks_container">

    <ul id="kwicks">

        <li id="kwick_red" class="kwick"><span>Ciao</span>

        <li id="kwick_orange" class="kwick"><span>Orange</span>

        <li id="kwick_yellow" class="kwick"><span>Yellow</span>

        <li id="kwick_green" class="kwick"><span>Green</span>

        <li id="kwick_blue" class="kwick"><span>Blue</span>

        <li id="kwick_indigo" class="kwick"><span>Indigo</span>

        <li id="kwick_violet" class="kwick"><span>Violet</span>

    [/list]

    <span class="clr"></span>

</div>



</body>

</html>

Potete aiutarmi? Grassie

**artorius** · 19-03-2009, 14:40

forse perché devi importare anche il Core di Mootools, perché funzioni

**Xinod** · 19-03-2009, 14:46

e il resto di mootools dov' e'?
more, come spiega il nome stesso, e' un aggiunta al core (la base di mootools)

considera anche che tu stai vedendo esempi per la versione 1.11 quando la libreria che vai a scaricare e' la 1.2, per certe cose, senza adeguate modifiche, incompatibile

**Iron83** · 26-03-2009, 15:10

Intanto grazie mille per le risposte, il fatto è che ho scaricato tutto lo script mouseenter dal link nella home "Demos" se lo scompatto così com'è trovo:

Mootools.js

cartella Mouseenter contenente:

demo.js
index.html
demo.css

Ora una volta scompattato lo script funziona a perfezione. Quando lo inserisco nella mia bella paginina linkando le pagine mootools.js e demo.js

Codice PHP:


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

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

</head>



<body>



<div id="myOtherElement">

        <span>[b]Menu[/b]</span>

        <div>

            [url="#"]Menuelement 1[/url]

            [url="#"]Menuelement 2[/url]

            [url="#"]Menuelement 3[/url]

        </div>

    </div>

inserenso la div con id="myOtherElement" ed inserendo il contenuto di demo.css nel mio css non funziona nulla... Nella console di errori di firefox non c'è scritto niente, anzi mi dice 0 errori ma non funziona. In IE 7 non funziona e mi da questi errori:

Linea 5 carattere 3 "Null" è nullo o non è un oggetto

Linea 249 carattere 1 propietà o metodi non supportati dall'oggetto

Il codice Mootools che ho inserito nella index.html è esclusivamente quello che ho postato. Ci tengo a precisare che sto testando il tutto in locale..

**artorius** · 26-03-2009, 15:39

alquanto probabile che NON sia lo script completo, quello lo trovi qui: http://mootools.net/download/get/moo...2.1-core-nc.js ( è quello non compresso, ti conviene usarlo se fai delle prove, poi in produzione lo cambi con quello compresso: http://mootools.net/download/get/moo...2.1-core-yc.js )

Mentre i plugin come Fx.Elements lo devi scaricare con il builder: http://mootools.net/more

Ti conviene prendere tutto in modo che per fare le prove vada tutto al primo colpo.

Prova ad usare quelli, poi per far andare Fx.Elements:

codice:

<style type="text/css">
#myOtherElement a{
   display: block;
   width: 150px;
   height: 50px;
   float: left;
}
.Blue{
   background-color: blue;
}
.Red{
   background-color: red;
}
.Green{
   background-color: green;
}
</style>
<script type="text/javascript" src="js/mootools-1.2.1-core-nc.js"></script>
<script type="text/javascript" src="js/mootools-1.2-more.js"></script>
<script type="text/javascript">
   var maxWidth = 200, minWidth = 125, normalWidth = 150; 
   window.addEvent('domready',  function(){
       var allElements = $$("#myOtherElement a");
       var myFX = new Fx.Elements(allElements);
       allElements.each(function(item, ind){
           item.addEvents({
              'mouseenter' : function(){
                  var obj = {};
                  allElements.each(function(i, index){
                       if(index == ind){
                          obj[index] = {'width' : maxWidth};
                       }else{
                          obj[index] = {'width' : minWidth};
                       }
                  });
                  myFX.start(obj);
              }
           });
       });
	  $$('#myOtherElement div').getLast().addEvent('mouseleave' , function(){
          var obj = {};
          allElements.each(function(i, index){
               obj[index] = {'width' : normalWidth};
          })
          myFX.start(obj);
      })
   });
</script>
<div id="myOtherElement">
    <span>Menu</span>
    <div>
        Menuelement 1
        Menuelement 2
        Menuelement 3
    </div>
</div>

**Iron83** · 26-03-2009, 16:02

grazie mille della risposta artorius

,

ho scaricato il file NON compresso l'ho linkato così:

<script type="text/javascript" src="js/mootools-1.2.1-core-nc.js"></script>
<script type="text/javascript" src="js/Mouseenter/demo.js"></script>

l'errore non c'è più ma lo script non funziona, è possibile che per inserire mootools bisogna sclerare

così tanto? ma soprattutto una guida in ITALIANO esiste?
Sicuramente sbaglierò io qualche passo non avendo mai aggiunto un framework quale mootools, ma non capisco dove

**artorius** · 26-03-2009, 16:25

ed il MORE?????? hai letto il codice che ti ho postato???!??!?!

<script type="text/javascript" src="js/mootools-1.2.1-core-nc.js"></script>
<script type="text/javascript" src="js/mootools-1.2-more.js"></script>

Fx.Elements È PARTE DEL MORE, SENZA NON FUNZIONA!

**Iron83** · 26-03-2009, 16:42

artorius, al momento mi occorre far funzionare solo il mouseenter

<script type="text/javascript" src="js/mootools-1.2.1-core-nc.js"></script>
<script type="text/javascript" src="js/mootools-1.2-more.js"></script>
<script type="text/javascript" src="js/Mouseenter/demo.js"></script>

ho provato a togliere demo.js aggiungerlo ma niente, stessa roba per il core ed il more proprio non ho capito come farlo andare

**artorius** · 26-03-2009, 16:46

ma allora che c'entra Fx.Elements????

Cos'è che vuoi fare esattamente?

**Iron83** · 26-03-2009, 16:51

Allora all'inizio era quello che mi serviva, ho trovato uno script modificato e l'ho fatto funzionare.

Ora mi serve solamente l'evento mouseenter per abbinarlo a dei pulsanti di navigazione per avere l'animazione sui pulsanti stessi. Il punto è che quando scarico la demo da qui e la scompatto lasciando l'ordine che c'è nello zip lo script funziona tranquillamente. Quando vado ad inserire all'interno della mia homepage.html i link alle pagine demo.js e mootools.js, la div con l'id myelement e inserisco il contenuto del demo.css nel mio css lo script non funziona

ma non da errori. Spero di essere stato chiaro. Ti ringrazio intanto per il supporto tecnico

Discussione: MooTools Fx.Elements problemino..

Strumenti discussione

Ricerca discussione

Visualizza

MooTools Fx.Elements problemino..

Permessi di invio