Gå til innhold

knuhuf

Medlemmer
  • Innlegg

    192
  • Ble med

  • Besøkte siden sist

Innlegg skrevet av knuhuf

  1. 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".?

  2. 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.

  3. 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.

  4. 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 :)

  5. 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 :p

     

    Men legg merke til bilde

     

    1K2Q0v.jpg

     

    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.

  6. 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;
    }
    

  7. Takk for alle svar, jeg fikk det til.

     

    Bra å høre at du fikk det til, men dersom du har mistanke om at det blir overført informasjon fra dataen din så bør du slå av internett tilgangen. Ganske åpenbart da, hehe. Dersom du skal hente programvare så ikke gjør det på internett fra PC'en som er infisert, men derimot bruk minnepenn og hent det fra en annen PC.

×
×
  • Opprett ny...