11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

en plein développement d'un plugin destiné à l'animation de zones html type div, je souhaitait gérer la présence de tous les types de balises exitants.
Exemple : on clique sur un div, toutes les autres sont censées disparaitre.
Ca marche, à ceci pret qu'avec le flash, non...
Voici le code source de mon plugin :

/**
 * @author "pixelboy"
 */
 
(function($){
	$.fn.extend({ 
		//plugin name - fluidGrids
		fluidGrids: function(options) {

			//List and default values for available options
			var defaults = {
				//The target that we're going to use to handle click event
				hitTarget: 		'.animateMe',
				exclude:		'.exclude',
				animateSpeed: 	1000
			};
			
			var options = $.extend(defaults, options);
			
			//Both methods takent from SWFObject, thanks to them
			function removeObjectInIE(el) { 
			    var jbo = (typeof(el) == "string" ? getElementById(el) : el); 
			    if (jbo) { 
			        for (var i in jbo) { 
			            if (typeof jbo[i] == "function") { 
			                jbo[i] = null; 
			            } 
			        } 
			        jbo.parentNode.removeChild(jbo); 
			    } 
			} 
			function removeSWF(id) { 
			    var obj = (typeof(id) == "string" ? getElementById(id) : id); 
			    if(obj){ 
			        if (obj.nodeName == "OBJECT" || obj.nodeName == "EMBED") { 
			            if (ua.ie && ua.win) { 
			                if (obj.readyState == 4) { 
			                        removeObjectInIE(id); 
			                } 
			                else { 
			                    $(document).ready(function() { removeObjectInIE(id); }); 
			                } 
			            } 
			            else { 
			                obj.parentNode.removeChild(obj); 
			            } 
			        }else if(obj.childNodes && obj.childNodes.length > 0){ 
			            for(var i=0;i<obj.childNodes.length;i++){ 
			                removeSWF(obj.childNodes[i]); 
			            } 
			        } 
			    } 
			} 
			
			
    		return this.each(function() {
				
				var o = options;
				
				//Assign current element to variable
				var obj = $(this);
								
				//We assign default width height and positions to each object in order to get them back when necessary
				var objPosition = obj.position();
				
				//Get all ready to animate targets in innerViewport
				var items = $(o.hitTarget, obj);
				
				//Final coords of innerViewport
				var innerViewport = new Object();
				innerViewport.top = parseInt(objPosition.top);
				innerViewport.left = parseInt(objPosition.left);
				innerViewport.bottom = obj.height();
				innerViewport.right = obj.width();
				
				items.each(function(e){
					//Assign a pointer cursor to each clickable element
					$(this).css("cursor","pointer");
					
					if ($(this).attr(title).length){
						var targetUrl = $(this).attr(title);
					}
					
					
					//We assign default width height and positions to each object in order to get them back when necessary
					var itemPosition = $(this).position();
					var	itemTop = itemPosition.top;
					var	itemLeft = itemPosition.left;
					var itemWidth = $(this).width();
					var itemHeight = $(this).height();	
					
					//Both the original and it's animated clone
					var original = $(this);
					//To give the 
					if (original.css('background-image')){
						var urlImageOriginal = original.css('background-image').replace(/^url|[("")]/g, '');
						var imageToInsert = "<img src="+urlImageOriginal+"/>"						
					}
					
					var clone = $(this).clone();

					
					original.click(function() {
						$(clone).append(imageToInsert);
						$(clone).attr("id","clone");
					  	$(clone).attr('top',itemTop);
						$(clone).attr('left',itemLeft);
						$(clone).css("position","absolute");
						$(clone).insertAfter(this);						
						$(this).hide();		
															
				    	$(clone).animate({
							top: innerViewport.top,
							left: innerViewport.left,
							width: innerViewport.bottom,
							height: innerViewport.right
							},
							obj.animateSpeed);
						
							
						$("*",obj).not("#clone, #clone * , a , "+ o.exclude).fadeOut('fast');
						
						//Si l'objet du click est un lien
						return false;
				      });
				});				
    		});
    	}
	});
})(jQuery);


Vous noterez au passage les 2 méthodes removeSWF() et removeObjectInIE() empruntées a la librairie SWFObject.

N'étant pas trop sur de mon coup, je préfere, avant de m'embarquer dans des tests sans fin, vous faire part du probleme. L'un d'entre vous connait il un moyen de détecter la présence de flash, et de la traiter en conséquence pour qu'il dégage de mon DOM, via un fadeOut() ou un remove() ?
Merci ![/i][/i][/i]
Modifié par pixelboy (28 May 2010 - 14:59)