Dimensionement automatique de la page en fonction de l'ecran

Résolu

EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 - 15 juil. 2014 à 14:48
@karamel Messages postés 1830 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 2 juin 2023 - 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>

A voir également:

Dimensionement automatique de la page en fonction de l'ecran
Exemple de page d'authentification - Conseils pratiques -PHP
Exemple de code html page d'accueil ✓ - Forum Graphisme/design
Sauvegarde automatique en ligne - Forum C# / .NET
Page de connexion php - Forum PHP
Fond d'écran simple - Forum Visual Basic

2 réponses

Réponse 1 / 2

jordane45 Messages postés 37521 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 3 juin 2023 341
15 juil. 2014 à 15:17

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 Statut Membre Dernière intervention 15 juillet 2015 1
Modifié par EnguerrandP le 15/07/2014 à 15:48

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>

Réponse 2 / 2

@karamel Messages postés 1830 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 2 juin 2023 146
Modifié par kazma le 15/07/2014 à 16:54

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 Statut Membre Dernière intervention 15 juillet 2015 1
15 juil. 2014 à 16:55

je vais tester

EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
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 Messages postés 1830 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 2 juin 2023 146
16 juil. 2014 à 20:18

et le code il donne quoi

EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
Modifié par EnguerrandP le 17/07/2014 à 08:52

rien, sauf si j'augmente minW la sa décale ma page ver la gauche

@karamel Messages postés 1830 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 2 juin 2023 146
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

Votre réponse