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

Question

Posez votre question Signaler Répondre au sujet

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 1655 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 19 avril 2018 Dernière intervention

- 17 juil. 2014 à 11:10

Javascript / DHTML Posez votre question Signaler Répondre au sujet

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

8 réponses

Répondre au sujet

Signaler Commenter la réponse de jordane45

jordane45 20565 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 avril 2018 Dernière intervention - 15 juil. 2014 à 15:17

0

Utile

1

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 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>

Signaler Commenter la réponse de @karamel

@karamel 1655 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 19 avril 2018 Dernière intervention - Modifié par kazma le 15/07/2014 à 16:54

0

Utile

5

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 295 Messages postés vendredi 26 avril 2013Date d'inscription 15 juillet 2015 Dernière intervention - 15 juil. 2014 à 16:55

je vais tester

Signaler Commenter la réponse de EnguerrandP

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.

Signaler Commenter la réponse de @karamel

@karamel 1655 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 19 avril 2018 Dernière intervention - 16 juil. 2014 à 20:18

et le code il donne quoi

Signaler Commenter la réponse de EnguerrandP

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

Signaler Commenter la réponse de @karamel

@karamel 1655 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 19 avril 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

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

Vous n'êtes pas encore membre ? inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Vous n'êtes pas encore membre ?

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