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 12-12-2007, 15:16
Bierbaron
 Newbie
Links : Onlinestatus : Bierbaron ist offline
Registriert seit: Jan 2004
Beiträge: 7
Bierbaron ist zur Zeit noch ein unbeschriebenes Blatt
Standard DIV Inhalt automatisch scrollen je nach Mausposition

Hallo zusammen,

mich beschäftigt jetzt seit einigen Tagen ein Problem, das ich einfach nicht auf die Kette bekomme. Ich konnte auch nach stundenlanger Suche keine Lösung finden, die mich essenziell weiter gebracht hätte.
Ich hätte gerne eine DIV Scroller Lösung, funktional exakt wie sie auf http://www.renault.de/ zu sehen ist.
In der Mitte bei "Neuwagen" und "Transporter" kann man sich durch das Menü scrollen, dass passiert automatisch, je nach dem wo sich die Maus gerade befindet. Auf dieser Seite ist das mit Flash gelöst, ich hätte jedoch gerne eine saubere und vor allem barrierefreie und suchmaschinengerechte Version, weshalb das Menü grundsätzlich komplett angezeigt werden soll, und für JS Browser eben anständig formatiert. Damit fällt auch weg, dass ich den Inhalt irgendwie mit JavaScript und innerHTML oder document.write einbringe!

Hier mal mein primitiver Code bisher:

PHP-Code:
<style>
#scroll{
   
overflow:hidden;
   
width:200px;
   
height:100px;
   
border:1px solid #CCC;
   
background#F4F4F4;
}
</
style>
<
script>
iTop 0;
function 
DoIt(obj,evt,content)
{
   
intTop = (evt.offsetY) ? evt.offsetY evt.layerY;
   
objMdl obj.offsetHeight 2;

   if(
intTop objMdl)
   {
      
window.status="oben"//debug
      
iTop=iTop+2;
      
document.getElementById(''+content+'').style.marginTop=iTop;
      
//window.setTimeout(DoIt(obj,evt,content), 1000);
   
}

   if(
intTop objMdl)
   {
      
window.status="unten"//debug
      
iTop=iTop-2;
      
document.getElementById(''+content+'').style.marginTop=iTop;
      
//window.setTimeout(DoIt(obj,evt,content), 1000);
   
}
}
</script>
<body>
<div id="scroll" onmouseover="DoIt(this,event,'content')">
   <ul id="content">
      <li>1</li>
      <li>2</li>
      <li>321</li>
      <li>421</li>
      <li>521</li>
      <li>621</li>
      <li>6721</li>
      <li>343243241</li>
      <li>1sadsad</li>
      <li>1sad</li>
      <li>1wqeqweqwes</li>
      <li>1asdsadsadsad</li>
      <li>1asdsad</li>
   </ul>
</div> 
Soweit so gut. Ich prüfe die Höhe des Scrollers und je nach dem ob der Mauszeiger in der oberen Hälfte oder der unteren ist, erhöhe oder veringere ich das margin des darin befindlichen <ul> Elements.

Das Problem ist, dass ich nur scrolle, wenn ich die Maus bewege. Ich dachte mir dem rekursiven Aufruf (hier auskommentiert) käme ich dann soweit, dass er weiter scrollt. Dann läuft er aber in einen timeout mit "out of memory" Fehler. Zudem habe ich noch keine Idee, wie ich dem Script beibringen kann, dass wenn er unten angekommen ist, er nicht mehr weiter das margin erhöhen soll.

An eine weiche Scrollfunktion oder gar das abbremsen bzw. je nach Mausposition schnellere oder langsamere scrollen ist auch noch nicht zu denken, letzteres bekäme ich aber schon hin.

Ist hier irgendwer der mir da helfen kann? Wie gesagt, je näher es an diese Flash Funktion herankommt, umso besser. Zudem liebe ich es gerne einfach. Am liebsten wäre natürlich, dass ich diese Funktion mit Parametern immer wieder überall aufs neue einbinden kann, und die Funktion zentral irgendwo in einer JS-Datei unterbringen kann.

Gruß
Armin
__________________
Mein Meerschweinchen Ratgeber
Mit Zitat antworten
  #2 (permalink)  
Alt 12-12-2007, 15:49
PHP-Desaster
 PHP Expert
Links : Onlinestatus : PHP-Desaster ist offline
Registriert seit: Mar 2006
Beiträge: 3.105
PHP-Desaster befindet sich auf einem aufstrebenden Ast
Standard

Vielleicht kannste hiermit was anfangen, so als Grundlage?
Mit Zitat antworten
  #3 (permalink)  
Alt 12-12-2007, 15:59
pekka
 PHP Master
Links : Onlinestatus : pekka ist offline
Registriert seit: Jun 2001
Ort: Köln
Beiträge: 6.608
pekka befindet sich auf einem aufstrebenden Ast
Standard

Auch bei Scriptaculous im "Treasure Chest" reingucken und unbedingt auch bei MooTools, vielleicht gibts sowas schon fertig.
Mit Zitat antworten
  #4 (permalink)  
Alt 12-12-2007, 18:27
Hopka
 PHP Expert
Links : Onlinestatus : Hopka ist offline
Registriert seit: May 2003
Ort: Köln
Beiträge: 2.172
Hopka ist zur Zeit noch ein unbeschriebenes Blatt
Hopka eine Nachricht über ICQ schicken
Standard

Das geht auch mit ein paar Zeilen JavaScript, da braucht man kein Framework für.

Eigentlich musst du nur die Position der Maus innerhalb des (kleineren) Containers abbilden auf die Position des (größeren) Inhaltes. Ist im Prinzip Dreisatz.

Du brauchst die Höhe des Containers und die Mausposition innerhalb des Containers. Dann teilst du die Position durch die Höhe, so dass ein Wert zwischen 0 und 1 rauskommt. Den multiplizierst du mit der Höhe des Inhalts und nimmst das als negativen margin-top. Eventuell kannst du noch bei der Größe die Höhe des Containers abziehen, weil der Inhalt sonst nach oben komplett "rausgescrollt" wird.

Und weil grad Werbepause ist, hab ich noch ne Demo gemacht: Scroller.
__________________
hopka.net!
Mit Zitat antworten
  #5 (permalink)  
Alt 12-12-2007, 18:46
ghostgambler
 Master
Links : Onlinestatus : ghostgambler ist offline
Registriert seit: Jul 2004
Ort: DE - NRW
Beiträge: 4.620
ghostgambler ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Also ich persönlich find dieses Auto-Scrollen spontan lästig und würde demnach einfach einen div mit fester Höhe und overflow:auto; vorschlagen.
Mit Zitat antworten
  #6 (permalink)  
Alt 12-12-2007, 19:50
PHP-Desaster
 PHP Expert
Links : Onlinestatus : PHP-Desaster ist offline
Registriert seit: Mar 2006
Beiträge: 3.105
PHP-Desaster befindet sich auf einem aufstrebenden Ast
Standard

So einfach ist es nicht @Hopka:
Zitat:
Soweit so gut. Ich prüfe die Höhe des Scrollers und je nach dem ob der Mauszeiger in der oberen Hälfte oder der unteren ist, erhöhe oder veringere ich das margin des darin befindlichen <ul> Elements.
Da musst du schon mit Timeouts arbeiten, ein einfaches mousemove reicht da nicht!
Mit Zitat antworten
  #7 (permalink)  
Alt 12-12-2007, 20:48
tontechniker
 PHP Senior
Links : Onlinestatus : tontechniker ist offline
Registriert seit: Jul 2005
Beiträge: 1.972
tontechniker ist zur Zeit noch ein unbeschriebenes Blatt
Standard

OffTopic:
Wofür haben inzwischen eigentlich 99% aller Benutzer ein Scrollrad (ja, sogar die mit Mac)?
__________________
Die Regeln | rtfm | register_globals | strings | SQL-Injections | []
Mit Zitat antworten
  #8 (permalink)  
Alt 12-12-2007, 21:32
Hopka
 PHP Expert
Links : Onlinestatus : Hopka ist offline
Registriert seit: May 2003
Ort: Köln
Beiträge: 2.172
Hopka ist zur Zeit noch ein unbeschriebenes Blatt
Hopka eine Nachricht über ICQ schicken
Standard

Zitat:
Original geschrieben von PHP-Desaster
So einfach ist es nicht @Hopka:
Da musst du schon mit Timeouts arbeiten, ein einfaches mousemove reicht da nicht!
Also für's Erste tut es doch (fast) genau das, was auch das Teil auf der Renault-Seite macht.

Zitat:
Original geschrieben von Bierbaron
An eine weiche Scrollfunktion oder gar das abbremsen bzw. je nach Mausposition schnellere oder langsamere scrollen ist auch noch nicht zu denken, letzteres bekäme ich aber schon hin.
Erst dafür braucht man Timeouts, also wenn der Inhalt noch weiter scrollen soll obwohl sich die Maus nicht mehr bewegt. Aber das kann man auch leicht einbauen, wenn das Grundprinzip erstmal vorhanden ist.
__________________
hopka.net!
Mit Zitat antworten
  #9 (permalink)  
Alt 13-12-2007, 00:27
Bierbaron
 Newbie
Links : Onlinestatus : Bierbaron ist offline
Registriert seit: Jan 2004
Beiträge: 7
Bierbaron ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Vielen Dank für die Antworten bisher.

Die Lösung von Hopka brachte mich bisher am weitesten (Vielen Dank dafür!), damit kann ich mich gut anfreunden. Allerdings läuft das nicht unter dem IE, auch schon im Ursprungszustand nicht. Mit meinen bescheidenen Kenntnissen habe ich es nicht hinbekommen. Kannst Du mir hier vllt. noch mal unter die Arme greifen? Mein umgebautes JS sieht derzeit so aus:


PHP-Code:
function scroll(objevtcontent)
{
   var 
content document.getElementById(''+content+'');
   
// Mausposition innerhalb des Containers
   
var mouseY evt.pageY obj.offsetTop;
   
// auf 0 - 1 normierter Wert
   
var pos mouseY obj.clientHeight;
   
mouseY = (pos==0) ? mouseY -mouseY +5;
   
// Faktor auf Höhe des Inhaltes anwenden (hier wird noch die Höhe des Containers abgezogen, damit der Inhalt nicht komplett nach oben verschwindet
   
content.style.marginTop = ((content.clientHeight obj.clientHeight) * -pos) + 'px';
}
...
<
div id="container" onmousemove="scroll(this,event,'content')">
<
ul id="content">
... 
Der IE stört sich am evt.pageY, ich habe mir temporär auch mal meine Lösung eingebaut, um die Cursorposition zu bestimmen:

PHP-Code:
var mouseY = (evt.offsetY) ? evt.offsetY evt.layerY
Jetzt wird der Inhalt im IE jedoch unterhalb des Mauszeigers gescrollt, zudem bekomme ich eine Fehlermeldung (natürlich IE like super aussagekräftig; "Ungültiges Argument") wenn ich mit der Maus auf 0px Höhe bin, im Firefox läuft es weiterhin tadellos ohne jeden Fehler (in der Konsole).

Ich glaube ich habe ein Brett vorm Kopf!

Edit: Noch etwas, gibt es eine Möglichkeit mit ChildNode oder so den Inhalt des Containers direkt anzusprechen? Dann spare ich mir die ID und Übergabe dessen in content . Natürlich habe ich es schon probiert, und natürlich nicht hinbekommen.
__________________
Mein Meerschweinchen Ratgeber

Geändert von Bierbaron (13-12-2007 um 00:30 Uhr)
Mit Zitat antworten
Antwort

Lesezeichen


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

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 05:15 Uhr.