Entrar

efecto leer mas con jquery o php

danny · · Solicitar retirada
que tal amigos ;D, tengo un problemilla, quiero imprimir items de una categoria pero no quiero imprimir todos los items ya que son muchos quiero ponerle un link de ver mas y que el mismo usuario los muestre todos los items, algo asi:

CATEGORIA CURSOS
-Algrebra - Lenguaje - Historia - Ver Más
y al click en ver mas deberia mostrar:
CATEGORIA CURSOS
-Algrebra - Lenguaje - Historia - Quimica - Biologia - Civica -Ver Menos
Todos los items son enlaces a una pagina no tengo idea como hacerlo si con php o con jquery o css, a ver si alguien puede ayudarme que me vuelvo loco u,u, Gracias
skaparate · · Solicitar retirada
Hola!

Debe ser con AJAX, pues es la única forma en este momento (también con Flash, pero no lo recomendaría a nadie). Puedes usar jQuery que, de hecho, te facilitará mucho el trabajo.

Ahora, cómo mostrarlo dependerá de lo que necesites, pero debes paginar tus resultados, por lo que el botón Ver más debería ser un enlace como este:

<a htref="#page0" class="more-categories">Ver más</a>

El código jQuery podría ser este:

jQuery(document).ready(function($) {
    $('a.more-categories').on('click', function(e) {
        e.preventDefault();
        var $this = $(this);
        // Si escribí bien la expresión regular, esto debería extraer sólo el número.
        var p = $this.attr('href').replace('[^\d]', '');

        $.ajax({
            url: '/load_categories.php',
            method: 'post',
            data: {
                page: p
            }
        }).done(function(responseData) {
            if (responseData != '') {
                $this.parent().find('.contenedor-categorias').append(responseData);
                $this.attr('href', '#page' + (p++));
            } else {
                // Si no hay más resultados, esconde el botón.
                $this.hide();
            }
        });
    });
});

load_categories.php
<?php
// Te conectas y seleccionas la base de datos, etc.
$page = 0;
$rpp = 10; // resultados por página

if (isset ($_POST['page']) && is_numeric ($_POST['page']))
    $page = $_POST['page'];

$offset = $page * $rpp;

$query = "SELECT columnas_categoria FROM categorias WHERE condicion LIMIT $offset, $rpp";
$result = mysql_query ($query, $conexion);
$out = '';

if ($result)
{
    // Formatea los resultados como html:

    while ( ( $row ...) )
    {
        $out .= "<li>$row[nombre_categoria]</li>";
    }
}

echo $out;

En teoría, lo que acabo de escribir debería funcionar, pero aún quedan dos cosas por hacer:

1. Quitar N categorías al presionar Ver menos.
2. Con respecto al punto anterior, ¿qué ocurre si el usuario quiere ver nuevamente las 10 categorías que quitaste?

Espero que te sirva.
danny · · Solicitar retirada
gracias skaparate, lo probé, no me muestra el resto de items, el link de ver mas le puse terminando el codigo php, tal vez algo por ahi nomas esta fallando u,u
danny · · Solicitar retirada
el problema es que no tengo la mínima idea de javascript tal ves si un poco de php, así como está, sin ser desagradecido no me sirve porque no entiendo nada u,u
skaparate · · Solicitar retirada
¿Que parte no entiendes?

Todo lo que mostré debería ser fácil de adaptar si conoces al menos un lenguaje de programación y la documentación de las librerías :P.

Publica el código PHP y HTML involucrado para ver si se puede adaptar fácilmente.
danny · · Solicitar retirada
<?php
require("claseredes.php");
require("conexion.php");
require("fn_seo.php");
?>
<html>
<head>
<script src="<? echo $web;?>/js/jquery.min.js"></script>
</head>
<body>
<div class="twelve columns">
	  <h1>Lista de Canales</h1>
	<p>Desde aqui tienes la opcion de elegir entre los cientos de salas que tenemos para ti, puedes aventurarte por ligar con hombres o mujeres, hacer amigos, conocer gente de otros paises de latinoamerica o compartir tus anectotas en las salas de ocio. Desde ya te invitamos a chatear en cualquier sala totalmente gratis.</p>
    <?php
$consucates = mysql_query("select * from desc_categorias order by id_categoria asc limit 1,30");//aqui comienzo desde 1 ya que tengo una categoria 0 que no quiero mostrar
$x=1;
while($mc = mysql_fetch_array($consucates)){
	$con = $mc[categoria];
	$cate = $mc[id_categoria];
	$conte = $mc[content];
		echo "<div class='five columns'><div class='sp fav ".seo($con)."'></div><h3>".$con."</h3><p style='padding-left:70px;'>".$conte."</p><p id='textsalas'>";
		$consusalas = mysql_query("select * from salas where id_categoria = $cate order by titulo asc limit 5");
		while($ms = mysql_fetch_array($consusalas)){
			echo "<a href='$web/salas-de-chat/".$ms[id_sala]."-".seo($ms[titulo]).".php'>$ms[titulo]</a> - ";
		}
		echo "<a href='#'>ver más</a></p></div>";
		if(2==$x)
    {
        echo"<div class='clear'></div>";
        $x = 0;
    }
    $x++;
		}?>    
    <div class="clear"></div>
</body>
</html>
Hago dos consultas, la primera me muestra las categorias y dentro de cada una muestro todos los items que concuerden con el id de la categoria, la estructura de la db es:
tabla salas{
id_sala int primary key
titulo varchar
contenido longtext
id_categoria int3
}

tabla desc_categorias{
id_categoria int3 primary key
categoria varchar
}
skaparate · · Solicitar retirada
El código que puse al comienzo no funciona porque:

1. El link ver más debe tener la clase .more-categories.
2. Debes incluir la librería jQuery.
3. Recuerda crear el archivo.php con el código que puse anteriomente (y adaptarlo a tu web).

Si ya hiciste todo lo anterior, pero aún así no funcionó, entonces necesitas revisar los errores en el navegador (la consola) y los de PHP (si es que hay alguno).