[jQuery] navigatie aanroepen

[Verwijderd]

Ik heb de volgende code (zie verderop) om mijn navigatie te activeren bij pagina's met een witte achtergrond.
Bij pagina's met een zwarte achtergrond werkt de navigatie niet.

Op een of andere manier moet ik ook de "div.zwart" toevoegen, zodat zowel de witte als de zwarte versie allebei werken.

De code waar het om gaat is met name het .navigator gedeelte:

JavaScript:

<script type="text/javascript">
        $(document).ready(function() {
            
            validateForm('contactform');
            validateForm('nieuwsbriefform');
            
            $('.visible-content').scrollable({
                mousewheel: false,
                easing: 'easeInOutQuint',
                speed: 750,
                onBeforeSeek: function(event, i) {
                    
                },
                onSeek: function(event, i) {
                    if(i == 1) {
                        $('.logo div.default').fadeOut('fast');
                        $('.logo div.kleur').fadeIn('fast');
                        $('.nav div.wit').fadeOut('fast');
                        $('.nav div.zwart').fadeIn('fast');
                    } else {
                        $('.logo div.kleur').fadeOut('fast');
                        $('.logo div.default').fadeIn('fast');
                        $('.nav div.zwart').fadeOut('fast');
                        $('.nav div.wit').fadeIn('fast');
                    }
                }
                
            }).navigator({
                navi: '.nav li'
            });
            
                        
            var oScrollbar = $("#scrollable");
            oScrollbar.tinyscrollbar({
                sizethumb: 50,
                size: 300,
                axis: 'y'
            }); 
            
                        
        });
        
        $(window).load(function() {
            initExternal();                     
        });
        
    </script>

Ik heb al diverse dingen geprobeerd. Bijvoorbeeld alleen ul.nav aan te roepen. Maar dat werkt dan weer niet...

Mijn html code:

HTML:

<div id="top">
            <div class="logo">
                <div class="default"><a href="" title=" ">logo</a></div>
                <div class="kleur"><a href="" title=" ">logo</a></div>
            </div>
            
            <ul class="nav"> 
                <div class="wit">
                    <li><a href="javascript://" class="missie" title="Missie"> </a></li>
                    <li><a href="javascript://" class="portfolio" title="Portfolio"> </a></li>
                    <li><a href="javascript://" class="contact" title="Contact"> </a></li>
                </div>
            <div class="zwart">
                    <li><a href="javascript://" class="missie" title="Missie"> </a></li>
                    <li><a href="javascript://" class="portfolio" title="Portfolio"> </a></li>
                    <li><a href="javascript://" class="contact "title="Contact"> </a></li>
                </div>
           </ul>
        </div>

Concreet:

• Ik heb een navigatie 'menu' in de vorm van plaatjes met een witte en een zwarte achtergrond.
  Deze worden allebei op de juiste wijze getoond. (wit op witte pagina enzovoorts)
• Probleem is dat de witte versie (als je op de plaatjes klikt) wel werken en de zwarte niet.
  Dat klopt ook wel, omdat in de javascript codering alleen de witte versie wordt aangeroepen.
  Hoe kan ik daar de zwarte aan toevoegen, zodat ze allebei werkend zijn?

Het gaat dus vooral om de javascript codering. Alle html en css werkt allemaal goed.
Hopelijk kan en wil iemand me verder helpen.
Alvast bedankt!

Ik maak gebruik van jquery.srollable

[ Voor 3% gewijzigd door Verwijderd op 24-11-2010 15:07 ]

[dev10]

Hoe kan ik daar de zwarte aan toevoegen, zodat ze allebei werkend zijn?

Ik zou geen zwarte toevoegen maar een class toevoegen zodat je op class kunt selecteren en dat de kleur niet zo veel uitmaakt, omdat 'zwart' en 'wit' beide hetzelfde doen als er op geklikt wordt.

offtopic:
Ik zou er zelf, maar dat is persoonlijk, niet voor kiezen om zwart en wit als classname te gebruiken. Wat als zwart in de toekomst blauw wordt?

[Verwijderd]

dev10 schreef op woensdag 24 november 2010 @ 14:24:
[...]


Ik zou geen zwarte toevoegen maar een class toevoegen zodat je op class kunt selecteren en dat de kleur niet zo veel uitmaakt, omdat 'zwart' en 'wit' beide hetzelfde doen als er op geklikt wordt.

offtopic:
Ik zou er zelf, maar dat is persoonlijk, niet voor kiezen om zwart en wit als classname te gebruiken. Wat als zwart in de toekomst blauw wordt?

Als ik de class .nav li aanroep werkt ook alleen de witte versie. Een extra class lost het probleem ook niet op.
Misschien dat ik het verkeerd begrijp, dan moet je het maar zeggen.
Nog even losgezien van zwart/blauw etc.

[NMe]

Waarom heb je überhaupt een class "wit" op alle li's die al in een div zitten die al "wit" als class heeft? Nog naast het feit dat je een classname nooit moet noemen naar wat 'ie doet maar naar wat 'ie omschrijft is het gewoon overbodig om je li's die class mee te geven. Je kan ook gewoon "div.wit li" gebruiken om alle witte li's aan te spreken in je CSS.

Daarnaast mag je volgens mij helemaal geen div gebruiken als container om een li heen binnen een ul.

[OkkE]

NMe schreef op woensdag 24 november 2010 @ 14:43:
Waarom heb je überhaupt een class "wit" op alle li's die al in een div zitten die al "wit" als class heeft? Nog naast het feit dat je een classname nooit moet noemen naar wat 'ie doet maar naar wat 'ie omschrijft is het gewoon overbodig om je li's die class mee te geven. Je kan ook gewoon "div.wit li" gebruiken om alle witte li's aan te spreken in je CSS.

Daarnaast mag je volgens mij helemaal geen div gebruiken als container om een li heen binnen een ul.

Dit.

Plus zowel een unieke class als een ID setten voor elke <a> is wat overbodig, en linkjes met "javascript://" is toch ook vrij ranzig.

Ook zie ik het nut niet helemaal van twee keer precies de zelfde navigatie items neerzetten. Je kunt ook gewoon de kleur (of achtergrond) aanpassen, ipv hide/show. En op dit moment staan er dus dubbele IDs in de HTML, wat ook niet mag.

----

Maar om even te debuggen, welke waarde heeft "i" in de onSeek functie?

[ Voor 14% gewijzigd door OkkE op 24-11-2010 14:53 ]

[Verwijderd]

Ik antwoord hier op meerdere posts.

Een div binnen ul werkt blijkbaar wel. Ik heb dat nog nooit eerder gedaan, maar hier werkt het wel.

Dat bij de li ook nog eens een class meegegeven wordt was een probeersel. Ik zal dat in de eerste post aanpassen.

class en id tegelijk was ook een probeersel. Er staat nu alleen nog class (om de plaatjes aan te roepen, css)

Ik heb ook al nagedacht over de kleur achtergrond aan te passen. Probleem is de tekst.
In de plaatjes met witte achtergrond is de tekst zwart (en wat andere kleuren) en bij zwart is de tekst wit.
hide/show lijkt me in dit geval dus een optie.

de waarde i in de onSeek functie heeft 1. Daarom werkt alleen de witte versie.
de onSeek functie werkt verder wel, bij else krijg ik zoals de code aangeeft gewoon de zwarte versie te zien, alleen werkt de navigatie dan niet. Het gaat namelijk nog steeds om het stukje javascript waar .navigator wordt aangeroepen.

Als er iemand andere opties heeft: laat maar horen!

[ Voor 19% gewijzigd door Verwijderd op 24-11-2010 15:04 ]

[mithras]

Je moet niet je DOM injecteren met dubbele content slechts vanwege het visuele aspect. Zet er een klasse "wit" op en toggle de klasse naar "zwart" wanneer gewenst. De css doet dan gewoon de rest:

Cascading Stylesheet:

.wit {
  background-color: white;
}
.wit a {
  color: black;
}

.zwart {
  background-color: black;
}
.zwart a {
  color: white;
}

JavaScript:

$("#toggle").click(function() {
  $(".nav div").toggleClass("wit").toggleClass("zwart");
});

[OkkE]

Verwijderd schreef op woensdag 24 november 2010 @ 15:02:
Een div binnen ul werkt blijkbaar wel. Ik heb dat nog nooit eerder gedaan, maar hier werkt het wel.

Dat iets "werkt", wil niet zeggen dat het correct is. Een <div> om <li>'s heen mag niet volgens de HTML spec. Haal die <div> eens gewoon weg: misschien zorgt die er namelijk wel voor dat alleen de eerste 3 (dus de witte) items worden geselecteerd.

Ik heb ook al nagedacht over de kleur achtergrond aan te passen. Probleem is de tekst.
In de plaatjes met witte achtergrond is de tekst zwart (en wat andere kleuren) en bij zwart is de tekst wit.
hide/show lijkt me in dit geval dus een optie.

Je kunt naast background-color ook gewoon de color van tekst aanpassen (lees: animeren met jQuert) natuurlijk...

[Verwijderd]

OkkE schreef op woensdag 24 november 2010 @ 15:20:
[...]
Dat iets "werkt", wil niet zeggen dat het correct is. Een <div> om <li>'s heen mag niet volgens de HTML spec. Haal die <div> eens gewoon weg: misschien zorgt die er namelijk wel voor dat alleen de eerste 3 (dus de witte) items worden geselecteerd.

Dat is waar. Ikheb nu de divs weggehaald, maar li wel een class meegegeven i.v.m. de layout.

[...]
Je kunt naast background-color ook gewoon de color van tekst aanpassen (lees: animeren met jQuert) natuurlijk...

Ik heb alles maar even online gezet. Wellicht dat jullie het dan beter kunnen volgen.

Er zitten wel weer wat wijzigingen in.

[ Voor 7% gewijzigd door Verwijderd op 24-11-2010 16:39 ]

[OkkE]

Verwijderd schreef op woensdag 24 november 2010 @ 16:38:
Ik heb alles maar even online gezet. Wellicht dat jullie het dan beter kunnen volgen.

Je kunt ook gewoon de http://www.menaddwork.nl/ website overnemen (voor zo ver je dat nog niet gedaan hebt).

[ Voor 6% gewijzigd door OkkE op 24-11-2010 17:00 ]

[NMe]

Verwijderd schreef op woensdag 24 november 2010 @ 16:38:
[...]

Dat is waar. Ikheb nu de divs weggehaald, maar li wel een class meegegeven i.v.m. de layout.

Het is hierboven al gezegd maar dat heb je helemaal niet nodig. Je moet gewoon een active--class gebruiken of iets dergelijks. Geen class = wit, active = zwart, of zoiets. Daarna is het gewoon een kwestie van de class eraan hangen of eraf halen en eventueel wat animeren.

Content herhalen zoals je in je voorbeeld doet moet je ook zoveel mogelijk mijden. Een paar li's hiden en showen alleen om kleuren te wijzigen slaat nergens op, je kan hetzelfde zonder repeating content bereiken. Vindt Google vast ook liever.

[Verwijderd]

OkkE schreef op woensdag 24 november 2010 @ 16:41:
[...]


Je kunt ook gewoon de http://www.menaddwork.nl/ website overnemen (voor zo ver je dat nog niet gedaan hebt).

Volgens mij is jQuery open source. Ik snap dus niet wat je bedoelt.
De door jou genoemde website maakt ook gebruik van jquery.scrollable.

[ Voor 10% gewijzigd door Verwijderd op 24-11-2010 17:29 ]

[Verwijderd]

NMe schreef op woensdag 24 november 2010 @ 16:46:
[...]

Het is hierboven al gezegd maar dat heb je helemaal niet nodig. Je moet gewoon een active--class gebruiken of iets dergelijks. Geen class = wit, active = zwart, of zoiets. Daarna is het gewoon een kwestie van de class eraan hangen of eraf halen en eventueel wat animeren.

Content herhalen zoals je in je voorbeeld doet moet je ook zoveel mogelijk mijden. Een paar li's hiden en showen alleen om kleuren te wijzigen slaat nergens op, je kan hetzelfde zonder repeating content bereiken. Vindt Google vast ook liever.

Ik volg je aardig. Wil je een kort voorbeeldje geven?

[Bosmonster]

Verwijderd schreef op woensdag 24 november 2010 @ 17:27:
[...]

Volgens mij is jQuery open source. Ik snap dus niet wat je bedoelt.
De door jou genoemde website maakt ook gebruik van jquery.scrollable.

Website concept is hetzelfde. En je hebt zelfs letterlijk code, tekst en afbeeldingen overgenomen Daar zit allemaal copyright op.

Je hoeft niet te ontkennen dat dat een duidelijke inspiratie was

Oeh, zelfs inclusief taalfouten:

http://www.menaddwork.nl/js/menaddwork.js
http://www.creatiefenveel...s/creatiefenveelzijdig.js

loadPorfolio

Creatief? Nee. Veelzijdig in copy/paste? Zeker!

[ Voor 22% gewijzigd door Bosmonster op 24-11-2010 17:38 ]

[NMe]

Verwijderd schreef op woensdag 24 november 2010 @ 17:27:
[...]

Volgens mij is jQuery open source. Ik snap dus niet wat je bedoelt.

jQuery wel ja, maar teksten en layouts zijn dat niet. Jij hebt het hele ontwerp zowat overgenomen, evenals sommige letterlijke teksten en fonts. Tenzij de mensen van die website je toestemming gegeven hebben heet dat plagiaat, en dat is strafbaar.

Verwijderd schreef op woensdag 24 november 2010 @ 17:28:
[...]

Ik volg je aardig. Wil je een kort voorbeeldje geven?

Dat gaat je niet helpen, ik spreek geen jQuery. Wel Mootools, maar daar heb je niks aan.

[Verwijderd]

Jammer dat er zo gereageerd wordt. Ik zie alleen maar verschillen, behalve de horizontale scroll.
Tekst en afbeeldingen maak ik zelf, voor het geval hier gelijk met plagiaat vingers wordt gewezen.

En inderdaad: creatief&veelzijdig genoeg om dat zelf te doen. Gegroet allemaal.

Voor diegenen die wel serieus konden reageren: bedankt voor het meedenken.

[NMe]

We waren serieus maar als je teksten en afbeeldingen letterlijk overneemt dan nemen wij je niet serieus meer zodra je doet of je neus bloedt.

Je hebt gewoon code en ontwerp geript van een ander. Moet je zelf weten, de juridische gevolgen zijn je eigen probleem. Maar als je vervolgens hun code niet snapt en vervolgens hier om hulp komt vragen onder de pretentie dat je het zelf geschreven hebt, dan houdt het wat mij betreft op. Dan zoek je inderdaad maar een ander forum voor je hulp. Wij gaan je verder niet helpen plagiaat te plegen.