CSS Forum

**Brian07002** · 02-16-2011, 05:20 PM

Hi,

Can someone show me how to (if possible) remove the javascript from this code so that it will be pure css code? I figured if there were a script in pure css, that would mean no javascript.

Code:

<html>
<head><title>Popup Window in Pure CSS</title>
<style type="text/css">
#container {
    float:left;
    width:100%;
}
#col1 {
    
    float:left;
    width:auto;
    background:red;
    border-style: solid;
    border-width: 1px;
    padding: 5px;
}
#col2 {
    
    float:left;
    width:auto;
    background:yellow;
    margin-left: 7px; 
    margin-right: 7px; 
    border-style: solid;
    border-width: 1px;
    padding: 5px;
}
#col3 {
    
    float:left;
    width:auto;
    background:green;
    border-style: solid;
    border-width: 1px;
    padding: 5px;
    margin-bottom: 5px;}

</style>
</head>

<body>
Click <a onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="document.getElementById('PopUp').style.display = 'block' " ><span style="text-decoration: underline;">here</span></a>

<div id='PopUp' style='display: none; position: absolute; left: 100px; right: 100; top: 50px; border: solid black 1px; padding: 10px; background-color: rgb(255,255,225); text-align: justify; font-size: 14px; width: auto;'>

Banners are categorized by their dimensions. Choose a dimension below to browse those banners:
<p />

<div id="container">

<div id="col1">
<a href="">Link</a><br />
<a href="">Link</a><br />
<a href="">Link</a><br />
<a href="">Link</a><br />
<a href="">Link</a><br />
</div>

<div id="col2">
<a href="">Link</a><br />
<a href="">Link</a><br />
<a href="">Link</a><br />
<a href="">Link</a><br />
</div>

<div id="col3">
<a href="">Link</a><br />
<a href="">Link</a><br />
<a href="">Link</a><br />
<a href="">Link</a><br />
</div>

<div style='text-align: right;'>
<a onmouseover='this.style.cursor="pointer" ' style='font-size: 14px;' onfocus='this.blur();' onclick="document.getElementById('PopUp').style.display = 'none' " >
<span style="text-decoration: underline; text-valign: ;">Close</span></a></div>
</div>

</body>
</html>

**chrishirst** · 02-16-2011, 05:56 PM

You cannot have a "script" in pure CSS as CSS has no scripting capabilities

AND there is no CSS equivalent to the "onClick" or the "onBlur" events.

**Brian07002** · 02-16-2011, 06:01 PM

Well then, would there be an exception, so that if someone has javascript disabled, they would still be able to see the contents of that script?

Thanks Chris

**chrishirst** · 02-16-2011, 06:14 PM

Nope because it's hidden by default.

**Brian07002** · 02-16-2011, 06:23 PM

i was afraid of that. Hey Chris, how popular is Javascript these days? Do you think alot of people have it enabled?

**chrishirst** · 02-16-2011, 06:56 PM

simplest way around it is to open the document with the elements visible, then hide them with javascript with a script that triggers after the </body> element

**Brian07002** · 02-16-2011, 08:33 PM

Thanks, but I *think* I am going to use a different approach. Have to think of it first though, that's the thing...

**Marik** · 10:12 PM

Very few have js disabled:

http://stackoverflow.com/questions/1...ble-javascript

read the 1st post, it's rather outdated so I would assume even less have is disabled nowadays. I personally wouldn't think twice about supporting js disabled folks. There are more ie6 users than there are js disabled users.

**racer x** · 02-17-2011, 09:55 PM

There are pure css popups and tool-tips that might do what you want. You will be "up-to-date" browser limited of course.

**shankar.adodis** · 02-18-2011, 12:21 AM

Hi,
How can a pop can come without a java script,
you have used java script in your code so this cannot
be a pure css pop up any pop up cannot be a css pop up because because
we must use script to make it appear when any event is triggered

**shivaji** · 02-18-2011, 11:38 PM

Quote:

How can a pop can come without a java script,

Actually this is not standard popup. This is a:hover with -999px definition. With mouse over you get visible element.