Partagez | 
 

 [Xooit] Une parade aux iframes

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

Miettes

Doyenne

Bons Points (BP) : 113
MessageSujet: [Xooit] Une parade aux iframes   Dim 6 Mar - 9:42
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 (même les moins à l'aise avec le code) 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 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 un portail que je ne vais utiliser qu'à cet effet. Pour cela, je vais aller dans Panneau d'admin > Portail > Gérer les pages. Je vais créer une nouvelle page (moi j'ai décidé de l'appeler "recup info js").
Spoiler:
 

On va ensuite aller dans Gérer et on va créer 2 nouveaux modules ("créer un module") :
Spoiler:
 

Idea Ici, on va mettre notre code HTML en place en cliquant ici :
Spoiler:
 

Et pour pouvoir cibler mes blocs, je vais les entourer d'une balise avec un id :
• Pour les partenaires, j'aurai donc :
Code:

<section id="content-partenaires"><img src="http://pvereecken.fr/lpf/partenariat.png" alt="Partenariats" />
<section class="logos">
   <a href="http://www.school-of-progress.fr/" target="_blank"><img src="http://site.school-of-progress.fr/images/logo.png" alt="Mini-bannière de School Of Pub, forum d'entraide pour forums" title="School Of Pub, forum d'entraide pour forums... Formations, tutoriels, exercices, animations.. Tout pour vous faire progresser en vous amusant !" /></a>
   <a href="http://www.school-of-progress.fr/" target="_blank"><img src="http://site.school-of-progress.fr/images/logo.png" alt="Mini-bannière de School Of Pub, forum d'entraide pour forums" title="School Of Pub, forum d'entraide pour forums... Formations, tutoriels, exercices, animations.. Tout pour vous faire progresser en vous amusant !" /></a>
   <a href="http://www.school-of-progress.fr/" target="_blank"><img src="http://site.school-of-progress.fr/images/logo.png" alt="Mini-bannière de School Of Pub, forum d'entraide pour forums" title="School Of Pub, forum d'entraide pour forums... Formations, tutoriels, exercices, animations.. Tout pour vous faire progresser en vous amusant !" /></a>
</section></section>

• Pour le recrutement, j'aurai donc :
Code:

<section id="content-recrutement"><img src="http://pvereecken.fr/lpf/recrutement.png" alt="Recrutement" />
<article id="recrutement">
   <p>éàè BlablablablablablablablablablablablablablaBlablablablablablablablablablablablablablaBlablablablablablablablablablablablablablaBlablablablablablablablablablablablablablaBlablablablablablablablablablablablablablaBlablablablablablablablablablablablablablaBlablablablablablablablablablablablablablaBlablablablablablablablablablablablablabla</p>
   <div class="deco"> </div>
</article></section>


Idea Moi j'ai choisi de placer ces 2 blocs en haut du portail. Mais cette information n'a pas trop d'importance Wink

On valide et on retient le numéro du portail :
Spoiler:
 

Étape 2: ajout dans le template

Maintenant on va devoir préparer une balise 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 Xooit.
Spoiler:
 

Je vais donc aller modifier le template “overall_footer” (Panneau d'admin > Thème > Modifier les templates) et tout au début de ce code, 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.

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 reste dans notre template “overall_footer”. Juste avant la balise :
Code:
</body>

On va appeler la bibliothèque jQuery qui nous sera utile pour la suite :
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

Ensuite, on va utiliser une fonction disponible dans cette bibliothèque : 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');
et moi, comme je veux une partie spécifique, j'aurai plutôt ceci :
Code:
 $('#receptacle').load('page-a-charger.html #bloc-a-recuperer');

Du coup, ici, pour mes 2 blocs j'aurai :
Code:
$('#footer-partenaires').load('/portal.php?pid=3 #content-partenaires');
$('#footer-recrutement').load('/portal.php?pid=3 #content-recrutement'); 

Idea Ici, le pid correspond au numéro de ton portail Wink

Je vais ensuite appeler ces 2 fonctions une fois ma page chargée, ce qui donne :
Code:
$(document).ready(function(){
   $('#footer-partenaires').load('/portal.php?pid=3 #content-partenaires');
   $('#footer-recrutement').load('/portal.php?pid=3 #content-recrutement');
});

Il ne me reste plus qu'à ajouter ce code après l'appel à la bibliothèque javascript dans le template, ce qui donne :
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
   $(document).ready(function (){
    // Récupérer les infos
     $('#footer-partenaires').load('/portal.php?pid=3 #content-partenaires');
     $('#footer-recrutement').load('/portal.php?pid=3 #content-recrutement');
   });
</script>

Et pouf ! Le tour est joué :
image tuto




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 "[Xooit] Une parade aux iframes" tel que je l'ai rédigé.
 

[Xooit] Une parade aux iframes

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Le Thanatos : Croiseur de classe Retribution ! *
» CSS compatible xooit ?
» [TOUTES VERSIONS] Toutes versions Bouton générateur d'iframes
» [Code - PHPBB2 Xooit] Citer un message d'un sujet à un autre
» [Code - PHPBB2 Xooit] Modifier la largeur de votre forum

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage-
Sauter vers:  
Espace Admin du site

©2008-2016 - School Of Progress - Toute reproduction totale ou partielle est interdite.
Design réalisé par Mewyn - Forum hébergé par forumactif.com

Les logos des SoPiens

Nos correspondants