Bonjour,
J'ai recherché de nombreuses solutions sur le forum et sur internet pour corriger un soucis qui me bloque depuis plusieurs semaines. Je ne pense pas avoir assez de maîtrise en JS et JQuery pour arriver à solutionner cela seul et voilà pourquoi je fais appel à votre aide.
Ici, je vous présente le HEAD de mon site en cours de développement. Il sera plus clair une fois que j'aurais solutionné mes soucis, car pour une question de compréhension et pour retrouver facilement mon code j'ai tout inséré dans une seule balise SCRIPT à l'heure actuelle... Est ce une boulette provoquant des incompatibilité ??
A noter que les script séparément fonctionnent, dès que je tente de les mettre ensemble dans mon source... tout plante. JS non réactif, ou qui ne réalise pas ce qui est demandé.
J'ai utilisé l'une des dernières versions de JQuery qui dans les scripts n'était pas forcément celle ci mais plutôt la 1.2.X pour au moins l'un.
J'ai essayé de tout englober sous un même
J'ai aussi tenté de faire des clôtures mais ... sans résultat, déjà à mon avis, je les utilise probablement mal et je n'arrive pas à trouver THE solution
J'ai lu qu'il y avait une importance dans l'inclusion des fichiers JS... je n'ai pas trouvé de documentation précise à ce sujet.
La partie CSS
Ce qui suit la partie JS
Déjà, une question me trotte dans l'esprit, y a t il une erreur de code ??? Si vous avez une idée pour m'aider à solutionner ce soucis, grand merci car je vais laisser tomber ces librairies si ça continue.
J'ai perdu un temps fou et je ne sais plus quoi faire.
Modifié par WuKoDLaK (18 Jan 2011 - 23:29)
J'ai recherché de nombreuses solutions sur le forum et sur internet pour corriger un soucis qui me bloque depuis plusieurs semaines. Je ne pense pas avoir assez de maîtrise en JS et JQuery pour arriver à solutionner cela seul et voilà pourquoi je fais appel à votre aide.
Ici, je vous présente le HEAD de mon site en cours de développement. Il sera plus clair une fois que j'aurais solutionné mes soucis, car pour une question de compréhension et pour retrouver facilement mon code j'ai tout inséré dans une seule balise SCRIPT à l'heure actuelle... Est ce une boulette provoquant des incompatibilité ??
A noter que les script séparément fonctionnent, dès que je tente de les mettre ensemble dans mon source... tout plante. JS non réactif, ou qui ne réalise pas ce qui est demandé.
J'ai utilisé l'une des dernières versions de JQuery qui dans les scripts n'était pas forcément celle ci mais plutôt la 1.2.X pour au moins l'un.
J'ai essayé de tout englober sous un même
jQuery.noConflict();
jQuery(function($){
// code
});J'ai aussi tenté de faire des clôtures mais ... sans résultat, déjà à mon avis, je les utilise probablement mal et je n'arrive pas à trouver THE solution
J'ai lu qu'il y avait une importance dans l'inclusion des fichiers JS... je n'ai pas trouvé de documentation précise à ce sujet.
La partie CSS
<!-- CSS affichage général -->
<link rel="stylesheet" href="./css/stylesheet.css" type="text/css" media="screen" />
<!-- Correctif bug IE6 -->
<link rel="stylesheet" href="./css/ie6fix.css" type="text/css" media="screen" />
<!-- CSS pour Script Post it news -->
<link rel="stylesheet" href="./news/post-it.css" type="text/css" media="screen" />
<!-- CSS affichage dynamique du background -->
<link rel="stylesheet" href="./css/background.css" type="text/css" media="screen" />
<!-- CSS pour affichage du Menu -->
<link rel="stylesheet" href="./css/styleMenu.css" type="text/css" media="screen"/>
<!-- CSS affichage des fancybox -->
<link rel="stylesheet" href="./js/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<!-- CSS affichage du slide haut de page -->
<link rel="stylesheet" href="./css/slide.css" type="text/css" media="screen" />
<!-- Script en rapport avec les bibliothèques et JQuery 1.4.4 -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="./news/jquery.easynews.js"></script>
<script type="text/javascript" src="./js/jquery-ui-1.8.5.custom.min.js"></script>
<script type="text/javascript" src="./js/jquery.easing.1.3.js"></script>
<!-- Slide supérieur -->
<script src="./js/slide.js" type="text/javascript"></script>
<!-- Image popup -->
<script type="text/javascript" src="./js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<!-- menu -->
<style>
span.reference{
position:fixed;
left:10px;
bottom:10px;
font-size:12px;
}
span.reference a{
color:#aaa;
text-transform:uppercase;
text-decoration:none;
text-shadow:1px 1px 1px #000;
margin-right:30px;
}
span.reference a:hover{
color:#ddd;
}
ul.sdt_menu{
margin-left:auto;
margin-right:auto;
margin-top:110px;
}
</style>
<!-- PNG FIX for IE6 -->
<!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 -->
<!--[if lte IE 6]>
<script type="text/javascript" src="js/pngfix/supersleight-min.js"></script>
<![endif]-->
Ce qui suit la partie JS
<script>
// JS Gestion de la fancybox http://fancybox.net/
$(document).ready(function($){ {
$("a#num_utiles").fancybox({
'overlayColor' : '#000',
'overlayOpacity' : 0.9,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});
// JS Gestion du background dynamique
$(document).ready(function($){ {
(function(){
var i = 0;
setInterval(function(){
//on cache l'image immédiatement
$("#backgroundImage").removeClass("bg1, bg2").fadeOut(150, function(){
//on la ré-affiche avec un effet de transparence
$("#backgroundImage").addClass("bg"+(i++%2 + 1)).fadeIn(500);
});
}, 10000);
})();
});
// JS Gestion du post it de news
$(document).ready(function() {
var newsoption1 = {
firstname: "mynews", //id de la div contenant les news
secondname: "showhere", //id du conteneur où les news seront affichées
fourthname:"news_button", //la div qui contient les images de nvigation (suivant, precedent, pause)
newsspeed:'6000' //vitesse de defilement de news
}
$.init_news(newsoption1);
var myoffset=$('#news_button').offset();
var mytop=myoffset.top-1;
$('#news_button').css({top:mytop});
});
// JS Gestion du MENU
$(function() {
/**
* for each menu element, on mouseenter,
* we enlarge the image, and show both sdt_active span and
* sdt_wrap span. If the element has a sub menu (sdt_box),
* then we slide it - if the element is the last one in the menu
* we slide it to the left, otherwise to the right
*/
$('#sdt_menu > li').bind('mouseenter',function(){
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width':'170px',
'height':'170px',
'left':'0px'
},400,'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'140px'},500,'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({'height':'170px'},300,function(){
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length){
var left = '170px';
if($elem.parent().children().length == $elem.index()+1)
left = '-170px';
$sub_menu.show().animate({'left':left},200);
}
});
}).bind('mouseleave',function(){
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length)
$sub_menu.hide().css('left','0px');
$elem.find('.sdt_active')
.stop(true)
.animate({'height':'0px'},300)
.andSelf().find('img')
.stop(true)
.animate({
'width':'0Px',
'height':'0px',
'left':'85px'},400)
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'25px'},500);
});
});
$(function(){
// Accordion
$("#accordion").accordion({ header: "h3" });
// Tabs
$('#tabs').tabs();
// Dialog
$('#dialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
// Dialog Link
$('#dialog_link').click(function(){
$('#dialog').dialog('open');
return false;
});
// Datepicker
$('#datepicker').datepicker({
inline: true
});
// Slider
$('#slider').slider({
range: true,
values: [17, 67]
});
// Progressbar
$("#progressbar").progressbar({
value: 20
});
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
</script>
Déjà, une question me trotte dans l'esprit, y a t il une erreur de code ??? Si vous avez une idée pour m'aider à solutionner ce soucis, grand merci car je vais laisser tomber ces librairies si ça continue.
J'ai perdu un temps fou et je ne sais plus quoi faire.
Modifié par WuKoDLaK (18 Jan 2011 - 23:29)
et je vais appliquer ce que tu m'as conseillé plus haut le rendre plus lisible et plus fiable.