Avatar billede bibliotekarens Nybegynder
28. marts 2006 - 14:40 Der er 11 kommentarer og
1 løsning

brug .htc fil internt i dokumentet

Hej eksperter
jeg håber, jeg opretter i den rigtige kategori - jeg er lidt i tvivl. Jeg er stadig igang med disse templates: http://www.eksperten.dk/spm/696129 - og fik i øvrigt smaddergod hjælp under dette spørgsmål.

Nu er det så, at jeg har fundet den der smarte csshover.htc fil på:
http://www.xs4all.nl/~peterned/csshover.html
der gør at man i IE kan sætte :hovereffekt på alting (ja i firefox virker det jo af sig selv...)

Mit spørgsmål er så - kan jeg skrive de ting der står i .htc ind i selv html-filen, så jeg ikke skal linke til den? Det går nemlig i ged, når jeg linker til noget - jeg kan ikke rigtig finde ud af stien til serveren osv. Hvis jeg lægger det et helt andet sted og linker til urlen virker det ikke...

Så kan man integrere funktionerne i html-dokumentet og hvordan???
Avatar billede olebole Juniormester
28. marts 2006 - 15:12 #1
<ole>

Det kommer anpå, hvad der står i HTC'en - men hvorfor ikke finde udaf, hvad du gør forkert, når du linker til den?

/mvh
</bole>
Avatar billede bibliotekarens Nybegynder
28. marts 2006 - 16:19 #2
det eneste (jeg tror) jeg gør forkert er ikke at kende stien til dokumenterne - det virker fint, når jeg uploader et andet sted og bruger enten relative eller absolutte urls.
jeg har skrevet og spurgt spss-folkene om stien til serveren osv. men det er jo ikke til at vide hvornår man får svar...

men her kommer indholdet af htc-filen:

-------------------------------------------------------------------------------------

<attach event="ondocumentready" handler="parseStylesheets" />
<script>
/**
*    Whatever:hover - V2.02.060206 - hover, active & focus
*    ------------------------------------------------------------
*    (c) 2005 - Peter Nederlof
*    Peterned - http://www.xs4all.nl/~peterned/
*    License  - http://creativecommons.org/licenses/LGPL/2.1/
*
*    Whatever:hover is free software; you can redistribute it and/or
*    modify it under the terms of the GNU Lesser General Public
*    License as published by the Free Software Foundation; either
*    version 2.1 of the License, or (at your option) any later version.
*
*    Whatever:hover is distributed in the hope that it will be useful,
*    but WITHOUT ANY WARRANTY; without even the implied warranty of
*    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
*    Lesser General Public License for more details.
*
*    Credits and thanks to:
*    Arnoud Berendsen, Martin Reurings, Robert Hanson
*
*    howto: body { behavior:url("csshover.htc"); }
*    ------------------------------------------------------------
*/

var csshoverReg = /(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active))|((a|input|textarea)([#.][^ ]+)?:unknown)/i,
currentSheet, doc = window.document, hoverEvents = [], activators = {
    onhover:{on:'onmouseover', off:'onmouseout'},
    onactive:{on:'onmousedown', off:'onmouseup'},
    onunknown:{on:'onfocus', off:'onblur'}
}

function parseStylesheets() {
    if(!/MSIE (5|6)/.test(navigator.userAgent)) return;
    window.attachEvent('onunload', unhookHoverEvents);
    var sheets = doc.styleSheets, l = sheets.length;
    for(var i=0; i<l; i++)
        parseStylesheet(sheets[i]);
}
    function parseStylesheet(sheet) {
        if(sheet.imports) {
            try {
                var imports = sheet.imports, l = imports.length;
                for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
            } catch(securityException){}
        }

        try {
            var rules = (currentSheet = sheet).rules, l = rules.length;
            for(var j=0; j<l; j++) parseCSSRule(rules[j]);
        } catch(securityException){}
    }

    function parseCSSRule(rule) {
        var select = rule.selectorText, style = rule.style.cssText;
        if(!csshoverReg.test(select) || !style) return;
       
        var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
        var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
        var className = (/\.([a-z0-9_-]*on(hover|active|unknown))/i).exec(newSelect)[1];
        var affected = select.replace(/:(hover|active|unknown).*$/, '');
        var elements = getElementsBySelect(affected);
        if(elements.length == 0) return;

        currentSheet.addRule(newSelect, style);
        for(var i=0; i<elements.length; i++)
            new HoverElement(elements[i], className, activators[pseudo]);
    }

function HoverElement(node, className, events) {
    if(!node.hovers) node.hovers = {};
    if(node.hovers[className]) return;
    node.hovers[className] = true;
    hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
    hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
    function hookHoverEvent(node, type, handler) {
        node.attachEvent(type, handler);
        hoverEvents[hoverEvents.length] = {
            node:node, type:type, handler:handler
        };
    }

    function unhookHoverEvents() {
        for(var e,i=0; i<hoverEvents.length; i++) {
            e = hoverEvents[i];
            e.node.detachEvent(e.type, e.handler);
        }
    }

function getElementsBySelect(rule) {
    var parts, nodes = [doc];
    parts = rule.split(' ');
    for(var i=0; i<parts.length; i++) {
        nodes = getSelectedNodes(parts[i], nodes);
    }    return nodes;
}
    function getSelectedNodes(select, elements) {
        var result, node, nodes = [];
        var identify = (/\#([a-z0-9_-]+)/i).exec(select);
        if(identify) {
            var element = doc.getElementById(identify[1]);
            return element? [element]:nodes;
        }
       
        var classname = (/\.([a-z0-9_-]+)/i).exec(select);
        var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
        var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
        for(var i=0; i<elements.length; i++) {
            result = tagName? elements[i].all.tags(tagName):elements[i].all;
            for(var j=0; j<result.length; j++) {
                node = result[j];
                if(classReg && !classReg.test(node.className)) continue;
                nodes[nodes.length] = node;
            }
        }   
       
        return nodes;
    }
</script>
Avatar billede olebole Juniormester
28. marts 2006 - 16:59 #3
Hmmm ... lidt pudsigt, for du linker da i forvejen til en JS-fil  :)
Anyway, så ville et hurtigt bud være:

<script type="text/JavaScript">
var csshoverReg = /(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active))|((a|input|textarea)([#.][^ ]+)?:unknown)/i,
currentSheet, doc = window.document, hoverEvents = [], activators = {
    onhover:{on:'onmouseover', off:'onmouseout'},
    onactive:{on:'onmousedown', off:'onmouseup'},
    onunknown:{on:'onfocus', off:'onblur'}
}

function parseStylesheets() {
    if(!/MSIE (5|6)/.test(navigator.userAgent)) return;
    window.attachEvent('onunload', unhookHoverEvents);
    var sheets = doc.styleSheets, l = sheets.length;
    for(var i=0; i<l; i++)
        parseStylesheet(sheets[i]);
}
    function parseStylesheet(sheet) {
        if(sheet.imports) {
            try {
                var imports = sheet.imports, l = imports.length;
                for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
            } catch(securityException){}
        }

        try {
            var rules = (currentSheet = sheet).rules, l = rules.length;
            for(var j=0; j<l; j++) parseCSSRule(rules[j]);
        } catch(securityException){}
    }

    function parseCSSRule(rule) {
        var select = rule.selectorText, style = rule.style.cssText;
        if(!csshoverReg.test(select) || !style) return;
       
        var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
        var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
        var className = (/\.([a-z0-9_-]*on(hover|active|unknown))/i).exec(newSelect)[1];
        var affected = select.replace(/:(hover|active|unknown).*$/, '');
        var elements = getElementsBySelect(affected);
        if(elements.length == 0) return;

        currentSheet.addRule(newSelect, style);
        for(var i=0; i<elements.length; i++)
            new HoverElement(elements[i], className, activators[pseudo]);
    }

function HoverElement(node, className, events) {
    if(!node.hovers) node.hovers = {};
    if(node.hovers[className]) return;
    node.hovers[className] = true;
    hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
    hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
    function hookHoverEvent(node, type, handler) {
        node.attachEvent(type, handler);
        hoverEvents[hoverEvents.length] = {
            node:node, type:type, handler:handler
        };
    }

    function unhookHoverEvents() {
        for(var e,i=0; i<hoverEvents.length; i++) {
            e = hoverEvents[i];
            e.node.detachEvent(e.type, e.handler);
        }
    }

function getElementsBySelect(rule) {
    var parts, nodes = [doc];
    parts = rule.split(' ');
    for(var i=0; i<parts.length; i++) {
        nodes = getSelectedNodes(parts[i], nodes);
    }    return nodes;
}
    function getSelectedNodes(select, elements) {
        var result, node, nodes = [];
        var identify = (/\#([a-z0-9_-]+)/i).exec(select);
        if(identify) {
            var element = doc.getElementById(identify[1]);
            return element? [element]:nodes;
        }
       
        var classname = (/\.([a-z0-9_-]+)/i).exec(select);
        var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
        var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
        for(var i=0; i<elements.length; i++) {
            result = tagName? elements[i].all.tags(tagName):elements[i].all;
            for(var j=0; j<result.length; j++) {
                node = result[j];
                if(classReg && !classReg.test(node.className)) continue;
                nodes[nodes.length] = node;
            }
        }   
       
        return nodes;
    }
   
window.onload = parseStylesheets;
</script>

Hverken dette eller de scripts, du ellers bruger, er dog kompatible med XHTML. Så er det jo heldigt, dokumentet ikke parses som XHTML, men blot som tilfældig HTML-tagsoup  ;o)

Prøv at læse:
    http://www.eksperten.dk/artikler/537
    http://www.eksperten.dk/artikler/539
Avatar billede bibliotekarens Nybegynder
28. marts 2006 - 17:09 #4
tak - jeg prøver det lige.
I øvrigt linker jeg ikke til .js-filen, jeg skrev det ind i headeren... Dér kunne jeg heller ikke finde stien... :-)

Det der du siger med xhtml...
Altså den template jeg arbejder med (html) bliver "trukket ind" et andet dokument med doctypen:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
er det måske dét der er fejlen?

på deres hjælpesider fandt jeg noget om links og /%image cache url%/. derfor ser linket sådan ud:
body {behavior: url(/%image cache url%/csshover.htc);}
jeg har som sagt også prøvet at lægge htc.filen et helt andet sted og linke til den uden held...
men jeg prøver lige det du sagde :-)
Avatar billede bibliotekarens Nybegynder
28. marts 2006 - 17:16 #5
næ - nu vil den slet ikke æde templaten...
Avatar billede bibliotekarens Nybegynder
28. marts 2006 - 17:31 #6
ang. artiklerne (nederste link er vist forkert...)
burde jeg så sætte det der mime-halløj, eller hvad er hensigten?
her er dokumentets header, som ikke kan ændres - jeg har adgang til at angive <title> osv. men nedenstående genereres automatisk:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta http-equiv="Expires" content="-1"/><meta http-equiv="Pragma" content="no-cache"/><meta name="Robots" content="noindex, nofollow"/><meta name="Generator" content="mrInterview HTML Player 1.0.23.871"/><meta name="Template" content="temp4.htm"/>
Avatar billede olebole Juniormester
28. marts 2006 - 17:35 #7
Hmmm ... stien til din JS-fil er helt korrekt ... den ligger, hvor du skriver  :)

Hvad CMS'et angår (og hvad du skal gøre i det), melder jeg pas. De fleste af den slags er skrevet af folk, der ikke kan kode korrekt mod standarderne, så i den slags kan alt ske  :o|
Avatar billede olebole Juniormester
28. marts 2006 - 17:37 #8
- og http://www.eksperten.dk/artikler/539 skulle naturligvis være http://www.eksperten.dk/artikler/538 ... sorry  ;o)
Avatar billede bibliotekarens Nybegynder
28. marts 2006 - 17:44 #9
jeg har skrevet og spurgt dem - det kan være jeg får en slags svar snart...

du skal i hvert fald have tak fordi du prøvede.

Hvis du lægger et svar skal du nok få points for din tid :-)
Avatar billede olebole Juniormester
28. marts 2006 - 17:47 #10
- jamen så får du et svar, tak  :)
Avatar billede bibliotekarens Nybegynder
28. marts 2006 - 17:48 #11
tak for indsatsen :-)
Avatar billede olebole Juniormester
28. marts 2006 - 18:02 #12
- selvtak ... og tak for points  ;o)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester