Beitrag zur Merkliste hinzufügen
Hier kann eine Notiz zum Merk-Eintrag hinzugefügt werden (optional)
| [ Anmelden zum schreiben ] |
| Online Box automatisch mitscrollen | |||
|---|---|---|---|
| dilf Mitglied 
Posts: 106 |
N'abend allerseits,
hätte doch ganz gern gewusst, ob es möglich ist, dass sich die online-box mitbewegt, wenn ich die seite nach unten scrolle? sprich, sie ist jetzt eingefügt, wenn ich dann nach unten scolle um den content zu lesen bleibt sie ja logischerweise an ort und stelle, hätte aber ganz gern, dass die box dann mitscrollt, wenn ihr wisst was ich meine. die box ist in der html nicht auf einen hintergrund gelegt sonder einfach mit dem befehl eingefügt, sollte das von interesse sein. bitte um hilfe, bedanke mich schon mal für antworten ^^ |
||
| Mairu Coder 
Posts: 12770  |
Es fehlt ein Link zu deiner Seite, theoretisch sollte soetwas mit position:fixed gehen, oder eben mit Javascript.
Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite |
||
| dilf Mitglied
Posts: 106 |
sry hier der link: guild-wars2.net
zu erklärung: hier auf dieser seite wenn ihr unterscrollt verfolgt euch das facebook zeug und so, das wollte ich mit der online box auch anstellen Link: guildwars2.com/de/the-game/professions/ Zuletzt modifiziert von dilf am 27.01.2012 - 22:16:28 |
||
| Mairu Coder
Posts: 12770 |
Bisher ist sie doch aber in die Seite "eingebaut", ich dachte du hättest sie schon so positioniert, wie du sie anzeigen willst, sie ist ja aber erst gar nicht zu sehen. Dir muss auch klar sein, dass dann andere Sachen überlagert werden, wenn du sie fixierst.
Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite |
||
| dilf Mitglied
Posts: 106 |
auf der rechten seite ist doch die online-box oder was meinst du.
sprich ich kann die box nicht so mitlaufen lassen wie auf der seite die ich gepostet habe? |
||
| Mairu Coder
Posts: 12770 |
Achso, mhh hatte mir das nicht angeschaut, das ist ein Javascript, sicherlich auf Basis von jQuery.
Hier ist der Code davon, // move the share this widget with the window
if($('#idToScroll').length > 0) {
var $widget = $("#idToScroll");
var $window = $(window);
var $offset = $widget.offset();
var $initialMargin = $widget.css('marginTop');
$window.scroll(function() {
if ($window.scrollTop() > $offset.top) {
$widget.stop().animate({
marginTop: $window.scrollTop() - $offset.top
});
} else {
$widget.stop().animate({
marginTop: $initialMargin
});
}
});
}
Du müsstest dann der Tabelle, wo die Box drin ist mit id="idToScroll" die Id geben oder eben das Script und möglichst die ganzen <br> davor entfernen. Zuletzt modifiziert von Mairu am 28.01.2012 - 17:56:43 Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite |
||
| dilf Mitglied
Posts: 106 |
das heißst dann in etwa so: <table id="idToScroll"> ?
und den code den du gepostet hast in den style bereich der seite? |
||
| T3BAss Mitglied
Posts: 133 |
Sein Code steckst du in einen Script-Tag
Also zwischen: <script type="text/javascript">...</script> (... durch Mairus Code ersetzen ) |
||
| dilf Mitglied
Posts: 106 |
ok das hab ich jetzt in die htm eingefügt:
<script type="text/javascript">
// move the share this widget with the window
if($('#idToScroll').length > 0) {
var $widget = $("#idToScroll");
var $window = $(window);
var $offset = $widget.offset();
var $initialMargin = $widget.css('marginTop');
$window.scroll(function() {
if ($window.scrollTop() > $offset.top) {
$widget.stop().animate({
marginTop: $window.scrollTop() - $offset.top
});
} else {
$widget.stop().animate({
marginTop: $initialMargin
});
}
});
}
</script>
und das ist die box. hab vor die box noch n space eingefügt, damit die box mittig sitzt: <table id="idToScroll">
<tr><td>
<img src="include/designs/gw2/images/spacer.png" width="40" height="10">
</td>
<td>
<p>{_boxes_online}</p>
</td>
</tr>
</table>
scheint ich mach was falsch xD |
||
| Mairu Coder
Posts: 12770 |
Versuchs mal mit
<script type="text/javascript">
$(function(){
// move the share this widget with the window
if($('#idToScroll').length > 0) {
var $widget = $("#idToScroll");
var $window = $(window);
var $offset = $widget.offset();
var $initialMargin = $widget.css('marginTop');
$window.scroll(function() {
if ($window.scrollTop() > $offset.top) {
$widget.stop().animate({
marginTop: $window.scrollTop() - $offset.top
});
} else {
$widget.stop().animate({
marginTop: $initialMargin
});
}
});
}
});
</script>Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite |
||
| dilf Mitglied
Posts: 106 |
Es leeeeeebt.
Danke danke danke an euch beide aber besonders danke Mairu. |
||
| [ Anmelden zum schreiben ] |