zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden setAttribute verhindert weitere bearbeitung von JS-Code

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.05.2009, 15:08
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.05.2007
Ort: CH
Beiträge: 4
mudsflapp befindet sich auf einem aufstrebenden Ast
Standard setAttribute verhindert weitere bearbeitung von JS-Code

Hy.

Weil das JQuery-Plugin supersizedjQuery-Plugin "Supersized": Autoskalierender Background mit Slideshow-Option und lightbox nicht miteinander kompatibel sind, habe ich per CSS und dem :focus selbst eins gemacht.
Da :focus bei zu wenigen Browser unterstützt wird, habe ich begonnen selbst per js diese funktionalität zu erreichen.

Das einzige was nicht funktioniert, ist das zurücksetzten des onclick-Attributs.

CSS:
Code:
.gallery a,
.gallery a img {
	width:148px;
	height:114px;
	display:block;
	float:left;
	border:3px solid white;
}
/* platzhalt per a-tag erstellen (für tests mit js deaktiviert) */
.g_allery a:focus,
.g_allery a.thumb {
	background-image:url(img/wb-lightbox/empty.jpg);
	background-position:3px 3px; /* hinter dem border hervorziehen */
	background-repeat:no-repeat;
	border-right:0; /* border entfernen damit hintergrundbild nicht abgeschnitten wird */
	border-bottom:0; /* und hier */
	width:151px; /* +3px, ersetzt border */
	height:117px; /* +3px ersetzt border */
}
/* grossansicht für bild erstellen (für tests mit js deaktiviert) */
.g_allery a:focus img,
.g_allery a:focus img.bigger {
	border:7px solid white;
	height:406px;
	left:50%;
	margin-left:-425px;
	margin-top:-400px;
	position:absolute;
	top:50%;
	width:567px;
}
Der HTML-Code sieht so aus:
HTML-Code:
<div class="gallery">
<a href="#"><img src="img/inhalt-bilder/werbeflaechen/thumb_0.jpg"/></a>
<a href="#"><img src="img/inhalt-bilder/werbeflaechen/thumb_1.jpg"/></a>
<a href="#"><img src="img/inhalt-bilder/werbeflaechen/thumb_2.jpg" /></a>
<a href="#"><img src="img/inhalt-bilder/werbeflaechen/thumb_3.jpg"/></a>
<a href="#"><img src="img/inhalt-bilder/werbeflaechen/thumb_4.jpg"/></a>
<a href="#"><img src="img/inhalt-bilder/werbeflaechen/thumb_5.jpg" /></a>
</div>
Und hier das JS, welches leider nicht komplett funktionieren wiill (getestet im FF3):
Code:
window.onload = function(){
	a_tags = document.getElementById('content').getElementsByTagName("A");
	
	for(i=0; i<a_tags.length; i++ ) {
		if(a_tags[i].firstChild.tagName == 'IMG') {
			a_tags[i].setAttribute('onclick', 'javascript: thumb(this);');
		}
	}	
}

function thumb(thumbnail) {
	thumbnail.className = "thumb";
	thumbnail.setAttribute('onclick', '');
	
	thumbnail.firstChild.className = "bigger";
	thumbnail.firstChild.setAttribute('onclick', 'javascript: goBack(this);');
}

function goBack(image) {
	image.removeAttribute("class");
	image.removeAttribute("onclick");
	image.parentNode.removeAttribute("class");
	
	// Das will nicht funktionieren:
	image.parentNode.setAttribute('onclick', 'javascript: thumb(this);');
}

Ich komm einfach nicht dahinter wieso das nicht funktionieren soll.
Wenn ich bei

Code:
image.parentNode.setAttribute('onclick', 'javascript: thumb(this);');
Das scheib':
Code:
image.parentNode.setAttribute('onclick', 'wasAuchImmer');
wird der Atribut-Wert geändert.. phuuu..

Wäre Euch wahnsinnig dankbar, auch wenn's nur ein Tipp ist.
Vielen Dank für Eure Zeit.

Peace
mudsflapp

Geändert von mudsflapp (21.05.2009 um 15:10 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.05.2009, 15:21
Benutzerbild von Gumbo
XHTMLforum-Kenner
 
Registriert seit: 22.08.2004
Ort: Trier
Beiträge: 2.733
Gumbo ist jedem bekanntGumbo ist jedem bekanntGumbo ist jedem bekanntGumbo ist jedem bekanntGumbo ist jedem bekanntGumbo ist jedem bekannt
Standard

Probier mal Folgendes:
Code:
image.parentNode.onclick = function() { thumb(this); };
__________________
Markus Wulftange
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.05.2009, 15:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.05.2007
Ort: CH
Beiträge: 4
mudsflapp befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank für Deine sehr schnelle Antwort

Leider gehts nicht, habe aber versucht den Code auch an andere Stellen ein zubauen:
wie z.B. hier:

Code:
for(i=0; i<a_tags.length; i++ ) {
		if(a_tags[i].firstChild.tagName == 'IMG') {
			a_tags[i].onclick = function() { thumb(this); };
		}
	}
bleibt leider unverändert.

Habe eine möglichkeit gefunden.. Seite neu laden..

Code:
function goBack(image) {
	location.reload();
}
Ist aber langsam und unelegant :P
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
HTML mit PHP Code aus Datenbank auslesen + ausführen Garlandt Serveradministration und serverseitige Scripte 14 01.05.2011 13:45
Wie Code effektiv in XHTML ausgeben? Schelm.isch (X)HTML 8 30.11.2008 16:17
Wort in Javascript Code einfügen; dann Javascript Code ausgeben Sp33dy G0nz4l3s Javascript & Ajax 1 23.05.2008 10:37
XHTML und CSS Code auszeichnen Lloyd Larkin Barrierefreiheit 11 20.07.2006 08:51


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:50 Uhr.