Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag02.08.2014 um 22:46 (UTC)    
Titel: [erledigt] "nach oben"-Button per Java Script

Hallo,

ich habe mal eine Frage und zwar interessiert es mich wie und wo man einen
solchen "zurück nach oben"-Button einfügt - wie auf dieser HP unten rechts auf jeder Seite angezeigt wird.

Arrow http://deineumwelt.de.tl/startseite.htm

das einzige was ich sehen kann, dass es ein Javascript ist
Kann jemand helfen?

danke schonmal
______________
MfG aus Klein Paris-vereinzelte Rechtschreibfehler sind Special Effects meiner Tastatur


Zuletzt bearbeitet von klein-paris am 03.08.2014, 15:50, insgesamt 2-mal bearbeitet
Beitrag02.08.2014 um 23:20 (UTC)    
Titel:

Wo du es einfügst ist abhängig vom Design.
Beim Iceblue zb. im edit_content_bottom2 oder einfach nur unten im Content.

Einen "nach oben"-Button kann man auch mit einer einfachen Verlinkung erstellen (mit # als Link).
Aber mit Javascript sieht es natürlich schöner aus und ist auch nicht gerade komplizierter:

HTML-Code (dort einfügen, wo der "nach oben"-Link angezeigt werden soll):
Code:
<a href="javascript:NachOben()">Bezeichnung des Links</a>


Javascript (Text unter dem Design):
Code:
<script type="text/javascript">
function NachOben () {
  var y = 0;
  if (window.pageYOffset) {
    y = window.pageYOffset;
  } else if (document.body && document.body.scrollTop) {
    y = document.body.scrollTop;
  }
  if (y > 0) {
    window.scrollBy(0, -10);
    setTimeout("NachOben()", 10);
  }
}
</script>

Das ist übrigens von http://de.selfhtml.org/. Dort gibt es auch immer gleich gute Beschreibungen dabei, wodurch jeder Laie jeden Befehl nachvollziehen kann (denke ich zumindest ^^)

Einen Button daraus machen, kannst du indem du die Verlinkung in ein div packst, aber das solltest du hinbekommen.
______________
Gruß Pexxi
Beitrag03.08.2014 um 05:10 (UTC)    
Titel:

Javascript (Text unter dem Design):
Code:
<script type="text/javascript">
function NachOben () {
  var y = 0;
  if (window.pageYOffset) {
    y = window.pageYOffset;
  } else if (document.body && document.body.scrollTop) {
    y = document.body.scrollTop;
  }
  if (y > 0) {
    window.scrollBy(0, -10);
    setTimeout("NachOben()", 10);
  }
}
</script>

Hallo pexxi,

erstmal vielen dank,
so habe das jetzt mal auf meiner testsite bei "Text unter dem Design" eingefügt...........und..........es passiert nix Wink
pexxi hat Folgendes geschrieben:
Das ist übrigens von http://de.selfhtml.org/. Dort gibt es auch immer gleich gute Beschreibungen dabei, wodurch jeder Laie jeden Befehl nachvollziehen kann (denke ich zumindest ^^)

...mal meine Lupe hervorgekramt habe ........und..........mich mal Embarassed , denn diese sehr hilfreiche Seite kenne ich auch, aber ich habe da jetzt mal geschaut und nichts dazu gefunden, bin zwar nicht unbedingt deeeeeer Laie aber auf der Seite weiss ich nicht wo ich nach was suchen soll, bei Java Script nix Rolling Eyes

pexxi hat Folgendes geschrieben:
Einen Button daraus machen, kannst du indem du die Verlinkung in ein div packst, aber das solltest du hinbekommen.

ja ich weiss das ein DIV so aussehen muss: <div>.........CODE.........</div>, aber irgendwie stehe ich jetzt auf der Leitung wie das ganze dann auszusehen hat Rolling Eyes
______________
MfG aus Klein Paris-vereinzelte Rechtschreibfehler sind Special Effects meiner Tastatur


Zuletzt bearbeitet von klein-paris am 03.08.2014, 06:14, insgesamt einmal bearbeitet
Beitrag03.08.2014 um 09:53 (UTC)    
Titel:

Zu dem Button:
1)
Code:
<div id="Button"><a href="javascript:NachOben()">Bezeichnung des Links</a></div>

Die Styleangaben in den CSS-Code ( #Button { } )

2)
Code:
<div style="Hier die Styleangaben"><a href="javascript:NachOben()">Bezeichnung des Links</a></div>



Die Funktion habe ich gerade mal getestet und es funktioniert sofort
-> http://pexxi.de.tl/Titel-der-neuen-Seite.htm
Um das zu lösen, müsste ich die Seite kennen auf der du es einfügen möchtest bzw. eingefügt hast.

Hier nochmal der Verweis http://de.selfhtml.org/javascript/objekte/window.htm#scroll_by
______________
Gruß Pexxi
Beitrag03.08.2014 um 10:23 (UTC)    
Titel:

ohje - ich raffe es nicht Embarassed , es geht um diese Seite:

Arrow http://kp-testsite.de.tl/

habe jetzt das hier im CSS-Code eingefügt:
Zitat:

#Button {
color: #000000;
font-size: 12px;
font-family: arial;
text-align: center;
width: 150px;
height: 29px;
background-color: #477abc;
background-image: url();
border: 1px solid #000000; }


....und das hier bei Text unter dem Design:

Zitat:
<div id="Button"><a href="javascript:NachOben()">nach oben</a></div>


geht nicht und unter dem Design, noch dazu in der linken äußersten Ecke nützt es ja nix.............hm........keine Ahnung von der Planung Crying or Very sad ich hätte ihn gerne im rechten unterem Teil des Designs - geht das überhaupt Question
______________
MfG aus Klein Paris-vereinzelte Rechtschreibfehler sind Special Effects meiner Tastatur


Zuletzt bearbeitet von klein-paris am 03.08.2014, 11:34, insgesamt 4-mal bearbeitet
Beitrag03.08.2014 um 10:35 (UTC)    
Titel:

Wie auch. der weiß ja gar nicht was er ausführen soll, wenn das Script nicht eingefügt ist. (ich sehe es zumindest nicht im Quelltext)

Das hier
Code:
<div id="Button"><a href="javascript:NachOben()">nach oben</a></div>

muss da eingefügt werden, wo der Button eingeblendet werden soll. Da ich kein Hellseher bin, weiß ich ja nicht, wo der hin soll. Du könntest ein extra Feld dafür erstellen, den auf jeder (langen) Textseite einfügen und und und

Das hier
Code:
<script type="text/javascript">
function NachOben () {
  var y = 0;
  if (window.pageYOffset) {
    y = window.pageYOffset;
  } else if (document.body && document.body.scrollTop) {
    y = document.body.scrollTop;
  }
  if (y > 0) {
    window.scrollBy(0, -10);
    setTimeout("NachOben()", 10);
  }
}
</script>

einfach so belassen und bei Text unter dem Design rein
______________
Gruß Pexxi
Beitrag03.08.2014 um 10:41 (UTC)    
Titel:

pexxi hat Folgendes geschrieben:


Das hier
Code:
<script type="text/javascript">
function NachOben () {
  var y = 0;
  if (window.pageYOffset) {
    y = window.pageYOffset;
  } else if (document.body && document.body.scrollTop) {
    y = document.body.scrollTop;
  }
  if (y > 0) {
    window.scrollBy(0, -10);
    setTimeout("NachOben()", 10);
  }
}
</script>

einfach so belassen und bei Text unter dem Design rein


ja ok ´schuldigung hatte das Script vergessen - jetzt gehts und habe es auch rechts unter dem Design positioniert
danke nochmals

eine kleine Macke hat der Butten noch, die Verlinkung "hüpft" bei Mauskontakt - kann man das irgendwie beheben Question
______________
MfG aus Klein Paris-vereinzelte Rechtschreibfehler sind Special Effects meiner Tastatur
Beitrag03.08.2014 um 11:06 (UTC)    
Titel:

Das liegt daran, dass das ja im eigentlichem Sinne eine Verlinkung ist und daher diese Anweisungen übernommen werden:
Zitat:
a {
font-size: 14px;
color: black;
text-decoration: none;
}

a:hover {
font-size: 11px;
text-decoration: underline;
}

Heißt dass du den Hover separat mit #Button a:hover noch anpassen musst Wink
->
Code:
#Button a.hover { font-size: 14px; text-decoration: none; }

______________
Gruß Pexxi


Zuletzt bearbeitet von pexxi am 03.08.2014, 12:09, insgesamt 2-mal bearbeitet
Beitrag03.08.2014 um 11:36 (UTC)    
Titel:

[quote="pexxi"]Das liegt daran, dass das ja im eigentlichem Sinne eine Verlinkung ist und daher diese Anweisungen übernommen werden:
Zitat:
a {
font-size: 14px;
color: black;
text-decoration: none;
}

a:hover {
font-size: 11px;
text-decoration: underline;
}

ähm Rolling Eyes ....wo hastn das her Question finde ich bei mir im Designcode garnicht Embarassed
habe das untere nämlich eingefügt - tut sich aber wieder mal nix
______________
MfG aus Klein Paris-vereinzelte Rechtschreibfehler sind Special Effects meiner Tastatur
Beitrag03.08.2014 um 13:34 (UTC)    
Titel:

Sorry, in der Codebox fehlt ein Punkt:
Code:
#Button a:hover { font-size: 14px; text-decoration: none; }

So aus dem normalen Punkt wurde nun ein Doppelpunkt.

Sollte es dann immer noch nicht klappen, versuche es so:
Code:
#Button a:hover { font-size: 14px!important; text-decoration: none!important; }

______________
Gruß Pexxi


Zuletzt bearbeitet von pexxi am 03.08.2014, 14:35, insgesamt einmal bearbeitet
Beitrag03.08.2014 um 14:49 (UTC)    
Titel:

pexxi hat Folgendes geschrieben:
Sorry, in der Codebox fehlt ein Punkt:
Code:
#Button a:hover { font-size: 14px; text-decoration: none; }

So aus dem normalen Punkt wurde nun ein Doppelpunkt.

ja habs gemerkt, danke für deine Hilfe und Ausdauer Wink
______________
MfG aus Klein Paris-vereinzelte Rechtschreibfehler sind Special Effects meiner Tastatur
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de