Page 2 of 2 FirstFirst 12
Results 11 to 20 of 20

Thread: Layout engine in browsers

  1. #11
    Join Date
    Jul 2012
    Posts
    197
    Thanks
    55
    Thanked 3 Times in 3 Posts

    Default

    @John
    Thanks for your message. Your expert arguments constrained me to do the things as per your suggestions.
    I think you are a JavaScript expert .. can u apply my above logic of "nested browsing or lib calling" into the real world entity or a program. Iam checking it from my end..
    According to your expert view. What you say about the result of it ? The result is Exceptional, Degradable, Success OR Null ?

    @Adrian Refer it

  2. #12
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Well, any javascript can be made to degrade gracefully, as well as be made to perform as well as possible under a variety of browsers.

    I would recommend using jQuery. For most things that will automatically give you compatibility with most browsers used today. In addition, make whatever your script does be non-essential. Like with an interactive javascript menu, have all of the links right there on the page in a list of some type. For that you can use a <noscript> tag or simply set things up so that unless javascript is enabled, the menu is just ordinary links. Have javascript import or write the styles needed to make the menu require user interaction for - say drop downs, etc.

    Or for a slideshow, have all of the images on the page, use javascript to turn them into a slideshow.

    These are just general guidelines. For a specific situation, I could be more specific. Also be aware that many of the scripts here on Dynamic Drive do not degrade all that well, but most if not all can be made to do so.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    letom (03-19-2013)

  4. #13
    Join Date
    Jul 2012
    Posts
    197
    Thanks
    55
    Thanked 3 Times in 3 Posts

    Default

    John

    Thanks for your message.
    Keeping two versions of website. one is without javascript and css3 and other is with javascript and css3 is a best solutions may be ?
    Last edited by letom; 03-19-2013 at 11:46 AM.

  5. #14
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,998
    Thanks
    16
    Thanked 313 Times in 311 Posts
    Blog Entries
    12

    Default

    That's probably not necessary.

    The best solution would be to just make one site that;

    - retains functionality and accessibility even when javascript turned off
    - looks good dispite the extra fancy CSS3 effects

    The javascript and CSS3 are just extra layers that come into play for those browsers that support it, but the same site should still "work" without javascript, and look good with CSS2.

    One site means less work in the long run - less errors, no duplication, lower storage too.
    Last edited by Beverleyh; 03-19-2013 at 01:17 PM.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  6. The Following User Says Thank You to Beverleyh For This Useful Post:

    letom (03-20-2013)

  7. #15
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 517 Times in 503 Posts
    Blog Entries
    5

    Default

    Agreed - again, though, if you decide that a certain browser is not worth supporting - either because you have very little traffic from it, or because it doesn't support things you rely on - that's *fine*. Personally, I would want the site to be as functional "as possible" for them and not look terrible; and I think the trouble of actually blocking access is just silly.

    In terms of your "browser within a browser" idea, that's kinda what the chrome frame is. Also, most modern HTML5 features have a javascript substitute as well (deciding when to load such scripts is one of modernizer's primary uses).

  8. The Following User Says Thank You to traq For This Useful Post:

    letom (03-20-2013)

  9. #16
    Join Date
    Jul 2012
    Posts
    197
    Thanks
    55
    Thanked 3 Times in 3 Posts

    Default

    Thanks Adrian
    My first idea .. Forbidding the access from certain browsers is a foolish idea, because the browsers i provide the access to my site have the facility to disable javascript.(Almost all browsers have this facility) so if they disable the javascript and view our website, we can't predict what output they are getting. So as John suggested keeping important things available without JavaScript is best idea (graceful degradation) i mean and using noscripts . Otherwise we need to adopt the technique nested browser... Always thinking for finding a solution with the details you provided.

    Are you agreeing with my idea" Keeping two versions of website. one is without javascript and css3 and other is with javascript and css3 is a best solutions may be ?" same thing is adopted by GMAIL i mean ? Standard and HTML edition

  10. #17
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 517 Times in 503 Posts
    Blog Entries
    5

    Default

    Quote Originally Posted by letom View Post
    Are you agreeing with my idea" Keeping two versions of website. one is without javascript and css3 and other is with javascript and css3 is a best solutions may be ?"
    not exactly. maintaining separate websites (js vs. no-js; full vs. mobile; etc.) is usually more trouble than it's worth. Graceful degradation, along with some indicators/ notices about features that are "unavailable" because of browser support, is usually a better way to go. But every situation is different - it's up to you.

  11. #18
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    Do you have a smartphone? Have you ever visited a website that just don't work? Isn't that annoying?

    The logic here is very simple: maintain a website that is reasonably compatible with modern browsers and may contain special features that don't always work for rarer browsers. But then don't do anything that makes it completely inaccessible if someone doesn't use those browsers. It doesn't need to look great or do absolutely everything well, but it needs to be more or less accessible to everyone. I know that when I'm using a mobile device some websites won't work properly; but I expect them to be functional so that I can get the information I need-- maybe I want to look up a phone number to make a call.

    There are LOTS of ways to access websites-- mobile devices and search engine spiders are two examples-- do you want to make Google unable to read all of your content? I'd think not. But it doesn't need the fancy JS-based features.

    It's all about a common sense balance between enhanced features and making a reasonable fallback when those don't work.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  12. #19
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    As an example of gracefully degrading, here's a script I'm playing around with now:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Selective Print Demo</title>
    <!-- Begin Selective Print Styles -->
    <style type="text/css">
    #printarea {display: none;}
    </style>
    <style type="text/css" title="copyprint" media="print">
    #screencontent {display: none;}
    #printarea {display: block;}
    </style>
    <noscript>
    <style type="text/css" media="print">
    #screencontent {display: block;}
    #printarea {display: none;}
    </style>
    <style type="text/css">
    .print {display: none;}
    </style>
    </noscript>
    <!-- End Selective Print Styles -->
    <script type="text/javascript">
    // Selective Print Script (c)2013 John Davenport Scheuer
    // as first seen in http://www.dynamicdrive.com/forums/
    // username: jscheuer1 - This Notice Must Remain for Legal Use
    (function(){
    	var sheets = document.getElementsByTagName('style'), i = sheets.length, printsheet;
    	while(--i > -1){
    		if (sheets[i].title === 'copyprint'){
    			printsheet = sheets[i];
    			printsheet.disabled = true;
    		}
    	}
    
    	function copyPrint(element){ //function used to copy print the innerHTML of the passed in element
    		var savedtitle = document.title;
    		element = element.tagName? element : document.getElementById(element);
    		document.getElementById('printarea').innerHTML = element.innerHTML;
    		document.title = element.getAttribute('data-print-title') || savedtitle;
    		printsheet.disabled = false;
    		window.print();
    		document.getElementById('printarea').innerHTML = '';
    		document.title = savedtitle;
    		printsheet.disabled = true;
    	}
    
    	function printbuttons(e){
    		e = e || event;
    		var t = e.target || e.srcElement;
    		if(t.type === 'button' && t.value === 'Print'){
    			copyPrint(t.getAttribute('data-printid'));
    		}
    	}
    
    	if (document.addEventListener){
    		document.addEventListener('click', printbuttons, false);
    	}
    	else if (document.attachEvent){
    		document.attachEvent('onclick', printbuttons);
    	}
    })();
    </script>
    </head>
    
    <body>
    <div id="printarea"></div>
    <div id="screencontent">
    <input class="print" type="button" value="Print" data-printid="print" />
    <div id="print" data-print-title="List One">
    <ul>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    </ul>
    </div>
    
    <input class="print" type="button" value="Print" data-printid="print1" />
    <div id="print1" data-print-title="List Two">
    <ul>
    <li>11</li>
    <li>11</li>
    <li>11</li>
    </ul>
    </div></div>
    </body>
    </html>
    It allows you to selectively print one or the other of the two lists. If javascript is unavailable, the print buttons are not seen and the entire page may be printed normally. Even with javascript, if the user chooses to print the entire page in the normal way, the entire page may be printed. At least that's the idea. Demo:

    http://home.comcast.net/~jscheuer1/s...ntcontent3.htm
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  13. #20
    Join Date
    Jul 2012
    Posts
    197
    Thanks
    55
    Thanked 3 Times in 3 Posts

    Default

    Thanks John and Adrian

    John .. Your code exactly gives me some idea about how to do graceful degradation in good manner. From this point it is more helpful me to develop advanced applications in JavaScript work under different scenarios.

    Once again very thanks for the advices from both of you John & Adrian..

Similar Threads

  1. Replies: 1
    Last Post: 03-20-2013, 09:48 PM
  2. IE7 borked layout versus other browsers
    By PhxVyper in forum CSS
    Replies: 1
    Last Post: 08-20-2010, 02:21 PM
  3. Documentation Engine?
    By X96 Web Design in forum Computer hardware and software
    Replies: 3
    Last Post: 03-25-2010, 11:23 PM
  4. Replies: 1
    Last Post: 11-02-2009, 09:33 PM
  5. Replies: 1
    Last Post: 06-23-2009, 11:15 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •