mouseover stop slider

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Lead developer

Functie Als lead developer wordt jij verantwoordelijk voor een van onze development teams. Samen met de Software Architect bewaak jij de kwaliteit en uitvoering van onze complexe vraagstukken. Daarnaast ben jij verantwoordelijk voor het inschatten, designen en ontwikkelen van middelgrote tot grote veranderingen in de software. Ook coördineer jij het proces rondom complexe technische vraagstukken. Verder bestaat jouw takenpakket uit het volgende: – Het aansturen van jouw development team; – Het begeleiden van Junior Software Engineers; – Het maken van technische analyses m.b.t. nieuwe aanvragen en het tijdsbestek inschatten voor de uitvoering hiervan; – Het uitvoeren van de ontwikkeling van

Bekijk vacature »

Junior Outsystems developer

Functie Als junior Outsystems developer wordt jij onderdeel van een multidisciplinair team van 23 software engineers. Ons team werkt agile en termen als Continuous Integration en Continuous Delivery zijn bij ons dagelijkse koek. Wij werken aan uitdagende en afwisselende projecten met als doel onze klanten een totaal oplossing aan te bieden. Als junior Outsystems developer krijg jij bij ons de kans om jezelf te ontwikkelen naar een volwaardige ervaren en gecertificeerde Outsystems developer. Jij een team met ervaren mensen (10+ ervaring) om je heen. Zo heb jij niet het gevoel dat jij meteen in het diepe wordt gegooid en uiteraard

Bekijk vacature »

3D BIM Add-on Developer

Als 3D BIM add- on ontwikkelaar bij KUBUS ontwikkel je add-ons (BCF Managers genaamd) voor de toonaangevende building information modeling (BIM) programma's Revit, Navisworks, Archicad, AutoCAD en Tekla Structures. BCF Managers maken gegevensoverdracht mogelijk tussen BIM-software en BIMcollab. Je werkt zowel aan de front- als aan de back-end. Als softwarebedrijf bevindt KUBUS zich in een unieke positie. We bouwen aan onze eigen producten die wereldwijd door tienduizenden gebruikers worden gebruikt. Ons bedrijf heeft precies de juiste grootte: groot genoeg om echt impact te maken in de markt, maar klein genoeg om als individuele ontwikkelaar invloed uit te kunnen oefenen en

Bekijk vacature »

Fullstack developer - medior

Functie omschrijving Ben jij toe aan een nieuwe uitdaging en zou jij graag bij een platte maar informele organisatie willen werken? Voor een mooi softwarebedrijf in omgeving Dordrecht zijn wij op zoek naar versterking voor op de afdeling Software Development! Als Fullstack developer wordt je bij dit bedrijf onderdeel van de volledige ontwikkeling van requirement tot oplevering! Werkzaamheden Jouw focus ligt op de front end en alles wat daarbij komt kijken. Je gaat ontwerpen, ontwikkelen, testen en valideren. Je zult voornamelijk werken met React.js en Typescript. Maar ook Javascript, HTML en CSS komen aanbod. Daarnaast zal je ook regelmatig met

Bekijk vacature »

.NET developer

Functie Als junior .NET ontwikkelaar ga jij aan de slag in één van de 5 IT teams van dit bedrijf. Jullie werken op basis van interne klantprojecten aan voornamelijk webapplicaties. Dit betekent dat jij continu uitgedaagd wordt en veelal met verschillende soorten projecten bezig bent. Het gave is dan ook dat jullie als team samen bekijken welke technieken het beste passen bij het project waar jullie verantwoordelijk voor zijn. Zo kan het zijn dat jij als .NET developer gaat werken aan een project, maar dat jullie als team liever gebruik maken van Haskell of F# om de klus te klaren.

Bekijk vacature »

Freelance Fullstack Java Developer

Functieomschrijving Voor een opdrachtgever in omgeving Rotterdam zijn wij op zoek naar ervaren Fullstack JAVA Developers die graag op projectbasis willen werken. Je komt terecht bij een informele developers club die mooie projecten uitvoeren voor grote klanten. Ben je een ervaren freelancer of werk je in loondienst en ben je toe aan een nieuwe uitdaging? Lees dan snel verder want wie weet is dit een leuke vacature voor jou! Het fijne van deze werkgever is dat je zelf mag beslissen hoe je te werk wilt gaan. Wil je als freelancer werken dan is dat OK. Wil je de zekerheid hebben

Bekijk vacature »

Scrum Master

TenneT is hard groeiend om de onze ambities waar te kunnen maken. Zo nemen wij een leidende rol in het aanjagen van de energietransitie. Het werven van nieuw talent speelt daarin een cruciale rol. Wij zijn op zoek naar een gedreven Scrum master op onze locatie Arnhem die hieraan wil bijdragen en misschien ben jij dat wel? Jouw bijdrage aan TenneT Je begeleidt twee teams binnen de afdeling Platform Services (PLS). Je helpt mee de devops manier van werken van de teams verder door te ontwikkelen. Je helpt de PO bij het managen van de product backlog; het voorbereiden van

Bekijk vacature »

Junior Software Developer C# Verhuursector Verhuur

Samengevat: Wij ontwikkelen en leveren softwaresystemen voor de logistieke sector en de verhuursector. Ben jij geschikt als Junior Software Developer? Heb je ervaring met Delphi? Vaste baan: C# Software Developer Logistiek HBO €2.500 - €3.900 Deze werkgever is een software ontwikkelaar, gericht op software voor de logistieke sector. Deze werkgever heeft eigen producten ontwikkelen en leveren ook maatwerk. Ons bedrijf kent een boeiende en inspirerende werkomgeving met een open cultuur en mogelijkheden voor je verdere ontwikkeling. Bij bij hun werk je aan onze eigen bedrijfsapplicaties. Je ontwikkelt met ons de meest nieuwe software. Wij blinken uit als het gaat om

Bekijk vacature »

Software Programmeur PHP - JAVA

Functie Voor een opdrachtgever in omgeving Zoetermeer zijn wij op zoek naar een ontwikkelaar ter versterking van het huidige developers team. Heb jij altijd al willen werken voor een bedrijf, dat veilige netwerkverbindingen levert, door middel van veilige oplossingen, die door middel van de nieuwste technologieën ontwikkelt zijn? Stop dan nu met zoeken! Hoe kan jouw dag er straks uitzien? Je gaat software en webapplicaties ontwikkelen met behulp van de talen C / C++ / PHP. Je gaat technische klussen uitvoeren op locatie bij klanten. Je onderhoudt contact met de projectleider om er zeker van te zijn dat een projecten

Bekijk vacature »

Senior/Lead Python developer

Functie Samen met je team, bestaande uit een senior, 2 mediors en één junior ontwikkelaar ga je op een Agile-gebaseerde aanpak werken aan hun software. Je hebt oog voor kwaliteit, risico’s en klantbelang. Communicatie met je collega’s en waar nodig ook met klanten speelt een belangrijke rol in het bereiken van een succesvol resultaat. Als persoon ben je slim, krijg je dingen voor elkaar en ga je resultaatgericht te werk. Binnen het development team is er veel zelfstandigheid, los van de stand-up (10:00 uur) en zo nu en dan pair-programming sessies. Technieken die zij gebruiken zijn o.a. Python, Django, MySQL,

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 »

Senior .Net developer

Sogeti is een organisatie met een goede werksfeer en zo min mogelijk hiërarchische verhoudingen. Ga je bij ons als .Net Developer aan de slag? Dan werk je dagelijks met collega’s aan de mooiste IT-projecten. Deze snelgroeiende groep collega’s krijgt energie van hun vak en dat merk je op de werkvloer. Natuurlijk krijg jij de mogelijkheid je te certificeren. We organiseren regelmatig technische Meet-ups en doen we veel aan kennisdeling. Mede hierdoor zij wij dit jaar Microsoft Partner of the year geworden. Sogetisten staan klaar voor elkaar, hebben lol met elkaar en daarmee behalen we de mooiste resultaten! Werken bij Sogeti

Bekijk vacature »

Front-end Developer Magento 2/Wordpress

Voor het aantrekkelijk houden en steeds vernieuwen van de huidige websites en webshops en het meedenken in de marketing zijn wij per direct op zoek naar een ervaren Front-end developer met gedegen kennis van Magento 2 (webshops) en Wordpress (websites). Wat bieden wij jou Mooi salaris! Meteen op contract bij de opdrachtgever! Gezellig, Kempisch bedrijf! 35 uur per week! Auto van de zaak! Wie ben jij Van een front-end developer verwachten wij: Een afgeronde Bachelor ICT opleiding met profiel ICT & Media Design. Dat je in het bezit bent van een Magento 2 professional front-end developer certificaat; Je hebt ruime

Bekijk vacature »

PHP Software Developer

Functie omschrijving Op zoek naar een nieuwe uitdaging binnen PHP? Lees dan snel verder! Wij zoeken een ervaren PHP developer die binnen een organisatie gaat functioneren als verlengstuk van de klant. Wij zoeken voor deze iemand die technisch complexe zaken met enthousiasme en plezier aanvliegt. Verder moet je instaat zijn om je tijd goed te managen omdat je aan meerdere projecten tegelijkertijd werkt. Je werkt met de nieuwste technieken en tijdens deze uitdaging werk je veel samen met de front-end developers van deze organisatie. Wij zoeken iemand die zichzelf graag uitdaagt en altijd de beste wilt zijn. Bedrijfsprofiel Waar ga

Bekijk vacature »

Back end developer PHP

Functie Met een complex en uitgebreid e-commerce platform, een eigen PIM-systeem en eigen scan applicatie – krijg jij dagelijks te zien hoe jouw werk gebruikt wordt door miljoenen gebruikers. En we staan qua development pas in de startblokken, aangezien er nog meerdere projecten op de plank liggen te wachten! Ons huidige development team bestaat uit 8 programmeurs. Er wordt dagelijks gereflecteerd op geschreven code, Scrum taken en kennisdelen onderling is een must. Onze voertaal binnen ons team is Engels, dit omdat wij twee internationale collega’s hebben. Ons huidige “IT Landschap” bestaat voornamelijk uit allerlei losse onderdelen die individueel, maar ook

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

23/05/2025 12:54:46
 
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.