Custom code on self-hosted Webflow website is throwing error

Design help Custom code
1

I have a problem that on my self-hosted site with using the webflow.js the function to show and hide text does not work. when i do not load the webflow.js it works.

So when it delete of my project this: it works.

I defined in the Header of my project in a new CSS-file this:
div.tabxx:not(:target) div.contentxx, div.tabxx:target div.showxx, div.tabxx div.hidexx {display: none;}
div.tabxx:target div.contentxx, div.tabxx:target div.hidexx {display: block;}

and in HTML this:

<div class="tabxx" id="text1"><div class="contentxx" align="left"><p class="p-format themenseite">TEXT COMPLETE</div>

<div class="showxx" align="left"><p class="p-format themenseite">TEXT SHORT</p><a class="button w-button" href="https://www.zukunftsblick.de/themen/kartenlegen/#text1">Text einblenden</a></div>

<div class="hidexx" align="left"><br><a href="https://www.zukunftsblick.de/themen/kartenlegen/#">Text schließen</a></div></div>
</div>

Why does the webflow.js not let my code showing the text?

Here is my public share link: https://preview.webflow.com/preview/zukunftsblickde?preview=33a33a38cab612995be302445a4f83b1

2

I need a solution urgent!!

3

Hey @Bettina_Lucas!

Can you please provide also a link to your self-hosted site? I’m not sure what show/hide script you’re talking about, so more details would be superbly helpful.

Make sure to point us to where do you use and keep that script in your code/site.

Thanks!
Bart

4

Dear Support!

If webflow.js is in use our additional CSS not work properly. We work with DIV-Container to show/hide parts of the content.

This is the part we use in CSS:

div.tabxx:not(:target) div.contentxx, div.tabxx:target div.showxx, div.tabxx div.hidexx {display: none;}
div.tabxx:target div.contentxx, div.tabxx:target div.hidexx {display: block;}

Example:

If you click on “Text einblenden” (Show Text) the complete Text shall be shown, but nothing happen.

In zusatzcss.css we have definite the CSS part above.

<link href="https://www.zukunftsblick.de/design/css/zusatzcss.css" rel="stylesheet" type="text/css">

In the html of the Page is defined:

<div class="tabxx" id="text1"><div class="contentxx" align="left"><p class="p-format themenseite">Auf Grund ihrer Darstellung werden die Crowley Tarotkarten als Spiegel der Seele bezeichnet. Die <b><b>Crowley Tarotkarten am Telefon</b></b> zu befragen kann Ihnen helfen sich selbst besser zu verstehen und Ihr Leben mit anderen Augen zu sehen. Wenn Sie wissen, was Ihre Seele braucht, können Sie es ihr geben und Ihr wirkliches Leben kann beginnen.<br>
<h3>Aleister Crowley und seine Tarot-Karten</h3>
Die Thoth Tarot-Karten, wie die <b><b>Crowley Tarotkarten</b></b> auch genannt werden, sind auf die Entstehungszeit bezogen ziemlich modern, sowohl in der Aussagekraft wie auch in der Deutung. Entgegen der vielen Gerüchte um Aleister Crowley faszinieren seine Tarot-Karten die Menschen mit Dramatik und Tiefe und stehen auch heute noch hoch im Kurs beim <a href="https://www.zukunftsblick.de/themen/kartenlegen/">Kartenlegen</a>. Die künstlerische Gestaltung haben wir Lady Frieda Harris zu verdanken, welche zwar eigenständig in der Darstellung aber in Zusammenarbeit mit Aleister Crowley in der Zeit von 1939 bis 1944 die Tarot-Karten so zum Leben erweckte. Allerdings war die erste Version ein illustriertes Buch "Book of Thoth", erst 1969 waren sie auch als Kartendeck erhältlich. Die Crowley Tarotkarten zeichnen sich sowohl durch Farbintensität wie auch durch eine hohe Qualität im künstlerischen Bereich aus. Sie spiegeln so die Sichtweise von Lady Harris auf die Vorgaben von Aleister Crowley wieder.<br>
<br>Aleister Crowley, eine Name der bei vielen Menschen damals sowohl für Abscheu wie auch für Bewunderung sorgte und auch heute noch oftmals mit dem Begriff Satanist und Schwarzmagier in Verbindung gebracht wird, was zum Teil zu Berührungsängsten mit den Tarot-Karten führte. Aleister Crowley (1875 bis 1949), brachte es zu Lebezeiten zu einiger Berühmtheit, allerdings für die meisten eher im negativen Sinne. Seine Einstellung gegenüber der christlichen Religion und seine Moralvorstellung passten sogar nicht in die damalige Zeit. Mit seinem Lebenswandel schürte er stetig die Ängste und den Aberglauben, der sich wie ein Mantel um seine Person gelegt hatte. Der gelegentlich aufkeimende Vorwurf, Magier und Satanisten würden das Tarot als Werkzeug für ihre Zwecke benutzen, wurde so immer wieder angefacht.
<h3>Crowley Tarotkarten und ihre Deutung</h3>
Das Kartendeck der Crowley Tarotkarten besteht wie ein klassisches Tarot aus 78 Karten. Auch hier sind die Große Arkana mit 22 Schlüsselkarten, die kleine Arkana mit 40 Zahlenkarten und 16 Hofkarten wiederzufinden. Die Schlüsselkarten eröffnet einen Blick auf die geistigen und seelischen Prozesse in der Entwicklung, die Zahlenkarten offenbaren Energien und Emotionen, die Personenkarten stehen für persönliche Eigenschaften. <br>
<br>Auch wenn die <b><b>Crowley Tarotkarten am Telefon</b></b> befragt werden, kann das Keltische Kreuz als Legemethode angewandt werden. Das Keltische Kreuz, auch Ganzheitslegung genannt, ist aus dem Mittelalter überliefert und somit eine der ältesten und gleichzeitig beliebtesten Legemethoden. Das Keltische Kreuz berücksichtigt alle möglichen Aspekte und eignet sich somit hervorragend für einen kompletten Blick, persönlich wie beruflich oder auch spirituell. Dabei ist es unerheblich um welchen Bereich des Lebens es sich handelt. Für kleine Fragestellungen eignet sich beispielsweise das Legen von drei Karten. Möchte man einen Verlauf oder eine Tendenz erkennen, kann man das Kreuz auslegen. Ganz gleich welche Legemethode angewandt wird, jede Karte hat ihre eigene Bedeutung, aber erst im Gesamten ergeben sie eine Bild und lassen Zusammenhänge erkennen, auch bei den Crowley Tarotkarten.<br>
<br><h3>Entdecken Sie Ihr Leben neu mit den Crowley Tarotkarten am Telefon</h3>
Ganz gleich ob Sie die <b><b>Crowley Tarotkarten am Telefon</b></b> oder in einer persönlichen Beratung befragen, die Wertigkeit der Antworten ändert sich dabei nicht. Werfen Sie mit Hilfe der Karten einen Blick auf Ihr Leben. Sehen Sie es im Ganzen, erkennen Sie Ihr eigenes Ich, entdecken Sie Potentiale und Perspektiven, definieren Sie Ihre Ziele neu und finden Sie Ihren ganz persönlichen Weg. <br>
<br>Machen Sie es sich mit einer Tasse Tee und dem Telefon auf Ihrem Lieblingssessel bequem und befragen Sie ganz einfach und bequem die Crowley Tarotkarten am Telefon. Unsere Berater werden Sie auf Ihrer Reise in Ihr neues Leben begleiten. Wir freuen uns auf Sie!<br>
<br><br>Neben den Crowley Tarotkarten am Telefon bieten wir Ihnen noch weitere Unterstützung auf dem Weg durch Ihr Leben. Vielleicht kann <a href="https://www.zukunftsblick.de/themen/blockadenloesung/">Blockadenlösung</a> Ihnen helfen wieder entspannter durchs Leben zu gehen oder integrieren Sie weißmagische <a href="https://www.zukunftsblick.de/themen/rituale/">Rituale</a> und somit positiven Einfluss in Ihr Leben. Natürlich finden Sie bei uns auch Berater, die Ihnen mit <a href="https://www.zukunftsblick.de/themen/hellsehen/">Hellsehen</a>, <a href="https://www.zukunftsblick.de/themen/traumdeutung/">Traumdeutung</a> oder <a href="https://www.zukunftsblick.de/themen/energieuebertragung/">Energieübertragung</a> hilfreich zur Seite stehen. Rufen Sie uns an, wie sind jederzeit gerne für Sie da!<br>
</p></div>


<div class="showxx" align="left"><p class="p-format themenseite">Auf Grund ihrer Darstellung werden die Crowley Tarotkarten als Spiegel der Seele bezeichnet. Die <b><b>Crowley Tarotkarten am Telefon</b></b> zu befragen kann Ihnen helfen sich selbst besser zu verstehen und Ihr Leben mit anderen Augen zu sehen. Wenn Sie wissen, was Ihre Seele braucht, können Sie  <a href="https://www.zukunftsblick.de/themen/crowley_tarotkarten/#text1" class="link-mehr">...mehr</a></p><a class="button w-button" href="https://www.zukunftsblick.de/themen/crowley_tarotkarten/#text1">Text einblenden</a></div>


<div class="hidexx" align="left"><br><a href="https://www.zukunftsblick.de/themen/crowley_tarotkarten/#">Text schließen</a></div></div>

This is a simple CSS solution which I used by a lot of projects in past. I prefer CSS then JS to show / hide parts of the website. Here is an example which work properly when you click on the red Button “Text einblenden”:

https://www.zukunftsblick.de/test.php

Why this example works? I deleted the line

<script src="https://www.zukunftsblick.de/design/js/webflow.js" type="text/javascript"></script>

Therefore there must be a Bug in the webflow.js. ALSO when I switch of javascript, the original example above ( Kartenlegen - Übersicht unserer Beiträge zum Thema Kartenlegen | Zukunftsblick.de ) works properly.

We need an soultion urgend. Thank you

Best regards

Bettina Lucas

5

That’s because you’re adding your custom code (javascript) at the beginning of the page, while it should be at the very end

<body>
  // THIS IS WHERE YOU CURRENTLY ADD CODE – WRONG
  <div>...</div>
  
  <script src="...jquery.min.js" type="text/javascript"></script>
  <script src="...webflow.js" type="text/javascript"></script>
  // YOUR CUSTOM CODE SHOULD GO HERE
  // RIGHT BEFORE CLOSING BODY TAG
</body>

Notice how at the very end of your website’s code, you have two script tags with jquery.min.js and webflow.js files. Your custom code should be right after that.

If you’re adding your custom code after exporting website from Webflow, you can add that code in your favorite IDE (code editor). If you want to add custom code to your Webflow Project, use Custom Code section in Page Manager, or Project Settings. More information here:

Hope that helps :slight_smile:
Cheers,
Bart

P.S. Just found that you also have an error in your code that you put in <head>. In console you can read

Uncaught TypeError: Cannot read property 'style' of null at window.onload ((index):46)

Because you put your code before the HTML of the rest of the website, the script is triggered before the #loadButton element is even read by the browser. Moving scripts to the before </body> place should fix all your issues :slight_smile: Would be also a good idea to wrap your window.onload code with

$(document).ready(function() {
  // your custom code goes here...
});
6

Dear Bart,

thanks for your answer. I updated:

All scripts are now before </body>.

Please notice:

This Scripts are in the page because of others reasons, not for this part we have problems. There we just work with Pure CSS.

7

As you can see, this is still throwing error, because the element is not ready yet.

  1. Are you sure you have an element with loadButton unique id?
  2. Try wrapping your code within
$(document).ready(function() {
  // your custom code goes here...
});
8

Regarding the CSS part not working, from what I see, the CSS is correctly loaded as seen here:


So the problem might only be in either your CSS being incorrect, or your website code missing something. I’ll leave this one up here in Code Help category as this already is beyond our state of service.

Cheers,
Bart

9

Dear Bart,

the Script is not a part of the problem. It´s for the red button “Mehr Beraterprofile öffnen” above. To prevent any error through this I eliminated temporary this script now:

As I said the show/view of the red button “Text einblenden” is completly in CSS. At the test side https://www.zukunftsblick.de/test.php (without webflow.js) works it pretty well.

Best regards

10

test.php page

/themen/kartenlegen page

for me both pages look and work exactly the same.

11

Dear Bart,

the button “Text einblenden” (Show Text) is the problem. There we use pure CSS to show/hide the text. As you can see it works at the test side https://www.zukunftsblick.de/test.php (where I just deleted the line to load the webflow.js).

Best regards

12

Hi @Bettina_Lucas,

Why not just use jquery for this? Webflow already includes it so you might as well use it :slight_smile:

Best,
Sidney

13

Hello Sidney!

Why we should use js when we can do it with css? And, of course, a simple CSS solution shouldn´t be manipulated by the webflow.js.

I thought, maybe we use class-names which are use by the webflow.js. Therefore we changed them to “xx” (like div.tabxx).

Best regards

14

It’s actually “locked” because of href="#..." attribute that is linking to a section which triggers smooth scrolling within the webflow.js file. I am not sure how and if at all that would be a reason for the css not working, but the JS solution is just as elegant as the CSS one. Also at the point where you needed a solution urgently, the JS solution is quick and works without a problem.

$(document).ready(function() {
  $('#morebutton').click(function(e) {
    e.preventDefault();
    $('#showthistext').slideDown();
  });
});

Simply set correct IDs for #morebutton and #showthistext in your project and you’re good to go :slight_smile:

Cheers,
Bart

15

Dear Bart,

first thanks for your solution in Javascript. But this is not an option for us at this point. In some days the project has the official start (the old version on http:// will change to https://), and I hope you can investigate before where the problem is. Thanks!

Best regards

16

42 AM

edited by @bart:
_@Revolution look here: https://discourse.webflow.com/t/custom-code-on-self-hosted-webflow-website-is-throwing-error/47419/7_

17

Dear Revolution,

thank you for your message. When Bart made this note we eliminated this Script, but that didn´t work. Meanwhile we insert this Script again to fix this error.

To prevent any discuss of it we eleminated this part again. As you can see this is not the problem:

I think that Bart pointed out the problem: The webflow.js has a Problem with the # in the link…

Best regards

18

Can somebody give me a solution for this problem? It is very important for our projects to go online!

19

Hi @Bettina_Lucas, the Webflow.js is required for smooth scrolling interactions and other widget features in Webflow, I am sorry, there is no way around that at the moment as those are scripted behaviors in javascript.

20

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.