Editar perfíl crea conflicto con portamento

Diseño y Posicionamiento Web con Joomla Foros General Mi web Joomla Editar perfíl crea conflicto con portamento

Mostrando 7 respuestas a los debates
  • Autor
    Entradas
    • #107768
      a1989Aridio
      Participante

      hola amigos que tal, vengo con un problema que no se si le ha pasado a algunos de ustedes, resulta que he puesto un plugin o script llamado portamento, aquí la web: portamento que hace que cualquier posición quede flotando al hacer scroll.

      El problema se presenta solo cuando trato de editar mi perfil que el plugin o script deja de funcionar correctamente. No tengo idea de que pueda ser.

      Algo que si noté, instalé el plugin JB library por lo del conflicto de mootools y jQuery, este plugin da opción de aplicar el jQuery.notconflict y otras cosas más. Localmente el portamento funciona de maravillas si activo una opción que dice “Use Script Loader”, pero solo localmente, al subir el proyecto al host esto no surge efecto y el portamento vuelve a dar problemas a la hora de editar el perfil de usuario.

      para estar seguro yo mismo modifiqué el archivo javascript del portamento para aplicarle el jQuery.notconflict y que funcione de manera correcta, local funciona todo, pero remoto no. ¿Alguna idea de qué podrá ser caballeros? o.O

      de antemano, gracias.

    • #107769
      Federico PiccoliFederico Piccoli
      Participante

      Ciao

      [quote=”a1989″ post=28512]… he puesto un plugin o script llamado portamento, que hace que cualquier posición quede flotando al hacer scroll. …[/quote]

      Si quieres que un div (con dentro una posición de módulos u otra cosa) quede fijada al browser, lo más fácil y natural és asignarle la propiedad position fixed.

    • #107780
      a1989Aridio
      Participante

      Eso ya lo sé, a excepción del valor fixed, el plugin al que me refiero hace un efecto el cual no se consigue con un simple valor css. Si te fijas atentamente el plugin hace que el div tome un comportamiento muy diferente, echale un vistazo, el inicio y el fin del desplazamiento lo puedo controlar a mi gusto, no como el valor fixed, pero muchas gracias por tu respuesta Federico!

    • #107782
      Federico PiccoliFederico Piccoli
      Participante

      Ciao

      Ya había visto el efecto y tambien léido que el plugin te da conflictos, como tercera solución yo crearía un div y dentro el objeto dependiente de un javascript que realizara el efecto rebote ése.

    • #107786
      a1989Aridio
      Participante

      órale! no entendí una sola frase de lo que dijiste xD

    • #107789
      Federico PiccoliFederico Piccoli
      Participante

      Ciao

      Ponme el php y el css del div donde actúa.

    • #107798
      a1989Aridio
      Participante

      ok, no lleva php, es puro javascript, es algo extensa la función.

      el javascript:
      [code type=javascript]
      /*!
      *
      * Portamento v1.1.1 – 2011-09-02
      * http://simianstudios.com/portamento
      *
      * Copyright 2011 Kris Noble except where noted.
      *
      * Dual-licensed under the GPLv3 and Apache 2.0 licenses:
      * http://www.gnu.org/licenses/gpl-3.0.html
      * http://www.apache.org/licenses/LICENSE-2.0
      *
      */
      /**
      *
      * Creates a sliding panel that respects the boundaries of
      * a given wrapper, and also has sensible behaviour if the
      * viewport is too small to display the whole panel.
      *
      * Full documentation at http://simianstudios.com/portamento
      *
      * —-
      *
      * Uses the viewportOffset plugin by Ben Alman aka Cowboy:
      * http://benalman.com/projects/j-misc-plugins/#viewportoffset
      *
      * Uses a portion of CFT by Juriy Zaytsev aka Kangax:
      * http://kangax.github.com/cft/#IS_POSITION_FIXED_SUPPORTED
      *
      * Uses code by Matthew Eernisse:
      * http://www.fleegix.org/articles/2006-05-30-getting-the-scrollbar-width-in-pixels
      *
      * Builds on work by Remy Sharp:
      * http://jfordesigners.com/fixed-floating-elements/
      *
      */
      var j = jQuery.noConflict();
      (function(){

      j.fn.portamento = function(options) {

      // we’ll use the window and document objects a lot, so
      // saving them as variables now saves a lot of function calls
      var thisWindow = j(window);
      var thisDocument = j(document);

      /**
      * NOTE by Kris – included here so as to avoid namespace clashes.
      *
      * j viewportOffset – v0.3 – 2/3/2010
      * http://benalman.com/projects/j-misc-plugins/
      *
      * Copyright (c) 2010 “Cowboy” Ben Alman
      * Dual licensed under the MIT and GPL licenses.
      * http://benalman.com/about/license/
      */
      j.fn.viewportOffset = function() {
      var win = j(window);
      var offset = j(this).offset();

      return {
      left: offset.left – win.scrollLeft(),
      top: offset.top – win.scrollTop()
      };
      };

      /**
      *
      * A test to see if position:fixed is supported.
      * Taken from CFT by Kangax – http://kangax.github.com/cft/#IS_POSITION_FIXED_SUPPORTED
      * Included here so as to avoid namespace clashes.
      *
      */
      function positionFixedSupported () {
      var container = document.body;
      if (document.createElement && container && container.appendChild && container.removeChild) {
      var el = document.createElement(“div”);
      if (!el.getBoundingClientRect) {
      return null;
      }
      el.innerHTML = “x”;
      el.style.cssText = “position:fixed;top:100px;”;
      container.appendChild(el);
      var originalHeight = container.style.height, originalScrollTop = container.scrollTop;
      container.style.height = “3000px”;
      container.scrollTop = 500;
      var elementTop = el.getBoundingClientRect().top;
      container.style.height = originalHeight;
      var isSupported = elementTop === 100;
      container.removeChild(el);
      container.scrollTop = originalScrollTop;
      return isSupported;
      }
      return null;
      }

      /**
      *
      * Get the scrollbar width by Matthew Eernisse.
      * http://www.fleegix.org/articles/2006-05-30-getting-the-scrollbar-width-in-pixels
      * Included here so as to avoid namespace clashes.
      *
      */
      function getScrollerWidth() {
      var scr = null;
      var inn = null;
      var wNoScroll = 0;
      var wScroll = 0;

      // Outer scrolling div
      scr = document.createElement(‘div’);
      scr.style.position = ‘absolute’;
      scr.style.top = ‘-1000px’;
      scr.style.left = ‘-1000px’;
      scr.style.width = ‘100px’;
      scr.style.height = ’50px’;
      // Start with no scrollbar
      scr.style.overflow = ‘hidden’;

      // Inner content div
      inn = document.createElement(‘div’);
      inn.style.width = ‘100%’;
      inn.style.height = ‘200px’;

      // Put the inner div in the scrolling div
      scr.appendChild(inn);
      // Append the scrolling div to the doc
      document.body.appendChild(scr);

      // Width of the inner div sans scrollbar
      wNoScroll = inn.offsetWidth;

      // Add the scrollbar
      scr.style.overflow = ‘auto’;
      // Width of the inner div width scrollbar
      wScroll = inn.offsetWidth;

      // Remove the scrolling div from the doc
      document.body.removeChild(document.body.lastChild);

      // Pixel width of the scroller
      return (wNoScroll – wScroll);
      }

      // —————————————————————————————————

      // get the definitive options
      var opts = j.extend({}, j.fn.portamento.defaults, options);

      // setup the vars accordingly
      var panel = this;
      var wrapper = opts.wrapper;
      var gap = opts.gap;
      var disableWorkaround = opts.disableWorkaround;
      var fullyCapableBrowser = positionFixedSupported();

      if(panel.length != 1) {
      // die gracefully if the user has tried to pass multiple elements
      // (multiple element support is on the TODO list!) or no elements…
      return this;
      }

      if(!fullyCapableBrowser && disableWorkaround) {
      // just stop here, as the dev doesn’t want to use the workaround
      return this;
      }

      // wrap the floating panel in a div, then set a sensible min-height and width
      panel.wrap(‘

      ‘);
      var float_container = j(‘#portamento_container’);
      float_container.css({
      ‘min-height’: panel.outerHeight(),
      ‘width’: panel.outerWidth()
      });

      // calculate the upper scrolling boundary
      var panelOffset = panel.offset().top;
      var panelMargin = parseFloat(panel.css(‘marginTop’).replace(/auto/, 0));
      var realPanelOffset = panelOffset – panelMargin;
      var topScrollBoundary = realPanelOffset – gap;

      // a couple of numbers to account for margins and padding on the relevant elements
      var wrapperPaddingFix = parseFloat(wrapper.css(‘paddingTop’).replace(/auto/, 0));
      var containerMarginFix = parseFloat(float_container.css(‘marginTop’).replace(/auto/, 0));

      // do some work to fix IE misreporting the document width
      var ieFix = 0;

      var isMSIE = /*@cc_on!@*/0;

      if (isMSIE) {
      ieFix = getScrollerWidth() + 4;
      }

      // —————————————————————————————————

      thisWindow.bind(“scroll.portamento”, function () {

      if(thisWindow.height() > panel.outerHeight() && thisWindow.width() >= (thisDocument.width() – ieFix)) { // don’t scroll if the window isn’t big enough

      var y = thisDocument.scrollTop(); // current scroll position of the document

      if (y >= (topScrollBoundary)) { // if we’re at or past the upper scrolling boundary
      if((panel.innerHeight() – wrapper.viewportOffset().top) – wrapperPaddingFix + gap >= wrapper.height()) { // if we’re at or past the bottom scrolling boundary
      if(panel.hasClass(‘fixed’) || thisWindow.height() >= panel.outerHeight()) { // check that there’s work to do
      panel.removeClass(‘fixed’);
      panel.css(‘top’, (wrapper.height() – panel.innerHeight()) + ‘px’);
      }
      } else { // if we’re somewhere in the middle
      panel.addClass(‘fixed’);

      if(fullyCapableBrowser) { // supports position:fixed
      panel.css(‘top’, gap + ‘px’); // to keep the gap
      } else {
      panel.clearQueue();
      panel.css(‘position’, ‘absolute’).animate({top: (0 – float_container.viewportOffset().top + gap)});
      }
      }
      } else {
      // if we’re above the top scroll boundary
      panel.removeClass(‘fixed’);
      panel.css(‘top’, ‘0’); // remove any added gap
      }
      } else {
      panel.removeClass(‘fixed’);
      }
      });

      // —————————————————————————————————

      thisWindow.bind(“resize.portamento”, function () {
      // stop users getting undesirable behaviour if they resize the window too small
      if(thisWindow.height() <= panel.outerHeight() || thisWindow.width() < thisDocument.width()) {
      if(panel.hasClass('fixed')) {
      panel.removeClass('fixed');
      panel.css('top', '0');
      }
      } else {
      thisWindow.trigger('scroll.portamento'); // trigger the scroll event to place the panel correctly
      }
      });

      // —————————————————————————————————

      thisWindow.bind("orientationchange.portamento", function () {
      // if device orientation changes, trigger the resize event
      thisWindow.trigger('resize.portamento');
      });

      // —————————————————————————————————

      // trigger the scroll event immediately so that the panel is positioned correctly if the page loads anywhere other than the top.
      thisWindow.trigger('scroll.portamento');

      // return this to maintain chainability
      return this;
      };

      // set some sensible defaults
      j.fn.portamento.defaults = {
      'wrapper' : j('body'), // the element that will act as the sliding panel's boundaries
      'gap' : 10, // the gap (in pixels) left between the top of the viewport and the top of the panel
      'disableWorkaround' : false // option to disable the workaround for not-quite capable browsers
      };

      })(j);
      [/code]

      El portamento trae un css para que se agregue al div, que es este:

      [code type=css]
      #wrapper {position:relative;}
      #menu {position:absolute; right:0; top:0;}
      #portamento_container {position:absolute; right:0; top:0;} /* take the absolute positioning of the menu */
      #portamento_container #menu {}
      #portamento_container #menu.fixed {position:fixed; right:auto; top:auto;} /* become fixed position, but reset the top and right values */
      [/code]

      Lo he modificado ligeramente para ajustarlo a mi web.

      El resto lo hace la funcion. Entra a la web y Mira con el firebug el div en cuestión que es el menú: Mundo Crece, observarás que el comportamiento del css varía dependiendo de si el scroll hace que el div tope el top o no, y aquí: Mundo Crece fallo el comportamiento del div donde aparece el fallo es diferente, no entiendo nada, pero no se comporta igual y la razón la desconozco completamente :/

    • #107799
      Federico PiccoliFederico Piccoli
      Participante

      [quote=”Federico Piccoli” post=28532]Ciao

      Ponme el php y el css del div donde actúa.[/quote]

Mostrando 7 respuestas a los debates
  • Debes estar registrado para responder a este debate.
Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Ver
Privacidad