Fixing my profile

[Boy_Wonder]

forum.veskelregion.com/user/1

So basically what I'm trying to do is to get it so that when you click on each link at the bottom of the cp you'll get taken to the respective section.

Right now its a bit... all over the place.

So here's the full template:

<div class="container show-user $[user.group.name]">

   <div class="title-area user">$[user.name]</div>

   <div class="side-img"></div><div class="board-area">

   <div class="cp-top">

       <div class="cp-left">$[user.avatar_medium]</div>

       <div class="cp-right">

           <div class="float-left">

{if $[user.group]}

$[user.group.name]<br />$[user.group.stars]<br />

{else}

$[user.rank.name]<br />$[user.rank.stars]<br />

   {/if}

   <b>Pokedollars:     <span class="money_amount"></span></b>

           </div>

    <div class="float-right controls">

          $[options]

$[send_message_button]

$[edit_profile_button]

$[follow_button]

$[invite_button]

<div class="float-right clear pad-top">

Username: <span class="note pad-right">$[user.username]</span>

{if $[user.is_online]}

Member is Online

{else}

Last Online: <span class="note">$[user.last_online]</span>

{/if}

</div>

</div>

   <div style="clear: both;"></div>

   </div>

       <div style="clear: both;"></div>

   </div>

   <div class="cp-main">

       $[form.header]



   <div class="side-scrolly">

       <div class="side-scrollyInterior">

           <div class="content1" id="mainInfo">

               <table>

<tr>

<td id="center-column">

{if $[can.update_status]}

<div class="content-box center-col">

<table>

<tr>

<td class="status-input">

$[form.update.input]

</td>

<td class="status-submit">

$[form.submit.button]

</td>

</tr>

</table>

</div>

{/if}

{if $[user.warning.bar]}

<div class="content-box center-col">

<table><tr><td class="warning-table-td">Warning Level: </td><td>$[user.warning.bar]</td></tr></table>

</div>

{/if}

{if $[user.badges]}

<div class="content-box center-col $[user.badges_container_class]">

{foreach $[user.badges]}$[user.badges]{/foreach}

$[user.gift_link]

</div>

{/if}

<div class="content-box center-col">

<table>

<tr>

<td class="headings">Latest Status:</td>

<td>$[user.personal_text]</td>

</tr>

{if $[user.custom_title]}

<tr>

<td class="headings">Custom Title:</td>

<td>$[user.custom_title]</td>

</tr>

{/if}

{if $[user.email]}

<tr>

<td class="headings">Email:</td>

<td>$[user.email]</td>

</tr>

{/if}

{if $[user.website]}

<tr>

<td class="headings">Web Site:</td>

<td>$[user.website]</td>

</tr>

{/if}

{if $[user.birthday]}

<tr>

<td class="headings">Birthday:</td>

<td>$[user.birthday]</td>

</tr>

{/if}

{if $[user.age]}

<tr>

<td class="headings">Age:</td>

<td>$[user.age]</td>

</tr>

{/if}

{if $[user.gender]}

<tr>

<td class="headings">Gender:</td>

<td>$[user.gender.text]</td>

</tr>

{/if}

{if $[user.location]}

<tr>

<td class="headings">Location:</td>

<td>$[user.location]</td>

</tr>

{/if}

<tr>

<td class="headings">Posts:</td>

<td>$[user.posts]</td>

</tr>

<tr>

<td class="headings">Date Registered:</td>

<td>$[user.registered_on]</td>

</tr>

{foreach $[user.custom_field]}

<tr class="$[user.custom_field.content_class]">

<td class="headings">

$[user.custom_field.name]:

</td>

<td>

$[user.custom_field.value]

</td>

</tr>

{/foreach}

</table>

</div>

<div class="content-box center-col">

$[recent_posts_link]<br />

$[recent_threads_created_link]

</div>

{if $[user.signature]}

<div class="content-box center-col">

Signature <hr />

$[user.signature]

</div>

{/if}

</td>



</tr>

</table>

       </div>

       <div class="content2" id="inventory"><h3>PLAYER INVENTORY</h3>

           <div class="eopbackpack-moved"></div>

           <div class="eoppc-moved"></div>

       </div>

       <div class="content3" id="pokedex"><h3>POKEDEX STATS</h3><br />

       SEEN POKEMON: - CAUGHT POKEMON <br />

       PARTY POKEMON: <br />

           PC POKEMON: <br /></div>

           <div class="content4" id="activity"><div id="thepentashelf"></div></div>

           </div>

   </div>

       <div class="cpLinks"><a href="#mainInfo">USER CP</a> - <a href="#inventory">INVENTORY</a> - <a href="#pokedex">POKEDEX</a> - <a href="#activity">RECENT ACTIVITY</a></div>

   </div>

   </div>

   <div style="clear: both;"></div>



</div>

$[form.footer]

<script>

   $(document).ready(function(){

      $("#profileInventory").appendTo(".eopbackpack-moved");

      $("#profileInventoryVault").appendTo(".eoppc-moved");

$('a[href^="#"]').on('click', function(event) {

   var target = $(this.getAttribute('href'));

   if( target.length ) {

       event.preventDefault();

       $('.side-scrolly, .side-scrollyInterior').stop().animate({

           scrollLeft: target.offset().left

       }, 1000);

   }

});

     

   });

</script>I've tried various options of moving around the area and its still jumping almost randomly. So if anyone can help?

[Boy_Wonder]

BUMPETY - 

Maybe Brian or any other templatey genius

[Brian]

When you use .offset() it's getting the position of the element relative to the document. .position() would get it relative to the parent element.

Despite that, both of these will actively update once the element has moved. Ideally what you'll want to do is reposition the columns according to their width. Since all of your columns are the same size the easiest way to do this would be to move them according to the combined width of all the columns preceding your target.

Replacing your click event for the links with this will accomplish this.

$('.cpLinks a[href^="#"]').on('click',function(event){
	var target = $(this.getAttribute('href'));
	if(target.length){
		event.preventDefault();
		$('.side-scrolly, .side-scrollyInterior').stop().animate({
			scrollLeft: target.outerWidth() * target.prevAll('div').length
		}, 1000);
	}
});