11494 sujets

JavaScript, DOM et API Web HTML5

Salut,

Je débute en Jquery, en bidouillant les divers scripts que je glane.
Autant dire que je ne suis pas un programmeur.

Mon probleme est le suivant.
J'ai une liste de vignettes, dont chacune permet d'afficher des infos issues d'une page externe.
Je me suis interessé à Jquery UI et au dialog boxes pour ca.

ma page:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" href="js/jquery-ui.css" type="text/css" />
<script src="js/jquery-ui.js"></script>
<script type="text/javascript">
        $(function (){
                $('a.ficheArtiste').click(function() {
                        var url = this.href;
                        /*var dialog = $('<div style="display:hidden"></div>').appendTo('body');*/
						var dialog =  $("#conteneur").appendTo('body');
						
                        // load remote content
                        dialog.load(
                                url, 
                                {},
                                function (responseText, textStatus, XMLHttpRequest) {
                                        dialog.dialog();
                                }
                        );
                        //prevent the browser to follow the link
                        return false;
                });
        });
        </script>
</head>
<body>
<div id="general">
<div id="droite" style="width:200px; position:absolute; top:10px; left:10px; background:#666666"><a href="contenu.html" class="ficheArtiste">affiche le dialog</a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sed velit magna. Pellentesque ultrices volutpat sem in tempus. Maecenas sit amet sapien at leo dignissim euismod. Aliquam pulvinar risus eget est aliquam vulputate. Aenean rhoncus dictum lorem sed ullamcorper. Duis luctus tristique tempor. Donec aliquet, elit ac ullamcorper vestibulum, nisi nisi varius mauris, id iaculis nibh nulla ut leo. Sed sem enim, ornare eu sollicitudin a, imperdiet ac ipsum. Mauris et risus ac urna pharetra ornare. Curabitur eget turpis velit. Vivamus ipsum augue, condimentum eget molestie sit amet, tincidunt nec turpis. Cras eget felis libero, id venenatis nulla. Vestibulum ut sem non sapien pulvinar convallis a ut ligula. Vivamus odio purus, molestie eget tincidunt non, eleifend eget eros. </div>
<div id="gauche" style=" position:absolute; top:10px; left:500px; width:500px"><div id="conteneur" style="position:relative; top:50px; left:500px; width:500px"></div><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sed velit magna. Pellentesque ultrices volutpat sem in tempus. Maecenas sit amet sapien at leo dignissim euismod. Aliquam pulvinar risus eget est aliquam vulputate. Aenean rhoncus dictum lorem sed ullamcorper. Duis luctus tristique tempor. Donec aliquet, elit ac ullamcorper vestibulum, nisi nisi varius mauris, id iaculis nibh nulla ut leo. Sed sem enim, ornare eu sollicitudin a, imperdiet ac ipsum. Mauris et risus ac urna pharetra ornare. Curabitur eget turpis velit. Vivamus ipsum augue, condimentum eget molestie sit amet, tincidunt nec turpis. Cras eget felis libero, id venenatis nulla. Vestibulum ut sem non sapien pulvinar convallis a ut ligula. Vivamus odio purus, molestie eget tincidunt non, eleifend eget eros. 
</div></div>

</body>
</html>


Mais , la dialog box apparait toujours au centre, pas moyen de fixer sa position dans un element de ma page? Est-ce possible? et comment ?

Merci d'avance.