jquery slider

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

.NET developer

Functie Als junior .NET Developer start jij in een team met 15 developers. In het team is er genoeg senioriteit om ervoor te zorgen dat jij de juiste begeleiding krijgt. Jij begint als eerst alle software pakketten en processen eigen te maken. Vervolgens ga jij deze software programmeren, onderhouden en testen. Ook ga jij research doen naar nieuwe mogelijkheden en zoek jij uit hoe je dit kan implementeren. Jullie werken intern op project basis en afhankelijk van het project werken jullie wel of niet iedere ochtend met een standup. 50% van jullie werkzaamheden is maatwerk en de overige 50% is

Bekijk vacature »

Randstad B.V.- Freelance Senior Fullstack Develope

Startdatum: 01.05.2023 Richttarief: € 75,00 - €85,00 Duur van de opdracht: 1 jaar Uren per week: 40 Werkmodel: Hybride, dinsdag en donderdag aanwezig op kantoor in Diemen en meer wanneer dit nodig is. Functieomschrijving: De ideale kandidaat gaat onderdeel uitmaken van een junior team binnen het foundation domein. Vanuit het foundation domein werkt dit team samen met andere foundation teams en teams uit het online domein (professionals B2B en B2C) voor het bouwen en integreren van HRM functionaliteiten (verlof en benefits) in de persoonlijke portal van Interim Professionals. Er is meer backend werk dan frontend, maar kandidaat moet beiden leuk

Bekijk vacature »

Fullstack Webdeveloper .NET Azure Big Data SaaS

Bedrijfsomschrijving Deze klant van ons is recentelijk onderdeel geworden van een grote moederorganisatie, ze zijn dé partij als het gaat om software maken voor ambitieuze ondernemers, ze maken maatwerk software. Vanuit het fantastisch vormgegeven hightech gebouw te Rotterdam centrum werken ze met zo'n 40 medewerkers aan hoogwaardige software gericht op financiële data, betaalinformatie, maar ook backoffice software. De software wordt webbased, desktop en mobile aangeboden en er worden zeer moderne ontwikkeltechnieken toegepast. Je moet dan denken aan patroonherkenning, Big Data, Machine Learning en OCR. Als Developer, ongeacht je niveau, ga je hier te maken krijgen met de allerleukste kant van

Bekijk vacature »

Junior Developer Low-code

Dit ga je doen Low-code ontwikkeling van software voor landelijk bekende organisaties; Samenwerken in een team van 10 collega's; Opleveren van mooie eindproducten, middels de Agile methodiek; Direct contact met de eindklant over de gewenste oplossingen. Hier ga je werken Als startende IT-professional 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.

Bekijk vacature »

Software Programmeur

Functie omschrijving Voor een informele club in omgeving Delft zijn wij op zoek naar versterking. Ben jij op zoek naar een nieuwe uitdaging als Software Programmeur lees dan snel verder! Als ontwikkelaar kom je terecht op een afdeling van 6 medewerkers. Werkzaamheden Programmeur Je bent bezig met het ontwikkelen van software en webapplicaties. Je kunt technische klussen uitvoeren op locatie. Je onderhoudt contact met de projectleider om er zeker van te zijn dat een project goed verloopt. Je zult klanten ondersteunen. Verder zul je technische ontwerpen en gebruikersdocumentaties schrijven en deze onderhouden. Er wordt voornamelijk gewerkt met PHP, Java en

Bekijk vacature »

Senior .NET developer

Klaar voor een nieuwe uitdaging? Welke technologieën gaan schuil achter de dagelijkse energievoorziening? Als senior .NET developer bij Kenter maak jij samen met je team het verschil, zowel voor de interne organisatie als voor eindklanten. Samen bouwen jullie aan innovatieve dienstverlening met behulp van de nieuwste technologieën en tools. Het is een functie met veel vrijheid, goede arbeidsvoorwaarden én je draagt jouw steentje bij aan de energietransitie. Klinkt dit als iets voor jou? Lees dan verder of solliciteer direct! Wat ga je doen als senior .NET developer? Als senior .NET developer bij Kenter (onderdeel van Alliander) ben je van onschatbare

Bekijk vacature »

Medior Java developer

Wat je gaat doen: Of beter nog, wat wil jij doen? Binnen DPA GEOS zijn we dan ook op zoek naar enthousiaste Java developers om ons development team te versterken. Als Java developer werk je in Agile/Scrum teams bij onze klanten en daarbij kun je eventueel ook andere ontwikkelaars begeleiden in het softwareontwikkelproces. Verder draag je positief bij aan de teamgeest binnen een projectteam en je kijkt verder dan je eigen rol. Je gaat software maken voor verschillende opdrachtgevers in jouw regio. Je bent een professional die het IT-vak serieus neemt en kwaliteit levert. Je leert snel vanwege je diepgaande

Bekijk vacature »

Senior Front end developer Digital Agency

Functie Jij als Front end developer komt te werken in een van de 8 multidisciplinaire teams binnen de organisatie. Deze teams werken op basis van Scrum agile in 2 wekelijkse sprints. De grootte van de teams varieert van 9-14 collega’s en bestaan altijd uit één of meerdere project managers en een project manager. Samen met je team werk je aan verschillende projecten voor uiteenlopende klanten zoals grote multinationals tot het kleine mkb. De stack waarmee gewerkt wordt is voornamelijk Javascript, ES6, Es.next, HTML, CSS, React.js en Node.js. Wat deze organisatie onderscheid is dat ze echt langdurige partnerships aangaan met hun

Bekijk vacature »

Senior PHP developer/ Software Architect

Functie Momenteel zijn ze op zoek naar een ervaren PHP developer die zichzelf graag bezighoudt met zaken als architectuur en de algehele verbetering van structuren en standaarden. Het is eigenlijk meer operationeel als uitvoerend omdat je bezig gaat met zaken als het verder uitrollen en verbeteren van testautomatisering, codereviews, tickets en de doorloop hiervan en architectuurkeuzes. Mocht je hiernaast ook wat DevOps kennis meenemen is dit mooi meegenomen! Vanwege het kleine team maar de wereldwijde impact die zij leveren is er veel focus op kwaliteit. In deze functie werk je aan één van hun belangrijkste applicaties. Hierin werk je nauw

Bekijk vacature »

Junior .NET developer

Functie Als junior .NET developer begint jouw dag na een bak koffie met een stand up. De vorderingen worden tijdens de stand up besproken en de doelen worden opgesteld waar jullie als team in de volgende sprint naartoe gaan werken. Onze backend is geschreven in .NET Core en onze Front-end in Angular. Bij ons ga jij dan ook Fullstack aan de slag. Jij wordt hier opgeleid om zelfstandig te kunnen programmeren en applicaties te kunnen implementeren. Er wordt op projectbasis gewerkt, dit bied leuke uitdagingen omdat elke klant een andere visie heeft over de applicatie die wij maken. Je gaat

Bekijk vacature »

Android developer

De functie Schiphol is een plek om te reizen, te verblijven en te werken. Door middel van data en technologie richten we op al deze gebieden het leef- en werkklimaat optimaal in en zorgen we voor een slimmere en efficiëntere operatie. Wij ontwikkelen nieuwe producten en diensten vanuit de wensen en behoeften van onze klanten, voorspellen passagier flows en testen digitale oplossingen om rijen en andere pijnpunten in het proces te verminderen. Met slimme feedback van sensortechnologie maken we zelfs data van toiletten en stoelen inzichtelijk en bruikbaar. Het Commercial Platform bestaat uit multidisciplinaire teams met een end-2-end verantwoordelijkheid voor

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 »

Software Developer .NET

Functie omschrijving .NET developer gezocht! Wij zoek op zoek naar een .NET Developer die zich niet uit het veld laat slaan voor een software bedrijf in de regio Veenendaal. Je gaat in deze functie aan de slag met het door ontwikkelen van bestaande producten en het ontwikkelen van nieuwe producten. Dit bedrijf ontwikkeld SaaS applicaties die zowel intern als extern gebruikt worden. Verder bestaat je functie uit: Het ontwikkelen en bouwen van webapplicatie, mobiele applicaties en websites vallen onder jouw verantwoordelijkheden; Werken met onder andere .NET, C#, HTML/CSS, Javascript en MSSQL/Oracle Databases; Hierin werk je samen met andere developers en

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 »

Backend Developer Integraties API HBO REST

Samengevat: Deze werkgever is een IT-consultancy. Wil jij werken als Backend Developer Integraties? Heb jij kennis van gangbare berichtformaten? Vaste baan: Backend Developer Integraties API HBO €3.100 - €4.400 Zij bieden innovatieve oplossingen die bedrijven efficiënter en wendbaarder maken, waardoor onze klanten zich net zo snel kunnen ontwikkelen als de business van hen vraagt. 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 en ingewikkeld. Hou jij van diepgang

Bekijk vacature »
Jeroen VD

Jeroen VD

12/05/2012 11:52:07
Quote Anchor link
hallo, ik heb geprobeerd om een jQuery slider te maken die zelf slided, dus om de paar seconden (hoelang, daar gaat het even niet over. ik heb een div (id quotes) met daarin ergens een ul met li's. met css heb ik alles verborgen, alleen de eerste laten zien.

vervolgens moet jQuery dus gaan sliden. ik heb het volgende:
html:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
<div id="quotes">
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
    </ul>
</div>

css:
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
#quotes {
    margin-left: auto;
    margin-right: auto;
    overflow : hidden;
}

#quotes li {
    float: left;
    display : none;
}

#quotes li:nth-child(1) {
    display : block;
}

jQuery:
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
(function($){
    var Slider = {
        slide: function( element, time ){
            var direction = 0,
                element = element,
                length = element.length(),
                time = time,
                width = element.width();
            
            setInterval(function(){
                element.animate({
                    'margin-left': (direction >= length) ? '0' : '-' + (direction * width)
                }, 500);
                (direction >= length) ? direction = 0 : direction++;
            }, time);
        }
    }
})(jQuery);

var slider = new Slider(),
    li = $('#quotes').find('li');
slider.slide( li, 2000 );

in de console staan geen fouten. maar hij slide niet. verder wordt alleen het eerste item weergegeven, dus de css doet zn werk. alleen jQuery niet. ziet iemand een fout?
 
PHP hulp

PHP hulp

28/11/2024 22:17:01
 
Wim E

Wim E

12/05/2012 17:35:28
Quote Anchor link
Maak anders eens netjes gebruik van de document ready...

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
<script language="javascript" type="text/javascript">
    $(document).ready(function() {
var slider = new Slider(),
    li = $('#quotes').find('li');
slider.slide( li, 2000 );
});
</script>
 
Wouter J

Wouter J

12/05/2012 18:04:03
Quote Anchor link
Wim, dat language attribute moet weg. Die heeft nooit bestaan.

Jeroen, ik zou er een Plugin interface van maken.

Tevens staan er in de console wel fouten:
Quote:
Uncaught ReferenceError: Slider is not defined

Dit komt omdat je Slider hebt aangemaakt in die IIFE: (function() { ... })() Die zorgt voor een global scope, precies zoals in PHP functies.
Je moet die Slider variabele dus nog in de global scope zetten:
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
(function($) {

    var Slider = { ... };

    window.Slider = Slider;

})(jQuery);

// of
(function($) {

    window.Slider = { ... };

})(jQuery);
 
Jeroen VD

Jeroen VD

12/05/2012 21:58:55
Quote Anchor link
@wim, deze code staat net voor het einde van de body. Die document ready is dus overbodig. Had ik moeten vermelden.

@wouter, het is een plugin. Alleen ter duidelijkheid heb ik het hier achter elkaar gezet.

Werkelijk waar, ik heb geen errors in chrome developers tools. Iksnap je uitleg niet echt. Het hele slider object is toch in die var slider met new? Dus is de scope toch die van het object?
 
Wouter J

Wouter J

12/05/2012 22:27:16
Quote Anchor link
Kijk dit:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
(function() {
  // some code
)();

Is gewoon een functie:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
function() {
}

Die meteen wordt aangeroepen (die () erachter) en voor de duidelijkheid nog een extra () om zich heen heeft.
Binnen die functie heb je een eigen scope. Kijk eens naar dit PHP voorbeeld, is hetzelfde als wat hierboven staat in JS:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
<?php
function sayHello($name)
{

    $hello = 'Hello '.$name;
}

sayHello();
echo $hello;
?>

Je begrijpt hopelijk wel dat dit niet kan hé? Nou in jouw JS doe je precies hetzelfde:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
function init() {
    var Slider = {
        slide : ...,
    };
}
init();

new Slider();

Je haalt nu een slider variabele op die in de functie is aangemaakt. Maar dat werkt dus helemaal niet.

Nu kun je in PHP het keyword global gebruiken om een variabele in de global scope te plaatsen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
<?php
function sayHello($name)
{

    global $hello = 'Hello '.$name;
}

sayHello();

echo $hello;
?>

Dit zal werken, volgens mij. In JS doe je dit door de variabele in het window object (dat is het global object) te plaatsen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
function init() {
    window.Slider = {
        slider : ...
    }
}
init();

new Slider();

Ook dit werkt geweldig, omdat we het nu in de global scope hebben geplaatst. Die function init() en direct erachteraan init() kan korter worden geschreven als:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
(function() {
    window.Slider = {
        slide : ...
    };
})();

new Slider();

En dan zijn we bij een code aangekomen die perfect zal werken.


En met plugin interface bedoel ik dat je zoiets kunt doen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
$('#quotes').slide(2000);

Dat staat natuurlijk veel mooier, in jQuery dan. Dit doe je door de functie aan te maken in de jQuery.fn array. Hierin staan alle jQuery functies:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
jQuery.fn.slide = function(time) {
    var elements = $(this); // $(this) is het element dat geselecteerd is (in dit geval $('#quotes')
    // make slide
};
Gewijzigd op 12/05/2012 22:32:38 door Wouter J
 
Jeroen VD

Jeroen VD

12/05/2012 22:35:39
Quote Anchor link
Ja oke, ik snap m. Door de code lijkt het alsof het heel wat is, maar slider is nog steeds een variabele, en dat zag ik dus over het hoofd. Bedankt voor de goede uitleg!

Wat vind je overigens van die code? Het is mijn eerste echte plugin, dus wat kan er beter?
 
Wouter J

Wouter J

12/05/2012 22:47:23
Quote Anchor link
Quote:
(...)maar slider is nog steeds een variabele(...)

dit is inderdaad waar mensen die van PHP naar JS overstappen problemen mee krijgen.

In PHP heb je variabelen ($ gevolgd door hun naam) en dan nog klassenamen en functie namen. In JS zijn dit allemaal variabelen. Alleen deze variabelen een aparte waarde gekregen. Maar het zijn en blijven altijd variabelen.

Quote:
Wat vind je overigens van die code? Het is mijn eerste echte plugin, dus wat kan er beter?

De plugin interface die ik hierboven uitlegde. En:
- argumenten hoeven in JS niet per se ingevuld te worden. Doe dus altijd een check:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
function sayHello(name) {
    name || (name = 'World');
    return 'Hello ' + name;
}

Hierbij kijken we of name bestaat. Zoniet dan gaan we naar de andere kant van de or en zetten we de variabele name met een default value, in dit geval World.
- Regel 5 en 7 zijn nergens voor nodig
- setInterval is nou niet de beste functie in JS, al zou het nu wel meevallen. Meer info: http://youtu.be/i_qE1iAmjFg?t=7m46s
Gewijzigd op 12/05/2012 22:47:45 door Wouter J
 
Jeroen VD

Jeroen VD

12/05/2012 22:53:41
Quote Anchor link
Ok, thanks!
 



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.