Jump to content

SCRIPT NOTICIERO CON SCROLL INFINITO


MesterLum
 Share

Recommended Posts

Hola, que tal a todos, hoy vengo a regalarles una parte de lo que vendria siendo un noticiero, seccion de noticias, como quieran decirle, que algo parecido a esto:

Debes iniciar sesión para ver el contenido del enlace en esta publicación.

 

bien, básicamente es un noticiero con scroll infinito empleado ajax y json. es muy básico, por medio de JavaScript solicito datos a travez de ajax a php, php responde y manda a travez de json, JavaScript entiende JSON y plasma el array, en este caso y se refleja en la web.

 

 

No dare soporte de instalación, y, esta versión no esta terminada del todo. Sí quieres soporte, para adaptarla a tu web, crearle una sección para introducir nuevas noticias etc, entonces en ese caso cobrare servicios.

 

Esto es la conexion, luego veremos como lo utilizaremos.

<?php

  $DB_HOST = "localhost";
  $DB_NAME = "host";
  $DB_USER = "root";
  $DB_PASS = "";


 ?>

A qui esta la clase de php para la conexión.

<?php

class conexion{


    public static function conection(){
        require("daten_inc.php");
        try{
          $conexion = new PDO("mysql:host=$DB_HOST;dbname=$DB_NAME", "$DB_USER", "$DB_PASS");
          $conexion->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
          $conexion->exec("SET CHARACTER SET UTF8");


        }catch(Exception $e){
          die ("Error al conectar con la base de datos");
          echo "Linea: " . $e->getLine();
        }

        return $conexion;

    }

}

 ?>

Aquí esta la parte de la consulta SQL para la llamada (sinceramente la consulta esta mejor con INER JOIN debido que se tiene que extraer con el id_account la id de la cuenta para mostrarlo)

<?php

class article{

  protected $conection;

    public function __construct(){

        require("conection.php");
        $this->conection = conexion::conection();


    } // End construct

    public function get_notice($hasta){

        $sql = "SELECT * FROM notice ORDER BY date DESC limit $hasta, 3";
        $query = $this->conection->query($sql)->fetchAll(PDO::FETCH_ASSOC);
        $r = count($query);
        if ($r == 0)
            $query = array("status" => "Empty");

        echo json_encode($query);


    } //End get_notice

} // End class
$x = new article();
$hasta = $_POST["hasta"];
$x->get_notice($hasta);

 ?>

Pasamos al lado de JavaScript, en este caso, viene incluido ya con el metodo AJAX

var scroll = true;
var pag = 0, hasta;
function aumento(){
pag++;
hasta = pag*3;


}

$(document).ready(function(){


  //Scroll para las noticias del menu




  if (pag == 0){
    var daten = [{name: "hasta", value: 0}];

    //console.log(daten);

      $.ajax({

                 url: "page/article.php",
                 data:  daten,
                 type:  "post",
                 dataType:  "json",
                 success : function(date){
                  console.log(date);
                  if (date.status == "Empty"){
                    scroll = false;
                  }
                  else{
                    for (var i=0; i<date.length; i++){
                      $('.contenedor').append('<article class="article_notice"><header class="header_notices"><p><strong><i>'+ date[i].tittle + '</strong></p></header><section class="section_notices"><p>'+ date[i].body + '</p></section><footer  class="footer_notices">autor, fecha</footer></article> ');
                    }
                 }
               }

                 })
                 .fail(function(){
                   alert("No se pudo enviar");
                 });


  }
  $('.contenedor').scroll(function(){
    if (($(this).scrollTop() +  $(this).height()) == $(this).prop('scrollHeight') && scroll == true){
      aumento();

        var daten = [{name: "hasta", value: hasta}];
        //console.log(daten);
        $.ajax({

        url: "page/article.php",
        data:  daten,
        type:  "post",
        dataType:  "json",
        success : function(date){

          if (date.status == "Empty"){
            scroll = false;
          }
          else{
            for (var i=0; i<date.length; i++){
              $('.contenedor').append('<article class="article_notice"><header class="header_notices"><p><strong><i>'+ date[i].tittle + '</strong></p></header><section class="section_notices"><p>'+ date[i].body + '</p></section><footer  class="footer_notices">autor, fecha</footer></article> ');
            }
          }


        }


        })
        .fail(function(){
          alert("No se pudo enviar");
        });

      } //if condicion

  });

});


Como plus, incluire la parte de la hoja de estilos. (no dare información acerca de los selectores ni nada por el estilo)

.notices{
  float: right;
  margin: auto;
  background-color: transparent;
  width: 50%;
  height: 200px;
  margin-right: 6%;
}
.titulo_notices{
  background-color: grey;
  text-align: center;
  font-size: 30px;
  width: 80%;
  margin: auto;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-color: orange;
  border-bottom-width: 5px;
  border-bottom-style: solid;
  color: white;
  margin-top: 50px;
}
.notices .article_notice{

  background-color: transparent;
  background-color: grey;


}
.notices .contenedor{

  background-color: transparent;
  overflow: auto;
  height: 230px;
  width: 80%;
  margin: auto;


}
.header_notices{
  margin-left: 5px;
  margin-top: 6px;
  margin-bottom: 6px;
  overflow: hidden;
  font-size: 30px;
  
}
.section_notices{
  overflow: auto;
  text-align: justify;
  margin-left: 13px;
  margin-right: auto;
  text-decoration: none;
  margin-bottom: 10px;
}
.footer_notices{
  margin-left: 5px;
}

La parte del HTML

     <!--Noticias-->

      <div class="notices">
        <div class="titulo_notices">NOTICIAS <i class="fa fa-comments" aria-hidden="true"></i></div>
        <div class="contenedor"></div>

    </div>

y ya para finalizar, la parte SQL

 

Debes iniciar sesión para ver el contenido del enlace en esta publicación.
!nNpe8PSy2BXlbwTuHUanAOs2a09ztY_cWdpMQJQmrqM

 

 

PD:en la sección del javascript se pueden reducir algunas lineas de codigo con la seccion donde es valor == 0.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...