progressive-enhancement

How to hide an element to be toggled with jquery while maintaining progressive enhancement

阅读更多关于 How to hide an element to be toggled with jquery while maintaining progressive enhancement

问题 All the answers I could find recommended adding display:none to css... but for a user without javascript, they will never see the element. jQuery(document).ready(function($){ $('#toggleElm').hide(); $('#toggleBtn').click(function(){ $('#shareLink').slideToggle(); }) }); still results in an element that appears and disappears during page load because the page begins rendering before the DOM has finished these days. <script type='javascript'> document.write("<style type='text/css'> #toggleElm

Progressive Enhancement and Initial Display State

阅读更多关于 Progressive Enhancement and Initial Display State

问题 I have a specific example, but I'm looking for the answer in general as well. I have page elements that I want to have initially hidden if JavaScript is enabled. Examples: A section of a form that toggles A submit button for a select box 'jump form' I am trying to avoid the 'content flash' when the elements are hidden after page load. SOLUTION I am putting the full solution here for posterity's sake. JavaScript file called in <head> section: document.documentElement.className = 'js'; Styles

Jqgrid & progressive enhancement: Successfully progresses from HTML, to local JSON, to remote JSON, but pager doesn't start correctly?

阅读更多关于 Jqgrid & progressive enhancement: Successfully progresses from HTML, to local JSON, to remote JSON, but pager doesn't start correctly?

问题 Take a look at what happens in my fiddle here: http://jsfiddle.net/tbH5H/ I'm trying to achieve proper progressive enhancement using jgrid. Everything works great, except I don't know how to give jqgrid the correct pager information on first load. My server side script dumps the JSON and a corresponding HTML table for SEO bots. But how can I also give the correct total page count to jqgrid on this first local load? The pager works correctly after a remote data pull as you can see in the

How to fade in an entire web page — accessibly

阅读更多关于 How to fade in an entire web page — accessibly

问题 A client has asked that their home page begin blank (only the logo and background image visible) and then fade in the navigation and content after a second or two. I could start with the content hidden via CSS and fade it in with jQuery. Unfortunately this violates progressive enhancement: the site would be completely unusable until active code runs, causing problems for the visually impaired using screen readers, among others. The two work-arounds I've considered are Flash and the <noscript>

How do I build a gracefully-degrading HTML5 Range?

阅读更多关于 How do I build a gracefully-degrading HTML5 Range?

问题 I'd like to use the <input type='range' /> from HTML5 for browsers that support it and degrade to a <select /> if not. I'm using Ruby-on-Rails, so failing all else, I could do something like this on the server-side. I would prefer, though, to have something more inline with the idea of progressive enhancement done via Javascript. Bonus points if it's JQuery. 回答1: Check out Modernizr, it will tell you if range is supported. I believe the technique is to create a range input and check it's type

What is the difference between Progressive Enhancement and Graceful Degradation?

阅读更多关于 What is the difference between Progressive Enhancement and Graceful Degradation?

问题 I'm confused on what the difference is between Progressive Enhancement and Graceful Degradation . To me they seem like the same thing. Can you please explain to me the differences between the two and in which situation I would use one over the other? 回答1: They ARE almost exactly the same thing, but they differ in context. There is a class of browsers called "A Grade Browsers". These are your typical audience members that (probably) make up the majority of your visitors. You'll start with a

Is it ok to manipulate dom before ready state?

阅读更多关于 Is it ok to manipulate dom before ready state?

问题 This is generally how I manage progressive enhancement whilst keep the experience clean, but how safe is it? is there potential for a race condition and this not working? Imagine the simple abstract scenario, you want to display something differently if you have javascript support.. this is generally what I will end up doing: <div id="test">original</div> <script type="text/javascript"> var t = document.getElementById('test'); t.innerHTML = 'changed'; </script> Many may claim you should use a

Submit hidden form after a delay, or immediately if a link is clicked

阅读更多关于 Submit hidden form after a delay, or immediately if a link is clicked

问题 My application's session management will redirect a user to a page where the user is told their session has timed out and please <a href="path/to/page.html" id="manual_link">sign in</a> . I'm trying to program the following behavior: If JavaScript is off (or otherwise not available), the user will have to click on the "sign in" link (POHTML; no problem). If JavaScript is running : a). progressively-enhance the link to instead submit the hidden form with an id of "security_redirect" ( document

Can JavaScript be cached if it is in the body tag of an HTML page?

阅读更多关于 Can JavaScript be cached if it is in the body tag of an HTML page?

问题 I am reading this How to make HTML rendering fast it says that scripts in the HEAD tag can be cached. Can JavaScript in the BODY tag be cached? If not, why does YUI recommend putting scripts in the body tag? 回答1: The code will be cached if you cache the entire HTML page, not otherwise. HTML pages are usually dynamic these days (generated by scripts and CGIs) and therefore not possible to cache without sacrificing functionality. Therefore you usually want to place JS code in external files

How to update a Kendo Grid dataSource to a remote url, but without triggering an ajax call?

阅读更多关于 How to update a Kendo Grid dataSource to a remote url, but without triggering an ajax call?

问题 Take a look at my fiddle here Unfortunately Kendo Grid doesn't seem to provide a native solution to good SEO (see here). But I thought I would give it a try, and see if there is anything I can do. This is what I have so far: To achieve a proper progressive enhancement approach with Kendo Grid, I have 3 parts: Pre-existing HTML table for SEO purposes ( see html section of fiddle ) The same data from the HTML table, but as JSON ( see top of js section of fiddle ). This is so Kendo will show the