We have a nav that expands on rollover (based on this code: http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm).
First, should we have a no-javascript version of the nav?
If yes, what is the best way to do so?
Yes you should always have a non-javascript version of your navigation.
The best way to do this is to apply any styles that hide sub-menus with javascript - so if the javascript isn't run the whole menu will be visible.
The HTML for the menu you've linked to looks fine - <ul>s and <a>s - nice and easy for a spider or non-javascript user to read.
It's always a good idea to have a no-Javascript version of everything.
Search engine robots usually do not interpret Javascript, so your pages might not be indexed if they can't be reached without Javascript.
A sitemap page that simply has a link to every static page on your site is the easiest way to make sure everyone can get to anywhere.
You may want to use unobtrusive javascript, which basically means have no javascript in your html page, just load the javascript files.
Now, if you start with a menu on the left, for navigation, using <li> and anchor tags then you can have some navigation without javascript.
So, if your javascript runs, the first thing it should do, when the dom tree is ready, is to set display: none on the navigation div and put in the new, more interactive navigation bar.
This way you can see how it works without any javascript.
Or, you can have a message telling them that javascript is required and do nothing else, but this would also be hidden as above.
I prefer to have things work, even if it has less functionality, without javascript, when possible.
Don't get me wrong: It's a good idea to support browsers that don't have JavaScript turned on, especially for something as simple as a menu.
However, when a project doesn't have it in the budget, or the application that you're writing is deeply dependent on JavaScript, it just doesn't make sense to support it.
Statistic from w3c and the counter indicate that 93% to 95% of users have JavaScript enabled. Now, mind you that this is a global demographic. To really determine if it's worth your time and money, it would behoove you to do your own statistics to determine what percentage of your traffic/demographic has JavaScript enabled.
As a side note: for reasons similar to why people are moving away from supporting IE 6, my company is also moving away from noscript support. Especially in large scale RIA's, it's just not practical to write the same thing twice. Maintaining two code bases for one project is not my idea of a good time. But of course, this is always based on the client and the target demographic.
Related
I am developing a large scale HTML5 app, and I really wonder about this issue. I will have a lot of dialog boxes and tabs that will open by user interaction.
I wonder what is the best practice - writing all the dialog boxes and tabs in the HTML document with display:none to all of them, or create these HTML sections on the fly with JS or jQuery every time the user making the relevant interaction.
What is better in terms of performance, ease of development, readability, etc?
Any help will be appreciated.
I'll try to address this question as good as I can.
1 - As I said in the comments, Avoid inline styling.
First and foremost this is because inline styling voilates DRY.
Having to repeat the same thing over and over again for this is very bad for maintenance and for developing since instead of changing code once you have to change it at ~100 places.
2 - Avoiding inline styling is also good for accessibility, some screen readers and search engine crawlers do indexing work and reading work based on css selectors and thusly using inline styling will force them to either ignore or misintrepret things.
3 - When working as developers it's easy to do inline styling "just for the fun" but what you're actually doing is mixing concerns. HTML is the content and CSS is the design.
Mixing these two usually leads to headaches and making my job as a developer that comes after you a pain in the effin ass since I have no idea what's styled and how.
Now, onto performance.
When you use inline styles, what you're telling the browser is basically "hey, for every page page view apply these styles to all of these elements." Now, this just became really apparent why this is bad.
You have no ability to cache and store your css and basically forces the browser to rerender your styles every time. Using an external CSS file will actually help you speed up your site since the browser caches it.
That was that for the css part.
The javascript you had asked about.
As I said, hide things with css and show with javascript. Now why do you want to do this instead of pulling everything in?
Well, you can do both. If you're only a webbrowser experience then you can do either, it doesn't matter. I myself prefer to have stuff in the DOM because it relates to content and if you're a large app having dozens of dozens of ajax calls will only make it harder for maintenance. I believe if you have to ajax stuff in make sure it counts and is logical and not just for the kicks (I think this applies if only you have jQuery and plain javascript at your disposal).
If you're working with backbone.js, for example, it's based on views and introduces some form of "MVC" into your frontend enabling you to have views with subviews that can pull content in from the server.
Hope that helps a bit with making a decision! :)
I would say it depends on how many tabs your application has and how big these are.
Big content inside the tabs mean that the application will take long to load when started and consume much ram. If this is the case, I suppose to load them as needed.
Small content inside the tabs will load fast, so load everything at once to increase performance when the tabs are clicked.
Don't forget to run some tests on older computers with a slow internet connection to see how your application behaves. Not everyone has the newest and fastest hardware.
Is it possible to make a vertical, multi-level navigation bar using only CSS and WITHOUT using JavaScript?
Like the one in here:
http://www.dhtmlgoodies.com/scripts/slidedown-menu2/slidedown-menu2.html#
I am trying to avoid using JavaScript because browsers today has an option that can disable JavaScript codes. I don't want my webpages to be broken because of that settings. Should I even be thinking about this? Or should I just use JavaScript anyway?
I was hoping on using only CSS for this, though I'm not sure if CSS is enough for this.
EDIT: By the way, is there a CSS selector when you click an <a> tag? Something like 'a:click'. I only know a:hover.
You won't be able to have any sort of animation like that example, unless you use CSS3 animations, in which case you will have LESS support than if you used JavaScript.
If it were me, I would just use JavaScript to do it. If the user has it turned off, they will still receive the menu, just not the animation (if you code it correctly).
There are some examples here of what you can do with CSS:
http://www.cssmenus.co.uk/dropdown.html
CSS is mainly for styling your webpages, while JavaScript is mainly for giving them different behaviors and interactivity.
That said, CSS3 is doing a lot to change that. But, if you want a web page with any kind of Cross- browser support currently, that's not really an option.
Like you have said, users have the option of disabling JavaScript, which is a good thing for security. This, however, means that you should always try to make any JavaScript supplementary to your page, so there is still some functionality even if JavaScript is disabled.
If you want any interesting effects in your menu, you will need some mix of CSS and JavaScript, and if you define and apply your styles within your CSS documents and not from within your JavaScript, you will still sustain some level of usability
I have a question about Javascript widgets. The widget I am working on simply embeds content on a page instead of using iframes. So far it looks good. But there are cases where some users layouts are messing up the widget. For example, the widget might require a width of 300px to appear. But the parent div is set to 250px and hence the right part of the widget is cut off.
I was wondering what sort of precautions should be taken to prevent this? I was talking to the product manager who mentioned he wanted me to check the parent div elements and get the size and then show an alternate message if their size is not accurate. But again, since this is Javascript and the widget is supported in many diff browsers(including IE6), I am wondering how fail-safe this method would be? What if I need to iterate the DOM all the way up before getting a valid size? I am also worried about performance here. This extra checks would slow down the delivery of my widget content to "good users" since I am adding a layer of complexity to all users. I don't want to penalize good users just because of the few errant ones.
I am not using any sort of JS library here, so any solution should not suggest the use of one. Also, the reason for not using a library was simply not to add extra weight to the page load to deliver a widget. I understand that "jquery" for example is small, but in my case, even 24k compressed seems like an overkill for a widget delivery that contains no core code for the widget.
Has anyone dealt with such issues before? What are your solutions to these?
There are reliable ways of determining the size of an element using JavaScript. You're quite right that you may need to iterate up the tree in some cases, but the answer you get will ultimately be quite valid.
Although you don't want to directly include any library code in this project, you may consider looking at how the major libraries implement their "what's the width of this element" functions to drive your own implementation.
Beware of quirks mode too.
I'd check to see of the page has Jquery, if not load it into the page using no-conflict mode. Then use jQuery to examine the page.
See: How to embed Javascript widget that depends on jQuery into an unknown environment
I'm building a one-page(one file) site and want to get insight as to whether or not I'm taking the most practical and intelligent approach. The site is a simple site for a graphic designer. It has 4 "pages" which are "about me", "contact", "work", and "photos." What I want to do is have 4 divs(absolutely placed in the same spot) with only one visible at a time. When you click any of the links it turns the visibility of the others off and the clicked link on. There are a few ways I could do this though:
Should I use Visibility to show/hide the layers?
Should I use Z-Index to show/hide the layers?
Is jQuery the best way to handle this?
Is using classes such as .visible .hidden the best way to cycle which divs are shown/hidden?
Any other tips to doing this for maximum efficiency?
I know some will tell me to just use separate pages but the site is simple with thumbnails and most of the size is in the header and jQuery script honestly. The thumbnails are fairly small and I don't see a point to making the site with more than one page if I don't have to.
Thanks for any insight.
As Pekka indicated, there may be arguments against doing this as a single-file site. But I'll assume you have a compelling use case. Answering the question:
I would approach this like so:
Use four divs.
No need to absolutely position them, just put them one after another.
Give each div a distinct ID with a semantic name (e.g., "about", "contact", etc.).
Don't hide any of them initially, just let them show one after another. Now the page can be used by people without Javascript, and it works just fine for search engines.
On page load, use Javascript to hide all but the one you want to show.
Determine which one you want to show by looking at the anchor in the location, e.g., "#about" means you want to show the about div, "#contact" means you want to show the contact page.
When you are changing from one to another, change the anchor to match. Now the site is bookmarkable/linkable.
Consider using a history plug-in to manage the anchors, so you can get forward and back support without absolutely tearing your hair out with all the browser inconsistencies. :-)
Not an answer to your questions, but there are compelling reasons speaking against this kind of approach.
Most importantly, it won't work with JavaScript turned off. It will be completely unusable for somebody who has no JavaScript. This makes it an absolute no-no for me.
It makes it impossible to link to specific pages
It's a SEO nightmare - maybe not that important in a 4-page site but still worth mentioning
Maintenance becomes more difficult, as there are four or more complex page structures melted into one
If you are using jQuery, just call .show() and .hide() as needed to toggle the sections.
However as noted by #Pekka, it is likely better to leave these as separate pages.
I think that using Jquery would be the best way to achieve this effect. Pekka mentioned that it won't work for users who have javascript turned off, but really-how many people have javascript disabled these days? Pretty much every single website you will visit relies on javascript.
In my opinion, the best way to get tabs using jquery is to use a plugin developed by Nettuts editor, Jeffrey Way. His personal site on which the plugin is located is under construction right now but I downloaded it a while ago. Here's a link to a zip file with the necessary files inside.
Please note that I have simplified his version greatly. This means I have removed a lot of styling but this shouldn't be a problem, since you probably will want your own unique styles.
JW-Tabs
Hope this helps.
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.