Adjustable windows in websites

edwardcasbon1 · 22 Aug 2006 at 08:14

Hi all,

For those of you that use windows live, you will understand what i am trying to explain/ask.

How do you create a box with a heading and content, that can minimize and maximize. You have like an area with a top heading, followed by content, but you can minimize it so only the header can be seen, then you can expand the box to see the content, understand?

How do you do that? I would love to implement that on my website, but am unsure how to go about doing it.

Cheers in advance,

Edward

Buttons · 22 Aug 2006 at 08:28

I'd imagine you create two classes in your style sheet, use the onlick event of an image in the top right corner of a div or span to toggle the style of the div/span between the two styles.

One style sets the div to full height, the other to a fixed height.

That's a guess but can only assume that is the easiest way.

edwardcasbon1 · 22 Aug 2006 at 08:47

Ive just been doing a google search, it looks like live.com uses ajax.

I'll have a go at what you said, but how would i toggle between the 2 classes?

iCraig · 22 Aug 2006 at 09:56

edwardcasbon1 said:
I'll have a go at what you said, but how would i toggle between the 2 classes?

A snippet of javascript I would imagine.

Buttons · 22 Aug 2006 at 10:21

If you're asking about a class change I'd imagine Ajax is a step too far at this stage.

a function along the lines of

Code:

function swapclass(obj){
    if (document.all(obj).className=="winmin"){
        document.all(obj).className="winmax"
    }
    else{
        document.all(obj).className="winmin"
    }
}

However I can never be bothered learning javascript so that probably needs correcting.

robmiller · 22 Aug 2006 at 11:29

It would be document.all[obj], but using document.all is frowned upon nowadays in favour of document.getElementById().

Code:

<style type="text/css">
<!--
.window { display:none; }
.maximised { display:block; border:1px solid #000; }
-->
</style>

<script type="text/javascript">
//<!--
function toggle( id ) {
    $el = document.getElementById(id);
    if ( /maximised/.test(el.className) )
        el.className = el.className.replace(' maximised', '');
    else
        el.className += ' maximised';
}
//-->
</script>

<div class="window maximised" id="news">
<h3><a href="javascript:void()" onclick="toggle('news')">News</a></h3>
</div>

<div class="window" id="comments">
<h3><a href="javascript:void()" onclick="toggle('comments')">Recent Comments</a></h3>
</div>

(Totally untested)

Buttons · 22 Aug 2006 at 11:34

You can clearly see who's the professional and who mucks about now and again for a hobby can't you

I still use vbscript for everything as I only write for myself!

robmiller · 22 Aug 2006 at 11:40

I write now and again for a hobby too

Buttons · 22 Aug 2006 at 12:20

Ok, that makes me feel even worse.

Some of my ASP.NET isn't half bad, honest. I'm a dab hand at databases!

edwardcasbon1 · 22 Aug 2006 at 14:48

Worked on it a bit more this afternoon, got it working as I want now, well at work i have.

Here is the code if anyone wants it,

CSS

Code:

.minimised
{
 width: 50px;
 height: 20px;
 overflow: hidden;
}
 
.maximised
{
 width: 50px;
}

HTML/Javascript:

Code:

<html>
<head>
<link rel="stylesheet" href="collapse.css"/>
<script language="javascript">
function toggle(id)
{
 var el;
 el=document.getElementById(id);
 if(el.className=="minimised")
 {
  el.className="maximised";
 }
 else
 {
  el.className="minimised";
 }
}
</script>
</head>
<body>
 
<div class="minimised" id="one"><a href="#" onclick="toggle('one')">One</a><br/>text text text text text text text text text text text</div>
<div class="minimised" id="two"><a href="#" onclick="toggle('two')">Two</a><br/>text text text text text text text text text text text</div>
 
</body>
</html>

Seems to work cushty for me, so just going to expand on it and integrate it into my website, www.edwardcasbon.com

Cheers for the help guys,

Edward