What is the best way to make a HTML fallback via Angular?
I need something like this:
<span>{{angularText}} plain text</span>
The plain text would be a "backup" (perhaps generated by the server), in case the user doesn't have JavaScript enabled. Of course, if the user has JavaScript enabled, then I obviously don't want both to show.
<span ng-bind="angularText">Default text from server</span>
?
But like the others have mentioned, why use Angular to create an app if there's a slight chance some of the intended users have JS disabled?
I suggest adding this to your site as well:
<noscript>
You do not have JS enabled. Since this is an Angular based website, it won't do jack for you :-)
</noscript>
Inside index.html:
<noscript>
<h1>Your title</h1>
<div style="somestyles...">
Your content
</div>
</noscript>
If one wishes he/she can keep a skeleton of what the site supposed to have looked if js was enabled and then a request message inside to enable
javascript .
Related
I am looking into using a HTML WYSIWYG editor such as CKEditor but I am curious about what is to stop a user from submitting some HTML code that will change the layout of the page when I try to output their HTML.
Here is an example of two posts:
<p><b>This is my post</b></p>
<p>It has some nice HTML that does not break stuff</p>
and
</div>
<div style="height:10000px; width:10000px;">
<p>muhahaha</p>
</div>
As you can see, the first post is nice and simple, I can display that and it wont look crazy. But the second post could alter my page layout completely (have not tested but you get the idea.
<html>
<head>...</head>
<body>
<div class='content'>
<div class='post'>
<p><b>This is my post</b></p>
<p>It has some nice HTML that does not break stuff</p>
</div>
<div class='post'>
</div>
<div style="height:10000px; width:10000px;">
<p>muhahaha</p>
</div>
</div>
</div>
</body>
</html>
I know I can use htmlentities but this would then display the first post without the bold and I do not want that.
The stackoverflow website must have something like this built in, and I am wondering if there is a simple way to stop users being able to submit layout-changing HTML via a WYSIWYG editor?
CKEditor has a feature called Advanced Content Filter that in its default, automatic mode filters incoming HTML content by transforming and deleting disallowed elements, attributes, classes and styles. CKEditor will only allow content that was defined as allowed by enabled editor features (buttons, plugins).
It is highly configurable, too, so it lets you fully control what your users can and cannot submit to your website.
Have a look at the following resources to figure it out:
Content Filtering
Advanced Content Filter
Allowed Content Rules
Advanced Content Filter – Automatic Mode sample
Advanced Content Filter – Custom Mode sample
I have tried to enabled a banner in my opencart shop.
The site is PHP, i basically just need a banner at the top of the page to alert users that don't have JS turned on to turn it on.
i used
<noscript>
<div id="noscript-warning">We reccomend using javascript for the best viewing pleasure ></div>
</noscript>
However this does not seem to be executing.
Not getting feedback from comments, so I'll post possible issues.
You're testing with JavaScript enabled
Your CSS styling of the element is hiding the message
Your CSS styling of other elements is hiding the message
You've posted a modified example that doesn't reflect the actual code
Your trailing > is breaking the layout in whatever browser you're using to test (not likely)
You're attempting to generate the no-script element using JavaScript :P
The <noscript> tag is anecdotally deprecated (http://www.html-5.com/changes/noscript-tag.html), though I doubt that's the problem.
In any case, you can just create a script that removes a "You need Javascript enabled" div.
<div id="jserror">Enable Javascript Please!</div>
<script>
document.getElementById("jserror").style.display = "none";
</script>
Edit: an eventListener isn't even required.
What's the best way to toggle a "Please have Javascript enabled" warning?
Currently I've got something like this:
<div id='JSwarning'>ONLY SQUARES DON'T USE JAVASCRIPT</div>
to which I then apply .style.display = "none".
This shows the warning on every page for a little while until it loads. There must be a more graceful way. Can I do it with PHP?
(BTW, get_browser() is not the solution I'm looking for.)
//EDIT
Thanks everyone, that does the trick. Incidentally, to get the page to validate (XHTML 1.0 Strict), I needed to place the child node(s) in a block container.
<script></script>
<noscript>Please enable Javascript.</noscript>
http://www.w3.org/TR/REC-html40/interact/scripts.html#h-18.3.1
I think you're after the noscript tag:
<noscript>ONLY SQUARES DON'T USE JAVASCRIPT</noscript>
It's a browser convention, so you don't need to hide it when js is disabled (the browser does this automatically).
use the noscript tag
<script language="javascript">
document.write("Hello World!");
</script>
<noscript>
You need to enable javascript to view this page!
</noscript>
Does you apply this rule when DomContentLoaded is fired?
There is <noscript> too but it seems to me chrome ignores it.
The best way is to … not. Build on things that work.
JavaScript support is not a binary state. People can turn it on. People can turn it off. JS files can fail to load (because a server is down, or blocked). JS can be selectively enabled (e.g. with the Firefox NoScript extension).
Better to use progressive enhancement.
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.
I want a JavaScript with which I can change the font dynamically when the page is live (Arial to Times). But when I click Arial or Times, the page should not get refreshed. Can anyone please help me in this? Or can anyone please provide a script for this?
You should do this with javascript, not php.
Use javascript to change the style of the text dynamically. Php is run on the server, and is therefor not in the picture for your no-reload scenario.
Example
Here is the first simple example google returned (e.g. search "javascript change text font" for more examples):
<html>
<body>
<div id=hey>
<a onMouseover="document.getElementById('hey').style.fontFamily='courier'"> Make me COURIER!</a> ----
<a onMouseover="document.getElementById('hey').style.fontFamily='verdana'"> Make me VERDANA!!!</a>
</div>
</body>
</html>
If you really want to use PHP and don't want the entire page to reload, you would need some form of AJAX implmentation.
However...your problem can be solved more easily with Javascript and I would recommend using that instead. The jQuery library allows you to change CSS styles with minimal code. There are a few code examples on changing style attributes on the jQuery website.