11540 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous!

J'ai développé un menu dynamique en jquery sur un site wordpress http://newradio.aurovilleradiotv.org. Lorsque l'on passe sur un item du menu, le code load les 4 derniers articles de la catégorie en question. Tout fonctionne bien mais j'ai des soucis avec les animations:
1. Je ne parviens pas à enrouler/dérouler le menu avec une jolie transition, cela casse le menu
2. Il y a un bug étrange quand je quitte le menu, de temps en temps le menu se reload tout seul sans faire apparaitre les sous-catégories sur la gauche
3. J'aimerais que le menu ne se déroule que quand je reste au moins 2 secondes sur #querymenu

Voici mon code, j'ai travaillé énormément dessus parce que je débute en jquery, mais là je sèche, donc toute aide sera grandement appréciée!


//******** LOAD LATEST POST IN MAIN MENU *******************************************************************************************/
var item
jQuery.noConflict()(function($){
 
 $(document).ready(function(){
 
		//When the mouse leave the menu area, hide the menu
	$('.menu-top').mouseleave(
		function(){
			clearTimeout(timer);
			timer = setTimeout(function() {
				$("#querySort").stop().animate({opacity: 0, height: '0px'}, 400,'swing',function(){
					var hideList = $('.snav');
 
					 for(j=0; j<hideList.length; j++)
					 {
					   var h = hideList[j];
					   $(h).css('display','none');
					 }
				});
			}, 500);
 
			return false;
		}
	);
 
 
 
 
 
   var items = $('.fnav>li.menu-item');
   //alert(items);
   for(i=0; i<items.length; i++)
   {
 
	  item = $(items[i]);  // convert to a jquery element in order to use jquery methods
	  //alert(item);
	  var id=item.attr('id');
	  id+="-child";
	  var child=item.find('.snav');
	  child.css('display','none');
	  //child.addClass(id,'child-menu');
	   child.addClass(id);
	  //child.addClass('child-menu');
	  child.appendTo('#submenu-items');
 
	  item.mouseenter(function(){
		 var hideList = $('.snav');
 
		 for(j=0; j<hideList.length; j++)
		 {
		   var h = hideList[j];
		   $(h).css('display','none');
		 }
 
	     var me = $(this); // to call the element from inside its function
		 var id=me.attr('id');
	     var childClass='.'+id+'-child';
		 //alert(childClass);
 
		 $(childClass).css('display','');
 
		 //height = $("#queryContainer").height() + 'px';
		 //height = $(childClass).height() + 100 + 'px';
 
		 height = 'auto';
		 $("#querySort").stop().animate({height:height, opacity: 1}, 400);
		 //sleep(1000);
		 //alert(childClass);
 
		 /*
		$(childClass).stop().fadeOut(200,
			function(){
				$("#submenu-items").stop().fadeIn(200)
			}
		)
		 */
		 //$("#submenu-items").animate({opacity: 0}, 400);
		 $(childClass+'>li:first-child').trigger('mouseenter');
 
	  })
 
 
   }
 
// });
 
//jQuery(function($) {
	var timer;
	var request;
	var parent;
 
 
 
 
	// replace these default settings with your own
	$.querySort = {
	path_to_template: 'http://newradio.aurovilleradiotv.org/wp-content/themes/valor/',
	number_of_posts: 4,
	default_category: ''
	}
	$("#querySort").css({opacity: 0, height: '0px'});
	//functions for the sorter
	$(".snav li").mouseenter(
		function(){ //hover In
			if(timer) {
				clearTimeout(timer);
				timer = null
			}
			var thecat = $(this).attr("data");
			var query = 'query=showposts%3D' + $.querySort.number_of_posts + '%26category_name%3D' + thecat;
			$("#querySort").stop().animate({opacity: 0}, 400);
 
 
 
			if ( request != undefined )
			{
				request.abort();
			}
 
			request = $.ajax({
				type: "GET",
				url: $.querySort.path_to_template + 'querySort.php',
				data: query,
				success: function(msg){
					$("#querySort").html( msg );
					$(".submenu-entry").hover(
						function(){
							if(timer) {
							clearTimeout(timer);
							timer = null
							}
							return false;
 
						}
					);
 
					height = $("#queryContainer").height() + 'px';
					$("#querySort").stop().animate({height:height, opacity: 1}, 400);
 
 
				}
			});
 
			/*
			$("#querySort").load($.querySort.path_to_template + 'querySort.php' + query, function() {
				$(".submenu-entry").hover(
					function(){
						if(timer) {
						clearTimeout(timer);
						timer = null
						}
						return false;
 
					}, 
					function(){
						clearTimeout(timer);
						timer = setTimeout(function() {
							$("#querySort").stop().animate({opacity: 0, height: '0px'}, 400);
						}, 500);
 
						return false;
					}
				);
				height = $("#queryContainer").height() + 'px';
				$("#querySort").stop().animate({height:height, opacity: 1}, 400);
			});
			*/
 
 
			return false;
		} /*, 
		function(){ //hover Out
			timer = setTimeout(function() {
			$("#querySort").stop().animate({opacity: 0, height: '0px'}, 400);
			}, 500);
			return false;
		} */
		);
	});
})

[/i]