Forum : Problème jquery

Réponse acceptée

Tu mélanges tous les sujets dans ton post :) Déjà comme j'ai répondu à ta question plus haut sur le test de l'inclusion de Jquery, tu peux valider ma réponse :D

Pour le reste est du domaine de l'HTML/CSS, rien à voir avec Jquery, sauf si tu as un script JS présent qui définit la taille et la couleur de tes éléments inputs au clic. Dans ce cas, s'il ne fonctionne pas, inclue ton script JS de la même manière que je l'ai fait dans mon exemple plus haut, en attendant que jquery soit bien chargé.

PS: le html de ton formulaire permettrait de voir si ton CSS fait bien ce que tu veux sur ces éléments inputs (ont-ils un id ou une classe particulière que l'on retrouve dans ton CSS ? ...)

sand

Bonsoir,

Possible d'avoir un lien ou de voir ton code ?

Nagraria

Auteur

Bonjour , désolé je ne suis pas chez moi donc je n'ai pas accès au code avant un petit moment .

FactureHero.com

Tu ne donne pas assez de détails @Nagraria.

Ton site est-il sur un framework ou un CMS ou une page en dur ?
Comment charges-tu jQuery ? En local ou via un CDN ?
Quelle version de jQuery Charges-tu ?
Où le charges-tu dans ta page ? dans le Head ou à la fin ?

Autant de détails qui nous permettent de te répondre précisémment.

D'emblée comme ça, j'ai envie de dire que si tu le charges en local, c'est que le chemin n'est pas bon, essaye de le charger via un CDN et teste :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Nagraria

Auteur

Oui pardon , je n'ai pas été très précis , je fais mon site en local , je charge la version 1.11.3, j'ai essayé en local et via un CDN , mais je n'est pas essayé avec la version 2.1.3 .J'ai essayé de le charger dans le head et en fin de page mais le résultat était le même . Je test le code dès que je peux , merci pour vos réponses !

Ps : Je n'utilise ni CMS ni framework .

sand

Un aperçu des quelques lignes de code que tu utilises nous aideraient à t'aider plus facilement. Peux-tu faire un copier-coller ?

Nagraria

Auteur

Non désolé je rentre chez moi dans deux semaines , peut être que nous pourrons en reparler à ce moment là ?

Underscreen

Bonjour,
je pense que boostyweb.fr est dans le vrai tu dois tenter de charger jquery en local mais si ton url ressemble à ça

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

et que tu n'es pas sous wamp, il ne chargera pas la bibliothèque.
il faut que ton url ressemble bien à

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

bon courage

FactureHero.com

Oui je n'avais pas pensé à ça Underscreen. Je pense que d'ici 2 semaines tu aura régler ton problème Nagraria :) Sinon n'hésites pas à revenir avec un peu plus de précisions ;) @+

Nagraria

Auteur

Ok merci , je suis sous wamp mais j'essayerais !

Underscreen

normalement sous wamp ça ne devrait pas posé de problème.
Il faut regarder du coté de l'inspecteur d'élément voir ce qu'il te dit !

Nagraria

Auteur

Rebonjour , j'ai tésté avec le lien que vous m'avez donné ,mais toujours rien .J'ai essayé de placer le js dans le head et dans le body mais le résultat est le même ... voilà le code de ma page :

    $pages = scandir('pages/');

    if(isset($_GET['page']) && !empty($_GET['page']) && in_array($_GET['page'].'.php', $pages)){
        $page = $_GET['page'];
    }else{
        $page = 'home';

    }
    $pages_functions = scandir('functions/');

    if(in_array($page.'.func.php', $pages_functions)){
        include 'functions/'.$page.'.func.php';
    }

?>

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Application web de tchat</title>
        <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/style.css"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    </head>
    <body>
        <?php
            include 'body/topbar.php';
        ?>

        <div class="container">
            <?php
                include 'pages/'.$page.'.php';
            ?>
        </div>

        <?php
        $pages_js = scandir('js/');
        if(in_array($page.'.func.js',$pages_js)){
            ?>
                <script src="js/<?= $page ?>.func.js"></script>
            <?php
        }

        ?>

    </body>
</html>

Merci de votre aide !

betaWeb

Salut,

Comment testes-tu si jQuery a bien été inclus ?

FactureHero.com

2 questions :

Est-ce normal que tu n'aies pas de balises d'ouverture PHP au début (ça n'a sûrement rien à voir avec ton problème mais je demande :))
La même question que bataWeb, comment tu testes l'inclusion de jQuery ou non ?

tu peux tester en incluant un script Jquery basique, par exemple qui change la couleur du background du body.
Pour cela ajoute ceci après ton chargement de jquery:

<script>
//quand jQuery est chargé
 jQuery(document).ready(function(){ 
$('body').css('background', 'red'); 
});
</script>

il y a sûrement une autre façon plus clean de le tester, mais si ton background devient rouge... jQuery fonctionne :)

Nagraria

Auteur

Bonjour !
Pour les balises php j'ai juste mal copié colé mais elles sont présentes dans mon code .
Sinon j'ai tésté ta méthode boostyweb, et le background devient rouge ! Ca veut donc dire que le jquery fonctionne , mais pourtant lorsque j'inclue a la page ce css :
*{
box-sizing:border-box;
}

@font-face {
font-family: 'app';
src: url('font/app.eot?23297456');
src: url('font/app.eot?23297456#iefix') format('embedded-opentype'),
url('font/app.woff?23297456') format('woff'),
url('font/app.ttf?23297456') format('truetype'),
url('font/app.svg?23297456#app') format('svg');
font-weight: normal;
font-style: normal;
}

[class^="i-"]:before, [class*=" i-"]:before {
font-family: "app";
font-style: normal;
font-weight: normal;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;font-variant: normal;
text-transform: none;line-height: 1em;
margin-left: .2em;
font-size: 125%;
}

.i-user:before { content: '\e801'; } / '' /
.i-send:before { content: '\e802'; } / '' /

body{
font-family: Roboto;
margin: 0;
padding: 0;
}

.container{
width:100%;
position:relative;
top:60px;
padding: 5px 2%;
}

.topbar{
background-color: #34495e;
height:60px;
width:100%;
line-height: 60px;
padding:0 2%;
position:fixed;
top:0px;
color: #FFF;
}

.topbar .app-name{
color:inherit;
text-decoration:none;
font-size:21px;
font-weight:500;
}

.topbar .menu{
position:absolute;
right:10px;
}

.topbar .menu a{
color:inherit;
text-decoration:none;
float:left;
padding:0 15px;
}

.topbar .menu a:hover{
background-color: #2c3e50;
}

.topbar .menu a.active{
background-color: #2c3e50;
}

.field{
position: relative;
height: 72px;
padding: 16px 0 8px 0;
}

.field-label{
position: relative;
margin: 0;
display: block;

color:  #bfbfbf;
line-height: 16px;
font-size: 16px;
font-weight: 400;

transform: translateY(24px);
transition: transform 0.3s, color 0.3s;
transform-origin: 0 50%;

}

.field-input{
position: relative;
display: block;
width: 100%;
height: 32px;
padding: 8px 0;

line-height: 16px;
font-family: Roboto;
font-size: 16px;

background: transparent;
border: none;
-webkit-appearance: none;
outline: none;

}

.field-area{
heaight:auto;
padding-top:5px;
width:90%;
}

.field::after, .field::before{
content:'';
height: 2px;
width: 100%;
position: absolute;
bottom: 6px;
left: 0;

background-color: #e6e6e6;

}

.field::after{
background-color: #2195F2;
transform: scaleX(0);
transition: transform 0.3s;
}

.has-label .field-label{
transform: translateY(0) scale(0.75);
}

.is-focused .field-label{
color: #2195F2;
}
.field.is-focused::after{
transform: scaleX(1);
}

.field.error .field-label{
color: #e74c3c;
}

.field.error::after{
background-color: #e74c3c;
}

button{
background-color:#34495e;
border:2px solid #34495e;
display:block;
width:100%;
height:36px;
color:#fff;
border-radius:2px;
cursor:pointer;
font-size:16px;
margin:5px 0;
outline:none;
}

button:hover{
background:none;
color:#34495e;
}

.header{
display: block;
border-bottom: 2px solid #000;
}

.header.header-form{
margin-bottom:-8px;
}

p.error{
color: #e74c3c;
}

.membre{
display:block;
background-color:#ccc;
padding:10px 10px;
margin-bottom:10px;
box-shadow:1px 2px 5px 1px rgba(0, 0, 0, 0.4);
position:relative;
border-radius:2px;
}

.membre .select{
position:absolute;
right: 10px;
top: 9px;
background-color:#3498db;
color:#fff;
display:block;
width:40px;
height:40px;
border-radius:50%;
text-align:center;
line-height:40px;
}

.membre .select:hover{
background-color:#2980b9;
}

.bottom{
position:fixed;
background-color:#fff;
bottom:0px;
width:96%;
}

.bottom .send{
background-color:#34495E;
color:#fff;
position:absolute;
right:0px;
top:25px;
width:38px;
border-radius:50%;
padding:0;
font-size:12px;
outline:none;
}

.bottom .send:hover{
background-color: #2C3E50;

}

.maessages-box{
position:relative;
background-color:#fff;
margin-bottom:95px;
}

.messages-box .message{
padding: 3px 8px;
margin:3px 0;
border-radius:12px;
max-width:75%;
display:inline-block;
min-height:25px;
}

.messages-box .message.message-membre{
background-color:#3498db;
float:right;
}

.messages-box .message.message-user{
background-color:#bdc3c7;
}

rien ne se passe lorsque je click sur les inputs alors qu'ils devraient devenir plus petit et bleu .
En fait je suis un tuto de nickwalle , j'ai suivi les étapes une à une et je ne comprend pas pourquoi ça ne marche pas ...
Une idée ?
Merci !

Nakin

Salut,

Dans ton dernier message, ce que tu nous montres c'est du CSS. Tu dois te mélanger un peu les pinceaux et du coup c'est pas du tout clair ton problème :/

Nagraria

Auteur

Oui désolé si je ce n'est pas claire, je ne connaissais pas du tout jquery avant de suivre ce tuto donc je ne sais pas comment il fonctionne :)
voici le html du formulaire , avec les classes et les id du css :

<h2 class="header header-form">S'inscrire</h2>

<form method="post" id="regForm">

    <div class="field">
        <label class="field-label" for="name">Votre nom</label>
        <input class="field-input" type="text" name="name" id="name"/>
    </div>

    <div class="field">
        <label class="field-label" for="email">Votre adresse email</label>
        <input class="field-input" type="email" name="email" id="email"/>
    </div>

    <div class="field">
        <label class="field-label" for="password">Votre mot de passe</label>
        <input class="field-input" type="password" name="password" id="password"/>
    </div>

    <button type="submit" name="submit">S'inscrire</button>

</form>

Nagraria

Auteur

Re bonjour tout le monde !
Merci à vous tous pour votre aide j'ai enfin trouvé le problème ! Merci Boosty web tu avais raison c'était mon script js qui posait problème .
Je l'ai changé , et ça fonctionne !
Merci pour votre patience et votre aide !

FactureHero.com

ok ;) Cool si ça marche ;)

Problème jquery

19 réponses