#1

deekay

Forum-Sponsor  (711 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.lippe-event.de

Leider hatte ich mit meinen Bemühungen nicht viel Erfolg. Auf meiner neuen Test-Webseite www.lippe-event.de/test schaffe ich es nicht, eine "nach open" Funktion einzubauen. Kann mir da jemand helfen?

#2

W2D Fan

Co-Administratorin  (4548 Punkte)  ·   weiblich  ·   Niederlande  ·   Nachricht senden

Dann verrate doch mal was genau du wo versucht hast und wo es hakt, denn es geht problemlos (siehe Anlage)

Ohne zu wissen was du wo versucht hast können wir nur den Glaskugel reiben wo du einen Fehler gemacht haben könntest und wird helfen so zu sagen unmöglich.


Gruß,
Marjorie

Hilfe ist nicht selbstverständlich. Deshalb halte ich ein "Dankeschön", nachdem jemandem geholfen wurde, für überaus angebracht und höflich.


#3

deekay

Forum-Sponsor  (711 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.lippe-event.de

ich habe in die navigation.ccml folgenden Code eingebaut:

 

<cc:if cond="&topic.properties.design.topic.dual.nachoben">
<script type="text/javascript" src="<cc:print value="&scroll.url">"></script>
<div id="top"><a class ="scrolltop" title="zum Seitenanfang"><i class="fa fa-chevron-up fa-2x"></i></a></div>
</cc:if>
<script type="text/javascript" src="<cc:print value="&bootstrap.url">"></script>
<script type="text/javascript" src="<cc:print value="&jquery.smartmenus.min.url">"></script>
<script type="text/javascript" src="<cc:print value="&jquery.smartmenus.bootstrap.min.url">"></script>
<cc:if cond="&site.tsidnew"><cc:include src="tsbadge.ccml" common="1"></cc:if>

 

Und die entsprechenden js. Dateien in den Designordner kopiert.

#4

W2D Fan

Co-Administratorin  (4548 Punkte)  ·   weiblich  ·   Niederlande  ·   Nachricht senden

So weit ich das beurteilen kann hast du die Funktion aus einem Design von Thomas nach Leonidas kopiert. Ich kenne mich damit nicht aus.

Normalerweise würde ich wissen wollen ob du die JS-Dateien in der global.ccml angemeldet hast?

Und was ist mit der CSS?

Da deinen Code FontAwesome-Codierung enthält müßtest du auch FontAwesome in deinem Design integrieren.

Da ich mich wie gesagt mit Designs von Thomas nicht auskenne kann ich auch nicht sagen ob und wie JS-Dateien angemeldet werden müßen und was du genau aus der CSS brauchst.

Da fragst du Thomas am besten selbst.

Ich habe bei mir die Funktion mit Hilfe DIESES einfache Tutorial erfolgreich eingebaut.


Gruß,
Marjorie

Hilfe ist nicht selbstverständlich. Deshalb halte ich ein "Dankeschön", nachdem jemandem geholfen wurde, für überaus angebracht und höflich.

#5

Thomas

Moderator  (2298 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://siquando-designs.de

Ich vermute deekay hat von Conny's Duality kopiert und ich bin mir ziemlich sicher, dass die letzten 4 Zeilen für den nach oben Button nicht notwendig sind.


Viele Grüße
Thomas

siquando-designs.de (NEU: KARO Flex Layout, Santa Cruz Pro für Pro Shop und Apollon 11 für Siquando Shop, Templateübersicht & Support für Shop 11 + Pro Web 8)

#6

W2D Fan

Co-Administratorin  (4548 Punkte)  ·   weiblich  ·   Niederlande  ·   Nachricht senden

Wie dem auch sei, auch mit Conny's Mods kenne ich mich nicht aus. Dann soll er Conny fragen.


Gruß,
Marjorie

Hilfe ist nicht selbstverständlich. Deshalb halte ich ein "Dankeschön", nachdem jemandem geholfen wurde, für überaus angebracht und höflich.

#7

Sven aus Berlin

Forum-Sponsor  (435 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden

Mal ehrlich,

die Top-Ausführung die Marjorie hier verlinkt hat, funktioniert doch nun wirklich ganz einfach, Deekay.

Einfach den Script-Code innerhalb des HEADs und den <button onclick - Code in den body Tag. CSS in der style_content.css und gut ist.

Wozu brauchst du da denn jetzt eine eE?


Spontaneität muss sorgfältig geplant werden.

#8

deekay

Forum-Sponsor  (711 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.lippe-event.de

Hallo Sven... jetzt also nochmal langsam:

die html Zeile (button onclick) aus Schritt 1 unter htm code bei den Website-Eigenschaften einfügen

den css Code in die style_content.css

und wohin mit dem Java? Als Java Datei in den Designordner?

#9

Sven aus Berlin

Forum-Sponsor  (435 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden

Entschuldige bitte Deekay,

 

natürlich gehört der ... // When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
..... ebenfalls in den Head Tag.

 

Nochmal zum mitschreiben.

1. <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button> in den <body>-Tag navigation.ccml

2. // When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
ebenfalls in den <head>-Tag navigation.ccml

3. myBtn { ..... } und myBtn:hover { ..... } in die style_content.css

Backgroundfarbe rund, eckig oder was auch immer kannst du in myBtn style_content.css selbst festlegen.

Nachtrag: 30.05.20418

Natürlich gehört der <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button> in den <body>-Tag navigation.ccml.

Da hab ich nicht aufgepasst beim widergeben.!

Marjorie, dass das // When the user scrolls down 20px from the top of the document, show the button ein <script> ...</script> ist, müsste man aber auch auf deiner verlinkten Seite sehen, weshalb ich das nicht weiter erwähnt hatte und aber richtigerweise vermerkte, dass er in den <head>-Tag gehört.


Spontaneität muss sorgfältig geplant werden.


Dieser Beitrag wurde bereits 1 mal bearbeitet, zuletzt von »Sven aus Berlin« (30.05.2018, 16:04)
#10

Thomas

Moderator  (2298 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://siquando-designs.de

#11

W2D Fan

Co-Administratorin  (4548 Punkte)  ·   weiblich  ·   Niederlande  ·   Nachricht senden

Mit das Button-Tag in den head-Bereich wiederspricht Sven sich selbst 😉.

und den <button onclick - Code in den body Tag.

Außerdem muß man das Javascript in einen Script-Tag <script></script> verpacken bevor man es in den head-Bereich schiebt. Sonst funkt das nicht. 😉

und wohin mit dem Java? Als Java Datei in den Designordner?

Das ist auch eine Möglichkeit. Dann speichere das Javascript unter einen von dir gewünschten Namen im Designordner. Melde es in global.ccml an und rufe es in navigation.ccml ab.

Mit ein wenig HTML-Kenntnisse kann man sogar den Text und den Hover-Text anpassen

oder in

Für letzten muß man dann auch die css ein bischen feintunen.


Gruß,
Marjorie

Hilfe ist nicht selbstverständlich. Deshalb halte ich ein "Dankeschön", nachdem jemandem geholfen wurde, für überaus angebracht und höflich.

#12

Sven aus Berlin

Forum-Sponsor  (435 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden

Siehe ergänztenden Threadpost #9


Spontaneität muss sorgfältig geplant werden.

#13

W2D Fan

Co-Administratorin  (4548 Punkte)  ·   weiblich  ·   Niederlande  ·   Nachricht senden

Marjorie, dass das // When the user scrolls down 20px from the top of the document, show the button ein <script> ...</script> ist, müsste man aber auch auf deiner verlinkten Seite sehen, weshalb ich das nicht weiter erwähnt hatte und aber richtigerweise vermerkte, dass er in den <head>-Tag gehört.

Mein lieber Sven,

Dass Du, ich und noch so einige mehr wissen dass das ein <script> ... </script> ist heißt aber nicht dass jeder weiß das das Script-Tag auch hinzugefügt werden soll. Und ich würde nicht gerne jeden der das Script-Tag vergißt einen Euro geben, denn ich befürchte dass mich das viele Euro's kosten wird 😉 Besser unnötig erwähnt als gar nicht.


Gruß,
Marjorie

Hilfe ist nicht selbstverständlich. Deshalb halte ich ein "Dankeschön", nachdem jemandem geholfen wurde, für überaus angebracht und höflich.

#14

Sven aus Berlin

Forum-Sponsor  (435 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden

Alles gut, Marjorie, alles gut!


Spontaneität muss sorgfältig geplant werden.

#15

deekay

Forum-Sponsor  (711 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.lippe-event.de

Ok ... in der Webseiten-Vorschau sehe ich diese Funktion gerade nicht. Mal sehen wann ich die Seite wieder veröffentliche und ob ich es dann sehe.

Jedenfalls habe ich mich an die Anweisungen gehalten

#16

W2D Fan

Co-Administratorin  (4548 Punkte)  ·   weiblich  ·   Niederlande  ·   Nachricht senden

Dann hast du DEFINITIV einen Fehler gemacht sonst wäre die Funktion in der Vorschau schon sichtbar. Poste mal deine Einträge in die navigation.ccml mit ein oder zwei Zeilen vor dem Eintrag damit ich sehen kann wo du das hingeschrieben hast.


Gruß,
Marjorie

Hilfe ist nicht selbstverständlich. Deshalb halte ich ein "Dankeschön", nachdem jemandem geholfen wurde, für überaus angebracht und höflich.

#17

deekay

Forum-Sponsor  (711 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.lippe-event.de

Im in der navigation.ccml im Header:

<script>
	/* <![CDATA[ */

	$(document).ready(function() {
		$('#searchcriteria').ajaxSearch({
			url: '<cc:print value="&searchajax.php.url">'
		});
	})
	
	/* ]]> */
</script>
</cc:if>
<cc:print value="&page.content.dependencies">

<script>
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("myBtn").style.display = "block";
  } else {
    document.getElementById("myBtn").style.display = "none";
  }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0; // For Safari
  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
</script>

</head>

 

und im Body:

 

<cc:if cond="&site.properties.design.cookiesinfo.url">
<div class="sqrcookie <cc:if cond="&site.properties.design.cookiesinfo.position.number=2">sqrcookietop<cc:else>sqrcookiebottom</cc:if>">
 <p><cc:print value="&site.ressource.cookies.text"> <a class="link" href="<cc:print value="&site.properties.design.cookiesinfo.url">"><cc:print value="&site.ressource.cookies.link"></a></p>
 <button class="sqrbutton"><cc:print value="&site.ressource.cookies.accept"></button>
</div>
</cc:if>

<button onclick="topFunction()" id="myBtn" title="nach oben">nach oben</button>

 

und die style content:

 

@media screen and (max-width: 767px) {
 .sqr1col .sqrteaserpicture {
  float: none;
  margin: 10px 0;
  width: 100%;
 }
}
#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: red; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}

 

#18

W2D Fan

Co-Administratorin  (4548 Punkte)  ·   weiblich  ·   Niederlande  ·   Nachricht senden

Du hast im Javascript den schließenden } vergessen. Also soll das so aussehen:

<script>
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
    document.body.scrollTop = 0; // For Safari
    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
</script>

Ändere das mal und versuch's dann noch mal


Gruß,
Marjorie

Hilfe ist nicht selbstverständlich. Deshalb halte ich ein "Dankeschön", nachdem jemandem geholfen wurde, für überaus angebracht und höflich.

#19

deekay

Forum-Sponsor  (711 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.lippe-event.de

Vielen Dank für den Tipp - nun geht es und ich spiele gerade mit dem Design des Buttons 😉

#20

W2D Fan

Co-Administratorin  (4548 Punkte)  ·   weiblich  ·   Niederlande  ·   Nachricht senden

Pffffff, das war aber eine schwere Geburt für diese Kinderleichte Funktion.

Aber schön das es dann jetzt endlich doch funktioniert.


Gruß,
Marjorie

Hilfe ist nicht selbstverständlich. Deshalb halte ich ein "Dankeschön", nachdem jemandem geholfen wurde, für überaus angebracht und höflich.

#21

deekay

Forum-Sponsor  (711 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.lippe-event.de

Was dem einen leicht fällt , ist für andere nicht ganz so leicht. Wir sind alle verschieden

#22

HelmutS

Eroberer  (71 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://www.fuchsfilm.de

Ich möchte gerne anstelle der Einblendung

nach oben

den Unicode U+1F51D (1218)

einfügen und habe – wie in einer CSS-Anleitung gelesen - das in der Form

content:“\ 1F51D“

machen wollen.

Jetzt sieht meine Einblendung leider so aus

content:“\ 1F51D“

anstatt so (siehe Foto unten) 😞

 

vorher:

<button onclick="topFunction()" id="myBtn" title="nach oben">nach oben</button>

 

 

nachher:

<button onclick="topFunction()" id="myBtn" title=“nach oben">content:“\ 1F51D“</button>

 

 

???


#23

W2D Fan

Co-Administratorin  (4548 Punkte)  ·   weiblich  ·   Niederlande  ·   Nachricht senden

Das was du willst ist eine HTML-Entity und braucht eine HTML-Code und die gibt man NICHT als

<button onclick="topFunction()" id="myBtn" title=“nach oben">content:“\ 1F51D“</button>

ein sondern als

<button onclick="topFunction()" id="myBtn" title="Nach Oben">&#128285;</button> 

Auf DIESE Seite kannst du ALLE HTML-Entities finden inklusive deren HTML-Code finden oder du gibtst die HTML-Entity im Suchfenster dort ein. Dann wird auch die benötigte HTML-Code angezeigt.


Gruß,
Marjorie

Hilfe ist nicht selbstverständlich. Deshalb halte ich ein "Dankeschön", nachdem jemandem geholfen wurde, für überaus angebracht und höflich.

#24

HelmutS

Eroberer  (71 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://www.fuchsfilm.de

Aaah – vielen lieben Dank Marjorie. Gewußt wie und wo!!

Hatte versucht, mich einzulesen – aber wohl nicht so erfolgreich 😞 😞

Wünsche dir ein schönes Wochenende.

Beste Grüße

Helmut

7505 Aufrufe | 24 Beiträge