ilch Forum » Allgemein » HTML, PHP, SQL,... » Online Box automatisch mitscrollen

Geschlossen
  1. Fr. 27.01.2012 01:37 Uhr #1
    User Pic
    dilf Mitglied
    Registriert seit
    29.08.2009
    Beiträge
    110
    Beitragswertungen
    0 Beitragspunkte
    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 ^^
    0 Mitglieder finden den Beitrag gut.
  2. Fr. 27.01.2012 08:20 Uhr #2
    User Pic
    Mairu Coder
    Registriert seit
    16.06.2006
    Beiträge
    15.334
    Beitragswertungen
    386 Beitragspunkte
    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
    0 Mitglieder finden den Beitrag gut.
  3. Fr. 27.01.2012 13:59 Uhr #3
    User Pic
    dilf Mitglied
    Registriert seit
    29.08.2009
    Beiträge
    110
    Beitragswertungen
    0 Beitragspunkte
    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
    0 Mitglieder finden den Beitrag gut.
  4. Sa. 28.01.2012 09:20 Uhr #4
    User Pic
    Mairu Coder
    Registriert seit
    16.06.2006
    Beiträge
    15.334
    Beitragswertungen
    386 Beitragspunkte
    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
    0 Mitglieder finden den Beitrag gut.
  5. Sa. 28.01.2012 12:34 Uhr #5
    User Pic
    dilf Mitglied
    Registriert seit
    29.08.2009
    Beiträge
    110
    Beitragswertungen
    0 Beitragspunkte
    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?
    0 Mitglieder finden den Beitrag gut.
  6. Sa. 28.01.2012 17:49 Uhr #6
    User Pic
    Mairu Coder
    Registriert seit
    16.06.2006
    Beiträge
    15.334
    Beitragswertungen
    386 Beitragspunkte
    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
    0 Mitglieder finden den Beitrag gut.
  7. Sa. 28.01.2012 19:18 Uhr #7
    User Pic
    dilf Mitglied
    Registriert seit
    29.08.2009
    Beiträge
    110
    Beitragswertungen
    0 Beitragspunkte
    das heißst dann in etwa so: <table id="idToScroll"> ?

    und den code den du gepostet hast in den style bereich der seite?
    0 Mitglieder finden den Beitrag gut.
  8. Sa. 28.01.2012 19:19 Uhr #8
    User Pic
    T3BAss Mitglied
    Registriert seit
    21.12.2011
    Beiträge
    133
    Beitragswertungen
    18 Beitragspunkte
    Sein Code steckst du in einen Script-Tag
    Also zwischen: 

    <script type="text/javascript">...</script>


    (... durch Mairus Code ersetzen )
    1 Mitglieder finden den Beitrag gut.
  9. Sa. 28.01.2012 19:31 Uhr #9
    User Pic
    dilf Mitglied
    Registriert seit
    29.08.2009
    Beiträge
    110
    Beitragswertungen
    0 Beitragspunkte
    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
    0 Mitglieder finden den Beitrag gut.
  10. Sa. 28.01.2012 23:24 Uhr #10
    User Pic
    Mairu Coder
    Registriert seit
    16.06.2006
    Beiträge
    15.334
    Beitragswertungen
    386 Beitragspunkte
    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
    1 Mitglieder finden den Beitrag gut.
  11. So. 29.01.2012 17:43 Uhr #11
    User Pic
    dilf Mitglied
    Registriert seit
    29.08.2009
    Beiträge
    110
    Beitragswertungen
    0 Beitragspunkte
    Es leeeeeebt.
    Danke danke danke an euch beide aber besonders danke Mairu.
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu HTML, PHP, SQL,...

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten