Header
Partagez | 

[FA] Une parade aux iframes

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 113
Voir le profil de l'utilisateur

Message Sujet: [FA] Une parade aux iframes   Dim 6 Mar - 9:41

Coucou toi !

Ne nous mentons pas, nous nous servons sans cesse des iframes sur nos forums. Pourquoi ? Tout simplement pour éviter de toucher aux templates sans arrêt et permettre à tous nos admins de faire des modifications. Cependant, les iframes ont leur limite: bloquées par les bloqueur de pub, parfois coupées si elles sont plus grandes que les dimensions indiquées.

Nous allons voir dans ce tutoriel une petite astuce, une parade aux iframes. L'idée va être la suivante: je code ce que je veux dans une page HTML de mon forum, puis, grâce à du javascript, je vais intégrer ce code dans ma page. Le gros avantage c'est que le navigateur fera comme si ton code avait toujours fait partie de la page HTML, du coup, il prendra même en compte la CSS du forum ^^

Idea Pré-requis :
• être admin ;
• avoir accès aux templates du forum ;
• avoir des notions de CSS et HTML.

Ce tutoriel va se diviser en 3 étapes et, tu vas voir, ce n'est vraiment pas compliqué.

Étape 1: le code HTML

J'ai décidé de faire 2 blocs:
• Un bloc pour mes partenaires :
Spoiler:
 
• Un bloc pour mon recrutement
Spoiler:
 

Je vais aller mettre chacun de ces codes dans une page HTML de mon forum (Panneau d'admin > Modules > HTML & Javascript > Gestion des pages HTML) et je vais bien retenir les 2 numéros de page :
Spoiler:
 
• Pour les Partenaires: /h5-l
• Pour le recrutement: /h1-l

Idea C'est surtout le h*- qui est important ^^ Ensuite, tu peux mettre ce que tu veux Smile

Étape 2: ajout dans le template

Maintenant on va devoir préparer une balises qui va recevoir nos codes. Personnellement, je veux que mes partenaires et les infos sur le recrutement soient affichés dans le footer sur toutes mes pages mais avant les liens par défaut de FA.
Spoiler:
 

Je vais donc aller modifier le template “overall_footer_begin” (Panneau d'admin > Affichage > Templates > Général) et avant :
Code:
<div id="page-footer">
Je vais coller ma structure et 2 balises avec un id spécifique :
Code:
<footer id="footer" class="table">
  <section class="table-cell">
    <div id="footer-partenaires"> </div>
  </section>
  <section class="sep"> </section>
  <section class="table-cell">
    <div id="footer-recrutement">&nbsp;</div>
  </section>
</footer>
id="footer-partenaires" recevra le code de mes partenaires ;
id="footer-recrutement" recevra le code de mon recrutement.

Je valide et je publie.

Si on s'arrête là, rien ne se passe sur le forum.

Étape 3: injection grâce au js

On va maintenant ajouter le code HTML définis en (1) dans mes balises “réceptacles” grâce à du javascript. Pour cela, on va utiliser une fonction disponible dans la bibliothèque Jquery: load(). Cette fonction va aller charger une page HTML (ou une partie de page) dans une balise spécifique. Voilà comment elle se présente :
Code:
 $('#receptacle').load('page-a-charger.html');

Idea Si tu veux récupérer une partie spécifique de ta page, il te suffit de la cibler grâce à la CSS ; ton code deviendra donc :
Code:
 $('#receptacle').load('page-a-charger.html #bloc-a-recuperer');

Du coup, ici, pour mes 2 blocs j'aurai :
Code:
$('#footer-partenaires').load('/h5-l');
  $('#footer-recrutement').load('/h1-l');

Je vais ensuite appeler ces 2 fonctions une fois ma page chargée, ce qui donne :
Code:
$(document).ready(function(){
  $('#footer-partenaires').load('/h5-l');
  $('#footer-recrutement').load('/h1-l');
});

Il ne me reste plus qu'à ajouter ce code dans les javascript de mon forum (Panneau d'admin > Modules > HTML & Javascript > Gestion des code Javascript) et à l'afficher sur toutes les pages :
Spoiler:
 

Et pouf ! Le tour est joué :
image tuto

Remarques

Sur les vieux forums, il peut arriver qu'il y ait des soucis liés à l'encodage du forum. Dans ce cas, malheureusement, il va falloir utiliser les codes html pour les caractères spéciaux. Voici les principaux :
Code:

é = &*eacute;
è = &*egrave;
ê = &*ecirc;
à = &*agrave;
â = &*acirc;
ù = &*ugrave;
ç = &*ccedil;

Idea Pense à retirer les *.

Si tu as besoin d'autres caractères, n'hésite pas à jeter un oeil à ce référentiel : clic.




Eh voilà ! C'est terminé !

Tu rencontres un souci avec ce tutoriel ? Viens poser ta ou tes questions [ici]

Idea N'oublie pas de lire et de suivre les règles de la section



Je soussignée, Miettes,  accepte qu'un directeur reposte le tutoriel "[FA] Une parade aux iframes" tel que je l'ai rédigé.
Revenir en haut Aller en bas
[FA] Une parade aux iframes
Page 1 sur 1
 Sujets similaires
-
» [TOUTES VERSIONS] Toutes versions Bouton générateur d'iframes
» La 500 Riva parade dans la capitale française avec l'édition limitée « Tender to Paris »
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+