Collapse coding help (please)
3 posters
Page 1 of 1
Collapse coding help (please)
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
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:
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
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
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://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
High Hrothgar- New Member
- Posts : 8
Reputation : 1
Language : English
Re: Collapse coding help (please)
Are you using the latest topic ? (new system)
Stephen-- Hyperactive
- Posts : 2542
Reputation : 326
Language :
Re: Collapse coding help (please)
If i am right in believing this is the needed HTML for the recent topics you have:
Then this below will be a collapsible version:
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.
- 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- Hyperactive
- Posts : 2265
Reputation : 264
Language : English
Location : UK
Re: Collapse coding help (please)
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!
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
Re: Collapse coding help (please)
No problem, I have contacted the author of that tutorial for permission to make an updated collapsible one with cookies.
LGforum- Hyperactive
- Posts : 2265
Reputation : 264
Language : English
Location : UK
Similar topics
» Collapse Sub-Topics
» help with collapse messages
» How to collapse subforums on home page for users
» Collapse the forums so only categories can be seen?
» [Collapse] Space "Footer"
» help with collapse messages
» How to collapse subforums on home page for users
» Collapse the forums so only categories can be seen?
» [Collapse] Space "Footer"
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum