Centre sur l'image ancrée après le saut?

Lorsque je saute sur une balise d'ancrage sur une page large (4000px), l'image ancrée est alignée horizontalement vers la droite. Comment puis-je l'aligner avec le centre? J'ai essayé plusieurs choses mais aucune ne semble fonctionner. Comme je suis nouveau ici, je n'ai pas le droit d'afficher le code, alors j'espère avoir été assez clair.Centre sur l'image ancrée après le saut?

Merci pour votre aide,

Robert C.

Source

2009-12-02 Robert C.

Que diriez-vous d'une URL? –

vous pouvez utiliser un service comme pastebin pour coller le code –

http://www.cslack.com/test.html –

La question se pose parce que le navigateur fera le moins de défilement nécessaire pour amener l'élément ancré dans la vue. Ainsi, si elle est désactivée à droite de la zone visible, lorsque vous cliquez sur l'étiquette d'ancrage, elle défile simplement assez loin vers la droite pour révéler l'élément entier.

Vous pouvez corriger ce comportement avec javascript si c'est une option. Vous ne serez pas en mesure de le centrer sur #anchor cliquez avec CSS droit.

Voici une "solution" utilisant jQuery. J'ai "solution" entre guillemets, car il peut introduire plus de problèmes que vous voulez. Par exemple, sans autre JS le bouton retour ne fonctionnera pas pour aller au lien précédent. Mais ceci centre l'article donné votre code d'échantillon.

ajouter ceci à la page ci-dessus avant la lié balise de fermeture <head>:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
    $("a[href^=#]").click(function(e){ 
     var id  = $(this).attr('href').substr(1), 
      $target = $('*[name=' + id + '] img'), 
      $window = $(window), 
      offset = $target.offset(); 

     var left = offset.left - ($window.width()/2) + ($target.width()/2); 
     var top = offset.top - ($window.height()/2) + ($target.height()/2); 


     $('html,body').scrollTop(top).scrollLeft(left); 

     e.preventDefault(); // Keep the browser from trying 
    }); 
}); 
</script>

Il trouvera tous a tags avec des liens internes (commence href avec #). Puis il trouve la cible qui a ce nom, et attrape la balise img enfant. Ensuite, il obtient les dimensions de l'élément img et l'élément window. Est-ce que certains éléments mathématiques avec les éléments img sont décalés et le font défiler au centre.

Source

2009-12-02 04:53:55

Merci pour la réponse rapide. La solution JS est-elle celle que je pourrais trouver en ligne? Je suis nouveau à ce sujet en écrivant le javascript pourrait être hors de mes capacités pour le moment. –

Hey @ Robert, je pense que je peux vous aider, mais 2 questions d'abord. Pouvez-vous poster un lien de ce que vous avez jusqu'ici? Et # 2 êtes-vous opposé à l'utilisation de jQuery (56k) sur la page? –

Doh ... n'a pas vu le lien ci-dessus, ok donc juste répondre à la question # 2 :) –

Centre sur l'image ancrée après le saut?

Répondre

Questions connexes