Page 1 of 1
how to move the JSSCroll navigation
Posted: 01 Oct 2013, 07:12
by 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 3569 times
i tried searching but have had no luck :/
how to move the JSSCroll navigation
Posted: 02 Oct 2013, 01:25
by 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 -->
how to move the JSSCroll navigation
Posted: 02 Oct 2013, 08:23
by Gamers Talk
When I add the navigation code after
It shows underneath the collapsing image and not next to the collapsing image.
how to move the JSSCroll navigation
Posted: 03 Oct 2013, 21:35
by 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
how to move the JSSCroll navigation
Posted: 05 Oct 2013, 19:25
by Gamers Talk
this is really bugging me but how to do fix the gap
- shown in the red box (gap)