Foros del Web » Programando para Internet » Javascript »

Scroll con paradas

Estas en el tema de Scroll con paradas en el foro de Javascript en Foros del Web. Tengo el siguiente código y lo que quiero es que tenga un ancho y largo determinado que eso creo que con la capa podría arreglarlo ...
  #1 (permalink)  
Antiguo 13/02/2014, 15:14
 
Fecha de Ingreso: febrero-2014
Ubicación: Murcia
Mensajes: 119
Antigüedad: 10 años, 2 meses
Puntos: 0
Scroll con paradas

Tengo el siguiente código y lo que quiero es que tenga un ancho y largo determinado que eso creo que con la capa podría arreglarlo y un determinado número de noticias que irían pasando por esa capa (scroll).

He visto varios script semejantes, pero quiero que se mostraran por ejemplo dos registros y esten "X" segundos parados y luego ver los siguientes... y así sucesivamente, como si fuera un rotador de imagenes.. (no se si alguien entiende lo que quiero decir...) Los que he visto son bien que van pasando para arriba y se paran cuando pasas el puntero por encima, pero no quiero eso..

Mi codigo de tablas es el siguiente:

Código HTML:
<ul>
<li><img src="jpg" class="fromdb" alt=""/><a title="" href="http://www.">Noticia 1</a></li>
<li><img src="jpg" class="fromdb" alt=""/><a title="" href="http://www">Noticia 2</a></li>
<li><img src="jpg" class="fromdb" alt=""/><a title="" href="http://www">Noticia 3</a></li>
<li><img src="jpg" class="fromdb" alt=""/><a title="" href="http://www">Noticia 4</a></li>

</ul> 
  #2 (permalink)  
Antiguo 13/02/2014, 18:51
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: Scroll con paradas

Si lo que buscas hacer es algo como esto: http://jsbin.com/qugad/1

Puedes hacerlo así. En el documento HTML, tendremos una sección de Id "noticias", la cual contendrá 6 imágenes, todas ellas con la clase "noti".

Código HTML:
Ver original
  1. <section id = "noticias">
  2.     <img src = "noticia1.jpg" class = "noti" />
  3.     <img src = "noticia2.jpg" class = "noti" />
  4.     <img src = "noticia3.jpg" class = "noti" />
  5.     <img src = "noticia4.jpg" class = "noti" />
  6.     <img src = "noticia5.jpg" class = "noti" />
  7.     <img src = "noticia6.jpg" class = "noti" />

Luego, le damos un poco de estilo a la sección y movemos todas las imágenes hacia la izquierda, lo más alejado posible como para que no se vean. Los estilos que aplico a la sección son irrelevantes (para el funcionamiento del rotador de noticias), lo importante está en los estilos aplicados a las imágenes, que en este caso se agrupan en la clase "noti".

Código CSS:
Ver original
  1. #noticias{
  2.     width: 40em;
  3.     height: 10em;
  4.     position: absolute;
  5.     margin: -6em 0 0 -25em;
  6.     top: 50%;
  7.     left: 50%;
  8.     border: .1em #002 solid;
  9.     padding: 2em 0 0 8em;
  10. }
  11.  
  12. .noti{
  13.     display: inline-block; /* Las coloco en fila */
  14.     width: 15em;
  15.     height: 8em;
  16.     position: absolute; /* Con esto evito que se superpongan una con otra */
  17.     left: -50em; /* Aquí es en donde alejo las imágenes hacia la izquierda */
  18. }

Y finalmente, aplicamos un poco de JavaScript con métodos de su librería jQuery para darle mayor dinamismo, aunque también podrías hacerlo con JavaScript nativo.

Código Javascript:
Ver original
  1. var noticias = $(".noti"),
  2.     total = noticias.length,
  3.     cont = 0;
  4.  
  5. $(noticias).eq(cont).css("position", "relative").animate({left: "+=50em"}, "fast");
  6. $(noticias).eq(cont + 1).css("position", "relative").animate({left: "+=50em"}, "fast");
  7.  
  8. var slider = {
  9.     show: function(){
  10.         $(noticias).eq(cont).css("position", "absolute").animate({left: "-=50em"}, "fast");
  11.         $(noticias).eq(cont + 1).css("position", "absolute").animate({left: "-=50em"}, "fast");
  12.        
  13.         cont = cont + 2 == total ? 0 : cont + 2;
  14.      
  15.         $(noticias).eq(cont).css("position", "relative").animate({left: "+=50em"}, "fast");
  16.         $(noticias).eq(cont + 1).css("position", "relative").animate({left: "+=50em"}, "fast");
  17.     }
  18. };
  19.  
  20. setInterval(slider.show, 5000);

Lo que hago es lo siguiente; primero, declaro a la variable "noticias", la cual será un array con todas las imágenes que tengas la clase "noti", seguidamente, calculamos la cantidad de imágenes y la asignamos a la variable "total", finalmente, declaramos un contador que iniciará en cero. Luego de eso, aplicamos una posición relativa a los dos primeros elementos del array "noticias" que vienen siendo las dos primeras imágenes y enseguida, las alejamos 50em de la izquierda, con lo que retoman su ubicación original. Para darle el efecto de desplazamiento, utilizo el método animate de jQuery.

Lo anterior corresponde a lo que ocurrirá cuando accedamos a la página, pero después, necesitamos rotar las imágenes actuales por las siguientes y así sucesivamente en un bucle infinito, para esto declaro a la variable "slider" que contendrá un objeto literal; en dicho objeto, declaro el método "show", en el que realizaremos exactamente la acción contraria que hicimos al inicio con los dos primeros elementos del array "noticias", es decir, los desplazamos 50em hacia la izquierda, luego, aumentaremos el valor del contador, para lo cual debemos verificar si al aumentarlo no sobrepasa a la cantidad de imágenes existentes; como estamos mostrando las imágenes de dos en dos, tenemos que hacer la suma de igual forma, si sumándole 2 al valor actual del contador obtenemos la misma cantidad de imágenes, quiere decir que hemos llegado al límite, por lo que el valor del contador vuelve a ser cero para iniciar el rotador desde las dos primeras imágenes, caso contrario, aumentamos su valor en dos.

Ya con el valor del contador actualizado, procedemos a movilizar hacia la izquierda a las dos imágenes que continúan en el array "noticias", si el valor del contador es cero, mostrarás las dos primeras, sino, las que sigan. Todo esto se repetirá cada 5 segundos o 5000 milisegundos, que es el tiempo que asigno en el segundo parámetro del método setInterval, con el cual controlo la ejecución del método "show" del objeto "slider".

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #3 (permalink)  
Antiguo 14/02/2014, 03:35
 
Fecha de Ingreso: febrero-2014
Ubicación: Murcia
Mensajes: 119
Antigüedad: 10 años, 2 meses
Puntos: 0
Respuesta: Scroll con paradas

La verdad que hace mas o menos lo que quiero porque tienes para ponerle ancho y altura, y por supuesto se queda X segundos parado y luego sigue con las siguientes noticias.

Pero me gustaría que la imagen fuese dirección de abajo arriba y con texto, es decir, Imagen en pequeño y justo al lado el texto del enlace..

Tu codigo me va dando ideas
  #4 (permalink)  
Antiguo 14/02/2014, 09:27
 
Fecha de Ingreso: febrero-2014
Ubicación: Murcia
Mensajes: 119
Antigüedad: 10 años, 2 meses
Puntos: 0
Respuesta: Scroll con paradas

Cita:
Iniciado por Alexis88 Ver Mensaje
Si lo que buscas hacer es algo como esto: [url]http://jsbin.com/qugad/1[/url]
Alexis88 podria valer esta funcion que acabo de ver en unos archivos antiguos que tenia..

Código Javascript:
Ver original
  1. /*
  2.      * News slideshow
  3.      */
  4.     var newsArray = $('#landings ul li');
  5.     var newsCount = newsArray.length;
  6.     var currentNews = 0;
  7.     var maxNews = 3;
  8.  
  9.     function triggerNextNews() {
  10.         setTimeout(switchNews, 6000);
  11.         //console.log('Triggering timer ' + currentNews);
  12.     };
  13.  
  14.     function switchNews() {
  15.         $('#landings ul li').first().remove();
  16.         if ((currentNews +1) < newsCount) {
  17.             currentNews++;
  18.         } else {
  19.             currentNews = 0;
  20.         }
  21.  
  22.         var news = newsArray[currentNews];
  23.         $('#landings ul').append(news);
  24.         triggerNextNews();
  25.     };
  26.  
  27.     $('#landings ul li').remove();
  28.     newsArray.each(function() {
  29.         $(this).removeClass('hide');
  30.     })
  31.     for (var i = 0; i <  maxNews; i++) {
  32.         if (i > newsCount) break;
  33.         $('#landings ul').append(newsArray[i]);
  34.         currentNews = i;
  35.     }
  36.     // Run
  37.     triggerNextNews();
  38. });
  39.     //-->

¿Como podría ponerlo a funcionar?
  #5 (permalink)  
Antiguo 14/02/2014, 11:17
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: Scroll con paradas

Amigo, la dirección la modificas cambiando la palabra "left" por "bottom" y los enlaces solamente tienes que colocarlos junto a las imágenes, el tamaño de las imágenes lo reduces colocando una cifra menor en las propiedades "width" y "height". Si se modifica el alineamiento, solamente tienes que jugar con los valores de "margin". Eso es todo.

Ten en cuenta que las imágenes no se ocultan, simplemente se desplazan, creo que te conviene moverlas de izquierda a derecha porque si van de abajo hacia arriba, se puede superponer al contenido de la página que se encuentre abajo. En ese caso, te conviene jugar con la opacidad de las imágenes.

Código CSS:
Ver original
  1. .noti{
  2.     display: inline-block;
  3.     opacity: 0; /* Por defecto, serán transparentes */
  4.     width: 15em;
  5.     height: 8em;
  6.     position: absolute;
  7.     bottom: -50em;
  8.     z-index: inherit;
  9. }

Código Javascript:
Ver original
  1. var noticias = $(".noti"),
  2.     total = noticias.length,
  3.     cont = 0;
  4.  
  5. //Cuando se vayan a mostrar, les quito la opacidad
  6. $(noticias).eq(cont).css({"position": "relative", "opacity": 1}).animate({bottom: "+=50em"}, "fast");
  7. $(noticias).eq(cont + 1).css({"position": "relative", "opacity": 1}).animate({bottom: "+=50em"}, "fast");
  8.  
  9. var slider = {
  10.     show: function(){
  11.         //Cuando se vayan a desplazar, las hago transparentes
  12.         $(noticias).eq(cont).css({"position": "absolute", "opacity": 0}).animate({bottom: "-=50em"}, "fast");
  13.         $(noticias).eq(cont + 1).css({"position": "absolute", "opacity": 0}).animate({bottom: "-=50em"}, "fast");
  14.        
  15.         cont = cont + 2 == total ? 0 : cont + 2;
  16.      
  17.         //Cuando se vayan a mostrar, les quito la opacidad
  18.         $(noticias).eq(cont).css({"position": "relative", "opacity": 1}).animate({bottom: "+=50em"}, "fast");
  19.         $(noticias).eq(cont + 1).css({"position": "relative", "opacity": 1}).animate({bottom: "+=50em"}, "fast");
  20.     }
  21. };
  22.  
  23. setInterval(slider.show, 5000);

Así es como se ve: http://jsbin.com/qugad/3

También podrías optar por mostrarlas una tras otra sin desplazamiento: http://jsbin.com/qugad/5
El código respectivo: http://jsfiddle.net/UXa3r/

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Última edición por Alexis88; 14/02/2014 a las 12:09
  #6 (permalink)  
Antiguo 14/02/2014, 13:44
 
Fecha de Ingreso: febrero-2014
Ubicación: Murcia
Mensajes: 119
Antigüedad: 10 años, 2 meses
Puntos: 0
Respuesta: Scroll con paradas

La verdad que no termino de sacarle punta...
  #7 (permalink)  
Antiguo 14/02/2014, 16:38
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: Scroll con paradas

Analiza el código con calma, revísalo pausadamente una y otra vez, sin apuro, sin prisa, no es algo del otro mundo.
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #8 (permalink)  
Antiguo 15/02/2014, 14:48
 
Fecha de Ingreso: febrero-2014
Ubicación: Murcia
Mensajes: 119
Antigüedad: 10 años, 2 meses
Puntos: 0
Respuesta: Scroll con paradas

Estoy intentando adaptar el código de tunait a mis necesidades y queria ver si alguien puede ayudarm a modificar

Mi codigo .css es:

Código CSS:
Ver original
  1. #new {
  2.     clear: both;
  3. }
  4.  
  5. #new li {
  6.     padding: 5px;
  7.     font-size: 12px;
  8. }
  9.  
  10. #new li {
  11.     min-height: 55px;
  12.     background: #222;
  13.     margin: 5px 0;
  14. }
  15.  
  16.  
  17. #new li img {
  18.     float:left;
  19. }
  20.  
  21. #new li a {
  22.     float:left;
  23.     font-size: 13px;
  24.     width: 205px;
  25.     padding-left: 30px;
  26. }

El .html

Código HTML:
Ver original
  1. <div id="new">
  2.             <h2 class="textouss">Noticias</h2>
  3.             <ul>
  4. <li><img src="jpg" class="fromdb" alt=""/><a title="" href="http://www.">Noticia 1</a></li>
  5. <li><img src="jpg" class="fromdb" alt=""/><a title="" href="http://www">Noticia 2</a></li>
  6. </ul>        </div>
  7.     </div>

Quiero cambiar sus tablas por:

Código HTML:
Ver original
  1. <ul>
  2. <li><img src="jpg" class="fromdb" alt=""/><a title="" href="http://www.">Noticia 1</a></li>
  3. <li><img src="jpg" class="fromdb" alt=""/><a title="" href="http://www">Noticia 2</a></li>
  4. </ul>

Script de tunait es:

Código Javascript:
Ver original
  1. var ancho = 300
  2. var alto = 160
  3. var marco = 0
  4. var fondo = '#CCC'
  5. var pausilla = 3000
  6. var cursor = "default;"
  7. var colTitular = '#fff'
  8. var colTexto = '#999999'
  9. var colFecha = '#3399FF'
  10. var colEnlace = '#660000'
  11. var fuente = "arial"
  12. var tamTitular = '14'
  13. var tamTexto = '12'
  14. var tamFecha = '10'
  15. var tamEnlace = '11'
  16. var alinImagen = 'center'
  17. var margImagen = '1'
  18. var masInfo = true
  19. var poneFecha = true  
  20.  
  21. function noticia(titular,texto,fecha,enlace,destino,imagen)
  22.     {
  23.     this.titular = titular
  24.     this.texto = texto
  25.     this.imagen = imagen
  26.     this.fecha= fecha
  27.     this.enlace = enlace
  28.     this.destino = destino
  29.     }
  30. var noticias = new Array()
  31.  
  32. noticias[0]= new noticia("titulo noticia","texto","12/5/03","http://www.a.es/","_blank","1.gif")
  33. noticias[1]= new noticia("titulo noticia","texto","15/5/03","#","_blank","2.gif")
  34. noticias[2]= new noticia("titulo noticia","texto","17/5/03","http://www.a.com/","_blank","3.gif")
  35. noticias[3]= new noticia("titulo noticia","texto","23/5/03","http://www.a.com/","_blank",null)
  36. noticias[4]= new noticia("titulo noticia","texto","2/6/03","http://www.a.com/","_blank",null)
  37. noticias[5]= new noticia("titulo noticia","texto","5/6/03","#","_blank",null)
  38. noticias[6]= new noticia("titulo noticia","texto","7/6/03","#","_blank",null)
  39. noticias[7]= new noticia("titulo noticia","texto","2/8/03","#","_blank",null)
  40.  
  41.  
  42. var det = false
  43. var hayIma, claseIma
  44. function escribe(){
  45. document.write ('<div id="mami" style="width:' + ancho + 'px; height:' + alto + 'px; position:relative;  overflow:hidden ">')
  46. document.write('<table bgcolor="' + fondo + '" border = "' + marco + '" width="' + ancho + '" height="100%"><tr><td valign="top">')
  47. document.write ('<div id="uno" style="top:' + alto +'px; width:' + ancho + 'px; height:' + alto + 'px;  ">')
  48. document.write ('<div class="titular">')
  49. document.write (noticias[0].titular)
  50. document.write ('</div>')
  51. if(noticias[0].imagen != null){
  52.     hayIma = true
  53.     claseIma = 'imagen'
  54.     }
  55. else{
  56.     hayIma = false
  57.     claseIma = 'noImagen'
  58.     }
  59. document.write ('<div class="' + claseIma + '">')
  60. document.write ('<img src="' + noticias[0].imagen + '">')
  61. document.write ('</div>')
  62. document.write ('<div class="fecha">')
  63. document.write (noticias[0].fecha)
  64. document.write ('</div>')
  65. document.write ('<div class="texto">')
  66. document.write (noticias[0].texto)
  67. document.write ('</div>')
  68. if(masInfo == true){
  69.     document.write ('<a class="enlace" href="')
  70.     document.write (noticias[0].enlace)
  71.     document.write ('" target="' + noticias[0].destino + '">más info</a>')
  72.     }
  73. document.write ('</div>')
  74. document.write ('<div id="dos" style="top:' + (alto*2) +'px; width:' + ancho + 'px; height:' + alto + 'px; ">')
  75. document.write ('<div class="titular">')
  76. document.write (noticias[1].titular)
  77. document.write ('</div>')
  78. if(noticias[1].imagen != null){
  79.     hayIma = true
  80.     claseIma = 'imagen'
  81.     }
  82. else{
  83.     hayIma = false
  84.     claseIma = 'noImagen'
  85.     }
  86.  
  87. document.write ('<div class="' + claseIma + '">')
  88. document.write ('<img src="' + noticias[1].imagen + '">')
  89. document.write ('</div>')
  90. document.write ('<div class="fecha">')
  91. document.write (noticias[1].fecha)
  92. document.write ('</div>')
  93. document.write ('<div class="texto">')
  94. document.write (noticias[1].texto)
  95. document.write ('</div>')
  96. if(masInfo == true){
  97.     document.write ('<a class="enlace" href="')
  98.     document.write (noticias[1].enlace)
  99.     document.write ('" target = "' + noticias[1].destino + '">más info</a>')
  100.     }
  101. document.write ('</div>')
  102. document.write('</td></tr></table>')
  103. document.write ('</div>')
  104. if(navigator.appName == "Netscape")
  105. {altoUno = document.getElementById('uno').offsetHeight}
  106. else
  107. {altoUno = document.getElementById('uno').clientHeight}
  108. document.getElementById('uno').onmouseover =function(){
  109.     det = true
  110.     clearTimeout(tiempo)
  111.     }
  112. document.getElementById('uno').onmouseout =function(){
  113.     det = false;
  114.     clearTimeout(tiempo)
  115.     escrolea()
  116.     }
  117.  
  118. document.getElementById('dos').onmouseover =function(){
  119.     det = true
  120.     clearTimeout(tiempo)
  121.     }
  122. document.getElementById('dos').onmouseout =function(){
  123.     det = false;
  124.     clearTimeout(tiempo)
  125.      escrolea()
  126.      
  127.     }
  128. }
  129. desp = 1
  130. var cont = 1
  131. var pos,pos2
  132. function escrolea(){
  133. pos = document.getElementById('uno').style.top
  134. pos = pos.replace(/px/,"");
  135. pos = pos.replace(/pt/,"");
  136. pos = new Number(pos);
  137. pos2 = document.getElementById('dos').style.top
  138. pos2 = pos2.replace(/px/,"");
  139. pos2 = pos2.replace(/pt/,"");
  140. pos2 = new Number(pos2);
  141. pos -= desp
  142. pos2 -= desp
  143.  
  144. if (pos == desp){
  145.     var contenidos = ""
  146.     document.getElementById('dos').style.top = alto + "px"
  147.     document.getElementById('dos').childNodes[0].firstChild.nodeValue  = noticias[cont].titular
  148.     if(noticias[cont].imagen != null){
  149.         document.getElementById('dos').childNodes[1].firstChild.src = noticias[cont].imagen
  150.         document.getElementById('dos').childNodes[1].className = 'imagen'
  151.         }
  152.     else{
  153.         document.getElementById('dos').childNodes[1].className = 'noImagen'
  154.         }
  155.     if(poneFecha == true){
  156.     document.getElementById('dos').childNodes[2].firstChild.nodeValue  = noticias[cont].fecha
  157.     }
  158.     document.getElementById('dos').childNodes[3].firstChild.nodeValue  = noticias[cont].texto
  159.         if(masInfo == true){
  160.         document.getElementById('dos').childNodes[4].href = noticias[cont].enlace
  161.         document.getElementById('dos').childNodes[4].href = noticias[cont].destino
  162.         }
  163.     document.getElementById('uno').style.top = 0
  164.     if(cont == noticias.length-1)
  165.         {cont=0}
  166.     else{
  167.         cont++
  168.         }
  169.     pausa()
  170.     return false
  171.     }
  172. else{
  173.     if (pos2 == desp){
  174.         var contenidos = ""
  175.         document.getElementById('uno').style.top = alto + "px"
  176.         document.getElementById('uno').childNodes[0].firstChild.nodeValue  = noticias[cont].titular
  177.         if(noticias[cont].imagen != null){
  178.         document.getElementById('uno').childNodes[1].firstChild.src = noticias[cont].imagen
  179.         document.getElementById('uno').childNodes[1].className = 'imagen'
  180.         }
  181.     else{
  182.         document.getElementById('uno').childNodes[1].className = 'noImagen'
  183.         }
  184.         if(poneFecha == true){
  185.         document.getElementById('uno').childNodes[2].firstChild.nodeValue  = noticias[cont].fecha
  186.         }
  187.         document.getElementById('uno').childNodes[3].firstChild.nodeValue  = noticias[cont].texto
  188.         if(masInfo == true){
  189.         document.getElementById('uno').childNodes[4].href  = noticias[cont].enlace
  190.         document.getElementById('uno').childNodes[4].href  = noticias[cont].destino
  191.         }
  192.         document.getElementById('dos').style.top = 0
  193.         if(cont == noticias.length-1)
  194.         {cont=0}
  195.     else{
  196.         cont++
  197.         }
  198.         pausa()
  199.         return false
  200.         }
  201.     else{
  202.         document.getElementById('uno').style.top = pos + "px"
  203.         document.getElementById('dos').style.top = pos2 + "px"
  204.         }
  205.     }
  206. tiempo = window.setTimeout('escrolea()',50)
  207. }
  208. var tiempo
  209. function pausa()
  210. {
  211. clearTimeout(tiempo)
  212. if (det == false){
  213.     tiempo = setTimeout ('continuar()',2000)
  214.     }
  215. }
  216. function continuar()
  217. {
  218. if(det == false)
  219.     {escrolea()}
  220. }
  221.  
  222. document.write('<style type="text/css">')
  223. document.write ('#uno {')
  224. document.write ('color: #006699;')
  225. if(cursor == "pointer" || cursor == "hand"){
  226. cursor = (navigator.appName == "Netscape")?'pointer;':'hand;';
  227. }
  228. document.write ('cursor:' + cursor + ";")
  229. document.write ('position:absolute;}')
  230. document.write ('#dos {')
  231. document.write ('color: #006699;')
  232. document.write ('cursor:' + cursor + ";")
  233. document.write ('position:absolute;}')
  234. document.write ('.titular{')
  235. document.write ('color:' + colTitular +';')
  236. document.write ('font-family:' + fuente + ';')
  237. document.write ('font-size :' + tamTitular + 'px;font-weight:bold}')
  238. document.write ('.texto{')
  239. document.write ('color:' + colTexto + ';')
  240. document.write ('font-family:' + fuente + ';')
  241. document.write ('font-size:' + tamTexto + 'px;}')
  242. if(poneFecha == true){
  243. document.write ('.fecha{')
  244. document.write ('color:' + colFecha +';')
  245. document.write ('font-family:' + fuente + ';')
  246. document.write ('font-size :' + tamFecha + 'px;font-weight:bold}')
  247. }
  248. else{
  249. document.write ('.fecha{display: none;}')
  250. }
  251. document.write ('.enlace{')
  252. document.write ('color:' + colEnlace + ';')
  253. document.write ('font-family:' + fuente + ';')
  254. document.write ('font-size:' + tamEnlace + 'px;}')
  255. document.write ('.imagen{')
  256. document.write ('text-align:' + alinImagen + ';')
  257. document.write ('margin: ' + margImagen + 'px;}')
  258. document.write ('.noImagen{display:none;}')
  259. document.write ('</style>')
  260. </script>

El scritp muestra: titulo+imagen+fecha+texto+enlace
y solo quiero imagen + titulo justamente al lado

Espero que alguien pudiera ayudar!

Etiquetas: css, noticia, rotador, scroll
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:06.