IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AJAX Discussion :

Modification de la taille de la police dans une div


Sujet :

AJAX

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Février 2016
    Messages
    22
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Février 2016
    Messages : 22
    Par défaut Modification de la taille de la police dans une div
    Hello!

    Alors voila je souhaiterais modifier la taille d'un texte dans un div en AJAX. J'ai déjà résolu mon problème a moitié, mais là, je crois que je vais devenir fou -_-:
    Au début j'y arrivais pas, donc j'ai chercher sur internet et trouvé une démo que j'ai pris, analyser et modifier un peu (id des elements pour que ça marche.
    Une fois que c’était ok, j'ai copier/coller mon bidouillage dans mon vrai fichier, et ça marche pas, alors que tout est exactement pareil!!
    pls help xD
    Voici le code

    DEMO (éléments utiles en gras):
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    <html>
    <head>
    <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
    <style type="text/css">
    .caption {
    top:470px;
    background-color:black;
    text-align:center;
    font-size:28px;
    font-family:'Trebuchet MS',sans-serif;
    color:white;
    position:absolute;
    width:700px;
    height:70px;
    margin-bottom:0px;
    }
    .button {
    background-color: crimson;
    background-image: -webkit-linear-gradient(top, crimson, crimson);
    background-image: -moz-linear-gradient(top,crimson,crimson);
    display: inline-block;
    font-size: 24px;
    font-family: 'Meiryo UI';
    color: #fff;
    text-decoration: none !important;
    padding: 5px 20px;
    line-height: inherit;
    overflow: hidden;
    position: relative;
    border-radius: 2px;
    margin-top: 13px;
    margin-bottom: 10px;
    }
    	.button:hover {
    		opacity: 0.9;
    	}
    	#content{
    	font-family: 'Lato', sans-serif;
    	text-align:justify;
    	padding:10px;
    	background-color:whitesmoke;
    	font-size:14px;
    	}
    	#incfont{
    	background-color: orange;
        background-image: -webkit-linear-gradient(top, orange, orange);
        background-image: -moz-linear-gradient(top,orange,orange);
    	color:black;
    	}
    	#decfont{
    	background-color: orange;
        background-image: -webkit-linear-gradient(top, orange, orange);
        background-image: -moz-linear-gradient(top,orange,orange);
    	color:black;
    	}
    	#fontlinks{
    	margin-left:30%;
    	margin-right:30%;
    	margin-top:0px;
    	margin-bottom:20px;
    	text-align:center;
    	}
    	.buttonfont{
    	color:dimgrey;
    	}
    	
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $('#taille').change(function(){
                var newSize= document.getElementById('taille').value;
                $('#prevCom').css('font-size', newSize);
            });
        });
    </script>
    </head>
    <body>
    	<div style="width:55%;margin-left:17%;margin-right:28%;">
    		<h2 style="font-family:'Trebuchet MS', Helvetica, sans-serif;color:crimson;text-align:center;width:700px;">Increase and Decrease Font Size using jQuery</h2>
    		<p style="font-family:'Trebuchet MS', Helvetica, sans-serif;text-align:center;width:700px;">Demo by <a href="https://www.google.com/+Programming-free" style="color:crimson">Priyadarshini</a></p>
    		<div style="background-color:gray;width:700px;height:400px;">
    		<div id="prevCom" style="height:260px">
    		ProgrammingFree is a technical blog with quality articles on various programming languages with appropriate source code,screenshots and live demos.This blog contains information on several programming topics with appropriate screenshots and code. I never write a blog here on any topic, without actually implementing it myself to make sure that I am not misleading the readers of my blog. I am a beginner in writing though not in programming, so I really value your suggestions on my writing skills. Please remember this - the best place to get help for the issues you have in your own implementation is at technical forums and not on blogs. I welcome comments about technical inaccuracies you may spot, or typos - or indeed improvements you might want to offer to the code I have presented, or any other aspect of this site.		
    		</div>
    		<br/>
    		<div id="fontlinks">
    		<a href="#" id="incfont" class="button buttonfont">A+</a>
    		<a href="#" id="decfont" class="button buttonfont">A-</a>
                    <br>
                    <input type="number" id="taille" value="20">
    		</div>
    		<span class="caption"><a href="javascript:parent.window.location.href='http://www.programming-free.com/2013/12/increase-decrease-font-size-jquery.html'" class="button">Tutorial</a></span>
    	</div>
    </body>
    </html>

    MON code:
    html:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div>
            <input type="number" id="taille" value="20"/>
    </div>
    <div id="blocImg" class="blocImg" onload="chargerImg()">
            <div id="prevCom">
                <?php
                     echo $listeModele[0]->texte; //texte qui doit changer de taille
                ?>
            </div>
    </div>
    AJAX
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    $(function() {
        $('#taille').change(function(){
            var newSize= document.getElementById('taille').value; //grace a clic droit->inspecter je sais que newSize est bien egale a la valeur de l'input taille
            $('#prevCom').css('font-size', newSize);
        })
    });

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    2 solutions :

    Code jQuery : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
            var newSize = $('#taille').val(); // chaine, par défaut
            $('#prevCom').css('font-size', newSize + 'px');

    Code jQuery : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
            var newSize = parseInt( $('#taille').val() ); // ENTIER
            $('#prevCom').css('font-size', newSize);

    Au fait : c'est du jQuery.
    Pas de l'Ajax.


    N.B. $('#taille').val() est, en jQuery, l'équivalent de document.getElementById('taille').value en JavaScript.
    De même, $('#prevCom').css('font-size', newSize + 'px'); équivaut à document.getElementById('prevCom').style.fontSize = newSize+'px'; !

    A tester donc :
    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
            var newSize = document.getElementById('taille').value;
            document.getElementById('prevCom').style.fontSize = newSize+'px';
    Dernière modification par Invité ; 28/11/2016 à 11h03.

Discussions similaires

  1. Changer la taille de la police dans une liste déroulante par VBA
    Par BDA53 dans le forum Macros et VBA Excel
    Réponses: 2
    Dernier message: 03/02/2016, 14h37
  2. Réponses: 2
    Dernier message: 24/10/2012, 23h04
  3. Comment modifier la taille de la police dans Word ?
    Par djoao dans le forum API, COM et SDKs
    Réponses: 7
    Dernier message: 11/12/2004, 12h49
  4. [C#] Aggrandir la taille de la police dans un DataGrid
    Par fabrice1596 dans le forum Windows Forms
    Réponses: 3
    Dernier message: 08/12/2004, 11h14
  5. Ajustement automatique de la taille de la police dans un TLabel
    Par Poisson Rouge dans le forum Composants VCL
    Réponses: 3
    Dernier message: 05/09/2003, 15h13

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo