IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
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

JavaScript Discussion :

angles arrondis et navigation ajax


Sujet :

JavaScript

  1. #1
    Membre averti
    Inscrit en
    Janvier 2010
    Messages
    41
    Détails du profil
    Informations forums :
    Inscription : Janvier 2010
    Messages : 41
    Par défaut angles arrondis et navigation ajax
    Bonjour tout le monde,

    Je créé actuellement un site web et rencontre un petit souci.

    Je vous explique, j’ai arrondi les angles de mes div via le script DD_roundies pour qu’il soit plus joli. Tout marchait impeccable jusqu'au moment où j’ai souhaité pour plus de fluidité intégrer la navigation Ajax pour permettre de recharger seulement une partie de la page !

    Maintenant, le site est plus fluide mais mes angles de mes div ne sont plus arrondis, j’ai bien essayé de changer avec le fichier border-radius.htc, de modifier mon .js…. mais je n’y arrive pas, connaissez-vous une solution à mon problème ?

    Merci

  2. #2
    Membre éprouvé
    Homme Profil pro
    Inscrit en
    Juillet 2010
    Messages
    96
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Juillet 2010
    Messages : 96
    Par défaut
    Salut, il faudrait voir le script en question,

    mais pourquoi n'utilise tu pas CSS pour faire tes coins rond?

  3. #3
    Membre averti
    Inscrit en
    Janvier 2010
    Messages
    41
    Détails du profil
    Informations forums :
    Inscription : Janvier 2010
    Messages : 41
    Par défaut
    Citation Envoyé par nault Voir le message
    Salut, il faudrait voir le script en question,

    mais pourquoi n'utilise tu pas CSS pour faire tes coins rond?
    J'utilise bien css pour les autres navigateurs mais sous IE cela ne marche pas ! du coup je suis contraint de passer par du javascript

    Pour les scripts en questions

    voila le script ajax pour la navigation :
    http://macmicro.chez.aliceadsl.fr/js/jabbax.js

    et voila le tuto que j'ai suivis pour les angles arrondis :
    http://www.dillerdesign.com/experime...dies/#download

    Merci de votre aide

  4. #4
    Membre éprouvé
    Homme Profil pro
    Inscrit en
    Juillet 2010
    Messages
    96
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Juillet 2010
    Messages : 96
    Par défaut
    Je test ca et te revien, sinon

    mais vite vite si tu pourrrais essayer dans ton code,

    de dimbriquer un div dans le div qui a les coin rond, et deffectuer les operation ajax sur ce dernier.

  5. #5
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Ton problème est à priori assez simple : les scripts de coins arrondis fonctionnent généralement en ajoutant à l'élément ciblé des divs de taille progressive. Or, lors de tes mises à jour avec AJAX, tu modifies le contenu (ou plutôt tu remplaces) de la div conteneur. Du coup, tous les éléments ajoutés disparaissent par la même occasion
    Il te suffit donc de relancer le script générant l'arrondi pour régler le problème.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  6. #6
    Membre averti
    Inscrit en
    Janvier 2010
    Messages
    41
    Détails du profil
    Informations forums :
    Inscription : Janvier 2010
    Messages : 41
    Par défaut
    Citation Envoyé par Bovino Voir le message
    Ton problème est à priori assez simple : les scripts de coins arrondis fonctionnent généralement en ajoutant à l'élément ciblé des divs de taille progressive. Or, lors de tes mises à jour avec AJAX, tu modifies le contenu (ou plutôt tu remplaces) de la div conteneur. Du coup, tous les éléments ajoutés disparaissent par la même occasion
    Il te suffit donc de relancer le script générant l'arrondi pour régler le problème.
    Ok si tu le dis, je te fais confiance car le php c'est pas mon domaine et encore moins le javascript, je prèfère rester sur l'asp et c#.

    Par contre quand tu dis il suffit de relancer le script gérant l'arrondis, moi je l'appelle ainsi <div id="DivAjax" class="arrondi">.

    Donc comment je peux le rapeller en sachant que:

    -> l'arrondi se fait via le class="arrondi"
    -> pour l'ajax j'appelle ainsi <a href="#" onClick="javascript:getPage('accueil','DivAjax');">test</a> donc c'est directement lié a l'id du div (DivAjax)

    Je vois pas comment relancer mon script!

  7. #7
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Par contre quand tu dis il suffit de relancer le script gérant l'arrondis, moi je l'appelle ainsi <div id="DivAjax" class="arrondi">.
    Je veux pas être contrariant, mais si le simple ajout d'une classe permet d'avoir l'arrondi, c'est que c'est géré en CSS, pas en JavaScript
    Je suis donc prêt à parier qu'à un moment dans ta page, un script appelle une fonction qui permet d'appliquer l'arrondi aux éléments dont la classe est "arrondi". C'est donc cette fonction qu'il faut rappeler !
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  8. #8
    Membre averti
    Inscrit en
    Janvier 2010
    Messages
    41
    Détails du profil
    Informations forums :
    Inscription : Janvier 2010
    Messages : 41
    Par défaut
    Citation Envoyé par Bovino Voir le message
    Je veux pas être contrariant, mais si le simple ajout d'une classe permet d'avoir l'arrondi, c'est que c'est géré en CSS, pas en JavaScript
    Je suis donc prêt à parier qu'à un moment dans ta page, un script appelle une fonction qui permet d'appliquer l'arrondi aux éléments dont la classe est "arrondi". C'est donc cette fonction qu'il faut rappeler !
    oui autant je me suis mal exprimé sur ce point. En fait, la class fait appel a du css pour le rendu direct sous firefox et pour IE je crai une règle entre les balises script ainsi :
    DD_roundies.addRule('div.arrondi', '10px', true);

    C'est bien cette règle que je dois répéter, je l'avais oublié en lisant votre réponse précédente! Mais j'ai bien tenté avant de poster sur le forum de mettre cette ligne a la fin du script de navigation ajax et meme avant la fin de ma balise div mais rien de tout n'avait été concluant!

    Une idée peut etre ai je fais une erreur?

  9. #9
    Membre éprouvé
    Homme Profil pro
    Inscrit en
    Juillet 2010
    Messages
    96
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Juillet 2010
    Messages : 96
    Par défaut
    Je viens de jetez un coup d'oeil a la doc de DD_roundies,

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    DD_roundies.addRule('.taclass', '5px', true);
    ce code semble etre celui qui faut utiliser.

    ex :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    function loadPage(url,div){
    	request = ajaxObject()
    	request.open("GET", url, false);
    	request.send(null);
    	if(request.readyState == 4) {
    		writeHTML(request.responseText, div);
                    DD_roundies.addRule('.taclass', '5px', true);
    	} else { 
    		return false;
    	}
    }
    mais personellement, je n'utiliserais pas ce script de coin arrondi si mon design le permet je ferais 4 images pour les coin, que je positionerait au 4 coin.

    ex :
    Code : 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
     
    <style>
    .content{ position:relative;}
    .coin{ position:absolute;}
    .coin.hautDroite{top:0px;right:0px;}
    .coin.hautGauche{top:0px;left:0px;}
    .coin.basDroite{bottom:0px;right:0px;}
    .coin.basGauche{bottom:0px;left:0px;}
    </style>
     
    <div class="content">
       <img src="/images/hautDroite.gif" class="hautDroite">
       <img src="/images/hautGauche.gif" class="hautGauche">
       <img src="/images/basDroite.gif" class="basDroite">
       <img src="/images/basGauche.gif" class="basGauche">
     
       <div id="page">
          contenu de la page et zone affecter par le reload ajax
       </div>
    </div>

  10. #10
    Inactif  

    Profil pro
    Inscrit en
    Mai 2010
    Messages
    345
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 345
    Par défaut
    Tous les bricolages à coup de JS surtout les JS de DD c'est n'importe quoi.
    J'ai testé moulte et moultes solutions javascript etc etc pour coins arrondis ou png transparents sous IE6 par exemple.

    Le seul truc mega potable passe partout et propre c'est d'utiliser css3pie
    Tu déclares tes coins arrondis en CSS 3 via border-radius, et pour les autres navigateurs en utilisant -moz-border-radius, -webkit-border-radius. Et hop magie
    CSS3pie passe par un fichier HTC, il faut faire attention quand on utilise un fichier HTC car lorsqu'on l'appelle depuis une CSS il faut faire l'appel en absolu et non en relatif, car l'url d'un htc est relative à la page.

    L'utilisatio, en plus de css3pie en version HTC règle tes problèmes de : "Ca marche pas quand je modifie le div via ajax".

    Donc : http://css3pie.com/

    Faites moi confiance ce truc est une tuerie, lisez la documentation quand même
    Pour avoir codé moi même des scripts de coins arrondis, des pngfix, testé tous les techniques de pngfix de IE6, bricolé IE6 dans tous les sens, testé tous les scripts de pngfix ou coins arrondis. Le seul qui ressort est : css3pie.

    Non je ne fais pas de pub, c'est juste qu'on l'utilise au taf et ça me simplifie la vie.

  11. #11
    Membre averti
    Inscrit en
    Janvier 2010
    Messages
    41
    Détails du profil
    Informations forums :
    Inscription : Janvier 2010
    Messages : 41
    Par défaut
    Impeccable Dukej, j'avais pourtant bien essayé avec border-radius.htc mais ça ne marché pas avec celui-ci ! Un vrai petit bijoux ce css3pie...

    Il est vrai que je ne souhaitais pas m'amuser a faire des images a l'ancienne, trop long et contraignant lors de changement de style.

    Merci a vous tous de votre aide

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 4
    Dernier message: 02/12/2009, 20h27
  2. Réponses: 2
    Dernier message: 08/04/2009, 06h39
  3. [Prototype] La navigation ajax
    Par Jerome38190 dans le forum Bibliothèques & Frameworks
    Réponses: 3
    Dernier message: 17/11/2008, 21h43
  4. [CSS]Angle arrondi pour une balise <div>
    Par mimagyc dans le forum Mise en page CSS
    Réponses: 45
    Dernier message: 22/08/2007, 22h39
  5. [AJAX] navigation ajax (aide)
    Par speedylol dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 30/10/2006, 14h39

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