Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Membre à l'essai
    Homme Profil pro
    Technicien maintenance
    Inscrit en
    avril 2014
    Messages
    11
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Technicien maintenance

    Informations forums :
    Inscription : avril 2014
    Messages : 11
    Points : 11
    Points
    11

    Par défaut load() et page d'un sous répertoire avec chemins relatifs

    Hellooooo

    Je cale sur un point qui me pose souci.

    Prenons par exemple une page index.html à la racine du site avec dedans, un menu en haut, dans lequel chaque bouton permet de charger une page dans une div via la fonction load() :

    Voici la fonction :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <script>
    function ouvrir(target,url) {
    $( "#" + target ).load( url );
    }
    </script>
    Le bouton :
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    <a onclick="ahref('content','/contact/index.html')">Contact</a>

    Le problème c'est que la page /contact/index.html contient des images dans le répertoire /contact/images/ , le navigateur les cherche directement dans un répertoire /images/ à la racine du site. Evidement il ne les trouve pas.

    Bien sur, c'est pareil avec les pages de style etc etc.
    Il n’est pas envisageable de réécrire toutes les pages ciblées. J'ai bien tenté en remplaçant la div par un iframe, là ça marche mais impossible de faire un truc potable (qui prenne toute la place dispo sous l’entête menu, qui soit scrollable mais sans scrollbar verticale (car ça fait une deuxième scrollbar avec la principal, et c’est ultra moche).

    si quelqu'un a une solution

    Merkouin

  2. #2
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    juin 2010
    Messages
    2 954
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 30
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : juin 2010
    Messages : 2 954
    Points : 6 391
    Points
    6 391

    Par défaut

    J’ai une idée, ce n’est peut-être pas la meilleure mais voilà ce que je propose. Au lieu d’appeler .load() directement, tu récupères le HTML de la cible avec .ajax() ou .get(). Tu charges le code dans une <div> temporaire pour avoir un arbre DOM. Puis tu parcours tous les éléments ayant un attribut href, src et semblables, et tu transformes les chemins dans chacun de ces attributs pour qu’ils fonctionnent avec la page actuelle. Je ne vois pas de solution plus simple.
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  3. #3
    Membre à l'essai
    Homme Profil pro
    Technicien maintenance
    Inscrit en
    avril 2014
    Messages
    11
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Technicien maintenance

    Informations forums :
    Inscription : avril 2014
    Messages : 11
    Points : 11
    Points
    11

    Par défaut

    Hello,

    Merci pour ta réponse.

    Je oense que ca n'ira pas car plusieurs pages que je dois affichr sont aussi en php avec des requetes (formulaire de disques à la demande etc etc eux même avec du JS et AJAX) et également un tchat (Blab Ax).

    En effet je ne vois pas de solution simple

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 652
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 652
    Points : 33 322
    Points
    33 322

    Par défaut

    Bonjour,
    J'ai bien tenté en remplaçant la div par un iframe, là ça marche mais impossible de faire un truc potable (...)
    cela devrait pouvoir se régler via le CSS !

  5. #5
    Membre à l'essai
    Homme Profil pro
    Technicien maintenance
    Inscrit en
    avril 2014
    Messages
    11
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Technicien maintenance

    Informations forums :
    Inscription : avril 2014
    Messages : 11
    Points : 11
    Points
    11

    Par défaut

    Hello,

    Merci, mais je veux bien une piste

    En attendant je suis passé en iframe donc , mais j'ia mis le footer en bas de chaque page que je veux afficher dans l'iframe, ainsi, j'élimine le footer de la page principale (et donc de la grille) , ce qui retire une scrollbar verticale.

    En revanche, si la page affichée dans l'iframe est trop longue, la scrollbar apparait (normal), j'ai voulu customiser un peu en cherchant coté css mais à priori il faut webkit scrollbar, qui n'est à priori pas prévu au programme de standardisation chez Firefox ( https://developer.mozilla.org/fr/doc...bkit-scrollbar ) donc fonctionnement aléatoire d'un visiteur à l'autre

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 652
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 652
    Points : 33 322
    Points
    33 322

    Par défaut

    Citation Envoyé par Couin
    Merci, mais je veux bien une piste
    voici un exemple simple de mise en place d'une <iframe>.
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    <!DOCTYPE HTML>
    <html lang="fr">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Iframe</title>
    <style>
    html, body {
      margin: 0;
      padding: 0;
      font: 1em/1.5 Verdana,sans-serif;
    }
    main {
      display: block;
      margin: auto;
      max-width: 60em;
    }
    h1, h2, h3 {
      color: #069;
    }
    nav {
    }
      nav a {
        padding: 0.5em;
        border: 1px solid #ABC;
        text-decoration: none;
        color: #069;
        background-color: #FFF;
      }
      nav a:hover {
        color: #000;
        background-color: #EEE;
      }
    iframe {
      display: block;
      width: 100%;
      height: 40em;
      margin: auto;
      border: 1px solid #ABC;
      overflow: hidden;
    }
    </style>
    </head>
    <body>
      <main>
        <header>
          <h1>Titre page</h1>
        </header>
        <nav>
          <a target="target" href="https://www.developpez.net/forums/">Index forum DVP</a>
          <a target="target" href="https://www.developpez.net/forums/f9/webmasters-developpement-web/">Forum Web (HTML-CSS)</a>
          <a target="target" href="https://www.developpez.net/forums/f2000/javascript/">Forum Javascript</a>
        </nav>
        <section>
          <h2>Article</h2>
          <iframe  name="target" src="https://www.developpez.net/forums/f9/webmasters-developpement-web/"></iframe>
        </section>
      </main>
    </body>
    </html>

    Nota : si tu dois aller plus loin autant ouvrir une nouvelle discussion sur le forum CSS

Discussions similaires

  1. Réponses: 2
    Dernier message: 17/10/2011, 19h26
  2. [QtGui] Liste des fichiers/sous-répertoires avec QListView
    Par bul dans le forum PyQt
    Réponses: 5
    Dernier message: 21/05/2011, 06h14
  3. Réponses: 13
    Dernier message: 01/03/2010, 18h03
  4. Page dans un sous-répertoire
    Par XTazFR dans le forum Smarty
    Réponses: 5
    Dernier message: 07/01/2009, 16h39

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo