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 07-07-2011, 04:29
powermax
 Registrierter Benutzer
Links : Onlinestatus : powermax ist offline
Registriert seit: Apr 2006
Ort: Deutschland / Hessen / Hanau
Beiträge: 38
powermax ist zur Zeit noch ein unbeschriebenes Blatt
Standard jQuery "Scroll" Div in einem Div - Frage dazu

Hi,

habe gerade einen "to top" button erstellt, welcher je nach seitenlänge immer im Bild ist mit der Funktion Scroll (jQuery)

nun hab ich allerdings einen Punkt erreicht wo ich nicht mehr weiter weis, denn das Div stoppt. Das heißt es wandert immer weiter nach unten und das Mutterelement (div) erweitert sich ebenso.

Wie kann man verhindern das das Div weiter als bis zum vorgegeben "Rand" scrollt?

Hier der Link:

http://web680.freesurf.webhoster.ag/

Hier der Code zum Scrollen des Divs:

HTML-Code:
	$().ready(function() {
		var $scrollingDiv = $("#totop");
 
		$(window).scroll(function(){			
			$scrollingDiv
				.stop()
				.animate({"marginTop": ($(window).scrollTop() + 60) + "px"}, "slow" );			
		});
	});
Wie schon gesagt es fehlt die Einschränkung also der Befehl dem das Div sagt es soll nicht weiter nach unten wandern. Bin ich leider total überfragt

Hab nicht sonderlich viel Erfahrung mit jQuery usw. Bitte wenn einer was weis - auch wenns normalerweise nicht so laufen sollte - kleinlich erklären =) Danke für die Hilfe
Mit Zitat antworten
  #2 (permalink)  
Alt 07-07-2011, 04:49
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Hallo,

du musst mit Math.max arbeiten, um die Position des Buttons zu begrenzen. Momentan schiebt sich der Buttons nach unten, was den Textbereich vergrößert, da er sich seinen Kindern anpassen muss. Dabei vergrößert sich die gesamte Seite, was dazu führt, dass der Link nun noch weiter runter kann, um wieder den Textbereich und damit die Seite zu vergrößern. Diesen Teufelskreis kannst du nur dadurch beenden, dass das animierte margin-top nicht größer werden darf als die offsetWidth des Textbereichs abzüglich der offsetWidth dieses Buttons.

Gruß,

Amica
__________________
Hast du die Grundlagen zur Fehlersuche gelesen? Hast du Code-Tags benutzt?
Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
Super, danke!
Mit Zitat antworten
  #3 (permalink)  
Alt 07-07-2011, 16:20
powermax
 Registrierter Benutzer
Links : Onlinestatus : powermax ist offline
Registriert seit: Apr 2006
Ort: Deutschland / Hessen / Hanau
Beiträge: 38
powermax ist zur Zeit noch ein unbeschriebenes Blatt
Standard

meinst du offsetWidth oder offsetHeight? geht ja um die höhe oder?

Hab mal nach Math.max geschaut, nicht leicht dadrüber etwas herauszufinden. Hab auch nach Offset bei jquery API webseite gesucht aber werd daraus nicht wirklich schlau wie ich das anstellen soll.

bin son bissl schwer von begriff wenns um javascript syntax geht :/

Geändert von powermax (07-07-2011 um 17:05 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 07-07-2011, 19:14
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

JavaScript ist leicht. JQuery macht die Sache unnötig kompliziert, wenn es mal über die vorgegebenen Standardbausteine hinausgehen soll. Von der teilweise merkwürdigen Schreibweise ganz zu schweigen.

(Ist aber nur meine persönliche Meinung, nicht dass jetzt alle gegen mich flamen, wie ich ihr geliebtes JQuery runtermachen kann.)

Math.max
__________________
Hast du die Grundlagen zur Fehlersuche gelesen? Hast du Code-Tags benutzt?
Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
Super, danke!
Mit Zitat antworten
  #5 (permalink)  
Alt 07-07-2011, 21:21
powermax
 Registrierter Benutzer
Links : Onlinestatus : powermax ist offline
Registriert seit: Apr 2006
Ort: Deutschland / Hessen / Hanau
Beiträge: 38
powermax ist zur Zeit noch ein unbeschriebenes Blatt
Standard

mhm, ist natürlich für mich ejtzt die Frage wie ich das nun kombiniere.

Hab nur wenig Erfahrung daher weis ihc nicht wie ich das syntaxmäßig aufschreiben soll...
Mit Zitat antworten
  #6 (permalink)  
Alt 07-07-2011, 23:30
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Code:
.animate({"marginTop": Math.max(maximum, $(window).scrollTop() + 60) + "px"}, "slow" );
Alles, was du jetzt noch tun musst, ist, die Variable maximum vor diesem Aufruf zu definieren. Es wird auf irgendeine offsetHeight hinauslaufen, von welchem Element kann ich anhand deines Codes nicht sagen.
__________________
Hast du die Grundlagen zur Fehlersuche gelesen? Hast du Code-Tags benutzt?
Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
Super, danke!
Mit Zitat antworten
  #7 (permalink)  
Alt 08-07-2011, 14:20
powermax
 Registrierter Benutzer
Links : Onlinestatus : powermax ist offline
Registriert seit: Apr 2006
Ort: Deutschland / Hessen / Hanau
Beiträge: 38
powermax ist zur Zeit noch ein unbeschriebenes Blatt
Post

hab mal geschaut und das auf mehrere arten gemacht. Mit height und einem alert zum test funktionierts, da bekomm ich eine Zahl raus,
beim offsetHeight kommt undefined raus..

HTML-Code:
	$().ready(function() {
		var $scrollingDiv = $("#totop");
 		/* var maximum = ($(".subcontent").height()); */
 		/* alert($(".subcontent").offsetHeight()); */
 		var maximum = ($(".subcontent").offsetHeight());
 		
 		alert($(".subcontent").offsetHeight());
 		
 		
		$(window).scroll(function(){			
			$scrollingDiv
				.stop()
				.animate({"marginTop": Math.max(maximum, $(window).scrollTop() - 30) + "px"}, "slow" );		
		});
		
		
	});

wie gesagt bin kein Ass in der Syntax^^
Mit Zitat antworten
  #8 (permalink)  
Alt 08-07-2011, 14:26
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

offsetHeight ist eine Eigenschaft, keine Funktion. Wenn JQuery den Zugriff darauf nicht aus irgendeinem blöden Grund verhindert, ruft man diese Eigenschaft so ab:

Code:
var hgt = irgendeinElement.offsetHeight;
Falls das nicht geht, sieh bitte im JQuery-Handbuch nach, wie man welche Art von Höhe abruft.
__________________
Hast du die Grundlagen zur Fehlersuche gelesen? Hast du Code-Tags benutzt?
Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
Super, danke!
Mit Zitat antworten
  #9 (permalink)  
Alt 08-07-2011, 21:31
powermax
 Registrierter Benutzer
Links : Onlinestatus : powermax ist offline
Registriert seit: Apr 2006
Ort: Deutschland / Hessen / Hanau
Beiträge: 38
powermax ist zur Zeit noch ein unbeschriebenes Blatt
Standard

öhm hab mal ein bisschen rumgespielt und auch nach offsetheight gesucht. Sollte in der theorie so funktionieren wie du es gesagt hast. Allerdings tut es das nicht.

Es kommt bei einer entsprechenden Alert Ausgabe weiterhin "undefined" raus.

Dann funktioniert der code mit dem math.max(maximum..) leider nicht selbst wenn das maximum eine kleine zahl ist (z.B. 150).

Würde dann glaub cih auch nicht funktionieren wenn die varibale Maximum einen wert von offsetHeight bekommen würde, da es ja ohne variablen schon nicht funktioniert.

Bin total verwirrt. Iwie muss man das doch hinbekommen? :/

--

update: hab mal zwei Werte für Maximum genommen. 1x 50px und ein weiteres mal 100px. Dabei ist mir etwas aufgefallen:



Das Scrollende Div kann jeweils (siehe BIld) 50px und 100px an das nächst obere Element dran. Das prinzip funktioniert allerdings nicht wie es sollte.

Es kann weiter weg als 50px bzw. 100px aber nicht näher ran! als würde das maximum ein minimum sein...


----
Update #2:

mein eigener Satz "als würde das Maximum ein minimum sein" hat mich auf eine idee gebracht. Wenn sich der snippet so verhält das maximum ein minimum wird (math.max) dann könnte doch math.min das gegenteil bewirken!

>>> Siehe da es klappt. Bei einer reellen Zahl (300 z.B.) klappt es. Es kann nicht weiter runter als bis 300px

jetzt fehlt nur noch die Dynamische begrenzung

Geändert von powermax (08-07-2011 um 21:44 Uhr)
Mit Zitat antworten
  #10 (permalink)  
Alt 08-07-2011, 21:51
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Du hast völlig recht: Um einen Wert auf ein Maximum zu begrenzen, muss man natürlich Math.min nehmen.

Was jetzt offsetHeight angeht: Beachtest du auch, dass in JS Groß- und Kleinschreibung strikt unterschieden wird? Deinen Postings nach bist du da nicht 100%ig korrekt. Wenn das im Code auch so ist, wird es wohl daran liegen.
__________________
Hast du die Grundlagen zur Fehlersuche gelesen? Hast du Code-Tags benutzt?
Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
Super, danke!
Mit Zitat antworten
  #11 (permalink)  
Alt 08-07-2011, 22:00
powermax
 Registrierter Benutzer
Links : Onlinestatus : powermax ist offline
Registriert seit: Apr 2006
Ort: Deutschland / Hessen / Hanau
Beiträge: 38
powermax ist zur Zeit noch ein unbeschriebenes Blatt
Standard

muss das offsetHeight so oder offsetheight oder sogar offset.height geschrieben werden.

Es müsste ja daran liegen an der schreibweise.. es gibt ja keinen direkten ... fehler (Firefox fehlerkonsole)

aber ich habs in meinem code immer so:

"offsetHeight"


--
update #1

habe im internet beim suchen auch die schreibweise gesehen:

('html')[0].offsetHeight


was bedeutet denn die [0] ?

Geändert von powermax (08-07-2011 um 22:03 Uhr)
Mit Zitat antworten
  #12 (permalink)  
Alt 08-07-2011, 22:22
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Nimm's mir nicht übel, aber deine Fragen erwecken bei mir den Eindruck, dass du dich bisher kein Stück mit JQuery auseinandergesetzt hast. Frage dich, wieviel Zeit du darin investiert hast, dich mit den im Handbuch beschriebenen Grundlagen auseinander zu setzen und wie sich diese Zeit im Verhältnis zu deinen Trial-and-Error-Ansätzen schlägt.

Daher informierst du dich jetzt bitte selbst, was die 0 dort soll. Ich verrate schonmal soviel, dass es sich um einen Array*-Index handelt.

___
* Es ist zwar eher ein NodeSet, aber das ist so gestaltet, dass der Zugriff auf die Elemente genau wie bei einem Array funktioniert und es analog zum Array auch eine length-Property besitzt.
__________________
Hast du die Grundlagen zur Fehlersuche gelesen? Hast du Code-Tags benutzt?
Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
Super, danke!
Mit Zitat antworten
  #13 (permalink)  
Alt 08-07-2011, 22:45
powermax
 Registrierter Benutzer
Links : Onlinestatus : powermax ist offline
Registriert seit: Apr 2006
Ort: Deutschland / Hessen / Hanau
Beiträge: 38
powermax ist zur Zeit noch ein unbeschriebenes Blatt
Smile

okay glaube es funktioniert jetzt. Hab offset garnicht gebraucht.

Es hat gereicht wenn ich einfach die höhe meines content divs auslese und das rechte menu (höhe) abziehe = optimale höhe für das .totop div =)

Trotzdem vielen vielen dank für den tipp mit math.max bzw. min


Hier kann man echt noch was lernen! Will ja nicht das mir das jemand komplett aufschreibt und ich nur copy+paste machen muss sondern das du mir tipps und anregungen gegeben hast die mich dann so almählig auf die richtige Pfährte gelockt haben! Das prinzip find ich super!

Dankeschön =)


hier noch der funktionierende code zur vollständigkeit halber:

HTML-Code:
	$().ready(function() {
		var $scrollingDiv = $("#totop");

 		
 		/* alle Elemente mit der CSS-Klasse ".text" durchlaufen */  
		$('.text').each(function(e) {  
  
  		/* Höhe in maximum schreiben */
  		maximum = $(this).height();
  		newmax = (maximum - 430);
  		
  });
 		
		$(window).scroll(function(){			
			$scrollingDiv
				.stop()
				.animate({"marginTop": Math.min(newmax, $(window).scrollTop() - 0) + "px"}, "slow" );	
		});
		
		
	});

Geändert von powermax (08-07-2011 um 23:55 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
Einem Element "name" und "id" vergeben - und ansprechen - möglich? BananaJo HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 14 05-12-2010 15:01
jQuery nur auf per Ajax geladene Inhalte "anwenden" DSitC HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 4 22-03-2010 10:34
jQuery: "verschachtelte" Divs carapau HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 4 11-08-2009 20:54
"Ajax PHP Upload" und einem "Upload Status Meter" nilitsch HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 0 15-10-2006 14:40
fgets dazu überreden "\n" zu überlesen !!! PLZ HELP !!! Jointy PHP Developer Forum 9 05-03-2003 17:23

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