How to use scrollTop prop in Safari - javascript

Looking in this site I see in the browser compatibility section, it looks like this
What does that mean? What do I have to do to use that property in safari?
If I go element.scrollTop, that works just like that?

Webkit is the browser engine used by Safari and Chrome, the mentioned item in MDN it's only to clarify that all versions in Safari that use webkit (since like forever) support the property perfectly.
Nothing to worry about, just use it wisely as you would with any other modern browser

Related

What is the browser support for element.removeAttribute?

The summary/details HTML5 element has terrible browser support. Therefore I built a non-jQuery fallback to make it work in non-supported browsers (IE and Edge). This fallback uses element.removeAttribute, but I am in doubt about the browser support of this command. I cannot find a definitive answer online. I have tried caniuse.com and MDN web docs, but they have no clear answers.
I know it works in my (updated) version of Firefox. Anyone has more info?
This method does not work consistently across browsers. It is BROKEN on MS Edge at least, and its brokenness is not mentioned by MDN, W3schools or caniuse at time of writing.
Basically, the method will fail when removing boolean attributes such as selected or hidden. The following will fail on Edge:
someDiv.removeAttribute("hidden");
Workaround is to set the attribute to "false" immediately before removing it.
someDiv.setAttribute("hidden", "false"); // "thanks" for the nonsense, MS
someDiv.removeAttribute("hidden");
This is not how boolean attributes are supposed to work, but that's how Edge requires it. Given that Edge is about to be dropped by Microsoft in favour of a Chromium-based alternative, we can expect this bug to remain unfixed, and the workaround to clutter our code for years.

JS library to simulate Internet Explorer?

There are some JS library to simulate the IE in Webkit? For instance: IE8 doesn't support border-radius currently (maybe on IE10). So I run a JS library that check if I'm using the border-radius then remove it to make similar to IE vision.
It's a crazy idea, I know, but work on IE is too slow, and if I can simulate it on Webkit, will be great! I need do it to an own project too.
Note: I know that exists a Chrome extension to make a IE tab, but the proposal is different: I need run on Webkit, but eliminating features not supported on IE.
Edit1: I'm working on a Webkit based IDE to developer HTML templates. Basically I need a button that emulate the IE view version without need a IE installed too (Mac, Linux for instance). Will be interesting have a Mozilla emulator too, for instance. Basically I will generate a CSS file to each browser too. For instance: -webkit properties not will be included to MSIE CSS. filter not will be included in Webkit CSS (but can be emulated).
So, I'll make a copy of current HTML page before apply a JS method that will edit or delete the unsupported content, make it similar to IE. If IE8 not support border-radius, it'll be removed and I'll see basically an IE version of page. If Mozilla not support -webkit-box-sizing it will be renamed to -moz-box-sizing if disponible.
I know of no script, and frankly I don't expect to see one any time soon as the task of re-creating the topography of IE's support for CSS in various versions of the browser would be a massive undertaking. It would further complicate things if the undocumented hacks like _height were supported too.
Frankly, the best way to test your site in IE8 is to use IE8+. In versions IE8 and up Microsoft introduced Browser Emulation, permitting you to fallback and emulate any number of IE versions all from a single browser - I use this daily, and it's a fantastic feature.
Within IE, open up the Developer Tools by pressing F12 and from there you can change the Browser Mode to IE8. No refresh will be necessary as the browser will handle that on its own. Using this method you can quickly test versions 7 through 10 (assuming you're testing from IE10) with the click of a button.
Disabling CSS3
If all you would like to do is disable CSS3 features, you can use the Strip Tease bookmarklet. It's not a fully-developed solution, so keep in mind that it won't handle things like advanced selectors, etc.

Does IE9 have browser mode down to IE7 and does this mean different version of Javascript

I'm having some trouble setting up virtual machines for testing IE versions (I use a mac) and have noticed on IE8 it has a browser switching mode.
Does this mode do a full switch for CSS and Javascript, I need testing to be 100% reliable.
Also does IE9 have a similar feature going down to IE7?
It's not going to be 100% reliable, I can tell you that right now. The only way to really test on IE7 is to test on IE7. For most layout checks, using the newer browser in emulation mode will be fine, but there are definitely bugs and oddities in the actual older browsers that the newer browsers don't mimic faithfully.
When you change The browser mode from the IE developer tools, IE renders the site according with your selection.
IE 9 also has this option, and if say you pick IE7, you'll get pretty much the same expercience you would get in that browser (from a layout and functionality point of view), but it's not completely reliable, some Javascript quirks are not the same (I can't remember any specific ones)
If you really need to test in IE7, get IE7 :D
More info here!
Press F12, and in the developer tools toolbar change browser mode to IE7 and Document Mode: IE7 (if you change the browser mode, then doc mode automatically changes also).
As for whether you get a different Javascript API? I don't know.
I agree with #Pointy, though. Realistically you actually need to run IE7. A VM is often a good way to do this if you don't want to muck about getting the different versions running side-by-side.

I made some voting buttons (think reddit/digg/etc) however they don't work below IE8

http://www.projectfitfamilies.org/recipes.php?page=treats
It only works in IE8 quirks mode, standards mode doesn't do anything. I don't have IE6 or 7 to test it out on directly, but I imagine if IE8 quirks fails, then so will IE6 and 7.
Thanks!
Per request, my content header:
header("content-type:application/xml;charset=utf-8");
Not necessarily. To check out how your site works in IE7 standards mode, you can use the (F12) developer tools to change the browser mode. For IE6, I would recommend using IETester
Your reciepies.php header looks something like this:
header("content-type:application/xml-xhtml;charset=utf-8");
You need to replace it with something this:
header("content-type:application/xml;charset=utf-8");
IE does not function with the xhtml.
Hope this helps, Julian
You can use conditional comments to strip out this function. IE6/7 are very old browsers, better to write clean code than to put some hacks so site can work 100% fine (if it's not commercial project).
For my personal experience, i put links to every browser download site (beside IE) when i detect IE6/7 on personal sites. Because nice HTML4 code with modern CSS works really bad in 6/7.
Add #numberwrapper12 { margin-left:33px; } to make it work in IE8 standards mode.
Seems to work fine in IE7. IE6 has some issues. Most noticeably, your sprite arrows don't display properly and you should add `.arrowwrapper a { overflow-y:hidden; } to fix that. Also the '# of votes' doesn't stay on one line. Widening the votebox by a single pixel fixes that.

onbeforeunload in Opera

I'm using the code that netadictos posted to the question here. All I want to do is to display a warning when a user is navigating away from or closing a window/tab.
The code that netadictos posted seems to work fine in IE7, FF 3.0.5, Safari 3.2.1, and Chrome but it doesn't work in Opera v9.63. Does anyone know of way of doing the same thing in Opera?
Thx, Trev
Opera does not support window.onbeforeunload at the moment. It will be supported in some future version, but has not been a sufficiently high priority to get implemented as of Opera 11.
onbeforeunload is now supported in Opera 15 based on the WebKit engine but not in any prior versions based on Presto.
Have you tried this?
history.navigationMode = 'compatible';
Reference, found via this page
I haven't actually tried it myself, but it looks promising.
Mobile Safari (iPhone/iPad) also doesn't support onbeforeunload, and I strongly suspect it is not likely to.
For detecting back/forward navigation there may be workarounds e.g. see Is there an alternative method to use onbeforeunload in mobile safari?.

Categories