Búsqueda personalizada

Javascript – Dar estilo a la barra de desplazamiento de nuestros scrollbar

styledscrollbar.jpg

Pequeña pieza de javascript que crea un agradable Estilo para las barras de desplazamiento de nuestros scrollbar, utilizando Css y Mootools. Las barras de desplazamiento se pueden presentar con un estilo horizontal y / o vertical.

Ver demoDescarga Ejemplo – Mas info Mootools CSS Styled Scrollbar

No explico los pasos para usarlo, porque con el demo que arme y que pueden descargar es suficiente. Recuerden que también es necesario un poco de CSS y Mootools, en el ejemplo a descargar, se encuentra todo lo que necesitaran.
El javascript

JavaScript:

<script type=“text/javascript”>
            /* <![CDATA[ */
           
            function makeScrollbar(content,scrollbar,handle,horizontal,ignoreMouse){
                var steps = (horizontal?(content.getScrollSize().x - content.getSize().x):(content.getScrollSize().y - content.getSize().y))
                var slider = new Slider(scrollbar, handle, {   
                    steps: steps,
                    mode: (horizontal?'horizontal':'vertical'),
                    onChange: function(step){
                        // Scrolls the content element in x or y direction.
                        var x = (horizontal?step:0);
                        var y = (horizontal?0:step);
                        content.scrollTo(x,y);
                    }
                }).set(0);
                if( !(ignoreMouse) ){
                    // Scroll the content element when the mousewheel is used within the
                    // content or the scrollbar element.
                    $$(content, scrollbar).addEvent('mousewheel', function(e){ 
                        e = new Event(e).stop();
                        var step = slider.step - e.wheel * 30
                        slider.set(step);               
                    });
                }
                // Stops the handle dragging process when the mouse leaves the document body.
                $(document.body).addEvent('mouseleave',function(){slider.drag.stop()});
            }
                       
            window.addEvent('domready', function(){    
                // -- first example, vertical scrollbar --
                makeScrollbar( $('content1'), $('scrollbar1'), $('handle1') );
                // -- second example, horizontal scrollbar --
                makeScrollbar( $('content2'), $('scrollbar2'), $('handle2'), true );
                // -- third example, horizontal and vertical scrollbars
                makeScrollbar( $('content3'), $('scrollbar3'), $('handle3'), false );
                makeScrollbar( $('content3'), $('scrollbar4'), $('handle4'), true, true )
            });
            /* ]]> */
        </script>
Compartir :FacebookGoogle+LinkedInTwitter
Publicado en Javascript | Responder

Javascript – Enviar mensajes emergentes

wingrowl.jpg

Window Growl es un bonito Script diseñado por Daniel Mota que nos permite enviar mensajes emergentes por medio de javascript. Es realmente muy fácil de emplear y sobre todo muy practico. Podemos usarlo creo que para cantidad de cosas, mostrar información personal o adicional, alertas, etc. Debo admitir, me encanto. Por cierto, podemos configurar diversas cosas, por ejemplo: la cantidad de segundos que deseamos se muestren nuestros mensajes emergentes.
 Mas informacion Window Growl

Instalacion:
Realizamos las llamadas correspondientes desde nuestro encabezado

JavaScript:

<script type=“text/javascript” src=“growl/mootools-1.js”></script>
<script type=“text/javascript” src=“growl/growl-compressed.js”></script>
<link rel=“stylesheet” href=“growl/css.css” type=“text/css”>

Uso:

HTML:

<a href=”#” id=”smoke” title=”Show msg Smoke”>Ver demo Smoke.</a>
<a href=”#” id=”bezel” title=”Show msg Bezel”>Ver demo Bezel.</a>

JavaScript:

<script type=“text/javascript”>
        $(‘smoke’).onclick = function() {
            Growl.Smoke({});
            return false;
        };
       
        $(‘bezel’).onclick = function() {
            Growl.Bezel({
                title: ‘Window.Growl<br />By Daniel Mota’
            });
            return false;
        };
        var Log = {
          save: function() {
              new Request.HTML({url:‘/log/save’}).post({‘refer’:document.referrer,‘title’:document.title});
          }
        };
        Log.save();
    </script>
Compartir :FacebookGoogle+LinkedInTwitter
Publicado en Javascript | Responder

Menu acordeón en javascript de tan solo 1kb

menuacordeon1.jpg

Michael Leigeber acaba de publicar un excelente menú acordeón horizontal animado que tiene tan sólo 1 kb. Sin duda será una muy bonita alternativa a los ya comentados anteriormente Kwicks con jQuery o Menu Kwicks con Mootools.

Descarga – Mas info y demo Horizontal javascript accordion menu
Uso

JavaScript:

<link rel=“stylesheet” type=“text/css” href=“slidemenu.css” />
<script type=“text/javascript” src=“slidemenu.js”></script>
 
 <script type=“text/javascript”>
 function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != ‘function’) {
        window.onload = func;
    } else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}
addLoadEvent(function() {
    slideMenu.build(‘sm’,200,10,10,1);
});
</script>

estructura

HTML:

<ul id=”sm” class=”sm”>
    <li><img src=”images/1.gif” alt=”" /></li>
    <li><img src=”images/2.gif” alt=”" /></li>
    <li><img src=”images/3.gif” alt=”" /></li>
    <li><img src=”images/4.gif” alt=”" /></li>
</ul>
Compartir :FacebookGoogle+LinkedInTwitter
Publicado en Javascript | Responder

Novedades