Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Barre de recherche avec ID du sujet

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Barre de recherche avec ID du sujet

Message par Mat Sam 1 Aoû 2020 - 18:54

Bonsoir, Visage souriant

Dans le cadre d'un projet, je souhaiterais créer une page HTML avec pour seul contenu une barre de recherche qui, en entrant l'ID d'un sujet, nous redirigerait sur celui-ci.
Je n'arrive malheureusement pas à réaliser ceci mais je suppose qu'il faudrait que l'ID entré dans la barre s'ajoute entre le /t et le - qui correspond à n'importe quel sujet.

Merci pour votre aide ^^
Mat

Mat
Membre habitué

Masculin
Messages : 1356
Inscrit(e) le : 05/09/2015

Voir le profil de l'utilisateur http://www.dixily.fr
Mat a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de recherche avec ID du sujet

Message par Mat Dim 2 Aoû 2020 - 19:13

Et un up Visage souriant
Mat

Mat
Membre habitué

Masculin
Messages : 1356
Inscrit(e) le : 05/09/2015

Voir le profil de l'utilisateur http://www.dixily.fr
Mat a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Barre de recherche avec ID du sujet

Message par Milouze14 Lun 3 Aoû 2020 - 8:51

Hello Mat,
alors c'est assez complexe de lancer une recherche avec comme seule valeur l'id du sujet car il faudrait rechercher sur l'ensemble du forum touts les sujets est pratiquement impossible (pour récupérer le titre et le lien dans sa totalité).

Par contre en se servant de:
Code:
/t+ l 'id du sujet+ le tiret

On obtient ce que tu souhaites,
J'ai créé une page HTML:(Merci Arnaud pour la correction Wink ).

Le fonctionnement est assez sommaire mais fonctionnel.

Cette page HTML sans haut de page va rechercher le texte, le lien , l'auteur du sujet et dans quel forum:
Au clic , tu arriveras sur le premier message du sujet.
Un message "Aucun sujet trouvé" fera sont apparition un court instant si le lien est valide,
dans le cas contraire, ce dernier restera.

Modules/HTML & JAVASCRIPT/Gestion des pages HTML/Création en mode avancé (HTML)

Titre * : Mettre un titre
Voulez-vous utiliser le haut et le bas de page de votre forum ? Cocher Non

Déposes ceci:


Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Page de recherche de sujet par ID</title>  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

    <style type="text/css">
body
{
background:#333333;      
}
#M14_seach_topic
{
margin-top:60px;
height:auto;
width:80%;
margin-left:10%;
border:2px solid #333;
padding: 10px;
}
.Reset{display:none;text-align:center;padding:2px;cursor:pointer;margin-top:30px;height:20px;line-height:20px;background-color:white;color:darkred;width: 15%;border-radius: 6px;}
.Import_liste{margin-top:30px;height:40px;line-height:40px;background-color:white;color:green;padding: 0px 5px 5px 20px;}
.Import_liste a[href^="/t"] {color:darkgreen !important;text-decoration:none;}
.M14_go{color:green;cursor:pointer;}
.M14_recherche_titre
{
position:fixed;
height:40px;
line-height:40px;
top:0px;
right:0px;
left:0px;
text-align:center;
background-color:white;
color:#666666;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.M14_author{float:right;color:green;margin-right:30px;}
.M14_erreur{color:darkred;font-weight:bold;}
.M14_titre_span{margin-left:10px;}
.M14_titre_span span{color:darkred;}
 
 
    </style>
 
  </head>

      <body><div class="M14_recherche_titre">Barre de recherche de sujet avec son ID <span class="M14_titre_span">:<span></span></span></div>
 <form id="M14_seach_topic"class="color-secondary">
  <div class="Reset">Effacer la recherche</div> <br />
<input id="M14_search_input" type="number" min="1" value="" placeholder=" Numéro du sujet" required />
  <input class="M14_go" type="submit" value="Lancer la recherche" title="Lancer la recherche"/>
<br />
 
  <div class="Import_liste">Aucune recherche actuellement</div>
   <br /> <br />
    
<script type="text/javascript">
$(function(){
$('form[id="M14_seach_topic"]').on('submit',function(ev){ev.preventDefault();
var value=$('input[id="M14_search_input"]').val();
var a="/t";
var b="-";
var result=a+value+b;
if (value.value!= '')
{
$('.M14_titre_span span').text(' ( '+value+' )');  
$('.Reset').show();
$.get(result , function(data){
     $(data).find('main[id="topic"]').each(function(){    
 
     var href=$(this).find('.post-heading-wrap:first a[href^="/t"]').attr('href');
     var texte=$(this).find('.post-heading-wrap:first a[href^="/t"]').text();
     var auteur=$(this).find('.post-author-name:first a[href^="/u"]').text();
     var fofo=$(this).find('div[id="breadcrumbs"]').find('a.nav:last[href^="/f"]').text();
 

$('.Import_liste').html('<a href="'+href+'" target="_blank">'+texte+'</a> <span class="M14_author">Posté par   '+auteur+' dans le forum: '+fofo+'</span>');

});});
  $('.Import_liste').html('<span class="M14_erreur">Aucun sujet trouvé</span>');
}
});
$('.Reset').click(function(){
$(this).hide();
$('.M14_titre_span span').text('');
$('.Import_liste').html('Nouvelle recherche');
$('input[id="M14_search_input"]').val('');
  });
});
</script>
      </body>

</html>

Et voilou.
Edit, on peut même importer, le premier contenu du message  Wink .


a++
Milouze14

Milouze14
Membre actif

Masculin
Messages : 6558
Inscrit(e) le : 18/04/2005

Voir le profil de l'utilisateur https://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de recherche avec ID du sujet

Message par Mat Jeu 6 Aoû 2020 - 21:42

Bonsoir Milouze,

A la base, j'avais en tête comme idée de bêtement rediriger vers le sujet en question mais ce que tu as réalisé est mieux au final Visage souriant
Je viens de tester et ça à l'air de fonctionner. Je vais m'occuper du CSS et je reviens ici si besoin ^^

Un grand merci Milouze Visage souriant
Mat

Mat
Membre habitué

Masculin
Messages : 1356
Inscrit(e) le : 05/09/2015

Voir le profil de l'utilisateur http://www.dixily.fr
Mat a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de recherche avec ID du sujet

Message par Milouze14 Ven 7 Aoû 2020 - 4:39

Hello Mat,
de rien cher ami.
En cas ou tu désirerais avoir avoir le contenu du premier message:
La C.S.S ( qui j'avoue est très très basique voir même moche Sourire2 )
est commentée si besoin.


Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Page de recherche de sujet par ID</title> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

    <style type="text/css">
/*LA COULEUR DE FOND DE PAGE*/
body{background:#333333;}
      /*LE BLOC DE RECHERCHE*/     
#M14_seach_topic
{
margin-top:60px;
height:auto;
width:80%;
margin-left:10%;
border:2px solid #333;
padding: 10px;
}
/* ON DONNE UNE OPACITY A ZERO POUR LES ELEMENTS NON ESSENTIELS*/
.Reset,.Import_message_apercu,.Import_message
{opacity:0;transition: opacity 0.5s ease-in;} 
/*LE BOUTON EFFACER LA RECHERCHE*/   
.Reset{text-align:center;padding:2px;cursor:pointer;margin-top:30px;height:20px;line-height:20px;background-color:white;color:darkred;width: 15%;border-radius: 6px;}
/*LA ZONE QUI RECOIT LE SUJET*/     
.Import_liste{margin-top:30px;height:40px;line-height:40px;background-color:white;color:green;padding: 0px 5px 5px 20px;}
/*LE LIEN DE LA ZONE QUI RECOIT LE SUJET*/   
.Import_liste a[href^="/t"] {color:darkgreen !important;text-decoration:none;}
/*LA ZONE QUI RECOIT LE MESSAGE*/   
.Import_message{border:2px solid #333333;min-height:40px;max-height:350px;overflow-y:auto;background-color:white;color:black;padding: 5px 5px 5px 20px;}
/*LA ZONE DE L APERCU*/
.Import_message_apercu{color:white;text-align:center;height:40px;line-height:40px;}
/*LE BOUTON LANCER LA RECHERCHE*/
.M14_go{color:green;cursor:pointer;}
/*LA ZONE EN HAUT DE PAGE*/     
.M14_recherche_titre
{
position:fixed;
height:40px;
line-height:40px;
top:0px;
right:0px;
left:0px;
text-align:center;
background-color:white;
color:#666666;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.M14_titre_span{margin-left:10px;}
.M14_titre_span span{color:darkred;font-weight:bold;}
 
      /*L AUTEUR DU SUJET*/     
.M14_author{float:right;color:green;margin-right:30px;}
      /*LA PAGE D ERREUR*/
.M14_erreur{color:darkred;font-weight:bold;}

 
 
    </style>
 
  </head>

  <body>
<div class="M14_recherche_titre">Barre de recherche de sujet avec son ID :<span class="M14_titre_span"><span></span></span></div>
<form id="M14_seach_topic"class="color-secondary">
<div class="Reset">Effacer la recherche</div> <br />
<input id="M14_search_input" type="number" min="1" value="" placeholder=" Numéro du sujet" required />
<input class="M14_go" type="submit" value="Lancer la recherche" title="Lancer la recherche"/>
<br />
<div class="Import_liste">Zone de recherche...</div>
<br /> <br />
<div class="Import_message_apercu">Aperçu du sujet:<span></span></div>
<div class="Import_message"></div>
<script type="text/javascript">
$(function(){
$('form[id="M14_seach_topic"]').on('submit',function(ev){ev.preventDefault();
var value=$('input[id="M14_search_input"]').val();
var a="/t";
var b="-";
var result=a+value+b;
if (value.value!= '')
{
$('.M14_titre_span span').text(value); 
$('.Reset').css('opacity','1');
$.get(result , function(data){
    $(data).find('main[id="topic"]').each(function(){   
    var href=$(this).find('.post-heading-wrap:first a[href^="/t"]').attr('href');
    var texte=$(this).find('.post-heading-wrap:first a[href^="/t"]').text();
    var auteur=$(this).find('.post-author-name:first a[href^="/u"]').text();
    var fofo=$(this).find('div[id="breadcrumbs"]').find('a.nav:last[href^="/f"]').text();
    var message=$(this).find('div.post-content:first').html();
$('.Import_liste').html('<a href="'+href+'" target="_blank">'+texte+'</a> <span class="M14_author">Posté par  '+auteur+' dans le forum: '+fofo+'</span>');
$('.Import_message_titre').fadeIn().find('span').text(texte);
$('.Import_message_apercu').css('opacity','1'); 
$('.Import_message').css('opacity','1').html(''+message+'<br /><br />');

});
});

$('.Import_liste').html('<span class="M14_erreur">Aucun sujet trouvé!!!</span>'); 
var o=$('.M14_erreur').length;if(o){$('div[class^="Import_message"]').css('opacity','0');}
}
});
$('.Reset').click(function(){
$(this).css('opacity','0');
$('.M14_recherche_titre i').text('');
$('.Import_message_apercu').css('opacity','0'); 
$('.M14_titre_span span').text('');
$('.Import_message').css('opacity','0')
$('.Import_liste').html('Nouvelle recherche');
$('input[id="M14_search_input"]').val('');
  });

});
</script>
</body>

</html>

Pour information, je serais absent jusqu'à Dimanche.


a++
Milouze14

Milouze14
Membre actif

Masculin
Messages : 6558
Inscrit(e) le : 18/04/2005

Voir le profil de l'utilisateur https://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de recherche avec ID du sujet

Message par Chacha Mer 12 Aoû 2020 - 9:22

Barre de recherche avec ID du sujet UmaslZ4Bonjour,

Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message.

Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »
Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 65190
Inscrit(e) le : 21/08/2010

Voir le profil de l'utilisateur https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de recherche avec ID du sujet

Message par Mat Mer 12 Aoû 2020 - 13:30

Hey ^^

Je suis toujours entrain de refaire le CSS mais pour l'instant je n'ai pas eu le temps de finir ^^
Ce sujet n'est donc pas encore résolu Visage souriant
Mat

Mat
Membre habitué

Masculin
Messages : 1356
Inscrit(e) le : 05/09/2015

Voir le profil de l'utilisateur http://www.dixily.fr
Mat a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de recherche avec ID du sujet

Message par Mat Dim 16 Aoû 2020 - 11:21

Bonjour,

Je n'arrive pas à appliquer le CSS que je voudrais sur ce bouton :
Barre de recherche avec ID du sujet Bouton10

Code:
.M14_go {
    background-color: #d12e2e;
    border-radius: 8px;
    box-shadow: none;
    color: #fff!important;
    display: inline-block;
    font-family: Roboto, sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    overflow: hidden;
    padding: 9px 18px;
    position: relative;
    text-decoration: none;
    vertical-align: middle;
    width: auto!important;
    margin: 5px 2px 5px 2px;
}

Le bouton garde certaines propriétés graphique qu'il avait de base.
Barre de recherche avec ID du sujet Bouton11
Mat

Mat
Membre habitué

Masculin
Messages : 1356
Inscrit(e) le : 05/09/2015

Voir le profil de l'utilisateur http://www.dixily.fr
Mat a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Barre de recherche avec ID du sujet

Message par Milouze14 Dim 16 Aoû 2020 - 18:09

Hello Mat,
tu peux me donner le lien de ta page sous balises hide stp:

a++
Milouze14

Milouze14
Membre actif

Masculin
Messages : 6558
Inscrit(e) le : 18/04/2005

Voir le profil de l'utilisateur https://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de recherche avec ID du sujet

Message par Mat Dim 16 Aoû 2020 - 18:14

Bonjour Milouze,

Voici :
Mat

Mat
Membre habitué

Masculin
Messages : 1356
Inscrit(e) le : 05/09/2015

Voir le profil de l'utilisateur http://www.dixily.fr
Mat a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de recherche avec ID du sujet

Message par Milouze14 Dim 16 Aoû 2020 - 18:16

Re,
merci et tu veux quoi d'autres stp?

Si c'est la bordure, ajoutes ce style:
Code:
border: none !important;

a++
Milouze14

Milouze14
Membre actif

Masculin
Messages : 6558
Inscrit(e) le : 18/04/2005

Voir le profil de l'utilisateur https://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Barre de recherche avec ID du sujet

Message par Mat Dim 16 Aoû 2020 - 18:42

Merci Milouze, je n'avais pas pensé à ajouter cette propriété (!important).
Je pense que c'est bon, pour le reste je pense pouvoir me débrouiller (je pensais avoir plus difficile que ça Visage souriant)
Merci à toi pour ton aide ^^
Mat

Mat
Membre habitué

Masculin
Messages : 1356
Inscrit(e) le : 05/09/2015

Voir le profil de l'utilisateur http://www.dixily.fr
Mat a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Barre de recherche avec ID du sujet

Message par Milouze14 Dim 16 Aoû 2020 - 18:47

De rien Mat Wink .

a++
Milouze14

Milouze14
Membre actif

Masculin
Messages : 6558
Inscrit(e) le : 18/04/2005

Voir le profil de l'utilisateur https://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum