11521 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

je vous explique ma problématique :

Je suis en train de faire un epub, texte et hyperliens.

À travers ce texte, il y a des liens, d'une page vers une autre plus éloignée.
les liens sont sur des ancres dans le texte.
Je voudrais que lorsqu'on clique sur un lien et donc qu'on atterrit sur la page cible, le texte correspondant à l'ancrage visé se colore.

Est-il donc possible de récupérer à l'affichage d'une page, si elle existe, une url, de trouver dedans la chaine qui contient l'ancre, de la comparer aux ancres présentent dans la page, et si ça correspond, de changer le style de l partie du texte contenu dans l'ancre ?

Je suis extrêmement débutante en javascript, alors si ma demande est réalisable, je vais avoir besoin de vos explications...

Merci

Carosch
Salut,
Bon alors je suis partie de la page suivante qui a une ancre (vers ton 1er message) : http://forum.alsacreations.com/topic-5-76321-1-Javascriptdansunepub.html#p499128

du coup pour récupérer l'ancre en javascript :

var url = document.URL;
if(url.indexOf('#')!=-1) //si il y a un # cela sa position, sinon pas d'ancre et cela retourne -1
{
var ancre= url.substring(url.indexOf('#')+1);
//modif css a faire ici. ancre contient l'id de l’élément référencé au final
}

A partir de ce moment là, la variable ancre contient l'identifiant "p499128".
Ensuite il reste a faire la modification que tu veux en css.
Exemple rapide (il doit y avoir moyen de faire plus propre que ça en ajoutant une classe qui existe dans ton fichier css par exemple)

document.getElementById(ancre).style.background='red';


Edit : Je rajoute un petit if pour être sur que le url.indexOf a trouver un #, (sans ça ancre contenait toute l'url..)
Modifié par mathieu1004 (08 Jul 2015 - 17:46)
Merci !!

je vais devoir bien étudier tout ça, tester d'abord sur une page web si j'arrive à comprendre Smiley smile et ensuite voir si ça marche dans un epub.

j'ai du taf !

merci beaucoup
carosch
Bon déjà, grâce à tes explications, j'ai très bien réussi à l'expérimenter sur des pages web.

je reviendrai dire si ça marche sur des pages d'un epub.

Merci !
Carosch
Salut,
je ne sais pas ce qu'est un 'epub' ^^ mais ca devrait marcher oui.
Pour tester le code javascript j'utilise la console de firefox (ctrl+shift+k), c'est pratique pour faire des petits tests Smiley smile

Bon courage pour la suite
l'epub est un livre numérique
le javascript y fonctionne mais peut-être pas sur toutes les liseuses, ni tous les scripts... je verrai bien

merci
carosch
Oki, bah je n'ai pas de liseuse du coup je ne pourrai pas t'aider plus que ça dans le cas de problèmes de compatibilité javascript par contre :s
Le javascript est censé fonctionner dans un epub, il fait partie de la spécification epub3. Par contre ça va beaucoup dépendre du logiciel de lecture je pense.

Ce serait intéressant de tester et faire un retour sur ce qui marche ou ne marche pas et sur quelle plateforme.

Par exemple, de ce que je sais, aucun problème pour les extensions Readium de Chrome ou celle pour firefox PC, on peut faire pratiquement la même chose dans un epub que sur le web. Là où j'ai sérieusement des doutes sur le support du javascript, c'est pour iBooks et le kindle.
Justement, je vais devoir tester sur plein de supports,
je vous ferai un petit compte rendu après ces tests.
Je n'en suis pas encore là pour l'instant.

Je vous tiens au courant.

Carosch