[JS] Gelijke functies op één pagina

[MoietyMe]

Ik ben bezig met een concept website. Het idee is er en de basis ook. Alleen heb ik twee gelijke functies voor twee ul-elementen.

JavaScript:

$('#blocks-in').mousemove(function(blocksin){
                var x = blocksin.pageX - this.offsetLeft;
                var y = blocksin.pageY - this.offsetTop;

                if (x >= 0 && x <= 194 && y >= 0 && y <= 194) {
                    $("ul.in li.b1").addClass("hover");
                }
                else {
                    $("ul.in li.b1").removeClass("hover");
                }
                if (x >= 196 && x <= 390 && y >= 0 && y <= 194) {
                    $("ul.in li.b2").addClass("hover");
                }
                else {
                    $("ul.in li.b2").removeClass("hover");
                }
                if (x >= 0 && x <= 194 && y >= 196 && y <= 390) {
                    $("ul.in li.b3").addClass("hover");
                }
                else {
                    $("ul.in li.b3").removeClass("hover");
                }
                if (x >= 196 && x <= 390 && y >= 196 && y <= 390) {
                    $("ul.in li.b4").addClass("hover");
                }
                else {
                    $("ul.in li.b4").removeClass("hover");
                }
                if (x >= 0 && x <= 194 && y >= 390 && y <= 586) {
                    $("ul.in li.b5").addClass("hover");
                }
                else {
                    $("ul.in li.b5").removeClass("hover");
                }
                if (x >= 196 && x <= 390 && y >= 390 && y <= 586) {
                    $("ul.in li.b6").addClass("hover");
                }
                else {
                    $("ul.in li.b6").removeClass("hover");
                }
                $('ul.blocks.in').mouseout(function(blocksin2) {
                    $("ul.blocks.in li").removeClass("hover");
                })
            });
            
            $('#blocks-out').mousemove(function(blocksout){
                var ox = blocksout.pageX - this.offsetLeft;
                var oy = blocksout.pageY - this.offsetTop;
                if (ox >= 0 && ox <= 194 && oy >= 0 && oy <= 194) {
                    $("ul.out li.b1").addClass("hover");
                }
                else {
                    $("ul.out li.b1").removeClass("hover");
                }
                if (ox >= 196 && ox <= 390 && oy >= 0 && oy <= 194) {
                    $("ul.out li.b2").addClass("hover");
                }
                else {
                    $("ul.out li.b2").removeClass("hover");
                }
                if (ox >= 392px && ox <= 586px && oy >= 0 && oy <= 194) {
                    $("ul.out li.b3").addClass("hover");
                }
                else {
                    $("ul.out li.b3").removeClass("hover");
                }
                if (ox >= 0 && ox <= 196 && oy >= 196 && oy <= 390) {
                    $("ul.out li.b4").addClass("hover");
                }
                else {
                    $("ul.out li.b4").removeClass("hover");
                }
                if (ox >= 196 && ox <= 390 && oy >= 196 && oy <= 390) {
                    $("ul.out li.b5").addClass("hover");
                }
                else {
                    $("ul.out li.b5").removeClass("hover");
                }
                if (ox >= 392 && ox <= 586 && oy >= 196 && oy <= 390) {
                    $("ul.out li.b6").addClass("hover");
                }
                else {
                    $("ul.out li.b6").removeClass("hover");
                }
                $('ul.blocks.out').mouseout(function(blocksout2) {
                    $("ul.blocks.out li").removeClass("hover");
                })
            });

Wat doe ik verkeerd :x

[johnkeates]

blocks:123
SyntaxError: At least one digit must occur after a decimal point

[N0 0B]

Als je naar je code kijkt zie je dat de JS parser op GoT regel 61 fouten geeft.

[Amras]

Regel 61 bevat twee fouten, een getal kan niet eindigen op px.

Waarom maak je eigenlijk geen gebruik van de ingebakken :hover van CSS?

Cascading Stylesheet:

ul.in li:hover
{
    background-color: blue;
}

[MoietyMe]

God wat dom

Waarom JS, als je de pagina ververst dan kan je zien waarom. Als je met de muis buiten de vakjes gaat dan moet het andere vakje oplichten/uitschuiven.

[ Voor 83% gewijzigd door MoietyMe op 19-09-2012 13:46 ]

[MueR]

Wat irritant. Als ik een stuk tekst wil selecteren sluit die box ineens. Waarom werk je niet gewoon met mouseenter/mouseleave?

[NMe]

Bij dit soort hippe constructies zou ik juist gaan kijken naar CSS transitions en hooguit voor oude browsers terugvallen op javascript, waarbij ik dan inderdaad mouseenter en -leave zou gebruiken zodat je niet met die hardcoded magic numbers hoeft te klooien.

Sowieso: ooit gehoord van DRY?

[MoietyMe]

Er komen foto's in de blokken. Deze klappen dan uit als je met je muis er overheen gaat.

Het is in opdracht van een client. Heb ook een versie met puur CSS. Dat werkt mijn inziens fijner. De client wil echter dat het functioneert zoals het nu doet.

Mouseenter/mouseleave zal ik eens naar kijken vanmiddag. Klinkt een stuk logischer. Mind you dat ik nooit met JS werk. Is allemaal even uitvogelen dus.

[C0rnelis]

Good Fella schreef op woensdag 19 september 2012 @ 14:44:
Er komen foto's in de blokken. Deze klappen dan uit als je met je muis er overheen gaat.

Het is in opdracht van een client. Heb ook een versie met puur CSS. Dat werkt mijn inziens fijner. De client wil echter dat het functioneert zoals het nu doet.

Mouseenter/mouseleave zal ik eens naar kijken vanmiddag. Klinkt een stuk logischer. Mind you dat ik nooit met JS werk. Is allemaal even uitvogelen dus.

Als je er nog nooit mee hebt gewerkt, dan heb je deze constructie zelf verzonnen van de (weinige) kennis die je hebt/had? Als je gegoogled zou hebben naar css hover in javascript had je waarschijnlijk wel tienduizenden zo niet meer resultaten waarin meer degelijke oplossingen naar voren komen. Misschien tijd voor een (online) cursus/tutorial?

Als dit in opdracht is voor iemand anders dan zou ik me toch op z'n minst inlezen op de materie. Heb je echt nooit vaker uitgebreid met javascript gewerkt als 'Head Front-end Webdevelopment'?

[_Thanatos_]

Good Fella schreef op woensdag 19 september 2012 @ 14:44:
Het is in opdracht van een client. Heb ook een versie met puur CSS. Dat werkt mijn inziens fijner. De client wil echter dat het functioneert zoals het nu doet.

Aan jou om de klant te overtuigen van de superieuriteit van de css-versie. De klant is geen god, maar slechts koning

[MoietyMe]

C0rnelis schreef op woensdag 19 september 2012 @ 23:03:
[...]


Als je er nog nooit mee hebt gewerkt, dan heb je deze constructie zelf verzonnen van de (weinige) kennis die je hebt/had? Als je gegoogled zou hebben naar css hover in javascript had je waarschijnlijk wel tienduizenden zo niet meer resultaten waarin meer degelijke oplossingen naar voren komen. Misschien tijd voor een (online) cursus/tutorial?

Goed plan.

Als dit in opdracht is voor iemand anders dan zou ik me toch op z'n minst inlezen op de materie. Heb je echt nooit vaker uitgebreid met javascript gewerkt als 'Head Front-end Webdevelopment'?

Nooit nodig geweest. Dat doen de back-enders normaal (bij mijn vorige werkgever dan).

[NMe]

De backenders doen daar frontend-code? Dan blijft er weinig frontend-werk over natuurlijk.

[MoietyMe]

NMe schreef op vrijdag 21 september 2012 @ 13:48:
De backenders doen daar frontend-code? Dan blijft er weinig frontend-werk over natuurlijk.

Genoeg HTML en CSS te doen anders

Hebben het ontwerp nog eens goed bekeken en anders gemaakt: Blocks Concept

De plaatjes/foto's komen nu achter de blokken zo gezegd.

Complete javascript:

JavaScript:

function loadBlocks(){
    $('ul.in li').addClass(function(n) {
        return "b" + (n + 1);
    });

    $('ul.out li').addClass(function(m) {
        return "b" + (m + 1);
    });

    $("ul.in li").each(function(e) {
        $("ul.in li.b" + (e + 1)).mouseover(function(){
          $("ul.blocks.in").addClass("b" + (e + 1));
        }).mouseout(function(){
          $("ul.blocks.in").removeClass("b" + (e + 1));
        });
    })

    $("ul.out li").each(function(f) {
        $("ul.out li.b" + (f + 1)).mouseover(function(){
          $("ul.blocks.out").addClass("b" + (f + 1));
        }).mouseout(function(){
          $("ul.blocks.out").removeClass("b" + (f + 1));
        });
    })
};

Kan ik dit nog korter maken? Want er bestaan nu nog steeds twee de zelfde functies voor de twee <ul>'s. Enige verschil in die functies is de class-naam.

[NMe]

Waarom niet gewoon over alle li's heen lopen en binnen de functie checken of het een in of een out moet worden? Dan heb je maar één loop nodig.

[MoietyMe]

NMe schreef op maandag 24 september 2012 @ 15:44:
Waarom niet gewoon over alle li's heen lopen en binnen de functie checken of het een in of een out moet worden? Dan heb je maar één loop nodig.

Ja dat vind ik een uitstekend plan, maar hoe doe ik dat? Kun je me een beetje in de goede richting helpen?

[MueR]

Nou, ipv die ul.out li en ul.in li doe je gewoon een ul.out li, ul.in li (of nog beter, een generieke class voor beiden) in je each. Je selecteert namelijk heel erg specifiek steeds, waarbij het enige verschil in je loops de classname op de ul is. Waarom je die postfixes gebruikt is me een raadsel, maar die kan je natuurlijk ook in de html opnemen onder een data attribuut.

[ Voor 18% gewijzigd door MueR op 25-09-2012 10:46 ]