Css Snippets

jQuery ‘click’ op een Ipad?

Mark — Mon, 17 Oct 2011 08:40:14 +0000

Daar sta je dan, … hoe click ik op een tablet?

Onlangs stelde ik mij deze vraag bij het maken van een webapplicatie dat op een gewone desktop browser (ja, zo ver zijn we al, desktop browser is al iets ‘gewoon’) en op de Ipad moest functioneren.

Ahja, je werkt met je vingers op een Ipad

Na enig onderzoek wees zich uit dat de events click – mousemove – focus eenvoudig konden worden ‘vertaald’ naar voor Ipad vriendelijke verstaanbare events, met behulp van JavaScript.

Hoe doen we dat nu?

Eerst moeten we detecteren of we al dan niet op een Ipad zijn:

var isiPad = navigator.userAgent.match(/iPad/i) !== null;

De variable isiPad is een boolean, met als resultaat true of false (waar / niet waar)

Daarna kunnen we voor elk event een variable aanmaken die het juiste event zet:

Voor ‘click’ event

var clickEvent = (isiPad) ? 'touchstart' : 'click';

Voor ‘mousemove’ event

var scrollEvent = (isiPad) ? 'touchmove' : 'mousemove';

Voor ‘focus’ event

var focusEvent = (isiPad) ? 'touchstart focus' : 'focus';

Dit geeft ons nu de volgende eenvoudige jQuery werkwijze voor bijvoorbeeld ‘click’:

$('selector a').clickEvent(function(e) { e.preventDefault(); //doe stuff hier... });

Hopelijk heb je er iets aan!

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

CSS3: werken met :nth-child() pseudo class

Mark — Wed, 23 Jun 2010 09:34:51 +0000

Je zou je moeten verheugen op deze CSS3 eigenschap, gedaan met Javascript of PHP of elke andere programmeertaal om dynamisch elementen te kunnen aanspreken.
Maar ingewikkeld kan deze eigenschap wel zijn, dus hier enkele voorbeelden die je allicht op weg kunnen helpen:

CSS3

odd/even

Waarschijnlijk de meest gebruikte en verwachte mogelijkheid

 /*elke 1ste - 3de - 5de - 7de etc ... */
li:nth-child(2n+1) { color: #333; }
li:nth-child(odd) { color: #333; }
 /*elke 2de - 4de - 6de - 8de etc ... */
li:nth-child(2n) { color: #333; }
li:nth-child(even) { color: #333; }

Enkel de eerste

li:nth-child(0n+1) { color: #333; }
li:nth-child(1) { color: #333; }

Enkel de eerste 3 bijvoorbeeld

li:nth-child(-n+3) { color: #333; }

Nog meer verwarrende voorbeelden

 /*de 4de - 8ste - 12de - 16de etc ... */
li:nth-child(4n) { color: #333; }

 /*de 4de - 8ste - 12de - 16de etc ... */
li:nth-child(4n+4) { color: #333; }

 /*de 1ste - 5de - 9de - 13de etc ... */
li:nth-child(4n+1) { color: #333; }

 /*de 3de - 8ste - 13de - 18de etc ... */
li:nth-child(5n-2) { color: #333; }

Browser compatibility

De meeste moderne browsers ondersteunen deze eigenschap reeds, en om IE te laten gehoorzamen naar deze regel, gebruik Jquery, deze ondersteund de regel in zijn selectors lijst, en het zal werken in IE.

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Boek: Websites opmaken met CSS zoals het hoort

Mark — Sun, 20 Jun 2010 08:37:48 +0000

Binnenkort verkrijgbaar in de betere boekhandel

Ik denk dat dit boek wel het eerste in zijn soort is, van Belgische bodem met nette Nederlandstalige uitleg over hoe je nu een website maakt, vertrekkende van een design.

Het boek : “websites opmaken met css zoals het hoort” leert je kijken naar en denken over websites als een echt web-expert. Aan de hand van duidelijke case studies uit de praktijk, waarbij indrukwekkende websites worden ontleed en opnieuw worden opgemaakt aan de hand van CSS, leert u niet alleen de basisbeginselen, maar ook de insider tips en knowhow van de professionele webontwerper.

Ben ik iets vergeten?

Ahja, ik heb het geschreven, maar dit geheel terzijde.

Hebben?

Je kan het boek nu al online bestellen voor de prijs van – ik denk – €12,50 tot het in de winkel is zal het nog tot het einde van de maand duren.

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

HTML5 doctype

Mark — Mon, 10 May 2010 07:40:20 +0000

HTML 4 strict

XHTML 1 Strict

HTML5

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Crossbrowser CSS drop shadow

Mark — Wed, 28 Apr 2010 08:39:30 +0000

Drop shadow – ofwel de illusie dat iets zweeft en diepte heeft – wordt al jarenlang met afbeeldingen gedaan, ofwel met nuffige semi-CSS oplossingen.
CSS3 is nog niet voor elke browser 100%, maar drop shadow is één van de zaken die we nu reeds kunnen doen en het werkt in:

Firefox 3.5+
Safari 3+
Google Chrome
Opera 10.50
Internet Explorer 5.5+

CSS

.shadow {
  -moz-box-shadow: 3px 3px 4px #000; /* Firefox/Mozilla */
  -webkit-box-shadow: 3px 3px 4px #000; /*Safari/Chrome */
  box-shadow: 3px 3px 4px #000; /* Opera & hoe het zou moeten */
  /* Voor IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
  /* Voor IE 5.5 - 7 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

Nartuurlijk zal je de ms-filter & filter via conditional comments laden?

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Javascript toevoegen aan je HTML

Mark — Sun, 18 Apr 2010 19:08:17 +0000

Uit de zoekopdrachten blijkt dat het bij bepaalde personen niet duidelijk is hoe JavaScript aan je HTML wordt toegevoegd:

HTML

of een extern JavaScript bestand:

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Jquery – laat change() werken in IE8 & IE7

Mark — Sun, 28 Mar 2010 09:09:10 +0000

Om hoofdpijn van te krijgen, change() function werkt blijkbaar niet in Internet Explorer 8 & 7, dus waarschijnlijk ook niet niet in Internet Explorer 6. Maar de oplossing is vrij eenvoudig;

Met bind() 2 functions meegeven, click() voor IE en change() voor de anderen:

Niet crossbrowser manier

Crossbrowser manier

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Open en toe met CSS & Jquery

Mark — Wed, 24 Mar 2010 09:41:37 +0000

Het is altijd weer het wiel opnieuw uitvinden, een eenvoudige manier om via een klik op een element een ander element te tonen of te verbergen.

HTML

Open & Toe

	
		Inhoud titel

Afbeeldingen

CSS

h2.trigger {
padding: 0 0 0 50px;
margin: 0 0 5px 0;
background: url(h2_trigger_a.gif) no-repeat;
height: 46px;
line-height: 46px;
width: 450px;
font-size: 2em;
font-weight: normal;
float: left;
}
h2.trigger a {
color: #fff;
text-decoration: none;
display: block;
}
h2.trigger a:hover { color: #ccc; }
h2.active {background-position: left bottom;}
.toggle_container {
margin: 0 0 5px;
padding: 0;
border-top: 1px solid #d6d6d6;
background: #f0f0f0 url(toggle_block_stretch.gif) repeat-y left top;
overflow: hidden;
font-size: 1.2em;
width: 500px;
clear: both;
}
.toggle_container .block {
padding: 20px;
background: url(toggle_block_btm.gif) no-repeat left bottom;
}

Jquery/Javascript

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Een ul lijst opsplitsen in kolommen

Mark — Thu, 04 Mar 2010 07:00:20 +0000

Hoe kun je 1 lijst

HTML


  Lorem
  ipsum
  dolor
  sit
  amet
  consectetuer
  adipiscing
  elit

CSS

ul {
  width:760px;
  margin-bottom:20px;
  overflow:hidden;
  border-top:1px solid #ccc;
}
li {
  line-height:1.5em;
  border-bottom:1px solid #ccc;
  float:left;
  display:inline;
}
.col2 li  { width:50%;}
.col3 li  { width:33.333%; }
.col4 li  { width:25%; }
.col6 li  { width:16.666%; }

Conditionele body tag voor IE

Mark — Sat, 27 Feb 2010 07:14:26 +0000

Je kan CSS via conditionele comments (zie eerdere Snippet) toevoegen, maar je kan in plaats van een extra CSS bestand, conditioneel een extra class toevoegen aan zoals in dit voorbeeld de body tag.

HTML

Het enigste wat je nu moet doen is de uitzondering toevoegen aan je reeds bestaande CSS.

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon