CODEWITHSUNDEEP
javascripthtmldom-eventsmeta-tags
punkbit
punkbit

Reputation: 7717

Why is declaring doctype html preventing event drag or touch to trigger?

When declaring doctype html my code stops working, so no event drag or touch is triggered.

I'm working in a prototype to drag an image element inside a container element, to crop it. I'll also implement pinch to zoom, etc. To make this work better on mobile browsers, I need to set this in the head of the document, which helps preventing double taps and other unwanted event triggering:

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

You can find a working example, without doctype being declared:

http://jsbin.com/cokil/5

If I do declare doctype and put the meta viewport it stops working, but I can't seem to understand why:

http://jsbin.com/cokil/4

It's also been tested, just adding the doctype and no meta viewport. Won't work at all!

Any tips or advice ?

Upvotes: 1

Views: 266

Answers (3)

snrlx
snrlx

Reputation: 5107

When you declare a DOCTYPE, your page tells the browser to render the page strictly. If you simply omit the declaration, it will instead use the so called Quirksmode.

So obviously your code does not comply with HTML 5 strict-mode which is used when you add <!DOCTYPE html>.

I hope this is the advice you needed.

EDIT:

I found what causes your script from working. In your drag-Event: simply replace your old lines with:

imgEl.style.top = y + parseFloat(event.gesture.deltaY)+'px';
imgEl.style.left = x + parseFloat(event.gesture.deltaX)+'px';

The strict mode requires you to return numeric values that are followed by a px just like you are defining it in your style attribute: style="top:0px; left:0px;".

Upvotes: 2

punkbit
punkbit

Reputation: 7717

I found out that by concatenating + "px" fixes the issue:

        Hammer(element).on("drag", function(event) {

            imgEl.style.top = y + parseFloat(event.gesture.deltaY) + "px";
            imgEl.style.left = x + parseFloat(event.gesture.deltaX) + "px";

        });

Upvotes: 1

Yann Sagon
Yann Sagon

Reputation: 577

You should ensure that there is no html errors or the rendering will use the quirksmode even if you specify a doctype.

You can use this service to check the validity of your page: http://validator.w3.org/check

Upvotes: 0

Related Questions