Conditional visibility with just css

[Langford]

This isn't up on any server at the moment, so sadly I don't have anything to show anyone right now. Anyhow, just for fun for some friends and some kids, I've been tinkering with a single page layout involving a segmented map. Basically it uses bookmarks (<a href="#example">) in the page to scroll from on div to another, and little N S E W pointers to indicate travel. Additionally I can put little pixelart characters in place that have little a:hover over speech bubbles. Anyhow, that part works fine, it's the next part I am wanting aide in, but the tricky part is that javascript is not allowed in this design, and nothing scripted on the server side, so it all has to be css/html driven. Nothing embedded like flash either. Basically I am wanting to be able to turn on/off several item's visibility individually based on whether other bookmark links have been followed. For example, someone clicks a picture of a tree, and from that point on the tree will be a stump, even if they travel to a different area of the map and travel back to that zone. I've already considered linking them to a new total world map with the change, but every event results in another whole map being created and the page size grows near exponentially, so I'd rather not do that. My next thought was to see it the visited and active attributes would work, but they don't seem to see bookmarks as separate pages. The following code test did NOT work:

<style>
.on, .off:visited, .now
{
visibility: hidden;
display: none;
}
.off:visited, .on, .now:active
{
visibility: visible;
display: block;
}
</style>

<a href="#turnon">Turn on/off now</a><br><br>

<a href="#turnon" class="on">class is on</a><br>
<a href="#turnon" class="off">class is off</a><br>
<a href="#turnon" class="now">class is now</a>

Both the on and off classes were always visible, and the now class never became visible. Ideally, the on class would only become visible after the bookmark was followed, the off class would vanish after the bookmark was followed, and the now class would only be visible while the bookmark was current. I knew it was a shot in the dark when I tried it, and I'm not surprised it didn't work. Does anyone here have any alternate ideas of how I might accomplish the desired results, keeping in mind it can't be scripted and it all has to stay on one web page?

EDIT:
I can do some of it, in some browsers anyhow, but the code above was bad. In my effort to shorten the code, I neglected that the order in which it was declared matters. This following code worked in firefox, and I will test it in other browsers:

<style>
a.off
{
visibility: visible;
display: block;
}
a.off:visited, a.on
{
visibility: hidden;
display: none;
}
a.on:visited
{
visibility: visible;
display: block;
}
</style>

<a href="#toggle">Turn on/off now</a><br><br>

<a href="#toggle" class="on">class on</a><br>
<a href="#toggle" class="off">class off</a>

If both Firefox and IE support it, I will consider it a success. I'd like to get opera and safari to work too, but they are less common, so maybe it won't matter since not many people will see the game anyhow.

 

[CEpeep]

Can't do that without Javascript or some sort of server-side scripting. If it's "just for fun" like you said, why is Javascript not allowed?

 

[Langford]

If it was going up on my own server, I would use javascript and cookies, but it's for a kid site with a content system that filters out javascript. No embedded stuff, no iframes, no flash, no hyperlinks to off-site servers, and a reduced set of css options. Handling the navigation of the map, the characters, and the dialog is the easy part, but in order for it to be more like a quest game, it would be good to have elements that change. I fear it may not be possible given the limitations.

 

[ameoba]

There's almost -never- an excuse for going with crappy hosting.

Trying to create dynamic content on a static page without access to any dynamic elements is fundamentally a nightmare. The best you could probably do would be a choose-your-own-adventure style thing where you've created every possible page (hopefully programatically) and just jump to the appropriate node in your 'story graph'.

With that said, .on and .off:visited have rules on both halves. Writing it out like this gives you on & off :

<style>
a.on, a.off:visited, a.now
{
	visibility: hidden;
	display: none;
}
a.on:visited, a.off, a.now:active
{
	visibility: visible;
	display: block;
}
</style>

<a href="#turnon6">Turn on now</a><br><br>

<a href="#turnon6" class="on">class is on</a><br>
<a href="#turnon6" class="off">class is off</a><br>
<a name="turnon6" href="#turnon6" class="now">class is now</a><br>

I think your concept of the active link is off - a specific anchor (rather than all anchors with the same href) will only be 'active' after you've clicked it. Since it starts invisible, you're never really able to click on it.

 

[Langford]

Trying to create dynamic content on a static page without access to any dynamic elements is fundamentally a nightmare. The best you could probably do would be a choose-your-own-adventure style thing where you've created every possible page (hopefully programatically) and just jump to the appropriate node in your 'story graph'.

The original concept was going to be along those lines, but the page size grows exponentially with every new decision universe created, and if I fix an error then I have to go through and fix every universe, and it's is strictly very linear with no chance for side quests.

With that said, .on and .off:visited have rules on both halves. Writing it out like this gives you on & off :
...
I think your concept of the active link is off - a specific anchor (rather than all anchors with the same href) will only be 'active' after you've clicked it. Since it starts invisible, you're never really able to click on it.

It was the only idea I had to work with, and a:hover worked so well outside of it's intended purpose I hoped I could rig something. I figured the a:active would be a dead end, but I had some small hope for a:visited to do something, but it neither works nor errors in the ways I expected.

 

[CEpeep]

Do you have control over the browser that's used? If you are guaranteed something like Firefox, you might be able to use local storage or something.

 

[Langford]

No, they could show up with any browser.

 

[ameoba]

The original concept was going to be along those lines, but the page size grows exponentially with every new decision universe created, and if I fix an error then I have to go through and fix every universe, and it's is strictly very linear with no chance for side quests.

That's why you'd write a program to generate the pages for you. Managing state with distinct nodes is going to be a -lot- easier than trying to maintain state via followed links. Not to mention that debugging is going to be a whole lot easier than trying to manage a browser's history (hint : imagine testing something that can only be seen after you click 30 links).

 

[Langford]

That's why you'd write a program to generate the pages for you. Managing state with distinct nodes is going to be a -lot- easier than trying to maintain state via followed links. Not to mention that debugging is going to be a whole lot easier than trying to manage a browser's history (hint : imagine testing something that can only be seen after you click 30 links).

Yep, but like I said, if it was on my server I'd do all that... or better yet put it in a flash game. I am in this instance constrained to the rules of the content management system. When this is over I'll probably make a nicer one on my own site that will be free of the filtrating limitations.

EDIT:
Got it to work some, see first post for edit.