Como hago esto?

MatiDeve · #1 (**permalink**) 05/03/2013, 00:06

Buenas, no llego ni a ser novato en JS pero me imagino que esto tiene que ver con JS.

Quiero agregar esa barra en mi pagina y que adentro tenga paginas de face para dar likes. Alguien sabe como hacerla? Alguien sabe el nombre?

Saludos
NNV!

TANIA1993 · #2 (**permalink**) 05/03/2013, 02:02

No entiendo muy bien tu pregunta.

la barra de desplazamiento se llama scroll.

si lo que quieres es personalizarla te recomiendo jquery (http://api.jquery.com/scroll/)

ahora no se si es eso lo que quieres ? si no es así por favor trata de ser mas preciso en tu pregunta.

MatiDeve · #3 (**permalink**) 05/03/2013, 14:07

Aunque eso no es lo que quiero, gracias porque no sabia como se llamaba. Igual te aproximaste :D. Yo lo que quiero es hacer un area donde hayan muchas paginas de facebook con el boton like (eso se como hacerlo) y que tenga un scroll para que no ocupe mucho espacio, no se si me entendes. Ahi hago un dibujo en paint.

EDIT: Ya lo encontre, no podria haberlo hecho si no me decias el nombre! Para los que quieren la solucion de como hacerlo http://www.forosdelweb.com/f4/scroll-html-640898/

TANIA1993 · #4 (**permalink**) 06/03/2013, 11:22

Es bastante fácil lo que me pides, podrías utilizar un frame para almacenar la pagina marcos.html y archivar el scroll.
y en la pagina marcos puedes hacer una tabla de 2 columnas y agregar dentro de cada cuadro el codigo de like proporcionado por facebook.
ahora si lo que quieres es hacerlo dinámico solo debes almacenar el embled de cada pagina de facebook en tu base de datos y después hacer un región repetible en la tabla, isa te mostrara todas las paginas.

Dame un momento y hago un ejemplo pero sin base de datos.

TANIA1993 · #5 (**permalink**) 06/03/2013, 11:43

Hola aquí tengo tu código.

index.html

Código HTML:

Ver original<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Para foros del web</title>
 
</head>
 
<body>
<h1>Nuestras paginas en Facebook</h1>
<!--el div es solo para centrar el ejemplo-->
<div align="center">
<!--al iframe le damos unas cuantas propiedades como alto (tu lo puedes modificar a tu medida)-->
<iframe style="border:none; overflow-x:hidden; overflow-y:auto" scrolling="yes" src="paginas.html" width="330px" height="450px"></iframe></div>
</body>
</html>

paginas.html

Código HTML:

Ver original<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Para foros del web</title>
<style type="text/css">
.espaciotop{
    margin-top:7px;
    padding-top:7px;
}
</style>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/es_ES/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</head>
 
<body>
<table width="145" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="espaciotop"><div class="fb-like" data-href="https://www.facebook.com/ArteColombianoale" data-send="true" data-width="320" data-show-faces="true"></div></td>
  </tr>
  <tr>
    <td class="espaciotop"><div class="fb-like" data-href="https://www.facebook.com/ArteColombianoale" data-send="true" data-width="320" data-show-faces="true"></div></td>
  </tr>
  <tr>
    <td class="espaciotop"><div class="fb-like" data-href="https://www.facebook.com/ArteColombianoale" data-send="true" data-width="320" data-show-faces="true"></div></td>
  </tr>
  <tr>
    <td class="espaciotop"><div class="fb-like" data-href="https://www.facebook.com/ArteColombianoale" data-send="true" data-width="320" data-show-faces="true"></div></td>
  </tr>
  <tr>
    <td class="espaciotop"><div class="fb-like" data-href="https://www.facebook.com/ArteColombianoale" data-send="true" data-width="320" data-show-faces="true"></div></td>
  </tr>
  <tr>
    <td class="espaciotop"><div class="fb-like" data-href="https://www.facebook.com/ArteColombianoale" data-send="true" data-width="320" data-show-faces="true"></div></td>
  </tr>
  <tr>
    <td class="espaciotop"><div class="fb-like" data-href="https://www.facebook.com/ArteColombianoale" data-send="true" data-width="320" data-show-faces="true"></div></td>
  </tr>
  <tr>
    <td class="espaciotop"><div class="fb-like" data-href="https://www.facebook.com/ArteColombianoale" data-send="true" data-width="320" data-show-faces="true"></div></td>
  </tr>
  <tr>
    <td class="espaciotop"><div class="fb-like" data-href="https://www.facebook.com/ArteColombianoale" data-send="true" data-width="320" data-show-faces="true"></div></td>
  </tr>
  <tr>
    <td class="espaciotop"><div class="fb-like" data-href="https://www.facebook.com/ArteColombianoale" data-send="true" data-width="320" data-show-faces="true"></div></td>
  </tr>
</table>
</body>
</html>

espero te sirva, quedo atento a tu respuesta.

Reedyseth · #6 (**permalink**) 06/03/2013, 12:08

MatiDeve esto no tiene nada que ver con Javascript, por que lo que quieres es utilizar el scroll, lo cual es darle un estilo a tu elemento, lo cual te lleva a usar CSS y en CSS usas una propiedad que se llama overflow con lo cual puedes ajustar contenido:

Uso de overflow en css: http://www.w3schools.com/cssref/pr_pos_overflow.asp

Aqui te pongo un ejemplo: http://fiddle.jshell.net/MRJjK/

underwebinfo · #7 (**permalink**) 06/03/2013, 13:50

lo que te dijo @Reedyseth es lo que te solucionara el problema, esto se soluciona con css no js.

Reedyseth · #8 (**permalink**) 06/03/2013, 15:16

Recuerda, Manipulacion del DOM con Javascript, estilos visuales CSS !!