18008 sujets

Questions générales et questions de débutants

[Résolu] Redimensionner les images d'un dock

Voilà débutant en css, jquery je travaille sur un exemple pris sur le web d'un dock en bas de page.
Malgré des tentatives infructueuses je voulais savoir s'il était possible de redimensionner le background et les images en <li> lorsque la taille de la fenêtre est inférieure à 600px pour que tout reste affiché sur une seule ligne.
Voici le code :
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8" />	
	<title>Démo Dock type Mac OSx en jQuery</title>	
	<!-- HTML5 Shim -->
	<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->		
	<!-- jQuery  -->
	<script src="js/jquery-1.4.3.min.js"></script>
	<script src="js/jquery-ui-1.8.5.min.js"></script>
	<!-- Feuille de style -->
	<link rel="stylesheet" href="styleDockBar.css" />	
</head>
<body>
	<h1>Démo "Dock" type Mac OSx en jQuery</h1>	
<div id="dock">
<ul>
  <li><img class="imgDock" src="imgDock/home.png" /></li>
  <li><img class="imgDock" src="imgDock/download.png" /></li>
  <li><img class="imgDock" src="imgDock/news.png" /></li>
  <li><img class="imgDock" src="imgDock/facebook.png" /></li>
  <li><img class="imgDock" src="imgDock/twitter.png" /></li>
  <li><img class="imgDock" src="imgDock/flickr.png" /></li>
  <li><img class="imgDock" src="imgDock/rss.png" /></li>
  <li><img class="imgDock" src="imgDock/systeme.png" /></li>
</ul>
</div>
</body>
</html>

et le CSS
body {
  background:#f9f9f9;
  padding-bottom:160px;
}
#dock ul li a:hover {
  text-decoration:none;
}
h1 {
  margin-top:7%;
  text-align:center;
  width:100%;
  color:#333;
  font:bold 32px Arial;
}
/* Menu DEROULANT */
#dock {
	position:fixed;
	bottom:4px;
	left:50%;
	background:url('imgDock/dock.png') bottom no-repeat;
	width:600px;
	height:105px;
	margin:auto;
	margin-left:-300px;
	padding:0px;
	order:1px solid #3662a0;
	overflow:hidden;
	ox-shadow:3px 3px 9px #777;
	text-align:center;
}
#dock:hover {
    background:url('imgDock/dock2.png') bottom no-repeat;
}
#dock ul {
    margin:60px 0 0 0;
    padding:0;
}
#dock ul li {
      display:inline;
      margin:0 5px 0 5px;
}
#dock ul li img {
      width:40px;
      height:40px;      
}

#mask, #mask2 {
  cursor:pointer;
}

Modifié par birzebu (23 Nov 2014 - 15:53)
Donc super j'ai rajouté un lien dans le <head> du html
<link href="mediaqueries.css" rel="stylesheet" type="text/css">

Fais un nouveau css mediaqueries.css
@media screen and (max-width: 380px) {
/* Je n'ai pas trouvé mieux que de retailler le backgroung à 380px si quelqu'un à mieux */
#dock {
	position:fixed;
	bottom:5px;
	left:50%;
	background:url('imgDock/dock.380.png') bottom no-repeat;
	width:400px;
	height:100px;
etc....	
}	
#dock:hover {
    background:url('imgDock/dock2.380.png') bottom no-repeat;
}/* Idem */

#dock ul li img {
      width:20px;
      height:20px;      
}

}

Et ça marche !
Après j'ai le script d'animation mais c'est pas totalement responsive
la page étant chargé qu'une fois, lorsqu'on modifie la taille de la fenêtre après
être passé sur les icônes du dock elles gardent la taille initiale. J'ai pensé au
matchmedia après avoir lu l'excellent article sur ce site mais le problème reste :
J'ai mis dans le body du html
<script>
if (window.matchMedia("(max-width: 380px)").matches) {
/*animantion petites icônes*/
  $(document).ready(function(e) {
  $(".imgDock").hover(function() {
    $(this).animate({ width: "21px"  }, 20 );
    $(this).animate({ height: "21px"  }, 20 );
    $(this).css("margin-top", "-2px");   
  },function(){
    $(this).animate({ width: "21px"  }, 25 );
    $(this).animate({ height: "21px"  }, 25 );
    $(this).animate({ marginTop: "0px"  }, 25 );
  });

   $("#mask").toggle(function() {
    $("#dock").animate({ bottom: "-30px"  }, 200 );
    $("#mask2").replaceWith('<span id="mask2">Afficher</span></a>');  
  },function(){
    $("#dock").animate({ bottom: "4px"  }, 200 );
    $("#mask2").replaceWith('<span id="mask2">Masquer</span></a>');
  });
  
  
});
} else {
  $(document).ready(function(e) {
/*animantion grandes icônes*/
  $(".imgDock").hover(function() {
    $(this).animate({ width: "45px"  }, 40 );
    $(this).animate({ height: "45px"  }, 40 );
    $(this).css("margin-top", "-2px");   
  },function(){
    $(this).animate({ width: "45px"  }, 65 );
    $(this).animate({ height: "45px"  }, 65 );
    $(this).animate({ marginTop: "0px"  }, 65 );
  });
  /*la même chose qu'au dessus*/
});
}
</script>

Je ne vois pas régler totalement le problème sans réactualiser la page ...
Sujet clos
Aller à