Modification css-propriétés en utilisant jQuery

Question

J'essaie d'utiliser ajuster les propriétés CSS utilisant jQuery:

• le menu_div doit être la même largeur que l'écran:

  $("#menu").css({width: (theWidth - 10)}); 
  

• le gallery_img devrait être sur le côté gauche de cette div, la contact_img devrait être sur le côté droit:

  $("#gallery_img").css({left: 0 + 'px'}); 
  $("#contact_img").css({right: 0 + 'px'); 
  

Le menu-div et les images ont toutes les deux une position: absolue. Qu'est-ce que je fais mal? Toutes les images sont affichées les unes sur les autres.

Answer 1

Vous avez une erreur de syntaxe dans votre code:

$("#contact_img").css({right: 0 + 'px'); 
//         ^missing closing brace } 

En outre, votre affectation de largeur CSS pour l'élément #menu n'est pas suivi « px », qui annule la règle et peut faire échouer dans certains navigateurs:

// Incorrect 
$("#menu").css({width: (theWidth - 10)}); 

// Corrent 
$("#menu").css({width: (theWidth - 10) + "px" }); 

Notez que, si vous prévoyez d'utiliser un littéral numérique, vous pouvez tout aussi bien utiliser une chaîne sur son propre et éviter la concaténation. Vous pouvez également transmettre la propriété CSS et la valeur en tant qu'arguments distincts:

$("#contact_img").css({right: '0px'}); 
$("#contact_img").css('right', '0px'); 

Answer 2

La position absolue fera cela. votre gauche pour le gallery_img devrait être 0px ... puis l'attribut left de votre contact img devrait être à gauche pour la largeur du menu #menu + # en px.

Si vous ne spécifiez pas l'attribut de gauche avec une position absolue, vous finirez par tout empiler.

Answer 3

Vous avez des accolades manquantes, peut-être un moyen plus simple de le faire serait:

$(document).ready(function() { 
     var theWidth = $(window).width(); 
     $("#menu").css('width', theWidth - 10); 
     $("#gallery_img").css('left', 0); 
     $("#contact_img").css('right', 0); 
    })