Bonjour à vous,

en fait, quand je clique sur un élément pour le déplacer, jquery ui déplace automatiquement cet élément vers la gauche. J'ai vu la propriété axis: "y" mais rien ne change, il décale toujours l'élément vers la gauche alors que je voudrais qu'il ne puisse être déplacé que verticalement.

J'ai essayé de mettre mon code en codepen mais je n'arrive pas à faire en sorte que jquery ui fonctionne.

Néanmoins, vois l'adresse du code codepen : https://codepen.io/joseph5/pen/qBZvdGz

Merci d'avance pour votre aide.

Bonne journée,
Thierry

Hello,
En fait il faut bien suivre les recommendations de Niuxe pour supprimer l'affichage par défaut (il n'est pas possible de juste changer l'icone). Ensuite, à toi de styliser comme tu le souhaites pour ajouter icone, bordure, et autre. Même si tu bloques, n'hésite pas à partager ton code en expliquant ce qui peut te freiner

Bonjour Niuxe,
tout d'abord, je vous remercie pour votre aide.
Désolé mais apparemment, je me suis mal fait comprendre.
En fait, je souhaiterais changer l'icône (l'image) du composant HTML input type="color". J'aimerais que ce soit un icône représentant une palette de couleurs qui apparaisse plutôt que l'icône par défaut de ce composant HTML.
Y a-t-il moyen en utilisant la propriété CSS background-image sur ce composant ou d'une autre façon ?
Merci d'avance
Bonne journée,
Thierry

Merci encore Jean-Pierre pour tes conseils avisés.

Oui je pense m'orienter vers Ajax

Bien à toi

Bonjour a tous,

je suis débutant voir inexpérimenté au possible en HTML5,

Pour un site internet j'avais creer une animation, c'était une montre qui était a l'heure réel, je l'avais fait sur Adobe Animate en ActionScript 3.0 etc en utilisant des images faites sur Photoshop.

Malheureusement le site en question n'accepte plus les animation flash (swf) et je me retrouve dans une impasse, comment faire pour que mon animation fonctionne sous HTML5 ?

J'ai regarder pas mal de tuto anglais qui te dise de convertir ton .fla dans Animate en HTML Canvas... mais quand je preview l'animation sur mon naviguateur... rien, les aiguilles ne bouges pas, la conversion met mon script en commentaire... aucune idée de ce que je dois faire...

La plupart des vidéos que j'ai regarder de mecs qui font des horloges analogiques sous HTML5 ne tapent que du code et n'utilisent pas d'images... or moi c'est une marque spécifique donc des images qu'on me donnent.

Auriez vous des tutos intéressent ou la solution a mon problème ? Merci.

Voici le code que j'utilise pour l'animation sous .swf (flash)

"sec_mc", "min_mc" et "hour_mc" étant les 3 aiguilles de la montre.

/////////////

import flash.utils.Timer;
import flash.events.TimerEvent;

var now:Date;
var ct:Timer = new Timer(1000);
ct.addEventListener(TimerEvent.TIMER, onTick);
ct.start();
function onTick(event:TimerEvent):void {
now = new Date();
var s:uint = now.getSeconds();
var m:uint = now.getMinutes();
var h:uint = now.getHours();
sec_mc.rotation = (s * 6);
min_mc.rotation = (m * 6);
hour_mc.rotation = (h * 30) + (m * .5);

/////////////

Et l'eau,

Regarde de ce côté : appearance (-moz-appearance, -webkit-appearance)

Merci pour les précisions,
j'ai essayé plusieurs truc mais cela ne fonctionne pas.
Si tu as un peu de temps pour te pencher sur le truc, je suis preneur si tu trouve une solution.
Normalement tu as la partie la plus importante des fichiers et la structure bdd.

Cdt

parsimonhi a écrit :
Bonjour,

Clairement, tu ne peux pas faire un nl2br à l'ensemble de ton $billet['contenu1']. Il faudrait ne le faire que pour les parties qui en ont besoin (des paragraphes <p> ?). Ou bien éventuellement, tu peux continuer à faire un nl2br() sur l'ensemble mais retirer les <br /> inutiles si je comprends bien ton besoin.

C'est un peu difficile de donner une solution toute faite sans savoir ce que contient exactement $billet['contenu1'].

Ça peut se faire avec des preg_replace() sur le contenu comme tu l'as fait pour rajouter tes styles.

Par exemple (à adapter en fonction de la situation réelle, car je me suis basé sur le code html que tu as donné, mais il y a peut-être des cas différents en réalité), tu peux ajouter juste après tes preg_replace qui ajoutent tes styles un truc du genre :

$contenu = preg_replace("#</(td|tr|th|caption|table)>([^<]*<br ?/?>[^<]*)+#i", "</$1>\n", $contenu);
$contenu = preg_replace("#<br />\s<(td|tr|th|caption|table)#i", ">\n<$1", $contenu);

Mais bon, c'est du bricolage ! Le mieux serait de ne faire des nl2br() "maisons" que sur les parties du contenu qui en ont besoin (sans doute avec des preg_replace remplaçant les \s par des <br> seulement où c'est nécessaire). Le code peut être assez complexe selon ce qu'est ton contenu.

Amicalement,

Merci!

Non Javascript dieu merci ne peux atteindre le serveur !
Tu as deux solutions:
1) par Cookies et l'avantage est que le cokkies peut être relu de suite par javascript, alors que le même cookies géré par PHP ne le peux pas.
2) (et j'opterai et de loin pour cela,) c'est AJAX qui alors gérera tout en sessions !
Modifié par Jean-Pierre-Bruneau (25 Sep 2020 - 03:08)

Bonjour,

J'ai mis en place un panier en PHP et récupères les données par une session.

J'ai mis en place deux boutons + et - pour augmenter ou diminuer les quantités comme sur le code ci-dessous (simplifié)

window.addEventListener('DOMContentLoaded', function(){
    var $btns_ajouter = document.querySelectorAll('.ajouter'),
        $btns_enlever = document.querySelectorAll('.enlever');

    for(var i = 0 ; i < $btns_ajouter.length; i++){
        (function(i){
            $btns_ajouter[i].addEventListener('click', function(e){
                var $quantity = this.parentNode.querySelector('.quantity');
                $quantity.value = parseInt($quantity.value, 10) + 1;
                e.preventDefault();
            });
        })(i);
    }

    for(var i = 0 ; i < $btns_enlever.length; i++){
        (function(i){
            $btns_enlever[i].addEventListener('click', function(e){
                var $quantity = this.parentNode.querySelector('.quantity');
                $quantity.value = parseInt($quantity.value, 10) <= 0? 0 : parseInt($quantity.value, 10) - 1;
                e.preventDefault();
            });
        })(i);
    }
});

En fonction de cela je calcule les quantité par article, le prix total (qté x prix)

Je fais des totaux de nombre d'articles du panier, la somme global du panier.

Cela fonctionne correctement sauf quand l'utilisateur rafraichit la page car les données ne sont pas sauvegardées dans les sessions

Comment remédier à ce problème (mouvementer les sessions à partir de js ?)

Merci de votre aide

Bonsoir à vous,

j'aimerais savoir s'il est possible de changer l'apparence de l'icône du champ input type="color" par une image représentant une palette de couleur par exemple ?

Est-ce possible de mettre un background-image sur ce champ ?

Merci d'avance

Bonne soirée,
Thierry

Finalement je suis arrivé satisfaisant

merci

Bonjour,
ce problème est très bien expliqué ici :
https://www.alsacreations.com/tuto/lire/909-CSS-transparence-couleur-rgba.html
Je cite :
------
Contrairement à ce que l'on peut croire, le principe de la transparence RGBa est radicalement différent de la propriété opacity (également CSS3 mais assez ancienne déjà) : cette dernière est une propriété qui s'applique à l'élément dans son intégralité (ainsi qu'à tous ses descendants) tandis que RGBa est une valeur qui s'applique à une propriété de l'élément sélectionné uniquement.
------
On ne peut être plus clair.

Re Bonjour

Je suis passé par Ajax que je lance si mes champs sont correctement renseignés.

Je récupère bien la réponse quand j'interroge ma console avec en réponse

message "Le formulaire a été envoyé " sur un écran que je ne connais pas (voir image)

Je n'arrive pas à afficher ce message déjà au niveau du .done

Mon code

Récupération du message dans mon Contrôleur

$json['error']=$register_valid->getErrors();;
                $json ['message']="Erreurs";
      
                } 

                if(!isset($json['error']))
                    {
                    $json['message'] = "Le formulaire a été envoyé ";
                    }
                else
                    {
                    $json['message'] = "Le formulaire n'a pu être envoyé ";
                    }

                header('Content-Type: application/json');
                echo json_encode($json);
                //var_dump($json);

                die();

Mon code JS :

$("#register_form").submit(function(event){

        var _self = $(this);

        if ($(this).trigger('validForm')

           .data('isFormValid'))
                {
                
                var form_url = $(this).attr("action"); //récupérer l'URL du formulaire
                var form_method = $(this).attr("method"); //récupérer la méthode GET/POST du formulaire
                var form_data = $(this).serialize(); //Encoder les éléments du formulaire pour la soumission
            //ENVOI DE LA REQUETE    
                $.ajax({
                    url: form_url,
                    type : form_method,
                    data : form_data,
                    datatype : 'json',
                    contentType: "application/json; charset=utf-8",
                    
                    })

            //RECEPTION DE LA REPONSE    
                    .done(function(response, textStatus, jqXHRa) {


                    
                    })

                    .fail(function(jqXHR, textStatus, errorThrown) {

                        
                       
                    })

                    
                }
            else
                {
                    event.preventDefault();
                } 

                   
//FIN REGISTER_FORM    
     });

Bonjour j'ai un renseignement je voudrais savoir je voudrais mettre une opacity sur mon image mais ça modifie aussi sur ma nav bar je sais pas comment faire et je débute en html css merci pour votre aide voici le code et le rendu

<!DOCTYPE html>
<html lang="fr">
    
  <head>
   <meta charset="utf-8">
    <title>Maquette</title>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    
  </head>
  <body>
    <div id="background-opacity">
      <div class="nav">

      <li><a href="#">A Propos</a>
      <li><a href="#">A Propos</a>
      <li><a href="#">A Propos</a>
      </div>
    

    <div>
      
      
  



    </div>
 
  </body>
    
</html>

et le css

body{
   margin:0;
   padding:0;
   font-family: 'Open Sans', sans-serif;
   background-image: url("../Images/vaisseau.png");
   background-size: cover;
}

.nav{
    color: rgb(228, 228, 228);
    list-style: none;
    text-align: center;
    padding: 20px 0 20px 0;

}

.nav li{
    display: inline-block;
    padding: 0 25px 0 25px;
}

.nav li a{
    text-decoration: none;
    color: rgb(228, 228, 228);
}

.nav li a:hover{
    color: #c1c1c1;
}

.nav{
background-size: cover;
background-position: center;
background-repeat: no-repeat;
} 

.background-opacity{
    opacity: 0.1;
}

Bonjour,

Il y avait bien sûr du code à rajouter à la place de ma phrase :
// rajouter ici le code qui va changer le contenu du <select> qui liste les villes

Une possibilité est que ce code soit similaire à la fonction filter_data(), mais au lieu d'aller pêcher dans la base de données une liste de biens, ce code doit, via une requête ajax comme dans filter_data(), aller pêcher la liste des villes pour le département présentement sélectionné dans le <select> des départements, et à la fin du code, il doit remplacer le contenu du <select> listant les villes par ce qu'il vient de pêcher dans la base.

Il faut aussi bien sûr faire un script php similaire à fetch_data.php, qui sera utilisé par la requête ajax, qui contiendra le code qui interrogera la base, fera la liste des villes, et fabriquera le html à mettre dans le <select> des villes.

Ce n'est pas plus compliqué que de faire la requête qui récupère la liste des bien et l'affiche dans la page.

On aurait donc par exemple :

$('.common_selector.departement').change(function(){
        filter_ville();
        filter_data();
    });

function filter_ville()
{
// ici un code similaire à la fonction filter_data, mais pour aller chercher les villes
// et qui finit par la requête ajax suivante
        $.ajax({
            url:"fetch_ville.php",
            method:"POST",
            data:{action:action, departement:departement},
            success:
               // ici la fonction qui met à jour le html du <select> des villes
                ;
            }
}

Et le fetch_ville.php

include('dbconfig.php');

if(isset($_POST["action"]))
{
 	// ici le code qui fait la requête mysql appropriée
 	// ici le code qui fabrique le html construisant le <select> des villes
 	echo $output;
}

Je vois si j'ai le temps de finir ce code (je ne sais pas quand). Ce n'est pas dur (surtout vu qu'à peu près la même chose est déjà fait pour les biens), ça prend juste un peu de temps.

Amicalement

re,
non cela ne fonctionne pas, si tu peux détailler un peu.
Tu peux faire un test avec ce code car il est quasi complet, cela sera peut être plus simple pour toi.
tu fais une mini bdd avec les champs suivant
id | ville | departement | type_offre | prix
1 | bordeaux | 33 | 1 | 200
2 | arcachon | 33 | 1 | 300
3 | angouleme| 16 | 1 | 230
4 | cognac | 16 | 1 | 250
etc

Bonjour,

Il me semble que tu peux t'en sortir en rajoutant simplement juste après

    $('.common_selector').change(function(){
        filter_data();
    });

... un truc du genre

    $('.common_selector.departement').change(function(){
        // rajouter ici le code qui va changer le contenu du <select> qui liste les villes
        filter_data();
    });

Je ne sais pas si ça te suffit comme indication, ou bien s'il faut détailler encore plus.

Amicalement,

300 lignes en gros

Bonjour,

Bon, pour les villes d'un département, finalement, je crois voir comment faire la liste (on peut aller piocher dans les adresses, ce n'est pas extra, mais ça peut marcher).

Et la base, elle est grosse ?

Amicalement,

En base de donnée.
id | ville | departement | .....
tu peux le voir sur la requête pour le dropdown ville

Bonjour,

Et où est rangé l'information disant qu'une ville est dans quel département ?

Amicalement,

Bonjour,
Je veux dire que lorsque tu sélectionnes un département dans le dropdown "département", il faut que dans le dropdown "ville", cela affiche uniquement les villes du département sélectionné dans le dropdown "département".
Ex : je sélectionne le département "Gironde 33"
dans le dropdown ville apparait que les viles de Gironde "Bordeaux" "Arcachon" etc...

Bonjour,

La question n'est pas claire. Que veux-tu dire par "lier" la dropdown département à la dropdown ville ?

Amicalement,

Bonjour,

Je simplifierais ce code (y a trop ! )

Tu peux rénunir tes deux liens sociaux, ton icone, et le bouton du menu dans la même div, par exemple celle qui a la classe .navbar-brand. Ce sera plus facile à gérer dans l'optique d'être responsive. Ça donne un truc du genre comme ci-dessous :

<div class="navbar-brand">
    <a href="https://twitter.com/berkanegirlss" class="social" target="_blank"><img src="img/twitter.png" alt="Twitter"></a>
    <a href="https://www.instagram.com/celya.11/" class="social" target="_blank"><img src="img/instagram.png" alt="Instagram"></a>
    <a class="brand" href="index.html"><img src="img/logo.ico" alt="Logo" id="logo "></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
</div>

Et après, dans le css, je mettrais le navbar-brand en display:flex, avec les deux premiers liens (twitter et instagram) à flex:0, le troisième (celui du logo) à flex:1 et le bouton "Menu" à flex:0. Et enfin, je donnerais une largeur fixe aux deux premiers liens et au bouton, et une largeur de 100% à l'image qui est dans le lien logo.

L'idée est que les liens "twitter" et "instagram", et le bouton "Menu" auront toujours la même largeur, tandis que le logo prendra toute la place restante.

Par exemple (à adapter évidemment en fonction de tes autres contraintes) :

.navbar-brand
{
	display:flex;
}
.navbar-brand a.social
{
	width:4em;
	flex:0;
}
.navbar-brand a.brand
{
	flex:1;
}
.navbar-brand button.navbar-toggler
{
	width:4em;
	flex:0;
}
.navbar-brand a.social img
{
	width:4em;
}
.navbar-brand a.brand img
{
	width:100%;
}

Amicalement,