mouseover stop slider

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Java Developer

Functie Wat ga je doen als Java developer? Jij komt terecht binnen een informeel team waarin je verantwoordelijk bent voor de backend systemen voor grote klanten als Ziggo en KPN. Als Medior Java developer werk je in teamverband en soms individueel. Gedurende de werkweek zal je veelvuldig sparren met je collega’s voor een goede implementatie van de software. Ben jij een echte Java developer? Ben je geïnteresseerd in de nieuwste technieken en de laatste ontwikkelingen? Dan ben je hier aan het juiste adres! Eisen Wat wordt er van jou verwacht? • Minimaal HBO/WO denk- en werkniveau; • Analytisch sterk, open

Bekijk vacature »

Low Code Developer

Functie omschrijving Ben jij toe aan een nieuwe uitdaging en ben jij HBO afgestudeerd in de richting van IT? Heb jij verstand van datamodellering, NO CODE Platformen en kun jij het aan om projecten te leiden? Voor een leuke opdrachtgever in omgeving Rotterdam zijn wij op zoek naar een No Code developer die zich bezig gaat houden met het optimaliseren van bedrijfsprocessen bij klanten in heel het land! Wat ga je hier zoal doen? Je gaat geen code kloppen maar bedenken hoe applicaties eruit moet komen te zien. Je gaat werken met een non code platform, je kunt denken aan

Bekijk vacature »

3D BIM Add-on Developer

As a 3D BIM add- on developer at KUBUS, you will develop add-ons (called BCF- Managers) to the leading building information modeling (BIM) programs Revit, Navisworks, Archicad, AutoCAD and Tekla Structures. BCF Managers enable data transfer between BIM software and BIMcollab. You will work on both the front- and the back-end. As a software company, KUBUS is in a unique position. We build our own products that are used by tens of thousands of users worldwide. Our company is just the right size: big enough to make a real impact in the market, but small enough that as an individual

Bekijk vacature »

Front-end developer (React)

Functie Het frontend team bestaat momenteel uit 4 dedicated front-enders en is hard aan het groeien! Ook werken er diverse designers waar je veel mee schakelt. Samen leveren jullie een essentiële bijdrage aan de applicaties die ze voor hun klanten realiseren, jij bent hierin de schakel tussen de eindgebruiker en de slimme backend. Je werkt in het frontend team samen met de backend teams en product owners om te zorgen dat onze applicaties een fijne gebruikerservaring opleveren. Ze werken o.a. met: React, Atomic design, Styled components, JavaScript / TypeScript, NPM, Webpack Blade templates, HTML, SCSS, Git flow. Eisen • HBO

Bekijk vacature »

.NET Developer

Functie omschrijving In deze functie ga je werken als C# Developer. Jij gaat aan de slag met de volgende taken: Maatwerk software bouwen; Huidige softwareprojecten verder uitbouwen en optimaliseren; Ideeën van de klant omzetten naar handige oplossingen en tools; Bovenstaande doe je middels de Microsoft- stack: C#, ASP.NET en MVC/ Entity Framework. Ben je net afgestudeerd aan een HBO opleiding Informatica, aarzel dan niet om te solliciteren. Dit is namelijk de ideale startersfunctie! Bedrijfsprofiel Deze organisatie is gevestigd in de regio van Boxtel. Het is van oorsprong een familiebedrijf, die gestart zijn met het bouwen van websites. Dit is door

Bekijk vacature »

Junior .NET developer

Functie Ons programma is voor afgestudeerde enthousiastelingen die het als een uitdaging zien om met een klein dynamisch team bij de grootste bedrijven van Nederland aan de slag te gaan. Tijdens jouw dienstverband word jij begeleid door een talent manager. Het ontwikkelen van jouw talent staat hierbij centraal. Het programma doorloop je met een team van circa 8 Mede- trainees. De eerste maand start je met een fulltime inhouse opleiding. Deze staat geheel in het teken van de werkzaamheden die jij verder in het programma zult uitvoeren. Na deze opleidingsmaand ga je aan de slag in een dynamische omgeving bij

Bekijk vacature »

VB.NET developer

Functie Het development team waar jij in terecht komt bestaat uit twee ervaren software developers. De directeur/eigenaar is tevens één van deze developers. Jij werkt direct samen met jouw werkgever en kan dan ook veel kennis en ervaring bij dit bedrijf op doen. Als team zijn jullie verantwoordelijk voor de kantoorapplicatie die deze organisatie aanbied in een niche markt. Het team is op dit moment actief bezig met een migratie waarbij het eindstation eindigt in een C# .NET omgeving. Echter is een deel van de software al geschreven in C# .NET. Hierbij is gebruik gemaakt van C# .NET, CSS, HTML,

Bekijk vacature »

Applicatie ontwikkelaar

Functie omschrijving Zelfstandige applicatie ontwikkelaar gezocht voor familiair bedrijf in omgeving Barendrecht! 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! Binnen deze rol houdt jij je met het volgende bezig: Onderhouden en ontwikkelen van de IT systemen; Opzetten van Azure Cloud systemen, denk aan interfaces, hardware op de Cloud, webportalen of BI functies; Werken aan scripts binnen verschillende software applicaties, denk aan ERP en CAD; Ontwikkelen en implementeren van MS PowerApps

Bekijk vacature »

PHP Developer

Functieomschrijving Wij zijn op zoek naar een PHP Developer met Laravel ervaring! Voor een groeiende werkgever in regio Breda zijn wij op zoek naar een medior PHP developer met Laravel ervaring. Je gaat aan de slag met het ontwikkelen van maatwerk software voor klanten in een specifieke markt. Als PHP developer ben je samen met een gemotiveerd team van 6 collega’s verantwoordelijk voor de ontwikkeling, beheer en het innoveren van informatiesystemen voor klanten in een specifieke branche. Als software developer ondersteun je complexe uitdagingen van klanten. Je brengt hun wensen in kaart en vertaalt deze door naar maatwerk software. Om

Bekijk vacature »

Team Lead/ Lead developer gezocht (Hands-on, PHP,

Functie Als Team Lead ben je de leider van één van de ontwikkelteams binnen de organisatie. Je leidt als lead developer een goed draaiend team dat werkt aan complexe en duurzame applicaties en API’s. Vanuit je kennis en ervaring ben je in staat het grote plaatje te blijven overzien, en kritisch mee te denken over bijvoorbeeld de architectuur, maar ook de algehele aanpak binnen het project. Je laat je team niet alleen technisch goed functioneren maar ben ook betrokken bij het menselijke aspect. Zo weet jij je collega’s te motiveren en begeleiden in hun dagelijkse werk. Buiten het team ben

Bekijk vacature »

.NET developer

Functie Als .NET developer start jij in een ontwikkelteam met 15 developers en twee testers. Samen zijn jullie verantwoordelijk voor financiële applicaties met meer dan 50.000 gebruikers. Een deel van het team is verantwoordelijk voor de webapplicaties van deze organisatie. Ook zijn er twee app ontwikkelaars werkzaam in het team die zich focussen op de mobiele applicatie. Als .NET ontwikkelaar ga jij aan de slag met de webapplicaties van deze organisatie. Hierbij maak jij o.a. gebruik van C# .NET, ASP.NET, T-SQL, Angular en TypeScript. De nadruk van jouw functie ligt wel op de backend van de applicatie. Wat jouw functie

Bekijk vacature »

Mendix Consultant / Developer

Dit ga je doen Het in kaart brengen en analyseren van de functionele wensen van de klant rondom Mendix applicaties; Het fungeren als sparringpartner voor de (interne) klanten; Het opstellen van requirements en het vertalen hiervan naar technische mogelijkheden; Het opstellen van user stories; Het bouwen van de Mendix applicaties in samenwerking met jouw team of zelfstandig; Het testen van op te leveren software en het zorg dragen voor de implementatie; Trainen van gebruikers in het gebruik van de applicatie; Werken in een Agile omgeving. Hier ga je werken De organisatie begeeft zich in de retail branche en focust zich

Bekijk vacature »

Java Developer

Dit ga je doen Ontwerpen en bouwen van nieuwe functionaliteiten binnen de complexe omgeving; Proactief de processen kwalitatief en efficient inrichten; Opzetten van Unit Tests; Code Reviews; Regie nemen voor innovatieve projecten; Landschap beheren en de bijbehorende ketens hierbij in het oog houden. Hier ga je werken De organisatie is actief binnen de financiele branche en heeft een IT afdeling van circa 450 man. De organisatie voorziet de maatschappij binnen de financiele dienstverlening en is gedurende de jaren een onmisbare schakel geworden. Het is een high profile organisatie waar ze veel te maken hebben met veranderingen voortkomend uit maatschappelijke ontwikkelingen,

Bekijk vacature »

C# .NET Developer

Dit ga je doen Je richt je op het doorontwikkelen en herstructureren van het platform; Je werkt in teamverband en zelfstandig aan uitdagende projecten voor verschillende klanten; Softwareontwikkeling middels C# .NET; Je staat in contact met verschillende opdrachtgevers om de klantwensen te bespreken en deze vervolgens te ontwikkelen; Verbeteren van bedrijfsprocessen; Implementaties. Hier ga je werken Als .NET Developer 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

Bekijk vacature »

C# .NET Developer

Functie omschrijving Wij zijn op zoek naar een C# .NET Developer voor een bedrijf in de omgeving van Utrecht! Wil jij werken voor een internationaal bedrijf waar je legio mogelijkheden krijgt als Software Ontwikkelaar? Grijp nu je kans! Je kunt een uitdagende rol gaan vervullen als C#.NET Developer binnen een internationaal bedrijf dat gevestigd is in omgeving van Utrecht. Je zult gaan samenwerken met collega's die over de hele wereld verspreid zitten. Dit bedrijf is zeer vooruitstrevend en werkt met de nieuwste technieken. Als C#.NET Developer ga jij je bezig houden met het volgende: Je blijft op de hoogte van

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

29/04/2024 12:36: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.)
 
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.