Dimensionement automatique de la page en fonction de l'ecran [Résolu]

EnguerrandP 295 Messages postés vendredi 26 avril 2013Date d'inscription 15 juillet 2015 Dernière intervention - 15 juil. 2014 à 14:48 - Dernière réponse : @karamel 1661 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 23 août 2018 Dernière intervention
- 17 juil. 2014 à 11:10
Bonjour,

Je cherche a trouver ou crée une fonction qui au lancement de ma page il n'y est pas de scroll bar, pour que l'utilisateur est toute les information en visuel.

Es possible je trouve des réponse contradictoire sur le net et les code que je trouve ne fonctionne pas.

Connaissez vous des tuto ou plugin pour cela merci.

Codes trouver:
http://www.webdeveloper.com/forum/showthread.php?248705-Page-auto-zoom-script-to-fit-with-no-scrollbars
<script type="text/javascript">
var minW = 1200;

$(function () {
CheckSizeZoom()
$('#divWrap').css('visibility', 'visible');
});
$(window).resize(CheckSizeZoom)

function CheckSizeZoom() {
if ($(window).width() < minW) {
var zoomLev = $(window).width() / minW;

if (typeof (document.body.style.zoom) != "undefined") {
$(document.body).css('zoom', zoomLev);
}
else {
// Mozilla doesn't support zoom, use -moz-transform to scale and compensate for lost width
$('#divWrap').css('-moz-transform', "scale(" + zoomLev + ")");
$('#divWrap').width($(window).width() / zoomLev + 10);
$('#divWrap').css('position', 'relative');
$('#divWrap').css('left', (($(window).width() - minW - 16) / 2) + "px");
$('#divWrap').css('top', "-19px");
$('#divWrap').css('position', 'relative');
}
}
else {
$(document.body).css('zoom', '');
$('#divWrap').css('position', '');
$('#divWrap').css('left', "");
$('#divWrap').css('top', "");
$('#divWrap').css('-moz-transform', "");
$('#divWrap').width("");
}
}
</script> 
Afficher la suite 

Votre réponse

8 réponses

jordane45 22897 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 19 octobre 2018 Dernière intervention - 15 juil. 2014 à 15:17
0
Merci
Bonjour,

En quoi les codes que tu trouves ne fonctionnent t'ils pas ?

Celui ci utilises Jquery... tu l'as bien importé dans ton code ?

Merci de donner le plus de détails possible dans la rédaction de tes questions pour que l'on puisse essayer de t'aider.....


EnguerrandP 295 Messages postés vendredi 26 avril 2013Date d'inscription 15 juillet 2015 Dernière intervention - 15 juil. 2014 à 15:37
oui jquery est bien importer lorsque je lance l'interface avec le code pour le zoom j'ai un message d'erreur au niveau de la ligne 4
SyntaxError : missimg ) after argument list
$(function (){ ligne 4
zoom.js:
var minW = 1200;

$ (Function () {
CheckSizeZoom ()
. $ ('# DivWrap') css («visibilité», «visible»);
});
$ (Fenêtre). Redimensionner (CheckSizeZoom)

fonction CheckSizeZoom () {
if ($ (fenêtre). largeur () <minW) {
. var zoomLev = $ (fenêtre) largeur () / minW;

if (typeof (document.body.style.zoom)! = "undefined") {
. $ (Document.body) css ('zoom', zoomLev);
}
else {
/ / Mozilla ne supporte pas le zoom, utilisez-moz-transform à l'échelle et de compenser la largeur perdu
. $ ('# DivWrap') css ('-moz-transform' "échelle (" + zoomLev + ")");
. $ ('# DivWrap') largeur (. $ (Fenêtre) largeur () / zoomLev + 10);
. $ ('# DivWrap') css ('position', 'relatif');
. $ ('# DivWrap') css ('left', (($ (fenêtre) largeur () - minW - 16) / 2) + "px".);
. $ ('# DivWrap') css ('top', "-19px");
. $ ('# DivWrap') css ('position', 'relatif');
}
}
else {
. $ (Document.body) css ('zoom','');
. $ ('# DivWrap') css ('position','');
. $ ('# DivWrap') css ('left', "");
. $ ('# DivWrap') css ('top', "");
. $ ('# DivWrap') css ('-moz-transform', "");
. $ ('# DivWrap') largeur ("");
}
}



page html:
<?xml version="1.1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "[http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd]">
<html xmlns="[http://www.w3.org/1999/xhtml]" xml:lang="en" lang="en">
<head>
 <title>Tracking List Of Injector</title>
 <meta http-equiv="content-type" content="text/php; charset=ISO-8859-1"></meta>
 
 <!-- CSS -->
 <link rel="stylesheet" href="media/css/jquery-ui-1.10.4.custom.css"></link>
 
 <!-- general JavaScript -->
 <script type="text/javascript" src="media/js/jquery-1.11.0.js"></script>
 <script type="text/javascript" src="media/js/jquery-ui-1.10.4.custom.js"></script>
 <script type="text/javascript" src="media/js/jquery.msgbox.js"></script>
 <script type="text/javascript" src="media/js/zoom.js"></script>
 
 <script type="text/javascript">  
  $(function() 
  {
   $( '.datepicker' ).datepicker();
  });
 </script>
</head>
Commenter la réponse de jordane45
@karamel 1661 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 23 août 2018 Dernière intervention - Modifié par kazma le 15/07/2014 à 16:54
0
Merci
bonjour

et en mettant des valeurs css en % pour les conteneurs et en vw pour les polices (font)

cours Forest cours !
EnguerrandP 295 Messages postés vendredi 26 avril 2013Date d'inscription 15 juillet 2015 Dernière intervention - 15 juil. 2014 à 16:55
je vais tester
EnguerrandP 295 Messages postés vendredi 26 avril 2013Date d'inscription 15 juillet 2015 Dernière intervention - 16 juil. 2014 à 09:46
J'ai fais le test cela na pas marcher. Et en mettant % je ne suis pas sur que cela fera se que je veut même si cela avait fonctionner.
J'ai aussi vu que le code était faut car j'etait sur la traduction du site alors j'ai repris le code du site en anglais mais sa ne marche pas je n'ai plus de message d erreur mais ma page n'est pas au bon niveau de zoom.
@karamel 1661 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 23 août 2018 Dernière intervention - 16 juil. 2014 à 20:18
et le code il donne quoi
EnguerrandP 295 Messages postés vendredi 26 avril 2013Date d'inscription 15 juillet 2015 Dernière intervention - 17 juil. 2014 à 08:51
rien, sauf si j'augmente minW la sa décale ma page ver la gauche
@karamel 1661 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 23 août 2018 Dernière intervention - 17 juil. 2014 à 11:10
pour moi minW represente la taille de la page de base (tout est visible) si
minW pour mois c'est la taille écran qui a été utilisé pour créé la page
par exemple si tu a cree la page dans une resolution ecran de 1360*768 minW sra égale a 1360 mais il y a d'autre facteur qui peuvent empecher l'affichage correcte de la page le script me semble fonctionner uniquement pour une modification de la résolution qui est soit en 4/3 soit en 16/9 et si on redimensionne la page on ne respecte plus ces dimensions
Commenter la réponse de @karamel

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.