I'm working with a customisable software where the html code is autogenerated. The only code allowed to be written is javascript.
As the generated screens are not the most modern and responsive, I've started to include some jquery in order to manipulate the autogenerated html (I mean the DOM of course...).
A sexy idea would be to use the bootstrap framework. After some tests I've some good results with Firefox.
But I'm stuck with Internet Explorer: the web application has to be used in compatibility view (otherwise it's not usable), but the rendering of the bootstrap elements is bad (css are not applied etc etc... but working well if I'm not in compatibility view).
I tried different solutions like adding meta tags but no way, it doesn't give results.
Sure that some of you would have some ideas / advice?
Related
I am working on a project that I cannot change to Java 1.8 to take in the newest JavaFX, this may or may not be relevant to the issue at hand. I have been trying everything that I can find on the internet to override the default look and feel for a drop down selection within the web browser. I have tried Javascript solutions, pure CSS solutions, and even trying to build the functionality using lists and CSS. Nothing seems to work within the WebView/WebEngine on JavaFX 2.2, most of the solutions I have tried work perfectly fine within Firefox (I know its not the best comparison because Firefox doesn't utilize webkit under the hood).
Any ideas on how to style the dropdown part of the select feature with JavaFX 2.2 WebView?
List of techniques I have tried:
http://wellstyled.com/en/javascript-styleselect-jquery-plugin/
http://www.givainc.com/labs/mcdropdown_jquery_plugin.cfm
http://www.scribbletribe.com/how-to-style-the-select-dropdown/
http://cssdeck.com/labs/styling-select-box-with-css3
http://bavotasan.com/2011/style-select-box-using-only-css/
http://www.htmllion.com/default-select-dropdown-style-just-css.html
http://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/
I found something that works and actually improves my interface. I was searching the UX Stack Exchange and found Chosen. Original UX Stack Exchange post
I have create JavaFX app with webview (angularjs and bootstrap).
This is how the element is rendered in Chrome
This is how select element is rendered in ubuntu jar file
I have try multiple fixes but it seams that this dropdown is rendered from the browser itself (will be rendered different in linux, macos, windows) and there is no way to style it.
Mine working solution is to use plane js library as tom-select, no dependencies.
And here how select element is rendered in chrome and in jar. Success :)
So dropdowns aren't working when using foundation (not even the code copy-pasted from the foundation docs).
This Html is generated using Play! Framework, and I am viewing it using chrome. This code is running on Localhost, not a foreign server. (Maybe chrome is blocking js on localhost or something?)
The following is the code I'm using. Any help would be appreciated.
JSFiddle: http://jsfiddle.net/U7CZq/
code
There are a couple things that I see here that could be causing problems.
The first major issue is you are not including foundation.topbar.js file, which is needed to implement the dropdowns.
The other issue is you should call $(document).foundation() at the bottom of the page to allow foundations javascript components to manipulate the DOM of the topbar to add the proper elements and classes need for the topbar dropdowns.
I'm trying to use the jQuery Mobile Column-Toggle widget in a web application that will be almost exclusively used by non-mobile users, so I really just want the Column picker functionality, without any of the other jQuery Mobile features. However, if I load the jQuery Mobile js and css, my entire site picks up the mobile style, which conflicts horribly with my existing stlying.
I've tried several mobileinit options that supposedly should suppress the mobile styling (I've tried various combinations of these settings - I'm just combining them all here for brevity):
$(document).bind("mobileinit", function(){
$.mobile.autoInitializePage = false;
$.mobile.ignoreContentEnabled = true;
$.mobile.page.prototype.options.keepNative = "select, input, a";
});
The other option I've seen is to add data-role="none" to all of the elements you don't want to style, but that has two problems:
It doesn't work for me (I'm still investigating why, and will update my question soon).
It seems like bad practice to junk up your html with a ton of suppression tags, which also increase the page size.
I've tried using the download builder to create a customer jQuery Mobile package with only the Column-Toggle (and dependency) module, but that custom package doesn't seem to work at all.
So I have two questions really:
Is there an alternative column picker for HTML tables that I can use instead of the jQuery Mobile version. I feel like I have done extensive web research, but have found nothing else.
What methods exist to prevent jQuery Mobile from applying it's style to your whole page? There are a few other SO questions about this, and I'm afraid that there just isn't any currently working method to do so.
Update: I've actually changed to using the new column selection widget in the tablesorter plugin, and scrapped jQuery Mobile.
I'm making a jsp web based application some of the buttons and labels are not visible with internet explore but it is good with google chrome.How do i set application compatiblity so that user can see it in very good in handling with all browser
The browser compatibility is not dependent on the Java/JSP code, but on the HTML/CSS/JS code it generates. You, as being a web developer, should usually have full control over this. If you use a HTML strict doctype and write HTML code according the w3 standards (i.e. the page passes at least the w3 validator) and you use jQuery for writing JavaScript functions, then you have basically nothing to worry about.
Left behind CSS, this may be a pain when you use a wrong HTML doctype which pushes MSIE in the so-called "quirks mode" (which reveals the MSIE box model bug). So you'd like to get at least the doctype straight first (to start, use the HTML5 <!DOCTYPE html>). This should solve most of MSIE CSS issues and you can then fix the remaining CSS issues individually. More than often it concerns IE6/7 CSS specific bugs which boils down to the hasLayout bug. It's impossible to elaborate all those bugs in detail in a single answer. For that you can better ask a separate and specific question here whenever you stucks with fixing an individual CSS issue.
I'm learning jQuery and am about to write some pages using intensively that library. I just learned that some user disable JavaScript on their browser (I didn't even know that was possible and/or necessary).
Now, here's my question: What happens to my web application if a user disable JavaScript? For instance, I'd like to display some screens using AJAX and commands such as 'InsertBefore' to bring in live a DIV that will display the result.
So, if JavaScript is disabled, I wonder what going to happen to all this work that relies on JavaScript?
I'm kind of lost.
Thanks for helping
You may want to start by reading on Progressive Enhancement and Unobtrusive JavaScript.
I would also suggest to investigate how popular rich web applications like GMail, Google Maps and others, handle these situations.
I just learned that some user disable javascript on their browser
I do. The "NoScript" plugin for FireFox does the trick.
So, if Javascript is disabled, I wonder what going to happen to all this work that relies on Javascript?
It won't be functional.
A good practice suggests designing a site not to rely on JavaScript for major functionality. At least, accessing its content (in read-mode) should be possible. JavaScipt should only add interface enhancements like Ajax techniques etc. But the fallback version should always work.
I feel really sad when I see a site which is completely broken without JavaScript. Why can't people use CSS to put elements in proper places? Why do they try to align elements with JavaScript even if there is no dynamics involved?
The same goes for Flash sites. Once in a while a land upon a "web-design-agency" site which makes picky comments about me not allowing JavaScript. When I do I only see a basic primitive site with a few menus and that's it. What was the point of using Flash when the work is so primitive it can be done with raw HTML and CSS in an hour? For me it's a sign of unprofessional work.
All what's done in JavaScript won't work. Some users disable it for security reasons, NoScript is an excellent example. You can try it yourself by removing the scripts from your page or installing the NoScript-plugin for Firefox.
As a rule of thumb:
Make the website working with only semantic HTML
add the CSS
add the JS
But the website should be (almost) fully functional in stage 1.
If you disable Javascript in Safari things like Lexulous in Facebook won't work properly, the mouse letter carry function doesn't work.