The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Collapse coding help (please)

3 posters

Go down

Collapse coding help (please) Empty Collapse coding help (please)

Post by High Hrothgar 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:
Collapse coding help (please) Download2z

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://2img.net/i/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


avatar
High Hrothgar
New Member

Posts : 8
Reputation : 1
Language : English

Back to top Go down

Collapse coding help (please) Empty Re: Collapse coding help (please)

Post by Stephen- November 1st 2011, 9:18 am

Are you using the latest topic ? (new system)
Stephen-
Stephen-
Hyperactive

Male Posts : 2542
Reputation : 326
Language :

Back to top Go down

Collapse coding help (please) Empty Re: Collapse coding help (please)

Post by LGforum 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://2img.net/i/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://2img.net/i/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
LGforum
Hyperactive

Male Posts : 2265
Reputation : 264
Language : English
Location : UK

Back to top Go down

Collapse coding help (please) Empty Re: Collapse coding help (please)

Post by High Hrothgar 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 :))
avatar
High Hrothgar
New Member

Posts : 8
Reputation : 1
Language : English

Back to top Go down

Collapse coding help (please) Empty Re: Collapse coding help (please)

Post by LGforum 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
LGforum
Hyperactive

Male Posts : 2265
Reputation : 264
Language : English
Location : UK

Back to top Go down

Back to top

- Similar topics

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