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 19-05-2009, 11:20
sir_holmes
 Registrierter Benutzer
Links : Onlinestatus : sir_holmes ist offline
Registriert seit: Apr 2001
Beiträge: 64
sir_holmes ist zur Zeit noch ein unbeschriebenes Blatt
Question Mausrad Scrolling in einem DIV

Hallo zusammen,

ich habe ein Problem mit der Implementierung einer Mausrad-Scrolling-Funktion. Ich benutze einen ganz normalen DIV-Scroller. Nun möchte ich aber, dass auch bei Nutzung des Mausrades der Inhalt gescrollt wird. Hat jemand eine Idee wie man das machen kann? Habe nichtmal einen Ansatz und bin aus anderen Scripts auch nicht schlau geworden.

Hier findet Ihr das Skript wie es bisher aussieht:

http://www.webassemblys.de/files/scr.../scroller.html


Danke schonmal für eine Antwort!


P.S.: Das Scrolling-Script

function TextScroll(scrollname, div_name, up_name, down_name)
{
this.div_name = div_name;
this.name = scrollname;
this.scrollCursor = 0;
this.speed = 5;
this.timeoutID = 0;
this.div_obj = null;
this.up_name = up_name;
this.dn_name = down_name;

{
if (document.getElementById) {
div_obj = document.getElementById(this.div_name);
if (div_obj) {
this.div_obj = div_obj;
this.div_obj.style.overflow = 'hidden';
}
div_up_obj = document.getElementById(this.up_name);
div_dn_obj = document.getElementById(this.dn_name);
if (div_up_obj && div_dn_obj) {
div_up_obj.onmousedown = function() { eval(scrollname + ".scrollUp();") };
div_up_obj.onmouseup = function() { eval(scrollname + ".stopScroll();") };

div_dn_obj.onmousedown = function() { eval(scrollname + ".scrollDown();") };
div_dn_obj.onmouseup = function() { eval(scrollname + ".stopScroll();") };
div_dn_obj.onmouseout = function() { eval(scrollname + ".stopScroll();") };

}
}
}

this.stopScroll = function() {
clearTimeout(this.timeoutID);
}

this.scrollUp = function() {
if (this.div_obj) {
this.scrollCursor = (this.scrollCursor - this.speed) < 0 ? 0 : this.scrollCursor - this.speed;
this.div_obj.scrollTop = this.scrollCursor;
this.timeoutID = setTimeout(this.name + ".scrollUp()", 60);
}
}

this.scrollDown = function() {
if (this.div_obj) {
this.scrollCursor += this.speed;
this.div_obj.scrollTop = this.scrollCursor;
this.timeoutID = setTimeout(this.name + ".scrollDown()", 60);
}
}

this.resetScroll = function() {
if (this.div_obj) {
this.div_obj.scrollTop = 0;
this.scrollCursor = 0;
}
}
}
Mit Zitat antworten
  #2 (permalink)  
Alt 19-05-2009, 11:25
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

1. The requested URL /files/scrolling/scroller.html was not found on this server.
2. bitte php-tags () benutzen

peter

EDIT:
und schau dir mal onscroll an
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite

Geändert von Kropff (19-05-2009 um 11:31 Uhr)
Mit Zitat antworten
  #3 (permalink)  
Alt 19-05-2009, 11:36
sir_holmes
 Registrierter Benutzer
Links : Onlinestatus : sir_holmes ist offline
Registriert seit: Apr 2001
Beiträge: 64
sir_holmes ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Hi,

ich hatte gerade noch etwas an dem Script geändert... die Datei liegt jetzt auf dem Server!

Schaue mich mal wg. onscroll um.
Mit Zitat antworten
  #4 (permalink)  
Alt 19-05-2009, 11:45
Benutzerbild von CiaoSen CiaoSen
  Administrator
Links : Onlinestatus : CiaoSen ist offline
Registriert seit: May 2009
Beiträge: 30
CiaoSen befindet sich auf einem aufstrebenden Ast
Standard

wenn ich es richtig verstanden habe, willst du nen eigenen Scrollbalken da haben?
Dann wird dir dieses Tutorial dir helfen -> Mouse wheel programming in JavaScript

anderfalls benutzt doch einfach overflow: auto;
Mit Zitat antworten
  #5 (permalink)  
Alt 19-05-2009, 11:46
sir_holmes
 Registrierter Benutzer
Links : Onlinestatus : sir_holmes ist offline
Registriert seit: Apr 2001
Beiträge: 64
sir_holmes ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Neenee, ich möchte dass man nicht auf die Pfeile klicken muss um zu scrollen, sondern mit dem Mausrad den gleichen Effekt hat. Dabei soll aber kein Scrollbalken sichtbar sein, optisch soll es genau so bleiben. Ist das machbar?
Mit Zitat antworten
  #6 (permalink)  
Alt 19-05-2009, 12:04
h3ll
 Registrierter Benutzer
Links : Onlinestatus : h3ll ist offline
Registriert seit: Mar 2008
Beiträge: 3.578
h3ll befindet sich auf einem aufstrebenden Ast
Standard

Also ich kann dir gleich sagen dass Mini-Gucklöcher mit Pfeiltasten zum Scrollen unter den Top 10 der Hassobjekte des Internets sind. Wer sowas macht, will einfach nur seine sadomasochistische Ader an seinen Besuchern ausleben.

Und du kannst nicht davon ausgehen, dass jeder ein Mausrad hat.

Kann man in dem Mistding überhaupt scrollen, wenn Javascript nicht verfügbar ist?
Mit Zitat antworten
  #7 (permalink)  
Alt 19-05-2009, 13:59
sir_holmes
 Registrierter Benutzer
Links : Onlinestatus : sir_holmes ist offline
Registriert seit: Apr 2001
Beiträge: 64
sir_holmes ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Nein kann man nicht. Allerdings ist der Prozentsatz derjenigen, die kein JavaScript benutzen doch eher gering. Kaum ein Nutzer kann heute ohne JS surfen... jegliche AJAX Anwendung würde wegfallen.

Der Kunde möchte explizit die beiden Scroll-Pfeile und keinen Balken. Insofern bin ich daran gebunden, finde die Lösung aber zugegebenermaßen auch nicht optimal.
Mit Zitat antworten
  #8 (permalink)  
Alt 19-05-2009, 14:05
h3ll
 Registrierter Benutzer
Links : Onlinestatus : h3ll ist offline
Registriert seit: Mar 2008
Beiträge: 3.578
h3ll befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von sir_holmes Beitrag anzeigen
Nein kann man nicht. Allerdings ist der Prozentsatz derjenigen, die kein JavaScript benutzen doch eher gering. Kaum ein Nutzer kann heute ohne JS surfen... jegliche AJAX Anwendung würde wegfallen.
Viele AJAX-Anwendungen machen aber Sinn. Kleine Minifenster, in denen man umständlich mit hässlichen Pfeiltasten scrollen muss ergeben keinen Sinn.

Hast du auch getestet, ob die Seite auf einem mobilen Endgerät (PDA, Handy, etc.) korrekt funktioniert? Denn immer mehr Leute surfen unterwegs mit ihrem tragbaren Gerät und diese würde ich nicht vernachlässigen.

Ist keine Kritik an dich, sondern eine Kritik generell an so einem "Konzept". Vielleicht kannst du deinem nächsten Auftraggeber solche schwachsinnigen Ideen besser gleich ausreden.
Mit Zitat antworten
  #9 (permalink)  
Alt 19-05-2009, 14:34
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

@ts
schon dem link von ciaosen gefolgt?

peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #10 (permalink)  
Alt 19-05-2009, 15:20
Benutzerbild von CiaoSen CiaoSen
  Administrator
Links : Onlinestatus : CiaoSen ist offline
Registriert seit: May 2009
Beiträge: 30
CiaoSen befindet sich auf einem aufstrebenden Ast
Standard

Also das mit den balken ist keine pflicht.
Das Tutorial zeigt dir, wie du die events des Mausrades abfangen kannst und daraus dann dein eigenes scrollen simulieren.

mfg jura
Mit Zitat antworten
  #11 (permalink)  
Alt 19-05-2009, 15:25
sir_holmes
 Registrierter Benutzer
Links : Onlinestatus : sir_holmes ist offline
Registriert seit: Apr 2001
Beiträge: 64
sir_holmes ist zur Zeit noch ein unbeschriebenes Blatt
Exclamation

Also ich habe jetzt versucht den Event-Handler einzubauen. Hat soweit auch geklappt... Scrollen per Mausrad klappt. Aber dafür kann man nicht mehr über die Pfeile scrollen!?!? An dem Code habe ich aber nichts verändert:


function TextScroll(scrollname, div_name, up_name, down_name)
{
this.div_name = div_name;
this.name = scrollname;
this.scrollCursor = 0;
this.speed = 5;
this.timeoutID = 0;
this.div_obj = null;
this.up_name = up_name;
this.dn_name = down_name;

{
if (document.getElementById) {
div_obj = document.getElementById(this.div_name);
if (div_obj) {
this.div_obj = div_obj;
this.div_obj.style.overflow = 'hidden';
}
div_up_obj = document.getElementById(this.up_name);
div_dn_obj = document.getElementById(this.dn_name);
if (div_up_obj && div_dn_obj) {
div_up_obj.onmousedown = function() { eval(scrollname + ".scrollUp();") };
div_up_obj.onmouseup = function() { eval(scrollname + ".stopScroll();") };
div_up_obj.onmouseout = function() { eval(scrollname + ".stopScroll();") };
div_dn_obj.onmousedown = function() { eval(scrollname + ".scrollDown();") };
div_dn_obj.onmouseup = function() { eval(scrollname + ".stopScroll();") };
div_dn_obj.onmouseout = function() { eval(scrollname + ".stopScroll();") };

}
}
}

this.handle(delta) = function {
if (delta < 0) {
div_dn_obj.onscroll = function() { eval(scrollname + ".scrollDown();") };
}
else {
div_up_obj.onscroll = function() { eval(scrollname + ".scrollUp();") };
}
}


this.stopScroll = function() {
clearTimeout(this.timeoutID);
}

this.scrollUp = function() {
if (this.div_obj) {
this.scrollCursor = (this.scrollCursor - this.speed) < 0 ? 0 : this.scrollCursor - this.speed;
this.div_obj.scrollTop = this.scrollCursor;
this.timeoutID = setTimeout(this.name + ".scrollUp()", 60);
}
}

this.scrollDown = function() {
if (this.div_obj) {
this.scrollCursor += this.speed;
this.div_obj.scrollTop = this.scrollCursor;
this.timeoutID = setTimeout(this.name + ".scrollDown()", 60);
}
}

this.resetScroll = function() {
if (this.div_obj) {
this.div_obj.scrollTop = 0;
this.scrollCursor = 0;
}
}
}


Hier noch einmal der Link mit der neuen Version. Und wie kann ich den Scrollbalken der jetzt auf einmal erschienen ist wieder verstecken!?

HTML Template
Mit Zitat antworten
  #12 (permalink)  
Alt 19-05-2009, 15:31
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 sir_holmes Beitrag anzeigen
Und wie kann ich den Scrollbalken der jetzt auf einmal erschienen ist wieder verstecken!?
PHP-Code:
overflownone
und bitte ab sofort php-tags verwenden! denn den code schau ich mir nicht an.

peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #13 (permalink)  
Alt 19-05-2009, 15:34
sir_holmes
 Registrierter Benutzer
Links : Onlinestatus : sir_holmes ist offline
Registriert seit: Apr 2001
Beiträge: 64
sir_holmes ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Mmmmh, funktioniert nicht - weder im JS noch im CSS...
und hat jemand eine Idee warum die Scrolling-Funktion über onmousedown nicht mehr funktionieren seit das Scroll-Event im Script ist!?
Mit Zitat antworten
  #14 (permalink)  
Alt 19-05-2009, 15:44
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 sir_holmes Beitrag anzeigen
Mmmmh, funktioniert nicht - weder im JS noch im CSS...
und hat jemand eine Idee warum die Scrolling-Funktion über onmousedown nicht mehr funktionieren seit das Scroll-Event im Script ist!?
weil dir da eine js-fehlermeldung um die ohren gehauen wird. zumindest, wenn man z.b. firebug benutzt

peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #15 (permalink)  
Alt 19-05-2009, 16:36
Benutzerbild von CiaoSen CiaoSen
  Administrator
Links : Onlinestatus : CiaoSen ist offline
Registriert seit: May 2009
Beiträge: 30
CiaoSen befindet sich auf einem aufstrebenden Ast
Standard

okay hab mal geschaut was du da falsch hast.
1. Da hast du 2 Klammern die zu nichts gehören kannst du raus tun
2. diese Zeile hier -> "this.handle(delta) = function" ist falsch
sie muss so heißen -> "this.handle = function(delta)"

dann gucken wir weiter.

Dein anderes Problem das du jetzt nicht mehr normal scrollen kannst. Das hatte ich auch mal, habs auch wegbekommen. Es liegt daran das er das beim rausgehen vom DIV er nicht den event mit dem mousewheel entfernt. Das musst du ihm nochmal sagen.
Mit Zitat antworten
Antwort

Lesezeichen

Stichworte
content, div, mausrad, scroller, scrolling


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

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Scrolling in einem Div-Container Aroree Apps und PHP Script Gesuche 12 18-12-2008 21:08
Scrolling aufm Kopf ... DaGuertliz HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 6 13-12-2004 21:42
Checkboxen aus einem Array lesen und wieder in einem anderen speichern. lord_fritte PHP Developer Forum 10 17-10-2004 20:17
problem mit mausrad Moqui Windows (Client/Server) 9 25-05-2003 11:50

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 17:02 Uhr.