Posez votre question Signaler

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
1666
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 janvier 2019
 - 17 juil. 2014 à 11:10
Javascript / DHTML Posez votre question Signaler
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

Répondre au sujet

2 réponses

Signaler Commenter la réponse de jordane45
Messages postés
24571
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 février 2019
 362
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.....


Signaler Commenter la réponse de EnguerrandP
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
Signaler Commenter la réponse de @karamel
Messages postés
1666
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 janvier 2019
 33
0
Merci
bonjour

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

cours Forest cours !
Signaler Commenter la réponse de EnguerrandP
EnguerrandP
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Dernière intervention
15 juillet 2015
 -
je vais tester
Signaler Commenter la réponse de EnguerrandP
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.
Signaler Commenter la réponse de @karamel
@karamel
Messages postés
1666
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 janvier 2019
 33 -
et le code il donne quoi
Signaler Commenter la réponse de EnguerrandP
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
Signaler Commenter la réponse de @karamel
@karamel
Messages postés
1666
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 janvier 2019
 33 -
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

Votre réponse

Répondre au sujet
Posez votre question
S'inscrire maintenant

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.