Salut, côté serveur c'est bien du PHP.

Dans la fonction searchGroupes appelé par ajax avant d'envoyer le résultat je passe un coups de utf8_encode mais rien ne se passe.

function public searchGroupes()
        [... Requête SQL...]
		$value = array_map('utf8_encode', $tsccod);
		if (empty($tsccod)) {
			echo json_encode(array('label' => 'Inconnue', 'value' => 'Inconnue'));
  	} else {
			echo json_encode($value);
  	}
	}

Et dans les logs apache j'ai :

PHP Warning:  utf8_encode() expects parameter 1 to be string, array given in /var/www/html/plugins/portail/include/portailJquery.php on line 164, referer:  http://.../index.php?static18/portail&p=crm&a=groupes

Et pourtant $tsccod est bien un tableau contenant des valeurs :

Array
(
    [0] => Array
        (
            [tsccod] => 31
            [tscname] => name
            [tscsrc] => Profession
        )
)

Mais dès que j'ajoute le array_map mon tableau est complètement vide

Array
(
    [0] => 
)

Bonjour,
voici mon soucis...qui pour beaucoup d'entre vous sera je pense facile, néanmoins, je galère pas mal après de multiples essais
En faite, j'ai un tableau dont le contenu est généré par une boucle while en PHP. J'aimerai qu'au clique sur une ligne, la ligne change de couleur, et que lorsqu'on clique sur une autre ligne, cela remet la couleur d'origine sur la première cliqué, et change celle de la seconde.

Voici mont bout de code PHP/HTML :

<?php
$i = 0;
while ($donnees_projets = $affiche_projets->fetch()){
?>
<tr id="ligne<?php echo $i; ?>" name="ligne" class="a" onclick="changeclr()">
<?php $i++; ?>

#les cellules de la ligne...

</tr>
<?php
} $affiche_projets->closeCursor(); ?>
<!-- Termine le traitement de la requête -->
</tbody>

et pour le JS :

function changeclr(){
var ligne = document.getElementByTagName('tr');
if(ligne.style.backgroundColor == "#FFFFFF"){
alert('ligne');
}
}


Merci pour votre aide !

Bonjour à vous tous?
Merci à tous et partculièrement à Jean-Pierre et à Strycx pour leur réponses.
J'ai trouvé une solution .
Il fallait chercher du côté de Word "*.doc"
Enregistrer le document Word sous "Autres " et choisir "Pages web filtrée (HTM-HTML)"
Ensuite ouvrir ce document avec Notepad++
Ca marche avec le formatage.
Encore merci à tous
Etienne

Bonjour à tous,

J'ai créé un site sur lequel se trouve une carte avec une icone qui, au survol de celle-ci, indique le titre du lien rattaché à cette icone. En cliquant sur l'icone on accède à une nouvelle page (dans cet exemple, j'ai mis yahoo.fr, mais c'est totalement random).

Voici le code HTML :

			<div class="carte">
				<div class="responsive">
					<img src="img/carte.jpg" class="carte-monde" alt="carte monde en dessin"/>
					<div id="bijagos">
						<a href="www.yahoo.fr" class="lien-bijagos"><img src="img/icone-bijagos.png" id="icone-bijagos" alt="icone placée sur les Bijagos"/></a>
						<p class="texte-bijagos">La géologie des Bijagos</p>
					</div>
				</div>
			</div>

Et le CSS :

#icone-bijagos:hover {
    width:2.2%;
}

p.texte-bijagos {
    position:absolute;
    left:43.5%;
    top:37%;
    opacity:0;
    color: #ff9600;
    font-weight: bold;
    text-shadow: 2px 0 0 white, 0 2px 0 white, 0 -2px 0 white, -2px 0 0 white, 2px 2px 0 white, 2px -2px 0 white, -2px 2px 0 white, -2px -2px 0 white;
}

#bijagos:hover p.texte-bijagos{
    transition-property: opacity;
    transition-duration: 0.2s;
    transition-timing-function:linear;
    opacity: 1;
}

Sur mobile, j'aimerais qu'un "tap" révèle le texte, et qu'un "double-tap" active le lien. On m'a recommandé d'utiliser Hammer.js, mais je n'y connais rien en Javascript.

Voilà ce que j'ai péniblement tenter d'assembler comme code, que j'ai placé ensuite tout en bas de mon head dans le html.

    <script type="text/javascript">
    	var hammer = Hammer($("#icone-bijagos"), {
    		transform_always_block: true,
    		tap_always: false,
    		drag_min_distance: 0
    	});
    	hammer.on("touch tap doubletap", function(event) {
    		iconeAction(event);
    	});
    	var $icone-bijagos = $("#icone-bijagos");
    	var transform = "";
    	var boxShadow = "";
    	var scale = lastScale = 1,
    	positionX = positionY = lastPositionX = lastPositionY = 0,
    	pushed = false,
    	square = false;

    	function iconeAction(event) {
    		switch(event.type) {
    		// au touch (quel que soit l'événement), on initialise les variables
    		case "touch" :
    		lastScale = scale;
			lastPositionX = positionX;
			lastPositionY = positionY;
			break;

			case "tap" :
			txt = "Tap : apparition du texte et desactivation du lien";
			$("p.texte-bijagos").css({'transition-property':'opacity', 'transition-duration':'0.2s', 'transition-timing-function':'linear', 'opacity':'1'});
			$("a.lien-bijagos").css({'pointer-events':'none', 'cursor':'default'});
			break;

			case "doubletap" :
			txt = "DoubleTap : activation du lien";
			$("p.texte-bijagos").css({'opacity':'1'});
			break;}
		}
	</script>

Si quelqu'un a des observations à y apporter, je lui serais très reconnaissante ^^"
Modifié par moussolene (09 Apr 2020 - 14:45)

Bonjour,
tu as un fichier css à part, ou tu inscrit tout le css dans l'html?

Sinon je ne sais pas si tu l'a fait ailleurs mais tu peux essayer ceci dans le fichier css si jamais tu en a un :
@media only screen and (max-width: (LA TAILLE QUE TU VEUX)px)
{
//Ton code exclusivement pour les écrans de moins de (LA TAILLE QUE TU VEUX)
}

PS: pour forcer une largeur par exemple d'une div qui se situ dans un element, tu peux directement mettre "!important" après ta largeur...exemple :
width: 500px!important;

ou indiquer le chemin complet, en partant de l élément parent jusqu'a ta div, et là, pas besoin de mettre "!important"

en espérant que ça puisse aider
Modifié par melER5 (09 Apr 2020 - 14:43)

Merci bien cher.
Ta réponse est vraiment satisfaisante.
J'essayerai de m'y appliquer. Merci encore.

Bonjour Inferno,

Merci de ne pas doubler les sujets identiques sur le forum. Ça ne sert à rien. Le sujet le plus récent a été supprimé.

Si tu as du mal à retrouver ton sujet, tu as un bouton (vers le haut de la page de l'index des forums) "mes discussions". Sinon, tu peux accéder à tes discussions via cette url : https://forum.alsacreations.com/forum.php?filter=mylastposts

Aussi, je t'invite à lire l'aide du forum qui est ici (notamment la section forum): aide

D'autre part, j'ai déplacé ton sujet dans le forum javascript puisqu'apparemment, tu veux traiter ton souci côté navigateur.

Par aileurs, je regarderai en fin de journée (si j'arrive à trouver du temps) ton problème si je vois pas de réponse d'un autre membre.

ps : Ce message a été également envoyé par mp.
Modifié par niuxe (09 Apr 2020 - 13:16)

Alors là ...
Aucune idée !

Si quelqu'un d'autre passe par ici HELP

Hello,

bah c'est pas mal du tout ^tu as bien avancé !!

Pour le placement de "TEST", plutôt que ça:

#productOne , #productTwo {
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: -100vh;
  left: 0;
  overflow: hidden;
}

Tu peux essayer ceci: ( y'a surement plus simple mais bon )

.productInfo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

Bonjour,

Alors voilà je rencontre des soucis quant à l'aspect responsive de mes "tableaux". J'ai créé des div qui contiennent des images ainsi que des textes qui sont disposés sur les côtés droits des images, sauf que je n'arrive pas à rendre cela responsive.. lorsque je le rentre sur Email On Acid pour le tester sur tous les formats, ça ne fonctionne pas comme je le souhaite. Cela dépasse totalement du cadre voulu. Je ne sais pas d'où vient le problème.. Mon cadre de base qui contient le code est un tableau de 650px maximum, je n'ai aucun souci pour faire rentrer du texte en dehors du code collé en dessous, tout le reste est responsive, à part le code que je vous donne. Je ne sais pas quoi faire. Il y a-t-il du code à rajouter pour qu'il s'adapte à l'écran ?

Voici mon code :

<div style="background-color: #1177bc; width:650px; margin:0px auto; max-width:650px; padding-top:20px; padding-bottom: 20px ">
<div style="float:left">
  <img src="images-comp/coins.png" alt="" border="0" width="100" height="100" style="display:block; padding: 0px 30px 30px 30px; margin-top:10px; "  /></div>
<div style="background-color: #1177bc; float:left; font-family: Helvetica, arial, sans-serif; font-size: 21px; color: white; text-align:justify; line-height: 24px; font-weight: bold; background-color: #eb212d; padding-top: 5px; padding-bottom: 5px; padding-left: 10px; padding-right: 30px; max-width:500px">Mon texte</div>


<br><br>

<p style="max-width:550px; background-color: #1177bc; font-family: Helvetica, arial, sans-serif; font-size: 18px; color: white; text-align:justify; line-height: 24px; padding-left: 10px; padding-right: 10px;" >Petit texte à entrer ici </p>

                   </div>

Qui est censé donner ceci :



Mon but est simplement de ne pas faire dépasser le texte hors du cadre..
Modifié par Ellydia (09 Apr 2020 - 11:47)

Yordi a écrit :
Je l'ai utilisé il y a quelques années pour faire un présentation iPad qui fonctionnait du tonnere.
L'idée était d'avoir cette structure:

<main>
	<section>
		<article></article>
	</section>
</main>

A savoir que les &lt;section&gt; faisait des columns (et par la même occasion, nos chapitres de présentation), et les articles une pleine page (100vw/100vh). Ensuite j'utilisais hammer pour trigger les swipe utilisateurs et gérer l'affichage des écrans en faisant un translate sur mon main. Dans mon souvenir, bonne librairie, facile, bonne doc et assez puissant avec les method exposée pour s'en sortir facilement

Merci pour la réponse. Je vois sur la doc qu'on peut faire pas mal de choses avec (déplacer des images, par exemple).

niuxe a écrit :


C'est quoi ton erreur ?

Ça m'est arrivé quelques fois de l'utiliser et je n'ai pas eu quelconque problème pour mettre en place les event que j'avais à faire. C'est une librairie parmi tant d'autres. Donc un outil qui répond à des besoins.

Bonjour,
je n'étais pas parti pour corriger ce petit script, auquel je ne pensais plus, mais puisque tu me demandes, le voici :

<script>
var event = new MouseEvent('mouseover', {
  'view': window,
  'bubbles': true,
  'cancelable': true
});
element.dispatchEvent(event);
</script>

Il est placé tout en bas de chaque page html.
Je suis peu compétant en js et je profite du confinement pour reprendre à zéro les cours de Pierre Giraud.

Hello,
J'avais écrit ce message fin semaine passée mais je vois que d'autres réponses sont arrivées entre temps. J'ai du interrompre ce message pour partir à l'hopital et voir l'arrivée de notre petite fille Elisabeth
Bref, nous sommes rentré, tout va bien et je te poste quand même le message même si je vois que ça a bien évolué


---


Hello Papy,

Sorry, pas mal de boulot de mon coté, on a la chance de pouvoir faire du télétravail (2 jours par semaine généralement et en ce moment, tous les jours évidement) donc je ne vois pas toujours tout sur le forum…
Voici le code qui est indispensable pour ton besoin, essaye dans un premier temps de nettoyer ton code actuel pour adapté ce code dedans :

main{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header{
  flex-grow: 0 0 auto;
}

figcaption{
  flex-grow: 0 0 auto;
}

figure{
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
}

img{
  flex: 1 0 0;
  min-height: 1px;
  object-fit: contain;
}

Ce que ça fait :
1/ <main> va prendre toute la hauteur
2/ <header> et <figpation> vont prendre le minimum d'espace requis pour eux (flex-grow: 0)
3/ <figure> va prendre l'espace disponible jusqu'en bas (flex-grow: 1)
4/ On applique un display flex sur <figure> pour que son enfant puisse profité des propriété flex
5/ On dit à <img> de remplir l'espace mais en affichant son entièreté même si il doit y avoir du blanc (soit haut/bas, soit gauche/droite ? object-fit: contain)
5/ On dit à l'<img> de prendre tout l'espace aussi (flex-grow: 1) qu'elle s'étire dans son parent
6/ Le trick ici est d'appliquer un min-height à l'image pour qu'elle puisse être plus petite que sa taille normal (étant donné que en flex, les min)

Merci à tous les 3, vous me rassurez

@Jean-Pierre-Bruneau Le site est en ligne depuis 5 ans et je suis inscrit depuis quelques temps sur les consoles webmasters.
Obligé d'utiliser la balise canonical ?

J'ai pas compris cette phrase SURTOUT inscrit ton sites au moteur de recherche perso à TON SITE !!

Je l'ai utilisé il y a quelques années pour faire un présentation iPad qui fonctionnait du tonnere.
L'idée était d'avoir cette structure:

<main>
	<section>
		<article></article>
	</section>
</main>

A savoir que les <section> faisait des columns (et par la même occasion, nos chapitres de présentation), et les articles une pleine page (100vw/100vh). Ensuite j'utilisais hammer pour trigger les swipe utilisateurs et gérer l'affichage des écrans en faisant un translate sur mon main. Dans mon souvenir, bonne librairie, facile, bonne doc et assez puissant avec les method exposée pour s'en sortir facilement

Bonjour,

Je pense que l'idéal serait de passer par un CMS comme Wordpress qui me semble être un des plus simple mais tous dépend de la complexité du site et de l'admin que vous devrez avoir. Ainsi que vos connaissances en dev.
Vous pouvez aussi passer par du custom avec un backoffice que vous créez entièrement avec un framework comme Angular, React ou encore Vue et une api. Mais ça va vous prendre beaucoup de temps.

Si ce n'est "que" pour changer des images et du texte, un wordpress fera l'affaire

Bien à vous
Modifié par Gus (09 Apr 2020 - 14:55)

Résumé :

Je n'arrivais pas à :
--> Créer une "page-pop-up" qui s'affiche quand on clic sur un bouton.
--> Ensuite correctement afficher mes éléments sur cette "page-pop-up" (le texte/tout était invisible je ne comprenais pas pourquoi !).
--> Enfin, comment correctement animer les éléments quand la "page-pop-up" apparait !

Le résultat (c'est un test bien sûr !) :
https://deadlycavernousparameters.legendary4226.repl.co/

Il manque encore, pour que le site soit joli, des :hover sur les éléments etc...

Bonjour les gars. J'ai mon site web fait entièrement sous bootstrap. Le soucis est que j'ai vraiment besoin de le connecter à un espace administrateur (modifier textes, images...) vu que mon client ne sait pas coder. Et je ne sais comment m'y prendre.
Aidez-moi svp,!

Oui pour l'avoir fait souvent cela ne changes rien, si tu as inscrit ton/tes sites aux outils webmaster Google.
Si tu n' y est pas attends de faire ton changement et fait

1) fait ton sitemap.xml sert toi de cet outils
www.xml-sitemaps.com (le mieux accepté par google et gratuit)
2) Mets bien dans toute tes pages

<link rel="canonical" href="http://www.fox-infographie.com/fr_fi_blog.php" />

donc avec tes noms PHP aucun doublon le nom réel de chaque page !!!
(même régle pour les <TITLE>
3) ne touches pas au .htaccess ni robots.txt
4) alors inscrit toi sur les outils webmaster (a moins que ce ne soit déjà fait. https://www.google.fr/intl/fr/webmasters/#?modal_active=none
(clic le bouton vert !)
Mais de toute façon
1) redonnes lui ton sitemap.xml il sera référencé en deux jours
2) SURTOUT inscrit ton sites au moteur de recherche perso à TON SITE !!
car il aura remis tout les noms en index PHP en moins de 15 jours.
Modifié par Jean-Pierre-Bruneau (09 Apr 2020 - 01:57)

joycin a écrit :

En fait, le texte annoté à la main j'ai réussi à le baliser avec &lt;mark&gt; sur chaque bloc, mais pour le second texte :
- Je dois partir du texte brut.
- Celui-ci sera ensuite annoté par la machine (donc avec les crochets [ ] qu'on peut voir).
- Enfin, (c'est là où je bloque) j'aimerai le baliser &lt;mark&gt; aux mêmes endroits que le premier texte pour faire correspondre les blocs.

Désolée si je m'exprime mal ! Mais je sais pas si j'ai mal commencé mon raisonnement ou bien si le problème d'algo est tout simple.

Je comprends trop le contexte. Il faudrait que tu édites ton code sur le forum. Si j'ai bien saisi, tu vas éditer un texte à la main et dans un bloc, tu as du texte. Ce texte que tu as édité devrait faire correspondre au texte "témoin" (déjà saisi). Le problème étant que dans un textearea tu ne peux pas insérer des balises html (avec le rendu). Par contre dans un element html, tu peux éditer du texte.

Bongota a écrit :
Je l'ai testé mon code js, mais une erreur que je ne sais pas interpréter a été annoncée... Puisque ça fonctionne, je ne suis pas allé plus loin.
J'ai lu les docs sur hammerjs, ma question était plutôt est-ce que les développeurs utilisent cette librairie ? Est-elle pertinente ? Sur le forum de Stack Overflow, beaucoup de problèmes sont annoncés.
Et je n'en entend pas beaucoup parler ici. C'est utile de l'implanter, ou inutile, ou superflu ?

C'est quoi ton erreur ?

Ça m'est arrivé quelques fois de l'utiliser et je n'ai pas eu quelconque problème pour mettre en place les event que j'avais à faire. C'est une librairie parmi tant d'autres. Donc un outil qui répond à des besoins.
Modifié par niuxe (09 Apr 2020 - 00:48)

Et l'eau,

tant que tu ne changes pas le titre de tes pages et tes liens, il y a pas de souci.

salut,
tu peux utiliser l'URL rewriting

Mon formulaire ressemble a ça:

<form action="/ma-page-de-traitement" method="post">
<div>
<label for="name">Nom :</label>
<input type="text" id="name" name="user_name">
</div>
<div>
<label for="mail">e-mail?:</label>
<input type="email" id="mail" name="user_mail">
</div>
<div>
<label for="msg">Message :</label>
<textarea id="msg" name="user_message"></textarea>
</div>
<div class="button">
<button type="submit">Envoyer le message</button>
</div>
</form>

C'est bizarre ça me rajoute une barre sur mon formulaire.