Forum Moderators: open
Now I know perfectly well how to do that, but I am mindful of the people who have JS disabled. Normally I'd put
display: none'in the CSS to start with, but can't do this as they'd never see the div. I also don't want the div to start on screen, then vanish as an onload event kicks in?
What's the best way to do this?
You could use <noscript> to do two things...
1.) Serve a second style sheet to override your display: none and perhaps display the layer at the bottom or elsewhere.
2.) Instead of onclick you could provide a hyper link to the frag id (heh cool).
It's odd that I've just learned this recently but just in case you're not aware when you use multiple stylesheets you want to reframe from giving the initial (your base or main) style sheet a title but do give your additional style sheets titles. I didn't understand it at first and frankly I'm still generally disoriented but if it works it works right? :)
Do you have some example code we could work with?
- John
You could use <noscript> to do two things...
1.) Serve a second style sheet to override your display: none and perhaps display the layer at the bottom or elsewhere.
Forgot completely about <noscript>, I'll play with it.
2.) Instead of onclick you could provide a hyper link to the frag id (heh cool).
Don't need that, it's a Q&A type page, the div would be directly below the question, so page would flow normally without the need to fragmented things.
It's odd that I've just learned this recently but just in case you're not aware when you use multiple stylesheets you want to reframe from giving the initial (your base or main) style sheet a title but do give your additional style sheets titles
Nope, didn't know that. I just use multiple <link> statements and it works. Beyond that I don't care. I also have no idea about!important, but if it's!important then what's the point?
Do you have some example code we could work with?
Just writing the page now, if the <noscript> thing doesn't work I'll post some code here so you can have a mess.
In the <head>:
<noscript>
<style>
#help .pop_in { display: block; }
</style>
</noscript><script defer src='/js/toggle.js'></script>
This CSS overrides my stylesheet as suggested, and calls in my unobtrusive JS which I'll send you via sticky - can't post it here as it has my name/company in it and it'll get cut.
The HTML is:
<p><a class='toggle_my_question' href='#'>My Question?</a></p>
<div id='my_question' class='pop_in'>Some text here</div>
The script will attach to any element beginning with "toggle_" and on clicking that element, will toggle the display property of whatever element has an ID matching what comes after the "toggle_".
Tell me if you see what I did. ;)
- John
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Dabrowski's Magic</title>
<script type="text/javascript">
</script>
<style type="text/css">#query_string:focus {background: #abc;}
h1, h2 {margin-top: 600px;}p {background: #abc; height: 300px;}
#my_question {background: #cde;}
div.prompt {display: none;}
</style>
</head><body>
<p><a class='toggle_my_question' href='#my_question'>My Question?</a></p>
<div class="prompt" id='my_question' class='pop_in'>Some text here</div><script src="toggle.js" type="text/javascript"></script>
<noscript>
<style>
#help .pop_in { display: block; }
div.prompt {display: block;}
</style>
</noscript></body>
</html>
* Note! I had to comment out line #62 on the script as it was giving me some JavaScript error and keeping the script from executing.
*Edit for a little code clean up!
[edited by: JAB_Creations at 2:17 am (utc) on April 25, 2007]
Tell me if you see what I did. ;)
I can't see line #62, what is it? My script is a little different, my addEvent function is called in another script, I just pasted it in there so I might have done it wrong.
<title>Dabrowski's Magic</title>
I'm flattered.
<script type="text/javascript">
</script>
You have that in your <head>. It does nothing.
<script src="toggle.js" type="text/javascript"></script>
<noscript>
<style>
#help .pop_in { display: block; }
div.prompt {display: block;}
</style>
</noscript>
That should really be in your <head>. And the script line should have
defer='defer'in it, your page will load a lttle quicker.
<div class="prompt" id='my_question' class='pop_in'>Some text here</div>
You have
class='prompt'AND
class='pop_in'on the same element. pop_in is just my class name, nothing to do with the script, you can take that out, along with
#help .pop_inin your style.
Does it work well then?
Anyway, it's almost 4am here and I should get some sleep. Some of us have to work tomorrow!
- John
Thanks again, nn!
It was a good learning experience, but it's a retail site that uses a JS/cookie shopping basket I wrote.
So if they don't have JS then they're stuffed anyway. ;)
I've actually added a "Javascript is disabled" page on the front of the site anyway.
Good learning experience though.
- John
