Forums Développement Multimédia

Aller au contenu

[résolu] Centrer une animation jquery isotope en css ou javascript ? ✔

CODE Ajax JQuery EaseJs

2 réponses à ce sujet

#1 Gilles_73

    Ceinture Jaune

  • Members
  • PipPip
  • 22 messages

Posté 22 August 2012 - 09:39 AM

Bonjour,
Je fais suite à un post du mois dernier sur une animation jquery isotope infinte scroll ou j'avais pu bénéficier de votre aide.


J’ai donc un container aligné à gauche avec une animation jquery isotope infinite scroll et au final, je souhaiterais centrer le container et donc mon animation jquery dans ma page.
Mais je ne sais pas si je dois modifier mon code css ou mon code javascript…..ou alors les deux ?

http://gillesn.perso...mash/index.html

J’ai bien tenté des essais en m’appuyant sur la page :
http://isotope.metaf...ed-masonry.html

ou encore en modifiant les margin en auto…..mais sans succès.

Je précise que je ne suis encore une « bête de course » en css et encore moins en javascript (plus de la bidouille en javascript).

Merci d'avance pour votre aide

#2 Badwolf

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 667 messages

Posté 22 August 2012 - 13:53 PM

salut normalement, tu dois préciser en px la largeur de ta zone.

.style{
width:400px;
margin-left:auto;
margin-right:auto
}

Haoooooooooooooooooooooooooooooooooooooooooooooou !!!

#3 Gilles_73

    Ceinture Jaune

  • Members
  • PipPip
  • 22 messages

Posté 23 August 2012 - 07:57 AM

Voir le messageBadwolf, le 22 August 2012 - 13:53 PM, dit :

salut normalement, tu dois préciser en px la largeur de ta zone.

.style{
width:400px;
margin-left:auto;
margin-right:auto
}

Merci pour ta réponse Badwolf ! Alors j'avais déjà tenté ta démarche mais en fait changer la valeur du width et passer les margin en auto n'influait pas sur le container car bloqué par le code javascript. Du coup j'ai bien décortiqué le code mansory pour une animation centrée et j'ai réussi ! Il suffisait d'ajouter un bout de code.

Merci tout de même et donc sujet résolu !


Pour info le code ajouté à mon script :


 $.Isotope.prototype._getCenteredMasonryColumns = function() {
    this.width = this.element.width();
   
    var parentWidth = this.element.parent().width();
   
                  // i.e. options.masonry && options.masonry.columnWidth
    var colW = this.options.masonry && this.options.masonry.columnWidth ||
                  // or use the size of the first item
                  this.$filteredAtoms.outerWidth(true) ||
                  // if there's no items, use size of container
                  parentWidth;
   
    var cols = Math.floor( parentWidth / colW );
    cols = Math.max( cols, 1 );

    // i.e. this.masonry.cols = ....
    this.masonry.cols = cols;
    // i.e. this.masonry.columnWidth = ...
    this.masonry.columnWidth = colW;
  };
 
  $.Isotope.prototype._masonryReset = function() {
    // layout-specific props
    this.masonry = {};
    // FIXME shouldn't have to call this again
    this._getCenteredMasonryColumns();
    var i = this.masonry.cols;
    this.masonry.colYs = [];
    while (i--) {
      this.masonry.colYs.push( 0 );
    }
  };

  $.Isotope.prototype._masonryResizeChanged = function() {
    var prevColCount = this.masonry.cols;
    // get updated colCount
    this._getCenteredMasonryColumns();
    return ( this.masonry.cols !== prevColCount );
  };
 
  $.Isotope.prototype._masonryGetContainerSize = function() {
    var unusedCols = 0,
        i = this.masonry.cols;
    // count unused columns
    while ( --i ) {
      if ( this.masonry.colYs[i] !== 0 ) {
        break;
      }
      unusedCols++;
    }
   
    return {
          height : Math.max.apply( Math, this.masonry.colYs ),
          // fit container to columns that have been used;
          width : (this.masonry.cols - unusedCols) * this.masonry.columnWidth
        };
  };




1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)