11540 sujets

JavaScript, DOM et API Web HTML5

Bonjour à vous tous,

Voilà je suis en train de réalisé, en local, un site web pour ma copine.

Afin de lui donner un certain look j'ai intégré du javascript pour des effets avec Jquery.

Il y a 2 effets qui cohabitent parfaitement entre eux :
- Un effet "carousel" pour passer d'une actu à l'autre (script trouvé ici : http://sorgalla.com/jcarousel/)
- Un effet "accordion" pour afficher des rubriques (script trouvé ici : http://jqueryui.com/demos/accordion/)

Voilà comment je les appelle dans ma page html (dans la partie head):
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.7.3.custom.min.js"></script>
<script type="text/javascript" src="scripts/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="carousel/skin.css" />
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        vertical: true,
        scroll: 1
    });
});

$(function() {
	$( "#choix_action" ).accordion({
		autoHeight: false,
		navigation: true,
		collapsible: true,
		active: true
	});
});';


Le problème arrive lorsque je veux utiliser un script de personnalisation de scrollbar dans une <div>.
Pour faire cela j'ai trouvé le script "flexcroll" (http://www.hesido.com/web.php?page=customscrollbar)

Le problème est qu'il semble y avoir une incompatibilté entre ce script et celui "accordion" Smiley decu

En effet lorsque les 2 sont sur la même page l'effet "accordion" fonctionne mais pas celui qui personnalise la scrollbar.

Si j'enléve la partie de code correspondant à l'accordion :
$(function() {
	$( "#choix_action" ).accordion({
		autoHeight: false,
		navigation: true,
		collapsible: true,
		active: true
	});
});';


Cet effet ne fonctionne plus mais ma scrollbar est là et est personnalisée Smiley ohwell

Je précise que l'effet "carousel" fonctionne parfaitement avec l'un ou l'autre de ces effets, et même lorsque les 2 autres sont sur la page.

Pour apporter une précision, l'effet "flexcroll" est appliqué sur la <div> qui contient l'effet "accordion".
Est-ce que cela pourrait venir de cela?

Quelqu'un peut-il me dire ce que je dois faire pour remédier à ce problème ? Smiley confused

Je connais un peu le HTML (je l'apprends), mais pas du tout le javascript

En vous remerciant par avance pour toute l'aide apportée
Modifié par david0062 (14 Aug 2012 - 08:11)
Moui mais encore?

Fais profiter de tes connaissances....

J'ai cherché ce qui peut merder, j'ai essayé de contacter les développeur mais aucune réponse.
J'ai meme essayé avec "jQuery.noConflict();"...

Si je suis venu ici c'est que l'on m'a conseillé cette communauté.
Hello, essaie de mettre les deux initialisations de plugin dans le même dom.ready, et préférablement juste avant la fermeture de ta balise body.

Les inclusions de librairies restent dans le head.

<script type="text/javascript">
$(document).ready(function() {

  $('#mycarousel').jcarousel({
    vertical: true,
    scroll: 1
  });

  $('#choix_action').accordion({
    autoHeight: false,
    navigation: true,
    collapsible: true,
    active: true
  });

});
</script>


Une page en ligne serait aussi bienvenue si dispo.

Vérifie également que les ids de tes éléments sont correctes et que le chemin vers la CSS de ton carousel est ok.
Je ne veux pas polluer ce topic, parce que je ne sais que trop ce que c'est que d'attendre de l'aide.
Mais quand même..., quand même (!) : comment ne pas réagir au post de Adrien machin chose???!...

"Sur le plus beau trône du monde, on n'est jamais assis que sur son cul !"
Michel de Montaigne - 1533-1592

J'espère que tu trouveras la solution David ou qu'une personne généreuse et talentueuse de la Communauté comme Beyriem te l'apportera.
Modifié par Neum (14 Aug 2012 - 21:09)
Bonjour beyriem et merci pour ta réponse.

Je viens de faire comme tu m'as dit et le problème est toujours le même Smiley decu

Je vais essayer de mettre une page en ligne mais bon je débute donc le code est merdique et j'ai peur que certaines personnes m'attaquent de toutes part...

Je vais essayer de mettre une ou 2 pages en ligne pour que vous puissiez vous rendre compte.

Sinon je vais essayer avec un autre script qui permet de personnaliser la scrollbar d'une div à base de jquery (http://rocha.la/jQuery-slimScroll) car celui là au final je doute qu'il soit compatible jquery Smiley ohwell

Mais donc le javascript il est préférable de l'ajouter avant la balise </body>?


Neum je te remercie pour ton soutien Smiley confused
Tu dis ne pas te former en javascript et tu demandes que l’on t’aide en jquery. Au lieu de copier-coller au kilomètre sans rien comprendre, sois un peu plus curieux. Aujourd’hui avec la toile tous les cours sont disponibles. Ne pas se former aux bases et attendre une réponse clé en main, cela ne te fera nullement progresser. Désolé, mais pour apprendre à lire on a tous commencé par se coltiner l’alphabet. Certes il faut un peu de temps, un peu d’humilité, mais tout se fait naturellement avec un minimum curiosité.
Forme-toi. Pose des questions précises et on se fera un plaisir de t’aider. En revanche épargnes-nous celles du genre «Je copie-colle. Déboguez-moi ce code».
Bonjour à vous Smiley biggrin

Alors voilà j'ai laissé tomber le script "flexcroll" parce que comprendre un truc qui commence ça :
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('B F={2W:[],4F:8(){5(Y.1t){Y.5U(\'<11 57="5C/6p">.1R-5G-4T {3B: 2m !6a;}</11>\')};M.V(16,\'5m\',M.5E)},3O:8(g){B h=Y,J=16,23=6F;5(!h.1t||!h.4M)C;5(33(g)==\'3I\')g=Y.1t(g);5(g==Z||23.3b.2B(\'62\')!=-1||((23.3b.2B(\'6U\')!=-1||23.3b.2B(\'7d\')!=-1)&&!(33(5e)!="6x"&&5e.74))||23.7k==\'6h\'||(23.79.2B(\'7o\')!=-1&&23.3b.2B(\'70\')!=-1)){5(g!=Z)2b(g,\'1R-7g\',\'1R-5G-4T\');5(16.50)16.50(g);C};5(g.14){g.14.1G();C};5(F.5u(g))C;5(!g.1M||g.1M==\'\'){B k="6M",c=1;1B(Y.1t(k+c)!=Z){c++};g.1M=k+c}g.4I=2q 5q();g.14=2q 5q();B l=g.1M,4=g.4I,I=g.14;4.27={5Y:[\'-1s\',0],6Y:[0,\'-1s\'],6t:[\'1s\',0],7s:[0,\'1s\'],7f:[0,\'-1p\'],6e:[0,\'1p\'],7u:[0,\'-4W\'],77:[0,\'+4W\']};4.3R=["-2s","2s"];4.41=["-2s","2s"];4.1V=[[A,A],[A,A]];B m=T(\'6I\',E),H=T(\'7m\',E),G=T(\'66\',E),1l=T(\'72\',E);B o=T(\'7q\',E),1x=T(\'6B\',E),37=A;1l.D.1K=\'4P 5i 7i\';1l.2e();g.11.3B=\'2m\';1x.D.6l="7b";1x.D.1Z="53";1x.D.13="53";1x.D.1O="3h";1x.D.21="-6Q";1x.2e();B p=g.15,5y=g.1q;

C'est pas possible même avec la meilleure volonté du monde. Smiley decu

Donc j'ai cherché et j'ai trouvé ceci : http://rocha.la/jQuery-slimScroll

Là au moins le code est expliqué (et même très bien détaillé), je peux donc le comprendre (ce qui est mon but contrairement à ce que certains pensent Smiley ohwell ) et le personnaliser.

Et là tous mes effets fonctionnent parfaitement y compris sur la même page.

Bon il me reste plus qu'à espérer que ça fonctionnera avec ceci aussi : http://highslide.com Smiley confused