FiveTech Support Forums

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

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.

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

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

Found

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

So, we will also have this facility soon

Regards

Anser

Anser,

Hopefully

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

Anser,

Already implemented

We need just some fine tunning with colors

Anser,

After a long fight with DOM, its working

Javascrip code

Code (js): Select all Collapse

<div class="js" id="{CB}" style="font-family: monospace;"><ol><li style="" class="li1"> </li><li style="" class="li2">function expandCode( aTag )</li><li style="" class="li1">{</li><li style="" class="li2">   var code = aTag.parentNode.nextSibling.lastChild;</li><li style="" class="li1">     </li><li style="" class="li2">   if( code.style.maxHeight != "none" )</li><li style="" class="li1">   {</li><li style="" class="li2">      aTag.innerHTML = "Collapse view";</li><li style="" class="li1">      code.style.maxHeight = "none";</li><li style="" class="li2">   }   </li><li style="" class="li1">   else   </li><li style="" class="li2">   {    </li><li style="" class="li1">      aTag.innerHTML = "Expand view";</li><li style="" class="li2">      code.style.maxHeight = "200px";</li><li style="" class="li1">   }   </li><li style="" class="li2">}   </li><li style="" class="li1"> </li></ol></div>

A code section has this structure:

Code (text): Select all Collapse

<div class="text" id="{CB}" style="font-family: monospace;"><ol><li style="" class="li1"> </li><li style="" class="li2"><DL>        // distribution list</li><li style="" class="li1">   <DT>     // distribution title</li><li style="" class="li2">      the <a hrefs> are here</li><li style="" class="li1">   </DT>    // end of the distribution title    </li><li style="" class="li2">   <DD>     // distribution description (data)</li><li style="" class="li1">      <CODE>  // here is the code, where we want to swap its style !!!</li><li style="" class="li2">      </CODE></li><li style="" class="li1">   </DD></li><li style="" class="li2"></DL>       // end of the distribution list</li><li style="" class="li1"> </li></ol></div>

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

An equivalent javascript code, for this case:

Code (js): Select all Collapse

<div class="js" id="{CB}" style="font-family: monospace;"><ol><li style="" class="li1"> </li><li style="" class="li2">function expandCode( aTag )</li><li style="" class="li1">{</li><li style="" class="li2">   var code = aTag.parentNode.nextSibling.childNodes[0];</li><li style="" class="li1">     </li><li style="" class="li2">   if( code.style.maxHeight != "none" )</li><li style="" class="li1">   {</li><li style="" class="li2">      aTag.innerHTML = "Collapse view";</li><li style="" class="li1">      code.style.maxHeight = "none";</li><li style="" class="li2">   }   </li><li style="" class="li1">   else   </li><li style="" class="li2">   {    </li><li style="" class="li1">      aTag.innerHTML = "Expand view";</li><li style="" class="li2">      code.style.maxHeight = "200px";</li><li style="" class="li1">   }   </li><li style="" class="li2">}   </li><li style="" class="li1"> </li></ol></div>

Dear Mr.Antonio,

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

Regards

Anser

Anser,

Thanks.

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

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

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.

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