mouseover stop slider

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Medior/senior Front-end developer (Vue.js)

Functie Als Front-end developer ben je uiteindelijk overkoepelend aan de slag voor de 3 ontwikkelteams die ieder aan een specifiek product werken. In samenwerking met de UX-designer en de huidige Front-end developer zorg je voor gebruiksvriendelijke software. Lijkt het jou interessant om complexe problemen op te lossen en feautures naar een hoger niveau te tillen? En vind je het niet erg om oudere delen van de applicaties te refactoren i.c.m. het toevoegen van nieuwe functionaliteiten? Dan komen wij graag met je in contact. Eisen • HBO werk- en denkniveau (ze kijken niet naar papieren, maar naar denkniveau, motivatie en zelfredzaamheid)

Bekijk vacature »

Medior Java developer (fullstack)

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 »

.NET developer

Functie Heb jij veel kennis van ASP.NET Webforms en wil jij juist de overstap maken naar ASP.NET Core? Wij zijn per direct op zoek naar een ervaren .NET Webdeveloper die met ons samen ons platform wilt herschrijven van ASP.NET Webforms naar ASP.NET Core. Voor jou de unieke kans om met ons samen te innoveren en kennis op te doen van de nieuwste technieken binnen de Microsoft Stack. Wij hebben een development team met 10 IT specialisten bestaande uit onder andere 4 backend .NET developers en twee front-end developers. Wij zijn continu bezig om ons als team en bedrijf te blijven

Bekijk vacature »

Front-end (Angular) developer

Functie Om bovenstaande ambities waar te kunnen maken zijn ze op zoek naar een Front-end (Angular) developer. Het it-team bestaat momenteel uit de IT Manager, 2 back-end developers, 1 fullstack developer, 1 designer en een DevOps engineer. Ze zijn dus op zoek naar professionals die autonoom en gedisciplineerd aan de slag gaan, en bij aanvang als enige developer met hun Front-end applicaties aan de slag gaat. Wel hebben ze de ambitie om hier snel een 2e developer bij te vinden die jij dan ook zal kunnen aansturen/begeleiden. Je zult aan de slag gaan met het doorontwikkelen van hun bestaande UI

Bekijk vacature »

Als Front-end developer werken aan apps voor het o

Functie Als Front-end developer werk je intensief samen met 1 van de UX-designers en denk je mee over de gebruiksvriendelijkheid en design van onze web- en mobile apps. Je bent betrokken bij sessies met gebruikers om designs te valideren en usability van de app-in-wording te testen. Vervolgens gebruik je dit om samen met je team waarin ook back-end (.NET) developers zitten, te zorgen voor de realisatie van de best mogelijke apps voor studenten en docenten. Eisen • Je hebt een hands-on development en coding mind-set en werkt graag aan een high quality code base welke je consequent onderhouden kan worden

Bekijk vacature »

Als Lead PHP developer bijdragen aan het onderwijs

Functie Als Lead PHP developer zet je samen met het team en de andere lead developers de technische lijnen uit als het gaat om het ontwikkelen van de applicaties en bepaal je samen met de PO waar elke sprint aan gewerkt zal worden. Je kunt op basis van een user story een goede aanpak formuleren en een planning opstellen, en andere hierin meenemen. Wanneer je team code schrijft verwacht je degelijke oplossingen, bij voorkeur gebruik makend van Domain Driven Design. Je ziet toegevoegde waarde in het beoordelen van het werk van collega’s om zo samen te streven naar hoge kwaliteit

Bekijk vacature »

Junior/Medior Front-end developer

Functie Als Front-end developer werk je intensief samen met 1 van de UX-designers en denk je mee over de gebruiksvriendelijkheid en design van onze web- en mobile apps. Je bent betrokken bij sessies met gebruikers om designs te valideren en usability van de app-in-wording te testen. Vervolgens gebruik je dit om samen met je team waarin ook back-end (.NET) developers zitten, te zorgen voor de realisatie van de best mogelijke apps voor studenten en docenten. Eisen • Je hebt een hands-on development en coding mind-set en werkt graag aan een high quality code base welke je consequent onderhouden kan worden

Bekijk vacature »

Full stack Python developer

Functie Samen met andere collega’s (een product owner, een software manager en een ervaren ontwikkelaar) ga jij onze producten verder ontwikkelen. Jouw verantwoordelijkheden zullen bestaan uit: – Verder wil gaan met de ontwikkeling van onze bestaande producten; nieuwe features! – Meedenkt over de roadmap van onze producten – Als sparringpartner kan optreden op het gebied van development – Zelf ook nieuwe ideeën op tafel durft te leggen en deze van scratch af aan wilt bouwen Hieronder ook een paar voorbeelden van projecten waar we momenteel mee bezig zijn of binnenkort aan willen beginnen: – Real-time interactie creëren in onze web

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

Als Senior Java Developer bij Sogeti ben je onderdeel van onze toonaangevende community die bestaat uit ruim 100 gepassioneerde Java professionals. In teamverband lever je mooie prestaties. Daarmee draag je aan bij de meerwaarde die wij leveren aan onze top-opdrachtgevers. Geen werkdag is hetzelfde! Je bent voortdurend bezig met het oplossen van allerlei complexe vraagstukken binnen bedrijfs kritische systemen voor onze klanten in regio Noordoost zoals DUO, ING, CJIB en Tendernet. Natuurlijk krijg jij de mogelijkheid je verder te certificeren in dit vakgebied. We organiseren regelmatig technische Meetups en doen veel aan kennisdeling. Sogetisten hebben plezier in hun werk en

Bekijk vacature »

Front end developer Zorgplatform

Functie Jij als Front end ontwikkelen zult komen te werken samen met 1 PHP ontwikkelaar, 1 Python developer en een flexibele schil aan ontwikkelaars . Samen ga je ervoor zorgen dat de huidige producten doorontwikkeld worden. De Marketplace is geschreven in PHP Laravel en in de front end React. De roostersoftware is ontwikkeld in Python in combinatie met React in de front end. Jij zult als Front ender dus voornamelijk bezig zijn met het verbeteren van onze interfaces op onze verschillende producten. Momenteel ligt de uitdaging in het feit dat de roostersoftware breder schaalbaar moet worden zodat het voor meerdere

Bekijk vacature »

Back-end Developer

Functie omschrijving Als Back-end Developer heb je de eer om als eerste interne developer bij deze organisatie te beginnen. Op dit moment zijn er externe developers, maar daar wil de organisatie verandering in brengen. Op termijn moet de gehele afdeling uit intern personeel bestaan. Je kan je voorstellen dat de eerste interne developer ook de nodige kennis mee moet brengen. Dat klopt. Je gaat je namelijk aan het begin bekommeren over de externe developers en uiteindelijk over je interne collega's. Verder ga je het volgende doen: Het bedenken, beheren en onderhouden van webportalen, API-koppelingen en applicaties; Je bedenkt en werkt

Bekijk vacature »

Laravel PHP developer in een jong team

Bedrijfsomschrijving Als je op zoek bent naar een werkplek waar plezier en uitdaging hand in hand gaan, dan is dit bedrijf de juiste keuze voor jou. Hier kun je werken aan uitdagende projecten en krijg je als developer veel verantwoordelijkheid. Het bedrijf waardeert kwaliteit boven kwantiteit en richt zich op het ontwikkelen van hoogwaardige applicaties en websites waar klanten enthousiast over zijn. Dit bedrijf is vooruitstrevend en streeft naar het leveren van de best mogelijke resultaten voor hun klanten. Als medior PHP ontwikkelaar met 3 jaar ervaring ben jij de persoon die we zoeken. Je krijgt hier de kans om

Bekijk vacature »

C# .NET Software Developer

Functie omschrijving Ben jij op zoek naar een nieuwe uitdaging binnen software development waar je gaat werken voor een jong en flexibel bedrijf? Lees dan snel verder! Wij zijn op zoek naar een Software Developer met ervaring binnen C# .NET die enthousiast wordt van het aansluiten en begeleiden van (complexe) nieuwe klanten. Verder begeleid je complexe projecten, ben jij iemand die altijd kansen ziet? Dan zoeken wij jou! In deze functie ga jij je bezighouden met: Meedenken in oplossingsrichtingen; Werken aan de architectuur; Het verbeteren van functionaliteiten binnen het dataplatform; Ontwikkelen van nieuwe technologieën. Bedrijfsprofiel Waar ga je aan de

Bekijk vacature »

Senior front end developer Digital Agency Amsterda

Functie Wij werken in multidisciplinaire teams aan verschillende projecten, echter blijf je niet gebonden aan 1 team. Dit houdt in dat wij verschillende specialisten in dienst hebben en deze door middel van een roulatiesysteem in multidisciplinaire teams laten werken. Het team bestaat vaak uit Frontend developer(s), Backend Developer(s), Designer(s), Tester(s) en Mobile Developer(s). Deze teams worden afgewisseld waardoor jij de mogelijkheid krijgt om met iedereen een keer samen te werken. Als Frontend Developer ben jij ónze Specialist op dit gebied. Jij werkt mee aan verschillende projecten voor verschillende klanten. Denk bijvoorbeeld aan klanten, zoals’; BAM, IDFA en Ultimaker. Hierbij zorg

Bekijk vacature »
Daniel van Seggelen

Daniel van Seggelen

20/05/2023 08:55:21
Quote Anchor link
Ik heb een navigatie met knoppen:

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
var initList = setInterval(function() {
                currentSlide += 1;
                currentSlide %= $(".kc-nav-wrap div").length;
                juisteslide = currentSlide + 1;
                var $list = $("[data-cc-item-key='" + juisteslide + "']").find('[alt]');
                $('#text-description').text($list.attr('alt'));
                $(".kc-nav-wrap div").eq(currentSlide).click();
            }, 5000);
            
            $('.kc-item').mouseover(function() {
                clearInterval(initList);
            }).mouseout(function() {
                initList = setInterval(function() {
                    currentSlide += 1;
                    currentSlide %= $(".kc-nav-wrap div").length;
                    juisteslide = currentSlide + 1;
                    var $list = $("[data-cc-item-key='" + juisteslide + "']").find('[alt]');
                    $('#text-description').text($list.attr('alt'));
                    $(".kc-nav-wrap div").eq(currentSlide).click();
                }, 5000);
            })


Om de 5 seconden triggert hij de click en gaat naar de volgende slide.
Als ik een mouseover die, dan blijft hij de click triggeren.

Als ik de $(".kc-nav-wrap div").off("click"); gebruik bij mouseover, dan kan stop de slider wel , maar kan deze niet meer terugzetten.

Weet iemand hoe dit op te lossen is?

MVG

Daniel
 
PHP hulp

PHP hulp

01/06/2023 20:27:42
 
Jan Koehoorn

Jan Koehoorn

20/05/2023 09:13:28
Quote Anchor link
Ik zie sowieso al een paar gekke dingen, maar zonder de HTML erbij wordt het wel erg lastig om je hier tips over te geven.
 
Daniel van Seggelen

Daniel van Seggelen

20/05/2023 10:54:29
Quote Anchor link
Hier de html.

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
<div class="kc-wrap" style="perspective: 1e+10px;">
   <div class="kc-horizon" style="position: absolute; top: 50%; width: 800px; perspective: 1500px; transform-style: preserve-3d; perspective-origin: 50% 0px; left: 180px; transform: scaleX(1.4355) scaleY(1.4355); visibility: visible;"><div class="kc-item" data-cc-item-key="8" style="transform-style: preserve-3d; opacity: 1; z-index: 224; width: 178px; height: 240px; transform: translateY(-120px) translateZ(-275px) translateX(6.83761px) rotateY(-20.625deg) rotateX(-9.16667deg); visibility: visible;">
             <div class="bgrdd" style=" background-image: url(http://localhost/test/images/folders/wijn/00000.jpg);"> </div>
              <a href="http://localhost/test/de-kweker/folders/wijn">      
              <img src="http://localhost/test/images/folders/wijn/00000.jpg" alt="WIJN 29-03 TM 05-09" fid="351" title="WIJN" linkurl="http://localhost/test/de-kweker/folders/wijn">
             </a>
        <canvas class="cc-decoration kc-reflection" width="671" height="32" style="height: 13%; top: 99%;"></canvas></div><div class="kc-item" data-cc-item-key="1" style="transform-style: preserve-3d; opacity: 1; z-index: 362; width: 178px; height: 240px; transform: translateY(-120px) translateZ(-137.5px) translateX(143.536px) rotateY(-10.3125deg) rotateX(-4.58333deg); visibility: visible;">
             <div class="bgrdd" style=" background-image: url(http://localhost/test/images/folders/508-sw/00000.jpg);"> </div>
              <a href="http://localhost/test/Peugeot/folders/508-sw">      
              <img src="http://localhost/test/images/folders/508-sw/00000.jpg" alt="508 SW 25-01 TM 05-09" fid="415" title="508 SW" linkurl="http://localhost/test/Peugeot/folders/508-sw">
             </a>
        <canvas class="cc-decoration kc-reflection" width="671" height="32" style="height: 13%; top: 99%;"></canvas></div><div class="kc-item kc-front-item" data-cc-item-key="2" style="transform-style: preserve-3d; opacity: 1; z-index: 500; width: 178px; height: 240px; transform: translateY(-120px) translateZ(0px) translateX(311px) rotateY(0deg) rotateX(0deg); visibility: visible;">
             <div class="bgrdd" style=" background-image: url(http://localhost/test/images/folders/rifter/00000.jpg);"> </div>
              <a href="http://localhost/test/Peugeot/folders/rifter">      
              <img src="http://localhost/test/images/folders/rifter/00000.jpg" alt="Rifter 25-01 TM 05-09" fid="414" title="Rifter" linkurl="http://localhost/test/Peugeot/folders/rifter">
             </a>
        <canvas class="cc-decoration kc-reflection" width="671" height="32" style="height: 13%; top: 99%;"></canvas></div><div class="kc-item" data-cc-item-key="3" style="transform-style: preserve-3d; opacity: 1; z-index: 362; width: 178px; height: 240px; transform: translateY(-120px) translateZ(-137.5px) translateX(478.464px) rotateY(10.3125deg) rotateX(-4.58333deg); visibility: visible;">
             <div class="bgrdd" style=" background-image: url(http://localhost/test/images/folders/508-berline/00000.jpg);"> </div>
              <a href="http://localhost/test/Peugeot/folders/508-berline">      
              <img src="http://localhost/test/images/folders/508-berline/00000.jpg" alt="508 Berline 25-01 TM 05-09" fid="410" title="508 Berline" linkurl="http://localhost/test/Peugeot/folders/508-berline">
             </a>
        <canvas class="cc-decoration kc-reflection" width="671" height="32" style="height: 13%; top: 99%;"></canvas></div><div class="kc-item" data-cc-item-key="4" style="transform-style: preserve-3d; opacity: 1; z-index: 224; width: 178px; height: 240px; transform: translateY(-120px) translateZ(-275px) translateX(615.162px) rotateY(20.625deg) rotateX(-9.16667deg); visibility: visible;">
             <div class="bgrdd" style=" background-image: url(http://localhost/test/images/folders/menu/00000.jpg);"> </div>
              <a href="http://localhost/test/taco-mundo/folders/menu">      
              <img src="http://localhost/test/images/folders/menu/00000.jpg" alt="Menu 13-01 TM 05-09" fid="356" title="Menu" linkurl="http://localhost/test/taco-mundo/folders/menu">
             </a>
        <canvas class="cc-decoration kc-reflection" width="812" height="32" style="height: 13%; top: 99%;"></canvas></div><div class="kc-item" data-cc-item-key="5" style="transform-style: preserve-3d; opacity: 1; z-index: 87; width: 178px; height: 240px; transform: translateY(-120px) translateZ(-412.5px) translateX(695.982px) rotateY(30.9375deg) rotateX(-13.75deg); visibility: visible;">
             <div class="bgrdd" style=" background-image: url(http://localhost/test/images/folders/foodmaster-menu/00000.jpg);"> </div>
              <a href="http://localhost/test/foodmaster/folders/foodmaster-menu">      
              <img src="http://localhost/test/images/folders/foodmaster-menu/00000.jpg" alt="Foodmaster Menu 17-03 TM 05-09" fid="354" title="Foodmaster Menu" linkurl="http://localhost/test/foodmaster/folders/foodmaster-menu">
             </a>
        <canvas class="cc-decoration kc-reflection" width="712" height="32" style="height: 13%; top: 99%;"></canvas></div><div class="kc-item" data-cc-item-key="6" style="transform-style: preserve-3d; opacity: 1; z-index: -51; width: 178px; height: 240px; transform: translateY(-120px) translateZ(-550px) translateX(706.075px) rotateY(41.25deg) rotateX(-18.3333deg); visibility: visible;">
             <div class="bgrdd" style=" background-image: url(http://localhost/test/images/folders/bbq-u0026-terras/00000.jpg);"> </div>
              <a href="http://localhost/test/de-kweker/folders/bbq-u0026-terras">      
              <img src="http://localhost/test/images/folders/bbq-u0026-terras/00000.jpg" alt="BBQ \u0026 Terras 29-03 TM 05-09" fid="353" title="BBQ \u0026 Terras" linkurl="http://localhost/test/de-kweker/folders/bbq-u0026-terras">
             </a>
        <canvas class="cc-decoration kc-reflection" width="671" height="32" style="height: 13%; top: 99%;"></canvas></div><div class="kc-item" data-cc-item-key="7" style="transform-style: preserve-3d; opacity: 1; z-index: 87; width: 178px; height: 240px; transform: translateY(-120px) translateZ(-412.5px) translateX(-73.9821px) rotateY(-30.9375deg) rotateX(-13.75deg); visibility: visible;">
             <div class="bgrdd" style=" background-image: url(http://localhost/test/images/folders/non-food/00000.jpg);"> </div>
              <a href="http://localhost/test/de-kweker/folders/non-food">      
              <img src="http://localhost/test/images/folders/non-food/00000.jpg" alt="Non Food 29-03 TM 05-09" fid="352" title="Non Food" linkurl="http://localhost/test/de-kweker/folders/non-food">
             </a>
        <canvas class="cc-decoration kc-reflection" width="671" height="32" style="height: 13%; top: 99%;"></canvas></div></div><div class="kc-nav-wrap" style="right: 15px; bottom: 15px;"><div class="kc-nav-button" data-kc-but-num="0"></div><div class="kc-nav-button active" data-kc-but-num="1"></div><div class="kc-nav-button" data-kc-but-num="2"></div><div class="kc-nav-button" data-kc-but-num="3"></div>
        <div class="kc-nav-button" data-kc-but-num="4"></div>
        <div class="kc-nav-button" data-kc-but-num="5"></div>
        </div>
Gewijzigd op 20/05/2023 11:11:04 door Daniel van Seggelen
 
Jan Koehoorn

Jan Koehoorn

20/05/2023 17:20:16
Quote Anchor link
Ok. Ik heb je JavaScript iets aangepast, zodat de timer weer begint te lopen op het mouseout event. Ik heb de naamgeving van je variabelen niet aangepast, maar raad je aan om dat wel te doen. Bijvoorbeeld "initList" is een beetje raar. De functie setInterval in JavaScript geeft een timer id terug, dus iets als "timerIdList" zou beter zijn. Anyhow, hier de code:

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
let currentSlide = 0;

const handleList = () => {
    currentSlide += 1;
    currentSlide %= $(".kc-nav-wrap div").length;
    juisteslide = currentSlide + 1;
    console.debug('initList', currentSlide, juisteslide);
    var $list = $("[data-cc-item-key='" + juisteslide + "']").find('[alt]');
    console.debug($list);
    $('#text-description').text($list.attr('alt'));
    $(".kc-nav-wrap div").eq(currentSlide).click();
};

var initList = setInterval(handleList, 5000);

$('.kc-item').mouseover(function() {
    console.debug('mouseover');
    clearInterval(initList);
}).mouseout(function() {
    console.debug('mouseout');
    initList = setInterval(handleList, 5000);
})
 
Jan Koehoorn

Jan Koehoorn

23/05/2023 12:28:19
Quote Anchor link
Welnee joh, ben je gek, niks te danken hoor ;-)
 
Ozzie PHP

Ozzie PHP

23/05/2023 14:22:26
Quote Anchor link
Goed bezig Koehoorn! ;-)

(Helaas heeft niet iedereen het fatsoen om nog even iets te laten horen nadat 'de buit' binnen is.)
 



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.