Ce site est optimisé pour être consulté depuis un navigateur moderne dans lequel JavaScript est activé.

Script pour smartphone

conceptkaraoke

Quelqu'un sait quel est le code à ajouter pour qu'un script ne s'affiche que sur mobile seulement ? (pas sur pc)
Merci

frangin62

conceptkaraoke
Bonjour, de quel type de script s'agit-il, comment sera-t-il installé dans la page. ?
S'il est seul dans un paragraphe, tu relèves la valeur du Signet (le petit ancre) de ce paragraphe (exemple: P06I2Ot9 ) et inclus ce script dans le head de la page.
<style>
@media screen and (min-width: 480px)
{
#P06I2Ot9 {
display: none;
}
}
</style>

j'ai mis 480px mais c'est à voir (chez moi ça fonctionne), et en réduisant à la largeur mini du navigateur, c'est toujours ok.
Tu peux tester, https://cestmesphotos.fr/poubellev11/a-propos-de-nous.html ,il y a un paragraphe en bas dédié au test.

Cdlt
frangin62

conceptkaraoke

Non ça ne doit pas être la solution ça marchevpas
En fait pour moi voici le script qui marche, qui s'affiche sur la page Portable et PC ce qui ne devrait s'afficher que sur portable ! Ce qu'il me faut c'est le script à ajout pour (Sur portable seulement !)

Mon script qui fonctionne !
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lien inscription Flottant</title>
<style>
/* Style pour le lien flottant /
.floating-link {
position: fixed; / Fixe le lien à un endroit précis /
bottom: 150px; / Distance du bas de la page /
right: 10px; / Distance du côté droit /
background-color: #0C1FEA; / Couleur de fond /
color: #FFFFFF; / Couleur du texte /
padding: 10px 11px; / Espacement interne /
border-radius: 10px; / Coins arrondis /
text-decoration: none; / Supprime le soulignement /
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); / Ombre /
transition: background-color 0.3s ease; / Animation au survol */
}

.floating-link:hover {
  background-color: blue; /* Couleur au survol */
}

</style>
</head>
<body>

<a href="sms: 0672766052?&body=Votre prénom %26 titre choisi: " class="floating-link" target="_blank">Choisissez un titre<br><b>>> INSCRIPTION<br> ICI ou à la Régie</a>
</body>
</html>

frangin62

conceptkaraoke c'est pour cela que ton script était nécessaire pour savoir comment faire.
Dans ton script, juste après la balise <style> tu ajoutes mon petit script (sans les balises <style> et </style> et tu remplaces #P06I2Ot9 par body, le début devrait ressembler à ça.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lien inscription Flottant</title>
<style>
@media screen and (min-width: 480px)
{
body {
display: none;
}
}
/* Style pour le lien flottant /
.floating-link {
position: fixed; / Fixe le lien à un endroit précis /
bottom: 150px; / Distance du bas de la page /
...
...
...
</html>

conceptkaraoke

Bonjour
En fait mon script fonctionne parfaitement (mais il est sur portable et aussi sur PC ?)
Ce que je veux, c'est qu'il ne soit plus visible sur PC !
La correction que vous me donnez, il ne fonctionne plus !
Ce que je voudrais, c'est un complément de code pour invisibilité sur les PC
Code. Comme cela existe pour les liens qu'on fait dans le logiciel (portable seulement !)

Là : https://www.concept-karaoke.com/liste.html
visible sur portable ! MAIS ! aussi sur PC ce que je ne veux pas !
Merci pour tout
Denis

frangin62

Bonsoir conceptkaraoke
Ok, avec l'exemple je vois mieux. En fait mon script fonctionne avec une petite mise au point
remplacer body par #floating
@media screen and (min-width: 480px)
{
#floating {
display: none;
}
}

et dans ton script, au début de la balise <a il faut ajouter id="floating" comme ceci

J'ai testé directement dans la console du navigateur sur pc, ça fonctionne. Seulement je ne peux le faire sur portable mais ce sont les mêmes conditions que mon propre test vu plus haut.
On ne peut pas utiliser la méthode de TOWeb car ton script est indépendant.

Cdlt
frangin62

frangin62

Bonjour conceptkaraoke
En regardant de plus près ton exemple, perso, pour faire plus fonctionnel, je mettrais tout ce qui correspond au style (<style>......</style>) dans le HEAD de la page et je ne conserverais que le lien <a id="floating" ..........>....</a> dans le champ HTML.
Toutes les autres balises font double emploi vu que TOWeb les gère déjà
Cdlt
frangin62

conceptkaraoke

Bonjour
Pour moi ce sujet est clos ça ira !
Autre chose ce code erreur à la fermeture Toweb

frangin62

Bonjour conceptkaraoke

conceptkaraoke Pour moi ce sujet est clos ça ira !

Tu abandonnes l'idée ou ça ne fonctionne pas comme tu voudrais ?

J'ai appliqué ton script sur mon site de test et chez moi tout fonctionne.
https://cestmesphotos.fr/poubellev11/a-propos-de-nous.html

conceptkaraoke

frangin62

Moi jai un problème ?
Donne-moi le code complet à mettre dans le champs de texte ?
Merci

conceptkaraoke

Moi c'est ça 🇦 <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lien inscription Flottant</title>
<style>
/* Style pour le lien flottant /
.floating-link {
position: fixed; / Fixe le lien à un endroit précis /
bottom: 150px; / Distance du bas de la page /
right: 10px; / Distance du côté droit /
background-color: #0C1FEA; / Couleur de fond /
color: #FFFFFF; / Couleur du texte /
padding: 10px 11px; / Espacement interne /
border-radius: 10px; / Coins arrondis /
text-decoration: none; / Supprime le soulignement /
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); / Ombre /
transition: background-color 0.3s ease; / Animation au survol */
}

.floating-link:hover {
  background-color: blue; /* Couleur au survol */
}

.auto-style1 {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>

<a href="sms: 0672766052?&body=Votre prénom: et le titre choisi: " class="floating-link" target="_blank">
<span class="auto-style1">Choisissez un titre</span><br class="auto-style1"><b>
<span class="auto-style1">>> INSCRIPTION</span><br class="auto-style1">
<span class="auto-style1">ICI ou à la Régie</span></b></a><b>
</body>
</html>

frangin62

conceptkaraoke

Dans le HEAD de la page (Section <head> et autres balises Meta ....)

<style>
@media screen and (min-width: 480px)
{
   #floating {
      display: none;
  }  
}
/* Style pour le lien flottant*/
.floating-link {
z-index: 1000; /* Toujours au-dessus */
position: fixed; /* Fixe le lien à un endroit précis */
bottom: 150px; /* Distance du bas de la page */
right: 10px; /* Distance du côté droit */
background-color: #0C1FEA; /* Couleur de fond */
color: #FFFFFF; /* Couleur du texte */
padding: 10px 11px; /* Espacement interne */
border-radius: 10px; /* Coins arrondis */
text-decoration: none; /* Supprime le soulignement */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Ombre */
transition: background-color 0.3s ease; /* Animation au survol */
}

.floating-link:hover {
  background-color: blue; /* Couleur au survol */
}
</style>

Dans le champ HTML , (je l'ai appelé %FLOATING% mais tu le nommes comme tu veux)

<a id="floating" href="sms: 0672766052?&body=Votre prénom %26 titre choisi: " class="floating-link" target="_blank">Choisissez un titre<br><b>>> INSCRIPTION<br> ICI ou à la Régie</a>

A part deux modifs, une pour le #floating et une autre pour le maintenir toujours au-dessus des autres éléments éventuels, c'est exactement ce que tu as donné en premier .