Banded colours

User avatar
agibsonsw
SilverLounger
Posts: 2403
Joined: 05 Feb 2010, 22:21
Location: London ENGLAND

Banded colours

Post by agibsonsw »

Hello again. I thought I would begin a new topic as it now involves Javascript and CSS.

I've managed to create the web page below which creates banded colours as a background. (Now that I've got it working it doesn't look great, but I've learnt a lot along the way :grin: )

I'm using JavaScript to add 'divs' whose top is unjusted each time so that they sit beneath each other. But surely this can be achieved with just CSS? I shouldn't have to adjust the 'top' property each time?

Both Firefox and IE seem to have a thin 'boundary' to the left and above. Is this correct, or can I adjust my styles somehow to remove this? Andy.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Banding Colours</title>
	<style type="text/css">
		#content {
			position: absolute;
			width: 100%;
			padding: 0; border: 0; margin: 0;
		}
		.even {
			background-color: #8cff8d;	/* a faint green */
			height: 30px;
			width: 100%;
			padding: 0; border: 0; margin: 0;
			top: 0;
			position: absolute;
			z-index: -1;
		}
		.odd {
			height: 50px;
			width: 100%;
			padding: 0; border: 0; margin: 0;
			top: 30px;
			position: absolute;
			z-index: -1;
		}
	</style>
	<script type="text/javascript">
		function addBands() {
			var hgt = document.documentElement.scrollHeight;
			var topX = 0;
			var i = 0;
			while ( topX <= hgt ) {
				var newd = document.createElement('div');
				if ( i % 2 == 0 ) {
					newd.setAttribute('class','even');
					newd.setAttribute('id','even'+i);
					document.getElementById('content').appendChild(newd);
					document.getElementById('even'+i).style.top = topX + 'px';
					topX += 30;
				} else {
					newd.setAttribute('class','odd');
					newd.setAttribute('id','odd'+i);
					document.getElementById('content').appendChild(newd);
					document.getElementById('odd'+i).style.top = topX + 'px';
					topX += 50;
				}
				i++;
			}
		}
	</script>
</head>
<body onload="addBands();">
	<div id="content">
	<h2>Using CSS and Javascript to Band Colours</h2>
	
	<p>I decided not to use a background image, but to use two divs of differing background colour. I used CSS to
		define the behaviour of these elements. Javascript is then used to create alternating bands of colour.</p>
		
	<p>The Javascript also needs to determine the height of the page and then use this to determine when the bands
		should stop repeating.</p>
	</div>
</body>
</html>
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.

User avatar
agibsonsw
SilverLounger
Posts: 2403
Joined: 05 Feb 2010, 22:21
Location: London ENGLAND

Re: Banded colours

Post by agibsonsw »

The page works in FireFox and IE but I've just had the chance to try it in Chrome but I don't think it's working there.
Andy.
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.

User avatar
Jezza
5StarLounger
Posts: 847
Joined: 24 Jan 2010, 06:35
Location: A Magic Forest in Deepest, Darkest, Kent

Re: Banded colours

Post by Jezza »

Andrew, I am not a great lover of using javasript to control the look and feel of website it is very commonplace that people switch off scripting as it can be intrusive, this will therefore stop your web page being viewed.

By far the simplest way is to create a very small gif image (mine is 10 x 50 pixels) for the background image and use the folling CSS

Code: Select all

<html>
<head>

<style class="text/css">
.tile {background-image: url(bg.gif); background-repeat: repeat;}
</style> 
</head>

<body class = "tile">


</body>
</html>
I have attached the zip file with the image and the html above
You do not have the required permissions to view the files attached to this post.
Jerry
I’ll be more enthusiastic about encouraging thinking outside the box when there’s evidence of any thinking going on inside it

User avatar
agibsonsw
SilverLounger
Posts: 2403
Joined: 05 Feb 2010, 22:21
Location: London ENGLAND

Re: Banded colours

Post by agibsonsw »

Hi and thank you; it looks great! I'm still learning/ revising and this is primarily an exercise. I have a couple more questions..
a) Are you recommending not using JavaScript at all?
b) I can stack the green and white divs using float but then I can't get the content to overlap these. How can I achieve this with CSS? (I appreciate it's not the recommended approach.)
c) My attempt above is not working with some browsers. I think it's because their scrollHeight doesn't extend to the browser height if the content is less than this. Is there an equivalent to [if gte ie 6] for other browsers? I would then be able to substitute the screen height for certain browsers. Thanks again, Andy.
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.

User avatar
Jezza
5StarLounger
Posts: 847
Joined: 24 Jan 2010, 06:35
Location: A Magic Forest in Deepest, Darkest, Kent

Re: Banded colours

Post by Jezza »

agibsonsw wrote:Hi and thank you; it looks great! I'm still learning/ revising and this is primarily an exercise. I have a couple more questions..
a) Are you recommending not using JavaScript at all?
b) I can stack the green and white divs using float but then I can't get the content to overlap these. How can I achieve this with CSS? (I appreciate it's not the recommended approach.)
c) My attempt above is not working with some browsers. I think it's because their scrollHeight doesn't extend to the browser height if the content is less than this. Is there an equivalent to [if gte ie 6] for other browsers? I would then be able to substitute the screen height for certain browsers. Thanks again, Andy.
In order of your questions:

a) It all depends on the purpose of the site you are creating. As some people will know on this site I am a bit of a puritan when it comes to page design and layout and therefore tend to just use CSS for static pages where the data within it does not change. However if it is for a semantic application then yes it has a purpose but be aware that a page can not display if you are solely relying on javascript as it layout tool. In addition, my CSS example above is only one line and usable across browser :-)

b) My CSS example above does not rely on DIVS but the body tag therefore you can create your layout DIVs "on top of it". However,if you want to continue using your example you can use CSS layers. Imagine a pack of 2 playing cards one on top of the other you can use it like so:

Code: Select all

<div style="position:relative; font-size:20px; z-index:2;">Two</div>
<div style="position:relative; top:-50; color:red; font-size:30px; z-index:1">Ace</div>
z-index 1 goes under 2 andso on

c) This sounds like a hack which I will further research
Jerry
I’ll be more enthusiastic about encouraging thinking outside the box when there’s evidence of any thinking going on inside it

User avatar
agibsonsw
SilverLounger
Posts: 2403
Joined: 05 Feb 2010, 22:21
Location: London ENGLAND

Re: Banded colours

Post by agibsonsw »

Hi.
I'm not sure that your response to b) is the answer to my question. Suppose I have a div with classsname 'even' with a white/non-defined background of height 50px. I also have a div with classname 'odd' with a green background of height 50px.

Code: Select all

<body><div class="even"></div>
<div class="odd"></div>
<div class="even"></div>
<div class="odd"></div>
<div class="even"></div>
<h2>Here is my page content, etc</h2>
I want the odd and even bands to sit behind the content, below each other. Perhaps I've confused by using the term stacked, when I mean one above the other (in 2 dimensions) :bash:
(I thought this would be straight-forward?)
I shall pretend that I am aware of the term 'semantic application'. Thanks, Andy.
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.

User avatar
agibsonsw
SilverLounger
Posts: 2403
Joined: 05 Feb 2010, 22:21
Location: London ENGLAND

Re: Banded colours

Post by agibsonsw »

My apologies, I'm making progress with your example:

Code: Select all

<div style="position:relative; font-size:20px; z-index:2;">Two</div>
<div style="position:relative; top:-50; color:red; 
font-size:30px;z-index:1">Ace</div>
<div style="position:relative; font-size:20px; z-index:2;">Two</div>
<div style="position:relative; top:-50; color:red; 
font-size:30px;z-index:1">Ace</div>

<h2 style="position:absolute; top:0; z-index:3;">My main heading</h2>
<p style="position:absolute; top:30;z-index:3;">Where does this appear?</p>
<p style="position:absolute; top:50;z-index:3;">Any old text here to fill-in some 

space.</p>
But I'm having to set the 'top' position each time to place my content further down the page. How can I avoid this please?
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.

User avatar
agibsonsw
SilverLounger
Posts: 2403
Joined: 05 Feb 2010, 22:21
Location: London ENGLAND

Re: Banded colours

Post by agibsonsw »

I've corrected this by placing my content in an absolute div and placing the paragraphs in relative divs.

However, I've just realised I've come full circle. I'm still having to detemine the 'top' position to place each colour band.
I really want to add as many bands as I need without changing 'top' at all for each subsequent band. Andy.
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.

User avatar
agibsonsw
SilverLounger
Posts: 2403
Joined: 05 Feb 2010, 22:21
Location: London ENGLAND

Re: Banded colours

Post by agibsonsw »

Please ignore my post. I'm managing to answer my own questions - which is either sad or good, I'm not sure.

This code will work for me with a little adjustment:

Code: Select all

iv style="position:absolute;top:0;z-index:3;width:100%;">
<h2 style="position:relative;">My main heading</h2>
<p style="position:relative;">Where does this appear?</p>
<p style="position:relative;">Any old text here to fill-in some space.</p>
</div>

<div style="position:relative; font-size:20px; top:20;z-index:2;
background-color:lightgreen;">Two</div>
<div style="position:relative; top:-30; color:red; background-color:red; 
font-size:30px;z-index:1">Ace</div>
<div style="position:relative; font-size:20px; z-index:2;top:30;
background-color:lightgreen;">Two</div>
<div style="position:relative; top:-30; color:red; background-color:red;
font-size:30px;z-index:1">Ace</div>
<div style="position:relative; font-size:20px; z-index:2;top:30;
background-color:lightgreen;">Two</div>
<div style="position:relative; top:-30; color:red; background-color:red;
font-size:30px;z-index:1">Ace</div>
<div style="position:relative; font-size:20px; z-index:2;top:30;
background-color:lightgreen;">Two</div>
<div style="position:relative; top:-30; color:red; background-color:red;
font-size:30px;z-index:1">Ace</div>
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.

User avatar
Jezza
5StarLounger
Posts: 847
Joined: 24 Jan 2010, 06:35
Location: A Magic Forest in Deepest, Darkest, Kent

Re: Banded colours

Post by Jezza »

Nice one, I have to admit I was watching you post and could see you getting there :grin:
Jerry
I’ll be more enthusiastic about encouraging thinking outside the box when there’s evidence of any thinking going on inside it

User avatar
agibsonsw
SilverLounger
Posts: 2403
Joined: 05 Feb 2010, 22:21
Location: London ENGLAND

Re: Banded colours

Post by agibsonsw »

Hi, and yes the version below is what I'm looking for.

I can then use Javascript to repeat the bands, and replace the scrollHeight with the page or screen height (whatever the correct property is) depending on the browser.

Did you discover how I can check for other browsers? Something like '<!--[if gte ie 6 OR firefox 5 OR ..]'?

I have no intention of publishing this page - just studying. Andy.

Code: Select all

<div style="position:absolute;top:0;z-index:3;width:100%;">
<div style="position:relative;">
<h2>My main heading</h2>
<p>Where does this appear?</p>
<p>Any old text here to fill-in some space.</p>
</div>
</div>
<div style="position:relative; height:20px; top:30;z-index:2;
background-color:lightgreen;">&nbsp;</div>
<div style="position:relative; top:-30;font-size:30px;z-index:1">&nbsp;</div>

<div style="position:relative; height:20px; top:30;z-index:2;
background-color:lightgreen;">&nbsp;</div>
<div style="position:relative; top:-30;height:30px;z-index:1">&nbsp;</div>

<div style="position:relative; height:20px; top:30;z-index:2;
background-color:lightgreen;">&nbsp;</div>
<div style="position:relative; top:-30;height:30px;z-index:1">&nbsp;</div>
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.

User avatar
Jezza
5StarLounger
Posts: 847
Joined: 24 Jan 2010, 06:35
Location: A Magic Forest in Deepest, Darkest, Kent

Re: Banded colours

Post by Jezza »

Jerry
I’ll be more enthusiastic about encouraging thinking outside the box when there’s evidence of any thinking going on inside it

User avatar
agibsonsw
SilverLounger
Posts: 2403
Joined: 05 Feb 2010, 22:21
Location: London ENGLAND

Re: Banded colours

Post by agibsonsw »

Thanks for this.
I could use feature detection (document.scrollHeight).But most browsers recognise this, they just set it at different values!

I think I could read (if available) the scrollHeight, pageHeight and screenHeight (or whatever these properties are called) and set my variable equal to the largest of these. I think this would cover all eventualities without having to worry about specific browsers or version numbers.

Andy.
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.

User avatar
agibsonsw
SilverLounger
Posts: 2403
Joined: 05 Feb 2010, 22:21
Location: London ENGLAND

Re: Banded colours

Post by agibsonsw »

I don't quite understand your statement that JavaScript has a role within a semantic application. As I understand it a semantic application is to do with meaning. I assume this refers to the move towards XML, and XHTML with strict markup, which would allow data-readers to interpret content. How does JavaScript fit in to this description?

What should JavaScript be used for? Perhaps just to assist form completion? I can't see how it could be used to manipulate the DOM as no two browsers seem interpret it in the same way.
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.

User avatar
Jezza
5StarLounger
Posts: 847
Joined: 24 Jan 2010, 06:35
Location: A Magic Forest in Deepest, Darkest, Kent

Re: Banded colours

Post by Jezza »

I use javascript for DOM work and make SOAP calls for my CRM system but it is designed to work with IE only for that very reason. It is a very broad question as to what it should be used for I personally don't like to use it to design layout for the reasons I gave above. If however it is to change and display data within a well formed layout then that would be my preference.
Jerry
I’ll be more enthusiastic about encouraging thinking outside the box when there’s evidence of any thinking going on inside it

User avatar
agibsonsw
SilverLounger
Posts: 2403
Joined: 05 Feb 2010, 22:21
Location: London ENGLAND

Re: Banded colours

Post by agibsonsw »

Thanks again.
I've read about the resurgence of JavaScript but am I right to understand that this is primarily because of it's use with technologies such as pdf and Ajax?
Am I also right to suggest that it is not currently feasible/easy to use it for cross-browser DOM manipulation, because of the differing approach by different browsers to the DOM?
Sorry to labour the point.. Andy.
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.

User avatar
Jezza
5StarLounger
Posts: 847
Joined: 24 Jan 2010, 06:35
Location: A Magic Forest in Deepest, Darkest, Kent

Re: Banded colours

Post by Jezza »

Yes you are correct on all points
Jerry
I’ll be more enthusiastic about encouraging thinking outside the box when there’s evidence of any thinking going on inside it

User avatar
agibsonsw
SilverLounger
Posts: 2403
Joined: 05 Feb 2010, 22:21
Location: London ENGLAND

Re: Banded colours

Post by agibsonsw »

I thought I would post my solution to creating the banded colours, only because I was quite proud of it :fanfare: (I haven't used JavaScript or css for a number of years.)

I managed to reduce the css to three simple elements:

Code: Select all

.content { 
    position : absolute ; z-index : 3; width : 100% ;
}
.greenB {
    position : relative ; height : 30px ; z-index : -1 ;
    background-color : lightgreen ;
}
.whiteB {
    position : relative ; height : 50px ; z-index : -1 ;
}
and the Javascript is quite neat as well:

Code: Select all

function addBands() {
 var hgt = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
 var topX = i = 0;
 var newd;
 while ( topX <= hgt ) {
    newd = document.createElement('div');
    if ( i++ % 2 == 0 ) {
       newd.setAttribute('class','whiteB');
       newd.setAttribute('className','whiteB'); // for IE6
    } else {
       newd.setAttribute('class','greenB');
       newd.setAttribute('className','greenB'); // for IE6
    };
    topX += document.getElementById('bdy').appendChild(newd).offsetHeight;
 }
}
This has the advantage of being able to place objects (as a background) beneath each other without having to worry about the height of each object. It uses 'offsetHeight' to determine the correct height of the object once inserted into the page.

However, it would be quite tricky to make this fully cross-browser as the height of a page is determined in vastly differing ways be different browsers and versions, and is even effected by the DOCTYPE declaration.
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.