mouseover stop slider

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Technisch Applicatie ontwikkelaar

Functie omschrijving Ben jij op zoek naar een nieuwe uitdaging en zoek jij een informele werkgever waar je zelfstandig kunt werken binnen een leuk IT team, lees dan snel verder want wie weet zijn wij op zoek naar jou! In deze functie werk jij voornamelijk aan: Het onderhouden en ontwikkelen van de IT systemen; Het opzetten van Azure Cloud systemen, denk aan interfaces, hardware op de Cloud, webportalen of BI functies; Werk je aan scripts binnen verschillende software applicaties, denk aan ERP en CAD; Ontwikkel en implementeren je MS PowerApps en Power BI. Bedrijfsprofiel Je komt terecht bij een familiair

Bekijk vacature »

Front-end Developer vue.js node.js SaaS

Dit ga je doen Het ontwikkelen van nieuwe features die bijdragen aan de groei van de klanten van de organisatie; Je denkt mee over nieuwe innovaties, features en verbeteringen in de applicatiearchitectuur; Je draagt bij aan de continue ontwikkeling van jouw team doordat je elke dag streeft naar het verbeteren van jouw eigen prestaties; Je neemt actief deel aan Scrum meetings en de Frontend Guild. Hier ga je werken Voor een snel groeiend bedrijf de regio Nieuw Vennep zijn wij opzoek naar een ervaren Front-end Developer. De organisatie is actief in de e-commercebranche en ontzorgt haar klanten middels een SaaS-platform.

Bekijk vacature »

PHP ontwikkelaar

Functie Jij komt te werken in een development team van 9 man. Het grootste deel doet back end development en daarnaast is er 1 teamlead en 1 tester in het team. Dit Agile team is van groots belang voor de organisatie omdat zij voornamelijk alle eigen systemen in-house ontwikkelen. Naast het door ontwikkelen van het bestaande platform en de software die daarbij komt kijken, zul jij je ook bezighouden met het realiseren en opzetten van nieuwe projecten binnen het bedrijf. Je staat nauw met de klant in contact om zo hun wensen zo goed mogelijk te kunnen realiseren. Daarnaast ontwikkel

Bekijk vacature »

API Developer Red Hat Fuse

Dit ga je doen Als API Developer zal je verantwoordelijk zijn voor het: het maken van API's en het correct laten draaien van de API's op het platform. Hierdoor kom je in aanraking met Red Hat Fuse, Springt Boot, 3Scale, Red Hat SSO, Openshift en Azure DevOps; zorgen voor de kwaliteit van de ontwikkeling, integratie en prestaties van de API's; zorgen voor een stabiel integratieplatform. Hier ga je werken Deze organisatie is een toonaangevende speler in de vastgoedbranche en telt momenteel ruim 500 medewerkers. Met meer dan 150 applicaties staat er een complex applicatielandschap dat hoofdzakelijk op OpenShift, Azure en

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 »

Programmeur / Developer

Voor een familiebedrijf in Doetinchem, actief in de machinebouw voor de food-sector, zijn wij op zoek naar een programmeur / developer. In deze functie ben je werkzaam in een team van 5 medewerkers. Je werkzaamheden bestaan onder andere uit het verhelderen van requirements vanuit de opdrachtgever, de klant en de afdeling ontwikkeling. Je verricht haalbaarheidsstudies en werkt specificaties uit die je afstemt met de opdrachtgever. Je ontwerpt design in software en stemt af met je collega's. De huidige vision-systemen zijn geschreven in C software, welke draait op een CUDA platform. Je schrijft en codeert software en zal gaan testdraaien. Tot

Bekijk vacature »

.Net ontwikkelaars voor de zorgsector

Bedrijfsomschrijving Voor onze klant in de omgeving van Zwolle zijn wij op zoek naar een ervaren .Net ontwikkelaar, bij voorkeur met ervaring binnen de belangrijkste sector van Nederland, namelijk: de zorgsector. Deze internationale organisatie ontwikkelt software voor de zorgsector. Er werken zo'n 25 medewerkers hard aan een oplossing die gebruikt wordt door heel Nederland. Er heerst een informele sfeer waarbij er altijd ruimte is voor een grapje. Je collega's zijn stuk voor stuk sterke ontwikkelaars vanuit verschillende achtergronden en met verschillende leeftijden. Je komt hier terecht in een organisatie die zich hard inzet om de zorgsector te verbeteren. De mogelijkheden

Bekijk vacature »

Lead React Developer

Dit ga je doen Als Lead React Developer zul jij je voornamelijk gaan bezighouden met: Het werken aan tal van uiteenlopende projecten waar gloednieuwe (web)applicaties van scratch af aan ontwikkeld worden met o.a. React (Native) en Drupal; Het aansturen van een team bestaande uit 5-6 talentvolle en gedreven ontwikkelaars; Het adviseren en meedenken over nieuwe (technische) oplossingen en te gebruiken tools/frameworks; Het meedenken over de architectuur en de juiste implementatiebeslissingen maken; De doorontwikkeling van huidige applicaties. Hier ga je werken Als je inderdaad een ervaren Lead React Developer bent die zichzelf graag nog verder wil ontwikkelen dan is het goed

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 »

Mendix Ontwikkelaar - Vernieuwen van het applicati

Bedrijfsomschrijving De ontwikkelingen in de transportsector gaan razendsnel. Bij ons kun je een belangrijke rol spelen in deze sector. We streven ernaar om onze klanten te ontzorgen op het gebied van continuïteit en veiligheid met innovatieve producten en diensten. We willen dat onze klanten de veiligste vervoerders van Europa worden. Ons team werkt hard om deze ambitieuze doelstellingen te bereiken en we bieden een motiverende werkomgeving aan. We zijn op zoek naar zelfstarters met een focus op resultaat en beslissingsbevoegdheid. Functieomschrijving Als Mendix ontwikkelaar bij deze organisatie heb je een gevarieerde baan. Het applicatielandschap wordt vernieuwd en de “schade en

Bekijk vacature »

PHP Laravel developer

Functie omschrijving Weet jij alles van Laravel en krijg je energie van het ontwikkelen van software hiermee? Laat snel wat van je horen want wij zoeken een PHP/Laravel developer in regio 's-Hertogenbosch. Jouw taken zullen bestaan uit: Softwareapplicaties ontwikkelen en verder optimaliseren in veel diverse projecten op basis van Agile/Scrum. Uitleg geven over software en applicaties Klantcontact hebben over bestaande applicaties. Documentatie schrijven over applicaties. Techstack: PHP, Laravel, HTML, CSS, Javascript. Bedrijfsprofiel Deze organisatie zit in de regio van 's-Hertogenbosch en is een klein softwarebedrijf. Er werken ongeveer 15 medewerkers, verdeeld in meerdere teams, zoals back-end en front-end development, projectmanagement

Bekijk vacature »

Senior Front-end developer

Functie Als front-end developer ga je aan de slag voor verschillende klanten, waarbij veel rekening wordt gehouden met waar je woont (dit is altijd binnen het uur), en word er gezocht naar een organisatie die past bij jou. Zowel qua persoonlijke ambities als de technische aansluiting. De opdrachten duren gemiddeld 1 à 2 jaar maar dit hangt ook af van je wensen. Je werkt in een teamverband voor een klant en zult nauw samenwerken met zowel eigen collega’s als die bij de klant werkzaam zijn. Ze zijn op zoek naar een technische front-end developer die ruime ervaring heeft in één

Bekijk vacature »

Traineeship Full Stack .NET Developer

Dit ga je doen Start op 7 augustus 2023 bij de Experis Academy en ontwikkel jezelf tot een gewilde Full Stack .NET Developer. Maar hoe ziet het traineeship eruit en wat kun je verwachten? Periode 1 De eerste 3 maanden volg je fulltime, vanuit huis, een op maat gemaakte training in teamverband. Je leert belangrijke theorie en krijgt kennis van de benodigde vaardigheden en competenties die nodig zijn om de IT-arbeidsmarkt te betreden. Zowel zelfstandig als in teamverband voer je praktijkopdrachten op het gebied van front- en backend development uit. Wat er per week op het programma staat kun je

Bekijk vacature »

C# .NET Developer

Functie omschrijving Ben jij op zoek naar een nieuwe uitdaging binnen development waar je komt te werken binnen een flexibel, jong en ondernemend bedrijf. Lees dan snel verder! Voor deze functie zoeken wij een C# .NET Developer die enthousiast wordt van het aansluiten en begeleiden van (complexe) nieuwe klanten. Daarnaast begeleid je complexe projecten, wij zoeken iemand die altijd kansen ziet en waarbij het glas altijd half vol is. Voor deze functie zoeken wij een Developer met ervaring op het gebied van .NET die deze organisatie gaat versterken. Binnen de organisatie ga jij je vooral bezighouden met het verbeteren van

Bekijk vacature »

Junior Front end developer

Functie Als Front end developer binnen onze organisatie ga jij je bezig houden met het bouwen van de user experience van de webapplicaties. Je bent verantwoordelijk voor het vertalen van concepten, briefings en designs naar werkende functionaliteit. Hierbij zorg je ervoor dat applicaties betrouwbaar, veilig en toekomstbestendig zijn en een goede architectuur hebben en behouden. Verder denk je actief na- en mee over nieuwe ontwikkelingen en functionaliteiten om zo elke dag de klantervaring weer te verbeteren. Dit doe je natuurlijk niet alleen maar in een development team. Het team bedraagt momenteel 4 man bestaande uit 2 devops engineers en 2

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

09/11/2024 02:23:15
 
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.)
 
Pauline Lacorde

Pauline Lacorde

18/07/2023 10:00:25
Quote Anchor link
Zur Ergänzung ;)

Het lijkt erop dat je de setinterval functie wilt stoppen wanneer de muis over het element zweeft, en hervat als de muis niet langer over het element zweeft. Dit wordt meestal gedaan door de clearInterval functie te gebruiken wanneer de muis over het element zweeft, en setInterval opnieuw te instellen wanneer de muis eruit zweeft.

Het ziet er naar uit dat je code al vrijwel het juiste doet - maar het kan zijn dat er iets misgaat met de scope van de initList variabele, of met de logica van de muisevenementen.

In plaats van de setInterval functie te herhalen in je mouseout functie, kun je misschien een aparte functie maken die de interval instelt, en deze aanroepen wanneer nodig.

function startSlideShow() {
return 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);
}

var initList = startSlideShow();

$('.kc-item').hover(function() {
// stop slideshow on mouse over
clearInterval(initList);
}, function() {
// start slideshow on mouse out
initList = startSlideShow();
});
 
- Ariën  -
Beheerder

- Ariën -

18/07/2023 10:57:35
Quote Anchor link
Code door Google Translate halen is niet slim. CurrentSlide v.s. juisteslide.
 
Daniel van Seggelen

Daniel van Seggelen

20/07/2023 03:47:38
Quote Anchor link
uhmm, niets is door google translate gehaald hoor.
 
- Ariën  -
Beheerder

- Ariën -

20/07/2023 06:26:36
Quote Anchor link
Je hebt gelijk...
 



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.