Javascript: Aidez moi SVP !

Résolu/Fermé

txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 - 6 avril 2022 à 15:32
txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 - 6 avril 2022 à 17:34

Bonjour a tous,
J'utilise le script ci-dessous pour ouvrir un pop up pour afficher un Player audio par lien a partir de ce lien pour le moment (Aldapeko sous le menu).
C'est le même que celui-ci mais pour afficher des images (qui fonctionne parfaitement).

  <!-- Début de la boite frame -->
<script type="text/javascript">
//<![CDATA[
<!--  Script pour afficher le player audio via un lien
var subs_array = new Array("sub1","sub2","sub3","sub4","sub5","sub6","sub7","sub8","sub9","sub10","sub11","sub12");  <!-- autant qu'il y a de morceaux musicaux
function displaySubs(the_sub){
        if (document.getElementById(the_sub).style.display==""){
        document.getElementById(the_sub).style.display = "none";return
  }
  for (i=0;i<subs_array.length;i++){
        var my_sub = document.getElementById(subs_array[i]);
        my_sub.style.display = "none";
        }
  document.getElementById(the_sub).style.display = "";
  }
//  End -->
//]]>
</script>     
       <!-- Repasser |display: block; (etat pour création page) | en none pour masquer le pop up (etat par défaut) -->      
        <div id="pop" style="border: 3px outset ; position: absolute; left: 770px; top: 190px; display: block; z-index: 200; background-color: rgb(0, 0, 0 );">                     
          <div id="tet" onmousedown="dx=px-gdim.offsetLeft;dy=py-gdim.offsetTop;drag=1;" onmouseup="drag=0" style="padding: 0pt 20px 0pt 0.5em; cursor: move; background-color: rgb(0, 0, 0); line-height: 18px; color: white; font-size: 12px; font-family: Helvetica,Arial;">                           
            <source src="/Downloads/Musiques/Txakun/Aldapeko.ogg" onclick="voirSelect('visible');gdim.style.display='none'" style="margin: 1px; cursor: default; position: absolute; right: 0pt; top: 0pt;" height="50" width="150" />                     

<!--            <img src="/Lexique/img-lexique/fermer.gif" onclick="voirSelect('visible');gdim.style.display='none'" style="margin: 1px; cursor: default; position: absolute; right: 0pt; top: 0pt;" height="8" width="16" /> -->                    
          </div>                     
          <img style="border: 0pt none ; margin: 1px;" />                 
</div> 
    <div align="left">
      <ul>
        <li><a href="javascript:void(0)" class="headings" onclick="displaySubs('sub1')" onfocus="if(this.blur)this.blur()"> Aldapeko </a>
<!--        <p class="pedig" id="sub1" style="display: none;"><img src="/<audio controls>  -->
        <div id="sub1" style="display: none;"><audio controls>
	<source src="/Downloads/Musiques/Txakun/Aldapeko.ogg" type="audio/ogg">
	<source src="/Downloads/Musiques/Txakun/Aldapeko.mp3" type="audio/mpeg">
	Votre navigateur ne supporte pas la balise audio.
</audio></div>
		</li>                                
      </ul>
	</div>

Note: j'ai testé plein de choses dont la suppression du tableau comme celui des jeux.
J'ai aussi testé le code du player directement sur la page, fonctionne, mais il s'affiche en bas de la liste des morceaux (un par lien de cette liste) mais ce n'est pas ce que je veut.
De plus, j'ai plein d'erreur 500 serveur. Est-ce du a des erreurs dans mes pages ?
Je suis complétement perdu là !
Merci infiniment d'avance pour votre aide !

Configuration: Windows / Firefox 98.0

A voir également:

Javascript: Aidez moi SVP !
Telecharger javascript - Télécharger - Langages
Javascript void 0 c'est quoi ✓ - Forum Réseaux sociaux
Javascript echo ✓ - Forum PHP
Retour à la ligne javascript ✓ - Forum Javascript
Javascript obfuscator - Télécharger - Langages

2 réponses

Réponse 1 / 2

txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 515
6 avril 2022 à 17:34

Tontonduwoueb:
Les liens sont dans la question: le 1er pour montrer que ça fonctionne, le 2eme pour montrer que le lien sous le menu ne fonctionne pas.
Mais au lieu d'avoir des précisions, tu me répond en faisant un roman. Plus c'est long, plus c'est incompréhensible.
Je ferme donc la discussion.
Merci quand même pour l'exemple du lecteur audio avec sa liste sur le coté, astucieux mais pas ce que je voulais, du moins dans ce cas ci !

Réponse 2 / 2

Tontonduwoueb
Modifié le 6 avril 2022 à 16:23

Les popup étant bloqués par défaut par la plupart des navigateurs et non conformes aux exigences d'accessibilité et de référencement ils sont à éviter.
A remplacer par une fenêtre modale(incluse dans la page en superposition par CSS).

Mais bon ne serait il plus plus simple de changer la piste plutôt que d'utiliser un lecteur par fichier devant être lu?
Si vous voulez garder le lecteur sur plusieurs pages mieux vaut faire avec une iframe qui permettra de consulter le site tout en écoutant la musique si c'est le but.

Encore une fois je ne comprends pas votre sujet.
Vous n'avez aucune question et n,'indiquez pas ce qui vous pose problème ni même précisément ce que vous voulez faire.

Décomposez en étapes et concentrez vous sur un problème à la fois devrait vous aider:
exemple:

Comment ouvrir un pop up (à ne pas faire parce que mauvais mais bon)?
réponse:

window.open('adresse de la page à ouvrir en pop up')

comment ouvrir ma pop up lors d'un clic?
réponse(l'attribut "onclick" dans une balise fait globalement la même chose mais en moins bien donc privilégier "addEventListener" ):
avec la programmation événementielle en JavaScript avec la méthode .addEventListener
explications:
https://www.w3schools.com/jsref/met_element_addeventlistener.asp

Même chose:

Je veux changer la piste lue par le lecteur dans la page:
en changeant le contenu du lecteur soit avec .innerHTML en écrivant de nouvelles balises "source" soit avec la méthode .load du lecteur

Même si vous ne semblez pas avoir les capacités pour écrire des pages web et encore moins de la programmation (ça s'apprend et il faut en passer par là) regarder la notice d'utilisation ça pourrait vous aider?

https://www.w3schools.com/jsref/dom_obj_audio.asp

Tontonduwoueb
6 avril 2022 à 16:52

Si vous procédez par étapes plutôt ça vous permet de décomposer:

"Note: j'ai testé plein de choses dont la suppression du tableau comme celui des jeux."
une question de HTML donc? A noter que si ce ne sont pas des données tabulaires un tableau n'est pas conforme, c'était la méthode de mise en page des vieux Dreamweaver, une raison de fuir ce logiciel à tout prix parmi des milliers d'autres.

"J'ai aussi testé le code du player directement sur la page, fonctionne, mais il s'affiche en bas de la liste des morceaux (un par lien de cette liste) mais ce n'est pas ce que je veut. "
Une question de CSS donc voir sur Google "positionnement CSS" vous verrez il y a plein de possibilités. En maîtrisez quelques unes est nécessaire, la méthode choisie dépends du contexte(l'ordre ou flux des éléments dans la page, la place qu'ils prennent et le type 'display' emploie qui influe sur la position des éléments précédents/suivants). aussi bien que de vos
préférences et comment vous travaillez.

Bref on veut bien essayer de vous répondre ici mais pas tout faire pour vous.
Pour vous répondre il faut que vous ayez une question précise sur un point précis ou alors on parle de méthodologie.
La vôtre n'est clairement pas bonne: vous mélangez constamment plusieurs difficultés de plusieurs technologies.
Hors pour progresser ou simplement arriver à vos fins il faut que vous ayez résolu tout les problèmes en les décortiquant pour voir le point où vous coincez.
Là vous coincez sur des questions qui ont plusieurs réponses et doivent résoudre plusieurs problèmes, cela montre simplement que vous manquez de bases cohérentes dans les différents domaines.
D'ailleurs ces problèmes vous ne les aurez pas si vous suivez des indications précises (d'un tuto sur un point particulier, apprendre c'est comprendre avant tout: oubliez copier coller sans comprendre cela ne peut fonctionner) voire une méthode.

Les réponses qu'ont peut vous donner n'est pas à la mesure de votre compréhension(voir script du changement des sources du lecteur dans un autre sujet) donc simplifiez et concentrez vous sur une seule chose à la fois histoire de la comprendre bien avant d'aller à l'étape suivante.

Exemple de méthodologie de création d'un site/page:
1)
décrire quels sont les contenus, les fonctionnalités, l'apparence graphique(éventuellement une pré-maquette ou un croquis au crayon pour une idée générale)
2)Intégration des contenus
écrire le HTML et les contenus, ex: un texte de paragraphe, un menu latéral, un article sur 2 colonnes, une image, un lecteur audio

3)mise en page
on rajoute le CSS qui va donner les couleurs, formes, dimensions, nombres de colonnes, positionnement pour chaque élément de la page

4)ajout des fonctionnalités JavaScript
Une fois la mise en page de la page terminée on peut rajouter le JavaScript qui va permettre ce que ne permet pas le HTML et CSS. Par exemple changer le texte d'un élément, de piste à lire sur le lecteur etc...

Pas une règle absolu cette méthodologie (en fait avec l'habitude on peu faire l'ensemble simultanément après l'étape 1) mais je pense qu'elle peut vous aider dans votre travail, à commencer par pas vous mélanger les pinceaux et vous poser des difficultés de CSS alors que vous êtes en train de faire du JavaScript...qui ne peut bien sûr répondre à des questions de positionnement de votre lecteur(puisque c'est HTML e-t CSS qui déterminent cela).
Et donc vous intéresser à JavaScript pour tout ce qui est autre que ce que fait déjà HTML et CSS:
gérer l'interactivité AKA changer les contenus HTML et CSS ce qui implique que vous ayez déjà le HTML et CSS qui doit résulter de l'interaction
exemple: un clic sur un bouton fait apparaître le lecteur, un autre clic change les contenus HTML du lecteur(la piste à lire).

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule

java script error in the main process

afficher un tableau JS en HTML

Nodejs.exe est-ce un virus

[Javascript] Tables de Multiplication

Discussions similaires

Newsletters