Newsgrupos.com  

Retroceder   Newsgrupos.com > Forum > Newsgroup es.comp.* Foro > Newsgroup es.comp.infosistemas.www.paginas-web
Problema con un JavaScript Problema con un JavaScript
Registrarse Preguntas Frecuentes Lista de Foreros Calendario Buscar Temas de Hoy Marcar Foros Como Leídos




Respuesta
 
LinkBack Herramientas Desplegado
  #1 (permalink)  
Antiguo 11-02-2008, 11:58:13
David
 
Mensajes: n/a
Predeterminado Problema con un JavaScript
Tengo un reloj analógico creado con un JavaScript, cogido de una web el
script, este reloj se muestra en la esquina inferior derecha de la
página web donde se incluya, permaneciendo el reloj en el mismo punto
aunque la página se desplace. Lo he probado en una página creada con
tablas y funciona correctamente mostrándose el reloj sobre las
diferentes cosas que tenga la citada página al desplazar la misma de
arriba abajo viéndose el reloj sin ningún tipo de problema.

Ahora viene el problema, al desear mostrar el citado reloj en otra
página donde no utilizo tablas para el posicionamiento de las diferentes
imágenes y textos, en vez de tablas utilizo hojas de estilo (CSS) para
el posicionamiento de los diferentes componentes en esta página, en esta
página con Firefox sólo se ve un garabatito pequeño en la esquina
superior izquierda y este garabatito no se desplaza ni se ve en la
posición correcta (esquina inferior derecha), con IE se ve el reloj,
sólo los números no las agujas, a el mismo nivel que el garabato pero en
el lado derecho.

La página del problema tiene esta estructura, haber si alguien me puede
indicar ¿por qué no se ve el reloj como la que utiliza las tablas?

<!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" xml:lang="en"
lang="en">
<head>
<!--Force IE6 into quirks mode with this comment tag-->
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<script type="text/javascript"
src="libreria_js/reloj_analogico.js">
</script>
<link rel="stylesheet" type="text/css"
href="estilos/indice_noticias.css" />
<style type="text/css">
</style>
</head>
<body class="margenes_y_fondo">
<!-- -->
<div id="cabecera"> <img
src="imagenes/cabecera_indice.gif" height="150"
width="550" /></div>
<div id="esquina_izquierda">
<p><a href="../index.html">Volver atr&aacute;s</a></p>
</div>
<div id="contenedor_principal"><!-- maincontent -->
<p class="arriba"><b> </b></p>
<div id="lista_izquierda">
<ul>
<li><a href="pdf/boletin.pdf">bla, bla </a><br />
<div id="resumen">bbbbbbbbbb </div>
</li>
<li><a href="07.pdf">bbbbb </a>
<div id="resumen">mmmmmmmm </div>
</li>

</ul>
</div>
<!-- lista izquierda -->
<div id="lista_derecha">
<ul>
<li><a href="pdf06.pdf">bbbbbb</a><br />
<div id="resumen">mmmmmmmm </div>
</li>
<li><a href="pdf33.pdf">bbbbbbbb</a><br />
<div id="resumen">nnnnn </div>
</li>

</ul>
</div>
<!-- lista_derecha -->
</div>
<!-- de maincontent -->
<script>
clock();
</script>
</body>
</html>


************************* HOJA DE ESTILO **********************
#cabecera{
top: 0;
left: 120px;
height: 150px;
text-align: center;
z-index: 1;
}

#contenedor_principal{
position: absolute;
top: 158px;
left: 130px;
right: 130px;
z-index: 1;
}
#lista_izquierda, #lista_derecha{
position: absolute; /*fixed; con fixed solo se ve una columna */
top: 60px; /* */
width: 50%;
z-index: 1;
}
#lista_derecha{
left: 50%;
}
#resumen{
font-size: 83%; /*small;*/
}
p.arriba{
top: 0;
text-align: center;
font-size: medium; /* small; */
font-family: Arial,Times,Courier;/* no influye en el fondo*/
border-style: double;
border-left: 0;
border-right: 0;
left: 135px;
right: 130px;
width: 100%;
}
#esquina_izquierda, #esquina_derecha{
position: absolute;
font-family: Arial,Times,Courier;
top: 25px;
font-size: large;
font-weight: 900;
Z-index: 1;

}
#esquina_izquierda{
left: 15px;
width: 125px;
}
..margenes_y_fondo{
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
margin-right: 0px;
background-color: rgb(0, 235, 255);
background-image:url('../../Imagenes/tira_degradado_24bit.png');
background-repeat: repeat-x;
background-attachment: fixed;
}

****************************EL DICHOSO RELOJ ************************


fCol='444444'; //face colour.
sCol='FF0000'; //seconds colour.
mCol='444444'; //minutes colour.
hCol='444444'; //hours colour.

Ybase=30; //Clock height.
Xbase=30; //Clock width.


H='...';
H=H.split('');
M='....';
M=M.split('');
S='.....';
S=S.split('');

NS4=(document.layers);
NS6=(document.getElementById && !document.all);
IE4=(document.all);

Ypos=0;
Xpos=0;
dots=12;

Split=360/dots;

if (NS6){
for (i=1; i < dots+1; i++){
document.write('<div id="n6Digits'+i+'"
style="position:absolute;top:0px;left:0px;width:30 px;height:30px;font-family:Arial;font-size:10px;color:#'+fCol+';text-align:center;padding-top:10px;z-index:2">'+i+'</div>');
}

for (i=0; i < M.length; i++){
document.write('<div id="Ny'+i+'"
style="position:absolute;top:0px;left:0px;width:2p x;height:2px;font-size:2px;z-index:2;background:#'+mCol+'"></div>');
}
for (i=0; i < H.length; i++){
document.write('<div id="Nz'+i+'"
style="position:absolute;top:0px;left:0px;width:2p x;height:2px;font-size:2px;z-index:2;background:#'+hCol+'"></div>');
}
for (i=0; i < S.length; i++){
document.write('<div id="Nx'+i+'"
style="position:absolute;top:0px;left:0px;width:2p x;height:2px;font-size:2px;z-index:2;background:#'+sCol+'"></div>');
}
}
if (NS4){
dgts='1 2 3 4 5 6 7 8 9 10 11 12';
dgts=dgts.split(' ')
for (i=0; i < dots; i++){
document.write('<layer name=nsDigits'+i+' top=0 left=0 height=30
width=30><center><font face=Arial size=1
color='+fCol+'>'+dgts[i]+'</font></center></layer>');
}
for (i=0; i < M.length; i++){
document.write('<layer name=ny'+i+' top=0 left=0 bgcolor='+mCol+'
clip="0,0,2,2"></layer>');
}
for (i=0; i < H.length; i++){
document.write('<layer name=nz'+i+' top=0 left=0 bgcolor='+hCol+'
clip="0,0,2,2"></layer>');
}
for (i=0; i < S.length; i++){
document.write('<layer name=nx'+i+' top=0 left=0 bgcolor='+sCol+'
clip="0,0,2,2"></layer>');
}
}
if (IE4){
document.write('<div
style="position:absolute;top:0px;left:0px;z-index:2;"><div
style="position:relative;z-index:2;">');
for (i=1; i < dots+1; i++){
document.write('<div id="ieDigits"
style="position:absolute;top:0px;left:0px;width:30 px;height:30px;z-index:2;font-family:Arial;font-size:10px;color:'+fCol+';text-align:center;padding-top:10px">'+i+'</div>');
}
document.write('</div></div>')
document.write('<div
style="position:absolute;top:0px;left:0px;z-index:2;"> <div
style="position:relative;z-index:2;">');
for (i=0; i < M.length; i++){
document.write('<div id=y
style="position:absolute;width:2px;height:2px;font-size:2px;z-index:2;background:'+mCol+'"></div>');
}
document.write('</div></div>')
document.write('<div
style="position:absolute;top:0px;left:0px;z-index:2"> <div
style="position:relative;z-index:2">');
for (i=0; i < H.length; i++){
document.write('<div id=z
style="position:absolute;width:2px;height:2px;font-size:2px;z-index:2;background:'+hCol+'"></div>');
}
document.write('</div></div>')
document.write('<div
style="position:absolute;top:0px;left:0px;z-index:2"><div
style="position:relative;z-index:2">');
for (i=0; i < S.length; i++){
document.write('<div id=x
style="position:absolute;width:2px;height:2px;font-size:2px;z-index:2;
background:'+sCol+'"></div>');
}
document.write('</div></div>')
}



function clock(){
time = new Date ();
secs = time.getSeconds();
sec = -1.57 + Math.PI * secs/30;
mins = time.getMinutes();
min = -1.57 + Math.PI * mins/30;
hr = time.getHours();
hrs = -1.57 + Math.PI * hr/6 + Math.PI*parseInt(time.getMinutes())/360;

if (NS6){
Ypos=window.pageYOffset+window.innerHeight-Ybase-25;
Xpos=window.pageXOffset+window.innerWidth-Xbase-30;
for (i=1; i < dots+1; i++){

document.getElementById("n6Digits"+i).style.top=Yp os-15+Ybase*Math.sin(-1.56
+i *Split*Math.PI/180)

document.getElementById("n6Digits"+i).style.left=X pos-15+Xbase*Math.cos(-1.56
+i*Split*Math.PI/180)
}
for (i=0; i < S.length; i++){

document.getElementById("Nx"+i).style.top=Ypos+i*Y base/4.1*Math.sin(sec);

document.getElementById("Nx"+i).style.left=Xpos+i* Xbase/4.1*Math.cos(sec);
}
for (i=0; i < M.length; i++){

document.getElementById("Ny"+i).style.top=Ypos+i*Y base/4.1*Math.sin(min);

document.getElementById("Ny"+i).style.left=Xpos+i* Xbase/4.1*Math.cos(min);
}
for (i=0; i < H.length; i++){

document.getElementById("Nz"+i).style.top=Ypos+i*Y base/4.1*Math.sin(hrs);

document.getElementById("Nz"+i).style.left=Xpos+i* Xbase/4.1*Math.cos(hrs);
}
}
if (NS4){
Ypos=window.pageYOffset+window.innerHeight-Ybase-20;
Xpos=window.pageXOffset+window.innerWidth-Xbase-30;
for (i=0; i < dots; ++i){
document.layers["nsDigits"+i].top=Ypos-5+Ybase*Math.sin(-1.045
+i*Split*Math.PI/180)
document.layers["nsDigits"+i].left=Xpos-15+Xbase*Math.cos(-1.045
+i*Split*Math.PI/180)
}
for (i=0; i < S.length; i++){
document.layers["nx"+i].top=Ypos+i*Ybase/4.1*Math.sin(sec);
document.layers["nx"+i].left=Xpos+i*Xbase/4.1*Math.cos(sec);
}
for (i=0; i < M.length; i++){
document.layers["ny"+i].top=Ypos+i*Ybase/4.1*Math.sin(min);
document.layers["ny"+i].left=Xpos+i*Xbase/4.1*Math.cos(min);
}
for (i=0; i < H.length; i++){
document.layers["nz"+i].top=Ypos+i*Ybase/4.1*Math.sin(hrs);
document.layers["nz"+i].left=Xpos+i*Xbase/4.1*Math.cos(hrs);
}
}

if (IE4){

Ypos=document.body.scrollTop+window.document.body. clientHeight-Ybase-20;

Xpos=document.body.scrollLeft+window.document.body .clientWidth-Xbase-20;
for (i=0; i < dots; ++i){
ieDigits[i].style.pixelTop=Ypos-15+Ybase*Math.sin(-1.045 +i
*Split*Math.PI/180)
ieDigits[i].style.pixelLeft=Xpos-15+Xbase*Math.cos(-1.045 +i
*Split*Math.PI/180)
}
for (i=0; i < S.length; i++){
x[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(sec);
x[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(sec);
}
for (i=0; i < M.length; i++){
y[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(min);
y[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(min);
}
for (i=0; i < H.length; i++){
z[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(hrs);
z[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(hrs);
}
}
setTimeout('clock()',100);
}
// clock();
//-->

/*
Para incluir esta librería, que sólo muestra un reloj, hay que poner en
la zona HEAD de
la página web lo siguiente.

<HEAD>
<script type="text/javascript"
src="libreria_js/reloj_analogico.js">
</script>
</HEAD>

y para usarla, es decir ver el reloj en la página web, hay que colocar
lo siguiente dentro
del BODY de la página

<BODY>

<script>
clock();
</script>

</BODY>

*/
************************************************** ********************

Responder Con Cita
Alt Today
Advertising
Google Adsense 		 
This advertising will not be shown
in this way to registered members.
Register your free account today
and become a member on
Newsgrupos.com
Standard Sponsored Links
  #2 (permalink)  
Antiguo 12-02-2008, 11:52:52
DrPanic
 
Mensajes: n/a
Predeterminado Re: Problema con un JavaScript

¿La tienes colgada en algún sitio?

Llámame perezoso, pero me cuesta eso de andar copiando y pegando.

On Mon, 11 Feb 2008 13:58:13 +0100, David <email.falso***eurociber.es>
wrote:

>Tengo un reloj analógico creado con un JavaScript, cogido de una web el
>script, este reloj se muestra en la esquina inferior derecha de la
>página web donde se incluya, permaneciendo el reloj en el mismo punto
>aunque la página se desplace. Lo he probado en una página creada con
>tablas y funciona correctamente mostrándose el reloj sobre las
>diferentes cosas que tenga la citada página al desplazar la misma de
>arriba abajo viéndose el reloj sin ningún tipo de problema.
>
>Ahora viene el problema, al desear mostrar el citado reloj en otra
>página donde no utilizo tablas para el posicionamiento de las diferentes
>imágenes y textos, en vez de tablas utilizo hojas de estilo (CSS) para
>el posicionamiento de los diferentes componentes en esta página, en esta
>página con Firefox sólo se ve un garabatito pequeño en la esquina
>superior izquierda y este garabatito no se desplaza ni se ve en la
>posición correcta (esquina inferior derecha), con IE se ve el reloj,
>sólo los números no las agujas, a el mismo nivel que el garabato pero en
>el lado derecho.
>
>La página del problema tiene esta estructura, haber si alguien me puede
>indicar ¿por qué no se ve el reloj como la que utiliza las tablas?
>
><!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" xml:lang="en"
> lang="en">
><head>
><!--Force IE6 into quirks mode with this comment tag-->
> <meta http-equiv="Content-Type"
> content="text/html; charset=iso-8859-1" />
> <script type="text/javascript"
> src="libreria_js/reloj_analogico.js">
> </script>
> <link rel="stylesheet" type="text/css"
> href="estilos/indice_noticias.css" />
> <style type="text/css">
> </style>
></head>
><body class="margenes_y_fondo">
><!-- -->
><div id="cabecera"> <img
> src="imagenes/cabecera_indice.gif" height="150"
> width="550" /></div>
><div id="esquina_izquierda">
><p><a href="../index.html">Volver atr&aacute;s</a></p>
></div>
><div id="contenedor_principal"><!-- maincontent -->
><p class="arriba"><b> </b></p>
><div id="lista_izquierda">
><ul>
> <li><a href="pdf/boletin.pdf">bla, bla </a><br />
> <div id="resumen">bbbbbbbbbb </div>
> </li>
> <li><a href="07.pdf">bbbbb </a>
> <div id="resumen">mmmmmmmm </div>
> </li>
>
></ul>
></div>
><!-- lista izquierda -->
><div id="lista_derecha">
><ul>
> <li><a href="pdf06.pdf">bbbbbb</a><br />
> <div id="resumen">mmmmmmmm </div>
> </li>
> <li><a href="pdf33.pdf">bbbbbbbb</a><br />
> <div id="resumen">nnnnn </div>
> </li>
>
></ul>
></div>
><!-- lista_derecha -->
></div>
><!-- de maincontent -->
><script>
>clock();
></script>
></body>
></html>
>
>
>************************* HOJA DE ESTILO **********************
>#cabecera{
> top: 0;
> left: 120px;
> height: 150px;
> text-align: center;
> z-index: 1;
>}
>
>#contenedor_principal{
> position: absolute;
> top: 158px;
> left: 130px;
> right: 130px;
> z-index: 1;
>}
>#lista_izquierda, #lista_derecha{
> position: absolute; /*fixed; con fixed solo se ve una columna */
> top: 60px; /* */
> width: 50%;
> z-index: 1;
>}
>#lista_derecha{
> left: 50%;
>}
>#resumen{
> font-size: 83%; /*small;*/
>}
>p.arriba{
> top: 0;
> text-align: center;
> font-size: medium; /* small; */
> font-family: Arial,Times,Courier;/* no influye en el fondo*/
> border-style: double;
> border-left: 0;
> border-right: 0;
> left: 135px;
> right: 130px;
> width: 100%;
>}
>#esquina_izquierda, #esquina_derecha{
> position: absolute;
> font-family: Arial,Times,Courier;
> top: 25px;
> font-size: large;
> font-weight: 900;
> Z-index: 1;
>
>}
>#esquina_izquierda{
> left: 15px;
> width: 125px;
>}
>.margenes_y_fondo{
> margin-top: 0px;
> margin-left: 0px;
> margin-bottom: 0px;
> margin-right: 0px;
> background-color: rgb(0, 235, 255);
> background-image:url('../../Imagenes/tira_degradado_24bit.png');
> background-repeat: repeat-x;
> background-attachment: fixed;
>}
>
>****************************EL DICHOSO RELOJ ************************
>
>
>fCol='444444'; //face colour.
>sCol='FF0000'; //seconds colour.
>mCol='444444'; //minutes colour.
>hCol='444444'; //hours colour.
>
>Ybase=30; //Clock height.
>Xbase=30; //Clock width.
>
>
>H='...';
>H=H.split('');
>M='....';
>M=M.split('');
>S='.....';
>S=S.split('');
>
>NS4=(document.layers);
>NS6=(document.getElementById && !document.all);
>IE4=(document.all);
>
>Ypos=0;
>Xpos=0;
>dots=12;
>
>Split=360/dots;
>
>if (NS6){
> for (i=1; i < dots+1; i++){
> document.write('<div id="n6Digits'+i+'"
>style="position:absolute;top:0px;left:0px;width:3 0px;height:30px;font-family:Arial;font-size:10px;color:#'+fCol+';text-align:center;padding-top:10px;z-index:2">'+i+'</div>');
> }
>
> for (i=0; i < M.length; i++){
> document.write('<div id="Ny'+i+'"
>style="position:absolute;top:0px;left:0px;width:2 px;height:2px;font-size:2px;z-index:2;background:#'+mCol+'"></div>');
> }
> for (i=0; i < H.length; i++){
> document.write('<div id="Nz'+i+'"
>style="position:absolute;top:0px;left:0px;width:2 px;height:2px;font-size:2px;z-index:2;background:#'+hCol+'"></div>');
> }
> for (i=0; i < S.length; i++){
> document.write('<div id="Nx'+i+'"
>style="position:absolute;top:0px;left:0px;width:2 px;height:2px;font-size:2px;z-index:2;background:#'+sCol+'"></div>');
> }
>}
>if (NS4){
> dgts='1 2 3 4 5 6 7 8 9 10 11 12';
> dgts=dgts.split(' ')
> for (i=0; i < dots; i++){
> document.write('<layer name=nsDigits'+i+' top=0 left=0 height=30
>width=30><center><font face=Arial size=1
>color='+fCol+'>'+dgts[i]+'</font></center></layer>');
> }
> for (i=0; i < M.length; i++){
> document.write('<layer name=ny'+i+' top=0 left=0 bgcolor='+mCol+'
>clip="0,0,2,2"></layer>');
> }
> for (i=0; i < H.length; i++){
> document.write('<layer name=nz'+i+' top=0 left=0 bgcolor='+hCol+'
>clip="0,0,2,2"></layer>');
> }
> for (i=0; i < S.length; i++){
> document.write('<layer name=nx'+i+' top=0 left=0 bgcolor='+sCol+'
>clip="0,0,2,2"></layer>');
> }
>}
>if (IE4){
> document.write('<div
>style="position:absolute;top:0px;left:0px;z-index:2;"><div
>style="position:relative;z-index:2;">');
> for (i=1; i < dots+1; i++){
> document.write('<div id="ieDigits"
>style="position:absolute;top:0px;left:0px;width:3 0px;height:30px;z-index:2;font-family:Arial;font-size:10px;color:'+fCol+';text-align:center;padding-top:10px">'+i+'</div>');
> }
> document.write('</div></div>')
> document.write('<div
>style="position:absolute;top:0px;left:0px;z-index:2;"> <div
>style="position:relative;z-index:2;">');
> for (i=0; i < M.length; i++){
> document.write('<div id=y
>style="position:absolute;width:2px;height:2px;fon t-size:2px;z-index:2;background:'+mCol+'"></div>');
> }
> document.write('</div></div>')
> document.write('<div
>style="position:absolute;top:0px;left:0px;z-index:2"> <div
>style="position:relative;z-index:2">');
> for (i=0; i < H.length; i++){
> document.write('<div id=z
>style="position:absolute;width:2px;height:2px;fon t-size:2px;z-index:2;background:'+hCol+'"></div>');
> }
> document.write('</div></div>')
> document.write('<div
>style="position:absolute;top:0px;left:0px;z-index:2"><div
>style="position:relative;z-index:2">');
> for (i=0; i < S.length; i++){
> document.write('<div id=x
>style="position:absolute;width:2px;height:2px;fon t-size:2px;z-index:2;
>background:'+sCol+'"></div>');
> }
> document.write('</div></div>')
>}
>
>
>
>function clock(){
> time = new Date ();
> secs = time.getSeconds();
> sec = -1.57 + Math.PI * secs/30;
> mins = time.getMinutes();
> min = -1.57 + Math.PI * mins/30;
> hr = time.getHours();
> hrs = -1.57 + Math.PI * hr/6 + Math.PI*parseInt(time.getMinutes())/360;
>
> if (NS6){
> Ypos=window.pageYOffset+window.innerHeight-Ybase-25;
> Xpos=window.pageXOffset+window.innerWidth-Xbase-30;
> for (i=1; i < dots+1; i++){
>
>document.getElementById("n6Digits"+i).style.top=Y pos-15+Ybase*Math.sin(-1.56
>+i *Split*Math.PI/180)
>
>document.getElementById("n6Digits"+i).style.left= Xpos-15+Xbase*Math.cos(-1.56
>+i*Split*Math.PI/180)
> }
> for (i=0; i < S.length; i++){
>
>document.getElementById("Nx"+i).style.top=Ypos+i* Ybase/4.1*Math.sin(sec);
>
>document.getElementById("Nx"+i).style.left=Xpos+i *Xbase/4.1*Math.cos(sec);
> }
> for (i=0; i < M.length; i++){
>
>document.getElementById("Ny"+i).style.top=Ypos+i* Ybase/4.1*Math.sin(min);
>
>document.getElementById("Ny"+i).style.left=Xpos+i *Xbase/4.1*Math.cos(min);
> }
> for (i=0; i < H.length; i++){
>
>document.getElementById("Nz"+i).style.top=Ypos+i* Ybase/4.1*Math.sin(hrs);
>
>document.getElementById("Nz"+i).style.left=Xpos+i *Xbase/4.1*Math.cos(hrs);
> }
> }
> if (NS4){
> Ypos=window.pageYOffset+window.innerHeight-Ybase-20;
> Xpos=window.pageXOffset+window.innerWidth-Xbase-30;
> for (i=0; i < dots; ++i){
> document.layers["nsDigits"+i].top=Ypos-5+Ybase*Math.sin(-1.045
>+i*Split*Math.PI/180)
> document.layers["nsDigits"+i].left=Xpos-15+Xbase*Math.cos(-1.045
>+i*Split*Math.PI/180)
> }
> for (i=0; i < S.length; i++){
> document.layers["nx"+i].top=Ypos+i*Ybase/4.1*Math.sin(sec);
> document.layers["nx"+i].left=Xpos+i*Xbase/4.1*Math.cos(sec);
> }
> for (i=0; i < M.length; i++){
> document.layers["ny"+i].top=Ypos+i*Ybase/4.1*Math.sin(min);
> document.layers["ny"+i].left=Xpos+i*Xbase/4.1*Math.cos(min);
> }
> for (i=0; i < H.length; i++){
> document.layers["nz"+i].top=Ypos+i*Ybase/4.1*Math.sin(hrs);
> document.layers["nz"+i].left=Xpos+i*Xbase/4.1*Math.cos(hrs);
> }
> }
>
> if (IE4){
>
>Ypos=document.body.scrollTop+window.document.body .clientHeight-Ybase-20;
>
>Xpos=document.body.scrollLeft+window.document.bod y.clientWidth-Xbase-20;
> for (i=0; i < dots; ++i){
> ieDigits[i].style.pixelTop=Ypos-15+Ybase*Math.sin(-1.045 +i
>*Split*Math.PI/180)
> ieDigits[i].style.pixelLeft=Xpos-15+Xbase*Math.cos(-1.045 +i
>*Split*Math.PI/180)
> }
> for (i=0; i < S.length; i++){
> x[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(sec);
> x[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(sec);
> }
> for (i=0; i < M.length; i++){
> y[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(min);
> y[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(min);
> }
> for (i=0; i < H.length; i++){
> z[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(hrs);
> z[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(hrs);
> }
> }
> setTimeout('clock()',100);
>}
>// clock();
>//-->
>
>/*
>Para incluir esta librería, que sólo muestra un reloj, hay que poner en
>la zona HEAD de
>la página web lo siguiente.
>
><HEAD>
> <script type="text/javascript"
> src="libreria_js/reloj_analogico.js">
> </script>
></HEAD>
>
>y para usarla, es decir ver el reloj en la página web, hay que colocar
>lo siguiente dentro
>del BODY de la página
>
><BODY>
>
><script>
> clock();
></script>
>
></BODY>
>
>*/
>************************************************* *********************
>

--
DrPanic EChM#215
Responder Con Cita
  #3 (permalink)  
Antiguo 12-02-2008, 11:52:52
DrPanic
 
Mensajes: n/a
Predeterminado Re: Problema con un JavaScript

¿La tienes colgada en algún sitio?

Llámame perezoso, pero me cuesta eso de andar copiando y pegando.

On Mon, 11 Feb 2008 13:58:13 +0100, David <email.falso***eurociber.es>
wrote:

>Tengo un reloj analógico creado con un JavaScript, cogido de una web el
>script, este reloj se muestra en la esquina inferior derecha de la
>página web donde se incluya, permaneciendo el reloj en el mismo punto
>aunque la página se desplace. Lo he probado en una página creada con
>tablas y funciona correctamente mostrándose el reloj sobre las
>diferentes cosas que tenga la citada página al desplazar la misma de
>arriba abajo viéndose el reloj sin ningún tipo de problema.
>
>Ahora viene el problema, al desear mostrar el citado reloj en otra
>página donde no utilizo tablas para el posicionamiento de las diferentes
>imágenes y textos, en vez de tablas utilizo hojas de estilo (CSS) para
>el posicionamiento de los diferentes componentes en esta página, en esta
>página con Firefox sólo se ve un garabatito pequeño en la esquina
>superior izquierda y este garabatito no se desplaza ni se ve en la
>posición correcta (esquina inferior derecha), con IE se ve el reloj,
>sólo los números no las agujas, a el mismo nivel que el garabato pero en
>el lado derecho.
>
>La página del problema tiene esta estructura, haber si alguien me puede
>indicar ¿por qué no se ve el reloj como la que utiliza las tablas?
>
><!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" xml:lang="en"
> lang="en">
><head>
><!--Force IE6 into quirks mode with this comment tag-->
> <meta http-equiv="Content-Type"
> content="text/html; charset=iso-8859-1" />
> <script type="text/javascript"
> src="libreria_js/reloj_analogico.js">
> </script>
> <link rel="stylesheet" type="text/css"
> href="estilos/indice_noticias.css" />
> <style type="text/css">
> </style>
></head>
><body class="margenes_y_fondo">
><!-- -->
><div id="cabecera"> <img
> src="imagenes/cabecera_indice.gif" height="150"
> width="550" /></div>
><div id="esquina_izquierda">
><p><a href="../index.html">Volver atr&aacute;s</a></p>
></div>
><div id="contenedor_principal"><!-- maincontent -->
><p class="arriba"><b> </b></p>
><div id="lista_izquierda">
><ul>
> <li><a href="pdf/boletin.pdf">bla, bla </a><br />
> <div id="resumen">bbbbbbbbbb </div>
> </li>
> <li><a href="07.pdf">bbbbb </a>
> <div id="resumen">mmmmmmmm </div>
> </li>
>
></ul>
></div>
><!-- lista izquierda -->
><div id="lista_derecha">
><ul>
> <li><a href="pdf06.pdf">bbbbbb</a><br />
> <div id="resumen">mmmmmmmm </div>
> </li>
> <li><a href="pdf33.pdf">bbbbbbbb</a><br />
> <div id="resumen">nnnnn </div>
> </li>
>
></ul>
></div>
><!-- lista_derecha -->
></div>
><!-- de maincontent -->
><script>
>clock();
></script>
></body>
></html>
>
>
>************************* HOJA DE ESTILO **********************
>#cabecera{
> top: 0;
> left: 120px;
> height: 150px;
> text-align: center;
> z-index: 1;
>}
>
>#contenedor_principal{
> position: absolute;
> top: 158px;
> left: 130px;
> right: 130px;
> z-index: 1;
>}
>#lista_izquierda, #lista_derecha{
> position: absolute; /*fixed; con fixed solo se ve una columna */
> top: 60px; /* */
> width: 50%;
> z-index: 1;
>}
>#lista_derecha{
> left: 50%;
>}
>#resumen{
> font-size: 83%; /*small;*/
>}
>p.arriba{
> top: 0;
> text-align: center;
> font-size: medium; /* small; */
> font-family: Arial,Times,Courier;/* no influye en el fondo*/
> border-style: double;
> border-left: 0;
> border-right: 0;
> left: 135px;
> right: 130px;
> width: 100%;
>}
>#esquina_izquierda, #esquina_derecha{
> position: absolute;
> font-family: Arial,Times,Courier;
> top: 25px;
> font-size: large;
> font-weight: 900;
> Z-index: 1;
>
>}
>#esquina_izquierda{
> left: 15px;
> width: 125px;
>}
>.margenes_y_fondo{
> margin-top: 0px;
> margin-left: 0px;
> margin-bottom: 0px;
> margin-right: 0px;
> background-color: rgb(0, 235, 255);
> background-image:url('../../Imagenes/tira_degradado_24bit.png');
> background-repeat: repeat-x;
> background-attachment: fixed;
>}
>
>****************************EL DICHOSO RELOJ ************************
>
>
>fCol='444444'; //face colour.
>sCol='FF0000'; //seconds colour.
>mCol='444444'; //minutes colour.
>hCol='444444'; //hours colour.
>
>Ybase=30; //Clock height.
>Xbase=30; //Clock width.
>
>
>H='...';
>H=H.split('');
>M='....';
>M=M.split('');
>S='.....';
>S=S.split('');
>
>NS4=(document.layers);
>NS6=(document.getElementById && !document.all);
>IE4=(document.all);
>
>Ypos=0;
>Xpos=0;
>dots=12;
>
>Split=360/dots;
>
>if (NS6){
> for (i=1; i < dots+1; i++){
> document.write('<div id="n6Digits'+i+'"
>style="position:absolute;top:0px;left:0px;width:3 0px;height:30px;font-family:Arial;font-size:10px;color:#'+fCol+';text-align:center;padding-top:10px;z-index:2">'+i+'</div>');
> }
>
> for (i=0; i < M.length; i++){
> document.write('<div id="Ny'+i+'"
>style="position:absolute;top:0px;left:0px;width:2 px;height:2px;font-size:2px;z-index:2;background:#'+mCol+'"></div>');
> }
> for (i=0; i < H.length; i++){
> document.write('<div id="Nz'+i+'"
>style="position:absolute;top:0px;left:0px;width:2 px;height:2px;font-size:2px;z-index:2;background:#'+hCol+'"></div>');
> }
> for (i=0; i < S.length; i++){
> document.write('<div id="Nx'+i+'"
>style="position:absolute;top:0px;left:0px;width:2 px;height:2px;font-size:2px;z-index:2;background:#'+sCol+'"></div>');
> }
>}
>if (NS4){
> dgts='1 2 3 4 5 6 7 8 9 10 11 12';
> dgts=dgts.split(' ')
> for (i=0; i < dots; i++){
> document.write('<layer name=nsDigits'+i+' top=0 left=0 height=30
>width=30><center><font face=Arial size=1
>color='+fCol+'>'+dgts[i]+'</font></center></layer>');
> }
> for (i=0; i < M.length; i++){
> document.write('<layer name=ny'+i+' top=0 left=0 bgcolor='+mCol+'
>clip="0,0,2,2"></layer>');
> }
> for (i=0; i < H.length; i++){
> document.write('<layer name=nz'+i+' top=0 left=0 bgcolor='+hCol+'
>clip="0,0,2,2"></layer>');
> }
> for (i=0; i < S.length; i++){
> document.write('<layer name=nx'+i+' top=0 left=0 bgcolor='+sCol+'
>clip="0,0,2,2"></layer>');
> }
>}
>if (IE4){
> document.write('<div
>style="position:absolute;top:0px;left:0px;z-index:2;"><div
>style="position:relative;z-index:2;">');
> for (i=1; i < dots+1; i++){
> document.write('<div id="ieDigits"
>style="position:absolute;top:0px;left:0px;width:3 0px;height:30px;z-index:2;font-family:Arial;font-size:10px;color:'+fCol+';text-align:center;padding-top:10px">'+i+'</div>');
> }
> document.write('</div></div>')
> document.write('<div
>style="position:absolute;top:0px;left:0px;z-index:2;"> <div
>style="position:relative;z-index:2;">');
> for (i=0; i < M.length; i++){
> document.write('<div id=y
>style="position:absolute;width:2px;height:2px;fon t-size:2px;z-index:2;background:'+mCol+'"></div>');
> }
> document.write('</div></div>')
> document.write('<div
>style="position:absolute;top:0px;left:0px;z-index:2"> <div
>style="position:relative;z-index:2">');
> for (i=0; i < H.length; i++){
> document.write('<div id=z
>style="position:absolute;width:2px;height:2px;fon t-size:2px;z-index:2;background:'+hCol+'"></div>');
> }
> document.write('</div></div>')
> document.write('<div
>style="position:absolute;top:0px;left:0px;z-index:2"><div
>style="position:relative;z-index:2">');
> for (i=0; i < S.length; i++){
> document.write('<div id=x
>style="position:absolute;width:2px;height:2px;fon t-size:2px;z-index:2;
>background:'+sCol+'"></div>');
> }
> document.write('</div></div>')
>}
>
>
>
>function clock(){
> time = new Date ();
> secs = time.getSeconds();
> sec = -1.57 + Math.PI * secs/30;
> mins = time.getMinutes();
> min = -1.57 + Math.PI * mins/30;
> hr = time.getHours();
> hrs = -1.57 + Math.PI * hr/6 + Math.PI*parseInt(time.getMinutes())/360;
>
> if (NS6){
> Ypos=window.pageYOffset+window.innerHeight-Ybase-25;
> Xpos=window.pageXOffset+window.innerWidth-Xbase-30;
> for (i=1; i < dots+1; i++){
>
>document.getElementById("n6Digits"+i).style.top=Y pos-15+Ybase*Math.sin(-1.56
>+i *Split*Math.PI/180)
>
>document.getElementById("n6Digits"+i).style.left= Xpos-15+Xbase*Math.cos(-1.56
>+i*Split*Math.PI/180)
> }
> for (i=0; i < S.length; i++){
>
>document.getElementById("Nx"+i).style.top=Ypos+i* Ybase/4.1*Math.sin(sec);
>
>document.getElementById("Nx"+i).style.left=Xpos+i *Xbase/4.1*Math.cos(sec);
> }
> for (i=0; i < M.length; i++){
>
>document.getElementById("Ny"+i).style.top=Ypos+i* Ybase/4.1*Math.sin(min);
>
>document.getElementById("Ny"+i).style.left=Xpos+i *Xbase/4.1*Math.cos(min);
> }
> for (i=0; i < H.length; i++){
>
>document.getElementById("Nz"+i).style.top=Ypos+i* Ybase/4.1*Math.sin(hrs);
>
>document.getElementById("Nz"+i).style.left=Xpos+i *Xbase/4.1*Math.cos(hrs);
> }
> }
> if (NS4){
> Ypos=window.pageYOffset+window.innerHeight-Ybase-20;
> Xpos=window.pageXOffset+window.innerWidth-Xbase-30;
> for (i=0; i < dots; ++i){
> document.layers["nsDigits"+i].top=Ypos-5+Ybase*Math.sin(-1.045
>+i*Split*Math.PI/180)
> document.layers["nsDigits"+i].left=Xpos-15+Xbase*Math.cos(-1.045
>+i*Split*Math.PI/180)
> }
> for (i=0; i < S.length; i++){
> document.layers["nx"+i].top=Ypos+i*Ybase/4.1*Math.sin(sec);
> document.layers["nx"+i].left=Xpos+i*Xbase/4.1*Math.cos(sec);
> }
> for (i=0; i < M.length; i++){
> document.layers["ny"+i].top=Ypos+i*Ybase/4.1*Math.sin(min);
> document.layers["ny"+i].left=Xpos+i*Xbase/4.1*Math.cos(min);
> }
> for (i=0; i < H.length; i++){
> document.layers["nz"+i].top=Ypos+i*Ybase/4.1*Math.sin(hrs);
> document.layers["nz"+i].left=Xpos+i*Xbase/4.1*Math.cos(hrs);
> }
> }
>
> if (IE4){
>
>Ypos=document.body.scrollTop+window.document.body .clientHeight-Ybase-20;
>
>Xpos=document.body.scrollLeft+window.document.bod y.clientWidth-Xbase-20;
> for (i=0; i < dots; ++i){
> ieDigits[i].style.pixelTop=Ypos-15+Ybase*Math.sin(-1.045 +i
>*Split*Math.PI/180)
> ieDigits[i].style.pixelLeft=Xpos-15+Xbase*Math.cos(-1.045 +i
>*Split*Math.PI/180)
> }
> for (i=0; i < S.length; i++){
> x[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(sec);
> x[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(sec);
> }
> for (i=0; i < M.length; i++){
> y[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(min);
> y[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(min);
> }
> for (i=0; i < H.length; i++){
> z[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(hrs);
> z[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(hrs);
> }
> }
> setTimeout('clock()',100);
>}
>// clock();
>//-->
>
>/*
>Para incluir esta librería, que sólo muestra un reloj, hay que poner en
>la zona HEAD de
>la página web lo siguiente.
>
><HEAD>
> <script type="text/javascript"
> src="libreria_js/reloj_analogico.js">
> </script>
></HEAD>
>
>y para usarla, es decir ver el reloj en la página web, hay que colocar
>lo siguiente dentro
>del BODY de la página
>
><BODY>
>
><script>
> clock();
></script>
>
></BODY>
>
>*/
>************************************************* *********************
>

--
DrPanic EChM#215
Responder Con Cita
  #4 (permalink)  
Antiguo 12-02-2008, 11:52:52
DrPanic
 
Mensajes: n/a
Predeterminado Re: Problema con un JavaScript

¿La tienes colgada en algún sitio?

Llámame perezoso, pero me cuesta eso de andar copiando y pegando.

On Mon, 11 Feb 2008 13:58:13 +0100, David <email.falso***eurociber.es>
wrote:

>Tengo un reloj analógico creado con un JavaScript, cogido de una web el
>script, este reloj se muestra en la esquina inferior derecha de la
>página web donde se incluya, permaneciendo el reloj en el mismo punto
>aunque la página se desplace. Lo he probado en una página creada con
>tablas y funciona correctamente mostrándose el reloj sobre las
>diferentes cosas que tenga la citada página al desplazar la misma de
>arriba abajo viéndose el reloj sin ningún tipo de problema.
>
>Ahora viene el problema, al desear mostrar el citado reloj en otra
>página donde no utilizo tablas para el posicionamiento de las diferentes
>imágenes y textos, en vez de tablas utilizo hojas de estilo (CSS) para
>el posicionamiento de los diferentes componentes en esta página, en esta
>página con Firefox sólo se ve un garabatito pequeño en la esquina
>superior izquierda y este garabatito no se desplaza ni se ve en la
>posición correcta (esquina inferior derecha), con IE se ve el reloj,
>sólo los números no las agujas, a el mismo nivel que el garabato pero en
>el lado derecho.
>
>La página del problema tiene esta estructura, haber si alguien me puede
>indicar ¿por qué no se ve el reloj como la que utiliza las tablas?
>
><!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" xml:lang="en"
> lang="en">
><head>
><!--Force IE6 into quirks mode with this comment tag-->
> <meta http-equiv="Content-Type"
> content="text/html; charset=iso-8859-1" />
> <script type="text/javascript"
> src="libreria_js/reloj_analogico.js">
> </script>
> <link rel="stylesheet" type="text/css"
> href="estilos/indice_noticias.css" />
> <style type="text/css">
> </style>
></head>
><body class="margenes_y_fondo">
><!-- -->
><div id="cabecera"> <img
> src="imagenes/cabecera_indice.gif" height="150"
> width="550" /></div>
><div id="esquina_izquierda">
><p><a href="../index.html">Volver atr&aacute;s</a></p>
></div>
><div id="contenedor_principal"><!-- maincontent -->
><p class="arriba"><b> </b></p>
><div id="lista_izquierda">
><ul>
> <li><a href="pdf/boletin.pdf">bla, bla </a><br />
> <div id="resumen">bbbbbbbbbb </div>
> </li>
> <li><a href="07.pdf">bbbbb </a>
> <div id="resumen">mmmmmmmm </div>
> </li>
>
></ul>
></div>
><!-- lista izquierda -->
><div id="lista_derecha">
><ul>
> <li><a href="pdf06.pdf">bbbbbb</a><br />
> <div id="resumen">mmmmmmmm </div>
> </li>
> <li><a href="pdf33.pdf">bbbbbbbb</a><br />
> <div id="resumen">nnnnn </div>
> </li>
>
></ul>
></div>
><!-- lista_derecha -->
></div>
><!-- de maincontent -->
><script>
>clock();
></script>
></body>
></html>
>
>
>************************* HOJA DE ESTILO **********************
>#cabecera{
> top: 0;
> left: 120px;
> height: 150px;
> text-align: center;
> z-index: 1;
>}
>
>#contenedor_principal{
> position: absolute;
> top: 158px;
> left: 130px;
> right: 130px;
> z-index: 1;
>}
>#lista_izquierda, #lista_derecha{
> position: absolute; /*fixed; con fixed solo se ve una columna */
> top: 60px; /* */
> width: 50%;
> z-index: 1;
>}
>#lista_derecha{
> left: 50%;
>}
>#resumen{
> font-size: 83%; /*small;*/
>}
>p.arriba{
> top: 0;
> text-align: center;
> font-size: medium; /* small; */
> font-family: Arial,Times,Courier;/* no influye en el fondo*/
> border-style: double;
> border-left: 0;
> border-right: 0;
> left: 135px;
> right: 130px;
> width: 100%;
>}
>#esquina_izquierda, #esquina_derecha{
> position: absolute;
> font-family: Arial,Times,Courier;
> top: 25px;
> font-size: large;
> font-weight: 900;
> Z-index: 1;
>
>}
>#esquina_izquierda{
> left: 15px;
> width: 125px;
>}
>.margenes_y_fondo{
> margin-top: 0px;
> margin-left: 0px;
> margin-bottom: 0px;
> margin-right: 0px;
> background-color: rgb(0, 235, 255);
> background-image:url('../../Imagenes/tira_degradado_24bit.png');
> background-repeat: repeat-x;
> background-attachment: fixed;
>}
>
>****************************EL DICHOSO RELOJ ************************
>
>
>fCol='444444'; //face colour.
>sCol='FF0000'; //seconds colour.
>mCol='444444'; //minutes colour.
>hCol='444444'; //hours colour.
>
>Ybase=30; //Clock height.
>Xbase=30; //Clock width.
>
>
>H='...';
>H=H.split('');
>M='....';
>M=M.split('');
>S='.....';
>S=S.split('');
>
>NS4=(document.layers);
>NS6=(document.getElementById && !document.all);
>IE4=(document.all);
>
>Ypos=0;
>Xpos=0;
>dots=12;
>
>Split=360/dots;
>
>if (NS6){
> for (i=1; i < dots+1; i++){
> document.write('<div id="n6Digits'+i+'"
>style="position:absolute;top:0px;left:0px;width:3 0px;height:30px;font-family:Arial;font-size:10px;color:#'+fCol+';text-align:center;padding-top:10px;z-index:2">'+i+'</div>');
> }
>
> for (i=0; i < M.length; i++){
> document.write('<div id="Ny'+i+'"
>style="position:absolute;top:0px;left:0px;width:2 px;height:2px;font-size:2px;z-index:2;background:#'+mCol+'"></div>');
> }
> for (i=0; i < H.length; i++){
> document.write('<div id="Nz'+i+'"
>style="position:absolute;top:0px;left:0px;width:2 px;height:2px;font-size:2px;z-index:2;background:#'+hCol+'"></div>');
> }
> for (i=0; i < S.length; i++){
> document.write('<div id="Nx'+i+'"
>style="position:absolute;top:0px;left:0px;width:2 px;height:2px;font-size:2px;z-index:2;background:#'+sCol+'"></div>');
> }
>}
>if (NS4){
> dgts='1 2 3 4 5 6 7 8 9 10 11 12';
> dgts=dgts.split(' ')
> for (i=0; i < dots; i++){
> document.write('<layer name=nsDigits'+i+' top=0 left=0 height=30
>width=30><center><font face=Arial size=1
>color='+fCol+'>'+dgts[i]+'</font></center></layer>');
> }
> for (i=0; i < M.length; i++){
> document.write('<layer name=ny'+i+' top=0 left=0 bgcolor='+mCol+'
>clip="0,0,2,2"></layer>');
> }
> for (i=0; i < H.length; i++){
> document.write('<layer name=nz'+i+' top=0 left=0 bgcolor='+hCol+'
>clip="0,0,2,2"></layer>');
> }
> for (i=0; i < S.length; i++){
> document.write('<layer name=nx'+i+' top=0 left=0 bgcolor='+sCol+'
>clip="0,0,2,2"></layer>');
> }
>}
>if (IE4){
> document.write('<div
>style="position:absolute;top:0px;left:0px;z-index:2;"><div
>style="position:relative;z-index:2;">');
> for (i=1; i < dots+1; i++){
> document.write('<div id="ieDigits"
>style="position:absolute;top:0px;left:0px;width:3 0px;height:30px;z-index:2;font-family:Arial;font-size:10px;color:'+fCol+';text-align:center;padding-top:10px">'+i+'</div>');
> }
> document.write('</div></div>')
> document.write('<div
>style="position:absolute;top:0px;left:0px;z-index:2;"> <div
>style="position:relative;z-index:2;">');
> for (i=0; i < M.length; i++){
> document.write('<div id=y
>style="position:absolute;width:2px;height:2px;fon t-size:2px;z-index:2;background:'+mCol+'"></div>');
> }
> document.write('</div></div>')
> document.write('<div
>style="position:absolute;top:0px;left:0px;z-index:2"> <div
>style="position:relative;z-index:2">');
> for (i=0; i < H.length; i++){
> document.write('<div id=z
>style="position:absolute;width:2px;height:2px;fon t-size:2px;z-index:2;background:'+hCol+'"></div>');
> }
> document.write('</div></div>')
> document.write('<div
>style="position:absolute;top:0px;left:0px;z-index:2"><div
>style="position:relative;z-index:2">');
> for (i=0; i < S.length; i++){
> document.write('<div id=x
>style="position:absolute;width:2px;height:2px;fon t-size:2px;z-index:2;
>background:'+sCol+'"></div>');
> }
> document.write('</div></div>')
>}
>
>
>
>function clock(){
> time = new Date ();
> secs = time.getSeconds();
> sec = -1.57 + Math.PI * secs/30;
> mins = time.getMinutes();
> min = -1.57 + Math.PI * mins/30;
> hr = time.getHours();
> hrs = -1.57 + Math.PI * hr/6 + Math.PI*parseInt(time.getMinutes())/360;
>
> if (NS6){
> Ypos=window.pageYOffset+window.innerHeight-Ybase-25;
> Xpos=window.pageXOffset+window.innerWidth-Xbase-30;
> for (i=1; i < dots+1; i++){
>
>document.getElementById("n6Digits"+i).style.top=Y pos-15+Ybase*Math.sin(-1.56
>+i *Split*Math.PI/180)
>
>document.getElementById("n6Digits"+i).style.left= Xpos-15+Xbase*Math.cos(-1.56
>+i*Split*Math.PI/180)
> }
> for (i=0; i < S.length; i++){
>
>document.getElementById("Nx"+i).style.top=Ypos+i* Ybase/4.1*Math.sin(sec);
>
>document.getElementById("Nx"+i).style.left=Xpos+i *Xbase/4.1*Math.cos(sec);
> }
> for (i=0; i < M.length; i++){
>
>document.getElementById("Ny"+i).style.top=Ypos+i* Ybase/4.1*Math.sin(min);
>
>document.getElementById("Ny"+i).style.left=Xpos+i *Xbase/4.1*Math.cos(min);
> }
> for (i=0; i < H.length; i++){
>
>document.getElementById("Nz"+i).style.top=Ypos+i* Ybase/4.1*Math.sin(hrs);
>
>document.getElementById("Nz"+i).style.left=Xpos+i *Xbase/4.1*Math.cos(hrs);
> }
> }
> if (NS4){
> Ypos=window.pageYOffset+window.innerHeight-Ybase-20;
> Xpos=window.pageXOffset+window.innerWidth-Xbase-30;
> for (i=0; i < dots; ++i){
> document.layers["nsDigits"+i].top=Ypos-5+Ybase*Math.sin(-1.045
>+i*Split*Math.PI/180)
> document.layers["nsDigits"+i].left=Xpos-15+Xbase*Math.cos(-1.045
>+i*Split*Math.PI/180)
> }
> for (i=0; i < S.length; i++){
> document.layers["nx"+i].top=Ypos+i*Ybase/4.1*Math.sin(sec);
> document.layers["nx"+i].left=Xpos+i*Xbase/4.1*Math.cos(sec);
> }
> for (i=0; i < M.length; i++){
> document.layers["ny"+i].top=Ypos+i*Ybase/4.1*Math.sin(min);
> document.layers["ny"+i].left=Xpos+i*Xbase/4.1*Math.cos(min);
> }
> for (i=0; i < H.length; i++){
> document.layers["nz"+i].top=Ypos+i*Ybase/4.1*Math.sin(hrs);
> document.layers["nz"+i].left=Xpos+i*Xbase/4.1*Math.cos(hrs);
> }
> }
>
> if (IE4){
>
>Ypos=document.body.scrollTop+window.document.body .clientHeight-Ybase-20;
>
>Xpos=document.body.scrollLeft+window.document.bod y.clientWidth-Xbase-20;
> for (i=0; i < dots; ++i){
> ieDigits[i].style.pixelTop=Ypos-15+Ybase*Math.sin(-1.045 +i
>*Split*Math.PI/180)
> ieDigits[i].style.pixelLeft=Xpos-15+Xbase*Math.cos(-1.045 +i
>*Split*Math.PI/180)
> }
> for (i=0; i < S.length; i++){
> x[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(sec);
> x[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(sec);
> }
> for (i=0; i < M.length; i++){
> y[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(min);
> y[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(min);
> }
> for (i=0; i < H.length; i++){
> z[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(hrs);
> z[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(hrs);
> }
> }
> setTimeout('clock()',100);
>}
>// clock();
>//-->
>
>/*
>Para incluir esta librería, que sólo muestra un reloj, hay que poner en
>la zona HEAD de
>la página web lo siguiente.
>
><HEAD>
> <script type="text/javascript"
> src="libreria_js/reloj_analogico.js">
> </script>
></HEAD>
>
>y para usarla, es decir ver el reloj en la página web, hay que colocar
>lo siguiente dentro
>del BODY de la página
>
><BODY>
>
><script>
> clock();
></script>
>
></BODY>
>
>*/
>************************************************* *********************
>

--
DrPanic EChM#215
Responder Con Cita
  #5 (permalink)  
Antiguo 12-02-2008, 11:52:52
DrPanic
 
Mensajes: n/a
Predeterminado Re: Problema con un JavaScript

¿La tienes colgada en algún sitio?

Llámame perezoso, pero me cuesta eso de andar copiando y pegando.

On Mon, 11 Feb 2008 13:58:13 +0100, David <email.falso***eurociber.es>
wrote:

>Tengo un reloj analógico creado con un JavaScript, cogido de una web el
>script, este reloj se muestra en la esquina inferior derecha de la
>página web donde se incluya, permaneciendo el reloj en el mismo punto
>aunque la página se desplace. Lo he probado en una página creada con
>tablas y funciona correctamente mostrándose el reloj sobre las
>diferentes cosas que tenga la citada página al desplazar la misma de
>arriba abajo viéndose el reloj sin ningún tipo de problema.
>
>Ahora viene el problema, al desear mostrar el citado reloj en otra
>página donde no utilizo tablas para el posicionamiento de las diferentes
>imágenes y textos, en vez de tablas utilizo hojas de estilo (CSS) para
>el posicionamiento de los diferentes componentes en esta página, en esta
>página con Firefox sólo se ve un garabatito pequeño en la esquina
>superior izquierda y este garabatito no se desplaza ni se ve en la
>posición correcta (esquina inferior derecha), con IE se ve el reloj,
>sólo los números no las agujas, a el mismo nivel que el garabato pero en
>el lado derecho.
>
>La página del problema tiene esta estructura, haber si alguien me puede
>indicar ¿por qué no se ve el reloj como la que utiliza las tablas?
>
><!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" xml:lang="en"
> lang="en">
><head>
><!--Force IE6 into quirks mode with this comment tag-->
> <meta http-equiv="Content-Type"
> content="text/html; charset=iso-8859-1" />
> <script type="text/javascript"
> src="libreria_js/reloj_analogico.js">
> </script>
> <link rel="stylesheet" type="text/css"
> href="estilos/indice_noticias.css" />
> <style type="text/css">
> </style>
></head>
><body class="margenes_y_fondo">
><!-- -->
><div id="cabecera"> <img
> src="imagenes/cabecera_indice.gif" height="150"
> width="550" /></div>
><div id="esquina_izquierda">
><p><a href="../index.html">Volver atr&aacute;s</a></p>
></div>
><div id="contenedor_principal"><!-- maincontent -->
><p class="arriba"><b> </b></p>
><div id="lista_izquierda">
><ul>
> <li><a href="pdf/boletin.pdf">bla, bla </a><br />
> <div id="resumen">bbbbbbbbbb </div>
> </li>
> <li><a href="07.pdf">bbbbb </a>
> <div id="resumen">mmmmmmmm </div>
> </li>
>
></ul>
></div>
><!-- lista izquierda -->
><div id="lista_derecha">
><ul>
> <li><a href="pdf06.pdf">bbbbbb</a><br />
> <div id="resumen">mmmmmmmm </div>
> </li>
> <li><a href="pdf33.pdf">bbbbbbbb</a><br />
> <div id="resumen">nnnnn </div>
> </li>
>
></ul>
></div>
><!-- lista_derecha -->
></div>
><!-- de maincontent -->
><script>
>clock();
></script>
></body>
></html>
>
>
>************************* HOJA DE ESTILO **********************
>#cabecera{
> top: 0;
> left: 120px;
> height: 150px;
> text-align: center;
> z-index: 1;
>}
>
>#contenedor_principal{
> position: absolute;
> top: 158px;
> left: 130px;
> right: 130px;
> z-index: 1;
>}
>#lista_izquierda, #lista_derecha{
> position: absolute; /*fixed; con fixed solo se ve una columna */
> top: 60px; /* */
> width: 50%;
> z-index: 1;
>}
>#lista_derecha{
> left: 50%;
>}
>#resumen{
> font-size: 83%; /*small;*/
>}
>p.arriba{
> top: 0;
> text-align: center;
> font-size: medium; /* small; */
> font-family: Arial,Times,Courier;/* no influye en el fondo*/
> border-style: double;
> border-left: 0;
> border-right: 0;
> left: 135px;
> right: 130px;
> width: 100%;
>}
>#esquina_izquierda, #esquina_derecha{
> position: absolute;
> font-family: Arial,Times,Courier;
> top: 25px;
> font-size: large;
> font-weight: 900;
> Z-index: 1;
>
>}
>#esquina_izquierda{
> left: 15px;
> width: 125px;
>}
>.margenes_y_fondo{
> margin-top: 0px;
> margin-left: 0px;
> margin-bottom: 0px;
> margin-right: 0px;
> background-color: rgb(0, 235, 255);
> background-image:url('../../Imagenes/tira_degradado_24bit.png');
> background-repeat: repeat-x;
> background-attachment: fixed;
>}
>
>****************************EL DICHOSO RELOJ ************************
>
>
>fCol='444444'; //face colour.
>sCol='FF0000'; //seconds colour.
>mCol='444444'; //minutes colour.
>hCol='444444'; //hours colour.
>
>Ybase=30; //Clock height.
>Xbase=30; //Clock width.
>
>
>H='...';
>H=H.split('');
>M='....';
>M=M.split('');
>S='.....';
>S=S.split('');
>
>NS4=(document.layers);
>NS6=(document.getElementById && !document.all);
>IE4=(document.all);
>
>Ypos=0;
>Xpos=0;
>dots=12;
>
>Split=360/dots;
>
>if (NS6){
> for (i=1; i < dots+1; i++){
> document.write('<div id="n6Digits'+i+'"
>style="position:absolute;top:0px;left:0px;width:3 0px;height:30px;font-family:Arial;font-size:10px;color:#'+fCol+';text-align:center;padding-top:10px;z-index:2">'+i+'</div>');
> }
>
> for (i=0; i < M.length; i++){
> document.write('<div id="Ny'+i+'"
>style="position:absolute;top:0px;left:0px;width:2 px;height:2px;font-size:2px;z-index:2;background:#'+mCol+'"></div>');
> }
> for (i=0; i < H.length; i++){
> document.write('<div id="Nz'+i+'"
>style="position:absolute;top:0px;left:0px;width:2 px;height:2px;font-size:2px;z-index:2;background:#'+hCol+'"></div>');
> }
> for (i=0; i < S.length; i++){
> document.write('<div id="Nx'+i+'"
>style="position:absolute;top:0px;left:0px;width:2 px;height:2px;font-size:2px;z-index:2;background:#'+sCol+'"></div>');
> }
>}
>if (NS4){
> dgts='1 2 3 4 5 6 7 8 9 10 11 12';
> dgts=dgts.split(' ')
> for (i=0; i < dots; i++){
> document.write('<layer name=nsDigits'+i+' top=0 left=0 height=30
>width=30><center><font face=Arial size=1
>color='+fCol+'>'+dgts[i]+'</font></center></layer>');
> }
> for (i=0; i < M.length; i++){
> document.write('<layer name=ny'+i+' top=0 left=0 bgcolor='+mCol+'
>clip="0,0,2,2"></layer>');
> }
> for (i=0; i < H.length; i++){
> document.write('<layer name=nz'+i+' top=0 left=0 bgcolor='+hCol+'
>clip="0,0,2,2"></layer>');
> }
> for (i=0; i < S.length; i++){
> document.write('<layer name=nx'+i+' top=0 left=0 bgcolor='+sCol+'
>clip="0,0,2,2"></layer>');
> }
>}
>if (IE4){
> document.write('<div
>style="position:absolute;top:0px;left:0px;z-index:2;"><div
>style="position:relative;z-index:2;">');
> for (i=1; i < dots+1; i++){
> document.write('<div id="ieDigits"
>style="position:absolute;top:0px;left:0px;width:3 0px;height:30px;z-index:2;font-family:Arial;font-size:10px;color:'+fCol+';text-align:center;padding-top:10px">'+i+'</div>');
> }
> document.write('</div></div>')
> document.write('<div
>style="position:absolute;top:0px;left:0px;z-index:2;"> <div
>style="position:relative;z-index:2;">');
> for (i=0; i < M.length; i++){
> document.write('<div id=y
>style="position:absolute;width:2px;height:2px;fon t-size:2px;z-index:2;background:'+mCol+'"></div>');
> }
> document.write('</div></div>')
> document.write('<div
>style="position:absolute;top:0px;left:0px;z-index:2"> <div
>style="position:relative;z-index:2">');
> for (i=0; i < H.length; i++){
> document.write('<div id=z
>style="position:absolute;width:2px;height:2px;fon t-size:2px;z-index:2;background:'+hCol+'"></div>');
> }
> document.write('</div></div>')
> document.write('<div
>style="position:absolute;top:0px;left:0px;z-index:2"><div
>style="position:relative;z-index:2">');
> for (i=0; i < S.length; i++){
> document.write('<div id=x
>style="position:absolute;width:2px;height:2px;fon t-size:2px;z-index:2;
>background:'+sCol+'"></div>');
> }
> document.write('</div></div>')
>}
>
>
>
>function clock(){
> time = new Date ();
> secs = time.getSeconds();
> sec = -1.57 + Math.PI * secs/30;
> mins = time.getMinutes();
> min = -1.57 + Math.PI * mins/30;
> hr = time.getHours();
> hrs = -1.57 + Math.PI * hr/6 + Math.PI*parseInt(time.getMinutes())/360;
>
> if (NS6){
> Ypos=window.pageYOffset+window.innerHeight-Ybase-25;
> Xpos=window.pageXOffset+window.innerWidth-Xbase-30;
> for (i=1; i < dots+1; i++){
>
>document.getElementById("n6Digits"+i).style.top=Y pos-15+Ybase*Math.sin(-1.56
>+i *Split*Math.PI/180)
>
>document.getElementById("n6Digits"+i).style.left= Xpos-15+Xbase*Math.cos(-1.56
>+i*Split*Math.PI/180)
> }
> for (i=0; i < S.length; i++){
>
>document.getElementById("Nx"+i).style.top=Ypos+i* Ybase/4.1*Math.sin(sec);
>
>document.getElementById("Nx"+i).style.left=Xpos+i *Xbase/4.1*Math.cos(sec);
> }
> for (i=0; i < M.length; i++){
>
>document.getElementById("Ny"+i).style.top=Ypos+i* Ybase/4.1*Math.sin(min);
>
>document.getElementById("Ny"+i).style.left=Xpos+i *Xbase/4.1*Math.cos(min);
> }
> for (i=0; i < H.length; i++){
>
>document.getElementById("Nz"+i).style.top=Ypos+i* Ybase/4.1*Math.sin(hrs);
>
>document.getElementById("Nz"+i).style.left=Xpos+i *Xbase/4.1*Math.cos(hrs);
> }
> }
> if (NS4){
> Ypos=window.pageYOffset+window.innerHeight-Ybase-20;
> Xpos=window.pageXOffset+window.innerWidth-Xbase-30;
> for (i=0; i < dots; ++i){
> document.layers["nsDigits"+i].top=Ypos-5+Ybase*Math.sin(-1.045
>+i*Split*Math.PI/180)
> document.layers["nsDigits"+i].left=Xpos-15+Xbase*Math.cos(-1.045
>+i*Split*Math.PI/180)
> }
> for (i=0; i < S.length; i++){
> document.layers["nx"+i].top=Ypos+i*Ybase/4.1*Math.sin(sec);
> document.layers["nx"+i].left=Xpos+i*Xbase/4.1*Math.cos(sec);
> }
> for (i=0; i < M.length; i++){
> document.layers["ny"+i].top=Ypos+i*Ybase/4.1*Math.sin(min);
> document.layers["ny"+i].left=Xpos+i*Xbase/4.1*Math.cos(min);
> }
> for (i=0; i < H.length; i++){
> document.layers["nz"+i].top=Ypos+i*Ybase/4.1*Math.sin(hrs);
> document.layers["nz"+i].left=Xpos+i*Xbase/4.1*Math.cos(hrs);
> }
> }
>
> if (IE4){
>
>Ypos=document.body.scrollTop+window.document.body .clientHeight-Ybase-20;
>
>Xpos=document.body.scrollLeft+window.document.bod y.clientWidth-Xbase-20;
> for (i=0; i < dots; ++i){
> ieDigits[i].style.pixelTop=Ypos-15+Ybase*Math.sin(-1.045 +i
>*Split*Math.PI/180)
> ieDigits[i].style.pixelLeft=Xpos-15+Xbase*Math.cos(-1.045 +i
>*Split*Math.PI/180)
> }
> for (i=0; i < S.length; i++){
> x[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(sec);
> x[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(sec);
> }
> for (i=0; i < M.length; i++){
> y[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(min);
> y[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(min);
> }
> for (i=0; i < H.length; i++){
> z[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(hrs);
> z[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(hrs);
> }
> }
> setTimeout('clock()',100);
>}
>// clock();
>//-->
>
>/*
>Para incluir esta librería, que sólo muestra un reloj, hay que poner en
>la zona HEAD de
>la página web lo siguiente.
>
><HEAD>
> <script type="text/javascript"
> src="libreria_js/reloj_analogico.js">
> </script>
></HEAD>
>
>y para usarla, es decir ver el reloj en la página web, hay que colocar
>lo siguiente dentro
>del BODY de la página
>
><BODY>
>
><script>
> clock();
></script>
>
></BODY>
>
>*/
>************************************************* *********************
>

--
DrPanic EChM#215
Responder Con Cita
 
Respuesta

« Problema con un JavaScript | problemas con plantillas »

Herramientas
Desplegado
Mode Lineal Mode Lineal

Normas de Publicación
no Puedes crear nuevos temas
no Puedes responder a temas
no Puedes adjuntar archivos
no Puedes editar tus mensajes
El código vB está habilitado
Las caritas están habilitado
Código [IMG] está habilitado
Código HTML está deshabilitado
Trackbacks are habilitado
Pingbacks are habilitado
Refbacks are habilitado


Temas Similares
Tema Autor Foro Respuestas Último mensaje
Problema con compatibilidad javascript e IE7 Juan Carlos Pérez Suárez Newsgroup microsoft.public.es.ie6 1 12-08-2007 17:56:44
HOLA MI PROBLEMA ES CON JAVASCRIPT GRUPOS DE JAVA Newsgroup microsoft.public.es.asp 6 22-06-2007 00:08:50
Problema con archivo javascript externo y ASP verci Newsgroup microsoft.public.es.asp 6 21-02-2007 18:10:10
Problema con Javascript y Explorer 7 Juan Carlos Pérez Suárez Newsgroup microsoft.public.es.espanol.soporte.entre.usuarios.internet 0 11-01-2007 20:41:53
Re: Problema de JavaScript Oscar Galvis Newsgroup microsoft.public.es.java 0 15-07-2004 15:20:55


La franja horaria es GMT. Ahora son las 07:21:37.

Motor - Moteros - Educacion Fisica - Religion - Futbol - Bricolaje - Series Tv - Cinema - Fotografia - Literatura - Comics - Ficcion - Decodificacion - Hattrick Matematicas - Actualidad - Politica - Filosofia - Hardware - Electronica - Tv - Viajes - Linux Instalacion - Linux - Adsl - Telefonia - Windows XP - Windows Server


Newsgrupos Home Page RSS Feeds - Newsgrupos Home Page - Archivo - Top

Powered by: vBulletin, Versión 3.6.8
Derechos de Autor ©2000 - 2008, Jelsoft Enterprises Ltd.

LinkBacks Enabled by vBSEO 3.1.0 © 2007, Crawlability, Inc.