2 scripts blockieren sich

Momo95

Erfahrenes Mitglied
Hallo,

ich habe 2 scripts, welch jeweils nur alleine laufen.
Woran könnte das liegen?

1.Script:
Code:
$(document).ready(function() {

	$("#footnav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag

	$("#footnav li").each(function() { //For each list item...
		var linkText = $(this).find("a").html(); //Find the text inside of the <a> tag
		$(this).find("span").show().html(linkText); //Add the text in the <span> tag
	}); 

	$("#footnav li").hover(function() {	//On hover...
		$(this).find("span").stop().animate({
			marginTop: "-40" //Find the <span> tag and move it up 40 pixels
		}, 250);
	} , function() { //On hover out...
		$(this).find("span").stop().animate({
			marginTop: "0"  //Move the <span> back to its original state (0px)
		}, 250);
	});

});

2. Script:
Code:
/* DHTML Color Picker, Programming by Ulyses, ColorJack.com */
/* This version featured on/ available at Dynamic Drive: http://www.dynamicdrive.com */
/*Minor fixes by DD: Disabled text selection during dragging, fixed IE doctype issue with document.body */

var standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
function $(v) { return(document.getElementById(v)); }
function $S(v) { return($(v).style); }
function browser(v) { return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0)); }
function toggle(v) { $S(v).display=($S(v).display=='none'?'block':'none'); }
function within(v,a,z) { return((v>=a && v<=z)?true:false); }
function XY(e,v) { var z=browser('msie')?Array(event.clientX+standardbody.scrollLeft,event.clientY+standardbody.scrollTop):Array(e.pageX,e.pageY); return(z[zero(v)]); }
function zero(v) { v=parseInt(v); return(!isNaN(v)?v:0); }
function zindex(d) { d.style.zIndex=zINDEX++; }

/* PLUGIN */

var maxValue={'h':'359','s':'100','v':'100'},HSV={0:359,1:100,2:100};
var SVHeight=165,wSV=162,wH=162,slideHSV={0:359,1:100,2:100},zINDEX=15,stop=1;

function HSVslide(d,o,e) {
A
	function tXY(e) { tY=XY(e,1)-top; tX=XY(e)-left; }
	function mkHSV(a,b,c) { return(Math.min(a,Math.max(0,Math.ceil((parseInt(c)/b)*a)))); }
	function ckHSV(a,b) { if(within(a,0,b)) return(a); else if(a>b) return(b); else if(a<0) return('-'+oo); }
	function drag(e) { if(!stop) {
	
		if(d=='SVslide') { tXY(e); ds.left=ckHSV(tX-oo,wSV)+'px'; ds.top=ckHSV(tY-oo,wSV)+'px';
		
			slideHSV[1]=mkHSV(100,wSV,ds.left); slideHSV[2]=100-mkHSV(100,wSV,ds.top); HSVupdate();
			
		}
		else if(d=='Hslide') {
		
			tXY(e); ds.top=(ckHSV(tY-oo,wH)-5)+'px'; slideHSV[0]=mkHSV(359,wH,ds.top);
 
			function commit() { var r='hsv',z={},j='';

				for(var i=0; i<=r.length-1; i++) { j=r.substr(i,1); z[i]=(j=='h')?maxValue[j]-mkHSV(maxValue[j],wH,ds.top):HSV[i]; }
				
				return(HSVupdate(hsv2hex(z)));

			}

			mkColor(commit()); $S('SV').backgroundColor='#'+hsv2hex(Array(HSV[0],100,100));
		
		}
		else if(d=='drag') { ds.left=XY(e)+oX-eX+'px'; ds.top=XY(e,1)+oY-eY+'px'; }
	}
	if (e && e.preventDefault)
		e.preventDefault()
	else
		return false
	}

	if(stop) { stop=''; var ds=$S(d!='drag'?d:o);

		if(d=='drag') { var oX=parseInt(ds.left), oY=parseInt(ds.top), eX=XY(e), eY=XY(e,1); zindex($(o)); }
		else { var left=($(o).offsetLeft+10), top=($(o).offsetTop+22), tX, tY, oo=(d=='Hslide')?2:4; if(d=='SVslide') slideHSV[0]=HSV[0]; }
		document.onmousemove=drag; document.onmouseup=function(){ stop=1; document.onmousemove=''; document.onmouseup=''; }; drag(e);

	}
}

function HSVupdate(v) { HSV=v?hex2hsv(v):Array(slideHSV[0],slideHSV[1],slideHSV[2]);

	if(!v) v=hsv2hex(Array(slideHSV[0],slideHSV[1],slideHSV[2]));
	
	mkColor(v); $('plugHEX').innerHTML=v; return(v);

}

function loadSV() { var z=''; for(var i=SVHeight; i>=0; i--) z+="<div style=\"BACKGROUND: #"+hsv2hex(Array(Math.round((359/SVHeight)*i),100,100))+";\"><br /><\/div>"; $('Hmodel').innerHTML=z; }

function updateH(v) { HSV=hex2hsv(v);

	$S('SV').backgroundColor='#'+hsv2hex(Array(HSV[0],100,100)); 
	$S('SVslide').top=(parseInt(wSV-wSV*(HSV[2]/100))-4)+'px'; $S('SVslide').left=parseInt(wSV*(HSV[1]/100))+'px';
	$S('Hslide').top=(parseInt(wH*((maxValue['h']-HSV[0])/maxValue['h']))-7)+'px';

}

/* CONVERSIONS */

function toHex(v) { v=Math.round(Math.min(Math.max(0,v),255)); return("0123456789ABCDEF".charAt((v-v%16)/16)+"0123456789ABCDEF".charAt(v%16)); }
function hex2rgb(r) { return({0:parseInt(r.substr(0,2),16),1:parseInt(r.substr(2,2),16),2:parseInt(r.substr(4,2),16)}); }
function rgb2hex(r) { return(toHex(r[0])+toHex(r[1])+toHex(r[2])); }
function hsv2hex(h) { return(rgb2hex(hsv2rgb(h))); }	
function hex2hsv(v) { return(rgb2hsv(hex2rgb(v))); }

function rgb2hsv(r) { // easyrgb.com/math.php?MATH=M20#text20

	var max=Math.max(r[0],r[1],r[2]),delta=max-Math.min(r[0],r[1],r[2]),H,S,V;
	
	if(max!=0) { S=Math.round(delta/max*100);

		if(r[0]==max) H=(r[1]-r[2])/delta; else if(r[1]==max) H=2+(r[2]-r[0])/delta; else if(r[2]==max) H=4+(r[0]-r[1])/delta;

		var H=Math.min(Math.round(H*60),360); if(H<0) H+=360;

	}

	return({0:H?H:0,1:S?S:0,2:Math.round((max/255)*100)});

}

function hsv2rgb(r) { // easyrgb.com/math.php?MATH=M21#text21

	var R,B,G,S=r[1]/100,V=r[2]/100,H=r[0]/360;

	if(S>0) { if(H>=1) H=0;

		H=6*H; F=H-Math.floor(H);
		A=Math.round(255*V*(1.0-S));
		B=Math.round(255*V*(1.0-(S*F)));
		C=Math.round(255*V*(1.0-(S*(1.0-F))));
		V=Math.round(255*V); 

		switch(Math.floor(H)) {

			case 0: R=V; G=C; B=A; break;
			case 1: R=B; G=V; B=A; break;
			case 2: R=A; G=V; B=C; break;
			case 3: R=A; G=B; B=V; break;
			case 4: R=C; G=A; B=V; break;
			case 5: R=V; G=A; B=B; break;

		}

		return({0:R?R:0,1:G?G:0,2:B?B:0});

	}
	else return({0:(V=Math.round(V*255)),1:V,2:V});

}
 
Das zweite Skript definiert eine Funktion mit dem Namen "$". Den gleichen Namen benutzt bereits jQuery.

So müsste es gehen:

Javascript:
jQuery.noConflict();

jQuery(document).ready(function($) {
 
    $("#footnav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag
 
    $("#footnav li").each(function() { //For each list item...
        var linkText = $(this).find("a").html(); //Find the text inside of the <a> tag
        $(this).find("span").show().html(linkText); //Add the text in the <span> tag
    }); 
 
    $("#footnav li").hover(function() { //On hover...
        $(this).find("span").stop().animate({
            marginTop: "-40" //Find the <span> tag and move it up 40 pixels
        }, 250);
    } , function() { //On hover out...
        $(this).find("span").stop().animate({
            marginTop: "0"  //Move the <span> back to its original state (0px)
        }, 250);
    });
 
});

Siehe auch: http://api.jquery.com/jQuery.noConflict/
 
Zuletzt bearbeitet:
Super, vielen Dank!
Hat geklappt.

Eine Frage noch:

mit der Funktion "toggle" wird ein div aus und wieder eingeblendet.
Beim öffnen der php ist das div zu sehen. Kann man das umkehren, somit das div zuerst verstecht ist, und erst bei klick zu sehen ist?
 
Zuletzt bearbeitet:
Verstecke es beim Laden der Seite (ready-Funktion) via "hide()". Oder, falls du JavaScript für die Seite voraussetzt, kannst du auch dem Element von vornerein "style="display:none;"" verpassen, dann bleibt auch ein eventuelles "aufblinken" aus, falls das Element evtl. noch kurz sichtbar ist.
 
Noch was:

Ich möchte in 2 divs die bg-color ändern.
Hier muss man die div-id festlegen. Aber kann man 2 definieren?

Code:
document.getElementById("color").style.backgroundColor =
 
Du verwendest doch schon jQuery, dann benutz es auch überall. Genauso wie bei CSS Selektoren üblich kannst du mit Komma getrennt mehrere Objekte auswählen/mehrere Selektoren verwenden.

Javascript:
$("#div1, #div2").css('background-color', 'blue');
 
Danke, aber ich brauche es im 2. code bzw. in dem gerade von mir geposteten.

Der 1. ist für die navigation und der 2. von einem colorpicker. Jezt möchte ich aber nicht nur bei einem div die frabe ändern, sondern eben dei 2 divs.
Also: Wie kann man bei document.getElementById("color").style.backgroundColor = 2 Objekte auswählen?
 
Also: Wie kann man bei document.getElementById("color").style.backgroundColor = 2 Objekte auswählen?

Gar nicht. getElementById liefert 0 oder 1 Elemente zurück (eine ID ist ja eindeutig). Benutz es für jedes Element einmal.

Javascript:
document.getElementById("color").style.backgroundColor = 'blue';
document.getElementById("color2").style.backgroundColor = 'red';
 
Zurück