11521 sujets

JavaScript, DOM et API Web HTML5

Bonjour
J'ai quelques vagues notions de css mais pas vraiment de javascript et encore moins de php.
Comme ça fait un moment que je cherche à résoudre un problème sans avancer, je m'avoue vaincu et fais appel à vos lumières.

Voilà mon problème:
http://cucaracha.fr/lettres/home.html

J'ai un cadre contenant 26 points qui correspondent aux lettres de l'alphabet.
Quand je clique sur le premier point, la lettre A apparait à coté du cadre.
Le second point fait apparaitre la lettre B etc.
Si je reclique sur le premier point, la lettre A disparait, idem pour les autres que j'aurais déjà cliquées.

Bon, ça j'ai fait mais avec un looooong code "à la va-comme-je-te-pousse."!
Si déjà vous pouviez m'aidez à le simplifier, ce serait top.

Secundo, quand je clique sur un point, je voudrais qu'il se colore en rouge et qu'il reste en rouge tant que je n'aurais pas recliqué dessus.
:active et :visited ne fonctionnent pas.
une idée peut-être?

Et tertio pour finir, Ze most important, je voudrais que les lettres qui apparaissent, se positionnent aléatoirement dans un espace de 600px par 800px.
J'ai essayé avec random et javascript mais c'est toute ma mise en page qui éclate dans la page.

Si l'une ou l'un d'entre vous voulais bien devenir mon phare dans cette nuit noire où les points d'interrogation ont remplacé les étoiles...


bonne semaine à tous!
Administrateur
Bonjour,

:visited est désactivé par défaut sur tous les navigateurs modernes pour des raisons de sécurité enfin d'atteinte un peu trop facile à la vie privée et rares sont les personnes le réactivant. Ce n'est donc pas une bonne piste, malheureusement.

Le plus simple et efficace est d'ajouter une classe sur cet élément au 1er clic, de l'enlever au 2e, rajouter au 3e, etc. En jQuery, .toggleClass() fait cela Smiley smile
Salut,
Je trouvais ton sujet plutôt intéressant pour tenter de la faire de manière concise alors je te laisse regarder le Codepen que j'ai fait avec du CSS et du JS (jQuery pour une bonne compatibilité navigateurs).

http://codepen.io/korell/pen/xqGZpm

La génération du HTML est fait avec du JS pour utiliser une boucle sur les caractères des lettres de l'alphabet.
Aucune image n'est utilisée, mais on pourrait très bien remplacer les "grosses" lettres pas des images.
Les puces sont faites uniquement en CSS.
La persistance de la puce rouge est une classe ajoutée/supprimée en JS .
Les lettres sont placées de manière aléatoires dans un container.

Voici la partie JS :
var cadre = $('#cadre'),
    bigLetter = $('#big-letter');

//génération des puces
for(var i = 65; i <= 90; i++){
    var letterChar = String.fromCharCode(i),
        letter = $('<a>').addClass('letter-' + letterChar).attr('data-letter', letterChar);

    cadre.append(letter);

}

//on attache l'événement sur les puces
$('[class^="letter-"]').on('click', function(){

    //on "switche" la classe css
    $(this).toggleClass('active');

    //appel de la méthode placant (ou supprimant une lettre)
    //on faisant passer $(this) pour retrouver cete instance comme this dans la fonction
    manageLetter.call($(this));

});

function manageLetter(){

    var char = this.attr('data-letter');
    var bigLetterElement = $('#bigletter-' + char);
    if(bigLetterElement.length > 0){
        bigLetterElement.remove();
    }else{
        var newBigLetterElement = $('<span>')
            .attr('id','bigletter-' + char)
            .text(char)
            .hide();
        bigLetter.append(newBigLetterElement);

        var position = randomPosition(newBigLetterElement);
        newBigLetterElement.css({top:position.top + 'px',left:position.left + 'px'}).show();

    }
}

function randomPosition(elem){
    //définition des limites du container
    var minLeft = 0,
        maxLeft = bigLetter.width() - elem.width(),
        minTop = 0,
        maxTop = bigLetter.height() - elem.height();

    //défini aléatoirement un top et un left dans une intervalle
    var left = (Math.random() * (maxLeft - minLeft)) + minLeft,
        top = (Math.random() * (maxTop - minTop)) + minTop;

    return {left:left,top:top};

}


Je reste dispo pour quelques explications.
Matthieu
Ciao Matthieu
Super extra génialissime!
Exactement ce qu'il me faut...

avec quand même une demande d'explication...
Tu dis qu'on peut remplacer les grandes lettres par des images.
Ouiiiiii, j'en aurais besoin! ( pour chaque lettre un dessin différent)
J'imagine qu'il faut mettre ça dans le javascript et ça je sais po faire...

Si tu as encore un peu de temps pour moi Smiley cligne

upload/1488385241-33437-like.jpg
Modifié par youkiwouf (01 Mar 2017 - 17:20)
ach, oui, encore un petit truc de pinailleur...
Je suis sur mac.
avec firefox tout fonctionne impec.
avec safari ou chrome, lors du survol des puces, :hover et :active fonctionne bien mais ne sont pas centrées...
upload/1488385192-33437-puces.jpg
Je ne sais pas trop pour le décalage des puces, peut-être des préfixes vendeurs (-webkit-) ou bien le box-sizing.

Pour les images, j'ai modifié le pen : http://codepen.io/korell/pen/xqGZpm

C'est une manière de faire, mais il en existe plein d'autres.
Là je mappe un tableau de correspondance entre les lettres et les images puis au clic je charge l'image.
L'avantage est que l'on ne précharge pas les images donc le temps d'accès est rapide et le DOM est léger, le désavantage est la latence entre le clic et l'affichage de l'image (quelques centièmes de secondes...).
Modifié par MatthieuR (01 Mar 2017 - 22:36)
Meilleure solution
C'est diiiingue!
ça marche au poil avec les images, mieux même que j'esperais!
ça me donne envie de continuer et de chercher plus loin...

Pour l'instant le nombre de puces maximum est, comme j'avais demandé, de 26, une pour chaque lettre de l'alphabet.
Si on oublie l'alphabet, peut-on augmenter le nombre de ces puces- en avoir 100... ou même 150?
J'ai vu q'uil suffisait d'augmenter une variable dans le javascript pour obtenir de nouvelles puces mais je n'arrive pas à rendre ces nouvelles puces fonctionnelles.
http://cucaracha.fr/composition-couleur/
Je réponds à moi même...
Et bien il suffit d'augmenter le nombre de caractères unicode en faisant attention à ce qu'ils soient reconnus - les signes de ponctuation, par exemple, ne fonctionnent pas.


var cadre = $('#cadre'),
bigLetter = $('#big-letter'),
images = {
A: 'images/0001', // caractère unicode nr &#65
B: 'images/0002', // caractère unicode nr &#66
C: 'images/0003', // caractère unicode nr &#67
// .....
Y: 'images/0025', // caractère unicode nr &#89
Z: 'images/0026', // caractère unicode nr &#90

// les caractères unicode [, \, ], ^, _ ,` , de &#91 à &#96 ne fonctionnant pas, on passe à:

a: 'images/0027', // caractère unicode nr //&#97
b: 'images/0028',
c: 'images/0029',
// ...
y: 'images/0051', // caractère unicode nr //&#121
z: 'images/0052', // caractère unicode nr //&#122

//les caractères unicode de nr &#123 à - &#191 ne fonctionnant pas, on passe à:

À: 'images/0053', // caractère unicode nr &#192
Á: 'images/0054', // caractère unicode nr &#193
Â: 'images/0055', // caractère unicode nr &#194
// ...et ainsi de suite



Et ensuite il faut tenir compte de ces caractère unicode qui sont inefficients en faisant des sauts de puces lors de la génération de puces!


// génération des puces
for(var i = 65; i <= 90; i++){
var letterChar = String.fromCharCode(i),
letter = $('<a>').addClass('letter-' + letterChar).attr('data-letter', letterChar);
cadre.append(letter);
}

for(var i = 97; i <= 122; i++){
var letterChar = String.fromCharCode(i),
letter = $('<a>').addClass('letter-' + letterChar).attr('data-letter', letterChar);
cadre.append(letter);
}


for(var i = 192; i <= 214; i++){
var letterChar = String.fromCharCode(i),
letter = $('<a>').addClass('letter-' + letterChar).attr('data-letter', letterChar);
cadre.append(letter);
}
// ...


Ceci clot le thème, merci à tous!