The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Collapse coding help (please)

View previous topic View next topic Go down

Collapse coding help (please)

Post by High Hrothgar on November 1st 2011, 8:23 am

Alright, so I followed the tutorial on this support forum to place my "Recent Topics" in the center of my page and have them listed...

I've noticed that it is troublesome for members to scroll past it to get to the rest of the forum. So I've been playing around with some javascript coding to get it to be a collapsible <div>.... except it's not working blackeye

here it a screenshot of the table:


as you can see I have accomplished getting the image to appear and it does change when clicked, but it doesn't collapse the table.

here is my coding for it so far:
Code:
<script type="text/javascript" src="http://yourjavascript.com/0151212117/collapse.js">
function toggle5(showHideDiv, switchImgTag) {
        var ele = document.getElementById(showHideDiv);
        var imageEle = document.getElementById(switchImgTag);
        if(ele.style.display == "block") {
                ele.style.display = "none";
      imageEle.innerHTML = '<img src="http://www.neowin.net/forum/uploads/post-159319-1143730514.gif">';
        }
        else {
                ele.style.display = "block";
                imageEle.innerHTML = '<img src="http://www.neowin.net/forum/uploads/post-159319-1143730527.gif">';
        }
}
</script>

<style>
div.title {
font-size: 12px;
font-weight: bold;
text-decoration: none;
color: #fff;
text-align:center;
}
</style>
<!-- BEGIN classical_row -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="3" align="center"><tbody>
<thead><tr><th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle">
<div id="headerDivImg">
<div class="ist">Latest Topics
<a id="imageDivLink" href="javascript:toggle5('contentDivImg', 'imageDivLink');"><img src="http://www.neowin.net/forum/uploads/post-159319-1143730527.gif"></a>
</div>
<div id="contentDivImg" style="display: block;">
</th></tr></thead>
<tr>
<td style="padding: 0px; background: rgb(36, 36, 36) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;" width="100%">
<table border="0" cellpadding="0" cellspacing="0" colspan="3" width="100%">

<tr><td class="catHead" colspan="2" width="50%">
<div class="title"><font color="black">Topic</font></div>
</td>
<td class="catHead" colspan="1" width="25%">
<div class="title"><font color="black">History</font></div>
</td>
<td class="catHead" colspan="1" width="25%">
<div class="title"><font color="black">Written by</font></div>
</td></tr>

<tr valign="top">
<td colspan="1" style="border-top: 0px none; padding: 0px; background: transparent url(http://img266.imageshack.us/img266/3958/listp.gif) no-repeat scroll center top; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;" width="24"><img src="http://illiweb.com/fa/empty.gif" width="24" border="0"></td><td style="border-top: 0px none; padding: 0px; line-height: 20px; background-repeat: repeat;" align="left" background="http://i1036.photobucket.com/albums/a449/a1tinhgia3/image/listbg.gif" width="50%">

<!-- BEGIN recent_topic_row -->
<a href="{classical_row.recent_topic_row.U_TITLE}"><b><font style="font-family: Tahoma; font-size: 11px">{classical_row.recent_topic_row.L_TITLE}</font></b></a><br>

<!-- END recent_topic_row -->
</td>
<td style="border-top: 0px none; padding: 0px; line-height: 16.5px; background-repeat: repeat;" align="center" background="http://i1036.photobucket.com/albums/a449/a1tinhgia3/image/listbg.gif" width="25%">
<span class="gensmall">
<!-- BEGIN recent_topic_row -->
<img src="http://img816.imageshack.us/img816/9845/11750606.png" width="16px" height="16px" />
{ON} {classical_row.recent_topic_row.S_POSTTIME}
<br><!-- END recent_topic_row -->
</span>
</td>
<td style="border-top: 0px none; padding: 0px; line-height: 17px; background-repeat: repeat;" align="left" background="http://i1036.photobucket.com/albums/a449/a1tinhgia3/image/listbg.gif" width="25%">
<!-- BEGIN switch_poster -->
<a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
<!-- END switch_poster -->
<!-- BEGIN switch_poster_guest -->
{classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
<!-- END switch_poster_guest -->
<!-- BEGIN recent_topic_row -->
<img src="http://i41.servimg.com/u/f41/16/91/77/16/gold10.png">
<a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}"><font style="font-family: Tahoma; font-size: 11px">{classical_row.recent_topic_row.switch_poster.S_POSTER}</font></a>
<br><!-- END recent_topic_row -->
</div>

</td>
</tr></table></td></tr></tbody></table>
<!-- END classical_row -->

If you all could take a look at this and suggest alterations to the coding to make the table collapsible I would be greatly thankful!
please and thank you



High Hrothgar
New Member

Posts : 8
Reputation : 1
Language : English

Back to top Go down

Re: Collapse coding help (please)

Post by Darkel on November 1st 2011, 9:18 am

Are you using the latest topic ? (new system)

Darkel
Hyperactive

Male Posts : 2186
Reputation : 272
Language : English, Tagalog
Location : Philippines

Back to top Go down

Re: Collapse coding help (please)

Post by LGforum on November 1st 2011, 4:33 pm

If i am right in believing this is the needed HTML for the recent topics you have:
Code:

    <style>
    div.title {
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    text-align:center;
    }
    </style>
    <!-- BEGIN classical_row -->
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="3" align="center"><tbody>
    <thead><tr><th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle">
    <div id="headerDivImg">
    <div class="ist">Latest Topics
    <a id="imageDivLink" href="javascript:toggle5('contentDivImg', 'imageDivLink');"><img src="http://www.neowin.net/forum/uploads/post-159319-1143730527.gif"></a>
    </div>
    <div id="contentDivImg" style="display: block;">
    </th></tr></thead>
    <tr>
    <td style="padding: 0px; background: rgb(36, 36, 36) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;" width="100%">
    <table border="0" cellpadding="0" cellspacing="0" colspan="3" width="100%">

    <tr><td class="catHead" colspan="2" width="50%">
    <div class="title"><font color="black">Topic</font></div>
    </td>
    <td class="catHead" colspan="1" width="25%">
    <div class="title"><font color="black">History</font></div>
    </td>
    <td class="catHead" colspan="1" width="25%">
    <div class="title"><font color="black">Written by</font></div>
    </td></tr>

    <tr valign="top">
    <td colspan="1" style="border-top: 0px none; padding: 0px; background: transparent url(http://img266.imageshack.us/img266/3958/listp.gif) no-repeat scroll center top; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;" width="24"><img src="http://illiweb.com/fa/empty.gif" width="24" border="0"></td><td style="border-top: 0px none; padding: 0px; line-height: 20px; background-repeat: repeat;" align="left" background="http://i1036.photobucket.com/albums/a449/a1tinhgia3/image/listbg.gif" width="50%">

    <!-- BEGIN recent_topic_row -->
    <a href="{classical_row.recent_topic_row.U_TITLE}"><b><font style="font-family: Tahoma; font-size: 11px">{classical_row.recent_topic_row.L_TITLE}</font></b></a><br>

    <!-- END recent_topic_row -->
    </td>
    <td style="border-top: 0px none; padding: 0px; line-height: 16.5px; background-repeat: repeat;" align="center" background="http://i1036.photobucket.com/albums/a449/a1tinhgia3/image/listbg.gif" width="25%">
    <span class="gensmall">
    <!-- BEGIN recent_topic_row -->
    <img src="http://img816.imageshack.us/img816/9845/11750606.png" width="16px" height="16px" />
    {ON} {classical_row.recent_topic_row.S_POSTTIME}
    <br><!-- END recent_topic_row -->
    </span>
    </td>
    <td style="border-top: 0px none; padding: 0px; line-height: 17px; background-repeat: repeat;" align="left" background="http://i1036.photobucket.com/albums/a449/a1tinhgia3/image/listbg.gif" width="25%">
    <!-- BEGIN switch_poster -->
    <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
    <!-- END switch_poster -->
    <!-- BEGIN switch_poster_guest -->
    {classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
    <!-- END switch_poster_guest -->
    <!-- BEGIN recent_topic_row -->
    <img src="http://i41.servimg.com/u/f41/16/91/77/16/gold10.png">
    <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}"><font style="font-family: Tahoma; font-size: 11px">{classical_row.recent_topic_row.switch_poster.S_POSTER}</font></a>
    <br><!-- END recent_topic_row -->
    </div>

    </td>
    </tr></table></td></tr></tbody></table>
    <!-- END classical_row -->

Then this below will be a collapsible version:
Code:

<script type="text/javascript">
jQuery(function(){
jQuery('.lgimg').click(function() {
  jQuery('#lgrecent').slideToggle();
  jQuery('.lgimg').toggle();
});});
</script>
    <style>
    div.title {
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    text-align:center;
    }
    </style>
    <span class="lgimg" style="display:block">Close <img src="http://www.neowin.net/forum/uploads/post-159319-1143730527.gif"></span>
  <span class="lgimg" style="display:none"> Open <img src="http://www.neowin.net/forum/uploads/post-159319-1143730514.gif"></span>
    <div id="lgrecent" style="display:block">
    <!-- BEGIN classical_row -->
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="3" align="center"><tbody>
    <thead><tr><th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle">
    <div id="headerDivImg">
    <div class="ist">Latest Topics
    <a id="imageDivLink" href="javascript:toggle5('contentDivImg', 'imageDivLink');"><img src="http://www.neowin.net/forum/uploads/post-159319-1143730527.gif"></a>
    </div>
    <div id="contentDivImg" style="display: block;">
    </th></tr></thead>
    <tr>
    <td style="padding: 0px; background: rgb(36, 36, 36) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;" width="100%">
    <table border="0" cellpadding="0" cellspacing="0" colspan="3" width="100%">

    <tr><td class="catHead" colspan="2" width="50%">
    <div class="title"><font color="black">Topic</font></div>
    </td>
    <td class="catHead" colspan="1" width="25%">
    <div class="title"><font color="black">History</font></div>
    </td>
    <td class="catHead" colspan="1" width="25%">
    <div class="title"><font color="black">Written by</font></div>
    </td></tr>

    <tr valign="top">
    <td colspan="1" style="border-top: 0px none; padding: 0px; background: transparent url(http://img266.imageshack.us/img266/3958/listp.gif) no-repeat scroll center top; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;" width="24"><img src="http://illiweb.com/fa/empty.gif" width="24" border="0"></td><td style="border-top: 0px none; padding: 0px; line-height: 20px; background-repeat: repeat;" align="left" background="http://i1036.photobucket.com/albums/a449/a1tinhgia3/image/listbg.gif" width="50%">

    <!-- BEGIN recent_topic_row -->
    <a href="{classical_row.recent_topic_row.U_TITLE}"><b><font style="font-family: Tahoma; font-size: 11px">{classical_row.recent_topic_row.L_TITLE}</font></b></a><br>

    <!-- END recent_topic_row -->
    </td>
    <td style="border-top: 0px none; padding: 0px; line-height: 16.5px; background-repeat: repeat;" align="center" background="http://i1036.photobucket.com/albums/a449/a1tinhgia3/image/listbg.gif" width="25%">
    <span class="gensmall">
    <!-- BEGIN recent_topic_row -->
    <img src="http://img816.imageshack.us/img816/9845/11750606.png" width="16px" height="16px" />
    {ON} {classical_row.recent_topic_row.S_POSTTIME}
    <br><!-- END recent_topic_row -->
    </span>
    </td>
    <td style="border-top: 0px none; padding: 0px; line-height: 17px; background-repeat: repeat;" align="left" background="http://i1036.photobucket.com/albums/a449/a1tinhgia3/image/listbg.gif" width="25%">
    <!-- BEGIN switch_poster -->
    <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
    <!-- END switch_poster -->
    <!-- BEGIN switch_poster_guest -->
    {classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
    <!-- END switch_poster_guest -->
    <!-- BEGIN recent_topic_row -->
    <img src="http://i41.servimg.com/u/f41/16/91/77/16/gold10.png">
    <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}"><font style="font-family: Tahoma; font-size: 11px">{classical_row.recent_topic_row.switch_poster.S_POSTER}</font></a>
    <br><!-- END recent_topic_row -->
    </div>

    </td>
    </tr></table></td></tr></tbody></table>
    <!-- END classical_row -->
    </div>

This will add a button at the top that when clicked will toggle the table, and change to 'open' or 'close' depeneding on whether the table is opened or closed.

Its not styled or anything, but it gives you the basics. Oh and it doesnt set a cookie, so if you refresh the page the table will be open again. I'm not sure who wrote the 'Recent Topics' thing, but with their permission i may make a tutorial on this, with cookies, and styled nicely.

LGforum
Hyperactive

Male Posts : 2260
Reputation : 258
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Re: Collapse coding help (please)

Post by High Hrothgar on November 2nd 2011, 1:41 am

Thank you very very much. I would love to see a tutorial with a cookie, as having it remain collapsed while moving around the forum would be nice. Solved! Very good


Last edited by High Hrothgar on November 2nd 2011, 2:24 am; edited 1 time in total (Reason for editing : Solved, thank you :))

High Hrothgar
New Member

Posts : 8
Reputation : 1
Language : English

Back to top Go down

Re: Collapse coding help (please)

Post by LGforum on November 2nd 2011, 8:50 am

No problem, I have contacted the author of that tutorial for permission to make an updated collapsible one with cookies. Wink

LGforum
Hyperactive

Male Posts : 2260
Reputation : 258
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum