Newsgrupos.com - Ver Mensaje Individual

#4 (**permalink**) 12-02-2008, 12:52:52

¿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>
>
> <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ás</a></p>
></div>
><div id="contenedor_principal">
><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>
>
><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>
>
></div>
>
><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