11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour a tous

j'utilise Jquery et le plugin jquery.corner pour arrondir les bordures
trouvé ic : http://www.malsup.com/jquery/corner/

Cela fontionne correctement sur une page simple AVEC JUSTE jquery-1.3.2.js et jquery.corner.js :
voici le code :

<style type="text/css">
div.inner { margin: 0; background: #ffc; padding: 10px; border:0; zoom:1;}
div.outer { float: left; margin: 15px; background: #c82; padding: 8px; width: 22em }
</style>
<script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script type="text/javascript">
    $(function(){
        $('div.inner').wrap('<div class="outer"></div>');
        $('p').wrap("<code></code>");
        $('div.inner').each(function() {
            var t = $('p', this).text();
            eval(t);
        });
    });
</script>


et dans le html il y a


    <div class="inner">
      <h1>
        hELLO wOLRD
      </h1>
      <div id="aa" style="display: none;">
        <p>$(this).corner("round 8px").parent().css('padding', '4px').corner("round 10px")</p>
      </div>
    </div>


mais si je le met dans une page plus compliqué avec d'autres librairies js j'ai une erreur sur le
$(function(){

message = $ is not a function

Voici le code pour cette page complete:



<script type='text/javascript' src='js/x_core.js'></script>
<script type='text/javascript' src='js/x_dom.js'></script>
<script type='text/javascript' src='js/x_event.js'></script>
<script type='text/javascript' src='js/az_animebox.js'></script>

<script type='text/javascript' src='admin/includes/jquery-1.3.2.min.js'></script>

<script type="text/javascript" src="js/az_carousel.pack.js"></script>
<script type="text/javascript" src="js/az_carosel_init.js"></script>
<script type='text/javascript' src='js/az_prod_popup.js'></script>
<script type="text/javascript">

// <![CDATA[
function init_popup () {
	jQuery(document).ready(function($) {
//		$('a[rel*=az_carosel_prod_popupbox]').facebox();
	});
}

jQuery(document).ready(function($) {
	$('a[rel*=az_prod_popupbox]').facebox();

	$('.az_image_border').hover(function(){
						$(this).addClass('az_image_border_over');
					   },
					   function(){
						$(this).removeClass('az_image_border_over');
						$(this).addClass('az_image_border');
					   });

	$(document.body).bind("click", function(e) { 
		var $target = $(e.target); 
		if ($target.is("#add_to_cart")) { 
			$('#cart_quantity').submit();
		} 
	});					   
});
//]]>
</script>

<script src="admin/includes/jquery.corner.js" type="text/javascript"></script>

<!-- STYLE POUR LES BORDS ARRONDIS jQUERY-CORNER -->
<style type="text/css">
div.inner { margin: 0; background: #ffc; padding: 10px; border:0; zoom:1;}
div.outer { float: left; margin: 15px; background: #c82; padding: 8px; width: 22em }
</style>

<script type="text/javascript">
    $(function(){
        $('div.inner').wrap('<div class="outer"></div>');
        $('p').wrap("<code></code>");
        $('div.inner').each(function() {
            var t = $('p', this).text();
            eval(t);
        });
    });
</script>


Merci d'avance pour votre aide

Cordialement

Alexis
Modifié par alexmtp (22 Apr 2009 - 18:15)
Rebonjour

Je m'autoréponds

J'ai debuggué ET le probleme se trouvait dans le script

<script type="text/javascript" src="js/az_carosel_init.js"></script>


il contient sur la derniere ligne :

jQuery.noConflict();


j'ai mis cette ligne en commentaire et le jquery-corner fonctionne.(plus d'erreur sur la fonction $)
ainsi que le carrousel produit.

Qui peux m'eclairer sur l'incidence de la mise en commentaire ?
A quoi sert cette instruction jQuery.noConflict(); ?

Merci
Alexis
Modifié par alexmtp (21 Apr 2009 - 18:21)