Nouveau sujet Aide

il y a 1 h
Merci de ta réponse
Je pense que j'ai mal expliqué le problème, je vais essayer autrement.
Le propriétaire du site écrit le contenu en utilisant un HTML simplifié.
Voici le véritable code (https://tests.osirisnet.net/news/@n_10_20.htm lignes 83 à 98)

 <section lang="en">
             <p class="top10"><strong>(1) An Android app provides reliable and user-friendly information on more than 30000 Egyptian words:</strong><br>
        https://play.google.com/store/apps/details?id=com.aed_ancientegyptiandictionary<br>
 
You can search for transcription, for German or English translation, or for hieroglyphs used for the spelling of the word forms. Please check the tutorials:  https://youtu.be/_s58Ud5rB7c  and  https://youtu.be/bp7MYCjavOs</p>
 

<p class="top10"><strong>(2) The lexical entries are collected on the website</strong>  https://simondschweitzer.github.io/aed/<br>
 
or in a three-volume PDF (don't miss them!):  https://doi.org/10.5281/zenodo.4073311,  <br>  https://doi.org/10.5281/zenodo.4073317,  and  https://doi.org/10.5281/zenodo.4073321<br>
 
The entries offer selected references, collocation partners, hieroglyphic spellings, information on roots, on grammatical usage, on chronological and geographical distribution. For an overview:  https://youtu.be/O357NG49LyQ</p>
 

<p class="top10"><strong>(3) The approximately 11000 texts containing the references are digitally published</strong> in TEI-XML and thus guarantee verifiability:  http://doi.org/10.5281/zenodo.3580939<br>
 
There is a schema representing Egyptian texts in TEI. You can use it for your own text encodings:<br>  https://github.com/simondschweitzer/aed-tei/blob/v1.0/files/aed_schema.xsd<br>
 
Furthermore, a thesaurus for object type terms, for date terms and more is available:<br>  https://github.com/simondschweitzer/aed-tei/blob/v1.0/files/thesaurus.xml<br>
 
I am currently developing a digital tool in ANNIS (https://corpus-tools.org/annis/) that makes the data accessible for corpus linguistic research. A beta version will be presented soon.<br>
This data and the data of the AED project are published under the free license CC-BY-SA 4.0, which allows to use them for further research. </p>

    </section>

C'est un expert en égyptologie, pas en écriture de HTML.
Mon job ne consiste pas à transformer son HTML en quelque chose de plus correct, mais à écrire des fonctions JavaScript qui lui donnent une meilleure allure

Pour faire ce texte, il a fait un copier/coller à partir d'une page HTML, je suppose (et non pas à partir du source).

Comme cette <section> contient de nombreuses adresses web, je me suis dit qu'il serait bien de faire en sorte que ces adresses soient remplacées par des liens vers les pages en question.

Le script de transformation est lancé à la fin du chargement de la page, il fait pas mal de transformations, celle-ci n'est qu'une transformation de plus.

Ce que fait le script:
1) rechercher les textElement contenant la chaîne de caractère "https://..."
2) remplacer ces textElements par des documentFragment contenant les parties "non adresses" sous forme de texElement et les partie "adresses" par des <a href="https://...">https://...</a>

Le code se trouve dans https://tests.osirisnet.net/common.js lignes 1499 à 1549

Comme je l'ai expliqué plus haut, la solution que j'ai fini par utiliser pour traiter le problème est
1) de décomposer le contenu du textElement initial en "mots" par un split(" ")
2) de regarder le contenu de chaque "mot", regarder s'il commence ou non par https:// et remplir le documentFragment mot à mot.

Ça marche, pas de problème, mais j'aurais préféré pouvoir couper la chaîne de caractère en segments plus longs plutôt que de le faire mot à mot par un
text.match(/.../g)

La question est d'écrire la Regex correspondante.
Modifié par PapyJP (31 Oct 2020 - 18:34)

Dans JavaScript, DOM et API Web HTML5 · Problèmes de Regex

il y a 2 h
Bonsoir
Je continue mon apprentissage des Flexboxs en grande partie grâce à ce forum ????
Aujourd’hui j’ai fait un essai de mise en page, j’y suis presque parvenu ... !
Mais là je viens vers vous car je bloque.
Je ne parviens pas à gérer la taille des photos et du texte, j’ai essayé de jouer sur les tailles des div, en vain.
Merci pour votre expertise.
Bonne soirée
Prenez bien soin de vous.


https://www.menuiserie-menplast.fr/blocks8.html
Modifié par africa (31 Oct 2020 - 18:13)

Dans CSS et mise en forme, CSS3 · Flexbox / Taille div

il y a 4 h
Bonjour,

La fonction openCity() est du javascript exécuté dans la navigateur. Le code php, lui, est exécuté par le serveur.

Une possibilité serait, avant l'appel à openCity(), de faire une requête ajax au serveur qui exécutera le script Tokyo.php et renverra le résultat au navigateur. Il suffira ensuite, à la réception du résultat, d'exécuter la fonction openCity() avec ce résultat (qui a priori pourrait être du code html) en paramètre.

On peut aussi bien sûr tout faire dans la fonction openCity().

Amicalement,

Dans CSS et mise en forme, CSS3 · Menu dans une fenetre modal

il y a 4 h
Bonjour,

Je ne suis pas sûr d'avoir compris la question.

En supposant qu'on a déjà récupéré toutes les chaines qui sont du genre de text via une autre regex, il me semble qu'on peut faire :

$text = "Vous trouverez des informations à   https://adresse1,     http://adresse2   ou   https://adresse3.";
 
if(preg_match_all("/(Vous trouverez des informations à )|(https?[^\s]+[^\s,.])|(, )|( ou )/",$text,$m))
{
	foreach($m[0] as $a)
		echo "\"".$a."\"<br>";
}
else echo "Pas de résultat !<br>";


EDIT: la même chose, mais en javascript, avec le résultat écrit dans la console

var m, text = "Vous trouverez des informations à   https://adresse1,   https://adresse2   ou    https://adresse3.";
 
if(m=text.match(/(Vous trouverez des informations à )|(https?[^\s]+[^\s,.])|(, )|( ou )/g))
{
	m.forEach(e =>  console.log(e));
}
else console.log("Pas de résultat !");

Amicalement,
Modifié par parsimonhi (31 Oct 2020 - 16:03)

Dans JavaScript, DOM et API Web HTML5 · Problèmes de Regex

il y a 7 h
bonjour à tous

j'ai réussie à trouver une fenêtre modal avec un menu incorporé mais malheureusement il affiche du texte alors que j'ai besoin d'afficher du php.

  <ul class="pagination white border-bottom" style="width:100%;">
        <li><a href="#" class="tablink" onclick="openCity(event, 'Tokyo')">Tokyo</a></li>
  </ul>
  <div id="Tokyo" class="container city">
   <h1>Tokyo</h1>
   <p>Tokyo is the capital of Japan.</p><br>
  </div>

et voici ce que j' essaye d'insérer sans succès

                <?php include '../Tokyo.php';?>


si quelqu'un à une idée je suis preneur Smiley biggrin et le remercie d'avance

Dans CSS et mise en forme, CSS3 · Menu dans une fenetre modal

il y a 8 h
Bonjour,
Personne n'a d'idées pour ça ?

js_html a écrit :
Re-bonjour,

function start(URLlist){
	for (var i = 0; i &lt; list.length; i++) {
		window.open(URLlist[i], 'blank');
	}
}

URLlist est une liste d'URLs.
J'aimerai que chaque lien s'ouvre dans un nouvel onglet mais ils s'ouvrent tous dans le même nouvel onglet donc il reste seulement le dernier de la liste.
Comment faire pour qu'ils s'ouvrent chacun dans un nouvel onglet ?
Merci beaucoup !

Dans JavaScript, DOM et API Web HTML5 · [Résolu] Ouvrir un lien dans un nouvel onglet en JS

il y a 9 h
Bonjour à tous
Je suis tombé sur le problème suivant:
J'ai un texte qui contient des adresses web, quelque chose comme:

text = "Vous trouverez des informations à  https://adresse1,   http://adresse2  ou  https://adresse3."

Mon objectif: remplacer les adresses par des liens, comme le fait le forum Alsacreations et beaucoup d'autres sites web.
J'ai essayé sans succès d'écrire une regex qui me permette de récupérer le tableau

["Vous trouverez des informations à ", "https://adresse1", ", ", "http://adresse2", " ou ", "https://adresse3", "."]

J'ai fini par écrire:

text = text.replace(/\s+/g, ' ');
words = text.split(' ');

En analysant les "mots" je suis arrivé au résultat désiré car la demande était urgente (fin de mois) mais j'aimerais résoudre ce problèmes de regex.
Merci de votre aide

Dans JavaScript, DOM et API Web HTML5 · Problèmes de Regex

il y a 1 j
Bonjour,

Les float, c'est hasbeen.

J'ai mis l'ul contenant les images en display:flex. Je lui ai donné une largeur de 600% (je me demande bien pourquoi y avait que 500% avant).

J'ai supprimé le float des li. J'ai mis un flex:1; à la place.

J'ai ajouté un width:100% aux images (là, faut voir en situation si c'est bien ça qu'il faut : je ne sais pas à quoi ressemble la taille de tes images. Si toutes tes images ont déjà la bonne proportion, ça devrait aller).

Du coup, ça donne ça pour la partie de css qui est modifiée.
#slideshow-inner>ul {
    display: flex;
    list-style: none;
    height: 100%;
    width: 600%;
    overflow: hidden;
    position: relative;
    left: 0;
    transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
}

#slideshow-inner>ul>li {
    height: 320px;
    flex:1;
    position: relative;
}

#slideshow-inner>ul>li>img {
    margin: auto;
    height: 600px;
    width: 100%;
}

Et c'est tombé en marche.

Amicalement,
Modifié par parsimonhi (30 Oct 2020 - 16:33)

Dans Questions générales et questions de débutants · [Résolu] Slide de differente image

il y a 1 j
Hahaha je te taquine Smiley lol rien de grave ne t'en fait pas.

Oui c'est mieux de faire 1 sujet = 1 question. Mais dans les trois cas on arrive quasiment au même code ce qui fait penser que les questions étaient assez proches pour faire qu'un seul sujet du genre "Comment récupérer au click l'id du parent sur plusieurs éléments" mais bon, c'est plus facile à dire après qu'a voir quand t'es dans le jus Smiley cligne

Bonne aprem

Dans JavaScript, DOM et API Web HTML5 · [Résolu] Enfant numéro x du parent

il y a 1 j
bonjour a tous , j'ai un soucis , je veux crée un slide de 6 images , jusqu'a 5 ça fonctionne , mais je n'arrive pas a ajouter la 6e , enfin , si dans la slide 6 j'ai un fond noir , et sur la slide 1 j'ai l'image de la premiere slide mais elle est recouverte a 50% de la slide 6 , et je n'arrive pas a fix le probleme .


<?php require 'header.html'; ?>
<style>
    <?php require 'citation.css'; ?>
</style>

<body>
<div id="slideshow-wrap">
    <input type="radio" id="button-1" name="controls" checked="checked"/>
    <label for="button-1"></label>
    <input type="radio" id="button-2" name="controls"/>
    <label for="button-2"></label>
    <input type="radio" id="button-3" name="controls"/>
    <label for="button-3"></label>
    <input type="radio" id="button-4" name="controls"/>
    <label for="button-4"></label>
    <input type="radio" id="button-5" name="controls"/>
    <label for="button-5"></label>
    <input type="radio" id="button-6" name="controls"/>
    <label for="button-6"></label>
    <label for="button-1" class="arrows" id="arrow-1">></label>
    <label for="button-2" class="arrows" id="arrow-2">></label>
    <label for="button-3" class="arrows" id="arrow-3">></label>
    <label for="button-4" class="arrows" id="arrow-4">></label>
    <label for="button-5" class="arrows" id="arrow-5">></label>
    <label for="button-6" class="arrows" id="arrow-6">></label>
    <div id="slideshow-inner">
        <ul>
            <li id="slide1">
                <img src="img/image1.jpg"/>
                <div class="description">
                    <input type="checkbox" id="show-description-1"/>
                    <label for="show-description-1" class="show-description-label">I</label>
                    <div class="description-text">
                        <h2>titre</h2>
                        <p>description</p>
                    </div>
                </div>
            </li>
            <li id="slide2">
                <img src="img/image2.jpg"/>
                <div class="description">
                    <input type="checkbox" id="show-description-2"/>
                    <label for="show-description-2" class="show-description-label">I</label>
                    <div class="description-text">
                        <h2>titre</h2>
                        <p>desc</p>
                    </div>
                </div>
            </li>
            <li id="slide3">
                <img src="img/image3.jpg"/>
                <div class="description">
                    <input type="checkbox" id="show-description-3"/>
                    <label for="show-description-3" class="show-description-label">I</label>
                    <div class="description-text">
                        <h2>Titre</h2>
                        <p>desc</p>
                    </div>
                </div>
            </li>
            <li id="slide4">
                <img src="img/image4.jpg"/>
                <div class="description">
                    <input type="checkbox" id="show-description-4"/>
                    <label for="show-description-4" class="show-description-label">I</label>
                    <div class="description-text">
                        <h2>titre</h2>
                        <p>desc</p>
                    </div>
                </div>
            </li>
            <li id="slide5">
                <img src="img/image5.jpg"/>
                <div class="description">
                    <input type="checkbox" id="show-description-5"/>
                    <label for="show-description-5" class="show-description-label">I</label>
                    <div class="description-text">
                        <h2>titre</h2>
                        <p>desc</p>
                    </div>
                </div>

            <li id="slide6">
                <img src="img/image6.jpg"/>
                <div class="description">
                    <input type="checkbox" id="show-description-6"/>
                    <label for="show-description-6" class="show-description-label">I</label>
                    <div class="description-text">
                        <h2>titre</h2>
                        <p>desc</p>
                    </div>
                </div>

            </li>
        </ul>
    </div>
</div>


</body>
</html>





@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700);

* {
    margin: 0;
    padding: 0;
}

body {
    background-image: url(https://subtlepatterns.com/patterns/dark_wall.png);
    background-repeat: repeat;
    height: 500px;
    padding: 1px;
}

h1 { color: white }

#slideshow-wrap {
    display: block;
    height: 600px;
    min-width: 400px;
    max-width: 900px;
    margin: auto;
    border: 12px rgba(255,255,240,1) solid;
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    margin-top: 20px;
    position: relative;
}

#slideshow-inner {
    width: 100%;
    height: 100%;
    background-color: rgb(0,0,0);
    overflow: hidden;
    position: relative;
}

#slideshow-inner>ul {
    list-style: none;
    height: 100%;
    width: 500%;
    overflow: hidden;
    position: relative;
    left: 0px;
    -webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
}

#slideshow-inner>ul>li {
    width: 20%;
    height: 320px;
    float: left;
    position: relative;
}

#slideshow-inner>ul>li>img {
    margin: auto;
    height: 600px;
}

#slideshow-wrap input[type=radio] {
    position: absolute;
    left: 50%;
    bottom: 15px;
    z-index: 100;
    visibility: hidden;
}

#slideshow-wrap label:not(.arrows):not(.show-description-label) {
    position: absolute;
    left: 50%;
    bottom: -45px;
    z-index: 100;
    width: 12px;
    height: 12px;
    background-color: rgba(200,200,200,1);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    cursor: pointer;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,.8);
    box-shadow: 0px 0px 3px rgba(0,0,0,.8);
    -webkit-transition: background-color .2s;
    -moz-transition: background-color .2s;
    -o-transition: background-color .2s;
    transition: background-color .2s;
}

#slideshow-wrap label:not(.arrows):active { bottom: -46px }

#slideshow-wrap input[type=radio]#button-1:checked~label[for=button-1] { background-color: rgba(100,100,100,1) }

#slideshow-wrap input[type=radio]#button-2:checked~label[for=button-2] { background-color: rgba(100,100,100,1) }

#slideshow-wrap input[type=radio]#button-3:checked~label[for=button-3] { background-color: rgba(100,100,100,1) }

#slideshow-wrap input[type=radio]#button-4:checked~label[for=button-4] { background-color: rgba(100,100,100,1) }

#slideshow-wrap input[type=radio]#button-5:checked~label[for=button-5] { background-color: rgba(100,100,100,1) }

#slideshow-wrap input[type=radio]#button-6:checked~label[for=button-6] { background-color: rgba(100,100,100,1) }

#slideshow-wrap label[for=button-1] { margin-left: -36px }

#slideshow-wrap label[for=button-2] { margin-left: -18px }

#slideshow-wrap label[for=button-4] { margin-left: 18px }

#slideshow-wrap label[for=button-5] { margin-left: 36px }

#slideshow-wrap label[for=button-6] { margin-left: 54px }

#slideshow-wrap input[type=radio]#button-1:checked~#slideshow-inner>ul { left: 0 }

#slideshow-wrap input[type=radio]#button-2:checked~#slideshow-inner>ul { left: -100% }

#slideshow-wrap input[type=radio]#button-3:checked~#slideshow-inner>ul { left: -200% }

#slideshow-wrap input[type=radio]#button-4:checked~#slideshow-inner>ul { left: -300% }

#slideshow-wrap input[type=radio]#button-5:checked~#slideshow-inner>ul { left: -400% }

#slideshow-wrap input[type=radio]#button-6:checked~#slideshow-inner>ul { left: -500% }

label.arrows {
    font-family: 'WebSymbolsRegular';
    font-size: 25px;
    color: rgb(255,255,240);
    position: absolute;
    top: 50%;
    margin-top: -25px;
    display: none;
    opacity: 0.7;
    cursor: pointer;
    z-index: 1000;
    background-color: transparent;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    -o-transition: opacity .2s;
    transition: opacity .2s;
    text-shadow: 0px 0px 3px rgba(0,0,0,.8);
}

label.arrows:hover { opacity: 1 }

label.arrows:active { margin-top: -23px }

input[type=radio]#button-1:checked~.arrows#arrow-2, input[type=radio]#button-2:checked~.arrows#arrow-3, input[type=radio]#button-3:checked~.arrows#arrow-4, input[type=radio]#button-4:checked~.arrows#arrow-5, input[type=radio]#button-5:checked~.arrows#arrow-6 {
    right: -55px;
    display: block;
}

input[type=radio]#button-2:checked~.arrows#arrow-1, input[type=radio]#button-3:checked~.arrows#arrow-2, input[type=radio]#button-4:checked~.arrows#arrow-3, input[type=radio]#button-5:checked~.arrows#arrow-4, input[type=radio]#button-6:checked~.arrows#arrow-5 {
    left: -55px;
    display: block;
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
}

input[type=radio]#button-2:checked~.arrows#arrow-1 { left: -19px }

input[type=radio]#button-3:checked~.arrows#arrow-2 { left: -37px }

input[type=radio]#button-5:checked~.arrows#arrow-4 { left: -73px }

input[type=radio]#button-6:checked~.arrows#arrow-5 { left: -130px }

.description {
    position: absolute;
    top: 0;
    left: 0;
    width: 500px;
    font-family: 'Yanone Kaffeesatz';
    z-index: 1000;
}

.description input { visibility: hidden }

.description label {
    font-family: 'WebSymbolsRegular';
    background-color: rgba(255,255,240,1);
    position: relative;
    left: -17px;
    top: 00px;
    width: 40px;
    height: 27px;
    display: inline-block;
    text-align: center;
    padding-top: 7px;
    border-bottom-right-radius: 15px;
    cursor: pointer;
    opacity: 0;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    -o-transition: opacity .2s;
    transition: opacity .2s;
    z-index: 5;
    color: rgb(20,20,20);
}

#slideshow-inner>ul>li:hover .description label { opacity: 1 }

.description input[type=checkbox]:checked~label { opacity: 1 }

.description .description-text {
    background-color: rgba(255,255,230,.5);
    padding-left: 45px;
    padding-top: 25px;
    padding-right: 15px;
    padding-bottom: 15px;
    position: relative;
    top: -35px;
    z-index: 4;
    opacity: 0;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    -o-transition: opacity .2s;
    transition: opacity .2s;
    color: rgb(20,20,20);
}

.description input[type=checkbox]:checked~.description-text { opacity: 1 }



en vous remercient par avance .
bonne journée
Modifié par alexander09 (30 Oct 2020 - 16:42)

Dans Questions générales et questions de débutants · [Résolu] Slide de differente image

il y a 1 j
Top super cela fonctionne !

Au début j'étais parti pour faire comme sur le cours que tu m'as envoyé à savoir, une div pour chaque image + sa description, mais ensuite j'ai compris que ton grid-template-columns: repeat(5,1fr); permettait "d'automatiser" le placement !

Je te remercie de m'avoir éclairé et montré cet outil.

J'ai juste une dernière question, si je peux me permettre, pourquoi cette mise en forme équilibrée ne s'applique pas correctement sur portable ?

upload/1604066834-81497-img1663.jpg

Dans Web Mobile et responsive web design · [Résolu] Mozaique div qui sautent

25 Dernières réponses
Aller à