how to move the JSSCroll navigation

[Gamers Talk]

How did you move the navigation next to the collapsing shown below?

this is where mine is at at the moment but I want it like yours shown above

play2.png (13.96 KiB) Viewed 3568 times

i tried searching but have had no luck :/

[martin123456]

You mean RECENT ACTIVE TOPICS ?

here is how i have done it on my forum this is the complete html file so your need to look at the edits

Code: Select all

<div class="forumlist">
      <div class="<!-- IF S_ENABLE_SNOW -->forabg2<!-- ELSE -->forabg<!-- ENDIF -->">
         <div class="inner"><span class="corners-top"><span></span></span>
         <ul class="topiclist">
		<li class="header">
			<dl class="icon">
				<dt>{TSRAT_NUMBER} {L_RECENT_ACTIVE}</dt>
				<dd class="topics">{L_REPLIES}</dd>
				<dd class="posts">{L_VIEWS}</dd>
				<dd class="lastpost"><span>{L_LAST_POST}</span></dd>
			</dl>
		</li>
	</ul>
	<!-- IF SCRIPT_NAME eq 'index' --><div class="trigger active"></div><!-- ENDIF -->
            <div class="collapsethis">
			<!-- IF S_TS_JSSCROLL and TS_JSSCROLL_NAVIGATION and not S_TS_TICKER -->
			<div style="position: relative; float:right; padding-right:40px; margin-top: -21px; height:17px;"><a href="#" title="Previous" id="ticker-previous"><img src="./images/player_rew.png" width="16" height="16" alt="Previous" /></a> <a href="#" title="Next" id="ticker-next"><img src="./images/player_fwd.png" width="16" height="16" alt="Next" /></a> <a href="#" title="Stop" id="stop"><img src="./images/player_pause.png" width="16" height="16" alt="Stop" /></a> <a href="#" title="Start" id="start"><img src="./images/player_play.png" width="16" height="16" alt="Start" /></a></div>
	         <!-- ENDIF -->
	<ul <!-- IF S_TS_JSSCROLL and not S_TS_TICKER -->id="vertical-ticker" <!-- ELSEIF S_TS_TICKER and not S_TS_JSSCROLL -->id="news" <!-- ENDIF -->class="topiclist forums">
		<!-- IF S_TS_JSSCROLL or not S_TS_TICKER -->
		<!-- BEGIN recent_active -->
		<li class="row">
		<dl class="icon" style="background-image: url(<!-- IF recent_active.FORUM_IMAGE -->{ROOT_PATH}{recent_active.FORUM_IMAGE}<!-- ELSE -->{ROOT_PATH}images/starimg.png<!-- ENDIF -->); background-repeat: no-repeat;">
		<dt>
		   <a href="{recent_active.U_FIRST_TOPIC}" class="forumtitle">{recent_active.TOPIC_TITLE}</a><br />
		   {L_POST_BY_AUTHOR} <a style="font-weight:bold; color: #{recent_active.TOPIC_FIRST_POSTER_COLOUR};" href="{recent_active.USERNAME_FIRST}">{recent_active.TOPIC_FIRST_POSTER_NAME}</a> {L_IN} <a href="{recent_active.FORUM_URL}">{recent_active.FORUM_NAME}</a> {recent_active.TOPIC_TIME}
		</dt>
		<dd class="topics">{recent_active.TOPIC_REPLIES}</dd>
		<dd class="posts">{recent_active.TOPIC_VIEWS}</dd>
		<dd class="lastpost"><span>
		   {L_POST_BY_AUTHOR} <a style="font-weight:bold; color: #{recent_active.TOPIC_LAST_POSTER_COLOUR};" href="{recent_active.USERNAME_LAST}">{recent_active.TOPIC_LAST_POSTER_NAME}</a> <a href="{recent_active.U_LAST_TOPIC}">{LAST_POST_IMG}</a><br />{recent_active.TOPIC_LAST_POST_TIME}</span>
		</dd>
		</dl>
		</li>
		<!-- END recent_active -->
		<!-- ELSEIF S_TS_TICKER -->
		<li class="row">
		<!-- BEGIN recent_active -->
		<dl class="icon" style="background-image: url({ROOT_PATH}images/starimg.png); background-repeat: no-repeat;">
		<dt>
		   <a href="{recent_active.U_FIRST_TOPIC}" class="forumtitle">{recent_active.TOPIC_TITLE}</a><br />
		   {L_POST_BY_AUTHOR} <a style="font-weight:bold; color: #{recent_active.TOPIC_FIRST_POSTER_COLOUR};" href="{recent_active.USERNAME_FIRST}">{recent_active.TOPIC_FIRST_POSTER_NAME}</a> {L_IN} <a href="{recent_active.FORUM_URL}">{recent_active.FORUM_NAME}</a> {recent_active.TOPIC_TIME}
		</dt>
		<dd class="topics">{recent_active.TOPIC_REPLIES}</dd>
		<dd class="posts">{recent_active.TOPIC_VIEWS}</dd>
		<dd class="lastpost"><span>
		   {L_POST_BY_AUTHOR} <a style="font-weight:bold; color: #{recent_active.TOPIC_LAST_POSTER_COLOUR};" href="{recent_active.USERNAME_LAST}">{recent_active.TOPIC_LAST_POSTER_NAME}</a> <a href="{recent_active.U_LAST_TOPIC}">{LAST_POST_IMG}</a><br />{recent_active.TOPIC_LAST_POST_TIME}</span>
		</dd>
		</dl>
		<!-- END recent_active -->
		</li>
		<!-- ENDIF -->
	</ul>
	</div>
      
<span class="corners-bottom"><span></span></span></div>
</div>
    </div>

note the location of this part

Code: Select all

<!-- IF S_TS_JSSCROLL and TS_JSSCROLL_NAVIGATION and not S_TS_TICKER -->
         <div style="position: relative; float:right; padding-right:40px; margin-top: -21px; height:17px;"><a href="#" title="Previous" id="ticker-previous"><img src="./images/player_rew.png" width="16" height="16" alt="Previous" /></a> <a href="#" title="Next" id="ticker-next"><img src="./images/player_fwd.png" width="16" height="16" alt="Next" /></a> <a href="#" title="Stop" id="stop"><img src="./images/player_pause.png" width="16" height="16" alt="Stop" /></a> <a href="#" title="Start" id="start"><img src="./images/player_play.png" width="16" height="16" alt="Start" /></a></div>
            <!-- ENDIF -->
   <ul <!-- IF S_TS_JSSCROLL and not S_TS_TICKER -->id="vertical-ticker" <!-- ELSEIF S_TS_TICKER and not S_TS_JSSCROLL -->id="news" <!-- ENDIF -->class="topiclist forums">
      <!-- IF S_TS_JSSCROLL or not S_TS_TICKER -->

[Gamers Talk]

When I add the navigation code after

Code: Select all

<div class="collapsethis">

It shows underneath the collapsing image and not next to the collapsing image.

[themission]

Code: Select all

<div style="position: relative; float:right; padding-right:40px; margin-top: -22px; height:17px;"><a href="#" title="Previous" id="ticker-previous"><img src="./images/player_rew.png" alt="Previous" height="16" width="16"></a> <a href="#" title="Next" id="ticker-next"><img src="./images/player_fwd.png" alt="Next" height="16" width="16"></a> <a href="#" title="Stop" id="stop"><img src="./images/player_pause.png" alt="Stop" height="16" width="16"></a> <a href="#" title="Start" id="start"><img src="./images/player_play.png" alt="Start" height="16" width="16"></a></div>

you will have to adjust the numbers in this bit padding-right: 40px; margin-top: -22px; height:17px

[Gamers Talk]

this is really bugging me but how to do fix the gap

shown in the red box (gap)