CODEWITHSUNDEEP
javascriptjqueryhtmlcss
tomsseisums
tomsseisums

Reputation: 13357

jQuery CSS different results for browsers

I am building an app. that relies on percentages (for now, because it's the simpliest calculation) as offset positions.

Here is the example: http://jsfiddle.net/WeC9q/1/embedded/result/

The zooming works for every supported browser, while the arrow buttons that should move the car around does not.

I have identified the problem, the function Position(element); returns percentages only on WebKit browsers (Safari, Chrome). Other browsers use calculated pixel values.

Because movement functions rely hardly on percentages, pixel values simply doesn't cut it.

Any way to keep working with percentages, or I have to make some hardcore conversion scripts?

Thanks in advance!

Upvotes: 1

Views: 140

Answers (1)

Alex
Alex

Reputation: 6406

I fixed zooming + movement for Firefox. Should be working with webkit too, tested with Chrome.

http://jsfiddle.net/WeC9q/7/

How to convert pixel to percent:

if(t.indexOf('px') > 0){
   t = el.position().top / el.parent().height() * 100;
}

No "hardcore conversion scripts" required ;)

I'm not sure why zooming with firefox didn't work. However, adding "-moz-transform": 'scale('+ zoom +')' to the transformations solves the problem.

Upvotes: 1

Related Questions