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

Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Dernière intervention
15 juillet 2015
- - Dernière réponse : @karamel
Messages postés
1663
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
3 novembre 2018
- 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

2 réponses

Messages postés
23569
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
10 décembre 2018
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
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Dernière intervention
15 juillet 2015
-
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
Messages postés
1663
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
3 novembre 2018
0
Merci
bonjour

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

cours Forest cours !
EnguerrandP
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Dernière intervention
15 juillet 2015
-
je vais tester
EnguerrandP
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Dernière intervention
15 juillet 2015
-
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
Messages postés
1663
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
3 novembre 2018
-
et le code il donne quoi
EnguerrandP
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Dernière intervention
15 juillet 2015
-
rien, sauf si j'augmente minW la sa décale ma page ver la gauche
@karamel
Messages postés
1663
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
3 novembre 2018
-
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.