Hi there!
Hope you can help me out.
I have uploaded some code to my Wordpress website via Elementor HTML field, but part of my code will remain on the bootom of the site, eventhough I insert other HTML fields below (see picture, where I tried to insert testimonial below)...Also when I set the background for the HTML field with my code in, only the header and text are coloured, not the buttoms (see other screenshoot). So somehow wordpress interpret my code as two parts. Any ideas how to avoid that. Any way I can wrap all the code in a container or something? Could maybe solve the problem. I am only familiar with doing that with html and css not js.
Thanks a lot!
[CODE title="html, css and js"]<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>p5.js example</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<!-- font-family: 'JetBrains Mono'-->
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">
<style>
body {
background-color: rgb(255, 240, 209);
font-family: 'JetBrains Mono', monospace;
text-align: center;
margin-top: -160px;
}
.overskrift {
font-weight: bold;
font-size: 70px;
font-family: "JetBrains Mono";
color: #370868;
}
.sætning {
font-size: 30px;
font-family: "JetBrains Mono";
color: #370868;
}
.adjBtn {
background: rgb(238, 217, 116);
color: #370868;
font-size: 45px;
font-weight: bold;
padding: 5px;
border: none;
margin: 20px;
font-family: "JetBrains Mono";
}
.adjBtn:hover {
color:
#dcb54d;
}
.røvhulsknap:hover
{
color: #dcb54d;
}
.røvhulsknap {
background-color: #370868;
color:
rgb(238, 217, 116);
border: none;
font-size: 65px;
font-weight: bold;
display: block;
margin: auto auto;
margin-top: 30px;
font-family: "JetBrains Mono";
</style>
<script src="p5.js"></script>
<script>
//key:value pair (eksempelvis er kedelig en "key" og Tørvetrilleren "value")
røvhulsGenerator = {
"kedelig_": ["Tørvetrilleren", "Knastørre", "Kampkedelige", "Surmule", "Intetsigende", "Indholdsløse", "Drøvtykkeren", "Søvndyssende"],
"tyk_": ["Tykke", "Fede", "Klamme", "Koloenorme", "Kamptunge", "Elefant", "Kæmpe"],
"en fiasko": ["Fiasko", "Rendestens", "Taber", "Floppet", "Fuser", "Katestrofe", "Dødsejler", "Falliterklæringen", "Nitten"],
"alt for meget": ["Frembrusende", "Se-mig", "Over-gearede", "Kæmpestore", "Linselussen", "Ego"],
"fortabt": ["Fortabte", "Rendestens", "Depri", "Lost", "Ude og skide", "Fiasko"],
"uelskelig": ["Ligegyldige", "Uelskelige", "Usexede", "Forhadte", "Ubetydelige"],
"belastende": ["Krævende", "Belastende", "Anstrengende", "Besværlige", "Møjsommelige", "Trættende", "Krævende"],
"svag": ["Svansede", "Svæklinge", "Taber", "Skrøbelige", "Krøblinge", "Skvattet"],
"dum": ["Dumme", "Blanke", "Småt begavede", "Enfoldige", "Uduelige", "Inkompetente", "Tungnemme"],
"uempatisk": ["Selvoptagede", "Egotripper", "Overfladiske", "Ufølsomme", "Narcicist", "Hårde"],
"en svindler": ["Svindler", "Hustler", "Faker", "Snydepelsen", "Plattenslageren", "Fusker", "Storsvindler"],
"grim": ["Grimme", "Utiltrækkende", "Uskønne", "Ulækre", "Tudegrimme", "Kiksede", "Vederstyggelige", "Frastødende"],
"ubetydelig": ["Udskuddet", "Flintrende-ligegyldige", "Betydningsløse", "Ligegyldige", "Undværlige", "Lige-meget", "Uvigtige", "Bagatelagtige"],
"latterlig": ["Pauseklovnen", "Grinagtige", "Skvattet", "Til-grin", "Torske-dumme"],
"ikke god nok": ["Utilstrækkelige", "Undermåleren", "Fiasko", "Uværdige", "Mangelfulde"],
"helt alene": ["Outsider", "Palle-alene-i-verden", "Ensomme", "Solo", "Mutters alene", "Venneløse"],
"et fjols": ["Fjolset", "Taber", "Klaphatten", "Idioten", "Torsken", "Dumrian", "Fæet"],
"ved at gå i hundene": ["Rablende", "Nuts", "Skingrende sindsyge", "Neorotiske", "Angste"],
"for indadvendt": ["Eneboeren", "Enspænder", "Outsider", "Særlingen", "Huleboeren"],
"skrøbelig": ["Svansede", "Svæklinge", "Taber", "Skrøbelige", "Svagelige", "Vakelvorne", "Tudefjæset"],
"pinlig": ["Pinlige", "Tåkrummende", "Klovnen", "Kiksede", "Akavede"],
"en bangebuks": ["Frygtsomme", "Feje", "Uslinge", "Pivskiden", "Krysteren", "Pjokket", "Bangebuksen", "Skvattet", "Kujonen", "Kyllinge"],
"ikke glad nok": ["Sort-seern", "Surmule", "Pessimist", "Hængemule"],
"selvoptaget": ["Selvfede", "Navlebeskuende", "Pyntesyge", "Selvfikserede", "Ego-tripper"],
"doven": ["Dvaske", "Luddovne", "Sløve", "Dovendidrik", "Drivert", "Sofakartoflen", "Slendrianen"],
"skrøbelig": ["Sensitive", "Overreagerende", "Papirtynde", "Sarte", "Vakkelvorne", "Tudefjæsset"],
"selvoptaget": ["Selvfede", "Navlebeskuende", "Pyntesyge", "Selvfikserede", "Ego-tripper"],
"anonym": ["Intetsigende", "Ligegyldige", "Tomme", "Ligegyldige", "Farveløse", "Flade", "Banale"],
"uansvarlig": ["Hovedet-under-armen", "Barnlige", "Umodne", "Fortabte", "Dumme"],
"mærkelig": ["Kiksede", "Utjekkede", "Crazy", "Sære", "Særegne", "Skøre", "Særprægede"],
}
// navne som kan tilgåes uanset key
names = ["Finn", "Troels", "Ulla", "Tomse", "Sonja", "Frederikke", "Kurt", "Britt", "Søren", "Olga", "Trine", "Dorte", "Vicki", "Ove", "Tove", "Heine", "Karen", "Esben", "Susanne", "Rune", "Otto", "Pelle", "Patrick", "Ruth", "Niels", "Elinor", "Pia", "Gitte", "Gunnar", "Gustav", "Lone", "Lars", "Laura", "Ingrid", "Ib", "Ida", "Caya", "Camille", "Christian", "Carl", "Renee", "Rune", "Rebecaa", "Uffe", "Ulrich", "Ursula", "Mads", "Mathilde", "Anders", "Anne-Katrine", "Anton", "Birte", "Benny", "Peter", "Poul", "Dorte", "Rebecca", "Trine", "Egon", "Emma", "Rune", "Tina", "Else", "Rasmus", "Per", "Pelle", "Søren", "Torsten"]
//gemmer den valgte key (adjektivet)
let chosenAdj = ""
//skal bruges til at finde ud af om der allere er lavet en "find dit indre røvhul"- knap
let hasCreatedButton = false
//test classes for btn
//gets the key of the object "Røvhulsgenerator"
const classes = Object.keys(røvhulsGenerator);
classes.forEach((item, index) => {
item.id = index + 1;
});
//
function filt(x) {
let navnFilter = []
for (let i = 0; i < names.length; i++) {
const name = names
if (name[0] == x) {
navnFilter.push(name)
}
}
return navnFilter
}
function generate(adj) {
const rndAdj = random(røvhulsGenerator[adj])
const name = random(filt(rndAdj[0]))
return rndAdj + "-" + name
}
// Funktion der sørger for ikke at give det samme out-put to gange i træk f.eks (Tørvetrilleren Troels, Tørvetrilleren Troels) DELVIST, forsættes længere nede
function generateUnique(adj, original) {
while (true) {
let g = generate(adj)
if (g != original) {
return g
}
}
}
function setup() {
// put setup code here
noCanvas();
let z = document.getElementsByClassName("sætning")[0];
for (k in røvhulsGenerator) {
const btn = createButton(k)
btn.class("adjBtn")
const x = k.slice()
btn.mousePressed(() => {
chosenAdj = x
z.innerHTML = "Nogle gange tænker jeg, at jeg er " + x
if (!hasCreatedButton) {
let røvhulsknap = createButton("Find røvhul")
let røvhulsoutput = document.getElementsByClassName("idk")[0];
røvhulsknap.mousePressed(() => {
let original = røvhulsoutput.innerHTML
røvhulsoutput.innerHTML = generateUnique(chosenAdj, original)
})
hasCreatedButton = true
røvhulsknap.class("røvhulsknap")
document.getElementById("_div").appendChild(røvhulsknap.elt);
}
})
}
}
</script>
</head>
<body>
<main>
<p class="overskrift">Røvhulsgenerator</p>
<div id="_div">
</div>
<p class="idk"></p>
<p class="sætning">Nogle gange tænker jeg, at jeg er ...</p>
</main>
</body>
</html>
[/CODE]
Hope you can help me out.
I have uploaded some code to my Wordpress website via Elementor HTML field, but part of my code will remain on the bootom of the site, eventhough I insert other HTML fields below (see picture, where I tried to insert testimonial below)...Also when I set the background for the HTML field with my code in, only the header and text are coloured, not the buttoms (see other screenshoot). So somehow wordpress interpret my code as two parts. Any ideas how to avoid that. Any way I can wrap all the code in a container or something? Could maybe solve the problem. I am only familiar with doing that with html and css not js.
Thanks a lot!
[CODE title="html, css and js"]<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>p5.js example</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<!-- font-family: 'JetBrains Mono'-->
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">
<style>
body {
background-color: rgb(255, 240, 209);
font-family: 'JetBrains Mono', monospace;
text-align: center;
margin-top: -160px;
}
.overskrift {
font-weight: bold;
font-size: 70px;
font-family: "JetBrains Mono";
color: #370868;
}
.sætning {
font-size: 30px;
font-family: "JetBrains Mono";
color: #370868;
}
.adjBtn {
background: rgb(238, 217, 116);
color: #370868;
font-size: 45px;
font-weight: bold;
padding: 5px;
border: none;
margin: 20px;
font-family: "JetBrains Mono";
}
.adjBtn:hover {
color:
#dcb54d;
}
.røvhulsknap:hover
{
color: #dcb54d;
}
.røvhulsknap {
background-color: #370868;
color:
rgb(238, 217, 116);
border: none;
font-size: 65px;
font-weight: bold;
display: block;
margin: auto auto;
margin-top: 30px;
font-family: "JetBrains Mono";
</style>
<script src="p5.js"></script>
<script>
//key:value pair (eksempelvis er kedelig en "key" og Tørvetrilleren "value")
røvhulsGenerator = {
"kedelig_": ["Tørvetrilleren", "Knastørre", "Kampkedelige", "Surmule", "Intetsigende", "Indholdsløse", "Drøvtykkeren", "Søvndyssende"],
"tyk_": ["Tykke", "Fede", "Klamme", "Koloenorme", "Kamptunge", "Elefant", "Kæmpe"],
"en fiasko": ["Fiasko", "Rendestens", "Taber", "Floppet", "Fuser", "Katestrofe", "Dødsejler", "Falliterklæringen", "Nitten"],
"alt for meget": ["Frembrusende", "Se-mig", "Over-gearede", "Kæmpestore", "Linselussen", "Ego"],
"fortabt": ["Fortabte", "Rendestens", "Depri", "Lost", "Ude og skide", "Fiasko"],
"uelskelig": ["Ligegyldige", "Uelskelige", "Usexede", "Forhadte", "Ubetydelige"],
"belastende": ["Krævende", "Belastende", "Anstrengende", "Besværlige", "Møjsommelige", "Trættende", "Krævende"],
"svag": ["Svansede", "Svæklinge", "Taber", "Skrøbelige", "Krøblinge", "Skvattet"],
"dum": ["Dumme", "Blanke", "Småt begavede", "Enfoldige", "Uduelige", "Inkompetente", "Tungnemme"],
"uempatisk": ["Selvoptagede", "Egotripper", "Overfladiske", "Ufølsomme", "Narcicist", "Hårde"],
"en svindler": ["Svindler", "Hustler", "Faker", "Snydepelsen", "Plattenslageren", "Fusker", "Storsvindler"],
"grim": ["Grimme", "Utiltrækkende", "Uskønne", "Ulækre", "Tudegrimme", "Kiksede", "Vederstyggelige", "Frastødende"],
"ubetydelig": ["Udskuddet", "Flintrende-ligegyldige", "Betydningsløse", "Ligegyldige", "Undværlige", "Lige-meget", "Uvigtige", "Bagatelagtige"],
"latterlig": ["Pauseklovnen", "Grinagtige", "Skvattet", "Til-grin", "Torske-dumme"],
"ikke god nok": ["Utilstrækkelige", "Undermåleren", "Fiasko", "Uværdige", "Mangelfulde"],
"helt alene": ["Outsider", "Palle-alene-i-verden", "Ensomme", "Solo", "Mutters alene", "Venneløse"],
"et fjols": ["Fjolset", "Taber", "Klaphatten", "Idioten", "Torsken", "Dumrian", "Fæet"],
"ved at gå i hundene": ["Rablende", "Nuts", "Skingrende sindsyge", "Neorotiske", "Angste"],
"for indadvendt": ["Eneboeren", "Enspænder", "Outsider", "Særlingen", "Huleboeren"],
"skrøbelig": ["Svansede", "Svæklinge", "Taber", "Skrøbelige", "Svagelige", "Vakelvorne", "Tudefjæset"],
"pinlig": ["Pinlige", "Tåkrummende", "Klovnen", "Kiksede", "Akavede"],
"en bangebuks": ["Frygtsomme", "Feje", "Uslinge", "Pivskiden", "Krysteren", "Pjokket", "Bangebuksen", "Skvattet", "Kujonen", "Kyllinge"],
"ikke glad nok": ["Sort-seern", "Surmule", "Pessimist", "Hængemule"],
"selvoptaget": ["Selvfede", "Navlebeskuende", "Pyntesyge", "Selvfikserede", "Ego-tripper"],
"doven": ["Dvaske", "Luddovne", "Sløve", "Dovendidrik", "Drivert", "Sofakartoflen", "Slendrianen"],
"skrøbelig": ["Sensitive", "Overreagerende", "Papirtynde", "Sarte", "Vakkelvorne", "Tudefjæsset"],
"selvoptaget": ["Selvfede", "Navlebeskuende", "Pyntesyge", "Selvfikserede", "Ego-tripper"],
"anonym": ["Intetsigende", "Ligegyldige", "Tomme", "Ligegyldige", "Farveløse", "Flade", "Banale"],
"uansvarlig": ["Hovedet-under-armen", "Barnlige", "Umodne", "Fortabte", "Dumme"],
"mærkelig": ["Kiksede", "Utjekkede", "Crazy", "Sære", "Særegne", "Skøre", "Særprægede"],
}
// navne som kan tilgåes uanset key
names = ["Finn", "Troels", "Ulla", "Tomse", "Sonja", "Frederikke", "Kurt", "Britt", "Søren", "Olga", "Trine", "Dorte", "Vicki", "Ove", "Tove", "Heine", "Karen", "Esben", "Susanne", "Rune", "Otto", "Pelle", "Patrick", "Ruth", "Niels", "Elinor", "Pia", "Gitte", "Gunnar", "Gustav", "Lone", "Lars", "Laura", "Ingrid", "Ib", "Ida", "Caya", "Camille", "Christian", "Carl", "Renee", "Rune", "Rebecaa", "Uffe", "Ulrich", "Ursula", "Mads", "Mathilde", "Anders", "Anne-Katrine", "Anton", "Birte", "Benny", "Peter", "Poul", "Dorte", "Rebecca", "Trine", "Egon", "Emma", "Rune", "Tina", "Else", "Rasmus", "Per", "Pelle", "Søren", "Torsten"]
//gemmer den valgte key (adjektivet)
let chosenAdj = ""
//skal bruges til at finde ud af om der allere er lavet en "find dit indre røvhul"- knap
let hasCreatedButton = false
//test classes for btn
//gets the key of the object "Røvhulsgenerator"
const classes = Object.keys(røvhulsGenerator);
classes.forEach((item, index) => {
item.id = index + 1;
});
//
function filt(x) {
let navnFilter = []
for (let i = 0; i < names.length; i++) {
const name = names
if (name[0] == x) {
navnFilter.push(name)
}
}
return navnFilter
}
function generate(adj) {
const rndAdj = random(røvhulsGenerator[adj])
const name = random(filt(rndAdj[0]))
return rndAdj + "-" + name
}
// Funktion der sørger for ikke at give det samme out-put to gange i træk f.eks (Tørvetrilleren Troels, Tørvetrilleren Troels) DELVIST, forsættes længere nede
function generateUnique(adj, original) {
while (true) {
let g = generate(adj)
if (g != original) {
return g
}
}
}
function setup() {
// put setup code here
noCanvas();
let z = document.getElementsByClassName("sætning")[0];
for (k in røvhulsGenerator) {
const btn = createButton(k)
btn.class("adjBtn")
const x = k.slice()
btn.mousePressed(() => {
chosenAdj = x
z.innerHTML = "Nogle gange tænker jeg, at jeg er " + x
if (!hasCreatedButton) {
let røvhulsknap = createButton("Find røvhul")
let røvhulsoutput = document.getElementsByClassName("idk")[0];
røvhulsknap.mousePressed(() => {
let original = røvhulsoutput.innerHTML
røvhulsoutput.innerHTML = generateUnique(chosenAdj, original)
})
hasCreatedButton = true
røvhulsknap.class("røvhulsknap")
document.getElementById("_div").appendChild(røvhulsknap.elt);
}
})
}
}
</script>
</head>
<body>
<main>
<p class="overskrift">Røvhulsgenerator</p>
<div id="_div">
</div>
<p class="idk"></p>
<p class="sætning">Nogle gange tænker jeg, at jeg er ...</p>
</main>
</body>
</html>
[/CODE]