Css

Off-Topic
1

Sorry if this is soooo not a Renoise- or even a music-related question…

I making a new version of my website and trying to learn CSS at the same time. :) So I am a complete CSS-noob! <_< Although I’m not a complete noob with html, xhtml, and other stuff…

I have a “menu” to the right which I have positioned out and created some effects with in CSS. Got that down alright. Now, I would like to have a box to the left that when you click on a button in the menu the content of that box, and that box only, changes according to what button was clicked. Like you can do with frames; one click here updates another frame there without reloading the whole page.

Is this possible in CSS or do I simply have to make it reload the whole new page for each choice? If not an answer, then if you have any good tutorial-sites to recommend I’d be happier than a pig in dirt.

KTHXBAI!

2

It’s possible to show and hide the content using different CSS rules, but you’ll need to use Javascript to actually switch between them. It’s probably not the best idea to design your site this way either, since you’ll be required to have all the content loaded together rather than split across physical pages. (Unless you use ajax, which is another topic entirely)

Anyway, here’s a really simple example. Save this to a new .html file and give it a try, or you can also preview it on my own server here: http://illformed.org/temp/css_content_demo.html

Note: this code won’t pass the W3 validator since I just quickly threw it all together. In a real world situation you would want to take more care with this stuff. :D

Also, you can of course attach the onclick() method to pretty much anything you want. I just used buttons here for simplicity.

Hope this helps anyway.


  
<title>Demo</title>
  
<style type="text/css"><br />
		div.content {<br />
			display:none;<br />
			visibility:hidden;<br />
			color:#000000;<br />
			background-color:#f0f0f0;<br />
			border:1px solid #666666;<br />
			padding:20px;<br />
			width:400px;<br />
			height:300px;<br />
		}<br />
		div#content1 {<br />
			background-color:#ff7f7f;<br />
		}<br />
		div#content2 {<br />
			background-color:#ffff7f;<br />
		}<br />
		div#content3 {<br />
			background-color:#7fff7f;<br />
		}<br />
		div#content4 {<br />
			background-color:#7f7fff;<br />
		}<br />
	</style>
  
<script type="text/javascript"><br />
		function showContent(id) {<br />
<br />
			// variable used to reference the content div tag<br />
			var div;<br />
			<br />
			// hide the other content<br />
			for (var i = 1; i <= 4; i++) {<br />
				if (i != id) {<br />
					div = document.getElementById('content'+i);<br />
					div.style.display = 'none';<br />
					div.style.visibility = 'hidden';<br />
				}<br />
			}<br />
			<br />
			// now make selected content visible<br />
			div = document.getElementById('content'+id);<br />
			div.style.display = 'block';<br />
			div.style.visibility = 'visible';<br />
		}<br />
	</script>  
  
  
  

<input type="button" onclick="showContent(1);" value="Page 1">  
<input type="button" onclick="showContent(2);" value="Page 2">  
<input type="button" onclick="showContent(3);" value="Page 3">  
<input type="button" onclick="showContent(4);" value="Page 4">

  
  

  
This is page one.  

  
  

  
This is page two.  

  
  

  
This is page three.  

  
  

  
This is page four.
3

Thanks dblue! :) No wonder you’re not hanging out on PS3 when you do this kind of stuff all day. ;)

So, I guess I’m going to reload the page for every menu-choice instead since I want quite a lot of stuff to be shown in the box.

4

My pleasure!

Haha, yes, I’ve been way too busy lately to spend much time on my PS3, and way too broke to actually buy any new games. I am dyyyyying to pick up Red Dead Redemption!

Yep. This is really the most sensible option, and one that has worked well for pretty much every site out there. It is nice to use some advanced tricks on your pages to make them a bit more interesting and exciting, but you should never let that get in the way of the basic functionality.

If you implement a fancy content switcher/loader, then you’ve also go to think about how to make it actually behave like a ‘normal’ page. How do you allow the user to actually link to ‘page 3’ when there are no physical pages involved? How do you enable the user to use their browser’s forward/back buttons when there are no physical pages to go forward/back to? What happens when the user has javascript disabled and suddenly your whole page logic is broken? And if you rely on cookies to solve any of the other problems, then what happens when they have cookies disabled? Etc.

Bottom line: don’t be afraid to use any fancy features or special effects, but you should always provide a way to degrade gracefully. It should be possible to actually use the basic functionality of your site even when the user has a javascript blocker, ad blocker, flash blocker, cookie blocker, etc.

If you want a really eye-opening experience on web design and functionality, use the NoScript add-on for FireFox and just browse the web for a while allowing the add-on to block all javascript behaviour. It is quite amazing how many popular/big sites will simply fail completely when javascript is disabled. A lot of sites I encounter don’t even provide you with a message to suggest why everything is broken, they simply display a blank page! This is completely ridiculous when you consider that the only thing necessary to detect where a user has javascript disabled, is to put the following chunk of HTML somewhere within your tag:

<noscript>Javascript appears to be disabled in your browser. You will not be able to use some of the site's functionality until you enable javascript.</noscript>

Anyway… I’ll stop rambling now. Web development is such a nightmare, haha.