11544 sujets

JavaScript, DOM et API Web HTML5

Salut,


J'ai un bout de code que j'utilise tout le temps pour les sites "one page" que je réalise et il fonctionne très bien... sauf sur mon site. La transition entre les encres est bizarre, saccadé.

http://goo.gl/UJvHz

Je pense qu'il y a un conflit entre fichier/bout de code JS mais je n'arrive pas à trouver puisque mes compétences s'arrêtent au design et aux CSS.

Quelqu'un aurait la gentillesse de me dépanner s'il vous plait? Smiley smile
As-tu un exemple où ce code fonctionne correctement ?
Je vois que tu utilises JQUERY, est-ce un plugin ?
Salut gsm55,
Par exemple ici: http://goo.gl/dmiRa

Pour le bout de code qui permet de scroller doucement une ancre:

<script type="text/javascript" >
$(document).ready(function() {
  function filterPath(string) {
  return string
    .replace(/^\//,'')
    .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
    .replace(/\/$/,'');
  }
  var locationPath = filterPath(location.pathname);
  var scrollElem = scrollableElement('html', 'body');
 
  $('a[href*=#]').each(function() {
    var thisPath = filterPath(this.pathname) || locationPath;
    if (  locationPath == thisPath
    && (location.hostname == this.hostname || !this.hostname)
    && this.hash.replace(/#/,'') ) {
      var $target = $(this.hash), target = this.hash;
      if (target) {
        var targetOffset = $target.offset().top;
        $(this).click(function(event) {
          event.preventDefault();
          $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
            location.hash = target;
          });
        });
      }
    }
  });
 
  // use the first element that is "scrollable"
  function scrollableElement(els) {
    for (var i = 0, argLength = arguments.length; i <argLength; i++) {
      var el = arguments[i],
          $scrollElement = $(el);
      if ($scrollElement.scrollTop()> 0) {
        return el;
      } else {
        $scrollElement.scrollTop(1);
        var isScrollable = $scrollElement.scrollTop()> 0;
        $scrollElement.scrollTop(0);
        if (isScrollable) {
          return el;
        }
      }
    }
    return [];
  }
 
});
</script>

Je l'ai trouvé sur css-tricks.

Merci d'avance. Smiley smile [/i]
Il y a une erreur dans ton script :

$target.offset() is null
[Stopper sur une erreur]

var targetOffset = $target.offset().top;

(Source : Firebug)

Sinon sur IE ça marche nickel
gsm55 a écrit :
Il y a une erreur dans ton script :

$target.offset() is null
[Stopper sur une erreur]

var targetOffset = $target.offset().top;

(Source : Firebug)

Sinon sur IE ça marche nickel

Salut,
Merci d'avoir trouvé mais maintenant, que dois-je faire?

++ Smiley smile