Conflito entre popup(Popbox.js) e o Prototype.js

[uiLhian 1]

bom eu to tentando colocar essa tooltip no site:

<script type='text/javascript' charset='utf-8' src='Deslizante/popbox.js'></script>
    
    <style type='text/css' media='screen'>
     label { display: block; }
    .box { width:350px; }
  </style>
  <script type='text/javascript' charset='utf-8'>
    (function( $ ){
    $(document).ready(function( $ ){
      $('.popbox').popbox();
    });
    })(jQuery);
    

  </script>

popbox.js

(function(){

  $.fn.popbox = function(options){
    var settings = $.extend({
      selector      : this.selector,
      open          : '.open',
      box           : '.box',
      arrow         : '.arrow',
      arrow_border  : '.arrow-border',
      close         : '.close'
    }, options);

    var methods = {
      open: function(event){
        event.preventDefault();

        var pop = $(this);
        var box = $(this).parent().find(settings['box']);

        box.find(settings['arrow']).css({'left': box.width()/2 - 10});
        box.find(settings['arrow_border']).css({'left': box.width()/2 - 10});

        if(box.css('display') == 'block'){
          methods.close();
        } else {
          box.css({'display': 'block', 'top': 10, 'left': ((pop.parent().width()/2) -box.width()/2 )});
        }
      },

      close: function(){
        $(settings['box']).fadeOut("fast");
      }
    };

    $(document).bind('keyup', function(event){
      if(event.keyCode == 27){
        methods.close();
      }
    });

    $(document).bind('click', function(event){
      if(!$(event.target).closest(settings['selector']).length){
        methods.close();
      }
    });

    return this.each(function(){
      $(this).css({'width': $(settings['box']).width()}); // Width needs to be set otherwise popbox will not move when window resized.
      $(settings['open'], this).bind('click', methods.open);
      $(settings['open'], this).parent().find(settings['close']).bind('click', methods.close);
    });
  }

}).call(this);

<div class='collapse'>
      <div class='box'>
        <div class='arrow'></div>
        <div class='arrow-border'></div>
TESTE TESTE TESTE

      </div>
    </div>
  </div>

 

mas ela está dando conflito com o seguinte .JS prototype.js que é usado no lightbox.
quando eu tiro essa linha o script acima funciona.

caso alguém posso me ajudar,
obrigado desde já.

[William Bruno 1501]

Dá uma lida aqui:

http://wbruno.com.br/2011/03/31/como-debugar-javascript-firefox-erros-comuns/

[uiLhian 1]

bom eu debuguei no chrome e deu os seguintes erros:

jQuery(function() {
var moveLeft = -310;
var moveDown = -50;


jQuery('a#DESCRICAO').hover(function(e) {
jQuery('div#POPUP').show();
//.css('top', e.pageY + moveDown)
//.css('left', e.pageX + moveLeft)
//.appendTo('body');
}, function() { jQuery('div#POPUP').hide(); });


jQuery('a#DESCRICAO').mousemove(function(e) {
jQuery("div#POPUP").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
});
})(jQuery); <-- (indicou nessa linha)

--> ERRO: Uncaught TypeError: object is not a function jPopup.js:17

 

(function(){ $.fn.popbox = function(options){
var settings = $.extend({

ERRO: Uncaught TypeError: Object function $(element) { if (arguments.length > 1) { for (var i = 0, elements = [], length = arguments.length; i < length; i++) elements.push($(arguments[i])); return elements; } if (Object.isString(element)) element = document.getElementById(element); return Element.extend(element); } has no method 'extend'

selector : this.selector,open : '.open', box : '.box', arrow : '.arrow', arrow_border : '.arrow-border', close : '.close' }, options); var methods = { open: function(event){ event.preventDefault(); var pop = $(this); var box = $(this).parent().find(settings['box']); box.find(settings['arrow']).css({'left': box.width()/2 - 10}); box.find(settings['arrow_border']).css({'left': box.width()/2 - 10}); if(box.css('display') == 'block'){ methods.close(); } else { box.css({'display': 'block', 'top': 10, 'left': ((pop.parent().width()/2) -box.width()/2 )}); } }, close: function(){ $(settings['box']).fadeOut("fast"); } }; $(document).bind('keyup', function(event){ if(event.keyCode == 27){ methods.close(); } }); $(document).bind('click', function(event){ if(!$(event.target).closest(settings['selector']).length){ methods.close(); } }); return this.each(function(){ $(this).css({'width': $(settings['box']).width()}); // Width needs to be set otherwise popbox will not move when window resized. $(settings['open'], this).bind('click', methods.open); $(settings['open'], this).parent().find(settings['close']).bind('click', methods.close); }); } }).call(this);

 

 

[uiLhian 1]

o que fazer pra resolver esses erros ? ;(

[William Bruno 1501]

troca:

 

jQuery(function() { 

por:

 

 

jQuery(document).ready(function(){

 

e o fechamento, deixa apenas:

 

 

});

[uiLhian 1]

o primeiro erro ta resolvido só foi tirar o (jQuery); do final no fechamento ja sumiu o erro.

agora o segundo erro permanece que é equivalente ao código:

 

(function(){


  $.fn.popbox = function(options){
    var settings = $.extend({
      selector      : this.selector,
      open          : '.open',
      box           : '.box',
      arrow         : '.arrow',
      arrow_border  : '.arrow-border',
      close         : '.close'
    }, options);


    var methods = {
      open: function(event){
        event.preventDefault();


        var pop = $(this);
        var box = $(this).parent().find(settings['box']);


        box.find(settings['arrow']).css({'left': box.width()/2 - 10});
        box.find(settings['arrow_border']).css({'left': box.width()/2 - 10});


        if(box.css('display') == 'block'){
          methods.close();
        } else {
          box.css({'display': 'block', 'top': 10, 'left': ((pop.parent().width()/2) -box.width()/2 )});
        }
      },


      close: function(){
        $(settings['box']).fadeOut("fast");
      }
    };


    $(document).bind('keyup', function(event){
      if(event.keyCode == 27){
        methods.close();
      }
    });


    $(document).bind('click', function(event){
      if(!$(event.target).closest(settings['selector']).length){
        methods.close();
      }
    });


    return this.each(function(){
      $(this).css({'width': $(settings['box']).width()}); // Width needs to be set otherwise popbox will not move when window resized.
      $(settings['open'], this).bind('click', methods.open);
      $(settings['open'], this).parent().find(settings['close']).bind('click', methods.close);
    });
  }


}).call(this);

o erro que da é esse:

 

1. Uncaught TypeError: Object function $(element) { if (arguments.length > 1) { for (var i = 0, elements = [], length = arguments.length; i < length; i++) elements.push($(arguments)); return elements; } if (Object.isString(element)) element = document.getElementById(element); return Element.extend(element); } has no method 'extend'

    

 

[William Bruno 1501]

aqui:

}).call(this);

troca por:

})(jQuery);

e ai lá em cima:

(function( $ ){

[uiLhian 1]

com todo respeito, mas ae: se é ZICA mesmo em... ;)

valeu demais pela ajuda.

 

muito obrigado!

 

resolvido! :thumbsup: