spip : boucle différente si javascript est activé (ou non)

Julien

Juillet 2013

Bonjour,

Je souhaiterais faire une boucle avec affichage conditionnel de sorte que si javascript n’est pas activé sur le navigateur c’est la première boucle qui s’exécute, sinon c’est la deuxième.

BOUCLE 1 (sans javascript) :

<B_articles1>
  #ANCRE_PAGINATION
  <div class="sansscript">
    <ul>
      <BOUCLE_articles1(ARTICLES) {!par date} {pagination 25}>
        <li>
          [(#LOGO_ARTICLE_RUBRIQUE|image_passe_partout{120,120}|image_recadre{120,120}
            ) ]  
        </li>
      </BOUCLE_articles1>
    </ul>
  </div>
  [<p class="pagination">(#PAGINATION|{prive})</p>]
</B_articles1>

BOUCLE 2 (avec javascript) :

<B_articles2>
  #ANCRE_PAGINATION
  <div class="avecscript">
    <ul>
      <BOUCLE_articles2(ARTICLES) {!par date} {pagination 25}>
        <li>
          [(#LOGO_ARTICLE_RUBRIQUE|image_reduire{120,*}) ]  
        </li>
      </BOUCLE_articles2>
    </ul>
  </div>
  [<p class="pagination">(#PAGINATION|{prive})</p>]
</B_articles2>

J’ai utilisé la solution suivante avec la balise noscript, mais le problème est que les 2 boucles sont calculées par spip est affichées en dur dans la page, bien que la deuxième ne soit pas affiché par le navigateur :

<!-- No Script -->
<div id="noscript">
  <noscript>
    <B_articles1>
    #ANCRE_PAGINATION
    <div class="sansscript">
      <ul>
        <BOUCLE_articles1(ARTICLES) {!par date} {pagination 25}>
          <li>
            [(#LOGO_ARTICLE_RUBRIQUE|image_passe_partout{120,120}|image_recadre{120,120}
            ) ]  
          </li>
        </BOUCLE_articles1>
      </ul>
    </div>
    [<p class="pagination">(#PAGINATION|{prive})</p>]
  </B_articles1>
  <style>.avecscript{display:none;}</style>
  </noscript>
</div>

<B_articles2>
  #ANCRE_PAGINATION
  <div class="avecscript">
    <ul>
      <BOUCLE_articles2(ARTICLES) {!par date} {pagination 25}>
        <li>
          [(#LOGO_ARTICLE_RUBRIQUE|image_reduire{120,*}) ]  
        </li>
      </BOUCLE_articles2>
    </ul>
  </div>
  [<p class="pagination">(#PAGINATION|{prive})</p>]
</B_articles2>

Avez-vous une meilleure solution ?

Merci,
Julien

Par note Par date Par date chronologique

Rainer

Juillet 2013

Pose un cookie avec le javascript puis

    <B_articles1>

    #ANCRE_PAGINATION

    <div class="sansscript">

      <ul>

        <BOUCLE_articles1(ARTICLES) {!par date} {pagination 25}{si #EVAL{$_COOKIE['nom_cookie']}|non}>

          <li>

            [(#LOGO_ARTICLE_RUBRIQUE|image_passe_partout{120,120}|image_recadre{120,120}

            ) ]  

          </li>

        </BOUCLE_articles1>

      </ul>

    </div>

    [<p class="pagination">(#PAGINATION|{prive})</p>]

  </B_articles1>
<B_articles2>

  #ANCRE_PAGINATION

  <div class="avecscript">

    <ul>

      <BOUCLE_articles2(ARTICLES) {!par date} {pagination 25}>

        <li>

          [(#LOGO_ARTICLE_RUBRIQUE|image_reduire{120,*}) ]  

        </li>

      </BOUCLE_articles2>

    </ul>

  </div>

  [<p class="pagination">(#PAGINATION|{prive})</p>]

</B_articles2>
  <//B_articles1>

Indiquez l’intérêt que vous portez à cette réponse

0

Julien

Juillet 2013

Merci Rainer pour cette solution avec un cookie et le critère :
{si #EVAL{$_COOKIE['nom_cookie']}|non}
Mais je souhaiterais ne pas avoir a poser de cookie.

Par ailleurs, j’ai constaté que spip 3 renomme la class no-js en js de la balise suivante :
<html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js">
si javascript est activé sur le navigateur grâce à ce script :
<script type='text/javascript'>/*<![CDATA[*/(function(H) {H.className=H.className.replace(/\bno-js\b/,'js')}) (document.documentElement);/*]]>*/</script>
Je souhaiterais donc utiliser cette propriété de spip pour faire une boucle conditionnelle si javascript n’est pas activé sur le navigateur du style :
<B_1> <BOUCLE_1(ARTICLES) { si class = no-js }> ... </BOUCLE_1> </B_1> <B_2> <BOUCLE_2(ARTICLES) { sinon }> ... </BOUCLE_2> </B_2> <//B_1>
Mais je n’arrive pas à extraire la class no-js ?
Merci pour votre aide,
Julien
Indiquez l’intérêt que vous portez à cette réponse

0

Cyriaque

Janvier 2019

Bonjour,

Je relance ce sujet "noscript" : avez-vous une solution pour faire une boucle conditionnel avec ou sans javascript activé sur le navigateur ?

Merci pour votre aide,