search

meanjs / mean

MEAN.JS - Full-Stack JavaScript Using MongoDB, Express, AngularJS, and Node.js -
http://meanjs.org
MIT License
4.87k stars 1.98k forks source link

noscript support #1397

Closed WanderZ closed 8 years ago

WanderZ commented 8 years ago

I would like to clarify where would should the <noscript> tag/text/content be at?

e.g. <noscript>Please enable javascript to use this application</noscript>

Problem is that the entire body is of class ng-cloak and I didn't want users to be looking at a completely blank screen.

Sorry if this question is unrelated or irrelevant to the development

lirantal commented 8 years ago

Just put it before or after the body?

WanderZ commented 8 years ago

Sorry, neither worked.

i tried both <noscript>Message here</noscript>

and

<div id="noscript">Message here</div>

shanavas786 commented 8 years ago

ng-cloak uses css property display to hide elements. https://github.com/angular/angular.js/blob/master/css/angular.css#L3-L7 Can't you override display property for id noscript with some thing like this ?

#noscript {
  display: block !important;
}
WanderZ commented 8 years ago

Pardon for the delay, the CSS property did not help when JavaScript is disabled.

It will, however, create a flicker when JavaScript is not disabled. (on first page load)

hyperreality commented 8 years ago

Perhaps what is happening is that the text is appearing behind the blank navbar.

If I put the following at the end of layout.server.view.html, after the final tag, I can see it just below the navbar: <noscript style="display: block !important;">Message here</noscript>

WanderZ commented 8 years ago

Sorry, @hyperreality could you elaborate more on the final tag?

I'm also modifying layout.server.view.html, and I tried to include it within the <head></head>, within <body></body>.

I tried placing it after the final </html> as well, it didn't appear for me. I tried placing it after the final </body> as well.

hyperreality commented 8 years ago

Simply putting

<noscript>Please enable Javascript to use this application</noscript>

just before the final tag in layout.server.view.html worked for me (using Firefox with Noscript plugin). It also shows up in console browsers like links.

Which browser are you using? Have you modified the navbar from the default app?

WanderZ commented 8 years ago

Sorry, I meant to ask if you could tell me which tag exactly do you mean, because I don't know which tag you are referring to via final.

Currently i'm using chrome, and using the no-script suite lite.

You can see my attempt here: https://github.com/WanderZ/mean/blob/master/modules/core/server/views/layout.server.view.html

shanavas786 commented 8 years ago

@WanderZ try this.

.....
  <noscript>
    <style>
      [ng\:cloak], [ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
        display: block !important;
      }
    </style>
    Please enable javascipt in your browser
  </noscript>
  <!--Embedding The User Object-->
........

It was not enough to override style of noscript. A little googling gave this explanation. Anyway the above snippet does the trick. I tried it in iceweasel 38.8.0 by changing javascript.enabled in about:config noscript

It shows the header also. But that can simply be overridden.

hyperreality commented 8 years ago

@WanderZ I viewed the page in Chrome using the same add-on as you and I got a blank page too. Also got the blank page using the styles in the post above. It appears that different script blockers produce different outputs, and to be honest I'm inclined to believe that that Chrome add-on is behaving weirdly: it has bad reviews in the app store, and all other browsers that I tried with JavaScript disabled do display the noscript tag text without the need for further styling.

In other words, the problem here is not caused by the html, but by the implementation. Perhaps there is a solution that will show up under that add-on in Chrome too, however I wouldn't worry too much about it.

lirantal commented 8 years ago

I assume we're safe to close this one. Good discussion going on guys! :+1: