[lnkForumImage]
TotalShareware - Download Free Software
Confronta i prezzi di migliaia di prodotti.
Asp Forum
 Home | Login | Register | Search 


 

Forums >

comp.lang.javascript

Mel Smith

1/13/2015 4:17:00 PM

Hi:

I'm just starting to use the <noscript> tag on a page -- but having
problems understnding it and getting it to work for me.

Problem:

If scripting is not available on a browser, I wish to Hide a Button.

Here is the button:

**************************
<div id="ibuttons">
<input type="button" onclick="shostats()" id="istatsbutt" value="View
Statistics" />
<hr />
</div>
**************************

<!-- and here is my failed attempt to 'hide' that button. Doesn't hide it in
latest version of Firefox-->
<!-- This next set of statements is placed immediately after the above div
code lines -->

**************************
<noscript>
<div id="ibuttons" style="display:none;">&nbsp;
<hr />
</div>
</noscript>
**************************

I know I really should not use the same id twice but I did. And I'm
obviously confused about how to use <noscript> correctly.

Summary Question:

What is a correct and simple way to hide this button if scripting is
disallowed in a browser ?

Thank you.

-Mel Smith
43 Answers

Tim Streater

1/13/2015 4:59:00 PM

0

In article <chkuofFkr3cU1@mid.individual.net>, Mel Smith
<syntel@cox.net> wrote:

>Hi:
>
> I'm just starting to use the <noscript> tag on a page -- but having
>problems understnding it and getting it to work for me.
>
>Problem:
>
> If scripting is not available on a browser, I wish to Hide a Button.
>
> Here is the button:

[snip]

> What is a correct and simple way to hide this button if scripting is
>disallowed in a browser ?

Why not start with the button hidden and use scripting - if allowed -
to make it visible.

--
"The idea that Bill Gates has appeared like a knight in shining armour to
lead all customers out of a mire of technological chaos neatly ignores
the fact that it was he who, by peddling second-rate technology, led them
into it in the first place." - Douglas Adams

Christoph M. Becker

1/13/2015 5:13:00 PM

0

Mel Smith wrote:

> What is a correct and simple way to hide this button if scripting is
> disallowed in a browser ?

Just turn the question around: what is a correct and simple way to show
a hidden button if scripting is available in a browser? That's rather
easy to accomplish:

<button id="my_button" style="display: none">Label</button>
<script>
document.getElementById("my_button").style.display = ""
</script>

However, it is even better to avoid hidden buttons, that require browser
side scripting to be useful, in the first place (consider CSS being not
available), so the following solution comes to mind:

<script>
document.write('<button id="my_button">Label<\/button>');
</script>

--
Christoph M. Becker

JR

1/13/2015 5:19:00 PM

0

On 13/01/2015 14:17, Mel Smith wrote:
> Hi:
>
> I'm just starting to use the <noscript> tag on a page -- but having
> problems understnding it and getting it to work for me.
>

<snip>

> Problem:
>
> If scripting is not available on a browser, I wish to Hide a Button.
>

<snip>

> Summary Question:
>
> What is a correct and simple way to hide this button if scripting is
> disallowed in a browser ?
>

Here's an advice from the W3C [1]:

"The noscript element is a blunt instrument. Sometimes, scripts might be
enabled, but for some reason the page's script might fail. For this
reason, it's generally better to avoid using noscript, and to instead
design the script to change the page from being a scriptless page to a
scripted page on the fly ..."

[1] <http://www.w3.org/TR/html5/scripting-1.html#the-noscript-e...


--
Joao Rodrigues

Jukka K. Korpela

1/13/2015 5:31:00 PM

0

2015-01-13, 18:17, Mel Smith wrote:

> I'm just starting to use the <noscript> tag on a page -- but having
> problems understnding it and getting it to work for me.

The official HTML5 specification includes the following advice:
â??The noscript element is a blunt instrument. Sometimes, scripts might be
enabled, but for some reason the page's script might fail. For this
reason, it's generally better to avoid using noscript, and to instead
design the script to change the page from being a scriptless page to a
scripted page on the fly� (followed by an example of that).
http://www.w3.org/TR/html5/scripting-1.html#the-noscri...

> If scripting is not available on a browser, I wish to Hide a Button.

You could then put that button inside a <noscript> element. This is
blunt instrument indeed.

> <div id="ibuttons">
> <input type="button" onclick="shostats()" id="istatsbutt" value="View
> Statistics" />
> <hr />
> </div>

Simply wrap all that inside <noscript>:

<noscript>
<div id="ibuttons">
<input type="button" onclick="shostats()" id="istatsbutt" value="View
Statistics" />
<hr />
</div>
</noscript>

Alternatively, you could have just <div id="ibuttons"></div> (i.e. with
empty content) and generate the button and associated elements
dynamically with JavaScript.

> <noscript>
> <div id="ibuttons" style="display:none;">&nbsp;
> <hr />
> </div>
> </noscript>

That would not make sense. When scripting is disabled, you want to
*exclude* the button. Here you would *include* it (though with a
presentational suggestion that it should not be presented). This would
not affect the presence of the button that you have specified earlier.

--
Yucca, http://www.cs.tut.fi/...

Thomas 'PointedEars' Lahn

1/13/2015 5:48:00 PM

0

Mel Smith wrote:

> I'm just starting to use the <noscript> tag on a page [â?¦]

Don't.

> What is a correct and simple way to hide this button if scripting is
> disallowed in a browser ?

To generate it with client-side scripting (â??progressive enhancementâ?).

document.write() has been mentioned, but if you are concerned that this
slows down rendering (which it does) too much, use document.createElement(),
document.getElementById() and HTMLElement::appendChild() onload. (An
example for that â?? filling out the results column â?? can be found in the
ECMAScript Support Matrix [see sig] if you run the tests. document.write()
is only used as fallback there.)

<http://www.w3.org/wiki/Graceful_degradation_versus_progressive_enhan...
(I have not reviewed the entire article.)

No space is written before sentence-ending marks in Germanic languages like
English.

--
PointedEars
FAQ: <http://PointedEars.... | SVN: <http://PointedEars.de...
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-...
Please do not cc me. / Bitte keine Kopien per E-Mail.$

Mel Smith

1/13/2015 6:58:00 PM

0

Hi All:

I'll read / review all responses, and go to work.

Thank you for the enlightenment.

-Mel


Mel Smith

1/13/2015 8:15:00 PM

0

Tim Streater said:
>
> Why not start with the button hidden and use scripting - if allowed -
> to make it visible.

Hi Tim (et al):

After reading all the warnings and suggestions from you folks, I did
what I always seem to do: Take the easy way out :( -- which is what Tim
suggested.

Here is Tim's method for accomplishing the 'hiding' of this 'buttons'
division:

*******************
<!-- in my CSS for this division I use: display:none; which hides this
button division. Then below I conditionally display it --->

<div id="ibuttons">
<input type="button" onclick="shostats()" id="istatsbutt" value="View
Statistics" />
<hr />
</div>
<script type="text/javascript">
document.getElementById("ibuttons").style.display="block" ;
</script>
*******************

But I still have to re-read all the responses to see if I should 're-do'
this easy way out.

Thanks toTim and y'all

-Mel

Mel Smith

1/13/2015 8:19:00 PM

0

Christoph said:


> Just turn the question around: what is a correct and simple way to show
> a hidden button if scripting is available in a browser? That's rather
> easy to accomplish:
>
> <button id="my_button" style="display: none">Label</button>
> <script>
> document.getElementById("my_button").style.display = ""
> </script>


Christoph and Tim Streater said essentially the same thing.

Thanks Christoph !

-Mel

Jukka K. Korpela

1/13/2015 8:40:00 PM

0

2015-01-13, 22:15, Mel Smith wrote:

> After reading all the warnings and suggestions from you folks, I did
> what I always seem to do: Take the easy way out :( -- which is what Tim
> suggested.

I donâ??t think you took the easy way. Itâ??s unnecessarily complicated, and
unnecessarily risky.

> <!-- in my CSS for this division I use: display:none; which hides this
> button division. Then below I conditionally display it --->

You are using both JavaScript and CSS when JavaScript would suffice.
Even in terms of amount of code, it is more complicated than simply
using <noscript> (just two tags!) by its spec and about as complicated
as generating the button dynamically. In terms of technologies used, it
involves an entirely different technology, CSS. And in terms of
robustness, it means that when CSS is disabled, the button appears even
when JavaScript is disabled.

So why would you get prepared for the non-availability of a particular
technology, JavaScript, in a manner that absolutely requires the
availability of another technology, CSS?

--
Yucca, http://www.cs.tut.fi/...

Mel Smith

1/14/2015 12:49:00 AM

0

Jukka said:

> I don't think you took the easy way. It's unnecessarily complicated, and
> unnecessarily risky.
>
>> <!-- in my CSS for this division I use: display:none; which hides this
>> button division. Then below I conditionally display it --->
>
> You are using both JavaScript and CSS when JavaScript would suffice. Even
> in terms of amount of code, it is more complicated than simply using
> <noscript> (just two tags!) by its spec and about as complicated as
> generating the button dynamically. In terms of technologies used, it
> involves an entirely different technology, CSS. And in terms of
> robustness, it means that when CSS is disabled, the button appears even
> when JavaScript is disabled.
>
> So why would you get prepared for the non-availability of a particular
> technology, JavaScript, in a manner that absolutely requires the
> availability of another technology, CSS?

Hi Jukka:

It seems so easy for me.

I added a line in the style section of my page for div#ibuttons:
display:none;

then, made the ibuttons division display in a <script> </script>tag.

That worked correctly and took only a minute or so.

Now when actual highly complex page does load and display, the tiny
addition of those few lines seems to me inconsequential.

What *was* hard was finding out how to *disable scripting* for my current
version of FF so I could run the <noscript> tests !

For those who haven't tried it on late versions of FF, here it is:

In the address bar of FF, one enters: 'about:config', then, after
promising to be careful, go looking for the 'javascript:enabled' setting,
Then, when you find it, right-click it, then toggle its value to 'false'.

*That* took me nearly an hour of googling before I happened on a post that
mentioned about the new way that FF is hiding the disabling of scripting

Thanks for the response.

-Mel

-Mel