Hjelp til enkel JQuery funksjon!

[knuhuf]

Hei, holder på med en relativt enkel JQuery funksjon for folk som kan JQuery/Javascript. Jeg må innrømme at jeg sliter med det, og trenger hjelp for å få denne sammen. Vet at HTML koden ikke er noe særlig god, men det vet jeg og kan fint ordne opp i det. Skal foreksempel ikke bare bruke classer.

 

Lure blant annet på om jeg kunne hatt

.addClass(active)

 

og hatt unchosen:active i CSS'en.

 

Takker for hjelp!

 

Her er JQuery scriptet.

 

<script>
  $('.clickme1').click(function(){
 if($('.unchosen').hasClass('.unchosen')) {
  $(this).removeClass('.unchosen').addClass('.active');
  $('.chosen').hide();
 }
 else {
  $(this).removeClass('.active').addClass('.unchosen');
  $('.chosen').show();

 }
});
  </script>

 

og her er HTML...

 

 

<div id="menubar">
 <h3 class="clickme">Meldinger</h3><h3 class="clickme1">Ute</h3>
 <img src="line.png" class="chosen" /><img src="line.png" class="unchosen" />
</div>

 

og CSS

 

.chosen
{
position: absolute;
display: block;
top: 35px;
left: 52px;
}
.unchosen
{
position: absolute;
display: none;
top: 35px;
left: 150px;
}
.active
{
position: absolute;
display: inline;
top: 35px;
left: 150px;
}

[molty]

Er ikke heelt med på hva du er ute etter om det er jqueryen som failer eller om du lurer på css her.

Men en ting er sikkert

if($('.unchosen').hasClass('.unchosen')) {

Den gir ikke mening

 

Lure blant annet på om jeg kunne hatt

.addClass(active)

og hatt unchosen:active i CSS'en.

 

 

Når du bruker .addClass('active') funksjonen med jquery vil en div element evt gå fra: <div class="unchosen"></div> til <div class="unchosen active"></div>

 

Css blir ikke .unchosen:active, men den blir .unchosen.active eller bare .active

 

$('.clickme1').click(function(){
 if($('.unchosen').hasClass('.unchosen')) {
	  $(this).removeClass('.unchosen').addClass('.active');
	  $('.chosen').hide();
 }
 else {
	  $(this).removeClass('.active').addClass('.unchosen');
	  $('.chosen').show();
 }
});

En annen ting. Inni if og else fjerner du og legger til klasser på this, altså den du trykket på. Ifølge koden din så tolker jeg ikke at det er den du trykker på som skal endre klasse, men den under som hadde class="unchosen"

Så hva skal scriptet gjøre generelt?

[knuhuf]

Er ikke heelt med på hva du er ute etter om det er jqueryen som failer eller om du lurer på css her.

Men en ting er sikkert

if($('.unchosen').hasClass('.unchosen')) {

Den gir ikke mening

 

Lure blant annet på om jeg kunne hatt

.addClass(active)

og hatt unchosen:active i CSS'en.

 

 

Når du bruker .addClass('active') funksjonen med jquery vil en div element evt gå fra: <div class="unchosen"></div> til <div class="unchosen active"></div>

 

Css blir ikke .unchosen:active, men den blir .unchosen.active eller bare .active

 

$('.clickme1').click(function(){
 if($('.unchosen').hasClass('.unchosen')) {
	  $(this).removeClass('.unchosen').addClass('.active');
	  $('.chosen').hide();
 }
 else {
	  $(this).removeClass('.active').addClass('.unchosen');
	  $('.chosen').show();
 }
});

En annen ting. Inni if og else fjerner du og legger til klasser på this, altså den du trykket på. Ifølge koden din så tolker jeg ikke at det er den du trykker på som skal endre klasse, men den under som hadde class="unchosen"

Så hva skal scriptet gjøre generelt?

 

Haha, jeg er helt blank med JQuery forstår lite av det

 

Men legg merke til bilde

 

 

Når siden åpnes skal streken under Num1 være synlig, men skjult under Num2.

Når jeg trykker på Num2 skal streken fjernes fra Num1 og vises på Num2. Og så motsatt.

MERK! Vil ikke ha streken synlig på begge samtidig

 

Vil tro dette skal være relativt enkelt, men for vanskelig for meg.

 

Og du... Om jeg på en måte har 2 seksjoner på siden min. En som er skjult på page load, og en som er synlig på page load. Men om jeg bruker JQuery til å gjemme den ene inntil Num2 er klikket, vil dette påvirke nettsidens "loade" tid mye? For tenker på å ha 2 DIV's, en som er skjult og en som er ikke.

[molty]

Om jeg på en måte har 2 seksjoner på siden min. En som er skjult på page load, og en som er synlig på page load. Men om jeg bruker JQuery til å gjemme den ene inntil Num2 er klikket, vil dette påvirke nettsidens "loade" tid mye? For tenker på å ha 2 DIV's, en som er skjult og en som er ikke.

Det vil ikke påvirke nettsidens "loade" tid vil jeg mene. For det er jo alt lastet inn på nettsiden, så eneste den gjør er å gjøre den ene skjult og vise den andre.

 

For å bruke en slik strek under menyen ville jeg først og fremst hatt "strekene" inni selve h3 taggen, siden du bruker det. Altså jeg vil ha det med css, ikke bruke div elements inni h3 taggen. Med andre ord du trenger bare: <h3 class="clickme">Num1</h3><h3 class="clickme">Num2</h3> osv osv

 

CSS:

h3.clickme{
background-repeat:no-repeat;
background-position:bottom;
height:25px; /* ca 25px */
margin-right:5px;
}
h3.clickme.active{
background-image: url('line.png');
}

 

script:

$('h3.clickme').click(function(){
  var active = $(this).hasClass('active');
  $('h3.clickme.active').each(function(){
       $(this).removeClass('active');
  });

 if(active != true) {
    $(this).addClass('active');
 }
});

Jeg vil tro noe sånt skal holde

[knuhuf]

Om jeg på en måte har 2 seksjoner på siden min. En som er skjult på page load, og en som er synlig på page load. Men om jeg bruker JQuery til å gjemme den ene inntil Num2 er klikket, vil dette påvirke nettsidens "loade" tid mye? For tenker på å ha 2 DIV's, en som er skjult og en som er ikke.

Det vil ikke påvirke nettsidens "loade" tid vil jeg mene. For det er jo alt lastet inn på nettsiden, så eneste den gjør er å gjøre den ene skjult og vise den andre.

 

For å bruke en slik strek under menyen ville jeg først og fremst hatt "strekene" inni selve h3 taggen, siden du bruker det. Altså jeg vil ha det med css, ikke bruke div elements inni h3 taggen. Med andre ord du trenger bare: <h3 class="clickme">Num1</h3><h3 class="clickme">Num2</h3> osv osv

 

CSS:

h3.clickme{
background-repeat:no-repeat;
background-position:bottom;
height:25px; /* ca 25px */
margin-right:5px;
}
h3.clickme.active{
background-image: url('line.png');
}

 

script:

$('h3.clickme').click(function(){
  var active = $(this).hasClass('active');
  $('h3.clickme.active').each(function(){
	$(this).removeClass('active');
  });

 if(active != true) {
 $(this).addClass('active');
 }
});

Jeg vil tro noe sånt skal holde

 

Det må vell bli:

h3.clickme:active
{
background-image: url('line.png');
}

 

Men når jeg trykker på "h3" så flasher linja i eit sekund ved klikk. Jeg håpet på å få den stuck inntill h3(2) er klikket.

 

Men tusen takk for hjelpen uansett! Skal begynne å lære JQuery snart selv

[molty]

Nei, det blir h3.clickme.active

Det blir .active fordi . tilsvarer class sant, og i scriptet så gir vi den en ny class, active. Hvis du henger med?

 

Når det gjelder flashingen, prøv å gjør det om slik kanskje

$('h3.clickme').click(function(){
  var active = $(this).hasClass('active');
 var _this = this;
  $('h3.clickme.active').each(function(){
               if($(this) != $(_this)){
                   $(this).removeClass('active');
               }
  });

 if(active != true) {
	 $(this).addClass('active');
 }
 else{
        $(this).removeClass('active');
 }
});

[agm]

Det kjappeste må vel være å fjerne .active fra alle .clickme, og så sette .active på det merkede elementet? Skal gi samme effekt, men enklere og kortere kode som forslaget over.

var el = $('h3.clickme');
el.click(function(){
el.removeClass('active');
$(this).addClass('active');
});​​​​​​​​​​​​​​​​

 

Edit:

Når det er sagt, må du virkelig bruke bilder for å oppnå denne effekten?

http://jsfiddle.net/5gJHR/

Endret 17. mai 2012 av agm

[knuhuf]

Nei, det blir h3.clickme.active

Det blir .active fordi . tilsvarer class sant, og i scriptet så gir vi den en ny class, active. Hvis du henger med?

 

Når det gjelder flashingen, prøv å gjør det om slik kanskje

$('h3.clickme').click(function(){
  var active = $(this).hasClass('active');
 var _this = this;
  $('h3.clickme.active').each(function(){
			if($(this) != $(_this)){
				$(this).removeClass('active');
			}
  });

 if(active != true) {
	 $(this).addClass('active');
 }
 else{
	 $(this).removeClass('active');
 }
});

 

Med h3.clickme.active skjedde det ingenting. Men når jeg bytta til h3.clickme:active så flashet den.

[knuhuf]

Det kjappeste må vel være å fjerne .active fra alle .clickme, og så sette .active på det merkede elementet? Skal gi samme effekt, men enklere og kortere kode som forslaget over.

var el = $('h3.clickme');
el.click(function(){
el.removeClass('active');
$(this).addClass('active');
});​​​​​​​​​​​​​​​​

 

Edit:

Når det er sagt, må du virkelig bruke bilder for å oppnå denne effekten?

http://jsfiddle.net/5gJHR/

 

Sliter med å få fram h3.clickme.active Virker :active fungerer, men det blir feil.

[knuhuf]

Det kjappeste må vel være å fjerne .active fra alle .clickme, og så sette .active på det merkede elementet? Skal gi samme effekt, men enklere og kortere kode som forslaget over.

var el = $('h3.clickme');
el.click(function(){
el.removeClass('active');
$(this).addClass('active');
});​​​​​​​​​​​​​​​​

 

Edit:

Når det er sagt, må du virkelig bruke bilder for å oppnå denne effekten?

http://jsfiddle.net/5gJHR/

 

Klarte å løse det selv nå

 

satt en ekstra }); på slutten av Javascriptet.

og satt

h3.clickme.active
{
border-bottom: 3px solid steelblue !important;
}

istaden for det andre, bare i tilfelle.

 

Faktisk bedre å gjøre det på din måte enn å bruke bilde, for nå justerer linja seg automatisk etter hvor langt ordet er.

 

Men merker at jeg trenger å studere javascript/jquery endel og lurte på om dere vet hvor jeg skal begynne? Har brukt "thenewboston" endel for tidligere leksjoner.

 

Takker alle for hjelpen og håper dere får en fortsatt fin 17. Mai feiring

 

EDIT!

 

Hvordan kan jeg få linja til å være synlig på "on page load"? på første "h3".?

Endret 17. mai 2012 av knuhuf

[molty]

Faktisk bedre å gjøre det på din måte enn å bruke bilde, for nå justerer linja seg automatisk etter hvor langt ordet er.

Formålet med den css koden jeg brukte var og at den skulle forlenge seg etter ordet, men så nå at jeg brukte background-repeat: no-repeat, men det skulle heller vært repeat-x;

 

Men er og bedre med css, raskere å laste inn