[jquery] trage animatie veel statestieken.

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Low-Code Expert/Developer: Power Platform Speciali

Bedrijfsomschrijving Als Low-Code Expert/Developer bij ons innovatieve bedrijf, neem je een cruciale rol op je in de creatie, ondersteuning en implementatie van diverse oplossingen met behulp van het veelzijdige Power Platform. Dit platform omvat Power Apps, Power BI, Power Automate, Power Virtual Agent en Azure Logic Apps. Het Power Platform biedt je de mogelijkheid om klanten te voorzien van naadloze integraties door op maat gemaakte oplossingen te creëren die compatibel zijn met (bijna) alle bestaande software-infrastructuren. Dankzij het uitgebreide scala aan toepassingen, krijg je de kans om als architect en projectleider van je eigen oplossing te fungeren. Dompel jezelf onder

Bekijk vacature »

Sportieve Junior C#.NET developer gezocht!

Bedrijfsomschrijving Wil jij werken aan webapplicaties bij de marktleider binnen de branche? Voor een klant in de buurt van Oosterhout ben ik op zoek naar een Fullstack .NET developer. Dit bedrijf bestaat bijna 10 jaar en is inmiddels uitgegroeid tot marktleider in Nederland en heeft tevens kantoren in meerdere landen in Europa. Dit bedrijf bouwt webapplicaties waarbij internationaal enkele honderdduizenden deelnemers, soms tegelijk, een beroep doen op de realtime data uit deze applicaties. Dit brengt erg veel technische uitdaging met zich mee. Ze ontwikkelen nieuwe applicaties maar ook bestaande applicaties worden uitgebreid en verbeterd. Hier kan jij een onderdeel van

Bekijk vacature »

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 »

.NET Developer

Dit ga je doen Binnen het team bouw je aan een applicatie met andere .Net Developers, testers een Product Owner en een Business Analyst. Met het team wordt de backlog besproken. In overleg claim jij jouw deel en zorgt ervoor dat onderhoud en innovatie wordt gerealiseerd. Het project dat momenteel draait is het opgraden van de omgeving. Doorontwikkelen van de huidige applicatie; Overleggen met teamleden om de backlog te verdelen; Onderhouden van de huidige omgeving; Sparren met de business en het ophalen van nieuwe requirements. Hier ga je werken De organisatie is een van de grootste landelijke aanbieder van diverse

Bekijk vacature »

Software Developer PHP JavaScript Python HBO SQL

Samengevat: Wij zijn een softwarebedrijf voor Autodealers. Ben jij een Medior of Senior Software Developer? Heb je ervaring met PHP, JavaScript of Python? Vaste baan: Java.Developer Software HBO €3.000 - €5.200 Bij ons op de werkvloer is er een positieve en informele sfeer. Naast een goede begeleiding en een enthousiaste klantenkring biedt deze werkgever een prettige omgeving met zeer afwisselende werkzaamheden. Houd jij van aanpakken en denk je dat je deze uitdaging aankunt? Dan zoeken wij jou! Zij werken voor grote klanten. Zij doen omvangrijke projecten die we bij deze werkgever op kantoor realiseren (geen detachering). Zij werken met state-of-the-art

Bekijk vacature »

Frontend Developer Vue Nuxt HBO Javascript

Samengevat: Deze werkgever levert elke dag betere digitale gebruikerservaringen. Ben jij geschikt als frontend Developer? Heb je ervaring met Vue en Nuxt? Vaste baan: Front-End Developer HBO €3.100 - €4.600 Zij bieden opdrachtgevers een complete dienstverlening op gebied van ontwerpen en ontwikkelen van websites, zoekmachine optimalisatie, online adverteren, content marketing en conversie verbetering. Zij werken met een eigen ontwikkeld CMS. Bij bij hun werk je aan onze eigen bedrijfsapplicaties. Je ontwikkelt met ons de meest nieuwe software. Wij blinken uit als het gaat om de inzet van technologie. Deze werkgever staat open voor elke nieuwe trend. Onze systemen zijn groot

Bekijk vacature »

Fasttrack learning & development voor Java dev

Wat je gaat doen: Wij zoeken enthousiaste en ambitieuze junior en medior ontwikkelaars die toe zijn aan de volgende stap in hun carrière. Wij helpen je op je pad naar senior ontwikkelaar door ons fasttrack learning en development programma. Na een kort en intensief programma ga jij aan de slag bij klanten van DPA. Daarnaast krijg je veel ruimte om je te ontwikkelen als persoon en als specialist. De eerste maand gaan we aan de slag om je certificeringen te behalen waaronder OCP (Oracle Certified Professional). Daarnaast nemen we een deepdive in Spring Boot. Ook laten we je kennismaken met

Bekijk vacature »

Full Stack .NET Developer C# ASP.NET

Samengevat: Deze werkgever is gespecialiseerd in het op afstand bewaken en besturen van machines en processen. Ben jij een ervaren Full Stack .NET Developer? Heb je ervaring met C# en ASP.NET? Vaste baan: .Net Developer C# ASP.NET HBO €3.300 - €4.500 Deze werkgever is een snel groeiende onderneming gespecialiseerd in het op afstand bewaken en besturen van machines en processen, IoT (Internet of Things). Deze werkgever is een veelzijdige organisatie. Je werkt voor de eigen IT organisatie. Zij werken met moderne technologie en staan open voor innovatie. Wil jij bij de top specialisten horen? Ben jij op zoek naar een

Bekijk vacature »

Front-end developer wanted! (Angular, React, Vue.j

Functie Under the guidance of 3 account managers, one of whom will be your point of contact within your expertise, you will start working for various clients. He or she will help you find a suitable and challenging assignment. Naturally, they will take your situation, experience and (technical) ambitions into account. The assignments last one to two years on average. This allows you to really commit to a project and make an impact as a consultant. Besides the assignment, you will regularly meet your colleagues from the IT department to share knowledge or discuss new trends, for example. Master classes

Bekijk vacature »

PHP developer (Laravel, Docker, Gitlab-CI)

Functie Het IT-team bestaat momenteel uit 4 ontwikkelaars. Ieder onderdeel van de software draait op aparte servers en het bestaat dus echt uit verschillende componenten intern ontwikkeld en je werkt aan alle facetten. Van uitbreiding van de core tot maatwerk voor de klant. Ook liggen er verschillende uitdagingen op servervlak en databases. Je zult de eerste periode veel samenwerken met de lead developer om vervolgens echt je gang te gaan binnen de software. Een groot deel van de systemen is gebouwd met behulp van het Laravel framework en PHP (minimaal 7.2), Docker voor lokaab gebruik en Gitlab-CI voor het deployen

Bekijk vacature »

.net developer

Hoi! Wij zijn auto.nl en wij verkopen auto's online. je bestelt bij ons een auto net zo makkelijk als een spijkerbroek. En bevalt ie niet? Dan stuur je 'm gewoon weer terug. En dat we dat goed doen bewijst onze hoge klanttevredenheid van een 9,3. Nu maken we de volgende stap bij auto.nl. We starten met fysieke winkels. Online zoeken, offline bekijken. Maar nog altijd, geen gedoe! Gewoon eerlijk, transparant en zonder zorgen een auto kopen.. Maar om dat waar te blijven maken en nóg beter te worden, zoeken we uitbreiding van ons development team. Wat ga je precies doen?

Bekijk vacature »

Full Stack Developer

Dit ga je doen Ontwikkelen van Product Informatie Management (PIM) systemen; Werken aan zowel grotere als kleine projecten voor toonaangevende klanten binnen o.a. de retail; Verantwoordelijk voor de front-end werkzaamheden; Naast de front-end werk je ook aan de backend. Hier ga je werken Als Full Stack Developer komt je te werken binnen een vooruitstrevende organisatie die Product Informatie Management (PIM) systemen levert aan hun klanten. Hun klanten zijn toonaangevende bedrijven binnen o.a. de retail. De organisatie zit gevestigd in regio Zwolle en bestaat uit zo'n 35 medewerkers, waarvan 30 IT. Je komt te werken binnen één van de zelfsturende development

Bekijk vacature »

Java Developer

Java 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 »

Fasttrack learning & development voor Java dev

Wat je gaat doen: Wij zoeken enthousiaste en ambitieuze junior en medior ontwikkelaars die toe zijn aan de volgende stap in hun carrière. Wij helpen je op je pad naar senior ontwikkelaar door ons fasttrack learning en development programma. Na een kort en intensief programma ga jij aan de slag bij klanten van DPA. Daarnaast krijg je veel ruimte om je te ontwikkelen als persoon en als specialist. De eerste maand gaan we aan de slag om je certificeringen te behalen waaronder OCP (Oracle Certified Professional). Daarnaast nemen we een deepdive in Spring Boot. Ook laten we je kennismaken met

Bekijk vacature »

Senior Developer ERP Dynamics 365

Samengevat: Deze werkgever is een softwarebedrijf. Ben jij een enthousiaste developer? Heb je ervaring met ERP of Dynamic 365 bussines central? Vaste baan: ERP Applicatie Specialist ERP MBO €3.600 - €5.200 Wij houden ons als bedrijf bezig met het leveren en implementeren van het Microsoft Dynamics pakket binnen verschillende industriële sectoren. Deze werkgever is een veelzijdige organisatie. Je werkt voor de eigen IT organisatie. Zij werken met moderne technologie en staan open voor innovatie. Binnen ons open team is er een no-nonsense cultuur. Daarnaast is er veel onderling contact door de korte communicatielijnen. Het team werkt enthousiast samen om een

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

28/03/2024 23:45:53
 
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.