SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,301
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    remove html element as the doc is being written (like how document.write adds)

    i'm removing a bit of html once the page has loaded with js (a message for non-js people) but that makes the page jump sometimes so i want to remove it earlier, as the page is being written/output like how document.write works. i thought of this which seems to work ok:
    Code:
    <script type="text/javascript">document.write('\x3C!--');</script>
    <p>HTML element not to be seen by people with JS</p>
    <script type="text/javascript">document.write('--\x3E');</script>
    it comments out the bit of html i want to remove for js viewers.
    is that the best way to do it? is there a bit less verbose one maybe?

    thanks.

  2. #2
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    >> If you are removing an actual tag, then you could use removeChild
    >> Otherwise, removing text from a tag could be done with node.innerHTML = ''

  3. #3
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,301
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    but those are things you can only do once page has loaded right? removeChild is what i'm using now from an onload event handler, and it makes the page visibly jump sometimes (which isn't surprising really) which is what i want to avoid. thanks.

  4. #4
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    True, but it is not possible with a front-end scripting language to handle data during the stream process from one point to another, but you have 2 options to workaround this:
    1. Place a DIV as the topmost element of BODY, with a white background and 100&#37; width and height, that gets hidden only after you have processed your markup as required
    2. Get your data via HTTPRequest. This would allow you to format the response before you output it to screen.

  5. #5
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,301
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    ok, thanks.

  6. #6
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Another approch is to use javascript in the head to add a style rule or two which are used to hide or show stuff. Given a slow/intermittent internet connection(the ever growing phone audience!), this has better progressive rendering behavior imo. Sometimes it can be confusing to a user to see different content as the page loads, and then all of a sudden it all changes(dom is loaded, javascript changes/upgrades the content).

  7. #7
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Why aren't you using the <noscript> element (for people with JavaScript disabled), that is what it's there for and it doesnt require all that fluffy code to work either.

  8. #8
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why not use the noscript tag?
    This one is supposed exactly for the usecase you want: display something when the user has no javascript activated. Here it would mean: put the elements inside the noscript which the javascript enabled user should not see.
    ...damn alex was a bit faster than me ;-)
    --------------------------
    Karsten Rieger
    http://www.tritium-design.de

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,788
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The <noscript> tag is obsolete - the DOM replaces it with something far more flexible - especially since in most cases it isn't whether just JavaScript is supported that is important but whether certain JavaScript features are supported..

    You can get exactly the effect you want with far greater flexibility than using noscript simply by attaching the JavaScript that hides the content at the BOTTOM of the body of the page so it can run as soon as the HTML finishes loading (ie almost immediately) rather than having to wait until all the other files are loaded as well (as using onload does).

    If that isn't fast enough for you then just move the script up to be immediately under the content that the script needs to hide.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  10. #10
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi felgall,

    I would not go as far as calling the noscript tag obsolete, but here is a description of an IE8 bug concerning noscript tags styled as block elements. Very funny - new IE - new problems. ;-)
    --------------------------
    Karsten Rieger
    http://www.tritium-design.de

  11. #11
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,788
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by fidel karsto View Post
    Hi felgall,

    I would not go as far as calling the noscript tag obsolete, but here is a description of an IE8 bug concerning noscript tags styled as block elements. Very funny - new IE - new problems. ;-)
    <nocript> IS a block element.

    everything you can do with <noscript> can be done just as easily if not easier with JavaScript since JavaScript can hide an inline tag while <noscript can only hide a block, JavaScript can hide based on lack of support for particular parts of JavaScript while <noscript> can only hide if JavaScript is not available at all. So what can be done with the <noscript> tag represents about 0.1$ of what can be done with JavaScript when it comes to hiding parts of the page when the JavaScript is able to work.

    <noscript> is obsolete because there is no situation where there is not a better solution. It would be useful around a <link> tag to attach a CSS file for when JavaScript isn't available but it is not allowed outside of the <body> of the page and so can't be used in the one situation where it could do something that can't be better done with JavaScript.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  12. #12
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,301
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    > Another approch is to use javascript in the head to add a style rule or two which are used to hide or show stuff.

    hmm, yup that's not a bad idea.

    > Why aren't you using the <noscript> element

    because i only vaguely knew about it and had completely forgotten it; and that's the point of this question, to find out a nice simple way of doing it which i thought may exist but couldn't put my finger on, such as noscript, rather than the way i shew which turns out not to work in my version of safari only firefox so (a) it's long winded, (b) doesn't work in all (maybe hardly any) browsers

    > The <noscript> tag is obsolete

    oh.

    > If that isn't fast enough for you then just move the script up to be immediately under the content that the script needs to hide.

    eh? surely that's not ok? code which messes with removing stuff needs to run once the page has loaded does it not?

    > <noscript> is obsolete because there is no situation where there is not a better solution.

    well it seems to me the best sollution for what i'm after. don't see a problem with it, unless some browsers don't abide by it...

    > but here is a description of an IE8 bug concerning noscript tags styled as block elements. Very funny - new IE - new problems. ;-)

    oh. but as felgall says noscript is a block element. so does that mean noscript doesn't work in ie8?

    also, as noscript is a block element, that means you wouldn't do this then right?:

    <nostript>
    <p>message for non-JS people</p>
    </noscript>

    you'd not have the <p></p> tags just noscript?

    thanks

  13. #13
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,788
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by johnyboy View Post
    >
    also, as noscript is a block element, that means you wouldn't do this then right?:

    <nostript>
    <p>message for non-JS people</p>
    </noscript>

    you'd not have the <p></p> tags just noscript?

    thanks
    Most block elements (apart from <p> can contain other block elements so that would be valid. It is when you want to put a noscript tag inside a <p> or inline element that it is invalid.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  14. #14
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just for the matter of completion:
    Here is the link to the bug article I mentioned above: http://www.positioniseverything.net/...bug/index.html

    To sum it all up: the noscript element was intended exactly for the described usecase. The only problem here is flexibility. If you want to test against certain language features (like javascript 1.1 or javascript 1.4) you are better off with writing a script for it. In the case of IE8 you even need to style the noscript element as inline to avoid ghost appearance and to work properly.
    --------------------------
    Karsten Rieger
    http://www.tritium-design.de

  15. #15
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,788
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by fidel karsto View Post
    In the case of IE8 you even need to style the noscript element as inline to avoid ghost appearance and to work properly.
    and if you do that then you can't place any block elements (such as <p> ) inside it.

    Since almost all the time you will have additional requirements such as support for the DOM (at least 99.9&#37; of the time) or support for Ajax, you would still need to have JavaScript that adds the message back for those situations where the additional requirements are not met and so the code is ALWAYS a lot simpler if you bin the <noscript> tag and just use JavaScript to hide the content when it isn't required.

    As an example compare this option using noscript (not valid if you are supporting IE8)

    Code:
    <div id="script"></div>
    <noscript><p>JavaScript is <b>not</b>
     supported.</p></noscript>
    <script type="text/javascript">
    document.getElementById('script').innerHTML =
    "<p>JavaScript is supported</p>";
    </script>
    with this much simpler version that is also valid in IE8 and doesn't use <noscript>

    Code:
    <p>JavaScript is <b id="script">not </b>supported.<p>
    <script type="text/javascript">
    document.getElementById('script').style.display = 'none';
    </script>
    Since IE8 doesn't allow for paragrapgs of text to be places inside a <noscript> and otther browsers require the <noscript> tag to be wrapped around the paragraphs the simplest fix is to avoid the unnecessary <noscript> tag completely and just use JavaScript.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  16. #16
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,301
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    > Since IE8 doesn't allow for paragrapgs of text to be places inside a <noscript> and otther browsers require the <noscript> tag to be wrapped around the paragraphs the simplest fix is to avoid the unnecessary <noscript> tag completely and just use JavaScript.

    i don't fully understand the problem ie8 has because i've only skimmed the article and in a browsershots.org test of my page in ie8 it was fine. seems i've just luckily avoided the problem.

    basically i've done it like this:

    <noscript>
    <p>message for non-JS people</p>
    </noscript>

    and there's no problem in ie8. i think, from the article, if i were to put various style onto that p (like border or background colour) i'd see problems, not sure, don't care that much either to be honest because for what i've done it's fine.

    there was a problem in my old version of safari: it completely ignored noscript when js was turned on, so i'm still removing it, if it's still there, in the normal js way for browsers which have js on but don't abide by noscript.

    i know you say it's redundant felgall but not in my case. works nicely in general; removes the message before page displays thus avoiding visual jump which is exactly what i was after.

    anyway, great, thanks all

  17. #17
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,301
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Code:
    <div id="script"></div>
    <noscript><p>JavaScript is <b>not</b>
     supported.</p></noscript>
    <script type="text/javascript">
    document.getElementById('script').innerHTML =
    "<p>JavaScript is supported</p>";
    </script>
    with this much simpler version that is also valid in IE8 and doesn't use <noscript>

    Code:
    <p>JavaScript is <b id="script">not </b>supported.<p>
    <script type="text/javascript">
    document.getElementById('script').style.display = 'none';
    </script>
    i didn't think you were supposed to do that kind of thing until after the page had loaded?

  18. #18
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,301
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by johnyboy View Post
    there was a problem in my old version of safari: it completely ignored noscript when js was turned on
    scrub that; it's working fine in old safari

  19. #19
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,788
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by johnyboy View Post
    i didn't think you were supposed to do that kind of thing until after the page had loaded?
    No you just can't do it until after the specific DOM element has loaded (as until then the element you are trying to change doesn't exist). Straight after a DOM element has loaded the JavaScript can interact with it even though the rest of the page hasn't loaded yet.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  20. #20
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,301
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    oh right, i didn't know that. i'm sure (as in not entirely sure) i've read in several places that you can't do that sort of thing until the whole document has loaded, like from an onload event handler. ok, thanks.


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
  •