php-resource



Zurück   PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr > Entwicklung > HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS
 

Login

 
eingeloggt bleiben
star Jetzt registrieren   star Passwort vergessen
 

 

 


HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS Probleme mit HTML5, Bootstrap oder jQuery ?

Antwort
 
LinkBack Themen-Optionen Thema bewerten
  #1 (permalink)  
Alt 22-03-2011, 09:34
xJonx
 Registrierter Benutzer
Links : Onlinestatus : xJonx ist offline
Registriert seit: Mar 2006
Ort: Bielefeld
Beiträge: 421
xJonx zeigte ein beschämendes Verhalten in der Vergangenheit
Standard setInterval schleife unterbinden

Moin liebe Gemeinde,

ich bastel derzeit nen bissle mit Javascript rum und habe mir ein kleines Script gebastelt, mit der ich eine kleine Gallery steuern kann.

Dieses Script ist natürlich noch nicht optimiert, weil ich halt an einer Stelle gerade noch feststecke: Wenn ich zB. einfach mal 4, 5mal Klicke oder zb. 'nen MouseWheel Controller mit einbinde, kommt es zu dem Problem das das Script in der Funktion fading() hängen bleibt. Sprich: Das Bild wird zwar gewechselt, aber er schleift durchgehend das Faden an sich durch.

Nun die Frage: Wie kann ich das Unterbinden? So das quasi nur 1 Event zugelassen wird, und alles andere Ignoriert wird, bis man das Event beendet ist. Oder aber: wie man die Schleife zum Faden, sicher nach beenden stopen kann.

Hier einmal das Script (leicht umgebrochen, damit es die Seite nicht sprengt!):
Code:
// Vordefinierte Vars
var img = new Array,
	project = new Array,
	page = new Array,
	currentImage = 0,
	i = 1, 
	j = 0, 
	k = 100, 
	active ;

// Datensaetze
img[0] = './images/projekt/01/1.jpg' ;
img[1] = './images/projekt/02/1.jpg' ;
img[2] = './images/projekt/03/1.jpg' ;

project[0] = 'Projekt 1' ;
project[1] = 'Projekt 2' ;
project[2] = 'Projekt 3' ;

page[0] = 'projekt_1.html' ;
page[1] = 'projekt_2.html' ;
page[2] = 'projekt_3.html' ;

// Fading
function fading() {
	if (j == 0) { i = i-0.1; k = k-10 ; if (i <= 0.1) { 
		j = 1 ; document.getElementById('galleryimage1').src = img[currentImage] ; 
	} } else { 
		i = i+0.1 ; k = k+10 ; if (i >= 0.9) { window.clearInterval(aktiv); i= 1 ; k= 100 ; j = 0 ; } }
	document.getElementById('image').style.opacity = i ;
	document.getElementById('image').style.filter = 'alpha(opacity=' + k + ')' ;
}

// Ansteuerung
function gallery(param) {
	if (param == 'next') {
		if (currentImage == (img.length-1)) { currentImage = 0 ; } 
		else { currentImage++ ; }
	}
	if (param == 'prev') {
		if (currentImage == 0) { currentImage = (img.length-1) ; } 
		else { currentImage-- ; }
	}
	document.getElementById('headline').innerHTML = project[currentImage] ; 
	document.getElementById('goto').href = page[currentImage] ;
	aktiv = window.setInterval('fading()', 1);
}
Beste Grüße,
Jon
__________________
Design & Coding with a breeze of madness at xjonx
Mit Zitat antworten
  #2 (permalink)  
Alt 22-03-2011, 10:18
Kropff
  Administrator
Links : Onlinestatus : Kropff ist offline
Registriert seit: Mar 2002
Ort: Köln
Beiträge: 11.722
Kropff befindet sich auf einem aufstrebenden Ast
Standard

Ich denke, dass du ggf. mit Event-Listenern arbeiten könntest.

Peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #3 (permalink)  
Alt 22-03-2011, 11:59
xJonx
 Registrierter Benutzer
Links : Onlinestatus : xJonx ist offline
Registriert seit: Mar 2006
Ort: Bielefeld
Beiträge: 421
xJonx zeigte ein beschämendes Verhalten in der Vergangenheit
Standard

Zitat:
Zitat von Kropff Beitrag anzeigen
Ich denke, dass du ggf. mit Event-Listenern arbeiten könntest.

Peter
Hey,

jau super. Im JS Bereich bin noch alles andere als Fit unterwegs.
Man fummelt sich halt nen bissle was zusammen und es klappt,
aber viele Dinge, naja, muss man erst noch rausfinden.

Das mit den Anonymen Funktionen ist super!
Dickes Lob an dich. Ich mag diese Art zu schreiben ...

Zu dem Thema: Meinste ich soll den Event onload einfügen,
nach dem Click entfernen und nach dem Ausführen wieder
hinzufügen?
__________________
Design & Coding with a breeze of madness at xjonx

Geändert von xJonx (22-03-2011 um 12:04 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 22-03-2011, 12:20
Kropff
  Administrator
Links : Onlinestatus : Kropff ist offline
Registriert seit: Mar 2002
Ort: Köln
Beiträge: 11.722
Kropff befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von xJonx Beitrag anzeigen
Zu dem Thema: Meinste ich soll den Event onload einfügen, nach dem Click entfernen und nach dem Ausführen wieder
hinzufügen?
Probier es aus.

Peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #5 (permalink)  
Alt 22-03-2011, 16:07
xJonx
 Registrierter Benutzer
Links : Onlinestatus : xJonx ist offline
Registriert seit: Mar 2006
Ort: Bielefeld
Beiträge: 421
xJonx zeigte ein beschämendes Verhalten in der Vergangenheit
Standard

Zitat:
Zitat von Kropff Beitrag anzeigen
Probier es aus.

Peter
Code:
window.onload = function() {
	var btnPrev = document.getElementById('btnPrev');
	var btnNext = document.getElementById('btnNext');
	if (navigator.userAgent.match(/MSIE/)) {
		btnPrev.attachEvent('onclick', function() { gallery('prev') ; });
		btnNext.attachEvent('onclick', function() { gallery('next') ; });
	} else {
		btnPrev.addEventListener('click', function() { gallery('prev') ; }, false);
		btnNext.addEventListener('click', function() { gallery('next') ; }, false);
	}
}
also damit komm ich weiter ... nur leider hilft das nicht bei dem bug.
ich hab jetzt zusätzlich noch mal versucht, diesen event zu entfernen
wenn man geklickt hat und erst wenn man beim clearInterval ankommt, wieder eingefügt.
Leider war das Ergebnis das selbe wie vorher: nur das ich nur noch einmal klicken musst ^^

Grüße,
Jon
__________________
Design & Coding with a breeze of madness at xjonx
Mit Zitat antworten
  #6 (permalink)  
Alt 22-03-2011, 16:14
Kropff
  Administrator
Links : Onlinestatus : Kropff ist offline
Registriert seit: Mar 2002
Ort: Köln
Beiträge: 11.722
Kropff befindet sich auf einem aufstrebenden Ast
Standard

Ich zitier mich mal selber:
Zitat:
Leider gilt dieses Prinzip nicht für das Entfernen eines Event-Handlers. Denn sobald man einen Event-Listener mit einer anonymen Funktion erstellt, ist erst mal hängen im Schacht.
Schau dir dazu mal dieses Tutorial an. Vielleicht solltest du erst mal ohne Fade-Effekt und setInterval arbeiten. Wenn das läuft, setzt du dich an den Effekt.

Peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #7 (permalink)  
Alt 22-03-2011, 16:29
xJonx
 Registrierter Benutzer
Links : Onlinestatus : xJonx ist offline
Registriert seit: Mar 2006
Ort: Bielefeld
Beiträge: 421
xJonx zeigte ein beschämendes Verhalten in der Vergangenheit
Standard

Also, ich hab beim rumbasteln jetzt erstmal diesen Weg hier gefunden:
Code:
function fading() {
	if (j == 0) { 
		i = i-0.1; 
		k = k-10 ; 
		if (i <= 0.1) { 
			j = 1 ; document.getElementById('galleryimage1').src = img[currentImage] ; 
		} 
	} else { 
		i = i+0.1 ; 
		k = k+10 ; 
		if (i >= 0.9) { 
			window.clearInterval(aktiv); i= 1 ; 
			k = 100 ; 
			j = 0 ;
			document.getElementById('btnPrev').onclick = function() { gallery('prev') ; }
			document.getElementById('btnNext').onclick = function() { gallery('next') ; }
		} 
	}
	document.getElementById('image').style.opacity = i ;
	document.getElementById('image').style.filter = 'alpha(opacity=' + k + ')' ;
}

// Ansteuerung
function gallery(param) {
	
	document.getElementById('btnPrev').onclick = '' ;
	document.getElementById('btnNext').onclick = '' ;
	
	if (param == 'next') {
		if (currentImage == (img.length-1)) { currentImage = 0 ; } 
		else { currentImage++ ; }
	}
	if (param == 'prev') {
		if (currentImage == 0) { currentImage = (img.length-1) ; } 
		else { currentImage-- ; }
	}
	document.getElementById('headline').innerHTML = project[currentImage] ; 
	document.getElementById('goto').href = page[currentImage] ;
	aktiv = window.setInterval('fading()', 1);
	Cufon.replace('H1');
}
window.onload = function() {
	document.getElementById('btnPrev').onclick = function() { gallery('prev') ; }
	document.getElementById('btnNext').onclick = function() { gallery('next') ; }
}
__________________
Design & Coding with a breeze of madness at xjonx

Geändert von xJonx (22-03-2011 um 16:34 Uhr)
Mit Zitat antworten
Antwort

Lesezeichen


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Fehler in while-Schleife unterbinden pepsi PHP Developer Forum 5 19-10-2007 15:45
[JS] Mehrmaliges setInterval führt zu Fehler hasch HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 3 23-11-2006 16:11
setinterval Funktion mit Parameter aufrufen?! busstop HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 6 19-04-2005 11:26
setInterval funtzt nicht... Metallica Grafik / Design / Flash ... 2 14-01-2003 17:49
eine Art Funktion setinterval() in php??? czapie PHP Developer Forum 4 11-09-2002 04:42

Themen-Optionen
Thema bewerten
Thema bewerten:

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 an


PHP News

ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlicht
ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlichtDie bekannte Marktplatzsoftware ebiz-trader ist in der Version 7.5.0 veröffentlicht worden.

28.05.2018 | Berni

Wissensbestand in Unternehmen
Wissensbestand in UnternehmenLebenslanges Lernen und Weiterbilden sichert Wissensbestand in Unternehmen

25.05.2018 | Berni


 

Aktuelle PHP Scripte

PHP Server Monitor

PHP Server Monitor ist ein Skript, das prüft, ob Ihre Websites und Server betriebsbereit sind.

11.09.2018 Berni | Kategorie: PHP/ Security
PHP WEB STATISTIK ansehen PHP WEB STATISTIK

Die PHP Web Statistik bietet Ihnen ein einfach zu konfigurierendes Script zur Aufzeichnung und grafischen und textuellen Auswertung der Besuchern Ihrer Webseite. Folgende zeitlichen Module sind verfügbar: Jahr, Monat, Tag, Wochentag, Stunde Folgende son

28.08.2018 phpwebstat | Kategorie: PHP/ Counter
Affilinator - Affilinet XML Produktlisten Skript

Die Affilinator Affilinet XML Edition ist ein vollautomatisches Skript zum einlesen und darstellen der Affili.net (Partnerprogramm Netzwerk) Produktlisten und Produktdaten. Im Grunde gibt der Webmaster seine Affilinet PartnerID ein und hat dann unmittelb

27.08.2018 freefrank@ | Kategorie: PHP/ Partnerprogramme
 Alle PHP Scripte anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 08:21 Uhr.