Soort van JavaScript loader

[Naerdiel]

Hallo allemaal.

Ik ben bezig met het maken van een website. Nu kom ik tegen het volgende aan. Als ik heb ingelogd op mijn pagina, kom ik op een welkom pagina uit die na 10 seconden geredirected wordt. In de tijd dat ik nog wel op deze pagina zit wil ik graag een soort van loader hebben die elke seconde een balletje er bij laat komen. Dus in totaal wil ik 10 bolletjes op mijn scherm zien voordat ik de pagina verlaat.

Dit heb ik nu in flash gemaakt, maar zou dit graag in JS willen hebben. Is dit mogelijk?

Groet Naerdiel

[grumbkow]

Je kan in deze richting zoeken.
Een functie die aan een div een afbeelding toevoegt (in dit geval een <span></span> met een punt er in.
Deze functie roept zichzelf elke seconde aan en als counter groter dan 9 is dan redirect je de pagina.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
	$(document).ready(function()
	{
		counter = 0;
		function addDot()
		{
			if(counter < 10 )
			{		
				alert(counter);
				counter++;
				$('#loadingDots').append('<span> . </span>');
				setTimeout(addDot(), 1000);
			}
			else
			{
				window.location = "http://www.google.com/"	
			}
		}
		addDot();
	});
</script>

<div id="loadingDots">
	
</div>

[Naerdiel]

Je kan in deze richting zoeken.
Een functie die aan een div een afbeelding toevoegt (in dit geval een <span></span> met een punt er in.
Deze functie roept zichzelf elke seconde aan en als counter groter dan 9 is dan redirect je de pagina.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
	$(document).ready(function()
	{
		counter = 0;
		function addDot()
		{
			if(counter < 10 )
			{		
				alert(counter);
				counter++;
				$('#loadingDots').append('<span> . </span>');
				setTimeout(addDot(), 1000);
			}
			else
			{
				window.location = "http://www.google.com/"	
			}
		}
		addDot();
	});
</script>

<div id="loadingDots">
	
</div>

Hallo grumbkow,

Bedankt voor je reactie! Het is niet helemaal wat ik zoek. Ik krijg nu namelijk pop-ups met daarin nummers van 1 t/m 10.
De dots zie ik niet.

Ik hoop dat je hier een oplossing voor hebt.

[grumbkow]

Dat is slechts om te kijken of de counter wel meetelde.
Je kunt gewoon die alert weghalen.

Hallo grumbkow,

Bedankt voor je reactie! Het is niet helemaal wat ik zoek. Ik krijg nu namelijk pop-ups met daarin nummers van 1 t/m 10.
De dots zie ik niet.

Ik hoop dat je hier een oplossing voor hebt.

[csshunter]

Hoi Naerdiel en grumbkow,
Het kan ook eenvoudig met een background-image, waar alle 10 de balletjes in zitten.

• Met de background-position is deze helemaal naar links getrokken, zodat er eerst niets te zien is.
• Vervolgens laat je met javascript de background-position telkens na 1 sec. opschuiven met de breedte van een balletje.
• Als alle balletjes er zijn: hup, door naar de volgende pagina.

Hier is dan helemaal geen jQuery voor nodig, kan gewoon met:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
var count=0;
function proceed(){
    if (count<=10){
        document.getElementById('proceedbar').style.backgroundPosition=(-261+count*26)+"px 0";
        count=count+1;
        setTimeout(proceed,1000);
    }
    else {
        window.location="plop.htm"; // locatie nieuwe pagina
    }
}
proceed();
</script>

Dit scriptje zet je helemaal onderaan, vlak voor de </body></html>.

• Test: proceed-bar.htm.

Met vriendelijke groet,
CSShunter

[Naerdiel]

Hoi Naerdiel en grumbkow,
Het kan ook eenvoudig met een background-image, waar alle 10 de balletjes in zitten.

• Met de background-position is deze helemaal naar links getrokken, zodat er eerst niets te zien is.
• Vervolgens laat je met javascript de background-position telkens na 1 sec. opschuiven met de breedte van een balletje.
• Als alle balletjes er zijn: hup, door naar de volgende pagina.

Hier is dan helemaal geen jQuery voor nodig, kan gewoon met:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
var count=0;
function proceed(){
    if (count<=10){
        document.getElementById('proceedbar').style.backgroundPosition=(-261+count*26)+"px 0";
        count=count+1;
        setTimeout(proceed,1000);
    }
    else {
        window.location="plop.htm"; // locatie nieuwe pagina
    }
}
proceed();
</script>

Dit scriptje zet je helemaal onderaan, vlak voor de </body></html>.

• Test: proceed-bar.htm.

Met vriendelijke groet,
CSShunter

Hallo CSShunter,

Heel erg bedankt voor je reactie! Dit is inderdaad iets makkelijker! Ik zal het eens uit proberen!

Groet Naerdiel

[Naerdiel]

Hallo CSShunter,

Heel erg bedankt voor je reactie! Dit is inderdaad iets makkelijker! Ik zal het eens uit proberen!

Groet Naerdiel

Nu loop ik tegen het probleem dat ik de image niet zie op het scherm... alleen een lege balk. Ik heb het gehele script overgenomen en de pic in mijn map gezet..

Ik weet niet wat het probleem is:S

[csshunter]

Ik ook niet, want ik zie geen testpagina om een diagnose te kunnen stellen.
Heb je een link?

[Naerdiel]

Ik ook niet, want ik zie geen testpagina om een diagnose te kunnen stellen.
Heb je een link?

Nee, hij draait nog lokaal op dit moment, maar dit is mijn code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="./style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login pagina Captive portal</
</head>
<body>
<div id="container">
<?php
include './headerdvn.php';
?>
<div id="proceedbar"></div>
<div class="push"></div>
</div>
<script type="text/javascript">
var count=0;
function proceed(){
if (count<=10){
document.getElementById('proceedbar').style.backgroundPosition=(-261+count*26)+"px 0";
count=count+1;
setTimeout(proceed,1000);
}
else
{
window.location="adminpage.php"; // locatie nieuwe pagina
}
}
proceed();
</script>
<?php
include './footerdvn.php';
?>
</body>
</html>

CSS:
#proceedbar
{
width: 261px;
height: 27px;
margin: 10px auto;
border: 1px solid #8080FF;
background: #F5FFFF url(images/proceed-bar.png) no-repeat -261px 0;
}

[csshunter]

Aha, ik vermoed dat het fout gaat met de vindplaats van het image, die via het stylesheet wordt opgegeven.
Als de images in een mapje zitten op gelijke hoogte als het mapje van het stylesheet, zou het bv. moeten zijn:

#proceedbar
{
...
background: #F5FFFF url(../images/proceed-bar.png) no-repeat -261px 0;
}

Vanuit het css-mapje ga je dan eerst een map omhoog, om van daaruit af te dalen naar de images-map.

• NB: de relatieve paden vanuit de css zijn ten opzichte van de stylesheet-map, en niet tov de pagina-map!

Met vriendelijke groet,
CSShunter
__________
PS: Hierboven wordt de <title> niet met </title> afgesloten.