Ayuda [plugin jquery para mostrar capas]

[danneg]

Hola foreros!!

mi problemas esta vez (espero que alguien me ayude) es este:

estoy desarrollando un plug-in jquery para mi, el cual al pulsar un boton o enlace muestra una capa tipo widget el cual tendra una aplicacion dentro

el problema es que no ejecuta el codigo ademas de detener lo que esta escrito despues de llamar dicha funcion

la funcion deberia ser algo asi

Código Javascript:

$("#objeto").contextDialog("url de la aplicacion", "titulo", "aliniacion");
 

con ese codigo se supone que aparecera a un lado de el boton pulsado, pero no funciona, revise todo el codigo, y no encunetro mi error, por favor si pueden identificar cual es, me ayudaria mucho, igual cualquier sugerencia sobre optimizacion y cambio para mejorar!!

les dejo el codigo

Código Javascript:

function($) {
    $.fn.contextDialog = function(title, urlContent, align){
        return this.each(
            $(this).click(function(e){
                $.fn.contextDialog._hide();
                this.append(
                    '<div id="appSide">' +
                        '<div id="appTitle">' + title + '</div>' +
                        '<div id="appContent">' +
                            '<iframe id="appFrame" src="' + urlContent + '" frameborder="0" framespacing="0" border="0"></iframe>' +
                        '</div>' +
                        '<div id="appOptins">Ver mas</div>' +
                    '</div>'
                );
                var pos = this.offset();
                switch(align){
                    case "right":
                        $("#appSide").css({
                            top: pos.top,
                            left: pos.left + this.innerWidth()
                        });
                    break;
                    case "left":
                        $("#appSide").css({
                            top: pos.top,
                            left: pos.left - $("#appSide").innerWidth() - 5
                        });
                    break;
                    default:
                        $("#appSide").css({
                            top: pos.top,
                            left: pos.left + this.innerWidth()
                        });
                    break;
                }
                this.click( function(a) {
                    $.fn.contextDialog._hide();
                    a.preventDefault();
                    this.click( function(o) {
                        $.fn.contextDialog(urlContent, title, align);
                        o.preventDefault();
                    });
                });
                e.preventDefault();
            });
        );
    };
 
    $.fn.contextDialog._hide = function() {
            $("#appSide").remove();
    };
})(jQuery);
 

aa, una cosa mas, esto fue basado a un codigo que desarrolle solo para un boton, pero no me sirve solo usarlo con un boton, ese codigo funciona bien, pero repito no me sirve solo para un objeto, tambien les dejo el codigo que funciona

Código Javascript:

(function($) {
 
    $._context_dialog = {
 
    // Metodos de traducción, cambia el texto entre comillas
    //por los de tu idioma o el idioma deseado.
 
        dialogClass: null,
        showAll: 'Ver todas',
 
    //El cuerpo y estructura de la extención, NO. editar
        // Public methods
 
        context_dialog: function(urlContent, title, align) {
            if( title == null ) title = 'App';
            $._context_dialog._show(title, urlContent, align)
        },
 
        // Private methods
 
        _show: function(title, urlContent, align) {
 
            $._context_dialog._hide();
 
            $("#appButton").append(
                '<div id="appSide">' +
                    '<div id="appTitle">' + title + '</div>' +
                    '<div id="appContent">' +
                        '<iframe id="appFrame" src="' + urlContent + '" frameborder="0" framespacing="0" border="0"></iframe>' +
                    '</div>' +
                    '<div id="appOptins">' + $._context_dialog.showAll + '</div>' +
                '</div>'
            );
 
            var pos = $("#appButton").offset();
            switch(align){
                case "right":
                    $("#appSide").css({
                        top: pos.top,
                        left: pos.left + $("#appButton").innerWidth()
                    });
                break;
                case "left":
                    $("#appSide").css({
                        top: pos.top,
                        left: pos.left - $("#appSide").innerWidth() - 5
                    });
                break;
                default:
                    $("#appSide").css({
                        top: pos.top,
                        left: pos.left + $("#appButton").innerWidth()
                    });
                break;
            }
            $("#appButtonA").click( function(e) {
                $._context_dialog._hide();
                e.preventDefault();
                $("#appButtonA").click( function(e) {
                    $._context_dialog.context_dialog(urlContent, title, align)
                });
            });
        },
 
        _hide: function() {
            $("#appSide").remove();
        }
 
    },
 
    // Shortuct functions
 
    contextDialog = function(urlContent, title, align) {
        $._context_dialog.context_dialog(urlContent, title, align);
    }
 
})(jQuery);
 

y pueden ver el codigo en ejecucion aqui

el del primer codigo http://dannegm.com/senpaiUno
el del segundo codigo http://dannegm.com/senpaiDos

el boton que debe ejecutar es el que esta de gris obscuro titulado como notificaciones

[caricatos]

Tema movido desde javascript

[tredio]

estuve probando y si me abren los cuadros al presionar el boton, bueno los dos primeros nada mas no se si los demas no los has programado todavia.

[mayid]

A mi el dos me da este error en firebug:

function($) {

ASí que probablemente no estés cargando la librería jquery.

El uno me da esto:

syntax error
[Break on this error] function($) {\n
jquery...log2.js (línea 1)
$("#appButtonA").contextDialog is not a function
[Break on this error] $("#appButtonA").contextDialog("con...xample.html" , "Noticiones", "right");

[danneg]

Iniciado por tredio

estuve probando y si me abren los cuadros al presionar el boton, bueno los dos primeros nada mas no se si los demas no los has programado todavia.

jaja... bueno, puse dos enlaces, uno que funciona pero no es de mi agrado por la forma de utilizar y el otro que quisiera que se utilizara bien pero no sirve

el cuadro que puse color gris obscuro es que esta programado, el resto no, y el que se situa abajo funciona tal y como yo quiero, asi que ese por ahora ignorenlo (el msgDialog que muestra el chat de facebook)

por otra parte sobre

Código Javascript:

function($){
})(jQuery);
 

creo que si ya lo note, pero lo probe y aun asi me detiene el script, supongo que la forma corregida seria

Código Javascript:

(function($){
})(jQuery);
 

pero no me funciona, enseguida lo subire corregido para que noten los cambios

por otro lado me sale el mismo error que a ti (@mayid)

solo que lo probe con la consola de errores de webkit, y me muestra un error mas en lo que se supone que seria la implementacion

Uncaught TypeError: Object #<an Object> has no method 'contextDialog' senpaiUno: line 30

no se que es lo que falla, me gustaria saberlo

por lo pronoto ya correji lo primero

[danneg]

bueno, solucione una parte de mi problema, ya se muestra la capa a la hora de pulsar el boton, el problema ahora es que solo responde al primer elemtento que llama la funcion

tambien detecta un problema en el core de jquery donde menciona que "call" no es un metodo

lo que correji fue esto:

para implementarlo se usara

Código Javascript:

$(function() {
    $("#appButtonA").contextDialog("contextDialog/example.html", "Notificaciones", "right");
});
 

en lugar de

Código Javascript:

$("#appButtonB").contextDialog("contextDialog/example.html", "Mensajes", "right");
 

en la linia 45 del codigo borre un ";" despues de ")" de la declaracion del metodo click de $(this)

tambien cambie todos los this por $(this)

el codigo correjido es este

Código Javascript:

(function($) {
    $.fn.contextDialog = function(urlContent, title, align){
        return this.each(
            $(this).click(function(e){
                $.fn.contextDialog._hide();
                $(this).append(
                    '<div id="appSide">' +
                        '<div id="appTitle">' + title + '</div>' +
                        '<div id="appContent">' +
                            '<iframe id="appFrame" src="' + urlContent + '" frameborder="0" framespacing="0" border="0"></iframe>' +
                        '</div>' +
                        '<div id="appOptins">Ver mas</div>' +
                    '</div>'
                );
                var pos = $(this).offset();
                switch(align){
                    case "right":
                        $("#appSide").css({
                            top: pos.top,
                            left: pos.left + $(this).innerWidth()
                        });
                    break;
                    case "left":
                        $("#appSide").css({
                            top: pos.top,
                            left: pos.left - $("#appSide").innerWidth() - 5
                        });
                    break;
                    default:
                        $("#appSide").css({
                            top: pos.top,
                            left: pos.left + $(this).innerWidth()
                        });
                    break;
                }
                $(this).click( function(e) {
                    $.fn.contextDialog._hide();
                    e.preventDefault();
            //      $(this).click( function(e) {
            //          $.fn.contextDialog(urlContent, title, align);
            //          e.preventDefault();
            //      });
                    $(function() {
                        $(this).contextDialog(urlContent, title, align);
                    });
                });
                e.preventDefault();
            })
        );
    };
 
    $.fn.contextDialog._hide = function() {
            $("#appSide").remove();
    };
})(jQuery);
 

y podra ser visto en funcionamiento en http://dannegm.com/senpaiUno

toda la primera fila de botones tiene la funcion para que se ejecute, pero solo se ejecuta el primero boton y no se como soolucionarlo, sugerencias por favor!!

y gracias!!

[danneg]

Solucionado!!

antes de continuar gracias por su ayuda y los demas por leer este post

bueno, despues de tanto probar encontre la falla y ya esta solucionado

lo que hice fue quitar la funcion each(), que impedia ejecutar para cada elemento.

ahora el script funciona corecctamente, aun asi sigo aceptando sugerencias

para el que le interese aqui les dejo el codigo y un enlace de descarga

aviso: solo funciona con elementos que puedan tener foco (a, input, button, etc)

modo de uso:
en head

Código Javascript:

<link type="text/css" rel="stylesheet" href="contextDialog/contextDialog.css" />
        <script type="text/javascript" src="includes/jquery.min.js">
    </script>
    <script type="text/javascript" src="contextDialog/jquery.contextDialog.js">
    </script>
    <script type="text/javascript">
        $(function() {
            $("#appButton").contextDialog("contextDialog/example.html", "Notificaciones", "right");
        });
    </script>
 

el codigo:

Código Javascript:

(function($) {
    $.fn.contextDialog = function(urlContent, title, align){
            $(this).click(function(e){
                $("#appSide").remove();
                $("body").append(
                    '<div id="appSide"><div id="appPanel">' +
                        '<div id="appTitle">' + title + '</div>' +
                        '<div id="appContent">' +
                            '<iframe id="appFrame" src="' + urlContent + '" frameborder="0" framespacing="0" border="0"></iframe>' +
                        '</div>' +
                        '<div id="appOptins">Ver mas</div>' +
                    '</div></div>'
                );
                var pos = $(this).offset();
                switch(align){
                    case "right":
                        $("#appSide").css({
                            top: pos.top - 5,
                            left: pos.left + $(this).innerWidth()
                        });
                    break;
                    case "left":
                        $("#appSide").css({
                            top: pos.top,
                            left: pos.left - $("#appSide").innerWidth() - 5
                        });
                    break;
                    default:
                        $("#appSide").css({
                            top: pos.top - 5,
                            left: pos.left + $(this).innerWidth()
                        });
                    break;
                }
                $(this).focus();
                $(this).blur(function() {
                    $("#appSide").remove();
                });
            });
    };
})(jQuery);
 

y el enlace a la descarga http://dannegm.com/contextDialog.rar

y puede ser visto funcionando aqui http://dannegm.com/senpai

de nuevo gracias por su ayuda!!