CSS überschreiben... Wahh, Hilfe!

Czerny · 15.06.2009

Edit: Ursprüngliches Problem hat sich erledigt.

solidFlex · 15.06.2009

Ich würde eindeutige(re) Funktionsnamen verwenden. Wen die Jungs von eBay nicht total verblödet sind nutzen sie auch ein Framework wie jQuery, MooTools etc. In dem Fall wäre $ schon vergeben. Für Scripte die in anderen Anwendungen zum Laufen kommen sollte man sich unbedingt an eine Namenskonvention halten wie z.B. "name_meiner_erweiterung_varaiable_a", dann ist man auf der sicheren Seite.

Das würde ich erst mal versuchen. Wird denn kein JS-Fehler ausgeworfen? Ansonsten sehe ich auch keinen Fehler.

Edit: Schau mal hier, sieht aus als nutzen sie Prototype. Dann ist klar, dass es Konflikte mit dem $ geben wird.

Czerny · 15.06.2009

solidFlex schrieb:
Ich würde eindeutige(re) Funktionsnamen verwenden. Wen die Jungs von eBay nicht total verblödet sind nutzen sie auch ein Framework wie jQuery, MooTools etc. In dem Fall wäre $ schon vergeben. Für Scripte die in anderen Anwendungen zum Laufen kommen sollte man sich unbedingt an eine Namenskonvention halten wie z.B. "name_meiner_erweiterung_varaiable_a", dann ist man auf der sicheren Seite.

Wenn die bei eBay jQuery oder noch besser MooTools im Auktionsdokument von sich aus eingebunden hätten, wäre ich nicht ständig mit so halb funktionierenden Umstandslösungen unterwegs bzw. nicht unterwegs.

Außerdem könnte man dann ja Inhalte anderer Websites reinmanipulieren... Ich glaub wenn mir da spontan lauter Blödsinn einfällt, nehmen die das Risiko erstrecht nicht auf sich. :drink:

Das würde ich erst mal versuchen. Wird denn kein JS-Fehler ausgeworfen? Ansonsten sehe ich auch keinen Fehler.

Ein Fehler kommt nicht, aber es macht einfach nicht das, was ich vorhatte, das es machen sollte (komischer Satzbau

).

Ich hab das Dokument mal zur Veranschaulichung hochgeladen. Je nach Auswahl wollte ich eigentlich den Textinhalt switchen lassen. Ich denke an meiner Funktion hab ich irgendwas vergessen oder übersehen oder doof gemacht, was ich einfach nicht erkennen will. :kopfkratz:

solidFlex · 15.06.2009

Achso, es funktion schon ohne eBay nicht...

Und ja, jetzt fällts mir auch auf. Ich hab den Code eben nur auf Fehler überprüft, und ganz vergessen zu checken was überhaupt passiert. In der Funktion change änderst Du ja nur die Variable. Das funktioniert auch. Aber dadurch ändert sich nichts am DOM bzw. den Styles. Die esprechenden Container müssen trotdem noch ein/ausgeblendet werden.

Ich würde es übrigens nicht so herum angehen. Alles auf display:none stellen und dann per JS einblenden empfiehlt sich einfach nicht. Blende lieber beide Inhalte ein und per onload dann den nichtgewünschten aus.

Czerny · 15.06.2009

solidFlex schrieb:
Und ja, jetzt fällts mir auch auf. Ich hab den Code eben nur auf Fehler überprüft, und ganz vergessen zu checken was überhaupt passiert. In der Funktion change änderst Du ja nur die Variable. Das funktioniert auch. Aber dadurch ändert sich nichts am DOM bzw. den Styles. Die esprechenden Container müssen trotdem noch ein/ausgeblendet werden.

Genau da steckt ja mein Problem, weil ich keine Ahnung hab, wie man das anders löst. Mit meinen Anfängerkenntnissen reichts da wohl nicht.

Die Idee hab ich mir vom Super-Seller Standardlayout geklaut, wollte es mir nur etwas umbasteln, sodass übers Dropdown eben entweder "en" oder "de" ausgegeben wird und sich im DOM entsprechend nur die Inhalte mit englischem Text oder die Inhalte auf Deutsch auf "display:block" umstellen und das jeweilige andere auf "display:none".

solidFlex · 15.06.2009

Ich schlage dir was anderes vor. So wie Du das machen willst geht es zwar auch, aber folgendes wäre eleganter:

Du zockst Dir die drei Funktionen hier: http://snipplr.com/view/3561/addclass-removeclass-hasclass/

Dann Die zugehörigen CSS-Rules:

Code:

#myContent .DE,
#myContent .EN {
   display:none;
}

#myContent.display_DE .DE {
   display:block;
}

#myContent.display_EN .EN {
   display:block;
}

Das HTML baust Du ungefähr so um:

Code:

<div id="myContent" class="display_EN">
   <div class="DE">hier deutscher inhalt</div>
   <div class="EN">hier englsicher inhalt</div>
</div>

Deine change-Funktion sollte dann ungefähr so aussehen:

Code:

function change(language) {
   var myContent=document.getElementById("myContent");
   removeClass(myContent,"display_DE");
   removeClass(myContent,"display_EN");
   if(language.options[0].selected) {
      addClass(myContent,"display_EN")
   }
   else if (language.options[1].selected) {
      addClass(myContent,"display_DE")
   }
}

Das Script beschränkt sich dann also auf das Austauschen des Klassennamens eines übergeordneten Containers.

Hoffe das hilft Dir.

Czerny · 15.06.2009

solidFlex schrieb:
Hoffe das hilft Dir.

Hey, das ist exakt was ich wollte, vielen Dank dafür!!! :dance:

Edit: Jetzt hab ich allerdings mit eBay wieder ein Problem...

Code:

function removeClass(ele,cls) {
	if (hasClass(ele,cls)) {
		var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
		ele.className=ele.className.replace(reg,' ');
	}
}

replace() ist in Auktionen nicht erlaubt. :faint:

Czerny · 15.06.2009

Ok, das Problem ist jetzt auch gelöst, nun steh ich schon wieder vor einem neuen...

HTML:

<style type="text/css">
	<!--

		#wrapper .de, #wrapper .en {
			display: none;
			visibility: hidden
		}

		#wrapper.german .de, #wrapper.english .en {
			display: block;
			visibility: visible
		}

	-->
</style>

HTML:

<script type="text/javascript">
	<!--

		/* <![CDATA[ */

			function choose(language) {
				var contents = document.getElementById('wrapper');
				if (language.options[0].selected) {
					contents.className = 'german';
					document.findingsearchbarfrm._nkw.value = 'Artikel suchen ...';
				} else if (language.options[1].selected) {
					contents.className = 'english';
					document.findingsearchbarfrm._nkw.value = 'Search item ...';
				}
			}

		/* ]]> */

	//-->
</script>

HTML:

<div id="wrapper" class="german">
	<div id="top">
		<div>
			<p class="de">
				Sprache:
			</p>
			<p class="en">
				Language:
			</p>
			<form method="post" action="">
				<select name="language" onchange="choose(this)">
					<option selected>Deutsch</option>
					<option>English</option>
				</select>
			</form>
			<form method="get" action="http://shop.ebay.de/merchant/puristi" name="findingsearchbarfrm">
				<input name="_nkw" type="text" value="Artikel suchen ..."
					onblur="if (this.value == '') this.value = 'Artikel suchen ...';"
					onfocus="if (this.value == 'Artikel suchen ...') this.value = '';" />
				<input type="submit" />
			</form>
		</div>
	</div>
</div>

Wie man im Script-Teil sieht, habe ich eingestellt, dass sich mit dem Ändern der Sprache im Dropdown auch der value-Eintrag im Textfeld auf ins Englische ändert.

Nun würde ich auch gern die folgende Funktion anpassen:

HTML:

<input name="_nkw" type="text" value="Artikel suchen ..."
	onblur="if (this.value == '') this.value = 'Artikel suchen ...';"
	onfocus="if (this.value == 'Artikel suchen ...') this.value = '';" />

Wenn der deutsche Inhalt geladen ist, wird der Texteintrag ausgeblendet, sobald man auf das Textfeld klickt und sofern man nichts anderes eingibt, wieder eingeblendet wenn es nicht mehr aktiv ist. Ich möchte gern, dass es in beiden Sprachen funktioniert, weiß aber nicht wie das umzusetzen wäre...

Würd mich freuen, wenn mir jemand schlaueres da weiterhilft. :nervi:

Czerny · 16.06.2009

Ich habe hier nochmal das aktuelle Script hochgeladen.

solidFlex · 16.06.2009

Moin Czerny,

Du kannst den Event-Handler direkt überschreiben:

Code:

document.findingsearchbarfrm._nkw.onblur=function(){
   this.value="Hallo Welt";
}

Czerny · 16.06.2009

solidFlex schrieb:
Du kannst den Event-Handler direkt überschreiben:

Ach die heißen da auch onblur und onfocus?

Ich hab mir einen abgegooglet aber nichts gefunden, weil genau das wusste ich nicht...

Edit: Funktioniert irgendwie gar nicht.

Code:

/* <![CDATA[ */

	document.findungsearchbarfrm._nkw.onfocus = function() {
		if (this.value == 'Artikel suchen ...') this.value = '';
	}
	document.findingsearchbarfrm._nkw.onblur = function() {
		if (this.value == '') this.value = 'Artikel suchen ...';
	}

	function choose(language) {
		var contents = document.getElementById('wrapper');
		if (language.options[0].selected) {
			contents.className = 'german';
			document.findingsearchbarfrm._nkw.value = 'Artikel suchen ...';
		} else if (language.options[1].selected) {
			contents.className = 'english';
			document.findingsearchbarfrm._nkw.value = 'Search item ...';
		}
	}

/* ]]> */

Ich hatte die beiden Funktionen erst bei if und else in der Funktion darunter gesetzt, um sie beim Wechseln auf Englisch eben auch auf englischen Inhalt umzustellen, hat aber genau so wenig funktioniert, als wenn ich sie einzeln als allumfassend obendrüberstecke...

solidFlex · 16.06.2009

Kannst Du nochmal ein aktuelles Beispiel online stellen? Wenn Du es außerhalb der Funktion definierst, musst Du darauf achten, dass der Code nach dem Element findungsearchbarfrm._nkw steht, sonst ist es für JS zu dem Zeitpunkt noch gar nicht bekannt. Aber in der Funktion sollte es eigentlich funktionieren.

Czerny · 16.06.2009

solidFlex schrieb:
Kannst Du nochmal ein aktuelles Beispiel online stellen?

Hab ich gemacht.

Wenn Du es außerhalb der Funktion definierst, musst Du darauf achten, dass der Code nach dem Element findungsearchbarfrm._nkw steht, sonst ist es für JS zu dem Zeitpunkt noch gar nicht bekannt. Aber in der Funktion sollte es eigentlich funktionieren.

Am liebste hätte ich ja, wenn ich unten beim <input> das onblur und onfocus ganz raus lasse und oben ins Script setze und dann irgendwie die Values je nach Sprache austauschen kann. Würde das Script so wie es ist funktionieren, wäre dann aber beim Laden der Seite kein Value vergeben glaub ich.

Edit: Habe das Dokument etwas bearbeitet, damit es valid ist und dabei das name Attribut aus der Suchform genommen und stattdessen dem Textfeld eine ID gegeben, über welche ich es nun im Script anspreche... Und plötzlich gehts.

Czerny · 19.06.2009

Moin zusammen,

habe das Script jetzt etwas gekürzt und noch einen Preloader dazugepackt.

PHP:

var i = 0;

// Image preloader

	var path = 'images/';

	var photo = [
		'0.jpg',
		'1.jpg',
		'2.jpg',
		'3.jpg'
	];

	function preload() {
		for (i = 0; i < photo.length; i ++) {
			var file = new Image();
			file.src = path + photo[i];
		}
	}

	preload();

// Language switcher

	function choose(language) {
		var content = document.getElementById('wrapper');
		var search = document.getElementById('search');
		var contents = [
			{
				choice: 'german',
				placeholder: 'Artikel suchen ...'
			},
			{
				choice: 'english',
				placeholder: 'Search item ...'
			}
		];
		for (i = 0; i < contents.length; i++) {
			for (attr in contents[i]) {
				if (language.options[i].selected) {
					content.className = contents[i].choice;
					search.value = contents[i].placeholder;
					search.onfocus = function() {
						if (this.value == contents[i].placeholder)
							this.value = '';
					}
					search.onblur = function() {
						if (this.value == '')
							this.value = contents[i].placeholder;
					}
				}
			}
		}
	}

Leider funktioniert das mit onfocus und onblur nicht und verursacht einen JavaScript-Fehler. Jemand eine Idee woran das liegen könnte?

Jakob · 19.06.2009

Na schick's doch mal durch einen Validator.

JSLint (http://www.jslint.com/ der ist allerdings ein wenig übervorsichtig, zeigt auch Warnungen an, die man nicht unbedingt beheben muss. Die Fehler siehst Du aber auch) spuckt folgendes aus

Implied global: document 2 3, i 14 15 16 17 18 20 25

Problem at line 15 character 18: Bad for in variable 'attr'.

for (attr in contents) {

Problem at line 21 character 29: Expected '{' and instead saw 'this'.

this.value = '';

Problem at line 23 character 21: Be careful when making functions within a loop. Consider putting the function in a closure.

search.onblur = function() {

Problem at line 22 character 22: Missing semicolon.

}

Problem at line 24 character 40: Use '===' to compare with ''.

if (this.value == '')

Problem at line 25 character 29: Expected '{' and instead saw 'this'.

this.value = contents.placeholder

Problem at line 25 character 65: Missing semicolon.

this.value = contents.placeholder

Problem at line 27 character 17: Be careful when making functions within a loop. Consider putting the function in a closure.

}

Problem at line 26 character 22: Missing semicolon.

}

Problem at line 1 character 31: Unmatched '{'.

function choose(language) {

Czerny · 19.06.2009

Den Fehler mit dem fehlenden Semikolon beim onblur habe ich auch schon gefunden, war aus der Flüchtigkeit, weil ich die beiden Funktionen noch schnell reingeschrieben hatte. Bis auf die beiden funktioniert alles einwandfrei, nur an den onfocus und onblur dingern harkt es.

CSS überschreiben... Wahh, Hilfe!

Czerny

Mitglied

solidFlex

Aktives Mitglied

Czerny

Mitglied

solidFlex

Aktives Mitglied

Czerny

Mitglied

solidFlex

Aktives Mitglied

Czerny

Mitglied

Czerny

Mitglied

Czerny

Mitglied

solidFlex

Aktives Mitglied

Czerny

Mitglied

solidFlex

Aktives Mitglied

Czerny

Mitglied

Czerny

Mitglied

Jakob

Aktives Mitglied

Czerny

Mitglied