📜 ⬆️ ⬇️

The farther into the forest, the partisans guerrillas

It all started with the fact that I decided to study Javascript, for a long time I was looking at this programming language. And finally it happened! I read Flanagan (a pretty good book, worth noting).

Having read a bit, I decided to practice using my favorite IDE - Visual Studio - a few simple examples, something more interesting is needed. About drag`n`drop. I wrote it started (I wrote in Visual Studio, which automatically generated a template htm page), under IE6 (!) It all worked with a half abarot. What was my surprise when FireFox 3.5 flatly refused to drag the item.
In order not to be well-grounded, I will give the code, a well-wounded victim as a result of a number of castrations of fittings:
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html >
< head >
< title > Untitled Page </ title >
< style >
.dragme{position:relative;}
</ style >
</ head >
< body >

< script language ="JavaScript" >

var ie= document .all;
var nn6= document .getElementById&&! document .all;

var x,y;
var dobj;

function movemouse(e)
{
if (dobj)
{
dobj.style.left = nn6 ? tx + e.clientX - x : tx + event .clientX - x;
dobj.style.top = nn6 ? ty + e.clientY - y : ty + event .clientY - y;
return false ;
}
}

function selectmouse(e)
{
var fobj = nn6 ? e.target : event .srcElement;

if (fobj.className== "dragme" )
{

dobj = fobj;
tx = parseInt(dobj.style.left+0);
ty = parseInt(dobj.style.top+0);
x = nn6 ? e.clientX : event .clientX;
y = nn6 ? e.clientY : event .clientY;
document .onmousemove=movemouse;
dbg( 'x:' , x, ' tx:' , tx);
return false ;
}
}

document .onmousedown=selectmouse;
document .onmouseup= new Function( "dobj=null" );

</ script >

< div id ="testDiv" style ="background-color:Purple;width:50px;height:50px" class ="dragme" >
</ div >

</ body >
</ html >

* This source code was highlighted with Source Code Highlighter .


So you have to go on the contrary. Firebug in hand and debug.
Fun ... for some reason in the code:
dobj.style.left = nn6? tx + e.clientX - x: tx + event.clientX - x;
dobj.style.top = nn6? ty + e.clientY - y: ty + event.clientY - y;


no value is set in dobj.style.left.
In general, as a result of digging and copy-pasting, because of which the appearance of the code suffered, it was found out that the line was to blame for everything:
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" " www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

it's worth removing it, and everything works just fine.
Although, if available, the browser should work in “Almost Standards Mode” (Almost meets the standards).
')
What is it? Microsoft introspection or guerrilla Firefox (and others like them). I, unfortunately, do not know.
The reason is eliminated, but the root of evil is not clear.
I hope someone this topic, sometime will help save some so precious time.

Threat "If you own the necessary information, I will be extremely grateful."

UPD
The answer was found thanks to @SilenIT users:

Rather, the second. For the sake of market share, the developers of FF quietly made in their Quirks mode support for ancient non-standard non-standard features such as document.all, auto-add "px" for sizes and coordinates without specifying units in CSS and anything else. Due to this, the ancient curves of the page work under it without alteration. But if any normal doctype is specified, the browser reasonably expects the author to know what he was doing ... :)


and Luge :
they themselves wrote that FF should follow standards. So add px in dimension :)

Source: https://habr.com/ru/post/69950/


All Articles