angles arrondis et navigation ajax

Version imprimable

06/01/2011, 20h02
clave

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
06/01/2011, 20h04
nault

Salut, il faudrait voir le script en question,

mais pourquoi n'utilise tu pas CSS pour faire tes coins rond?
06/01/2011, 20h31
clave

Citation:

Envoyé par nault

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
06/01/2011, 20h43
nault

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.
06/01/2011, 20h53
Bovino

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 :aie:
Il te suffit donc de relancer le script générant l'arrondi pour régler le problème.
06/01/2011, 21h03
clave

Citation:

Envoyé par Bovino

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 :aie:
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!
06/01/2011, 21h09
Bovino

Citation:

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 :aie:
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 ! :mrgreen:
06/01/2011, 21h35
clave

Citation:

Envoyé par Bovino

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 :aie:
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 ! :mrgreen:

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?

Je viens de jetez un coup d'oeil a la doc de DD_roundies,

Code:

1
2
 
DD_roundies.addRule('.taclass', '5px', true);

ce code semble etre celui qui faut utiliser.

ex :

Code:

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:

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>

07/01/2011, 08h33
dukej

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.
07/01/2011, 11h27
clave

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