Discussion :

[gwrsk]

Bonjour,
je souhaite écrire trois scripts qui entraineraient chacun un événement sur une même balise, la #page.

1./Cette balise #page, est chargé grâce à un load. Voici le script du load.

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
21
22
<script type="text/javascript">
jQuery(document).ready(function($) { 
    $('.click').click(function() {
        var $periph = $('#periph');
       var url = $(this).data('url');
        $periph.fadeOut(300, function() {
	            $periph.load(url, function() {
 
               $periph.fadeIn(800, function() {
                    if (this.style.removeAttribute) {
                        this.style.removeAttribute('filter');
 
                    }  
                });
            });
        });
 
});
 
}); 
 
</script>

qui s'appliquent à

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<area shape="rect" coords="0,0,120,29"  onmouseover="imagefond.src='images/lacase.png'"  onmousedown="imagefond.src='images/menu.png'" onclick="imagefond.src='images/lacase.png'" id="lacase" class="click" data-url="/wordpress #page"/>
 
<area shape="rect" coords="130,0,263,30" onmouseover="imagefond.src='images/bio.png'" onfocus="imagefond.src='images/bio.png'"   id="bio"  class="click" data-url="/wordpress/?page_id=18 #page"/>
 
<area shape="rect"  coords="270,1,429,29" onmouseover="imagefond.src='images/musique.png'" onfocus="imagefond.src='images/musique.png'"  id="musique" class="click" data-url="/wordpress/?page_id=13 #page" />

2./ Je souhaite que sur #page, il y ait également une scrollbar, appelé avec ce code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#page').jScrollPane();

3./ Je souhaite également des bords arrondis sur #page, appelé avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#page").corner();

Je précise que les librairies sont bien présentes dans le header, et que les scripts de scrollbar et de corner fonctionne quand la page se recharge complétement, c'est à dire quand le load est "désactivé".


Malheureusement, je n'arrive pas à écrire correctement le code qui me permettrait que tout fonctionne (load+ les 2 autres petits scripts) il y a un conflit, plus aucune script ne se met en route, dès que j'essaie de rajouter les deux petits bouts de code dans le document ready....quelqu'un peut-il m'aider?

[utopman]

Salut.
j'ai regardé ton code,et je ne comprends pas ce que tu essayes de faire.

tu veux donner du comportement js a des balises XML ?

c'est bizarrement structuré ton code.
pourquoi ne pas faire des div en html
des couleurs des positions et des dimmensions en CSS
et ensuite manipuler ca avec du jQuery standard, genre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('.monelement').css('border-radius','5px');

...

je n'ai pas envie de t'aider plus si tu donnes pas le CSS qui affiche ce que tu veux faire... désolé. si tu veux faire des trucs magiques, tu peux toujours te tourner vers la balise Canvas de HTML5 ou le SVG ou encore le flash. mais la c'est un peu méli mélo.

[Torgar]

Bonsoir,

Si je comprends bien, tu as ou aimerais :

• une image mappée avec des zones cliquables permettant de charger du contenu
• une div #page qui sert de conteneur aux éléments sus-cités
• une mise en page en cadre arrondi pour ta div #page

Malheureusement, je n'arrive pas à écrire correctement le code qui me permettrait que tout fonctionne (load+ les 2 autres petits scripts) il y a un conflit, plus aucune script ne se met en route, dès que j'essaie de rajouter les deux petits bouts de code dans le document ready....quelqu'un peut-il m'aider?

Peux-tu nous donner le code complet de ta page s'il te plait ? Que nous voyons concrètement où tu en es et que nous t'aidions au mieux.