Utvecklaren - En blogg om design. webbutveckling och marknadsföring blogg Utvecklaren - En blogg om design. webbutveckling och marknadsföring blogg på grubblar.nu http://utvecklaren.grubblar.nu 2010-11-02 19:48:08 sv <![CDATA[Rundade hörn på bilder (jQuery/CSS3)]]> http://utvecklaren.grubblar.nu/index.asp?visa=3166 http://utvecklaren.grubblar.nu/index.asp?visa=3166 2010-11-02 19:48:08 Något jag själv saknar otroligt mycket i de nya supersköna specifikationerna för CSS3 är förmågan att göra rundade hörn på bilder.

 

Det är viktigt för mig att kunna runda av bilder i enlighet med boxar, men att ändå ha samma fallback för ex. IE eller äldre läsare om ifall att rundade hörn inte stöds. Då håller det alltså inte med bilder där de rundade hörnen är bitmappade då boxarna skulle få vanliga kantiga hörn och bilderna skulle bli utan.
Dessutom sparar man mycket tid i sin bildeditor om man direkt via kod kan runda hörnen.

Eftersom detta inte stöds av någon webbläsare överhuvudtaget så tänkte jag fortsätta min medverkan här på Utvecklaren med en plugin som gör just detta. Rundar hörnen på bilder alltså. På exempelsidan finns alla tillgängliga specifikationer/alternativ och för att se exempel på en live-tillämpning kan ni kolla på modig.tumblr.com.

 

Exempelsida

Javascriptfilen roundImg.js

Live-tillämpning

 

 

 

Eric JohanssonSkribent
Daniel Modig
 
www.icatserver.com/danielmodig
]]> <![CDATA[Lättare att börja med ASP.NET]]> http://utvecklaren.grubblar.nu/index.asp?visa=3135 http://utvecklaren.grubblar.nu/index.asp?visa=3135 2010-07-11 12:35:53 Inlägget är ursprungligen skrivet av Mikael Söderström på ASPSidan.


Sitter du fortfarande med klassisk ASP eller PHP? Tänkt gå över till .NET, men gett upp då det ser för krångligt ut?
Med ASP.NET Web Pages som kom ut den 6e Juli blir steget över till .NET helt klart enklare.

 

Det låter en fortfarande skriva inline-kod precis som med ASP, men gör det även möjligt att använda alla funktioner i .NET som mail, bildhantering, inbyggd inloggningsfunktionalitet, master pages osv.

Ett exempel på hur man skriver ut datum och tid:

ASP:
[code asp]<%=Now%>[/code]

ASP.NET Web Pages:
[code net]@DateTime.Now()[/code]

Det är inte alls mycket mer kod, och i vissa fall kan man spara mängder med kod om man går till ASP.NET Web Pages.

När man sedan känner att man behärskar de nya funktionerna i .NET så kan man enkelt gå över till till exempel ASP.NET MVC där exakt samma syntax kommer att kunna användas, men ger fördelen att man får bättre kontroll över sin kod, samt en bättre uppdelning.

 

 

Artiklar om ASP.NET Web Pages
Introduktion till ASP.NET Web Pages
Använd Cache i ASP.NET Web Pages
Visa serverinformation med ASP.NET Web Pages
Kör kod automatiskt i ASP.NET Web Pages
Ändra inställningar för webbsajten i WebMatrix:

Alla filer och program som behövs finns att ladda ned gratis här.

 

Inlägget är ursprungligen skrivet av Mikael Söderström på ASPSidan.

 

 

 

Eric JohanssonSkribent
Eric Johansson
 
www.ericj.se
]]> <![CDATA[.NET vs Java, hysteriskt bra]]> http://utvecklaren.grubblar.nu/index.asp?visa=3129 http://utvecklaren.grubblar.nu/index.asp?visa=3129 2010-07-01 12:39:01 Första youtubeklippet i denna blogg. Lovar att den inte ska bli en plats där jag länkar in roliga klipp, men detta passar in och är fantastiskt bra.

 

 

 

 

Eric JohanssonSkribent
Eric Johansson
 
www.ericj.se
]]> <![CDATA[Tekniker och språk på webben, vad är vad? ]]> http://utvecklaren.grubblar.nu/index.asp?visa=3128 http://utvecklaren.grubblar.nu/index.asp?visa=3128 2010-06-29 13:30:28 Klientspråk, serverspråk, HTML, CSS, JavaScript, jQuery, Flash, ActionScript, PHP, ASP, ASP.NET, MySQL och mycket mer därtill. För nybörjare är det oerhört svårt att veta vad som är vad och vad det används till.
Det känns lätt övermäktigt och man tror man måste kunna allting. Denna artikel finns här för att hjälpa er förstå vad de olika språken och teknikerna används till och när / om du behöver dom.


Klientspråk
Klientspråk är programmeringsspråk som körs i webbläsaren hos besökaren. Det är dessa språk som kan renderas olika beroende på vilken webbläsare besökaren har.

Serverspråk
Serverspråk är språk som körs på servern. Dessa är därför helt oberoende av vilken webbläsare besökaren har. De används ofta i samband med databaser för att hämta, spara, uppdatera och ta bort information från en hemsida enkelt. T ex medlemsregister, nyhetsarkiv, bildgallerier etc.

HTML
När det kommer till hemsidor är HTML den absoluta grunden. HTML behövs alltid till en hemsida.
Det är i HTML-koden erat innehåll (texter, länkar, menyer etc) ligger. Att kunna sin HTML är väldigt viktigt då det är den som är avgörande när det kommer till sökmotoroptimering och tillgänglighet.
Resultatet av din HTML-kod är det som sökmotorerna ser. HTML är ett s k klientspråk.
HTML står för HyperText Markup Language.


Kodexempel

[code]<body>
    <div id="container">
        <a href="#">Detta är en länk</a>
    </div>
</body>[/code]

Se en exempelsida med enbart HTML


CSS
Utseendet på din sida avgörs till stor del (om inte enbart) av CSS.
CSS-koden skrivs fördelaktigen i en egen fil som sedan länkas in i HTML filen. I din CSS fil skriver du kod som berättar för webbläsaren hur den ska påverka din HTML-kod utseendemässigt.
CSS är ett klientspråk och står för Cascading Style Sheet.
HTML och CSS bör vara det första du fokuserar på när du vill lära dig webbdesign / webbutveckling. Det är enkla språk att lära sig och väldigt nödvändiga att kunna.

Kodexempel
[code css]#container {
    width: 900px;
    background-color: #000;
    color: #fff;
    font-family: Georgia, Garamond, Times;
}[/code]

Se exempelsida med enbart HTML och CSS
Läs artikel om att koda komplett hemsida med HTML och CSS


JavaScript
För en tid sedan var JavaScript älskat av vissa men hatat av ännu fler. Det slog aldrig riktigt genom och Flash / ActionScript användes till mycket som egentligen kunde gjorts i JavaScript.
Men i och med de JavaScriptsbibliotek som dukit upp de senaste åren (Mootols, Prototype, jQuery m fl) har det fått en rejäl uppsving.
JavaScript kan användas till väldigt mycket saker. Det vanligaste är dock mindre detaljer på din hemsida, extrafunktioner kan man säga. Det kan vara att exempelvis visa och dölja innehåll utan att behöva ladda om sidan, att kunna växla bilder i ett galleri utan att behöva ladda om sidan och liknande saker.
JavaScript är ett klientspråk.

Kodexempel
[code js]function MinJsFunktion() {
    alert('Hej kära läsare');
}[/code]

Se exempelsida med JavaScript


jQuery
jQuery är idag troligtvis det mest populära och vanligaste javascriptbiblioteket.
Vad som är så smidigt med jQuery (och andra bibliotek) är att man behöver skriva otroligt mycket mindre kod tack vare alla "inbyggda" funktioner. Man behöver inte heller bry sig om webbläsare på samma sätt då jQuery själv sköter all specialhantering av koden. Utan dessa bibliotek behöver man hela tiden se till så koden fungerar i alla webbläsare och skriva flera olika varianter av den beroende på vad besökaren har.

Kodexempel
[code js]$("#container").slideUp();[/code]

Se exempelsida med jQuery


Flash
Man brukar säga att en hemsida är gjord i Flash, vilket kan vara sant. Men Flash är egentligen bara ett av många program man kan använda för att utveckla i. Koden man fokuserar på i Flash kallas ActionScript och kan skrivas i många andra program.
Fördel med just Flash är att det finns ett lätt gränssnitt med smidig tidslinje att jobba med så man kan skapa hyfsat avancerade animeringar och andra saker utan att behöva kunna programmera.
För att besökaren ska kunna spela upp flashfilen på din hemsida krävs att han/hon har Flash Player installerat på sin dator. Flash används mycket till video- och ljuduppspelning på webben. YouTube och Vimeo är två stora sajter vars spelare är flashbaserade.


ActionScript
ActionScript är det språk man programmerar flashfiler i. Det är ett väldigt brett och användbart språk som kan användas till otroligt mycket smidiga och häftiga saker.

Kodexempel
[code as]minKnapp.addEventListener(MouseEvent.CLICK,function():void {
    navigateToURL(new URLRequest(getClickTag()),"_blank");
});[/code]


PHP och ASP
De två troligtvis vanligaste serverspråken på webben där PHP antagligen har övertaget. Av dessa två skulle jag utan tvekan rekommendera PHP av den enkla anledning att ASP inte längre utvecklas. Microsoft slutade med det för ca 10 år sedan och gick då över till ASP.NET.
Språken påminner mycket om varandra i logik så kan man det ena förstår man det andra. Syntaxen skiljer sig däremot en del.
PHP har blivit väldigt populärt i o m att allt runtomkring är gratis. Det drivs fördelaktigen på en Linux-server och har hela tiden fått en open source-stämpel på allt som görs till det, därför finns massa godis att ladda ned på nätet redan.
Wordpress är ett av de största och mest populära publiceringsverktygen idag och det är PHP-baserat.

Kodexempel PHP
[code js]if(Something != Somethingelse) {
    echo "Something är inte samma som Somethingelse";
}[/code]

Kodexempel ASP
[code asp]If Something <> Somethingelse Then
    Response.Write("Something är inte samma som Somethingelse")
End If[/code]


ASP.NET
Microsofts efterträdare till ASP. Ska man vara noggran är inte .NET ett programmeringsspråk utan ett gigantiskt ramverk.
I det kan man bygga allt från applikationer till hemsidor. Använder man då programmet Visual Studio för att utveckla i så sitter man i vad jag vill påstå är den absolut skönaste miljön för webbutveckling.
När man utvecklar en hemsida i .NET kan man välja vilket språk man vill basera sin kod på - C# eller VB. C# påminner i syntax exempelvis om php och javascript medan VB är det språk ASP är baserat på.

Kodexempel på ASP.NET C#
[code net]for(int i = ; i <= 10; i++)
{
    //Gör något
}[/code]

Kodexempel på ASP.NET VB
[code net]For i = 0 To <= 10 Step 1
{
    //Gör något
}[/code]


MySQL
En av de absolut vanligaste databaserna på webben är MySQL. Den är gratis, fungerar fint ihop med de flesta (om inte alla) serverspråk och den är lättanvänd.
Databaser används för att lagra data - som artiklar t ex.



Summering
För dig som färsking men vill lära dig webbutveckling och webbdesign skulle jag personligen rekommendera dig att börja i denna ordningen.
1) HTML
2) CSS
3) JavaScript (med jQuery t ex)
4) Ett serverspråk och databashantering (PHP eller ASP.NET samt MySQL kanske?)
5) ActionScript


Om du inte har något intresse av serverspråk alls kan du hoppa över den biten. Men kunskap skadar aldrig!
Personligen går det i vågor för mig. Ibland vill man designa och koda klientspråk, ibland vill man gräva ner sig i lite serverspråk.

 

 

 

Eric JohanssonSkribent
Eric Johansson
 
www.ericj.se
]]> <![CDATA[Dynamisk längd på knapp med HTML och CSS]]> http://utvecklaren.grubblar.nu/index.asp?visa=3126 http://utvecklaren.grubblar.nu/index.asp?visa=3126 2010-06-22 20:30:29 I denna artikel tänkte jag förklara hur man kan göra en knapp / länk med dynamisk längd.
Detta är en ganska vanligt förekommande fråga på diverse forum.
Problemet uppstår när man vill ha en knapp med rundade hörn t ex men utan behöva spara varje knapp för sig.

Lösningen är väldigt enkel och det räcker med en enda bild, som man sparar ganska bred.
Man får använda sig av olika display-typer på länkarna och lägga en span inuti länken för att få ett element till med i leken.

För att kunna sätta padding, width, height och annat måste först och främst elementen vara block eller inline-block element.
När man väl gjort detta är det enkel logik. Sätt padding till vänster på din länk t ex och padding till höger på span inuti länken. På detta sätt kommer elementens bakgrundsbilder överlappa varandra men ge tillräckligt mycket utrymme för att avrundningen ska synas.

Har en känsla av att jag bara får det att låta klurigare än det är. Därför kommer här ett kodexempel och en exempelsida.
En sak till förresten. Genom att sätta line-height till samma som height centrerar vi texten vertikalt.

HTML
[code]<a href="#"><span>Här är min länk</span></a>[/code]

CSS
[code css]a {
    display: inline-block;
    padding-left: 15px;
    background: url("btn1.jpg") top left no-repeat;
    height: 50px;
    line-height: 50px;
}
           
a span {
    display: inline-block;
    padding-right: 15px;
    background: url("btn1.jpg") top right no-repeat;
    height: 50px;
    line-height: 50px;
}[/code]

Klicka här för att se exempelsida

 

PS. Detta går självklart att använda till annat än länkar. DS.

 

 

 

Eric JohanssonSkribent
Eric Johansson
 
www.ericj.se
]]> <![CDATA[Vilken väg ska vi gå]]> http://utvecklaren.grubblar.nu/index.asp?visa=3125 http://utvecklaren.grubblar.nu/index.asp?visa=3125 2010-06-22 16:49:36 Som ni säkert märkt har det blivit lite av en lucka sen förra inlägget.

Anledningen är helt enkelt att jag inte vetat riktigt vad jag ska skriva om plus att tiden har varit knapp.

 

Jag har funderingar på att göra om bloggen men vet inte exakt vilken väg jag ska gå med den. Ska man fortsätta i den skala det är idag? D v s uppbyggd som en vanlig hederlig blogg. Eller ska man satsa större? Ska man utöka till en mer omfattande blogg med olika sektioner och områden, kanske lite andra saker utöver bloggen med?

 

Ni får mer än gärna komma med konkreta tips på hur ni skulle vilja se bloggen utvecklas. Kom också gärna med förslag på artiklar ni skulle vilja se i den.

 

 

 

Eric JohanssonSkribent
Eric Johansson
 
www.ericj.se
]]> <![CDATA[Tips: Photoshop online! ]]> http://utvecklaren.grubblar.nu/index.asp?visa=3049 http://utvecklaren.grubblar.nu/index.asp?visa=3049 2010-04-22 17:32:03 Måste nämna denna tjänst. Det är Photoshop, fast online.

Tekniskt sett är det inte Photoshop visserligen men det är inte långt ifrån!

 

Tjänsten är byggd i flash så den kräver så klart flashspelare på din dator. I o m att den är byggd i flash är den också mycket snabbare och smidigare på PC än på MAC. Men funkar kanon på båda.

 

Klicka här för att komma till tjänsten.

 

 

 

Eric JohanssonSkribent
Eric Johansson
 
www.ericj.se
]]> <![CDATA[Kopiera andras hemsidor]]> http://utvecklaren.grubblar.nu/index.asp?visa=3028 http://utvecklaren.grubblar.nu/index.asp?visa=3028 2010-04-07 13:23:44 Ja nu har något hänt som inte hänt mig på några år vad jag vet om.

Någon har kopierat min privata portfolio rakt av och gjort "fulare".

 

Tyvärr är det ytterst lite man kan göra i ett sånt läge. Hotat med stämning självklart, men om personen bor i ett annat land blir allting genast mycket mer komplicerat och dyrt. Så vad gör man egentligen?

 

Min sida www.ericj.se

Hans sida www.veletdada.tv

 

(kopiera adressen, vill inte skapa länk till aset)

 

Har nu startat en facebookgrupp om detta. Gå gärna med.

]]> <![CDATA[HTML vs XHTML]]> http://utvecklaren.grubblar.nu/index.asp?visa=2946 http://utvecklaren.grubblar.nu/index.asp?visa=2946 2010-02-04 18:59:16 HTML 5 har ju anlänt och med det vissa nymodigheter som lockar folk till att byta, eller att stanna kvar i gamla vanor.

För ett tag sedan dök en tråd upp på Grafiskt Forum som handlade om huruvida man borde välja HTML istället för XHTML som de flesta idag använder.
Diskussionen i tråden blev snabbt en het sådan då åsikterna tycktes streta åt alla möjliga håll.

För att summera för er som inte har stenkoll på vad skillnaderna är mellan HTML och XHTML så kan jag berätta att HTML var det absolut vanligaste för ca 5 år sedan.
XHTML kom till för att införa regler till ett ganska löst språk och för att ändra sättet webbläsaren hanterade datan.
Man kan säga att det är en blandning mellan XML och dess strikta regler och HTML och dess olika element.

Med XHTML kom välkända regler som att alla element måste avslutas, alla attribut som sätts ska ha värden osv.

Exempelrader på godkänd XHTML:
[code]<br />
<select name="minselect">
    <option selected="selected" value="1">Ett exempel</option>
    <option value="2">Ett exempel</option>
</select>[/code]

Exempelrader på godkänd HTML:
[code]<br>
<select name="minselect">
    <option selected value="1">Ett exempel
    <option value=2>Ett exempel[/code]


Jag och många med mig är starka förespråkare av reglerna som kommer med XHTML.
Innan XHTML var webben ett virrvarr av dåligt kodade hemsidor, webbläsare som inte kunde tolka något rätt och folk som lärde ut saker på tusen olika sätt.
Med XHTML med i leken fanns helt plötsligt en helt ny standard med striktare regler. Detta ledde till att folk överlag lärde sig samma standard, webbläsarna kunde nu göra sitt jobb korrekt och allting flöt på mycket bättre.

Det kan tyckas smidigt att inte behöva avsluta alla tagar, att inte behöva tilldela värden till alla attribut, men det är ett farligt sätt att tänka enligt mig.
Om du inte i din kod berättar att "här ska detta börja" och "här ska det sluta", hur kan vi då förvänta oss ett språk som webbläsaren kan tolka rätt?

Vissa hävdar att det skulle spara kraft och bandbredd då dokumenten blir mindre men de tycks inte ta till hänsyn hur mycket mer arbete webbläsaren måste göra för att lista ut vad koden ska göra för att "komplettera" de taggar som fattas.
Om du inte avslutar en select-ruta, så måste ju webbläsaren själv kolla och jämföra, "Jaha, det kommer en div nu, den ska antagligen inte ligga inuti selecten, det måste betyda att selecten är slut nu". Inte speciellt avancerat för en webbläsare egentligen, men när det gäller alla element på en sida blir det helt plötsligt väldigt krävande och väldigt mycket mer som kan bli fel. Dessutom kommer renderingen med all säkerhet variera från webbläsare till webbläsare.

I HTML 5 kan man välja att koda enligt HTML's bristande regler eller behålla XHTML's regler. Jag ber dig, och jag ber till gud, att folk fortsätter med dessa regler.
Utan dessa regler är det helt okej att strunta i head-tagar, placera body var man vill och annat som jag tycker är trams.


Det största argumentet folk tycktes ta upp till varför XHTML var "värdelöst" var att de tyckte att hela tanken med XHTML fallerade i och med det faktum att XHTML faktiskt skickas som vanlig text/html till webbläsaren.
Något som jag inte förstår hur man ens kan bry sig om riktigt.

Det hela handlar i mina ögon om att vi vill ha ett språk med regler, med en strikt standard. Detta för att på ett klart och enkelt sätt närma oss en standardiserad webb. Hade det funnits en klar konsekvens i HTML från första början hade vi antagligen inte haft de problem som man nu dagligen får tampas med som webbdesigner, såsom olika renderingar, standardvärden och förutsättningar.

Detta är att jämföra med ex. programmeringsspråk på lite högre nivå.
Där är man oftast, för att inte säga uteslutande, låst till syntax och objekt. Detta gör att man som kodare inte har så många sätt att göra fel på, även om man fortfarande har möjlighet att skriva sin kod precis som man själv föredrar. Effekten är standardiserad kod, men med egna "signaturer".

Samma modell skulle lätt, och kan lätt, appliceras på HTML (återigen, det är här XHTML kommer in i bilden). Om det bara finns ett sätt att deklarera en lista på, då är det helt plötsligt mycket svårare att göra fel.

Eftersom HTML/XHTML inte kompileras krävs det att man som kodare validerar sin kod. Valideringen pekar ut de brister man som kodare gjort, men struntar blankt i hur det kommer att visas. Detta är att jämföra med en kompilering som enbart bryr sig om att objekt används som de ska och att syntax stämmer. Sen att funktionen i fråga gör sitt jobb är inte intressant, det är upp till kodaren att fixa.

CSS är ju den yttersta jämförelsen, det är antagligen det lättaste språket som finns att lära sig. Man är väldigt hårt styrd i sitt användande, men ändå lyckas man skapa så fantastiska saker med det. Och oavsett hur man väljer att skriva det så kommer det bara fungera om man skrivit på rätt sätt. Varför kan inte HTML fungera likadant?


Jag struntar egentligen i om det är XHTML, HTML eller något helt annat så länge alla följer samma standard i grund och botten och att denna har regler.

 

 

 

Vill ge ett stort tack till Daniel Modig med för sin input i frågan och hans tillägg till artikeln.

 

 

Eric JohanssonSkribent
Eric Johansson
 
www.ericj.se
]]> <![CDATA[Ett enkelt tooltip-plugin för jQuery]]> http://utvecklaren.grubblar.nu/index.asp?visa=2945 http://utvecklaren.grubblar.nu/index.asp?visa=2945 2010-02-04 14:56:15 Som premiär här på utvecklaren tänkte jag dela med mig av ett plugin för att skapa s.k. tooltips. Ett tooltip används ofta på webben i flera olika syften, bl.a. för att beskriva vad man vill ha i en input, bildtexter för en bild, navigations-hjälp o.s.v. Användningsområdena är många.


Naturligtvis finns det här byggt i en myriad av varianter, men alla åstadkommer i stort sett samma sak. Som relativt nybliven jQuery-entusiast ville jag dock skriva ett egen plugin som arbetar så unobtrusive som möjligt.

Detta scriptet bygger på ganska enkla parametrar för att styra position, element, höjd/bredd o.s.v. Det går även att använda sig av ett attribut som tooltip, istället för ett redan skapat element, naturligtvis i kombination med en CSS-klass.

Man anropar funktionen så här för ett element:
[code js]$("input.minInput").tooltip({
    tooltip: 'mittTooltip'
});[/code]

Eller såhär för ett attribut:
[code js]$("input.minInput").tooltip({
    attr: "title",
    parentID: "minInput"
});[/code]

 

 

Du kan se exempelsida här

Du kan se jquery.tooltip.js här

 

 

 

Eric JohanssonSkribent
Daniel Modig
 
www.icatserver.com/danielmodig
]]> <![CDATA[Kom igång med jQuery]]> http://utvecklaren.grubblar.nu/index.asp?visa=2833 http://utvecklaren.grubblar.nu/index.asp?visa=2833 2009-12-22 17:53:54 Denna artikel kommer ta en titt på de viktigaste sakerna man behöver förstå när man ska börja använda sig av jQuery.
För att förtydliga vad jQuery är så är det ett javascriptbibliotek. Det består av en javascriptfil man länkar in på sidan för att få tillgång till biblioteket och därmed kan skriva sin kod otroligt mycket snabbare.
jQuery tar automatiskt hand om alla kontroller av webbläsare och fixar till så din kod fungerar automagiskt! Bara det sparar massa tid.
En annan stor fördel med jQuery är alla färdiga funktioner, förkortade events och enkla sätt att selektera sina element med.

Kom igång
Länka in jQuery i din HTML-fil. Du kan antingen ladda ner det från www.jquery.com eller länka in direkt från Googles servrar.
Jag gör alltid det senaste av flera anledningar, men framförallt för att dina besökare har med största sannolikhet redan besökt någon annan sida på nätet med jQuery inlänkat från Google vilket leder till att filen finns i deras cache och de behöver inte ladda in filen igen. Något som snabbar upp!

 

Alltså kan inlänkningen av jQuery se ut så här:

[code]<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>[/code]

 

Din egna kod kan du antingen lägga i en egen javascriptfil och länka in precis som jQuery, eller skriva direkt i din HTML-fil. I vilket fall som helst behöver du använda script-tagar.

För att skriva javascriptkod direkt i HTML filen gör du som ovan, fast skippar "src" attributet och lägger din kod mellan starttag och sluttag av script.

 

Alltså:

[code]<script language="javascript" type="text/javascript">
    //Din kod här
</script>[/code]

 

För att försäkra dig om att alla element och annat laddats in innan din jQuerykod börjar försöka anropa dom bör du lägga in kod inom följande kodrader, som berättar att sidans kod har laddats in.
[code js]$(document).ready(function(){
    //Din kod
});[/code]

 

Börja koda, att välja element
Det första du behöver förstå är hur du väljer det element i din HTML-kod som du vill påverka.
Man kan selektera på precis samma sätt som man gör i CSS. Dvs med klasser, IDn, hierarki eller bara ange vilken typ av HTML-element det gäller.

För att välja alla divar på sidan tex skulle din kod börja så här:
[code js]$("div")[/code]

$ är en "förkortning" av ordet "jQuery". Alltså skulle det fungera lika bra med:
[code js]jQuery("div")[/code]

Av relativt självklara skäl väljer jag dock att skriva $ istället.

För att välja alla divar med klassen "Menu" skulle koden bli:
[code js]$("div.Menu")[/code]

För att välja samtliga element med klassen "Menu" skulle koden bli:
[code js]$(".Menu")[/code]

Vill du via hierarki komma åt alla länkar inuti en span, som ligger i en div med ID "Content" kan det bli så här:
[code js]$("div#Content span a")[/code]

Vill du bara att första länken enligt ovanstående exempel ska bli vald kan du göra så här:
[code js]$("div#Content span a:first")[/code]

Nu har du lite koll på hur man väljer sina element.


Fortsätt koda, att få något att hända
jQuery har en hel uppsjö events, funktioner och annat häftigt du kan använda dig av enkelt.

Du kan tex påverka ett elements CSS enkelt så här:
[code js]$("#Container").css("width","900px");[/code]

Om du t ex vill att ett element ska vara osynligt och sedan tonas in fint på sidan kan du använda dig av fadeIn().
Detta förutsätter dock att elementet ej är synligt innan fadeIn körs, annars händer ingenting.

Nedan kommer jag först dölja elementet via javascript och sen tona in det. På det sättet kommer elementet vara synligt för folk utan javascript med.
[code js]$("#Container").css("display","none");
$("#Container").fadeIn();[/code]

Du kan optimera koden genom att göra samma saker så här:
[code js]$("#Container").css("display","none").fadeIn();[/code]

fadeIn kan ta emot två argument. Det första är antalet millisekunder toningen ska ta. Vill du att det ska ta en sekund blir det alltså så här:
[code js]$("#Container").css("display","none").fadeIn(1000);[/code]

Det andra argumentet du kan skicka in är vad som ska hända när toningen är klar.
Låt oss säga att du vill tona in den, sen när det är klart vill du tona ut igen. Då kan du göra så här:
[code js]$("#Container").css("display","none").fadeIn(1000, function() { $(this).fadeOut(1000);});[/code]

Nu blev det rörigt! Varför inte bara skriva .fadeOut() efter .fadeIn()?
Vad som händer om du gör det är att jQuery försöker tona in och ut samtidigt. Du vill tona ut först efter det tonats in, då får du göra så där.
$(this) i koden väljer automatiskt det element som koden är "inuti".


Koda mer, olika events
En vanlig funktion som man använder javascript till är att dölja och visa element. Något som jag skrivit ett antal artiklar om redan i bloggen.
För att göra det behöver vi veta vilket event vi vill använda oss av.
När någon klickar på en länk tex så kan man komma åt det via "click" och sedan ange funktionen du vill ska hända.
Andra vanliga events är "hover", "focus" och t ex "blur".

Så om vi vill dölja en viss div när någon klickar på en länk skulle våran kod kunna se ut så här:
[code js]$("a#MyLink").click(function(){
    $("div#MyDiv").hide();
});[/code]

hide(); gör samma sak som att sätta display: none; via CSS. show(); är dess motsvarighet.


Hoppas artikeln har gett lite mer insikt till hur jQuery fungerar. Nu är det bara att börja testa, googla och kolla runt på jQuery.com. Där finns underbar dokumentation!

 

 

 

Eric JohanssonSkribent
Eric Johansson
 
www.ericj.se
]]> <![CDATA[Rensa input vid "focus"]]> http://utvecklaren.grubblar.nu/index.asp?visa=2832 http://utvecklaren.grubblar.nu/index.asp?visa=2832 2009-12-22 17:19:31 Detta är inget svårt att bygga eller att åstadkomma.

Många har gjort det någon gång. Det vanligaste verkar dock vara att lägga javascriptkod direkt på ens input i HTML-filen för de olika attributen "onfocus" och "onblur".

Det är ett väldigt fult och osmidigt sätt. Jag försöker alltid placera all min javascriptkod i fristående dokument och så gott som aldrig trigga javascript-events i min HTML fil.

 

För att underlätta för er och mig själv slängde jag till mitt senaste projekt ihop en funktion som man kan anropa för att automatiskt sätta denna funktionalitet på alla inputs man vill direkt, så slipper man kod för varje enskild input.

 

Som vanligt är detta baserat på jQuery. Önskas samma sak utan jQuery så går det att ordna, bara att ropa.

 

Man anropar funktionen så här

[code js]$("input").ClearInput();[/code]

 

Det kommer sätta denna funktionalitet på alla inputs på sidan.

Vill man bara göra det på vissa element går det utmärkt att selektera dom via klass, ID eller kanske ange allas namn.

Nedan är tre olika exempel på det.

[code js]$(".MinKlass").ClearInput();
$("#MittID").ClearInput();
$("input[name='username'], input[name='email']").ClearInput();[/code]

 

Här kan ni se en exempelsida

Här kan ni se javascriptet

 

 

 

Eric JohanssonSkribent
Eric Johansson
 
www.ericj.se
]]> <![CDATA[Multi DropDown-meny plugin]]> http://utvecklaren.grubblar.nu/index.asp?visa=2803 http://utvecklaren.grubblar.nu/index.asp?visa=2803 2009-12-09 15:13:51 Ännu en artikel om menyer och jQuery! När ska det sluta? Inte riktigt ännu.

Denna gången har jag gjort ett plugin som innehåller hela javascriptprocessen som behövs för en dropdown-meny plus att den fixar till nödvändiga bitar i CSS.

Detta gör att du kan lägga fokus på att bara designa din meny och slipper fundera på massa annat.

 

Jag har inte hunnit testa detta plugin speciellt mycket så om ni hittar några buggar får ni mer än gärna skriva det här.

 

Pluginet är väldigt enkelt att använda. Det förutsätter dock att du har en korrekt HTML-kod. En meny ska som jag tidigare nämnt flera gånger vara uppbyggd av listor och det kräver också detta plugin.

Dina undermenyer ska vara nästlade inuti li'n tillhörande det menyvalet. Menyn har inga begränsningar i antal steg.

 

Första steget på undermenyn öppnas rakt ner under huvudmenyvalet. Kommande steg efter detta öppnas samtliga åt sidan.

 

Exempel på HTML

[code]<ul id="menu">
    <li><a href="#">Start</a></li>
    <li>
        <a href="#">Nyheter</a>
        <ul>
            <li><a href="#">Senaste nyheterna</a></li>
            <li><a href="#">Nyhetsarkiv</a></li>
            <li><a href="#">Skribenter</a></li>
        </ul>
    </li>
    <li><a href="#">Kontakt</a></li>
</ul>[/code]

 

 

Pluginet är jQuerybaserat och kräver därför att du har länkat in jQuerybiblioteket på din sida.

Har du gjort detta är det väldigt enkelt att anropa funktionen, se till att göra det inom $().ready(function(){}); bara.

 

Att anropa funktionen

[code js]$("#menu").MultiDropDown();[/code]

 

Utökade inställningar

  • Transition: none / fade / slide. Som standard används "none".
  • TransitionSpeed: värde i millisekunder. Som standard 500, dvs en halv sekund.
  • ReactOn: hover / click. Som standard används "hover".
  • Direction: left / right. Som standard används "right".

 

Exempel på anrop med utökade inställningar

[code js]$("#menu").MultiDropDown({
    Transition: 'fade',
    TransitionSpeed: 200,
    ReactOn: 'click',
    Direction: 'right'
});[/code]

 

 

Exempelsida 1

Exempelsida 2 (förenklad CSS)

Javascriptfilen jquery.multimenu.1.min.js

 

 

 

Eric JohanssonSkribent
Eric Johansson
 
www.ericj.se
]]> <![CDATA[CSS, em kontra px?]]> http://utvecklaren.grubblar.nu/index.asp?visa=2801 http://utvecklaren.grubblar.nu/index.asp?visa=2801 2009-12-08 19:25:59 När ska man använda vad egentligen? Denna fråga kan vara en ganska het sådan så med lite tur kommer folk med motargument!

Mitt svar är: Använd alltid px, använd aldrig em.

 

För inte längesedan predikade alla om att man skulle använda em istället för px, men många hade troligtvis ingen aning om varför.

Jag själv rekommenderade också folk att använda em även om jag personligen var mycket mer bekväm med px.

Anledningen till att jag och så många med mig rekommenderade det var pga webbläsares förmåga, eller snarare oförmåga, att zooma. Sidor såg förjäkliga ut när man zoomade in och ut i webbläsarna och ställde till det för många designers när kunder sa "vi vill att det ska se snyggt ut när man zoomar med".

 

Just pga detta använde man em för att zoomen skulle fungera lite bättre, framförallt på texter. 

Till en följd av detta började folk att använda em till att sätta padding, margin och andra mått i CSS med.

 

Numera kan alla webbläsare zooma på ett snyggt och korrekt sätt utan att för den sakens skull förstöra hela layouten.

Förr så förstorades bara vissa delar av hemsidan upp, t ex texterna, men nu zoomas hela hemsidan in och ut precis som den ska.

 

Därför så bör man verkligen inte använda em längre!

 

En skärm är uppbyggd av pixlar och då är det inte mer än naturligt att man ska ange storlekar och mått i just pixlar.

Att använda em är lite som att försöka mäta meteravstånd med kilogram.

 

 

 

Eric JohanssonSkribent
Eric Johansson
 
www.ericj.se
]]> <![CDATA[Visa/Dölja & Maximera/Minimera divar. Utan jQuery.]]> http://utvecklaren.grubblar.nu/index.asp?visa=2782 http://utvecklaren.grubblar.nu/index.asp?visa=2782 2009-12-02 12:37:03 Jag har tidigare skrivit en artikel om hur man döljer och visar divar på diverse olika sätt.
Jag nämnde i den artikeln att om ni önskade kunde jag skriva en ny likadan fast utan jQuery utan bara "ren" javascript.
Nu har en önskning kommit in och här är den artikeln!

För enkelhetens skull har jag tagit texten från förra och ändrat funktionerna bara.
Jag vill poäntera att i dessa exempel finns inga häftiga effekter så som animationer, toningar och annat kul.
Det är helt enkelt inte motiverat att göra såpass avancerade saker utan jQuery då det skulle innebära massa kod och hemmabyggda plugins som ni ändå måste länka in. Då kan man lika gärna använda jQuery direkt.


Nedan är text från förra artikeln fast med nya funktioner:

Att växla mellan olika divar är något man ofta behöver göra.
Man kanske vill ha ett fliksystem till en meny t ex.Jag minns mina första försök till detta för många år sedan, innan jag kunde något javascript alls. Man googlade och hittade ofta de mest absurda lösningarna med massa, och totalt odynamisk, kod.

Det finns jättelätta sätt att göra detta!
Det hela är ju egentligen väldigt enkelt. Principen är helt enkelt att sätta display: none; på någon div och sätta display: block; på en annan. För att komma åt divarna använder jag dess IDn i mina exempel.

Jag har skrivit ihop lite olika kodexempel som kan ge lite inspiration till detta, eller användas rakt av.


1) Växla mellan samling divar
Om man exempelvis har just ett fliksystem till något finns det antagligen X antal olika menyval och divar som ska döljas och visas.
För att enkelt lösa detta ger vi varje div liknande IDn, dvs att de börjar på samma sak. Exempelvis hund1, hund2, hund3 som IDn.

Med denna logiken kan vi nu enkelt bygga en funktion dit man skickar in vad divarna som ska stängas ID börjar på och vad den som ska visas har för ID.

Sammanfattat, vi skickar in "hund" och "hund1" exempelvis, för att dölja alla divar som börjar på "hund" och sedan visa den vi vill visa, dvs "hund1".

Anropa funktionen exempelvis så här
[code]<a href="javascript:switchCollection('hund','hund1');">Visa första hunden</a>[/code]
Funktionen ser ut så här
[code js]function switchCollection(elColl,elShow) {
    var subLength = elColl.length;
    var divCollection = document.getElementsByTagName('div');
    var divSelected = document.getElementById(elShow);           
    for for (var i=0; i
        if(divCollection[i].id.substring(0,subLength) == elColl) { divCollection[i].style.display = "none"; }
    }           
    divSelected.style.display = "block";
}[/code]


2) Växla mellan två divar
Ibland har man bara två divar man vill växla mellan. Då kan ovanstående exempel vara överflödigt, plus att dessa två divars ID kanske inte har något med varandra att göra.
Då bygger vi en funktion dit man skickar in två IDn, det ena ska visas och det andra döljas. I mitt exmpel skickar vi in det som ska döljas först, följt av diven som ska visas.

Anropa funktionen exempelvis så här
[code]<a href="javascript:switchTwo('persern','skogskatt');">Visa första hunden</a>[/code]
Funktionen ser ut så här
[code js]function switchTwo(elClose,elShow) {
    var divOpen = document.getElementById(elShow);
    var divClose = document.getElementById(elClose);
    divClose.style.display = "none";
    divOpen.style.display = "block";
}[/code]


3) Maxmimera / minimera div
I denna kod kommer vi att ändra höjden på diven för att visa mer, eller mindre, information.

För att göra detta vill vi berätta för funktionen vilken div det är, vad maxhöjden ska vara (när den är öppnad) och vad minimumhöjden ska vara (när den är stängd).

Anropa funktionen exempelvis så här
[code]<a href="javascript:switchMaxMin('maxmin','200px','50px');">Öppna / Stäng</a>[/code]
Funktionen ser ut så här
[code js]function switchMaxMin(elCurr,elMax,elMin) {
    var setSize = '';
    var divSelected = document.getElementById(elCurr);
    if(divSelected.style.height == elMin) {
        setSize = elMax;
    } else {
        setSize = elMin;
    }
    divSelected.style.height = setSize;
}[/code]


Jag har byggt en exempelsida där jag använder samtliga dessa funktioner, titta och här fritt!

Du hittar exempelsidan här

PS. Jag vill påpeka att jag är fullt medveten om att vissa delar av koden går att optimera genom att skriva tex if-satserna annorlunda, skippa vissa variablar etc. Men jag vill skriva koden på ett lättläst sätt så man förstår vad varje kodrad gör, kom ihåg att denna bloggen finns i utbildningssyfte. DS.

 

 

 

Eric JohanssonSkribent
Eric Johansson
 
www.ericj.se
]]> <![CDATA[Hur man gör 3D text i Photoshop]]> http://utvecklaren.grubblar.nu/index.asp?visa=2742 http://utvecklaren.grubblar.nu/index.asp?visa=2742 2009-11-18 18:03:03 Eww. Jag dog lite inombords när jag skrev titeln till denna artikel.
Jag är en av dom som sällan förespråkare 3D effekter på hemsidor, gjorda i Photoshop.
Men jag vet att många vill kunna göra detta och det finns faktiskt användningsområden till det (precis som det säkert finns användningsområden till brinnande text, roterande dödskallar och andra häftiga gif-animeringar).

Denna guiden är inte så himla ingående på hur jag gör allt, iaf inte i bilder. Jag kommer berätta och visa resultatet allt eftersom.

Bilden vi kommer göra är den här (nästan iaf).

Bild 2809


Let's begin.
Det första du gör är att skapa ett Photoshopdokument och skriva din text. Kan du inte detta, är inte det här guiden för dig.
Jag valde att göra min häftiga 3D text i guld!

Bild 2808

Efter du är nöjd med din text tar du och rasteriserar den. Rasterisera kan mycket väl vara ett ord jag hittade på nu. Det engelska ordet är iaf Rasterize.
Består din text av flera lager som min (nämligen tre stycken), kan du bara markera alla samtidigt i lagerpaletten och slå samman dessa med Ctrl + E.
Ni som använder MAC och inte har någon Ctrl-knapp kan alltså inte göra denna guiden. Eller så använder ni Cmd-knappen.

Vet ni, för att göra detta så smidigt som möjligt för mig, så kommer jag ange alla kommandon för PC och på engelska. Ni som sitter på MAC vet bättre än mig vad ni ska göra. Ni som har svensk version av Photoshop kan säkert ha nytta av denna sidan.

Låt oss fortsätta.
Din text är nu rasteriserad. Markera lagret, tryck på Ctrl+T för att kunna omforma den fritt. Nu ska vi ge den det där häftiga perspektivet som min har.
Håll inne Ctrl och klicka i något av hörnen på rutan som bildas. Dra bilden tills ni tycker det ser lämpligt ut.

Min ser nu ut såhär.

Bild 2807


Gör en kopia av lagret, markera det nedersta av de två lagren du nu har och flytta det neråt och till höger. Om det är neråt och till höger du vill ha din 3D effekt dvs.
Fyll texten i nya lagret med en mörkare version av textfärgen.

Nu kommer pillandet.
Zooma in din text så du får bättre kontroll. Se till så du har Brush-verktyget valt med en hård pensel.
Foga samman punkterna i texterna för de olika lagrena. Se till så du ritar på understa lagret.

Bild 2806

Efter du gjort det så upprepar du bara det steget och fyller allt mellanrum med färg tills det blir så här på samtliga bokstäver.

Bild 2805

Ni som är lite vaksamma kan kanske se att mina exempelbilder helt plötsligt började se lite olika ut. Det beror på att mitt Photoshop precis krashade och jag orkade inte börja om med artikeln.
Nej, jag gillar PC, tänker inte byta till MAC! Vista är det bästa operativsystemet någonsin.


När ni nu gjort detta på alla bokstäver bör ni ha något som liknar detta.

Bild 2804


Det var det jag går genom i denna guide.
Vad jag har gjort i min färdiga bild är inga konstigheter. Jag har bara ritat dit lite skuggor och highlights samt blänk.
Jag vet att jag kommer få följdfrågor på hur jag gjort det så jag kan väl snabbt förklara.
Skuggor och highlights är helt enkelt ritade med en mjuk Brush-pensel.

Hur dumt är inte det egentligen, Brush-pensel? Men vad ska jag kalla det då, verktyget heter ju Brush och det är en pensel. Vill inte vara otydlig! Airbrush-pensel är ju ännu dummare namn.


Ni kan få se min underbara 3D bild en gång till bara för det.

Bild 2809


PS. Ni som använder Photoshop CS4 och precis gjort denna guide. Förlåt. Men Photoshop CS4 har inbyggt stöd för 3D. DS.

 

 

 

Eric JohanssonSkribent
Eric Johansson
 
www.ericj.se
]]> <![CDATA[Att göra en horisontell meny, korrekt!]]> http://utvecklaren.grubblar.nu/index.asp?visa=2739 http://utvecklaren.grubblar.nu/index.asp?visa=2739 2009-11-18 12:29:00 Jag stöter ofta på folk som behöver hjälp med att få till en bra horisontell meny som fungerar som den ska i alla webbläsare.

Därför tänkte jag skriva ner vad som behövs och vad du bör tänka på.

 

Först och främst ska en meny alltid vara uppbyggd av listor, inte divar, span eller annat.

En korrekt meny kan alltså HTML-mässigt se ut så här:

[code]<ul>
    <li><a href="#">Menyval 1</a></li>
    <li><a href="#">Menyval 2</a></li>
    <li><a href="#">Menyval 3</a></li>
</ul>[/code]

 

Det är alltså en fråga om att använda rätt HTML-element till rätt saker. Många använder istället divar eller span, något dom är men vana med. Men detta är fel!

Man kan få vilket HTML-element som helst att bete sig precis som man vill.

 

Det första "problemet" vi behöver adressera är det faktum att en ul-listas som standard har prickar framför sig. Det är lätt fixat med CSS.

[code css]ul {
    list-style-type: none;
}[/code]

 

Det vi behöver göra nu är att få dessa att ligga horisontellt. Det absolut snyggaste sättet att göra detta på är enligt mig att ändra display-typen av elementet. Många sätter float: left; på dom men jag försöker att undvika det så gott det går.

 

Om jag fick helt som jag ville skulle jag sätta display: inline-block; på li för att få dom att ligga efter varandra och också ge mig möjligheten att ändra padding, margin etc. Tyvärr tolkar Internet Explorer 7 och äldre det fel. De gillar inte när man gör så på en li och den horisontella effekten kommer försvinna.

 

 

Vad vi istället gör är att sätta display: inline. Då tappar vi dock förmågan att sätta padding på våran li men ofta räcker det att kunna sätta det på våran länk inuti li istället.

 

 

För att göra det möjligt att sätta padding på en länk behöver den göras om till display: inline-block alternativt display: block. Men återigen kommer IE7 och äldre och förstör för oss. Sätter man display: block; på en länk, inuti en li med display: inline; kommer de hamna på varsin rad. Därför blir det display: inline-block;.

 

 

Våran kompletta CSS kan alltså se ut så här.

[code css]ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

ul li {
    display: inline;
    margin: 0px;
    padding: 0px;
}

ul li a {
    display: inline-block;
    padding: 5px;
    background: #ccc;
}[/code]

 

Detta är en horisontell meny som fungerar utmärkt!

 

I vissa fall behöver man dock möjligheten att sätta padding på både li och a, då får man göra det jag inte gillar. Dvs att sätta float: left; på våran li och ändra till display: inline-block.

 

 

Som ett litet tillägg kan jag ju också nämna att en korrekt meny med undermenyer ska bestå av nästlade ul-listor. Undermenyerna ska alltså ligga i en egen ul-lista inuti li'n för huvudmenyvalet.

 

Exempelvis så här:

[code]<ul>
    <li><a href="#">Huvudmeny 1</a></li>
    <li>
        <a href="#">Huvudmeny 2</a>
        <ul>
            <li><a href="#">Undermeny 1</a></li>
            <li><a href="#">Undermeny 2</a></li>
            <li><a href="#">Undermeny 3</a></li>
            <li><a href="#">Undermeny 4</a></li>
        </ul>
    </li>
    <li><a href="#">Huvudmeny 3</a></li>
</ul>[/code]

 

För information om hur man bygger javascript som döljer och visar dessa undermenyer samt hur man kommer åt dom via CSS hänvisar jag till nedanstående artiklar.

 

Bygg menysystem enkelt med jQuery

Dropdownmeny utan Javascript

 

 

 

 

Eric JohanssonSkribent
Eric Johansson
 
www.ericj.se
]]> <![CDATA[Cufon - Ett alternativ till sIFR]]> http://utvecklaren.grubblar.nu/index.asp?visa=2732 http://utvecklaren.grubblar.nu/index.asp?visa=2732 2009-11-16 16:40:10 Som många vet kan man använda exempelvis sIFR för att byta ut vissa textdelar på sidan som man vill använda någon roligare font på än standardfonterna.

sIFR har blivit väldigt stort och är också väldigt bra, men ibland kan det vara lite bökigt att ställa in.


Jag har nyligen stött på Cufon som jag tycker är ett suveränt alternativ till sIFR. Det har sina fördelar och nackdelar precis som sIFR.

 

Största och enda direkta nackdelen med Cufon är att texten inte blir markeringsbar då scriptet istället för att göra en flashfil av texten gör det till en bild.

 

Men enligt mig vägs nackdelarna upp stort då Cufon är tusen gånger enklare att konfigurera och ger ett bättre resultat.

Nackdelar med sIFR är att det kräver flash, är bökigt att konfigurera och laddas ofta in lite för segt.

 

För att använda Cufon behöver man bara inkludera två JS-filer. En för själva Cufon och en unik för just den font du vill använda.

För att sedan initiera Cufon skriver man bara: [code js]Cufon.replace('h1');[/code]

I sIFR måste man inkludera flera js-filer, göra massa inställningar för sIFR i javascriptfilerna PLUS att man måste lägga in viss CSS för just sIFR och anpassa även den.

 

Med Cufon behöver man inte göra något sådant. Den hämtar effektivt ut dina vanliga CSS attribut och tillämpar dom.


Mer om Cufon

Mer om sIFR

 

 

 

Eric JohanssonSkribent
Eric Johansson
 
www.ericj.se
]]> <![CDATA[Parallax, vad är det?]]> http://utvecklaren.grubblar.nu/index.asp?visa=2662 http://utvecklaren.grubblar.nu/index.asp?visa=2662 2009-10-19 12:37:20 Här om dagen fick jag mail från en kille som driver sajten Productive Dreams.

Han hade skrivit en artikel om vad Parallax är och använt bland annat min sida, ericj.se, som exempel på detta.

 

Utöver att det var smickrande så var det faktiskt också lärorikt. Parallax är inget nytt fenomen men det verkar som att det nu finns ett namn för det. Det börjar bli ganska vanligt på ett eller annat sätt.

 

I hans artikel så har han listat en drös snygga sidor som använder detta, värt att ta en titt på!

 

 

Se artikeln här

Se ericj.se här

 

 

 

Eric JohanssonSkribent
Eric Johansson
 
www.ericj.se
]]> <![CDATA[Hindra text från att ärva opacitet i css, via javascript]]> http://utvecklaren.grubblar.nu/index.asp?visa=2621 http://utvecklaren.grubblar.nu/index.asp?visa=2621 2009-10-09 22:14:29 Detta är ett litet plugin vars tanke är att det ska fixa problemet man kan stöta på när man försöker skapa en div med sänkt opacitet.
Problemet i fråga är det att även elementen inuti denna div, så som text och bilder, får lägre opacitet.

Det kan hända att denna funktion är helt onödig, kanske finns något tokbra sätt att lösa detta på, isf upplys mig gärna!


Funktionen är som alla andra lätt att anropa. Har inte hunnit testa denna så jättenoga och det är mycket som kan gå snett.
Men känn er välkomna att använda den och eventuella buggar rapporteras gärna tillbaka hit.


Sättet många löser detta på är att skapa två divar som inte ligger i varandra och sätta dom i varsit lager. Det är just det som detta script gör.
Det klonar din div och skapar två divar. Det behåller bakgrunder och borders från ena diven och innehållet från den andra.
Det behåller därför klasser och IDn du kan ha på din div vilket underlättar när man kodar CSS'en. Ingen hierarki-css blir alltså påverkad.

Sen gör scriptet lite andra småsaker med, men det är inte så relevant.


Du kan välja att sätta din opacitet direkt i din css, tex så här:
[code css]#minDiv {
    opacity: 0.5;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    border: 10px solid #fff;
    background: url("bild.jpg");
}[/code]

Eller att strunta i det och ställa det när du anropar funktionen istället.
[code css]#minDiv {
    border: 10px solid #fff;
    background: url("bild.jpg");
}[/code]

För att anropa funktionen gör du så här:
[code js]$("#minDiv").OpacityFix();[/code]

Eller kanske:
[code js]$("#minDiv").OpacityFix(0.5);[/code]
0.5 i det exmplet blir alltså 50% opacitet.

Självklart måste du som vanligt inkludera jQuery och också jquery.opacity-fix.min.js.

Du kan se exempelsida här
Här kan du se samma sida utan mitt javascript
Och här kan du se jquery.opacity-fix.min.js

 

 

 

Eric JohanssonSkribent
Eric Johansson
 
www.ericj.se
]]> <![CDATA[Vad vill ni se här?]]> http://utvecklaren.grubblar.nu/index.asp?visa=2614 http://utvecklaren.grubblar.nu/index.asp?visa=2614 2009-10-09 10:45:25 Som en löjlig ursäkt för att få testa poll-funktionaliteten jag nyligen byggt in i bloggsystemet tänkte jag att jag kunde fråga er vad ni vill se mer av i bloggen.

 

[poll pid=6]

 

 

 

Eric JohanssonSkribent
Eric Johansson
 
www.ericj.se
]]> <![CDATA[Årets tips, bort med IE6]]> http://utvecklaren.grubblar.nu/index.asp?visa=2593 http://utvecklaren.grubblar.nu/index.asp?visa=2593 2009-10-06 22:40:15 Ett litet script jag inkluderar på alla sidor jag gör i stort sett.

Släng in det ni med! Vad det gör är att det skapar en status-bar i Internet Explorer när en besökare med IE6 besöker din sida och uppmanar denna till att uppgradera sin webbläsare för den saknar visst stöd som krävs.

 

Mycket bra sätt att få folk att uppgradera sin läsare på, ett diskret men fiffigt sätt. Så vi blir av med pesten.

 

Här kan du läsa mer

 

 

 

Eric JohanssonSkribent
Eric Johansson
 
www.ericj.se
]]> <![CDATA[Dropdownmeny utan Javascript]]> http://utvecklaren.grubblar.nu/index.asp?visa=2592 http://utvecklaren.grubblar.nu/index.asp?visa=2592 2009-10-06 22:01:49 Tänkte lite snabbt visa hur man kan skapa en dropdownmeny utan javascript. För det går faktiskt och det är väldigt enkelt.

 

Det hela bygger på att man känner av ":hover" på en länk och då t ex ändrar höjden som jag gjort i mitt exempel.

Som standard har min länk / li en fast höjd vilket döljer undermenyerna, när man sedan för musen över görs det om till height: auto;

 

Du kan se exempel här

 

Ett annat sätt att göra det på är att helt enkelt sätta display: none; på undermenyn och sedan visa den när huvudmenyns :hover triggas. Tex så här.

[code css]ul li ul {
    display: none;
}

ul li:hover ul {
    display: block;
}[/code]

 

 

 

Eric JohanssonSkribent
Eric Johansson
 
www.ericj.se
]]> <![CDATA[Designa dina egna select-listor]]> http://utvecklaren.grubblar.nu/index.asp?visa=2588 http://utvecklaren.grubblar.nu/index.asp?visa=2588 2009-10-05 09:50:59 Detta är ett javascript som tillåter dig att designa dina egna select-listor.

Javascriptet letar upp din select och tar bort den. Istället skapar den en vanlig input type="hidden" med samma namn, där värdet sätts så det kan skickas som vanlig formulärdata.
Sedan skapar den upp en ny lista med HTML-koden du kan se här nedanför. Den är det bara att styla fritt som du vill.

 

 

Så här gör du

Inkludera bara jQuery och NewSelect.js i din fil och anropa med exempelvis

[code js]$("select").NewSelect();[/code]

 

Egna val och inställningar
Du kan skicka in två värden till funktionen. Det ena är om du vill att diven som skapas ska få ett annat klassnamn än "nSelect".
Detta är väldigt användbart om man vill ha olika utséenden på select-rutor på sin sida.

Det andra värdet är top marginalen för Internet Explorer 5, 6 och 7.
I dessa webbläsare hamnar dina "options" ovanpå din "select". Detta kan man ställa in här genom att ange hur många pixlar marginal det ska vara uppåt. Ett passande värde här är samma som höjden på din första span.
Detta kan man lösa via sin CSS med, men jag valde att lägga in det som en inställning också.

Exempel:
[code js]$("#select1").NewSelect({ ClassName: 'nSelect', IEtop: '39px' });
$("#select2").NewSelect({ ClassName: 'annanSelect'});[/code]

 

 

Koden som genereras:

[code]<div class="nSelect">
    <span>Aktuellt värde</span>
    <ul>
        <li><span>Ett val här</span></li>
        <li><span>Ett annat val här<span></li>
        <li><span>Ett tredje val här</span></li>
        <li><span>Osv osv</span></li>
    </ul>
</div>[/code]

 

 

Du kan se exempelsida här

Du kan se NewSelect.js här

 

 

 

Eric JohanssonSkribent
Eric Johansson
 
www.ericj.se
]]> <![CDATA[Skriva ut "Lösenord" i password-inputs]]> http://utvecklaren.grubblar.nu/index.asp?visa=2354 http://utvecklaren.grubblar.nu/index.asp?visa=2354 2009-07-10 16:12:07 Jag vet många gånger att jag viljat ha en lösenordsruta på min hemsida, tex för inloggning, där det står "Lösenord" som standard innan man börjat fylla i något.


Detta har blivit aningen problematiskt då det bara blir stjärnor i en lösenordsruta.

Min första tanke för att lösa detta var att helt enkelt bygga ett javascript som byter type="password" till type="text" tills man börjar skriva i den. Men här stötte jag på problem då IE inte tillåter detta.


Nu har jag gjort en lösning via javascript.

 

 

Hur fungerar det?

HTML mässigt gör du inga konstigheter. Du skapar din input helt som vanligt, en vanlig password-input helt enkelt.

[code]<input type="password" name="myPwd" />[/code]

Har besökaren javascript inaktiverat blir det därför inga konstigheter utan allt är som "vanligt".

 

 

Javascriptet som du anropar när sidan laddas, letar då upp önskade inputs och tar bort dessa och ersätter dom med vanliga inputs med type="text", samt sätter ditt önskade ord som value i dom.

När besökaren sedan börjar skriva, tas det bort igen och tillbaka kommer en type="password".

 

När du inkluderat jquery-PasswordInput.js på din sida anropar det hela väldigt enkelt.

 

Gör du tex så här, så byts alla password-fält ut till dessa nya.

[code js]$("input[type='password']").PasswordInput();[/code]

 

Vill du bara byta ut en speciell kan du ge den ett ID och istället anropa så här tex

[code js]$("#dittID").PasswordInput();[/code]

 

 

Valfri info som du kan skicka in i funktionen är det som ska stå i value. Anger du ingenting står det som standard "Lösenord". För att bestämma eget gör du tex så här:

[code js]$("#dittID").PasswordInput({ defaultValue: 'Enter your password' });[/code]

 

 

Du kan se exempel här

Du kan se jquery-PasswordInput här

 

 

 

Eric JohanssonSkribent
Eric Johansson
 
www.ericj.se
]]> <![CDATA[Centrera hemsida (div) vertikalt]]> http://utvecklaren.grubblar.nu/index.asp?visa=2071 http://utvecklaren.grubblar.nu/index.asp?visa=2071 2009-03-10 18:42:18 En lösning på det oändligt återkommande problemet med att centrera en hemsida vertikalt.

Lösningen använder javascript (jQuery) och fungerar därför endast om besökaren har javascript aktiverat, vilket de flesta har.

 

 

Jag har dock valt att skapa en marginal från toppen av webbläsaren på 50px (detta via vanlig CSS på diven) om besökaren inte skulle ha javascript aktiverat. På så vis blir sidan inte centrerad vertikalt, men den ligger iaf inte kant i kant med webbläsaren.

 

Javascriptet tar sedan bort dessa 50px och centrerar sidan istället.

 

 

Hur fungerar javascriptet?

  1. Det kollar av höjden på diven "containercenter". Diven kan därför ha dynamisk höjd!
  2. Det kollar av höjden på webbläsaren.
  3. Om höjden på webbläsaren är högre än höjden på diven så räknar den ut hur mycket margin-top diven ska ha för att bli centrerad.
  4. Ändrar man storlek på fönstret räknar scriptet om storleken och omplacerar diven.

 

 

Förutsättningar för att scriptet ska fungera.

  1. Diven som omsluter sidan ska ha IDt "containercenter". Annars får du ändra namnet i översta raden i javascriptfilen.
  2. Du måste inkludera jquery.utvecklaren.centerdiv-1.js filen.
  3. Du måste inkludera jQuery. Hur gör man detta?

 

 

 

Du kan se exempel här

Du kan se jquery.utvecklaren.centerdiv-1.js här

 

 

 

Eric JohanssonSkribent
Eric Johansson
 
www.ericj.se
]]> <![CDATA[Designa blanka knappar & ikoner]]> http://utvecklaren.grubblar.nu/index.asp?visa=2068 http://utvecklaren.grubblar.nu/index.asp?visa=2068 2009-03-10 11:03:53 Det finns lika många sätt att göra en en blank knapp / ikon som det finns Photoshoputövare, nästan.

Jag har dock sett många oerhört taskiga artiklar om just detta och tänkte därför göra en om hur jag gör mina skinande knappar.


Knappen jag ska göra i denna artikel är denna

Bild 2043

 

Det första jag gör är att öppna Photoshop, skapa ny fil i dimensionerna 250x250px.

Skapa sedan ett nytt lager och rita en cirkel, fyll den med vilken färg du vill, vi kommer ändra denna ändå.

Bild 2044

Nu kommer jag använda mig av lagereffekter! Det är just till sånna här saker jag tycker de kommer väl till pass, det ger en möjlighet att enkelt gå in och ändra alla toningar, skuggor och färger efteråt om man inser att ens färg är fel.

Lagereffekterna kommer du åt genom att dubbelklicka på lagret i lagerpaletten.

Det första jag gör är att göra toningen. Klicka på "Gradient Overlay".
Nederst vill jag ha en mörkare färg en upptill. Jag har gett min färgen #006cff nederst och #3cd3ff överst.

Bild 2045

Sedan vill jag ha lite skugga runt den och en vit linje.
Detta gör jag genom att först gå till "Stroke". Välj vit färg och "Size" på "2px".
Härnäst går vi till "Outer glow". Värdena här får du anpassa lite efter eget behov, men i artikeln använder jag svart färg, "Blend Mode" sätter jag till "Normal", "Opacity" till "30%" och "Size" på "10px".

Bild 2046

För att ge bilden lite mer djup lägger jag även en skugga på knappen. Klicka på "Drop Shadow".
Mina värden här blir "Size" på "10px" och "Opacity" på "30%", resten låter jag vara som de är.


Nu borde bilden se ut så här

Bild 2047


Nästa steg blir att göra den andra mörkare cirkeln inuti knappen.
Jag gör den genom att helt enkelt rita upp ännu en cirkel, fast mindre, på ett nytt lager.
Använd aldrig "Select > Modify > Contract" för att göra mindre cirklar, de blir inte runda! Detsamma gäller "Expand".

Så när jag ritat upp min nya cirkel på ett eget lager borde det hela se ut ungefär så här

Bild 2048

Nu ska jag in i lagereffekterna även på detta lager.
Det första jag ändrar är färgen. Jag går till "Color Overlay" och väljer en mörkare, mustigare, färg av blått. T ex #004366.

Sedan går jag på "Inner shadow" och behåller alla värden förutom "Opacity", som jag sätter till "40%".

Härnäst vill jag ha en liten "Outer glow" på den. Jag väljer vit färg, ca "10px" på "Size" och "30%" på opacity.


Resultatet borde bli något i stil med

Bild 2049

Nu ska jag skapa ett nytt lager i samma storlek som det understa.
Gör en markering av cirkeln i understa lagret genom att hålla inne ctrl samtidigt som man klickar miniatyren av lagret i lagerpaletten.

Jag skapar ett nytt lager över de andra och fyller det.
Nu kommer jag använda en lagermask för att göra en transparent toning i lagret.

En lagermask lägger man till genom att se till så aktuellt lager är markerat, sedan klickar man på Bild 2050 underst i lagerpaletten.

Nu vill jag att den ska gå från 100% opacitet underst till 0% opacitet ungefär i mitten av knappen.
Jag använder Gradient Tool till detta och ser till så färgerna i min gradient går från svart till vit.

Sedan markerar jag lagermasken och drar ett streck för att fylla från mitten av cirkeln till bottenkanten.

Om lagret är fyllt med svart borde resultatet nu vara detta

Bild 2051

Nu dubbelklickar jag på lagret igen för att få fram lagerpaletten och väljer färgen #35cdff på "Color Overlay".
Jag skulle kunna satt denna färgen direkt utan att använda lagereffekter, men jag gillar att jobba med de i såda här fall, då vet jag var jag har alla färger ifall jag vill ändra.


Bilden bör nu se ut så här

Bild 2052


Nu ska vi skapa pilen. I artikeln har jag använt en av de färdiga pilar som finns i Photoshop och ändrat den lite.
I verktygspaletten klickar man på "Custom Shape Tool" och kan då välja den pilen.

Sedan ritar jag bara upp den med vit färg i min knapp (Photoshop kommmer automatiskt skapa ett nytt lager för den).
Jag håller shift nertryckt för att behålla rätt proportioner på pilen.

Bild 2053

Nu är pilen vektoriserad, detta vill jag ta bort för att kapa den lite. Jag högerklickar på lagret och väljer "Rasterize Layer".

Bild 2054

Nu kan jag kapa pilen lite så den blir som nedan.

Bild 2055

Nu ska jag in i lagerpaletten även för pilen!
Jag väljer där "Inner Shadow" och sätter värdena till "30%" i "Opacity" och "2px" på både "Distance" och "Size".

Nu flyttar jag lagret pilen ligger i så det ligger under lagret med lagermasken.

Bild 2056

Nästan klart! Dags för den blanka ytan nu.
Jag skapar ett nytt lager överst och gör en oval markering som jag fyller med vit färg.

Bild 2057

Minska opaciteten till 30% på det lagret.

Nu skapar jag ännu ett lager över detta och gör en vit cirkel enligt följande

Bild 2058

Sedan går jag till "Filter > Gaussian blur" och en "Radius" på ca "6px".

Bild 2059


Nu är knappen färdig!

 

 

 

Eric JohanssonSkribent
Eric Johansson
 
www.ericj.se
]]> <![CDATA[Retuschera med Dodge & Burn-tekniken]]> http://utvecklaren.grubblar.nu/index.asp?visa=2059 http://utvecklaren.grubblar.nu/index.asp?visa=2059 2009-03-09 23:20:45 I denna artikel ska vi gå igenom  hudretuschering på det sätt som proffsen gör.

När jag säger ”det sätt som proffsen gör” så menar jag inte någon form av utsmetning som de skräckexempel man kan finna på många svenska magasinomslag. Det vi ska göra är en hudretusch som behåller alla porer och texturer som du vill ha kvar för ett naturligt resultat. En hudretuschering som snarare hör hemma på omslaget till ett dyrt modemagasin som Vogue.


Tekniken kallas Dodge & Burn och går ut på att man manuellt ljusar upp de skuggor som finns i huden och tonar ner de högdagrar som sticker ut.

Tekniken är väldigt tidskrävande men efter lite övning så kommer man snart få upp tempot avsevärt, och resultatet? Helt klart värt det!

 

 

Denna artikel riktar sig inte till dig som är nybörjare, utan till den lite mer erfarne photoshopparen, då tekniken är ganska avancerad. Jag har däremot försökt beskriva alla steg så enkelt som möjligt men viss photoshop-vana kommer du som läsare ändå behöva.

När det gäller retusch så finns det egentligen inga ”rätt och fel”., så därför är de tekniker och verktygsinställningar jag använder i artikeln inte absoluta. I slutändan handlar det egentligen bara om konstlärlig frihet, så läs artikel och börja sedan öva och finputsa ditt eget arbetsflöde och din egen teknik.

 

 

Det finns några olika sätt att rent teknisk genomföra Dodge & Burn så jag har valt att visa det sätt som jag brukar jobba på. Det är inte det snabbaste men antagligen det mest flexibla sättet.

 

Öppna först din bild och skapa en ny mapp (layer> new> group) som du döper till Retusch. Vi lägger alla justeringar vi gör i en separat mapp för att enkelt kunna slå på/av effekten för att se före/efter.

 

För att förenkla och snabba på tekniken lite så kommer vi först att skapa ett nytt lager (layer> new> layer) som vi döper till Heal. Detta lager kommer vi använda för att laga större problem som eventuell acne, ärr eller liknande (även den typen av retusch går att göra med endast Dodge & Burn men kräver då lite extra övning och arbete).

 

Skapa sedan ett nytt justeringslager för kurvor (layer> new adjustment layer> curves)  som du döper till Dodge. Gör en drastisk uppljusning av bilden.

 

Bild 2019

Invertera lagermasken (image> adjustments> invert).

 

Återupprepa föregående steg för att skapa ännu ett justeringslager för kurvor och döp det till Burn, men mörka istället ned bilden denna gång.

 

Bild 2020

Invertera lagermasken.

 

Nu har vi egentligen alla lager vi behöver. Ett för att laga större problem som acne, ett för att ljusa upp skuggor och ett för att mörka ner ljusa områden.

Trotts att jag precis sa att vi har allt vi behöver så ska vi ändå lägga till några lager till. Dessa kommer hjälpa oss se vilka områden i bilden som vi måste justera.

 

Klicka på mappen Retusch för att markera mappen i lagerpanelen. Skapa nu ännu en ny mapp (layer> new> group) ovanför Retusch och döp den till Tools.

Skapa ett nytt lager (layer> new> layer) som du döper till Desaturate. Fyll detta lager med svart färg (edit> fill> välj svart färg) och ändra sedan lagrets blandningsläge till Color

 

Bild 2021

Gör en kopia av detta lager (layer> duplicate layer) och döp det till Contrast.

Blandningsläget på lagret Contrast ändrar du nu från Color till Overlay.

 

Bild 2022

Släck hela den här mappen genom att klicka på ögat till vänster om mappen i lagerpaletten.

 

Nu är det dags att börja själva retuscherandet.

Zooma in till minst 100% (eller ännu längre om du har en högupplöst bild).

Klicka på lagret Heal i lagerpaletten för att aktivera det och välj sedan Healing brush tool.

 

Bild 2023

Håll ned alt på tangentbordet (penseln förvandlas till ett sikte) och ta ett avtryck nära det du vill ta bort och måla sedan bort det.

Gå över hela bilden och avlägsna större problem som finnar, ärr, hårstrån som hamnat på fel ställen etc.

 

Nu när vi rensat upp bilden kan vi påbörja själva Dodge & Burn-arbetet.

Slå på mappen Tools igen och du har nu en svart-vit bild med väldigt hög kontrast (om kontrasten är för hög så kan du ändra blandningsläget på lagret Contrast till Soft Light).

 

Klicka på lagret Dodge för att aktivera det, välj en liten mjuk pensel med vit färg, sätt penselns opacitet till 10% och flödet till 20%.

 

Bild 2024

Börja nu att långsamt måla fram ljus i bilden. Målet är att jämna ut ljusskillnader i huden. Vi eftersträvar alltså en så jämn och fin gråskalebild som möjligt.

 

Växla blandningsläget på Contrast-lagret mellan Overlay, Soft Light och Color för att få olika nivåer av kontrast och jämna ut skillnader genom att måla på antingen Dodge-lagret eller Burn-lagret.

 

Bild 2025

 

Bild 2026

På vissa bilder kan man få problem med färgskiftningar när man ljusar upp bilden. Om du råkar ut för detta kan du först prova att ändra lagrets (Dodge-lagret) blandningsläge till Luminosity. Om det inte hjälper kan du testa att skapa ännu ett nytt lager, sätta blandningsläget till Color och manuellt måla på en ny hudfärg med en mjuk pensel.

 

När vi blivit klara med hud-retuschen så kan bilden ibland kännas lite platt.

 

Bild 2027

 

Bild 2028

Detta åtgärdar vi genom ännu lite mer Dodge & Burn, men denna gång kommer vi använda en större pensel för att skapa lite mer 3D-känsla.

 

Skapa en ny mapp överst i mappen Retusch och döp den till Shape.

Skapa två nya justeringslager för kurvor och döp dem till Dodge respektive Burn  och invertera lagermasken (samma procedur som tidigare alltså).

 

Bild 2029

Tänk på följande sätt: Ljust = Närmare, Mörk = Längre bort.

Måla mörk runt konturerna av ansiktet, på sidan av näsan, runt kroppen och på de ställen du vill få en känsla av att det finns ett djup i bilden.

 

Måla ljust på näsryggen, i pannan, på hakspetsen, ovanpå kindbenen och de ställen du vill ska vara närmare kameran.

 

Bilderna nedan demonstrerar hur det kan se ut om man lägger ett jämngrått lager under kurvlagren i Shape-mappen. Den första är Dodge-lagret och den andra Burn-lagret.

 

Bild 2030

 

Bild 2031

Nu är det bara att börja öva, öva och öva.

 

Bild 2032

 

Slutgiltig retusch ca 4 timmar.­

 

Klicka här för slutgiltig bild i full storlek.

 

 

Foto: David Gustavsson

 

 

 

David GustavssonSkribent
David Gustavsson
 
www.davidsportfolio.se
]]> <![CDATA[Rita med ritbord tips]]> http://utvecklaren.grubblar.nu/index.asp?visa=2027 http://utvecklaren.grubblar.nu/index.asp?visa=2027 2009-03-05 22:24:07 Om du som jag älskar att rita, så har du säkert också testat att rita med ritbord på datorn.

Jag har väldigt svårt för detta. Dels för mitt ritbord är för litet, så det blir alldeles för känsligt vid små rörelser, men också för jag inte är van vid att rita med dom plastiga ytorna.

Jag vill ha en blyerts mot ett papper!


Alla försök jag gjorde till att dra hyffsade linjer i Photoshop var förgäves. Hur löser man då detta?

 

Mitt tips är; illustrator.

Att rita med Paintbrush tool i illustrator ger automatiskt mycket renare linjer, vilket är till stor hjälp för mig!

Därför ritar jag numera alltid linjerna där, sedan färglägger jag oftast i Photoshop.

 

 

Så här hemsk kan en linje vara i Photoshop

Bild 1992

 

 

 

Så här fin blir den i illustrator

Bild 1993

 

 

Ingen revolutionerande artikel och något jag borde kunnat räkna ut betydligt snabbare, men jag har faktiskt aldrig använt Painbrush tool i illustrator, jobbar alltid med texter och Pen tool där.

 

 

Nedan är en bild som tog ca 10min att rita upp i illustrator och kanske 20min att färglägga i Photoshop.

 

Bild 1994

 

 

 

Eric JohanssonSkribent
Eric Johansson
 
www.ericj.se
]]> <![CDATA[jQuerygalleri med AJAX och XML]]> http://utvecklaren.grubblar.nu/index.asp?visa=2009 http://utvecklaren.grubblar.nu/index.asp?visa=2009 2009-03-04 15:07:07 För ett tag sedan skrev jag en artikel där jag skapade ett enkelt galleri som är utmärkt när man vill visa upp några få bilder på ett superenkelt och smidigt sätt på sin sida.


Nu kommer version två av denna och den är anpassad för större gallerier.

Den hämtar bilder och kategorier med AJAX från ett XML-ark.

 

Koden utåt för besökaren är knappt befintlig även i detta galleri, den ser ut så här:

[code]<div id="imgcontainer"></div>
<div id="imgdescription"></div>   
<div id="imgnums"></div>
<div id="btnprev">«</div><div id="btnnext">»</div><div class="clear"></div>
<ul id="categories"></ul>[/code]

 

Innehållet läggs sedan dit med automatiskt med javascriptet.

 

 

Det som behöver göras för att använda galleriet är

  1. Ange två startvärden tidigt i dokumentet. Det enda är sökväg till xml-arket det andra är vilken kategori som ska visas först, innan besökaren ändrat kategori.
  2. Inkludera javascriptfilen.
  3. Lägg in HTML bitarna.
  4. Se till att XML arket finns tillgängligt med dina bilder och kategorier. Vill du bara ha en kategori så skapa bara en i XML-arket och sätt helt enkelt display: none; på ul-listan "categories".

 

Sedan kan du anpassa CSS helt fritt.Du kan självklart flytta divarna så dom ligger var du vill på sidan om du tex vill ha knapparna för Föregående och Nästa bredvid, eller kanske över bilderna.

 

Ta en titt på liveexemplet nedan för att se hur de första två startvärdena skrivs in. Notera att dessa ska ligga INNAN javascriptfilen inkluderas.

 

 

Klicka här för att se liveexempel

Klicka här för att se XML-arket

Klicka här för att se jquery.utvecklaren.galleri-ajax-xml.js

Klicka här för att ladda ned alla filer

 

 

 

Eric JohanssonSkribent
Eric Johansson
 
www.ericj.se
]]>