scroll to post?

[viego]

FORUM LINK: HERE

Hello, it's me again.. I'm very close to pulling out precious little hairs from my head at this point. Most stuff we've got to work and do! but this theme does not scroll to posts or the bottom when you submit your post.. We've tried digging, tried old scripts and figuring out what the difference is between our previous theme and the new one. Simply can't find it. >_< It worked on the previous theme just fine so it's definitely something within the theme that's doing something obnoxious.

Yes, if you click the link to go to post x it shows in the URL but doesn't actually scroll to it on-site immediately. If you post a post it simply stays at the top and does not scroll animate to the bottom.

Perhaps its something simple but I can't find the solution right now ;-; 

There's a testing area where you can freely post and test in; the third button below the mini profile is the tracker link that uses "link to x post", (open to everyone to click and see!) to test it out for yourself

[Chris]

A few things immediately jump out at me:

1. There are no IDs on any of the posts in the thread to facilitate scrolling to a particular one; the $[post.content_id] variable appears to have been left out of the post layout. Without the ID that matches the numeric ID of the post in the URL then there is nothing to scroll to

   insidenewhogwarts.proboards.com/post/34305/thread requires a post with the ID of post-34305 on the page for the javascript to grab that scrollTo from the URL^[*] and then scroll to it.

   
   
   
   SPOILER: Click to show
   
   
   
   
   The posts themselves are structured in their own tables which shouldn't be a problem just make sure they get their proper IDs
   
   
   
   
2. notice that "/thread" was added to the end of the URL taken from the plotter so all the posts in the thread for that particular page would display; without that added part, only the post in question is displayed on the page, and so no need to scroll to it
   
   

[viego]

1. This is the layout template for the post list; which does show the $[post.content_id] in it. I'd assume that would do the trick already but I didn't change it >< lol

2. The plotter links are fine but the tracker links don't actually do their supposed thing. When I hover over the button it will show the "/thread" at the end but if you click on it will throw in the ScrollTo=3300 but not actually scroll to it. here's mine. every tracker button (third) in my tracker will show as /thread but when you click on it does show the ID of the post itself on the url up top. I'm finding it a mysterious thing!

{foreach $[post]}
<tr id="$[post.content_id]" class="$[post.content_class]{if $[post.even]} even{/if}{if $[viewing_recent_posts]} recent{/if}">
<td class="$[post.unblocked_class]" style="border-bottom:none!important;">
<table role="grid" style="margin:-10px;border-bottom:none!important;">
<tr>
<td class="left-panel" rowspan="2" style="width:300px!important;vertical-align:top;">
$[post.created_by.miniprofile]
                       </td>
<td class="content" style="vertical-align:top;width:715px;">
<article>
<div class="content-head ui-helper-clearfix" style="border-bottom:none!important;">
                               <div class="irememberminitop">
                                   <a href="/conversation/new/$[post.created_by.id]" title="SEND MESSAGE">
                                   <div class="irememberminimessage" style="background-color:#$[post.created_by.group.color]!important;"><div class="irememberminimessage1">
                                       <div style="border-color:#$[post.created_by.group.color]!important;color:#$[post.created_by.group.color]!important;"><i class="ion-chatbubble"></i></div></div></div></a>
                                   <div class="irememberminitop1">$[post.created_by]</div>
                                   <div class="behave-now">
                                       <div class="irememberminitop2">$[post.created_by.personal_text]</div>
                                       <div class="behave-controls">
                                       <div class="controls" style="overflow:visible!important;">
                                   <a href="$[post.quote_button.href]"><div class="irememberthread4"><i class="ion-quote" style="color:#$[post.created_by.group.color]!important;"></i> QUOTE</div></a>
{if $[post.can.edit]}<a href="$[post.edit_button.href]"><div class="irememberthread4"><i class="ion-gear-b" style="color:#$[post.created_by.group.color]!important;"></i> EDIT</div></a>{/if}
$[post.likes.button]
$[post.select_options]
</div>
                                       </div>
                                   </div>
                                   
                               </div>
<div class="irememberthread1">
                           <div class="irememberthread5">$[post.likes]</div>
<div class="info">
                                   <div class="irememberthread2"><a href="$[post.thread.link.href]">$[post.thread.subject]</a></div>
                                   <div class="irememberthread3">$[post.created_on]  {if $[post.how_posted]}posted via $[post.how_posted]{/if}</div>
</div>
                                   <div class="irememberthreadbutton">

                                   </div>
                               </div>
</div>
<div class="message" style="padding:30px;">$[post.message]</div>
</article>
</td>
</tr>
<tr>
<td class="foot" style="padding-bottom:0px!important;">
                       {if $[post.edited]}
<div class="punishment-edit"><div>LAST EDIT: $[post.edited.date] by $[post.edited.by_user]</div></div>
{/if}
{if $[post.created_by.signature]}
<div class="iremembersignature">$[post.created_by.signature]</div>
{/if}
</td>
</tr>
</table>
</td>
{if $[post.is_blocked]}
<td class="$[post.blocked_class] content center">
<div class="message note pad-bottom">This post is hidden</div>
$[post.display_blocked_post_button]
</td>
{/if}
</tr>
{/foreach}
{if !$[post]}
<tr class="last"><td class="last center" colspan="1">No posts were found.</td></tr>
{/if}
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link href='http://fonts.googleapis.com/css?family=Montserrat:200,400,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,800,900' rel='stylesheet' type='text/css'>

[Chris]

If you post your thread layout, it can be verified, but what you just posted of the post layout looks to be invalid HTML since you're trying to insert a <TR> into anything except a <tbody>, <thead> or <tfoot>^[1].

Using the browser inspector, it looks like this code in thread layout <table class="list" role="presentation">
<tbody class="$[list_class]">
$[post_list]
</tbody>
</table>

has been replaced with this code <div class="list" role="presentation">
<div class="$[list_class]">
$[post_list]
</div>
</div>

No tables in sight, so the first line of the post list calling for the insertion of <tr id="$[post.content_id]" class="$[post.content_class]{if $[post.even]} even{/if}{if $[viewing_recent_posts]} recent{/if}"> into a <div> makes no sense to the browser, and it probably just ignored it.

As I stated earlier, it cannot scroll to anything if there are no IDs to scroll to and the image I posted of the inspector shows no IDs in sight.

---

Edit:

It is likely, the browser skipped the <tr> that contains the $[post.content_id] variable because it is being instructed to insert that <tr> into a <div>. It would also skip the subsequent <td> since that requires the <tr> parent which was just ignored. You finally end up with the <table> of each post, which has very few restrictions on where it can be housed thus leading to the structure that shows up in the inspector where every post is housed in its own table with no surrounding cell or table row and more importantly, no post-xxx ID.