Avatar billede wedia Nybegynder
05. november 2008 - 13:34 Der er 4 kommentarer og
1 løsning

problem med IE

Hej eksperter jeg har et problem med IE jeg har en drag and drop code som virker perfect i firefox,safari,chrome,flock og opera men af en eller anden grund kan ie ikke finde af det det eneste der kommer frem e iframen som er inde i drag and drop box'en ?? er den nogen der han se hvor problemmet er !! der kommer ingen fejl meddelser i ie

her er code:

var wi_DragWin={
IE : document.all?true:false,
z: 0,
x: 0,
y: 0,
winX: "20px",
winY: "90px",
offsetx : null,
offsety : null,
targetobj : null,
resizeobj : null,
dragapproved : 0,
wi_Win : null,
Id : "",
type : "",
url : "",
defaultHeight : "",
defaultWidth : "",
iframeId : "",
conId : "",
HideConbox : "",
Resizeapproved : 0,

initialize:function(id,type,url,height,w){
this.Id = id;   
this.iframeId = id + "iframe";
this.type = type;
this.url = url;
this.defaultHeight = height;
this.defaultWidth = w;
this.conId = this.Id + "dragcontent";

document.onmousedown=this.drag;
document.onmouseup=function(){
   
    this.dragapproved=0;
    this.Resizeapproved = 0;
   
    this.HideConbox = document.getElementById(this.targetobj.parentNode.id + "iframe");

    this.HideConbox.style.visibility = 'visible';
   
    wi_Win = document.getElementById(this.targetobj.parentNode.id);
   
    wi_Win.className = "drag";
   
    }

this.setWin();
},

setWin:function(){
var style = "top:"+ this.winY + ";left:" + this.winX + ";width:" + this.defaultWidth + ";height:" + this.defaultHeight + ";";

var div = document.createElement('div');
div.setAttribute( "class", "drag" );
div.setAttribute( "style", style );
div.setAttribute( "id", this.Id );
   
    var div2 = document.createElement('div');
    div2.setAttribute( "class", "drag-handle" );
    div.appendChild(div2);
   
    var div3 = document.createElement('div');
    div3.setAttribute( "class", "drag-content" );
    div3.setAttribute( "style", "display:block;" );
   
   
   
    div3.setAttribute( "id", this.conId );
   
        if(this.type == "ajax"){
           
           
           
            }
       
        if(this.type == "iframe"){
var h = (parseInt(this.defaultHeight)-47) + "px";   
var w = this.defaultWidth;
alert(h + " | " + w);
div3.innerHTML = '<iframe  id="'+ this.iframeId +'" frameborder="0"  style="visibility:visible" top="0px" left="0px" height="'+ h +'" width="'+ w +'" src="'+ this.url +'"></iframe>';
           
            }
   
    div.appendChild(div3);
   
   
    var div4 = document.createElement('div');
    div4.setAttribute( "class", "drag-status" );
    div4.setAttribute( "style", "display:block;" );
   
    var bottomId = this.Id + "bottom"
   
    div4.setAttribute( "id", bottomId );
   
    div4.innerHTML = '<div class="drag-resize"></div>';
   
    div.appendChild(div4);

document.body.appendChild(div);
   
alert(div.innerHTML);
   
   
    },

drag:function(e){


   
var evtobj=window.event? window.event : e
this.targetobj=window.event? event.srcElement : e.target



//check if the clicked div is a dragbar
if (this.targetobj.className=="drag-handle"){
   
//sets the window to drag   
wi_Win = document.getElementById(this.targetobj.parentNode.id);   

//hides the content whill draging
this.HideConbox = document.getElementById(this.targetobj.parentNode.id + "iframe");

this.HideConbox.style.visibility = 'hidden';

wi_Win.className = "dragOn";



//Allows drag
this.dragapproved=1

if (isNaN(parseInt(wi_Win.style.left))){
    wi_Win.style.left=0
    }
   
if (isNaN(parseInt(wi_Win.style.top))){
    wi_Win.style.top=0
    }
   
this.offsetx=parseInt(wi_Win.style.left)
this.offsety=parseInt(wi_Win.style.top)
this.x=evtobj.clientX
this.y=evtobj.clientY
if (evtobj.preventDefault)
evtobj.preventDefault()
document.onmousemove=wi_DragWin.MoveWin
}

//check if the clicked div is a dragbar
if (this.targetobj.className=="drag-resize"){
   
var evtobj=window.event? window.event : e

wi_status = document.getElementById(this.targetobj.parentNode.id);

wi_Win = document.getElementById(wi_status.parentNode.id);   

wi_iframe = document.getElementById(wi_status.parentNode.id + "iframe");

this.Resizeapproved = 1;

if (isNaN(parseInt(wi_Win.style.left))){
    wi_Win.style.left=0
    }
   
if (isNaN(parseInt(wi_Win.style.top))){
    wi_Win.style.top=0
    }
   
this.offsetx=parseInt(wi_Win.style.left)
this.offsety=parseInt(wi_Win.style.top)
this.x=evtobj.clientX
this.y=evtobj.clientY
if (evtobj.preventDefault)
evtobj.preventDefault()

document.onmousemove=wi_DragWin.ResizeWin
}

},

MoveWin:function(e){
var evtobj=window.event? window.event : e
if (this.dragapproved==1){
wi_Win.style.left=this.offsetx+evtobj.clientX-this.x+"px"
wi_Win.style.top=this.offsety+evtobj.clientY-this.y+"px"
return false
}
},

ResizeWin:function(e){
var evtobj=window.event? window.event : e   
if (this.Resizeapproved==1){
   
   
   
    wi_Win.style.height = ((evtobj.clientY+2) - parseInt(wi_Win.style.top)) + "px";
    wi_Win.style.width = ((evtobj.clientX+2) - parseInt(wi_Win.style.left)) + "px";
    wi_iframe.style.height = ((evtobj.clientY-45) - parseInt(wi_Win.style.top)) + "px";
    wi_iframe.style.width = ((evtobj.clientX+2) - parseInt(wi_Win.style.left)) + "px";
return false
   
    }
}

}
Avatar billede wedia Nybegynder
05. november 2008 - 15:02 #1
Det virker som om at den ikke sætter css styles på de div'er der bliver renereret af scriptet ?
Avatar billede w13 Novice
05. november 2008 - 16:47 #2
Når du sætter:

div.setAttribute( "class", "drag" )

skal du vist også sætte:

div.className="drag";

Og det samme ved alle andre setAttribute("class", ...) :)
Avatar billede wedia Nybegynder
05. november 2008 - 18:04 #3
Det virker perfect ! :) så smid et svar!

til andre der skulle have lingende problem så kan lige nævnes at IE heller ikke kan finde ud af setAttribute("style", style) men man skal bruge div.style.cssText = style;
Avatar billede w13 Novice
05. november 2008 - 18:23 #4
:)
Avatar billede olebole Juniormester
08. november 2008 - 19:03 #5
<ole>

Så vidt jeg husker, er det et gammel kompatibilitets issue mellem JavaScript og Java, der ligger til grund for IDL's og DOM Level 1's brug af 'className' i:
    ELEMENT.className = "minCSSklasse";

Ønsker man at bruge DOM Level 2+, må man i IE bruge:
    ELEMENT.setAttribute("className", "minCSSklasse");

- mens man i andre browsere kan bruge:
    ELEMENT.setAttribute("class", "minCSSklasse");

Det er til at overkomme, men bliver noget sandt roderi, når man skal til at spørge på klassen med getAttribute  :o|

Det er dog - ligeledes så vidt jeg husker - rettet i IE 8, når den bliver færdig  =)

- og det er helt korrekt, at IE ikke fejler med hensyn til at sætte style-objektet som en attribut. IE's opførsel er helt korrekt på dette punkt.

Det skal i denne forbindelse nævnes, at cssText først fornylig er blevet bredt understøttet, så den er nok stadig lidt usikker at bygge på.

/mvh
</bole>
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