473,766 Members | 2,130 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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:hidd en will
do as well.

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

Nov 3 '06 #1
8 4247
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:hidd en
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.tu t.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>Untitl ed 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:visit ed {
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************ **********@b28g 2000cwb.googleg roups.com>,
VK <sc**********@y ahoo.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:hidd en 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">Hi de</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">Hi de</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**********@y ahoo.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
40762
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 style="display:none"> can be displayed by setting the style attribute to "display:", or hidden with "display:none". This gives the illusion that the person filling out the form is switching from page to page...without the overhead of extra hits on the server,...
10
3606
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 but the navigation link still shows up (using an un-ordered list). www.fape.org/zzzzzz.htm
6
6201
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 the image as background. This works great until I put one of these PNG files inside a display:none block and later sets the block to display:block - then the SPAN (that was the PNG <img>) remains hidden.
2
3362
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 display: block or none. Again this works in IE. In ff it has a bug. When the display is none for a div in the first li, then the next li (the one underneath) moves up to the right, looking very ugly. Is there someone who has had the
2
9610
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) http://www.electricphase.com/example/example2.php (uses http://www.electricphase.com/example/test2.css)
7
3077
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 pointers why that can happen, or how I should take care of that type of problem/effect are highly appreciated. The problem... A couple times the hiding/displaying works, but _occasionally_ the entries are hidden but _blank lines appear_, instead.
5
2034
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 and off of a given element. BUT if the element is set to 'none' to begin with then it wont display it. please help...
7
2604
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 options appear. Anyway, is it true that screen readers for visually impaired users mostly ignore elements that are hidden this way? Is it better to use position: absolute; and set it off the screen? Just a bit concerned because a few of my projects...
5
1829
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 options appear. When I used this attribute, would search engines ignore indexing the hidden submenu links because it doesnt initially appear on the screen. Im a bit concerned that my links wont be followed through during indexing (and theres many of...
0
9571
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9404
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10168
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10009
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
9838
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
5279
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5423
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3929
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
3532
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.