Webkafeen

[MikkelRev]

Jeg er både enig og uenig i Matsemannen. Idéellt sett burde ikke js være krav. Men uten å sjekke noen tall på det, er det vel i praksis ekstremt få som ikke har js aktivert. Facebook som er på topp 3 av mest brukte nettsteder fortiden, har du prøvd det uten js?

 

En mulighet er å bruke <noscript>-taggen i kombinasjon med en tekst og en link til http://www.enable-javascript.com/ som en liten fallback.

[Matsemann]

Ja, men at facebook gjør ting sugent betyr ikke at alle andre skal. Men ja, kan være vanskelig å unngå. Men for så simple ting som kommentarer og avstemming SKAL det virke uten JS. Man kan gjerne bruke AJAX for å gjøre ting smooth når det gjelder posting, men med JS deaktivert skal det være fallback til vanlig form-behandling.

 

Jeg kjører selv alltid med JS på, men enkelte websider er ubrukelige på annet media enn pc. Husker jeg var i utlandet og skulle akseptere noe på lånekassen/samordnaopptak i forbindelse med skoleplass. Menyen der brukte JS, så telefonen min klarte ikke åpne lenkene.

[AnaXyd]

Det er vel ikke mange som ikke har JS aktivert nå til dags? Ser på analysen av mine nettsider at de fleste har det aktivert.

 

Apropos analyser, så bruker jeg Piwik idag, og syntes denne er knallbra. Har ikke noe erfaring med Google Analytics, men hva mener dere er best? Og hvorfor?

[MikkelRev]

Apropos analyser, så bruker jeg Piwik idag, og syntes denne er knallbra. Har ikke noe erfaring med Google Analytics, men hva mener dere er best? Og hvorfor?

Spiller ingen rolle hvilken du bruker. Piwik er mer konfigurabel siden den ligger på din egen side. Google Analytics er enklere å sette opp siden alt ligger på en ekstern side.

[Matsemann]

Ikke vært borti Piwik på over et år, men kan man gjøre slik som dette i Piwik?

http://www.smashingmagazine.com/2011/05/18/optimizing-error-pages-creating-opportunities-out-of-mistakes/

Om du blar fort igjennom ser du hvordan man setter opp mye enkelt og greit med Google Analytics.

 

Ellers har jeg ikke prøvd ut begge så mye, så innspill er bra.

[Runar]

Takk for svarene angående JS!

 

En grei regel er jo å få alt til å virke optimalt før man begynner å blande inn JS. Så tror jeg satser på det.

[AnaXyd]

Har et lite spørsmål ang javascript som jeg har slitt med i hele dag, er sikkert bare noen syntakser jeg misforstår, så hadde satt pris på et hint fra dere om hva som kan være galt:

 

Jeg har laget en basic jQuery show and hide funksjon som skal funke for 4 wrapper-diver. Når man trykker på "kjøp" knappen, skal funksjonen sette igang. Kjøp knappen er en input.

 

<script type="text/javascript">
$(document).ready(function() {
 $('div.displayproduct > div .added').hide();  
 $('div.displayproduct > .text .sub .buybtn form input').click(function() {
   $(this).next().fadeIn('slow');
   setTimeout(function() {
     $('div.displayproduct > div .added').fadeOut('slow');
   }, 4000); // <-- time in milliseconds
 });
});
</script>

 

Hver div har denne strukturen:

       <div class="displayproduct 1"><!-- enkeltprod -->
         <div class="text">
           <div class="sub">
             <div class="buybtn"><?php //kode som henter en form med en knapp i ?></div>
             <div class="price">NOK 1000.00,-</div>
           </div>
           <div class="added">Produktet er <div>lagt</div> i din handlekurv. <a href="/butikk/kasse/">Klikk her for å gå
           til handlekurven!</a></div>
         </div>
       </div><!-- enkeltprod end-->

 

Jeg mener det skal være ganske korrekt slik som det ser ut nå, men det funker ikke. Jeg har sjekket at koden funker ellers, men det ser ut som den har restriksjoner på hvor mange diver jeg kan putte inn etter denne

$('div.displayproduct > 

?

[Vibeke S]

Jeg ville bare slengt på en class på input-knappen, f.eks "buy-now" (siden du allerede bruker buybtn som wrapper-klasse). Da kan du enkelt finne den med

 

$("div.displayproduct").find("input.buy-now").click(function() {
  //kode
});

 

Skjemaet blir ikke lastet inn dynamisk? Isåfall må du nemlig bruke .live() i stedet.

 

Med tanke på diskusjonen tidligere i tråden ville jeg kanskje lagt til beskjeden om at varen er lagt i handlekurv dynamisk. Hvis ikke vil en uten javascript på tro at alle varene er lagt til i handlekurven...

[AnaXyd]

Okay, jeg tror det er lastet inn dynamisk. Nå har jeg ikke superpeil på php og sånt, men denne inne i buybtn henter inn formen:

 

<div class="buybtn">
 <?php echo wpsc_add_to_cart_button(1); ?>
</div>

 

Er fra WP E-commerce, så antar at dette er dynamisk. .find() funket desverre ikke, så jeg har nå hivd meg over .live(). Sliter litt, og lurer litt på hva jeg skal gjøre nå.

 

 <div class="productsgrid">
       $(document).ready(function() {
		$('div.displayproduct > div .added').hide();  
		//$('div.displayproduct > div div').find("input.wpsc_buy_button").click(function() {
		$('input.wpsc_buy_button').live('click', function() {
			$(this).next().fadeIn('slow');
		});
	});
       </script>

 

Noen forslag på hvorfor det ikke funker?

[Bolson]

Aner ikke, men mulig koden jeg har brukt i et skjema der ulike valg skal komme fram avhengig av valg kan kanskje hjelpe.

 

jQuery().ready(function() {

 // validate signup form on keyup and submit
 jQuery("#signupForm").validate({
   rules: {
     newsletter: "required",
     topic: {
       required: "#newsletter:checked",
       minlength: 1,
       maxlength: 1
     }
   },
   messages: {
     newsletter: "Du må bekrefte at du har rett til å bestille"
   }
 });

 //code to hide topic selection, disable for demo
 var newsletter = jQuery("#newsletter");
 // newsletter topics are optional, hide at first
 var inital = newsletter.is(":checked");
 var marketflash = jQuery("#topic_marketflash");
 var inital2 = marketflash.is(":checked");
 var fuzz = jQuery("#topic_fuzz");
 var inital3 = fuzz.is(":checked");  
 var topics = jQuery("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray helptext");
 var topicInputs = topics.find("input").attr("disabled", !inital);
 var submits = jQuery("#submit_one")[inital2 ? "removeClass" : "addClass"]("submit-hide box-one");
 var submitInputs = submits.find("input").attr("disabled", !inital2);
 var submittwos = jQuery("#submit_two")[inital3 ? "removeClass" : "addClass"]("submit-hide box-two");
 var submittwoInputs = submittwos.find("input").attr("disabled", !inital3);
 // show when newsletter is checked
 newsletter.click(function() {
   topics[this.checked ? "removeClass" : "addClass"]("gray helptext");
   topicInputs.attr("disabled", !this.checked);
 });
 marketflash.click(function() {
   submits[this.checked ? "removeClass" : "addClass"]("submit-hide box-one");
   submitInputs.attr("disabled", !this.checked);
 });
 fuzz.click(function() {
   submittwos[this.checked ? "removeClass" : "addClass"]("submit-hide box-two");
   submittwoInputs.attr("disabled", !this.checked);
 });
});

 

Når bruker kommer på sida så har han en kort tekst og en avkrysningboks (bekreftelse), når han krysser av kommer to nye alternativer opp og når han krysser av for et av disse kommer sluttalternativet opp.

 

I og med at dette er en form så bruker jeg jquery.validate.js plugin. Dog er dette elementet i realiteten statisk, selv om det ligger i en publiseringsløsning.

Endret 27. mai 2011 av Bolson

[Kokobananas]

Jeg aner ikke om jeg er på rett sted nå (hvis ikke må dere gjerne vise meg hvor jeg bør spørre, bare ikke skyt meg:p), men jeg lurer på en ting ang det å importere en blogg fra en plattform til en annen.

 

Blogspot har feks en import-/eksportfunksjon som er rimelig enkel for sånne som meg som er litt blåst på sånt, og jeg vet at andre bloggplattformer også kan ordne dette.

 

Men på blogg.no finner jeg ingen slik funksjon, og da jeg henvendte meg til supporten deres fikk jeg til svar at de ikke hadde den funksjonen.

 

MEN, det må da være mulig å legge inn dette likevel på en eller annen måte, selv om blogg.no ikke har laget noen brukervennlig lettvint knapp man kan trykke på?

 

Jeg skal altså ha bloggen fra blogspot.com til blogg.no.

 

Håper noen kan hjelpe:)

[AnaXyd]

Takk for svar Bolson, skal se nærmere på den koden!

 

Siden jeg ble drittlei av at det ikke funket, så lagde jeg en alternativ løsning istedet, som dog funker. Den er litt tungvin, skulle gjerne hatt alt dynamisk, men det får gå enn så lenge:

 

function show1(){
 $('#ed1').fadeIn('slow');
 setTimeout(function() {
   $('#ed1').fadeOut('slow');
 }, 4000); 
}

 

Løsningen ble en onclick på buybtn diven. Denne løsningen avhenger av at jeg lager en funksjon for hver div, og en onclick på hver buybtn. Det er garantert mange muligheter å løse dette på mye enklere, men jeg er ikke heelt into loops og chains enda.

[Bolson]

@Anaxyd:

 

Er det du skal oppnå noe som følger. Du har f.eks fire stk varer med hver sin kjøpsknapp. Når du trykker på en av disse vil en av divene med mer informasjon etc f.eks åpnes, trykker du på en annen så lukkes den første og den andre åpnes.

 

Er det slik minner dette svært mye om hvordan accordion virker, så mulig du kan finne noe der.

 

Løsningen min bygger på at når koden på siden genereres får hver knapp og div unik identifikasjon, dog kan denne gjøres dynamisk.

[AnaXyd]

Det er nesten riktig! Det benyttes til å vise en div i en bestemt tidsperiode ved trykk på "kjøp" knappen. Dette følger selvsagt med som standard i WP e-commerce pluginen, men jeg henter ut produktene til en annen side enn selve butikksiden, og da må jeg ordne litt egne løsninger.

 

Jeg skal se på accordion, og se om det kan være noe å hente der. Jeg liker ikke å benytte dårlige løsninger på mine sider, så håper jeg klarer å finne noe som er et bedre alternativ enn det jeg endte opp med idag. Uansett merkelig at min første kode ikke funket, akkurat som det var en div som var feilskrevet eller lignende.

[FraXinuS]

Er ikke sikker på hva du prøver på, men er det noe slik som dette? http://jsbin.com/ikebe5/2

Endret 28. mai 2011 av FraXinuS

[AnaXyd]

Helt korrekt! Men det er flere like som skal funke uavhengig av hverandre, og da blir det vanskelig med den JS koden der.. Det er da .next() er med i bildet, (tror jeg). Og når jeg legger til .next() så ser det ut til at det skjer noe mystisk.

[FraXinuS]

Skal ikke være nødvendig med next osv.

Har oppdatert koden litt nå: http://jsbin.com/ikebe5/4

[AnaXyd]

Se der ja! Takk skal du ha, er et litt enklere alternativ enn det jeg endte opp med. Det er var som gjør det altså? Kan du forklare litt kort hvordan det funker, slik at jeg kan lære dette til neste gang?

[FraXinuS]

// Finn all .displayproduct divene og loop gjennom dem med each funcksjonen
$('.displayproduct').each(function(){

   // Lagre "this" i en lokal variabel til senere bruk.
   // "this" er en av .displayproduct div'ene som det loops over.
   // "var" brukes for å få en lokal variabel. Uten "var" vil variabelen
   // bli en global variabel som vil bli overskrevet for hver runde i loopen
   // og koden vil ikke fungere riktig.
   var _product = this;


   // Søk etter .buy-now inputen med "this" som ekstra argument til jquery funksjonen (context).
   // Det gjør at jquery bare søker i den gjeldene .displayproduct div'en.
   // Uten det andre argumentet vil jquery søke gjennom hele documentet, det gir ikke
   // riktig resultat.
   $('input.buy-now', this).click(function(){

       // Samme som over, søk etter .added i den gjeldene diven og fade den inn når knappen blir klikket.
       // _product kan brukes her selv om funksjonen som definerte _product
       // har returnert før vi kommer hit. Det er fordi javascript støtter closures.
       $('.added', _product).fadeIn('slow', function(){

           // "this" == .added div'en.
           var _added = this;

           setTimeout(function() {
               $(_added).fadeOut('slow');
           }, 2000);
       });
   });
});

 

Closures er egentlig nøkkelen til det hele. Det gjør at .displayproduct og .added divene blir husket til senere slik at du slipper å finne dem på nytt når knappen blir klikket.

[AnaXyd]

Okay, da skjønner jeg litt mer! Tusen takk, veldig greit med de kommentarene der. Da har jeg lært noe nytt idag også!