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, 12: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, 12: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 12:31 Uhr)
Mit Zitat antworten
  #3 (permalink)  
Alt 19-05-2009, 12: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, 12: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, 12: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, 13:04
h3ll
 Registrierter Benutzer
Links : Onlinestatus : h3ll ist offline
Registriert seit: Mar 2008
Beiträge: 3.593
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, 14: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, 15:05
h3ll
 Registrierter Benutzer
Links : Onlinestatus : h3ll ist offline
Registriert seit: Mar 2008
Beiträge: 3.593
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, 15: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, 16: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, 16: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, 16: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, 16: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, 16: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, 17: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 22:08
Scrolling aufm Kopf ... DaGuertliz HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 6 13-12-2004 22:42
Checkboxen aus einem Array lesen und wieder in einem anderen speichern. lord_fritte PHP Developer Forum 10 17-10-2004 21:17
problem mit mausrad Moqui Windows (Client/Server) 9 25-05-2003 12: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

ADSMAN V3 - Werbe-Manager ansehen ADSMAN V3 - Werbe-Manager

ADSMAN V3 - mehr als nur ein Bannermanager! Banner, Textanzeigen und PagePeel Manager! Mit ADSMAN PRO haben Sie die Marketinglösung für eine effektive und effiziente Werbeschaltung mit messbaren Ergebnissen. Unterstützt werden Bannerformate in beliebi

25.10.2018 virtualsystem | Kategorie: PHP/ Bannerverwaltung
PHP News und Artikel Script V2

News schreiben, verwalten, veröffentlichen. Dies ist jetzt mit dem neuen PHP News & Artikel System von virtualsystem.de noch einfacher. Die integrierte Multi-User-Funktion und der WYSIWYG-Editor (MS-Office ähnliche Bedienung) ermöglichen...

25.10.2018 virtualsystem | Kategorie: PHP/ News
Top-Side Guestbook

Gästebuch auf Textbasis (kein MySQL nötig) mit Smilies, Ip Sperre (Zeit selbst einstellbar), Spamschutz, Captcha (Code-Eingabe), BB-Code, Hitcounter, Löschfunktion, Editierfunktion, Kommentarfunktion, Kürzung langer Wörter, Seiten- bzw. Blätterfunktion, V

22.10.2018 webmaster10 | Kategorie: PHP/ Gaestebuch
 Alle PHP Scripte anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 07:35 Uhr.