Jacob Jensen | Jacob Jensens blog om webdesign

Viser opslag med etiketten HTML. Vis alle opslag

lørdag den 7. januar 2012

Inline vs. Embedded vs. Extended CSS

Har altid brugt fordelen ved inline CSS i udformningen af dynamiske sitet.
Her et exempel hvor farven kan ændres via ASP-variabler inline.

<span style='bgcolor:#<%=bgColor%>; color:#<%=color%>'>dynamisk farver</span>

Samme version kan også bruges som Embedded CSS, men ikke som Extended CSS

Fjern Submit-knap efter klik

Har tit manglet et script til at disable submit-knappen når den er blevet trykket på.
Og fandt så på at udskifte text og baggrund på knappen ved onClick.

<input ID="btn" type="button" value="GEM" class="buttonReserverPopup" onclick="javascript:document.getElementById('btn').disabled=true;javascript:document.getElementById('btn').value='GEMT';javascript:document.getElementById('btn').style.backgroundImage='url(../images/button-DISABLE.png)';return document.returnValue"/>

Ovenstående ændre baggrund og texten ved klik på submit.
1) Baggrunden ændres til et nyt billede...

javascript:document.getElementById('btn').style.backgroundImage='url(../images/button-DISABLE.png)';

2) Texten på knappen ændres til 'GEMT'...

javascript:document.getElementById('btn').value='GEMT';

3) Knappen gøres inaktiv med

document.getElementById('btn').disabled=true;

tirsdag den 20. december 2011

HTML5 og CSS3

Hvad understøttes af hvilke browsere. Det kan være svært at finde ud af.

Her er to gode links, der giver et hurtigt overblik:
HTML5 & CSS3 Readiness
When can I use...

fredag den 30. september 2011

Ajax, jQuery tips and tricks

Sådan ender det jo når man sidder og surfer.

Jeg faldt lige over http://cssglobe.com/post/9801/easy-paginate-jquery-plugin-for-pagination. herudover er der mange andre fede scripts og tutorials

Og denne her http://superdit.com/category/freebies/

TOOLTIPS
http://superdit.com/2011/01/20/jquery-tooltip-plugins-and-tutorial-collection/
http://vadikom.com/demos/poshytip/

13 gode jQuery-slider-links
http://webdesignledger.com/tutorials/13-super-useful-jquery-content-slider-scripts-and-tutorials

TEMPLATES
http://www.os-templates.com/

tirsdag den 13. september 2011

Font-face webfont generator - genialt værktøj - upload dine fonte og få den konverteret til diverse formater og stylet i én samlet pakke lige til download. Super genialt

http://www.fontsquirrel.com/fontface/generator

torsdag den 8. september 2011

jQuery pop-up

Her er et rigtig godt script til at lave CSS-popups.

<title>Test Document</title>
<script src='http://code.jquery.com/jquery-1.4.2.min.js'></script>
<script src='http://plugins.jquery.com/files/jquery.koverlay.1.3.js.txt'></script>
</head>
<body>
  <a href='javascript: void(0);' onclick="$('#my_hidden_div_id_1').koverlay({title: 'OVERSKRIFT HER'});$('.css_koverlay').css({'background-color':'#9c183a'});">Link Text</a>
  <div id="my_hidden_div_id_1" style="display: none;">INDHOLD HER...</div>
</body>
</html>

http://flowplayer.org/tools/demos/overlay/index.html

CSS popup centreret

Faldt lige over dette script. Eneste problem er at man ikke kan anvende billeder i pop-up'en, da den ligger inden i #displaybox. Har prøvet mig lidt frem, men kan ikke få vist billeder som baggrund i pop-up'en.

<head>
<style>
#displaybox {
   z-index: 10000;
   filter: alpha(opacity=50); /*older IE*/
   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */
   -moz-opacity: .50; /*older Mozilla*/
   -khtml-opacity: 0.5; /*older Safari*/
   opacity: 0.5; /*supported by current Mozilla, Safari, and Opera*/
   background-color:#000000;
   position:fixed; top:0px; left:0px; width:100%; height:100%; color:#FFFFFF; text-align:center; vertical-align:middle;
}

<script>
function clicker(){
   var thediv=document.getElementById('displaybox');
   if(thediv.style.display == "none"){
      thediv.style.display = "";
      thediv.innerHTML = "TEXTEN<a href='#' onclick='return clicker();'>LUK</a>";
   }else{
      thediv.style.display = "none";
      thediv.innerHTML = '';
   }
return false;
}
</script>

<body>
<div id="displaybox" style="display: none;"></div>
<a href='#' onclick='return clicker();'>ÅBEN VINDUE</a>
</body>

tirsdag den 16. august 2011

Facebook Metatags

Må hellere lige for en god ordens skyld præsentere hele FB-koden
Nedenstående placeres i <head>

<!-- facebook meta #start ************************* -->
<meta content='Jacob Jensens blog om Webdesign, mm.' property='og:title'/>
<meta content='website' property='og:type'/>
<meta content='http://jacob-jensen.blogspot.com/' property='og:url'/>
<meta content='http://www.jjweb.dk/images/jjweb-blog-facebook.png' property='og:image'/>

<meta content=http://www.ditsite.dk' property='og:site_name'/>
<meta content='din beskrivelsen som af sitet' property='og:description'/>
<meta content='DIT-FB-BRUGER-ID' property='fb:admins'/> 
<!-- facebook meta #end   ************************* -->

Nedenstående skal placeres i <body> hvor man ønsker FB.

<!-- facebook #start ************** -->
<div id='fb-root'/>
<script language='javascript' src='http://connect.facebook.net/da_DK/all.js#xfbml=1'/>
<fb:like action='like' font='segoe ui' href='http://jacob-jensen.blogspot.com/' layout='button_count' send='false' show_faces='false' width='200'/>
<!-- facebook #end   ************** -->

Du skal være opmærksom på at du ikke kan være logget på FB, når du bruger deres værktøjer. Dette også selvom du er medlem af deres developer group. Jeg kunne i hvert fald ikke!

Du skal også være opmærksom på at W3.org ikke anerkender Facebook metatags som valide!

Tjek hvad din Facebook kode melder tilbage

I disse Facebook-tider er det altid rart at kunne se, hvad ens website melder tilbage - hvad der bliver posted på FB. Det kan man via Facebook Developers.

Via deres Object Debugger kan du se, hvad din siden generere på Facebook.

onsdag den 10. august 2011

Brug egne skrifter på dine Websites 2

Her er en stump CSS, der viser koderne til alle font-typerne.

@font-face {
    font-family: 'DroidSerifRegular';
    src: url('../DroidSerif-Regular-webfont.eot');
    src: url('../DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../DroidSerif-Regular-webfont.woff') format('woff'),
         url('../DroidSerif-Regular-webfont.ttf') format('truetype'),
         url('../DroidSerif-Regular-webfont.svg#DroidSerifRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
body, p { 
  font-family: 'DroidSerifRegular', Verdana, Tahoma;
}

<p >Hello world!</p>

søndag den 31. juli 2011

Brug egne skrifter på dine Websites

Et forsøg på at ændre skrifttyper på en hjemmeside. Det virker fint i Firefox og Chrome, men ikke i Explorer.

<style type="text/css">
  @font-face {
  font-family: "My Custom Font";
  src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont { 
  font-family: "My Custom Font", Verdana, Tahoma;
}
</style>

<p class="customfont">Hello world!</p>

For understøttelse i IE, skal fonten konverteres til EOT-formatet. Jeg har fundet et glimrende online værktøj til at generere stylesheet'et og font'ne. Med @font-face Generator kan du uploade dine fonte og automatisk få genereret stylesheet og web-formater af fonten.

Bemærk: At fonten SKAL ligge i samme mappen som den side den skal vises på, ellers virker det ikke

Et hurtigt eksempel kan ses her!

onsdag den 6. juli 2011

Flash vejr widget

Så lykkedes det endelig at få min flash-vejr-widget lavet. Der har været problemer undervejs, specielt pga. flash security-policy som gør det besværligt at hente variabler fra andre servere.
Jeg lavede et ASP-Script til at generere XML-siden server-side og dermed tror Flash at den får variablerne fra den lokale server og ikke en remote server.

Jeg henter data fra http://www.weather.com/, hvor jeg har oprettet en konto gratis.

Specielle tegn

Her er et udvalg af de karaktere jeg benytter mest

!	!	#	#	%	%	&	&
&#40	(	)	)	/	/	;	;
<	<	=	=	>	>	?	?
@	@	©	©	&#187	»	«	«

<%=	<%=
>%	%>

onsdag den 4. maj 2011

Layout Gala

Hvis man lige mangler et hurtigt layout bør man tjekke Layout Gala. Her er 40 gode templates.

mandag den 28. februar 2011

Little Boxes

Forleden faldt jeg ved et tilfælde over Little Boxes i min søgen efter et bedre alternativ end Dreamweaver skabeloner. Little Boxes er et website med simple css layout-skabeloner.

Vælg layout og straks har man css-koden klar til at kopier og udbygge.

lørdag den 18. september 2010

Cross Domain

Har søgt en del på nettet omkring Cross Domain i Flash. Måske - jeg har ikke forsøgt endnu - kan problemet med at hente XML fra et andet sitet løses gennem et script der ligger lokalt på egen server. Måske en ASP-fil der konverterer XML'en - så tror jeg Flash vil tro at variablen kommer lokalt og ikke fra en anden server... Jeg har nu testet en del omkring crossdomain - og det kan godt lade sig gøre at generere et script i ASP/PHP/ASP.NET til at hente variabler ind i flash fra et andet domæne.

Jacob Jensen | Jacob Jensens blog om webdesign | jjweb.dk