Archief - jQuery a:active

blaadjepapier · 15 feb 2011

Hallo!

ik heb een vraagje/probleempje over mijn jquery navigatiesysteem.
Graag had ik gehad dat wanneer je op de desbetreffende pagina bent, dat het betreffende onderdeel in het menu in een ander kleur staat dan de andere menu-items.

Nu is het probleem dat de site bestaat uit één brede pagina, en de jquery zorgt ervoor dat wanneer je op een menu-item klikt, je "slidet" naar het onderdeel.

Heeft iemand hiervoor een oplossing?

Dankje!

JAN-WILLEM LIBEER

Dieterg · 15 feb 2011

Code:

	$('#navigation ul li').click(function(){
		$('#navigation ul li').each(function(index){
			$(this).removeClass('active');  
		});
		$(this).addClass('active');
	});

Het werkt maar ik ben niet zeker of dit de 'juiste' manier is. Ik ben niet echt thuis in jQuery

.

Ahja, je moet uw active class nog wel style geven in uw css bestand. Succes!

Code:

.active a {
   color: red;
}

Edit: je moet het plaatsen bij in uw document.ready function!

adrianhates · 15 feb 2011

Mam zei:
.. - knip - ..

werkt maar kan korter en beter

Code:

	$('#navigation li a').click(function(){
		$('#navigation li a.active').removeClass('active');
		$(this).addClass('active');
	});

blaadjepapier · 15 feb 2011

hmm, wanneer ik code die bij mij document.ready script zet, gaat de navigatie niet meer (en de a active ook niet)

blaadjepapier · 16 feb 2011

iemand die kan helpen?

adrianhates · 16 feb 2011

zet uw code eens online en leg ne link , dan kunnen we gemakkelijk checken met firebug ..

Grtz

edit : ow, nevermind , kzal is loeren:
kzie die code nergens staan in uw bron?

blaadjepapier · 16 feb 2011

neej, kheb die ervan gesmeten, anders was de navigatie fucked up.
maar moet die code die je me hebt gegeven in een apart scriptje staan, of in één van de bestaande?

DieselPower · 16 feb 2011

Is het fotografie voor de derde leeftijd ofzo? Zulke grote letters, goddamn!

blaadjepapier · 16 feb 2011

DieselPower zei:
Is het fotografie voor de derde leeftijd ofzo? Zulke grote letters, goddamn!

zeg manje, er staat nog niets van inhoud in, tis gwn de lay-out dat ik aan het doen ben. Dit topic gaat over die jquery, en niet over de grootte van de letters. Dus als ge niets zinnigs hebt te zeggen daarover, zeg dan ook gwn niets.

DieselPower · 16 feb 2011

Voor iemand die nog geen voorgeschreven script kan implementeren hebt gij wel veel praat. Het is zowel nuttig als zinvol voor u. Wie even nadenkt kan ook niets ontwerpen zonder rekening te houden met de tekst/inhoud. Ik zou wel eens iemand een boek willen zien ontwerpen zonder inhoud. Dát is onzinnig.

Uw code is trouwens een merde, wat mijn vermoeden bevestigt dat ge absoluut geen idee hebt waarmee ge bezig zijt. Dus kom hier vooral met een attitude om hulp vragen.

blaadjepapier · 16 feb 2011

Zeg het dan op een wat minder aanvallende manier in de plaats van
"Is het fotografie voor de derde leeftijd ofzo? Zulke grote letters, goddamn!".
Eventueel zo? "Die letters zijn wat aan de grote kant, zou je die niet wat kleiner maken?".
Klinkt al een stuk vriendelijker hé

En ja mijn code is een chaos en trekt op niets --> beginner!
En neen, ik kan geen voorgeschreven code implementeren, so what? Juist daarom dat ik om hulp kom vragen als absolute beginner.

En ik hou wel degelijk rekening met wat er in moet komen, maar nog niet echt met de grootte van de letters, wat ook niet HET belangrijkste is van heel het ontwerp. Zeer makkelijk aan te passen, en niet bepalend (het verschil tss 14px en 12px is niet overdonderend groot).

Dus dit gaat hier nu over die jquery, help mij daar mee in de plaats, en stel dan vriendelijk voor ofdat de letters niet te groot zijn.
Iedereen moet ergens beginnen als beginner, ook uw eerste site trok hoogstwaarschijnlijk op niet al te veel.

En néén, het is niet voor de derde leeftijd.

Dastardly · 16 feb 2011

blaadjepapier zei:
Zeg het dan op een wat minder aanvallende manier in de plaats van
"Is het fotografie voor de derde leeftijd ofzo? Zulke grote letters, goddamn!".
Eventueel zo? "Die letters zijn wat aan de grote kant, zou je die niet wat kleiner maken?".
Klinkt al een stuk vriendelijker hé

En ja mijn code is een chaos en trekt op niets --> beginner!
En neen, ik kan geen voorgeschreven code implementeren, so what? Juist daarom dat ik om hulp kom vragen als absolute beginner.

En ik hou wel degelijk rekening met wat er in moet komen, maar nog niet echt met de grootte van de letters, wat ook niet HET belangrijkste is van heel het ontwerp. Zeer makkelijk aan te passen, en niet bepalend (het verschil tss 14px en 12px is niet overdonderend groot).

Dus dit gaat hier nu over die jquery, help mij daar mee in de plaats, en stel dan vriendelijk voor ofdat de letters niet te groot zijn.
Iedereen moet ergens beginnen als beginner, ook uw eerste site trok hoogstwaarschijnlijk op niet al te veel.

En néén, het is niet voor de derde leeftijd.

dit :

adrianhates zei:
werkt maar kan korter en beter

Code:

$('#navigation li a').click(function(){ $('#navigation li a.active').removeClass('active'); $(this).addClass('active'); });

werkte perfect toen ik het tussen de rest van al uw js rommel heb gesmeten. ik ben zelf ook niet de properste als het op code aankomt, maar zet ze op zijn minst toch al is allemaal in dezelfde map + al uw losse js in uw html in een apart bestandje.

waar ik het heb tussen gezwierd :

Code:

<script type="text/javascript">
             $(document).ready(function () {
                 $.localScroll.defaults.axis = 'x';
                 $.localScroll();

                 $('#navigation li a').click(function () {
                     $('#navigation li a.selected').removeClass('selected');
                     $(this).addClass('selected');
                 });
             });
            
</script>

nadien gewoon nog ergens een .selected { color:Red; } in uw css en ge zijt op weg (klasse active werd al gebruikt daarmee dat het daarvoor waarschijnlijk niet werkte. maar zo'n zaken heb je normaal toch direct gevonden ?).

haal in godsnaam ook dit soort gezwans:

Code:

<li>|&nbsp&nbsp&nbsp<a href="#content" >BLOG</a>&nbsp&nbsp&nbsp|</li>

uit uw code, een simpele margin-left, padding-left of wat ge ook wilt gaat veel beter werken. ik weet niet waarvoor deze site gaat dienen, maar als er enige vorm van beoordeling bij komt kijken (school of als portfolio) zijn dit zaken die enorm hard opvallen.

probeer ook meer structuur in uw code te brengen. alles staat er maar door elkaar gezwierd. als ge tijdens het typen (of na het kopieren van wat code) een beetje op uw uitlijning let ga je daar achteraf toch wel baat bij hebben als er iets misloopt. al die witruimte overal is ook voor niks goed.

metalleke · 16 feb 2011

adrianhates zei:
werkt maar kan korter en beter

-snip-

Kan nog "beter"

Edit: damm you IE

Code:

$('#navigation').click(function(e) {
    if((event.target ? event.target.nodeName : event.srcElement.nodeName) == 'A') {
        $(this).find('a.active').removeClass('active');
        $(e.target).addClass('active');
    }
});

adrianhates · 17 feb 2011

metalleke zei:

Kan nog "beter"

Code:

$('#navigation').click(function(e) {
    if((event.target ? event.target.nodeName : event.srcElement.nodeName) == 'A') {
        $(this).find('a.active').removeClass('active');
        $(e.target).addClass('active');
    }
});

nah , dat is meer code!

Archief - jQuery a:active

blaadjepapier

Legacy Member

Dieterg

Legacy Member

adrianhates

Legacy Member

blaadjepapier

Legacy Member

blaadjepapier

Legacy Member

adrianhates

Legacy Member

blaadjepapier

Legacy Member

DieselPower

Legacy Member

blaadjepapier

Legacy Member

DieselPower

Legacy Member

blaadjepapier

Legacy Member

Dastardly

Legacy Member

metalleke

Legacy Member

adrianhates

Legacy Member