Slider de nota con opción visible para abrir

[ceaped]

Buenar tardes

Voy a utilizar esto:

http://moreco.de/slide-note/

Como hago para que se quede viendo un pequeño botón a la derecha para volverse abrir?

Gracias por su ayuda

[Pablo Ayala]

Tienes que flotar un div con alguna imagen o algun texto con el id que tu quieras (en este caso, id="abrir"), segun tus necesidades y poner el siguiente codigo java: (TAL COMO EN LA PAGINA QUE PUBLICAS)

Código Javascript:

$('#container, #abrir').click(function() {
 
  $("#container").slideNote({
 
    where: 640,
    corner: 'left',
    url: 'ajax.html',
    container: '<b style="color:black;background-color:#a0ffff">note</b>',
    closeImage: '/images/close.png',
    displayCount: 3,
    onSlideIn: function() { 
      alert('Displayed!'); 
    },
    onSlideOut: function() { 
      alert('Hidden!');
    }
     
  });
   
});
 

Aunque te diré algo, me gusta mucho usar jquery... pero para un div que se muestra y oculta, no creo que necesites usar un plugin mas mas....

Con un poco de imaginacion puedes hacer algo igual o mejor, usando solo jquery

Saludos

[ceaped]

Hola Pablo Ayala
Gracias por tu ayuda
Me puedes indicar algún ejemplo sólo con jQuery de un menseje que se puedar ver al inicio y que luego se pueda ocultar con la opción de poderse mostrar de nuevo?.
Yo lo que estoy buscando es una pequeña ventana en la partes inferior derecha que se cargue cuando se abra mi sitio Web y que tenga la opción de ocultar y abrir de nuevo.

Gracias por tu ayuda

[Pablo Ayala]

Hola ceaped....

Te paso un ejemplo que tendras que mejorar de acuerdo a tus necesidades,

Código CSS:

#contenedor{
                position: fixed;
                bottom:0;
                right: 0;
                width: 660px;
            }
        
            #mensaje{
                width: 500px;
                height: 250px;
                background-color: yellow;
                float: right;       
                /*margin-right: -500px;*/        
            }
            
            #activa{
                cursor:pointer;
                float:right;
                color:red;
                font-size: 18px;
                margin-right: 20px;
            }
 

Código HTML:

<div id="contenedor">       
        <div id="mensaje">Aquí tu mensaje</div>
        <div id="activa">Cerrar mensaje</div>
        </div>
 

Código Javascript:

$(document).ready(function(){
                contador = 0; 
                $("#activa").click(function(){                  
                    $('#mensaje').animate({
                         width: "toggle"                         
                      }, 500, function() {
                           if (contador == 0){
                                $("#activa").html("Ver mensaje");
                                contador++;
                           }else{
                                $("#activa").html("Cerrar mensaje");
                                contador--;
                           }                       
                           
                      });               
                });
            });
 

Espero que te sirva,

Saludos

[ceaped]

Hola Pablo Ayala
Nuevamente gracias por tu ayuda.

Mira encontré algo que se ajusta a lo que necesito:

http://www.htmldrive.net/items/demo/...rolling-Effect

¿Cómo le puedo poner un botón que lo oculte y otro que lo haga visible?

Gracias por tu ayuda

[ceaped]

Hola Pablo Ayala
Que pena ya vi en donde esta para incrementar o reducir la lista, pero no se como poner sólo 4 noticias y que se roten, yo la pongo así en 3 y se me pierde una noticia y si la pongo en 4 se me queda estática, tendría que ponerle más de 4 noticias para que se mueva.

Me dices como hago para poner sólo 4 noticias y se roten.

Y si también me ayudas con ponerle un botón para ocultar y ponerlo visible.

Código Javascript:

limit = limit || 3;
interval = interval || 4000;
 

Gracias por tu ayuda