I'm in the process of upgrading an old codebase containing jquery v1.2.7 to the v1.2.9. The corresponding UI upgrade is from v.1.6b to v1.9.2 (1.10 doesn't work with IE6). There are a bunch of ui plugins that are atleast 6 yrs old, and most of their authors no longer actively support them.
I took a layered approach of performing this. I first upgraded all the core files (jquery, jqueryUI), then upgraded inhouse js code (attr, $.browser) and such. Then I monkey-patched some of the plugins that had attr and browser. I've managed to work through all the bugs and errors so far. I now have a "clean" build, with a lot of the ajax functionality working as well.
BUT, I'm facing a pretty sticky issue with the facebox.js (yup THAT relic) plugin. I don't see any errors (js, network, or others) in the debuggers (IE8,FB,Chrome), but the facebox dialog displays incorrectly. It still displays the content inside it, but it is transparent and the background and edges do no show. I checked all my css as well as validated using w3c validator. Due to an NDA, I can't post the markup here. I realize that without the markup, even the considerable expertise here might not be able to give a complete solution. Could someone atleast give me some pointers on what I could be overlooking, or things to look for? TIA
eastwood
As you said, without markup it's difficult to figure out what's going on there, and my answer might be really stupid - but since you don't get any errors in the debug consoles and the box is transparent - is it possible that the images are missing/incorrectly referenced in the CSS?
Not sure how this old facebook.js plugin works, but I've seen one some time ago that used images for backwards compatibility with IE6 (for alpha transparency/rounded borders) - but not always. I think for modern browsers it drew that stuff itself. (pretty much like Facebook did it itself on its site)
So perhaps the error is related to JavaScript expecting images/etc. to be handled by CSS, but the CSS uses an only-IE6-hack?
Related
I was all excited over Polymer and starting developing a web app. I soon found out that Firefox fails loading the site correctly, see this SO post for details:
Polymer: Layout screwed up in Firefox, fine in Chrome
Then, I downloaded the latest version of Chrome on an iPhone 4 (iOS7) and the same thing for iPhone 6 (iOS8) and tried the website. I see the same errors as I see on Firefix (please see the link above).
In other words - going to my Polymer based website using Chrome for iOS fails just as bad as Firefox fails.
So, I'd just like to confirm that this is the case: Polymer does not work on iOS (no support in Safari, no support in Chrome for iOS). Correct?
As I also noted in my other SO question linked above, I was expecting it to work in all browser due to "polyfill", but that doesnt seem to help.
Am I missing something? =)
Note: Using Chrome for Android works fine, no errors there.
As I mentioned in the other thread, it's impossible to polyfill CSS scoping. Chrome on iOS is not actually Chrome, it's built using the iOS WebView (an old one at that), meaning there's no native Shadow DOM and no CSS scoping. The Shadow DOM polyfill does properly wrap DOM API methods like querySelector and getElementById, so you do get limited encapsulation, in that respect. But for CSS, the only thing the polyfill can do is rename your selectors, so :host .blah gets renamed to x-foo .blah and appended to a style tag in the head. It means you need to still write defensive CSS (as you do today) and avoid very loose selectors because they will be applied.
I experienced something very weird today and maybe it might help you.
My firefox was rendering as if polyfills didn't existed.So i went back to false on about:config dom.webcomponents.enabled and it came back to life.
Why? no clue.It worked, so, if you have dom.webcomponents.enabled true on firefox about:config might as well give it a try. IMHO looks like a polyfill bug on capable (yet buggy and poorly supported) web components browsers. worth a try.
Is there an "Angular/Dart" way to detect older unsupported browsers and prevent to continue with an elegant message (there are plenty of examples using javascript) rather than continue and show a weird layout with code that doesn't work?
Even the angulardart.org/demo site should do this IMO to stop IE8 (I know, but some enterprise customers still have those old browsers installed - and set as default - for legacy apps) from showing content that doesn't even work.
If Dart code cannot be executed the test has to be done in Js. I'm not aware of a library that makes this test.
The test should follow What browsers do you support as JavaScript compilation targets?.
I have a website that's using jquery.ie6hover.js (https://github.com/gilmoreorless/jquery-ie6hover)
And I've just updated to latest version of jQueryUI (1.9.1)
This combination crashes the browser when opening the page in IE6.
It's crashing when calling:
$.ie6hover();
Here's a jsfiddle: http://jsfiddle.net/umhxQ/
I'm testing IE6 using Virtual Box, with Windows XP SP3.
Any ideas how to prevent IE6 from crashing?
I stumbled upon "ie7.js", which seemed to do the trick.
It contains a fix for the hover bug in ie6 (without jQueryUI conflicts)
And jquery.ie6hover.js is no longer needed!
ie7.js - the one you found already - is a great script. It's a bit overkill if all you want to do is fix the hover, because ie7.js fixes loads of stuff. That's great, but if you don't need all the features, then you may be slowing down the browser unnecessarily.
If all you want is to fix the hover, my preferred script is Whatever:hover, which is the one I used to recommend for this.
(when I say "used to recommend", there's nothing wrong with it; it's because these days I don't really recommend supporting IE6 at all. But if you do need to support it, then Whatever:Hover is what I'd use)
This stems from my question that i started at MVC Beginner Question
Im now confident in developing a MVC website from the MVC side of things.
My fatal floor now is the UI level designing. i.e. designing views and master pages including css styling.
Just wanting to get any advice on where i should start? Im currently about to look at the expression studio to see if that will help.
I need to get up and running in this quickly so that it doesnt hold back the development of the website.
Thanks in advance
I would look at a CSS grid-framework like 960 Grid System or Blueprint.
There is often controversy from CSS/Markup purists as to whether the use of such frameworks is valid, but they often overlook that not everyone is a CSS expert. I have found that the use of these frameworks has saved me hours of productivity since my CSS skills (as a programmer) are not that great.
As far as using Expression, I tend to use this as a "test-bed" with simple HTML files. The Designer and CSS Style support seem to be more interactive than that which Visual Studio supports, so for quick mock-ups -- Expression, then move that HTML/CSS over to VS as soon as possible.
One other priceless tool to use while designing is the add-on "Firebug" for Firefox ... it allows you to inspect single elements on your page, the CSS properties affecting that element - it even allows you to change CSS attributes "on-the-fly" to immediately see the ramificatiions. This tool has saved me HOURS!
Consider finding a suitable theme in a free open source template.
Consider something that suits at http://www.freecsstemplates.org/.
I am currently coding a site that is using an extensive amount of sifr'ed links. The appearance of the sifr'ed text is fine, however the links only seem to work in Safari. I have seen that there are several other people having trouble with firefox with older versions of sifr, however I have updated to the latest nightly build for Sifr3.
The site is www.lauravinchesi.com/final/
Any help would be greatly appreciated.
Make sure to not replace the <a> directly, but replace its parent element.