Archive for February, 2010

‘A connection could not be made to the report server’

Deze fout wordt ontstaat wanneer er een verkeerde TargetServerURL in the Business Intelligence (BI) project is gezet van Reporting Services applicatie.

Controleer de  TargetServerURL in het property scherm van je BI project. Check dat deze URL verwijst naar de ReportServer virtual directory en niet naar de Reports virtual directory (wat vaak de oorzaak is van deze fout).

bijvoorbeeld http://Mijnserver/ReportServer$SQL2005DEV/ en niet http://Mijnserver/Reports$SQL2005DEV/

Moet een website er in elke browser hetzelfde uitzien?

Een interessante kijk op browser support:

If a web browser is defective, causing errors in the display or performance of the page, should the page developer struggle to hide the browser’s defects, or should the defects be revealed in hope of creating market pressure to force the browser maker to make good? By which approach is humanity better served?

Voor steeds groter groeiende groep webdevelopers is dit antwoord nee.

Ik ben het wel eens met de auteur van het gelinkte artikel. Zijn mening is wat gematigder dan de quote hierboven. Op de vraag “Als je met de CSS3 tag “box-shadow” de look en feel van een site drastisch kan verbeteren maar deze wordt niet ondersteund door IE, zou je deze dan toepassen?”. Zijn antwoord hierop: Ja.

Het idee hierbij is dat gebruikers die een browser gebruiken die deze tag wel toepassen zien de versie met schaduw. Gebruikers die een browser gebruiken die de tag niet ondersteund, zien de schadow niet, maar weten eigenlijk ook niet wat ze missen. En functioneel gezien is de website hetzelfde.

Ik kan me hier goed in vinden. Tevens biedt het webdevelopers de mogelijkheid  te experimenteren met de nieuwe mogelijkheden van CSS 3 en op zo dus de vooruitgang op webgebied te stimuleren. Want als we moeten wachten totdat alle browser CSSs 3 ondersteunen dan zitten we over 5 jaar nog steeds te klooien met CSS 1.en hack om de boel te laten werken in IE.

Vertical text in non-IE browsers.

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)