[jquery] trage animatie veel statestieken.

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Developer Low-code

Dit ga je doen Low-code ontwikkeling van software voor landelijk bekende organisaties; Opleveren van mooie eindproducten, middels de Agile methodiek; Samenwerken in een team van 10 collega's; Direct contact met de eindklant over de gewenste oplossingen. Hier ga je werken Als Developer kom je te werken in de regio van Lelystad bij een organisatie die met toonaangevende klanten uit heel Nederland samen werkt. De producten en diensten van de organisatie bereiken miljoenen Nederlanders. Hierbij komt een grote hoeveelheid informatie kijken en deze moet discreet en veilig verwerkt worden. De processen die hierbij horen worden door het IT team vormgegeven. De

Bekijk vacature »

Front end developer binnen de consultancy

Functie Je komt in een team met ambitieuze developers die de passie voor Front-End met jou delen. Samen ga je aan de slag met leuke en leerzame opdrachten. Het team heeft een eigen budget en financiën en zij bepalen zelf hoe dat besteed en investeert wordt. Je gebruikt tools als JavaScript, Node.js, React, Angular, Typescript en Vue.js wanneer je werkt aan de opdrachten. Daarnaast zul je veel leren van je collega’s en gezamenlijk een leuke tijd doorbrengen tijdens activiteiten zoals wintersport, hackatons en conferentiebezoeken. Je krijgt niet alleen de mogelijkheid Front-End te ontwikkelen, maar ook vooral jezelf. Dit kan behaald

Bekijk vacature »

Front-end Angular developer

Functie In jouw rol als Front-End developer werk je samen met de backend developers om middels tweewekelijkse sprints het platform naar een hoger niveau te tillen. Hiernaast heb je affiniteit met data en werk je graag samen met het team om de gegevensintegriteit en -beveiliging te waarborgen, om ervoor te zorgen dat de gebruiker wereldwijd de beste SaaS-services heeft. Deze organisatie heeft meer dan 100 mensen in dienst, waarvan er 45 in Nederland werken. Het ontwikkelteam bestaat uit 10 mensen en is verdeeld in 2 scrumteams. Het eerste team bestaat uit Java en Scala ontwikkelaars. Het tweede team, waar jij

Bekijk vacature »

Web Application Developer

Dit ga je doen Samen met het team werk je aan de visualisatie functionaliteiten en hoe dit gebruikt kan worden in een operationele setting; Het ontwerpen, ontwikkelen, onderhouden en leveren van support betreft het Warehouse Management Systeem en de bijbehorende web visualisaties; Je gebruikt hierbijde tools WebGL en ASP.net; Het meewerken in implementatieprojecten; Het leveren van Go-Live Support; Sparren met jouw Amerikaanse collega's. Hier ga je werken Voor een internationale organisatie in de transport zijn wij momenteel op zoek naar een Web Application Developer. Ze zijn wereldwijd de grootste speler en lopen voorop met het automatiseren van alle processen van

Bekijk vacature »

Laravel Developer

Functie omschrijving Voor een gave organisatie in de buurt van Den Bosch zoek ik een PHP developer. Het is van belang dat je kennis/ervaring hebt met het framework Laravel. Jij gaat in deze functie software applicaties ontwikkelen. Deze software projecten zijn heel divers, en deze organisatie maakt software, van A tot Z. Klanten kunnen in elke sector werkzaam zijn, van profit tot non-profit. Andere taken zijn onder andere: documentatie schrijven over applicaties/uitleg geven over software en applicaties/ klantcontact over bestaande applicaties/applicaties optimaliseren. Bedrijfsprofiel Deze organisatie zit in de regio van Den Bosch en is een klein bedrijf. Er werken circa

Bekijk vacature »

OutSystems developer

Dit ga je doen Klanten adviseren over de mogelijkheden van OutSystems; OutSystems oplossingen ontwikkelen en implementeren; Stakeholdermanagement; Kennis en expertise up to date houden en delen met het team. Hier ga je werken Onze opdrachtgever, gevestigd in regio Amsterdam, is een innovatieve dienstverlener die zich richt op grote corporates in verschillende sectoren. Doordat je bij veel verschillende klanten aan de slag zal gaan is geen enkel project hetzelfde. De organisatie kenmerkt zich door hoge mate van professionaliteit en innovatieve oplossingen. In de rol van OutSystems developer zal jij verschillende grote klanten helpen om efficiënte OutSystems oplossingen te ontwikkelen en implementeren.

Bekijk vacature »

Junior Java Developer

Dit ga je doen Je ontwikkelt innovatieve, maatschappelijk belangrijke applicaties; Je implementeert nieuwe features; Je gaat in gesprek met eindgebruikers en designers om de applicaties continu te finetunen; Je draait mee in een professionele Agile/Scrum omgeving. Hier ga je werken Onze klant is een internationale organisatie gevestigd in de omgeving van Amsterdam. Ze staan zeer goed bekend in de markt door hun innovatieve dienstverlening op IT gebied en hun gepassioneerde werknemers. Voor hun inspanningen op het gebied van IT hebben ze meerdere prijzen gewonnen! Onze klant is onderdeel van een Corporate werkgever en heeft zelf 300 mensen in dienst. Om

Bekijk vacature »

Ervaren PHP Developer

Functie omschrijving Jelling IT zoekt ervaren PHP developer! Voor een organisatie in de regio Rhenen zijn wij op zoek naar een ervaren PHP developer die gaat functioneren als een verlengstuk van de klant. Jij bent iemand die technisch complexe zaken met enthousiasme aanvliegt. Je bent in staat om aan meerdere projecten te werken en werkt graag met de nieuwste technieken. In deze functie werk je veel samen met front-end developers en stel je alles in het werk om grote verschillen voor de klanten teweeg te brengen. Verder ben jij iemand die graag zichzelf uitdaagt en die altijd de beste wilt

Bekijk vacature »

Medior/senior Back-end developer wanted!

Functie Because of the growth within the company, we are looking for reinforcement in the devlopmenttean. As a back-end developer you build the company software that helps us with the primary processes. A fun (internal) project in which you continuously develop the software! You will work in a small team, we have daily stand-ups and a scrum session every fortnight, led by our Scrum Master. During these sessions, you get the opportunity to present your ideas and discuss them with your fellow developers and the Product Owner. Within the development teams, we use Trello, Gitlab, Jiira, Confluence and Boockstack. They

Bekijk vacature »

Front-end Developer - React - Data Driven

Bedrijfsomschrijving Onze klant is een snelgroeiende organisatie die een data-driven inspectieapp op de markt hebben gebracht die nu al een aantal jaar door verschillende organisaties wereldwijd gebruikt wordt. Er zijn zo'n 6 mensen werkzaam bij dit bedrijf en ze zijn nu vooral op zoek naar een sterke front-end developer die wil gaan werken aan nieuwbouw applicaties en de uitbouw van de huidige applicaties. De reden dat ze zoeken is omdat er veel werk op komst is en ze hier de juiste capaciteit voor willen hebben. Er heerst hier een hele prettige sfeer waarin respect en eerlijke communicatie belangrijk is. Ook

Bekijk vacature »

Front end developer

Functie Het team bestaat uit User Experience designers, Data Scientists en Software Engineers met passie voor hun vak. De consultants en ontwikkelaars werken volgens de Design Thinking methode waarbij de eerste stappen van ontwerp en ontwikkeling zullen samenkomen in een proof of concept. Nadat is vastgesteld dat de oplossing voldoet aan de belangrijkste behoeftes worden producten of services gevalideerd door middel van korte iteraties. Hiermee zorgen ze ervoor dat het werk voldoet aan de technische vereisten en gebruikersbehoefte. Door het inzetten van de nieuwste technologieën die toekomstbestendig zijn weten ze klanten omver te blazen. Ook geven en organiseren ze veel

Bekijk vacature »

Oracle APEX developer

Wat je gaat doen: Als Oracle APEX ontwikkelaar bij DPA werk je samen met collega’s aan de meest interessante opdrachten. Je zult je ervaring met SQL, PL/SQL, JavaScript, HTML en CSS inzetten om wensen van opdrachtgevers te vertalen naar technische oplossingen. Je werk is heel afwisselend, omdat DPA zich niet beperkt tot een specifieke branche. Zo ben je de ene keer bezig binnen de zorgsector, de andere keer is dit bij de overheid. Wat we vragen: Klinkt goed? Voor deze functie breng je het volgende mee: Je hebt een hbo- of universitaire opleiding afgerond Je hebt 2 tot 5 jaar

Bekijk vacature »

Low Code Developer voor o.a. overheidsprojecten!

Bedrijfsomschrijving Wil jij ook behoren tot de specialist in Low Code? Dan zou ik zeker aanraden om verder te lezen. Deze organisatie is ooit opgericht door twee studenten en is inmiddels uitgegroeid tot een serieuze werkgever met een groot aanzien op Low Code projecten. De sfeer is echter niet veranderd, er heerst een informele sfeer met een open deuren beleid, en hierin mag de eigen bar natuurlijk niet ontbreken. Momenteel maakt deze organisatie een flinke groei door en hier kan jij natuurlijk niet bij ontbreken. Daarom ben ik op zoek naar Low Code Developers met een degelijke technische achtergrond. Kennis

Bekijk vacature »

Software developer - senior

Functie omschrijving Voor een echt softwarebedrijf in omgeving Gouda zijn wij op zoek naar versterking voor de afdeling Software Development! Ben jij op zoek naar een werkgever waar meerdere software developers werken aan interessante projecten? Ben jij op zoek naar een werkgever waar je onderdeel wordt van een team dat echt passie heeft voor het ontwikkelen van software? Dan ben je hier aan het juiste adres! Als softwareontwikkelaar kom je terecht bij een onafhankelijk, door kwaliteit gedreven, doortastend en daarbij op een Agile wijze werkend bedrijf. Ben jij een expert in het vertalen van Componenten van Functionaliteit naar Business lagen?

Bekijk vacature »

Senior Software developer PHP

Functie Jij als senior PHP ontwikkelaar komt te werken in 1 van onze SCRUM teams. Momenteel werken er zo’n 30 developers binnen onze organisatie Jij gaat de brug zijn tussen het bouwen van verschillende functionaliteiten binnen onze applicaties en deze vervolgens te integreren in onze centrale hub. Je start je dag om 9 uur met een stand up en dan pak je je taken op voor de dag. Een greep van jouw taken zijn: – Het bedenken en uitbouwen van features binnen de verschillende applicaties – Onderhouden van CI/CD pipelines – Bezighouden met Security & Privacy Eisen • Minimaal 4

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

23/02/2024 13:56:21
 
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.