2 Scripten tegelijk

vrijdag 25 augustus 2017 19:00

Acties:

0 Henk 'm!

Topicstarter

Ik gebruik voor mijn website 2 Javascript scripten. Ik wil graag dat ze beide werken. Het probleem is dat ze niet werken als ze beide in mijn bestand staan. Ik heb het al een paar keer geprobeerd, maar het lukt gewoon niet. Het werkt alleen als ik 1 script wegdoe, maar dan werkt de ander natuurlijk niet. Dus mijn vraag is: Hoe gaan 2 scripten samen?

Mijn code gaat als volgt (Nog een opmerking voor mijn code, de div met display:none; hoort zo.):
<body onload="myFunction()" style="margin:0;">

<div id="loader"></div>

<div style="display:none;" id="myDiv" class="animate-bottom">


<div id="banner">

</div>

<div id="content" class="content">
<span id="SpanContent">
<h1>Official Prabhjot Defence</h1>
<p id="MainContent">Welkom</p>
<br><b>VERBORGEN</b> VERBORGEN</br>
<br><b>VERBORGEN</b> VERBORGEN</br>
<br><b>VERBORGEN</b> VERBORGEN.</br>
<br><b>VERBORGEN</b> VERBORGEN</br>
<br><b>VERBORGEN</b> VERBORGEN</br>
</span>
</div>


<script id="loading">
var myVar;

function myFunction() {
myVar = setTimeout(showPage, 3000);
}

function showPage() {
document.getElementById("loader").style.display = "none";
document.getElementById("myDiv").style.display = "block";
}
</script>

<script id="scrolling">
window.onscroll = function() {myFunction()};

function myFunction() {
if (document.body.scrollTop > 550 || document.documentElement.scrollTop > 550) {
document.getElementById("content").className = "slideUp";
}
}
</script>


<footer>
<p style="color: white">
<span class="EersteFooter"><b>Created by:</b>Prabhjot Singh</span>
<span class="TweedeFooter">Version 1.0</span>
</p>
</footer>

<header>
<a href="index.html">
<img id="logo" src="Logo.png" width="90em" />
</a>
<font style="color: white;">
<span class="HeaderText">
<ul>
<li><a class="active" href="#">VERBORGEN</a></li>
<li><a href="#">VERBORGEN</a></li>
<li><a href="#">VERBORGEN</a></li>
<li><a href="#">VERBORGEN</a></li>
<li><a href="#">VERBORGEN</a></li>
<li><a href="#l">VERBORGEN</a></li>
</ul>
</span>
</font>
</header>
</div>
</body>
</html>

vrijdag 25 augustus 2017 19:04

Acties:

0 Henk 'm!

Juup

De 2e myFunction() overschrijft de eerste.
Gebruik een andere naam voor de 2e.

Een wappie is iemand die gevallen is voor de (jarenlange) Russische desinformatiecampagnes.
Wantrouwen en confirmation bias doen de rest.

vrijdag 25 augustus 2017 19:06

Acties:

0 Henk 'm!

TERW_DAN

Met een hamer past alles.

En geef die dingen een fatsoenljke naam. 'myFunction' zegt natuurlijk niets over wat 't ding doet.

vrijdag 25 augustus 2017 19:11

Acties:

0 Henk 'm!

AW_Bos

Liefhebber van nostalgie... 🕰️

Mijn code gaat als volgt (Nog een opmerking voor mijn code, de div met display:none; hoort zo.):

Zet het liever in een stijlblad, zodat je alle orde erin hebt. Dit voorkomt ook dat je straks per ongeluk met zulke in-line fratsen CSS-regels gaat overschrijven.

☎ Telecommunicatie van vroeger
🚅Alles over spoor en treintjes

vrijdag 25 augustus 2017 19:19

Acties:

0 Henk 'm!

b2vjfvj75gjx7

Prabhjot.Singh schreef op vrijdag 25 augustus 2017 @ 19:00:
Ik gebruik voor mijn website 2 Javascript scripten. Ik wil graag dat ze beide werken. Het probleem is dat ze niet werken als ze beide in mijn bestand staan. Ik heb het al een paar keer geprobeerd, maar het lukt gewoon niet. Het werkt alleen als ik 1 script wegdoe, maar dan werkt de ander natuurlijk niet. Dus mijn vraag is: Hoe gaan 2 scripten samen?

Mijn code gaat als volgt (Nog een opmerking voor mijn code, de div met display:none; hoort zo.):
<body onload="myFunction()" style="margin:0;">

<div id="loader"></div>

<div style="display:none;" id="myDiv" class="animate-bottom">


<div id="banner">

</div>

<div id="content" class="content">
<span id="SpanContent">
<h1>Official Prabhjot Defence</h1>
<p id="MainContent">Welkom</p>
<br><b>VERBORGEN</b> VERBORGEN</br>
<br><b>VERBORGEN</b> VERBORGEN</br>
<br><b>VERBORGEN</b> VERBORGEN.</br>
<br><b>VERBORGEN</b> VERBORGEN</br>
<br><b>VERBORGEN</b> VERBORGEN</br>
</span>
</div>


<script id="loading">
var myVar;

function myFunction() {
myVar = setTimeout(showPage, 3000);
}

function showPage() {
document.getElementById("loader").style.display = "none";
document.getElementById("myDiv").style.display = "block";
}
</script>

<script id="scrolling">
window.onscroll = function() {myFunction()};

function myFunction() {
if (document.body.scrollTop > 550 || document.documentElement.scrollTop > 550) {
document.getElementById("content").className = "slideUp";
}
}
</script>


<footer>
<p style="color: white">
<span class="EersteFooter"><b>Created by:</b>Prabhjot Singh</span>
<span class="TweedeFooter">Version 1.0</span>
</p>
</footer>

<header>
<a href="index.html">
<img id="logo" src="Logo.png" width="90em" />
</a>
<font style="color: white;">
<span class="HeaderText">
<ul>
<li><a class="active" href="#">VERBORGEN</a></li>
<li><a href="#">VERBORGEN</a></li>
<li><a href="#">VERBORGEN</a></li>
<li><a href="#">VERBORGEN</a></li>
<li><a href="#">VERBORGEN</a></li>
<li><a href="#l">VERBORGEN</a></li>
</ul>
</span>
</font>
</header>
</div>
</body>
</html>

JavaScript:

1	window.onscroll = function() {myFunction()};

Wellicht too much voor nu, maar een scroll-listener is erg CPU-intensief.

Je hoeft niet elke pixel dat je scrolled die functie aan te roepen, want dat kan honderden keren per seconde zijn (als je flink doorscrolled).

Beter is een debounce / throttle functie te maken die bv. 4x per seconde aanslaat bij het scrollen en niet voor elke pixel dat je scrolled.

Tweakers doet dit overigens wel (bij de parallax van ze) en je merkt dat de hele pagina vertraagd daardoor.

https://davidwalsh.name/javascript-debounce-function

http://benalman.com/code/...bounce/examples/throttle/

woensdag 30 augustus 2017 22:09

Acties:

0 Henk 'm!

merauder

Persoonlijk vind ik het beter om helemaal geen functies / effecten aan het scrollen te hangen. Ondanks dat er prachtige implementaties van parallax scrolling zijn ben ik absoluut geen fan. Sowieso ga je op Apple iOS, toch wel een heel belangrijk platform voor websites, hier problemen mee krijgen omdat iOS de boel stil legt tijdens het scrollen.

Verder valt aan jouw HTML/CSS stijl ook het nodige op te merken. Mijn advies is om stevig tijd te investeren in HTML / CSS voor je de stap richting Javascript maakt.

Onderwerpen

Vraag

Alle reacties