Archive for the 'jQuery' Category

Vertical text in non-IE browsers.

Published at 03/02/2010 in CSS, Html and jQuery. 1 Comment

Het tonen van verticale tekst via CSS is alleen weggelegd voor IE Browsers middels de volgende CSS3 regels:


writing-mode: tb-rl;
filter: flipv fliph;

Dit is een mooie manier om bijvoorbeeld tabel headers verticaal weer te geven. Maar helaas wordt deze CSS regel tot nu toe alleen toegepast in IE browsers. Om dit ook in non-IE browsers mogelijk te maken, gebruikt men vaak dynamisch gegenereerde images met de gewenste tekst.

Dit werkt natuurlijk ook maar het zorgt wel voor extra belasting op de webserver, tevens is dit lastig te onderhouden. Op zoek naar een betere oplossing, kwam ik een oplossing tegen die gebruik maakt van een statisch svg object met daarin een javascript welke de verticale text zet. Dit is al een betere oplossing alleen het aanroepen van de javascript binnen het svg object is niet erg netjes. Daarnaast moet op elke plek waar je verticale tekst wil gebruiken de svg toevoegen via de <embed> tag.

De oplossing voor dit probleem heb ik gevonden door met behulp van de jQuery SVG plugin deze svg zelf te genereren:


function SetVerticalText() {
    var verticalTexts = $(".verticalText");

    verticalTexts.each(function() {
        var text = $(this).text();
        $(this).text("");

        if (!$.browser.msie) {
            $(this).append("<div class='svgContainer'></div>");
            $(this).find(".svgContainer").svg();
            var svg = $(this).find(".svgContainer").svg('get');
            svg.text(null, -48, 12, text, { transform: 'rotate(270, 50, 50)', 'font-family': 'Arial', 'font-size': '10', 'letter-spacing': '2' });
        }
        else {
            $(this).append("<span class='verticalTextSpan'>" + text + "</span>");
        }
    });
}

Hier bij geef ik alle tekst elementen die ik verticaal wil weergeven de CSS class .verticalText bijvoorbeeld in mijn table headers:


<table cellpadding="0" cellspacing="0" class="statusTable width700" >
<tr>
<td class="labelCell">
NFP-SC
</td>
<td class="verticalText">
Digitaal initieel
</td>
<td class="verticalText">
Digitaal ingediend
</td>
<td class="verticalText">
Papier ingediend
</td>
<td class="verticalText">
Direct afgewezen
</td>
</tr>
</table>

Wanneer ik nu de SetVerticalText() aanroep, wordt er voor alle non-IE browsers een <div class=’svgContainer’></div> toegevoegd. Vervolgens wordt er middels de jQuery SVG plugin een svg object aangemaakt met daarin de verticale tekst.

Voor IE-browsers wordt er een <span class=’verticalTextSpan’></span> tag toegevoegd met daarin de verticale tekst.

Een demo van deze techniek.

svgDemo Source (73)

Scalable CSS buttons

Published at 16/12/2009 in CSS, asp.net and jQuery. 0 Comments

Meeschalende CSS buttons, het blijft een leuke uitdaging om dit voor elkaar te krijgen. De mooiste techniek die ik tot nu toe ben tegengekomen is deze van David’s Kitchen.

Hierin worden buttons en links met de .btn class via jQuery vervangen xhtml valide markup. Deze nieuwe  markup wordt vervolgens op gemaakt via een aantal CSS regels.

Het mooie van deze techniek is behalve dat de knoppen meeschalen met de tekst, de kleuren van de knop niet in de achtergrond image worden gezet maar gewoon via CSS classes. De kleur van de knoppen kan zo dus makkelijk worden aangepast.

Maak je eigen jQuery plugins

Published at 26/02/2009 in jQuery. 0 Comments

logo_jquery_215x531.gifOp dotnetslackers.com staat een goed artikel over het maken van je eigen jQuery plugins. Net als alles in jQuery is ook dit erg makkelijk te doen.

http://dotnetslackers.com/articles/ajax/Plunging-into-the-sea-of-jQuery-plugins-Part-I.aspx

AJAX API’s Playground

Published at 26/01/2009 in AJAX, Javascript and jQuery. 0 Comments

googlecode.pngGoogle heeft een handige pagina opgezet waar je on the fly met verschillende AJAX API’s (jQuery,MooTools, Google Maps enz) kan stoeien: AJAX API’s Playground. Erg handig als je even wat wil uitproberen.

htmlFile: Access Denied

Published at 18/12/2008 in Html, IE bugs, Javascript and jQuery. 0 Comments

ie-7-bug1.jpgIk zit deze week wel heel erg in de IE bugs. Zo kreeg ik vandaag een access denied error wanneer een gebruiker een ongeldig/niet bestaande bestandsnaam invoert in een upload veld. Dit is mogelijk omdat in Internet Explorer het invoerveld (het veld naast browse knop) de  door de gebruiker bewerkt kan worden.

Dit is op te lossen door tijdens het keydown event van het uploadveld  het click event uit te voeren waardoor de gebuiker gedwongen wordt om het upload dialog scherm te gebruiken (jQuery):


            $(document).ready(function() {
                $("input[type=file]").keydown(function(event) {
                    $("input[type=file]").click();
                    return false;
                });
            });