11488 sujets

JavaScript, DOM et API Web HTML5

Bonjours,
Je viens de tomber sur votre site.
Je suis sur joomla et j’ai effectivement un conflit avec jquery et un diaporam joomla (ignite gallery).
J’ai appliquer votre méthode mais rien ni fais ça ne marche toujours pas. Je suis pas un expert en programmation. J’ai tout essayer. Mais je pense que j’ai souci de positionnement des codes. Je vois comment faire ou les mettes.
Pourriez vous m’aider s’il vous plait.

Voici ma page index.php :


<head>
<jdoc:include type="head" />
<?php JHTML::_('behavior.mootools'); ?>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />

<link href="<?php echo $tmpTools->templateurl();?>/css/template.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl();?>/scripts/ja.script.js"></script>
<?php $tmpTools->genMenuHead(); ?>

<link href="<?php echo $tmpTools->templateurl(); ?>/css/colors/<?php echo $tmpTools->getParam(JA_TOOL_COLOR); ?>.css" rel="stylesheet" type="text/css" />

<?php //Include Slimbox ?>
<script type="text/javascript" src="<?php echo $tmpTools->templateurl();?>/slimbox/js/slimbox.js"></script>
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl();?>/slimbox/css/slimbox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="modules/mod_janewslight/ja_newslight/ja-newslight.css" type="text/css" media="screen" />


<!--[if lte IE 6]>
<style type="text/css">
.clearfix {height: 1%;}
</style>
<![endif]-->

<!--[if gte IE 7.0]>
<style type="text/css">
.clearfix {display: inline-block;}
</style>
<![endif]-->

<?php if ($tmpTools->isIE6()) {
?>

<script type="text/javascript">
window.addEvent ('domready', makeTransBG);
function makeTransBG() {
	makeTransBg($$('#ja-cssmenu li ul'), null, 'scale');
	makeTransBg($('features'));
	makeTransBg($('ja-colwrap-top'));
	$$('#ja-rsslide-navigation').each(function(el){
		makeTransBg(el, null, 'scale');
	});
	ie6pnghover ($('ja-rsslide-navigation-left'), '<?php echo $tmpTools->baseurl();?>/modules/mod_ja_rsslide/mod_ja_rsslide/re-left.png', '<?php echo $tmpTools->baseurl();?>/modules/mod_ja_rsslide/mod_ja_rsslide/re-left-hover.png');
	ie6pnghover ($('ja-rsslide-navigation-right'), '<?php echo $tmpTools->baseurl();?>/modules/mod_ja_rsslide/mod_ja_rsslide/re-right.png', '<?php echo $tmpTools->baseurl();?>/modules/mod_ja_rsslide/mod_ja_rsslide/re-right-hover.png');

}
</script>
<style type="text/css">

</style>
<?php } ?>

<?php if (@$_REQUEST['view'] == 'frontpage') {?>
<style type="text/css">
.article_separator {display: none;}
</style>
<?php } ?>
<script type="text/javascript" src="<?php echo $tmpTools->templateurl();?>/scripts/jQuery.js"></script> 
<script type="text/javascript" src="<?php echo $tmpTools->templateurl();?>/scripts/captify.tiny.js"></script>
<script type="text/javascript" >
		$(function(){
		$('img.captify').captify({
		// all of these options are... optional
		// ---
		// speed of the mouseover effect
		speedOver: 'fast',
		// speed of the mouseout effect
		speedOut: 'normal',
		// how long to delay the hiding of the caption after mouseout (ms)
		hideDelay: 500,	
		// 'fade', 'slide', 'always-on'
		animation: 'fade',		
		// text/html to be placed at the beginning of every caption
		prefix: '',		
		// opacity of the caption on mouse over
		opacity: '0.7',					
		// the name of the CSS class to apply to the caption box
		className: 'caption-bottom',	
		// position of the caption (top or bottom)
		position: 'bottom',
		// caption span % of the image
		spanWidth: '100%'
	});
});
</script>

</head>


Je vous remercie

Dio
Bonjour,

Dio a écrit :
J’ai appliquer votre méthode

Euh, laquelle?

Dio a écrit :
Mais je pense que j’ai souci de positionnement des codes.

Je ne sais pas trop ce que tu entends par là, tu peux préciser? Je ne vois rien de flagrant.
Questions de routine:
- Le code HTML est valide?
- Est-ce que d'autres bibliothèques JavaScript que jQuery sont utilisées?
- Est-ce que tous les scripts nécessaires sont bien appelés?
- Est-ce que la page HTML générée comporte bien tous les appels de scripts?
- Est-ce que les fichiers de script sont bien présents aux adresses indiquées (pas d'erreurs 404)?
- Est-ce que des erreurs sont présentes dans la console JavaScript du navigateur?
Modifié par Florent V. (23 Jul 2010 - 13:17)
Merci avant tout d'avoir répondu aussi rapidement.

Pour la question de méthode, je parle de celle ou l'on utilise la forme jQuery.noConflict()
( http://api.jquery.com/jQuery.noConflict/[/url=]) qui revient régulièrement dans forums.
Que je n'arrive pas à utilisé, d'où le problème comment les placer et ou les placer.

a écrit :
- Le code HTML est valide?

Oui

a écrit :
- Est-ce que d'autres bibliothèques JavaScript que jQuery sont utilisées?

Effectivement il y a une autre bibliothèque javascript utilisées. Car quand le jQuery est activé l'autre bibliothèque de fonctionne pas et inversement.

a écrit :
- Est-ce que tous les scripts nécessaires sont bien appelés?

Que veux tu dire par la ( scripts nécessaires sont bien appelés ). Si c'est les liens vers les scripts oui il sont bien appelés.

a écrit :
- Est-ce que la page HTML générée comporte bien tous les appels de scripts?

De même je vois pas ce que veux dire ( appels de scripts ).

a écrit :
- Est-ce que les fichiers de script sont bien présents aux adresses indiquées (pas d'erreurs 404)?

Oui, ils n'y a pas d'erreur à se niveau là.

a écrit :
- Est-ce que des erreurs sont présentes dans la console JavaScript du navigateur?

Non aucune erreur à ma connaissance. Mais comment vérifiez.

Je vous remerci

Dio
a écrit :
Non aucune erreur à ma connaissance. Mais comment vérifiez.

Avec firebug par exemple.
Dio a écrit :
Effectivement il y a une autre bibliothèque javascript utilisées. Car quand le jQuery est activé l'autre bibliothèque de fonctionne pas et inversement.

Ma recommandation: n'utiliser qu'une seule bibliothèque JavaScript. Pour donner un exemple, si tu utilises déjà activement YUI, et que tu as trouvé un plugin jQuery qui t'intéresse, tu as deux solutions:
- trouver un script équivalent pour YUI;
- coder toi-même un script équivalent (éventuellement en exploitant les fonctions de YUI).

Il y a effectivement la solution jQuery.noConflict, mais je ne souhaite pas l'encourager.

(Pour information, par «appel de script» j'entends le fait de placer un élément <script> dans le code HTML, avec un attribut src qui pointe vers un fichier contenant le script JS en question. Cela conduit le navigateur à télécharger et exécuter les scripts appelés ainsi, par défaut dans l'ordre où ils sont déclarés.)
Modifié par Florent V. (23 Jul 2010 - 14:44)
a écrit :
Avec firebug par exemple.

Merci Paolo pour la solution firebug. Je vais vais le test.

a écrit :
Ma recommandation: n'utiliser qu'une seule bibliothèque JavaScript. Pour donner un exemple, si tu utilises déjà activement YUI, et que tu as trouvé un plugin jQuery qui t'intéresse, tu as deux solutions:
- trouver un script équivalent pour YUI;
- coder toi-même un script équivalent (éventuellement en exploitant les fonctions de YUI).



Qu'est-ce que YUI?
Pour la réponse d'encodé moi même ça va être difficile car je n'ai pas de compétence requise. J'y connais rien au javascript.

jQuery.noConflict me paraissais la bonne solution pour résoudre le problème. D'où la question comment faire pour le programmer.

Merci
Dio a écrit :
Qu'est-ce que YUI?

Une bibliothèque JavaScript, à l'instar de jQuery, MooTools, etc.
http://developer.yahoo.com/yui/

Dio a écrit :
J'y connais rien au javascript.
(...)
jQuery.noConflict me paraissais la bonne solution pour résoudre le problème. D'où la question comment faire pour le programmer.

Pour utiliser efficacement jQuery.noConflict, ou pour suivre l'une ou l'autre de mes recommandations, il FAUT avoir des bases en JavaScript. Ou faire intervenir quelqu'un qui en a sur ce projet.
L'amateurisme a ses limites.
Ok pourrais tu me dire comme l'intégrer jQuery.noConflict car je l'ai déjà fait mais sa me désactive jquery.

Voici comment je m'y suis pris :


<head> 
<jdoc:include type="head" /> 
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta http-equiv="Content-Style-Type" content="text/css" /> 
 
<link href="/css/template.css" rel="stylesheet" type="text/css" /> 
<script language="javascript" type="text/javascript" src="/scripts/ja.script.js"></script> 
 
 
<link href="/css/colors/.css" rel="stylesheet" type="text/css" /> 
 
 
<script type="text/javascript" src="/slimbox/js/slimbox.js"></script> 
<link rel="stylesheet" href="/slimbox/css/slimbox.css" type="text/css" media="screen" /> 
<link rel="stylesheet" href="modules/mod_janewslight/ja_newslight/ja-newslight.css" type="text/css" media="screen" /> 
 
 
<!--[if lte IE 6]> 
<style type="text/css"> 
.clearfix {height: 1%;} 
</style> 
<![endif]--> 
 
<!--[if gte IE 7.0]> 
<style type="text/css"> 
window.addEvent ('domready', makeTransBG); 
function makeTransBG() { 
    makeTransBg($$('#ja-cssmenu li ul'), null, 'scale'); 
    makeTransBg($('features')); 
    makeTransBg($('ja-colwrap-top')); 
    $$('#ja-rsslide-navigation').each(function(el){ 
        makeTransBg(el, null, 'scale'); 
    }); 
    ie6pnghover ($('ja-rsslide-navigation-left'), '/modules/mod_ja_rsslide/mod_ja_rsslide/re-left.png', '/modules/mod_ja_rsslide/mod_ja_rsslide/re-left-hover.png'); 
    ie6pnghover ($('ja-rsslide-navigation-right'), '/modules/mod_ja_rsslide/mod_ja_rsslide/re-right.png', '/modules/mod_ja_rsslide/mod_ja_rsslide/re-right-hover.png'); 
 
} 
</style> 
<![endif]--> 
 
 
 
<script type="text/javascript"> 
.clearfix {display: inline-block;} 
</script> 
<style type="text/css"> 
 
</style> 
 
 
 
<style type="text/css"></style> 
 
<script type="text/javascript" src="/scripts/jQuery.js"> 
.article_separator {display: none;} 
</script>  
<script type="text/javascript" src="/scripts/captify.tiny.js"></script> 
<script type="text/javascript" > 
        jQuery.noConflict();        
        jQuery(function(){ 
        jQuery('img.captify').captify({ 
        // all of these options are... optional 
        // --- 
        // speed of the mouseover effect 
        speedOver: 'fast', 
        // speed of the mouseout effect 
        speedOut: 'normal', 
        // how long to delay the hiding of the caption after mouseout (ms) 
        hideDelay: 500,     
        // 'fade', 'slide', 'always-on' 
        animation: 'fade',         
        // text/html to be placed at the beginning of every caption 
        prefix: '',         
        // opacity of the caption on mouse over 
        opacity: '0.7',                     
        // the name of the CSS class to apply to the caption box 
        className: 'caption-bottom',     
        // position of the caption (top or bottom) 
        position: 'bottom', 
        // caption span % of the image 
        spanWidth: '100%' 
    }); 
}); 
</script> 
 
</head>  
 
</head> 


Merci
Dio a écrit :
pourrais tu me dire comme l'intégrer jQuery.noConflict

Je n'ai rien de particulier à ajouter à la documentation qui est déjà précise.

Ton code semble correct. Si cela ne marche pas malgré tout, il faudrait voir du côté des erreurs JavaScript (tu peux les voir dans la console de Firebug, par exemple).

Le site est visible en ligne?
Bonjour,
E il y a un effectivement une erreur au niveau de javascript.
Voici le message: Erreur javascript $.extend is not a function

Et voici mon javascript avec jQuery.noConflict();:
</script>
<script type="text/javascript" src="<?php echo $tmpTools->templateurl();?>/scripts/jQuery.js"></script> 
<script type="text/javascript" src="<?php echo $tmpTools->templateurl();?>/scripts/captify.tiny.js"></script>
<script type="text/javascript" >
		jQuery.noConflict();
		jQuery(function(){
		jQuery('img.captify').captify({
		// all of these options are... optional
		// ---
		// speed of the mouseover effect
		speedOver: 'fast',
		// speed of the mouseout effect
		speedOut: 'normal',
		// how long to delay the hiding of the caption after mouseout (ms)
		hideDelay: 500,	
		// 'fade', 'slide', 'always-on'
		animation: 'fade',		
		// text/html to be placed at the beginning of every caption
		prefix: '',		
		// opacity of the caption on mouse over
		opacity: '0.7',					
		// the name of the CSS class to apply to the caption box
		className: 'caption-bottom',	
		// position of the caption (top or bottom)
		position: 'bottom',
		// caption span % of the image
		spanWidth: '100%'
	});
});
</script>


a écrit :
Le site est visible en ligne?

Mon site n'est pas encore en ligne.

Merci
Dans quel fichier se trouve l'erreur JavaScript? Il semble que c'est dans captify.tiny.js. Firebug devrait vous le dire, en indiquant aussi la ligne.
Si vous supprimez complètement l'élément SCRIPT dans lequel vous activez le mode NoConflict et instanciez le plugin jQuery.captify, est-ce que l'erreur se produit toujours?
Le fichier pour jQuery s'appelle bien jQuery.js, et pas jquery.js ou autre chose?
Bonsoir,

a écrit :
Dans quel fichier se trouve l'erreur JavaScript? Il semble que c'est dans captify.tiny.js. Firebug devrait vous le dire, en indiquant aussi la ligne.


Effectivement l'erreur ce trouve dans captify.tiny.js à la ligne 1 que voici :

jQuery.fn.extend({captify:function(n){var a=$.extend({speedOver:"fast",speedOut:"normal",hideDelay:500,animation:"slide",prefix:"",opacity:"0.45",className:"caption-bottom",position:"bottom",spanWidth:"100%"},n);$(this).each(function(){var c=this;$(this).load(function(){if(c.hasInit)return false;c.hasInit=true;var i=false,k=false,e=$("#"+$(this).attr("rel")),g=!e.length?$(this).attr("alt"):e.html();e.remove();e=this.parent&&this.parent.tagName=="a"?this.parent:$(this);var h=e.wrap("<div></div>").parent().css({overflow:"hidden",



a écrit :
Le fichier pour jQuery s'appelle bien jQuery.js, et pas jquery.js ou autre chose?

La dessus pas de souci tout est correct.

a écrit :
Si vous supprimez complètement l'élément SCRIPT dans lequel vous activez le mode NoConflict et instanciez le plugin jQuery.captify, est-ce que l'erreur se produit toujours?

Par contre je suis désoler mais j'ai pas tout saisi à la procédure à suivre pour cette partie.
J'ai suprimer le script Noconflict ( effacer la ligne jQuery.noConflict(); ) et pour initialisation du plugin jQuery.captify j'ai pas compris le sens.

Par contre je ne sais si cela peux vous aider mais à force de faire des essaies et grâce à firebug en écrivant de cette façon la ligne Noconflict que voici :

</script> 
<script type="text/javascript" src="<?php echo $tmpTools->templateurl();?>/scripts/jQuery.js"></script>  
<script type="text/javascript" src="<?php echo $tmpTools->templateurl();?>/scripts/captify.tiny.js"></script> 
<script type="text/javascript" > 
        jQuery.noConflict(); 
        $(function(){ 
        $('img.captify').captify({ 
        // all of these options are... optional 
        // --- 
        // speed of the mouseover effect 
        speedOver: 'fast', 
        // speed of the mouseout effect 
        speedOut: 'normal', 
        // how long to delay the hiding of the caption after mouseout (ms) 
        hideDelay: 500,     
        // 'fade', 'slide', 'always-on' 
        animation: 'fade',         
        // text/html to be placed at the beginning of every caption 
        prefix: '',         
        // opacity of the caption on mouse over 
        opacity: '0.7',                     
        // the name of the CSS class to apply to the caption box 
        className: 'caption-bottom',     
        // position of the caption (top or bottom) 
        position: 'bottom', 
        // caption span % of the image 
        spanWidth: '100%' 
    }); 
}); 
</script>


Firebug ne me signale plus de problème, mais jQuery ne fonctionne toujours pas. Smiley confus