My site heavily depends upon Javascript and if I turn it off my website looks real ugly.
I want to force the user to use Javascript by show him a notification to turn it on, else prompt him that site can't be viewed.
What do I do to achieve this?
Have a look here:
noscript tag
All you can do is test that javascript is turned on or not, and show a notification that the site is best viewed with javascript turned on.
<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>
Your browser does not support JavaScript!
</noscript>
Also, feel free to google 'html script tag' and see http://www.w3schools.com/tags/tag_noscript.asp
First off, be warned that forcing the user to do anything is usually considered quite rude. Lots of people keep javascript either disabled entirely or severely restricted precisely because some twerp wanted to use it to force them to do something or look at something.
With that said, you can include some text in <noscript></noscript> tags. That text will only show if the browser doesn't have javascript, or has it disabled.
For your question:
By default show the notification, and with JS + some sort of document/DOM Ready event just remove the notification. Try not to do this on window/onload because then you'll see the notification until ALL resources of that page have been loaded, which takes longer than dom ready. That way, everybody who doesn't have JS will see the message.
But ideally you'd just want to have a website that works with, or without javascript. Maybe unobtrusive javascript is a nice search term for you.
I watched an interesting talk by John Resig (The creator of JQuery) and he even mentions in his video, do not rely on Javascript.
You create a landing page that uses a <noscript> tag to inform the user that your web site doesn't work without Javascript. Then you go and pray $DEITY for forgiveness because you added to the general mire pool that is the web.
Related
I had a java script code in asp.net ,It's works fine in all browser but when javascript is disabled in browser the script is not working ,so can anyone suggest me where to write the code
so can anyone suggest me where to write the code
You don't have much choices left other than doing it on the server. Of course there are some levels of interaction that are possible only to be made with javascript. For example things like AJAX calls, subscription to events in DOM elements like onchange, ... If the user disables javascript your site will become less dynamic, that's for sure.
If you absolutely need to use javascript you could tell the user that your site requires it in order to work properly.
unfortunately there is no way around it...if javascript is disabled...then give users a message to turn it back on.
You could alert the user using the noscript-tag that he or she should turn it javascript back on
<noscript>
Javascript is disabled
</noscript>
I have a quick question. I want to create a small Scheduler widget to put on my clients websites. So if I need to make a global change to the form, I would just have to do it once.
The form will have to be unique to the website because I need to know which e-mail address to send the form to once it is submitted.
I was thinking of an iFrame I could use like this:
<iframe src="http://www.domain.com/scheduler/shop-name/"></iframe>
But I don't think that would be the best method, and I wouldn't want someone directly going to that URL.
Another option is something like this:
<script type="text/javascript">
shop_id = '114000300';
</script>
<script src="http://www.domain.com/js.widget" type="text/javascript"></script>
I'm not too sure how to execute that option yet, I'm not that experienced with Javascript but what do you guys think? What are the pros and cons of the iFrame vs Javascript?
Just wondering what the best option is, and if anyone has some tips on how to get started and any security issues I need to look out for.
Thanks!
An <iframe>
Cannot communicate its size to the parent window without additional work, which limits resizing.
Provides better isolation, as you cannot access anything on the parent page. This may be a plus from your customer's perspective.
Could be written in pure HTML, no Javascript experience necessarily required.
Has its own independent CSS styles.
Works for users who have scripting disabled.
A script
Allows you full access to the parent page
Will slow page load, as the browser will load your script before rendering the rest of the page. (At least as you have shown there, there are ways around this.)
Obviously requires some experience with Javascript.
Must share styles with the parent page. This could cause compatibility problems if your client's page uses broad-scoped style rules, such as rules for * or div.
Few more points in addition to #Dark Falcon's answer,
You have more control on the design in case of an iframe. In case of javascript widget, the client's styling might conflict with the widget's styling.
iframe is better in terms of security (cookies stored are different).
Making a JavaScript widget needs more care and expertise as you need to ensure that the other JavaScript doesn't conflict yours'. (global vars etc...)
You can use a JavaScript that writes an iframe dynamically if you want to avoid someone from going directly to the URL.
How does Javascript work in the browser address bar?
To be more specific: how can I make a script that goes to a web site and clicks a button on that site? Not maliciously, of course, I'd like to be able to do this for personal use.
You want to make a bookmarklet.
JavaScript in the address bar is evaluated just like any JavaScript.
On your second point, you don't. That's called cross site scripting or XSS. You can't have JavaScript from one site modify another site.
You could potentially write an extension to your web browser that will accomplish what you want.
View the source code of the page and find the reference to the button you'd like to click. You're looking for something like this:
<input type="submit" value="Click Here" id="theButtonId"/>
Then you can type in the address bar:
javascript:document.getElementById("theButtonId").click();
To navigate to a website, do this:
javascript:window.location='http://www.google.com';
What you are talking about is called a "bookmarklet", and depending on exactly what you are talking about, you could probably accomplish it via a bookmarklet... but it may be more trouble than it's worth.
Bookmarklets are generally used to make simple modifications on the page you are currently viewing. For example, a book-marklet may hide all the pictures on a page.
You can write bookmarklets that interact with another page, for a complex example see the jQUeryUI boomarklet: here
However, generally the type of thing you are talking about would be accomplished via something like a Grease Monkey/User Script and/or "extension". I would recommend going that route instead.
Okay i know that it's important for your website to work fine with javascript disabled.
In my opinion one way to start thinking about how to design such websites is to detect javascript at the homepage and if it's not enabled redirect to another version of website that does not javascript code and works with pure html (like gmail)
Another method that i have in mind is that for example think of a X (close button) on a dialog box on a webpage. What if pressing the X without any javascript interference lead to sending a request to the server and in the server side we hide that dialog next time we are rendering the page, And also we bind a javascript function to onclick of the link and in case of the javascript enabled it will hide the dialog instantly.
What do you think of this? How would you design a website to support both?
One way to deal with this is to :
First, create the site, without any javascript
Then, when every works, add javascript enhancements where suitable
This way, if JS is disabled, the "first" version of the site still works.
You can do exactly the same with CSS, naturally -- there is even one "CSS Naked Day" each day, showing what websites look like without CSS ^^
One example ?
You have a standard HTML form, that POSTs data to your server when submitted, and the re-creation of the page by the server displays a message like "thanks for subscriving"
You then add some JS + Ajax stuff : instead of reloading the whole page while submitting the form, you do an Ajax request, that only send the data ; and, in return, it displays "thanks for subscribing" without reloading the page
In this case, if javascript is disabled, the first "standard" way of doing things still works.
This is (part of) what is called Progressive enhancement
The usual method is what's called progressive enhancement.
Basically you take a simple HTML website, with regular forms.
The next enhancement is CSS - you make it look good.
Then you can enhance it further with Javascript - you can add or remove elements, add effects and so on.
The basic HTML is always there for old browsers (or those with script blockers, for example).
For example a form to post a comment might look like this:
<form action="post-comment.php" method="post" id="myForm">
<input type="text" name="comment">
</form>
Then you can enhance it with javascript to make it AJAXy
$('#myForm').submit(...);
Ideally the AJAX callback should use the same code as post-comment.php - either by calling the same file or via include, then you don't have to duplicate code.
In terms, it is not important to make your site work with JavaScript disabled. People who disable JavaScript are people who want to hack bugs into your site, they don't deserve to navigate it correctly. Don't waste your efforts with them. Everybody know the Web is unsurfable without JavaScript.
The only thing you have to be careful is about your forms: Don't ever trust filters in JavaScript, Always filter it again on server-side, ALWAYS!
Use Progressive Enhancement, study jquery to understand it. It takes some time till you get your head around it. For example your idea:
to detect javascript at the homepage
and if it's not enabled redirect to
another version of website that does
not javascript code and works with
pure html
how would you detect if javascript is disabled? not with javascript, obivously...
you're thinking the wrong way round: the most basic version has to be the default version, and then, if you detect more advanced capabilities, you can use them.
Try to avoid separate versions for different bowsers/capabilities for as long as you can. It's so much work to keep all versions in sync and up-do-date.
Some good ressources to get you started:
Understanding Progressive Enhancement
Progressive Enhancement with JavaScript
Test-Driven Progressive Enhancement
The best way is to design a page that works adequately without JS. Then add a <script> block at the bottom of the <body> section with code like this:
window.onload = function() {
// Do DOM manipulations to add JS functionality here. For instance...
document.getElementById('someInputField').onchange = function() {
// Do stuff here that you can't do in HTML, like on-the-fly validation
}
}
Study the jQuery examples. They show lots of things like this. This is called "unobtrusive JavaScript". Google for that to find more examples.
EDIT: The jQuery version of the above is:
$(document).ready(function() {
// Do DOM manipulations to add JS functionality here. For instance...
$('#someInputField').change(function() {
// Do stuff here that you can't do in HTML, like on-the-fly validation
});
});
I added this just to show the lower verbosity of jQuery vs. standard DOM manipulation. There is a minor difference between window.onload and document.ready, discussed in the jQuery docs and tutorials.
What you're aiming for is progressive enhancement. I'd go about this by first designing the site without the JavaScript and, once it works, start adding your JavaScript events via a library such as jQuery so that the behaviour of the site is completely separate from the presentation. This way you can provide a higher level of functionality and polish for those who have JavaScript enabled in their browsers and those who don't.
I have been using a noscript tag to show a warning when users have JavaScript disabled or are using script blocking plugins like Noscript. The website will not function properly if JavaScript is disabled and users may not figure out why it is not working without the warning.
After the latest Google algorithm shuffle, I have seen the daily traffic drop to about 1/3 of what it was in the previous months. I have also seen pages that were ranking #1 or #2 in the SERPS drop out of the results. After doing some investigating in webmaster tools, I noticed that "JavaScript" is listed as #16 in the keywords section. This makes no sense because the site has nothing to do with JavaScript and the only place that word appears is in the text between the noscript tags.
It seems that Google is now including and indexing the content between the noscript tags. I don't believe that this was happening before. The warning is three sentences. I'd imagine that having the same three sentences appearing at the top of every single page on the site could have a damaging effect on the SEO.
Do you think this could be causing a problem with SEO? And, is there any other method to provide a warning to users who have JavaScript disabled in a way that won't be indexed or read by search engines?
Put the <noscript> content at the end of your HTML, and then use CSS to position it at the top of the browser window. Google will no longer consider it important.
Stack Overflow itself uses this technique - do a View Source on this page and you'll see a "works best with JavaScript" warning near the end of the HTML, which appears at the top of the page when you switch off JavaScript.
<noscript> is not meant for meaningless warnings like:
<noscript>
Oh, no! You don't have JavaScript enabled! If you don't enable JS, you're doomed. [Long explanation about how to enable JS in every browser ever made]
</noscript>
It's meant for you to provide as much content as you can, along with a polite mention that enabling JS will provide access to certain extra features. You'll find that basically every popular site follows this guideline.
I don't think using <noscript> is a good idea. I've heard that it is ineffective when the client is behind a JavaScript-blocking firewall - if the client's browser has JavaScript enabled the <noscript> tag won't activate, because, as far as the browser's concerned, JavaScript is fully operable within the document...
A better method IMO, is to have all would-be 'noscript' content hidden by JavaScript.
Here's a very basic example:
...
<body>
<script>
document.body.className += ' js-enabled';
</script>
<div id="noscript">
Welcome... here's some content...
</div>
And within your StyleSheet:
body.js-enabled #noscript { display: none; }
More info:
Replacing <noscript> with accessible, unobtrusive DOM/JavaScript
Reasons to avoid NOSCRIPT
Somebody on another forum mentioned using an image for the warning. The way I see it, this would have three benefits:
There wouldn't be any irrelevant text for search engines to index.
The code to display a single image is less bulky than a text warning (which gets loaded on every page).
Tracking could be implemented to determine how many times the image is called, to give an idea of how many visitors have JavaScript disabled or blocked.
If you combine this with something like the non-noscript technique mentioned by J-P, it seems to be the best possible solution.
Just wanted to post an interesting tidbit related to this. For a site of mine I have ended up doing something similar to what stack overflow uses, but with the addition of a "find out more" link as my users are not as technical as this site.
The interesting part is that following advice of people aboce, my solution ditched the noscript tag, instead opting to hide the message divs with javascript. But I found that if firefox is waiting for its master password, this hiding of the message is interupted, so I think I will go back to noscript.
If you choose a solution based on replacing the div content (if js is enabled, then the div content gets updated) rather than using a noscript tag, be careful about how google views this practice:
http://support.google.com/webmasters/bin/answer.py?hl=en&answer=66353
I'm not sure google will consider it deceptive, but it's something to consider and research further. Here's another stackoverflow post about this: noscript google snapshot, the safe way