Expanded and Collapsed view of Code

[anserkk]

Dear Mr.Antonio,

Can our forum have an option to view the Code Expanded and Collapsed. It improves the readabilty when the code is lengthy. It's only a suggestion.
The screen snapshot is from a Forum running on phpBB like ours



Regards

Anser

[Antonio Linares]

Anser,

It looks as an installed mod for phpbb3.

When you place the mouse over such option, what php file is shown in the message bar ?
If we know the php file name we may be able to locate the mod.

[anserkk]

Dear Mr.Antonio,

When you place the mouse over such option, what php file is shown in the message bar ?

When I placed the mouse over the Expand view I could not find any difference in the Php parameters. It is the same as the Select all Php paramteres.

The following forum has the feature what I am talking about
http://user.services.openoffice.org/en/forum/

Regards

Anser

[Antonio Linares]

Anser,

We need to locate the mod or source for:

Code: <a href="#" onclick="selectCode(this); return false;">Select all</a> &nbsp;&nbsp;<a class="codebox" href="#" onclick="return expandCode(this, true);">Expand view</a>

Looking for it

[Antonio Linares]

Found

http://www.phpbbhacks.com/download/3771

[anserkk]

So, we will also have this facility soon

Regards

Anser

[Antonio Linares]

Anser,

Hopefully

I have to comment it with Daniel García who is the phpbb mods guru

[Antonio Linares]

Anser,

Already implemented

We need just some fine tunning with colors

[Antonio Linares]

Anser,

After a long fight with DOM, its working

Javascrip code

Code: Select all  Expand view

1.  
2. function expandCode( aTag )
3. {
4.    var code = aTag.parentNode.nextSibling.lastChild;
5.      
6.    if( code.style.maxHeight != "none" )
7.    {
8.       aTag.innerHTML = "Collapse view";
9.       code.style.maxHeight = "none";
10.    }  
11.    else  
12.    {   
13.       aTag.innerHTML = "Expand view";
14.       code.style.maxHeight = "200px";
15.    }  
16. }  
17.  

A code section has this structure:

Code: Select all  Expand view

1.  
2. <DL>        // distribution list
3.    <DT>     // distribution title
4.       the <a hrefs> are here
5.    </DT>    // end of the distribution title    
6.    <DD>     // distribution description (data)
7.       <CODE>  // here is the code, where we want to swap its style !!!
8.       </CODE>
9.    </DD>
10. </DL>       // end of the distribution list
11.  

This code is really tricky:
aTag.parentNode.nextSibling.lastChild;

1) aTag is the <a href> where we click
2) parentNode is the parent of aTag, that is, the DT (distribution title) of the DL (distribution list)
3) nextSibling is the next child, after DT, so it is DD.
4) lastChild is the only child that DD has: <code>

There we are and then we change its style

[Antonio Linares]

An equivalent javascript code, for this case:

Code: Select all  Expand view

1.  
2. function expandCode( aTag )
3. {
4.    var code = aTag.parentNode.nextSibling.childNodes[0];
5.      
6.    if( code.style.maxHeight != "none" )
7.    {
8.       aTag.innerHTML = "Collapse view";
9.       code.style.maxHeight = "none";
10.    }  
11.    else  
12.    {   
13.       aTag.innerHTML = "Expand view";
14.       code.style.maxHeight = "200px";
15.    }  
16. }  
17.  

[anserkk]

Dear Mr.Antonio,

Excellent work. It is working fine. Thankyou very much for your effort.

Regards

Anser

[Antonio Linares]

Anser,

Thanks.

It has been a nice html, css and javascript training for us too

[anserkk]

Dear Mr.Antonio,

Today I have found that the Expand and Collapsed view of code is not working on Mozila FireFox 3.0.6 (The version which I am using) and Internet Explorer 6. The browser displays the code always in the expanded mode irrespective of the click.

It is working fine on the browser which comes with Nokia Symbian OS phones. Yesterday I browsed the forums on my phone and I replied to this thread from my phone itself. Usually the Nokia Internet browser, renders and displays the web page exactly as IE and Mozila Firefox.

Is there anything wrong at my end ? What about the the feedbacks from other members of this forum

Regards

Anser

[Antonio Linares]

Anser,

The fact is that not all the browsers behave the same

We have tested it with IE beta 8, and also with IE 7. And they work fine.
I have been reported that Chrome and Safari are fine too.

Anyhow, we plan to support FireFox too.

[Antonio Linares]

Anser,

The problem is that FireFox does not support max-Height style:

http://www.webmasterworld.com/css/3016213.htm

This time is a FireFox limitation