473,386 Members | 1,668 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,386 software developers and data experts.

Set block element display:none on click

VK
Hi,

given a block element with some content and a link, is it possible to
set this element display to none by CSS only? It has to be done only
once. It is an absolutely positionned element so visibility:hidden will
do as well.

<div>
<p>Some content</p>
<p><a href="#">Hide</a></p>
</div>

Nov 3 '06 #1
8 4227
Scripsit VK:
given a block element with some content and a link, is it possible to
set this element display to none by CSS only?
Of course. You just set display: none for the element.

The correct answer to the question you ask in the Subject line is "No."
There is no CSS selector related to clicking. (It's a bad idea to imply
anything from the Subject line in the message body, and particularly bad to
ask a similar-looking but quite different question.)
It has to be done only once.
Huh? This relates to clicking, right? The answer is even more "No."
It is an absolutely positionned element so visibility:hidden
will do as well.
This doesn't matter, since the problem is not with properties but with the
impossibility of "capturing" the click in CSS terms.
<div>
<p>Some content</p>
<p><a href="#">Hide</a></p>
</div>
You do realize, don't you, that in HTML terms the link points to the start
of the current document, instead of being a no-op.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Nov 3 '06 #2
On 2006-11-03, Jukka K. Korpela <jk******@cs.tut.fiwrote:
Scripsit VK:
>given a block element with some content and a link, is it possible to
set this element display to none by CSS only?

Of course. You just set display: none for the element.

The correct answer to the question you ask in the Subject line is "No."
There is no CSS selector related to clicking.
There are the :active and :focus pseudoselectors, but I doubt they can
actually be used to achieve what the OP wants.
Nov 3 '06 #3
VK
The correct answer to the question you ask in the Subject line is "No."
There is no CSS selector related to clicking.
a:hover a:active a:visited ?

"CSS-only navigation menus" ?
It has to be done only once.
Huh? This relates to clicking, right?
Yep: it means I don't care how to get the element back (again by CSS
means only, no scripting) after clicking.
<div>
<p>Some content</p>
<p><a href="#">Hide</a></p>
</div>

You do realize, don't you, that in HTML terms the link points to the start
of the current document, instead of being a no-op.
Moreover, I even know that these funny words in brackets are called
T-A-G's and you do stuff with them in ... that's the difficult one...
H-T-M-L
As you can see I'm rather well prepared, but still thank you for taking
your time to explain.
;-)

Anyway, I needed a warning in <noscriptuser could remove from the
screen but only after having read it. Obviously I needed CSS only means
as the situation presumes no script support. Not to say I do care too
much about such situations as they are not relevant to my target
auditory; yet I wanted to keep a solution in my folder (for
presentational purposes).

This is what I did (either disable your script support or remove
<noscripttags to see it):

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<style>

#noScript {
display: block;
position: absolute;
top: 20px;
left: 20px;
width: 40%;
margin: 0px 0px;
padding: 10px 10px;
border: medium solid red;
background-color: white;
color: black;
font: bolder 100% Verdana, Geneva, sans-serif;
line-height: 200%;
text-align: center;
text-decoration: none;
cursor: default;
}

#noScript: active {
display: none !important;
}

#noScript:visited {
display: none !important;
}
</style>
</head>

<body>

<h1>Lorem ipsum</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>
<noscript
><a id="noScript" href="#"
<span>Client-side scripting is disabled.<br
Some extended features of this page will
be not available.</span><br
><span style="
color:blue;
text-decoration: underline;
cursor: pointer;"
>Dismiss this warning</span
</a
</noscript>
</body>
</html>

Nov 3 '06 #4
In article <11**********************@b28g2000cwb.googlegroups .com>,
VK <sc**********@yahoo.comwrote:
>Hi,

given a block element with some content and a link, is it possible to
set this element display to none by CSS only? It has to be done only
once. It is an absolutely positionned element so visibility:hidden will
do as well.

<div>
<p>Some content</p>
<p><a href="#">Hide</a></p>
</div>
You probably be able to do it eventually with CSS3 selectors:

<style type="text/css">
p#note:target {display: none}
</style>

ASDFG
<p id="note"><a href="#note">Hide</a></p>
ZXCVB

This works in Firefox 2.
--
John P Baker
Nov 3 '06 #5
VK
You probably be able to do it eventually with CSS3 selectors:
>
<style type="text/css">
p#note:target {display: none}
</style>

ASDFG
<p id="note"><a href="#note">Hide</a></p>
ZXCVB

This works in Firefox 2.
Thank for the tip, I'll keep it. For with the current support for CSS3
extra selectors I better stay I guess with the overloaded A element.
A year or two later things will get much easier I guess... :-)

Nov 3 '06 #6
Scripsit VK:
>The correct answer to the question you ask in the Subject line is
"No." There is no CSS selector related to clicking.

a:hover a:active a:visited ?
What makes you think any of them relates to clicking?

If you actually _meant_ hovering or activation (whatever that means - the
specs don't say) or having been visited, why did you write about clicking?
>><p><a href="#">Hide</a></p>
</div>

You do realize, don't you, that in HTML terms the link points to the
start of the current document, instead of being a no-op.

Moreover, I even know that these funny words in brackets are called
T-A-G's and you do stuff with them in ... that's the difficult one...
H-T-M-L
Your willingness to look amusing seems to exceed your willingness to learn
the basics of HTML. You are _still_ using href="#" in your code snippet,
apparently without ever considering what happens when the link is actually
used the way links are meant to be used. By clicking on it, for example.
Perhaps in a non-CSS browsing situation.
Anyway, I needed a warning in <noscriptuser could remove from the
screen but only after having read it.
That's simply pointless. Either you make your page work with scripting
disabled, or you don't. In rare cases, you might have reasons to explain
_what_ the user is actually missing when scripting is off, but what you seem
to work with is worse than useless technobabble and irritation:
><span>Client-side scripting is disabled.<br
>Some extended features of this page will
be not available.</span><br
(BTW, your technique does not work on IE 7, for example, even for your
definition of "work". I guess I know why, but I don't know why I would
bother.)

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Nov 3 '06 #7
VK
a:hover a:active a:visited ?
>
What makes you think any of them relates to clicking?

If you actually _meant_ hovering or activation (whatever that means - the
specs don't say) or having been visited, why did you write about clicking?
Boring to anser
You do realize, don't you, that in HTML terms the link points to the
start of the current document, instead of being a no-op.
Moreover, I even know that these funny words in brackets are called
T-A-G's and you do stuff with them in ... that's the difficult one...
H-T-M-L

Your willingness to look amusing seems to exceed your willingness to learn
the basics of HTML. You are _still_ using href="#" in your code snippet,
apparently without ever considering what happens when the link is actually
used the way links are meant to be used. By clicking on it, for example.
You desire to be boring and irritating seems exceed sometimes your
ability to be helpful. Anyone who programmed for NN2, NN3/IE3 knows
about # anchor and the "scroll to top" effect caused by it at that time
in pseudo links. That is why I was smiling: because it's like
explaining what a hammer is to a carpenter.

In my case I'm using # anchor exacly because of its function.
That's simply pointless. Either you make your page work with scripting
disabled, or you don't. In rare cases, you might have reasons to explain
_what_ the user is actually missing when scripting is off, but what you seem
to work with is worse than useless technobabble and irritation:
I'm on the other side of the pond you're sitting in.

Nov 3 '06 #8
"VK" <sc**********@yahoo.comwrites:
Moreover, I even know that these funny words in brackets are called
T-A-G's
… generic identifiers and attribute specifications (just to rescue the
orphaned possessive case) …
and you do stuff with them in ...
As far as tags are concerned, one describes stuff with them (hence
‘descriptive markup’, as opposed to processing instructions).
that's the difficult one...
H-T-M-L
As you can see I'm rather well prepared, but still thank you for taking
your time to explain.
;-)
I sense an upcoming explanation of ‘the basics’ for the rest of us. :)
--
||| hexadecimal EBB
o-o decimal 3771
--oOo--( )--oOo-- octal 7273
205 goodbye binary 111010111011
Nov 4 '06 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

13
by: Dan R Brown | last post by:
I have a large form that is generated dynamically in a jsp using xml / xslt. So, to break up this form into several "tabbed" sections, I break up the form using <div> tags. Each <div...
10
by: JayB | last post by:
I'm using a style to hide a skip navigation link but it's not working out correctly. The style is: ..textBrowsersOnly { display: none; } I'm using it in a paragragh and in a navigation link...
6
by: Sandman | last post by:
I'm having some problem here... I have a javascript I've downloaded that goes through all PNG files and enables the transparency channel in them for IE5.5+ by converting them to SPAN layers with...
2
by: ruby_bestcoder | last post by:
Hi Im having problem in firefox with display:none/block. I have essentially 3 li elements. In each element there are a few nested div:s. Clicking on one of the divs, makes another div to...
2
by: Good Man | last post by:
Hi there I have quite a bit of experience with CSS but I am stumped by the following: http://www.electricphase.com/example/example1.php (uses http://www.electricphase.com/example/test1.css) ...
7
by: Janis | last post by:
I try to understand what could be the source of a problem with displaying and hiding rows of tables using display:block/none. I've read selfhtml but could not find any hint about that. Any...
5
by: libsfan01 | last post by:
function switch_display(switchme) { var el = document.getElementById(switchme); el.style.display = (el.style.display == 'none')? '' : 'none'; } im using this function to switch the display on...
7
by: bissatch | last post by:
Hi, I ocasionally use display: none; to hide divs that, on the click of a link they will reappear. For example, maybe I create a menu and when you click a link of menu options the submenu...
5
by: bissatch | last post by:
Hi, I ocasionally use display: none; to hide divs that, on the click of a link they will reappear. For example, maybe I create a menu and when you click a link of menu options the submenu...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.