[PHP] Linkjes en form elementen worden disabled na JS

[Peedy]

Hoi,

Ik heb een site gebouwd waarvan het content gedeelte 75% transparant moet zijn. Daarvoor heb ik dit javascriptje gebruikt. Werkt perfect, mijn div wordt transparant gemaakt als de init() wordt aangeroepen.

Echter, in dit content veld komen soms ook formulieren te staan. En daar gaat het mis. Nadat de Javascript geladen is, kan ik de checkboxes niet meer aan/uitvinken, geen submitknop in de vorm van een plaatje meer gebruiken en geen a href linkjes openen. Een radiobutton en een normale submitknop doen het wel. Het lijkt alsof deze worden gedisabled, of dat er een div overheen gelegd wordt die dit niet wil oppikken. Ik heb al geprobeerd z-indexes toe te voegen aan de verschillende elementen, maar het help allemaal niet.

Heeft iemand een idee?

Javascriptje:

JavaScript:

function OpacityObject(divId, strPath) {
    this.id = divId;
    this.path = strPath;
    if (ns){
        if (browserVersion>=5) {
            this.layerObject = document.getElementById(divId).style;
        } else { 
            this.layerObject = eval("document."+divId);
        }
    } else {
        this.layerObject = eval(divId + ".style");
    }
    this.setBackground = od_object_setBackground;
}
function od_object_setBackground() {    
    if (pngAlpha) {
        this.layerObject.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this.path+".png', sizingMethod='scale')";
    } else if (pngNormal) {
        this.layerObject.backgroundImage = 'url('+this.path+'.png)';
    } else {
        this.layerObject.backgroundImage = 'url('+this.path+'.gif)';
    }
}
function od_displayImage(strId, strPath, intWidth, intHeight, strClass, strAlt) {   
    if (pngAlpha) {
        document.write('<div style="height:'+intHeight+'px;width:'+intWidth+'px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+strPath+'.png\', sizingMethod=\'scale\')" id="'+strId+'" class="'+strClass+'"></div>');
    } else if (pngNormal) {
        document.write('<img src="'+strPath+'.png" width="'+intWidth+'" height="'+intHeight+'" name="'+strId+'" border="0" class="'+strClass+'" alt="'+strAlt+'" />');
    } else {
        document.write('<img src="'+strPath+'.gif" width="'+intWidth+'" height="'+intHeight+'" name="'+strId+'" border="0" class="'+strClass+'" alt="'+strAlt+'" />');
    }
}

function od_rollOver(strId, strColor) { 
    if (pngAlpha) {
        document.getElementById(strId).style.backgroundColor = strColor;
    } else {
        if (document.images && (flag == true)) {
            document[strId].src = eval(strId + "on.src");
        }
    }
}
function od_rollOut(strId, strColor) {  
    if (pngAlpha) {
        document.getElementById(strId).style.backgroundColor = strColor;
    } else {
        if (document.images) {
            document[strId].src = eval(strId + "off.src");
        }
    }
}

if ((browser.isIE55 || browser.isIE6up) && browser.isWin32) {
    var pngAlpha = true;
    var strExt = ".png";
} else if ((browser.isGecko) || (browser.isIE5up && browser.isMac) || (browser.isOpera && browser.isWin && browser.versionMajor >= 6) || (browser.isOpera && browser.isUnix && browser.versionMajor >= 6) || (browser.isOpera && browser.isMac && browser.versionMajor >= 5) || (browser.isOmniweb && browser.versionMinor >= 3.1) || (browser.isIcab && browser.versionMinor >= 1.9) || (browser.isWebtv) || (browser.isDreamcast)) {
    var pngNormal = true;
    var strExt = ".png";
    // otherwise, we use plain old GIFs
} else {
    var strExt = ".gif";
}

var ns = (document.all)?false:true;
var browserVersion = parseFloat(navigator.appVersion );

Gedeelte van mijn head waar ik hem aanroep:

HTML:

<script language="javascript" src="includes/opacity.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript"><!--
    //set objects to null
    var objMyImage = null;  

    function init() {

        objMyImage = new OpacityObject('wit','visuals/75opac');
        objMyImage.setBackground();
    }
    // --></script>

En een deel van de body waar het om gaat:

HTML:

<div class="wit" id="wit">hier de content</div>

En bijbehorende CSS:

Cascading Stylesheet:

div.wit { width:560px; padding:10px; _height:400px; min-height:400px; display: inline-block; }

Edit; in Opera werkt het wel goed, in IE niet

Edit; ah, ik ben al wat verder. Het zit 'm in deze regel:

JavaScript:

        this.layerObject.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this.path+".png', sizingMethod='scale')";

Als ik die eruit haal, krijg ik weliswaar geen transparante achtergrond, maar dan doen de checkboxes etc het nog wel.

[ Voor 3% gewijzigd door Peedy op 07-05-2007 14:31 ]

[BasieP]

ten eerste 'language="javascript"' hoeft niet meer, 'type="text/javascript"' is voldoende
het zou ook zo kunnnen dat het niet meer 'mag' maar dat weet ik niet

verder zal ik zeggen, welkom in de wonderschone wereld van compatabiliteit van IE... (en soms ook andere browsers)

Het scriptje (dat blijkbaar niet door jouw is geschreven) maakt gebruik van transparante png's (en de DX fix voor IE)
echter, blijkbaar gaat dit niet helemaal lekker. Dat directX filter is sowieso vrij vervelend om mee te werken, en staat bekend om de fouten icm andere dingen.

je zou het kunnen proberen door simpelweg alpha filter te gebruiken (voor IE) en MozOpacity, KhtmlOpacity en opacity voor de andere browsers, maar dit is net zo cross-browser als je huidige methode (niet dus)

wordt dan iig zoiets:

JavaScript:

div.style.filter = 'Alpha(opacity='+trans+')';
div.style.MozOpacity = trans / 100;
div.style.KhtmlOpacity = trans / 100;
div.style.opacity = trans / 100;

waar 'div' je divje is, en trans een getal tussen 0 en 100 wat de mate van transparantie voorsteld

[ Voor 58% gewijzigd door BasieP op 07-05-2007 14:37 ]

[Peedy]

De alpha(opacity) had ik hiervoor al geprobeerd. Het nadeel is dat deze de opacity toepast op de gehele div, dus ook de tekst die erin staat. Daarom had ik juist dit scriptje gebruikt, gezien die alleen de achtergrondkleur van opacity instelt, en niet alle nested elements erin.

Edit; deze persoon had hetzelfde probleem, maar hij kon wel opacity gebruiken als alternatief...

Edit; deze persoon had het probleem ook, en heeft het opgelost door de PNG image 1x1 px te maken. Ik ga het proberen

Edit: ja! Het is gelukt Ongelofelijk dat het zoveel verschil maakt, ik had hem eerst 2x2...

Dankje voor je hulp!

[ Voor 48% gewijzigd door Peedy op 07-05-2007 14:47 ]