[jquery] trage animatie veel statestieken.

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Ervaren PHP ontwikkelaar

Functie Jij als PHP ontwikkelaar komt te werken in een team van 4 andere PHP ontwikkelaars. Je zult je voornamelijk bezig houden met: – Het ontwikkelen van nieuwe features – Doorontwikkelen van de API – Nadenken over de technische infrastructuur – Datakwaliteit Samen met het team ben jij verantwoordelijk voor de verdere ontwikkeling van de software en om de positie als marktleider in Europa te behouden. Ze werken volgens SCRUM in 2 wekelijkse sprints, werken met Jira voor alle tickets en communiceren veel via Slack. Eisen • Minimaal 3 jaar ervaring als back end developer • Je hebt affiniteit met

Bekijk vacature »

Software Developer

Functie omschrijving Veel begeleiding en de kans om je verder te ontwikkelen als software developer. Dat kunnen wij jou bieden bij deelname aan deze leuke traineeship. Je krijgt een mentor toegewezen die jou alle kneepjes van het vak leert. Heb jij al wat ervaring als software developer? Daar worden wij heel blij van! Lees snel verder! Bedrijfsprofiel Als software developer neem je deel aan een trainings programma in de omgeving van Haarlem waar je persoonlijk wordt begeleidt, zodat je alle kneepjes van het vak leert. Aan de hand van jouw kennis en ervaring krijg je een persoonlijk opleidingstraject. Je gaat

Bekijk vacature »

Belastingdienst - Freelance Senior Applicatie ontw

Startdatum: 01.06.2023 Richttarief: €65,00 - €75,00 Duur van de opdracht: 6 maanden Uren per week: 36 Taal: Nederlands vereist! Gelieve in het Nederlands te solliciteren. Functieomschrijving: We verwachten van je, dat je: Brede ervaring hebt als JAVA-ontwikkelaar; Ervaring hebt met Agile/Scrum-werken en je thuis voelt in een Agile omgeving; Een aandeel levert aan het scrumproces en in de SAFe-releasetrain; Zelfstandig werkt in een scrumteam en intensief de samenwerking op zoekt met je directe collega’s en je omgeving; Ervaring meebrengt met het schattten en inplannen van taken tot en met het testen en demonstreren van de opgeleverde functionaliteit; Collega’s in je

Bekijk vacature »

C#.NET ontwikkelaar

Functieomschrijving Voor een gewaardeerde werkgever in regio Tilburg zijn wij op zoek naar een C#.NET ontwikkelaar. Je bent verantwoordelijk voor het ontwikkelen van dashboards, webapplicaties en apps voor de eigen IOT-oplossingen. Samen met een vooruitstrevend team van ontwikkelaars en engineers krijgen jullie de opdracht om de sensoren in de apparatuur te scannen en vervolgens de data om te zetten in belangrijke inzichten voor de klanten. Taken en verantwoordelijkheden: Heb jij ideeën over nieuwe technieken die jullie kunnen implementeren? Hier wordt echt naar je geluisterd en gekeken of jouw idee daadwerkelijk ingezet kan worden; Je gaat aan de slag met de

Bekijk vacature »

Senior Front-End Developer

Als Senior Front-End Developer bij Coolblue verbeter je de gebruiksvriendelijkheid van onze webshop voor miljoenen klanten. Wat doe je als Senior Front-End Developer bij Coolblue? Als Senior Front-end Developer werk je aan de gebruiksvriendelijkheid van onze webshop voor miljoenen klanten. Je vindt het leuk om samen te werken met de UX designer om stories op te pakken. Daarnaast ben je trots op je werk en verwelkomt alle feedback. Ook Senior Front-end Developer worden bij Coolblue? Lees hieronder of het bij je past. Dit vind je leuk om te doen Verbeteren van de gebruiksvriendelijkheid van onze webshop voor miljoenen klanten. Nadenken

Bekijk vacature »

Freelance JAVA / C# Developer

Functieomschrijving Voor een opdrachtgever in omgeving Zoetermeer zijn wij op zoek naar ervaren JAVA of C# Developers die graag op projectbasis willen werken. Je komt terecht bij een informele developers club die mooie projecten uitvoeren voor grote klanten. Ben je een ervaren freelancer of werk je in loondienst en ben je toe aan een nieuwe uitdaging? Lees dan snel verder want wie weet is dit een leuke vacature voor jou! Het fijne van deze werkgever is dat je zelf mag beslissen hoe je te werk wilt gaan. Wil je als freelancer werken dan is dat OK. Wil je de zekerheid

Bekijk vacature »

Senior Product Developer

Functieomschrijving Als senior Product Developer ben je verantwoordelijk voor bestaande mobiliteitsproducten en de ontwikkeling van nieuwe mobiliteitsconcepten. Met behulp van diverse klantonderzoeken, klantsessies en salesmeetings zorg je ervoor dat je de veranderende mobiliteitsbehoeften in de markt kent. Hier speel je op in door innovatieve, flexibele, efficiënte en duurzame vervoersoplossingen te bedenken, te ontwikkelen, te implementeren en uiteindelijk samen met Sales en Marketing collega’s in de markt te zetten. Je initieert en neemt deel aan (internationale en afdeling overschrijdende) projecten, vaak in de rol van projectleider. In die rol bewaak je de voortgang, coördineer je de activiteiten en zorg je voor

Bekijk vacature »

Belastingdienst - Freelance Applicatieontwikkelaar

Startdatum: 01.06.2023 Richttarief: €65,00 - €75,00 Duur van de opdracht: 6 maanden Uren per week: 36 Taal: Nederlands vereist! Gelieve in het Nederlands te solliciteren. Hybride. Kantoordagen in Utrecht, incidenteel in Apeldoorn Functieomschrijving: De afdeling IV – Generieke Voorzieningen – Interactie Online is onderdeel van de keten Interactie. De missie van de keten is: “het faciliteren van de interactie met alle burgers, bedrijven en hun vertegenwoordigers om hen in staat te stellen aan hun fiscale verplichtingen te voldoen en aanspraak te maken op hun rechten.” De afdeling Interactie Online heeft een belangrijke bijdrage binnen deze keten. Dit door het ontwikkelen

Bekijk vacature »

Java developer Zorgsysteem

Dit ga je doen Werken aan het eigen gebouwde zorgsysteem; Verbeteringen maken en toepassen binnen de applicatie; Jij gaat werken aan de Back-end van de applicatie en sporadisch werk je mee aan de Front-end; Samenwerken met andere teams voor een optimaal resultaat; Jij kan 'clean' werken en high quality code schrijven; Jij werkt resultaatgericht. Hier ga je werken De organisatie houdt zich bezig met diverse applicaties met betrekking tot zorgregistratie. Dankzij hun systeem komt alle informatie, omtrent de zorg van een patiënt, op een overzichtelijke en toegankelijke manier samen in één systeem te staan. Op deze manier is deze informatie

Bekijk vacature »

Front-end Developer

Front-end Developers opgelet! Bij Luminis zijn ze opzoek naar jou. Lees de vacature en solliciteer direct. Luminis is een software- en technologiebedrijf met meerdere vestigingen. Vanuit deze vestigingen werken 200 professionals aan technisch hoogwaardige oplossingen voor klanten zoals KLM, Nike en Bol.com. Ook ontwikkelt Luminis eigen oplossingen op het gebied van cloud, Internet of Things, data intelligence, e-sports en e-learning. Luminis onderscheidt zich door aantoonbaar voorop te lopen in technologie en innovatie. Luminis heeft drie kernpunten die verankerd zitten in alles wat we doen: het omarmen van nieuwe technologie, meesterschap en kennis delen. Functiebeschrijving First things first! Het is belangrijk

Bekijk vacature »

3D BIM Add-on Developer

As a 3D BIM add- on developer at KUBUS, you will develop add-ons (called BCF- Managers) to the leading building information modeling (BIM) programs Revit, Navisworks, Archicad, AutoCAD and Tekla Structures. BCF Managers enable data transfer between BIM software and BIMcollab. You will work on both the front- and the back-end. As a software company, KUBUS is in a unique position. We build our own products that are used by tens of thousands of users worldwide. Our company is just the right size: big enough to make a real impact in the market, but small enough that as an individual

Bekijk vacature »

Junior Software Developer C# Verhuursector Verhuur

Samengevat: Wij ontwikkelen en leveren softwaresystemen voor de logistieke sector en de verhuursector. Ben jij geschikt als Junior Software Developer? Heb je ervaring met Delphi? Vaste baan: C# Software Developer Logistiek HBO €2.500 - €3.900 Deze werkgever is een software ontwikkelaar, gericht op software voor de logistieke sector. Deze werkgever heeft eigen producten ontwikkelen en leveren ook maatwerk. Ons bedrijf kent een boeiende en inspirerende werkomgeving met een open cultuur en mogelijkheden voor je verdere ontwikkeling. Bij bij hun werk je aan onze eigen bedrijfsapplicaties. Je ontwikkelt met ons de meest nieuwe software. Wij blinken uit als het gaat om

Bekijk vacature »

.Net Front-end Ontwikkelaar

Wij zoeken een .Net Front-end Ontwikkelaar! Omschrijving Kun jij snel schakelen en ben je stressbestendig? Dan zoeken wij jou! Als .Net Front-end Ontwikkelaar help je mee aan de webapplicatie die over de hele wereld door allerlei bedrijven wordt gebruikt. Je werkt daarnaast mee aan nieuwe en verbeterde functionaliteiten en helpt met het oplossen van bugs. Over de opdrachtgever Je komt te werken in een ambitieus team dat zich blijft ontwikkelen. Dit is alle informatie die we nu kunnen delen over de werkplek. Als jij de .Net Front-end Ontwikkelaar bent voor deze job, vertellen we je snel nóg meer. Eisen Heb

Bekijk vacature »

PHP Developer - medior functie

Functieomschrijving Ben jij innovatief en wil jij je kennis graag delen met jouw nieuwe collega's? Lees dan snel verder! Voor een leuke opdrachtgever in de omgeving van Roosendaal zoeken wij een Symfony developer. Of je nou junior, medior of senior bent, je krijgt hier alle vrijheid en verantwoordelijkheid om jouw eigen loopbaan te ontwikkelen. Je gaat je hier bezig houden met en inspelen op de actualiteiten van jouw vakgebied. Techstack: Symfony, PHP, mySQL. Kennis van Svelte is helemaal mooi meegenomen. Bedrijfsprofiel Al sinds '99 is dit webbureau actief. De kernwaarden binnen het bedrijf zijn integer, dienstbaar en deskundig. Je komt

Bekijk vacature »

Front end developer

Functie Qua type opdrachten is er echt een verscheidenheid aan afnemers, zo werken ze met grote multinationals, maar ook met startups. Zo kom je te werken in een gevarieerde omgeving en kan je ook schakelen tussen verschillende culturen. De projecten variëren van greenfield projecten tot langdurige ontwikkeltrajecten. Hier wordt alleen maar gewerkt met aan front end projecten. Daarom maakt het onze partner niet uit waar jij kennis van hebt, als je maar gedegen kennis hebt van Javascript frameworks, Unit testing en ook bekend bent met de scrum methodiek. Eisen Minimaal 4 jaar relevante werkervaring Kennen en ervaring van Javascript frameworks

Bekijk vacature »
Php knipper

php knipper

27/04/2014 21:04:49
Quote Anchor link
Hallo,

Ik gebruik http://www.chartjs.org/ voor het maken van mijn statestieken, echter kunnen dit er soms redelijk wat woren op 1 pagina. Nu is mijn vraag hoe ik er voor kan zorgen dat dit niet heel de pc trager maakt (alles tergelijk laden geeft problemen).

Ik zat te denken om ieder <script></script> blok na elkaar te laten starten maar ik zou niet weten hoe ik dit moet doen.

Kunnen jullie me op weg helpen of weten jullie een betere manier?

Mvg. Knipper
 
PHP hulp

PHP hulp

13/06/2025 14:48:28
 
Frank Nietbelangrijk

Frank Nietbelangrijk

27/04/2014 21:47:02
Quote Anchor link
als je goed oplet doet chartjs.org zelf pas de animaties als de elementen in de viewport komen.

google eens op 'animate if in viewport'
 
Php knipper

php knipper

27/04/2014 21:59:40
Quote Anchor link
bij mij gebeurt alles op het zelfde moment, ik denk dat de demo pagina gebruik maakt van iets extra.

Ik heb dit gevonden.

http://jsfiddle.net/moagrius/wN7ah/
 
Frank Nietbelangrijk

Frank Nietbelangrijk

27/04/2014 22:02:05
Quote Anchor link
precies...
 
Php knipper

php knipper

27/04/2014 22:05:19
Quote Anchor link
maar hoe kan ik dit het beste gebruiken?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
$(document).on( 'scroll', 'body', function(){
    console.log('Event Fired');
});


en dan een each uitvoeren?
 
Frank Nietbelangrijk

Frank Nietbelangrijk

27/04/2014 22:55:10
Quote Anchor link
ik heb even een demo gemaakt. er wordt inderdaad van een .each() gebruikgemaakt:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scroll demo</title>
  <style>
  p {
    margin-bottom:100px;
  }
  span {
    color: red;
    display: none;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>Try scroll</div>
<p>Grafiek - <span>Geanimeerd!</span></p>
<p>Grafiek - <span>Geanimeerd!</span></p>
<p>Grafiek - <span>Geanimeerd!</span></p>
<p>Grafiek - <span>Geanimeerd!</span></p>
<p>Grafiek - <span>Geanimeerd!</span></p>
<p>Grafiek - <span>Geanimeerd!</span></p>
<p>Grafiek - <span>Geanimeerd!</span></p>
<p>Grafiek - <span>Geanimeerd!</span></p>
 
<script>
/*
In de HTML hierboven zien we acht paragrafen die ieder even dienst doen als een grafiek. de span binnen de paragraaf wordt met css verborgen gehouden.
De functie hieronder kijkt voor iedere paragraaf afzonderlijk of deze zichtbaar is in de viewport door de functie isOnScreen aan te roepen.
Als de functie TRUE teruggeeft dan wordt de span langzaam zichtbaar gemaakt. Dit moet de annimatie voor de grafiek voorstellen.
*/
function animateInsideViewport() {
    $("p").each(function( i ) {
        if($(this).isOnScreen())
            $(this).find("span").show(10000);
    })
}

// deze functie wordt automatisch aangeroepen als de pagina geladen is
$( document ).ready(function() {
    animateInsideViewport();
});

// deze functie wordt telkens aangeroepen als er gescrolld wordt
$( window ).scroll(function() {
    animateInsideViewport();
});

// functie die kijkt of een html element zichtbaar is in de viewport
$.fn.isOnScreen = function(){
    
    var win = $(window);
    
    var viewport = {
        top : win.scrollTop(),
        left : win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();
    
    var bounds = this.offset();
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();
    
    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
    
};
</script>
 
</body>
</html><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
</body>
</html>
 
Php knipper

php knipper

03/05/2014 21:51:51
Quote Anchor link
Sorry voor het late antwoord,

Hartelijk bedankt dat je tijd stak in het maken van het voorbeeld, het is heel handig.
Is het ook mogelijk om in de plaats van een each() op "script" te doen in plaats van "p" of een "script" een class te geven, en deze script tags uit te triggeren door het script?
 
Frank Nietbelangrijk

Frank Nietbelangrijk

04/05/2014 00:27:13
Quote Anchor link
Het moet een HTML element, een HTML/CSS class of een HTML/CSS id zijn:

HTML elementen: p, div, lu, li, span en zo verder

eigenlijk gelden de normale css regels.

Het vormt een soort while() lus die alle elementen één voor één behandelt. er wordt in mijn voorbeeld dus voor elke <p></p> element bekeken of deze zichtbaar is in het venster en zo ja dan wordt de animatie gestart.

Toevoeging op 04/05/2014 00:37:59:

Je kan gewoon de code in de each loop zetten die je wilt:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
<p>Grafiek A</p>
<p>Grafiek B</p>
 
<script>
    $("p").each(function( i ) {
    // doe wat je wilt en vergeet niet dat $(this) naar het element wijst dat we nu behandelen. kijk maar:
    alert($(this).html());
    })
</script>
Gewijzigd op 04/05/2014 00:30:11 door Frank Nietbelangrijk
 
Php knipper

php knipper

04/05/2014 01:10:37
Quote Anchor link
dat snap ik, maar mag je ook een <sc ript></scri pt> tag een class geven zodat deze door de each kan.

en kan je dan in een pagina een aantal van deze script tags zetten met daar een code in zonder dat deze word uitgevoerd aan het begin van de pagina maar pas wanneer de each() deze triggert?
 
Frank Nietbelangrijk

Frank Nietbelangrijk

04/05/2014 01:27:42
Quote Anchor link
Nee dat gaat niet en dat moet je ook niet willen. Gebruik in plaats daarvan een functie:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
function doeiets(deze)
{
    alert(deze.html());
}

<script>
$("p").each(function( i ) {
    doeiets($(this));
})
</script>
 
Php knipper

php knipper

04/05/2014 09:59:26
Quote Anchor link
als ik voor iedere statistiek een functie schrijf dan weet de each toch niet welke functie hij moet starten?
 
Frank Nietbelangrijk

Frank Nietbelangrijk

04/05/2014 10:16:10
Quote Anchor link
ah op die manier :-)

zoiets?
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<p id="grafiek A">Grafiek - <span>Geanimeerd!</span></p>
<p id="grafiek B">Grafiek - <span>Geanimeerd!</span></p>

function doeiets1(deze)
{
    alert(deze.html());
}

function doeiets2(deze)
{
    alert(deze.html());
}

<script>
$("p").each(function( i ) {
    
    switch($(this).attr("id"))
    {
        case 'grafiek A':
              doeiets1($(this));
              break;
        case 'grafiek B':
              doeiets2($(this));
              break;
        default:
              break;
}})
</script>
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.