help!!!
Publicado por Sabrina (2 intervenciones) el 27/08/2007 17:15:39
Hola.. espero alguien me pueda ayudar, tengo un inconveniente con un javascript NO CORRE, en un principio crei q eran porblemas con el explorador pues uso konqueror, opera, galeon, firefox, e porbado con todos cuanto he podido de software libre pues no uso propietario (internet explorer), sin embargo ya infiero que el problema esta mas en el codigo del script que en el explorador... este es el codigo html:
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="css.css">
<TITLE>
</TITLE>
<script language="JavaScript"> alert ("PROBANDO")</script>
<script language="JavaScript" src="js.js"></script>
</head>
<body>
<div id="demo">
<h3>
Kwick
</h3>
<div id="kwicks_container">
<ul id="kwicks">
<li id="kwick_red" class="kwick">
<span>Red</span>
</li>
<li id="kwick_orange" class="kwick">
<span>Orange</span>
</li>
<li id="kwick_yellow" class="kwick">
<span>Yellow</span>
</li>
<li id="kwick_green" class="kwick">
<span>Green</span>
</li>
<li id="kwick_blue" class="kwick">
<span>Blue</span>
</li>
<li id="kwick_indigo" class="kwick">
<span>Indigo</span>
</li>
<li id="kwick_violet" class="kwick">
<span>Violet</span>
</li>
</ul><span class="clr"><!-- spanner --></span>
</div> </div>
</div>
<span class="clr"></span>
</div>
</div>
</body>
</html>
ESTE EL CSS:
#kwicks_container {
background-color: violet;
height: 100px;
}
#kwicks {
position: relative;
}
#kwicks .kwick {
float: left;
display: block;
width: 117px;file:///home/usuario1/Desktop/www/css.css
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;}
ESTE EL .JS
window.addEvent('domready', function(){
var szNormal = 117, szSmall = 100, szFull = 219;
var kwicks = $$("#kwicks .kwick");
var fx = new Fx.Elements(kwicks, {wait: false, duration: 300, transition: Fx.Transitions.Back.easeOut});
kwicks.each(function(kwick, i) {
kwick.addEvent("mouseenter", function(event) {
var o = {};
o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}
kwicks.each(function(other, j) {
if(i != j) {
var w = other.getStyle("width").toInt();
if(w != szSmall) o[j] = {width: [w, szSmall]};
}
});
fx.start(o);
});
});
$("kwicks").addEvent("mouseleave", function(event) {
var o = {};
kwicks.each(function(kwick, i) {
o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
});
fx.start(o);
})
});
EN ESTE LINK http://demos.mootools.net/Fx.Elements SE VIZUALIZA EL EFECTO QUE QUIERO LOGRAR... puede alguien correrlo y verificar que esta mal en mi script o decirme si le corre. MUCHAS GRACIAS.
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="css.css">
<TITLE>
</TITLE>
<script language="JavaScript"> alert ("PROBANDO")</script>
<script language="JavaScript" src="js.js"></script>
</head>
<body>
<div id="demo">
<h3>
Kwick
</h3>
<div id="kwicks_container">
<ul id="kwicks">
<li id="kwick_red" class="kwick">
<span>Red</span>
</li>
<li id="kwick_orange" class="kwick">
<span>Orange</span>
</li>
<li id="kwick_yellow" class="kwick">
<span>Yellow</span>
</li>
<li id="kwick_green" class="kwick">
<span>Green</span>
</li>
<li id="kwick_blue" class="kwick">
<span>Blue</span>
</li>
<li id="kwick_indigo" class="kwick">
<span>Indigo</span>
</li>
<li id="kwick_violet" class="kwick">
<span>Violet</span>
</li>
</ul><span class="clr"><!-- spanner --></span>
</div> </div>
</div>
<span class="clr"></span>
</div>
</div>
</body>
</html>
ESTE EL CSS:
#kwicks_container {
background-color: violet;
height: 100px;
}
#kwicks {
position: relative;
}
#kwicks .kwick {
float: left;
display: block;
width: 117px;file:///home/usuario1/Desktop/www/css.css
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;}
ESTE EL .JS
window.addEvent('domready', function(){
var szNormal = 117, szSmall = 100, szFull = 219;
var kwicks = $$("#kwicks .kwick");
var fx = new Fx.Elements(kwicks, {wait: false, duration: 300, transition: Fx.Transitions.Back.easeOut});
kwicks.each(function(kwick, i) {
kwick.addEvent("mouseenter", function(event) {
var o = {};
o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}
kwicks.each(function(other, j) {
if(i != j) {
var w = other.getStyle("width").toInt();
if(w != szSmall) o[j] = {width: [w, szSmall]};
}
});
fx.start(o);
});
});
$("kwicks").addEvent("mouseleave", function(event) {
var o = {};
kwicks.each(function(kwick, i) {
o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
});
fx.start(o);
})
});
EN ESTE LINK http://demos.mootools.net/Fx.Elements SE VIZUALIZA EL EFECTO QUE QUIERO LOGRAR... puede alguien correrlo y verificar que esta mal en mi script o decirme si le corre. MUCHAS GRACIAS.
Valora esta pregunta
0