Simple Machines Community Forum

Customizing SMF => Tips and Tricks => Topic started by: klumy on December 13, 2005, 12:23:39 PM

Title: Go to page...
Post by: klumy on December 13, 2005, 12:23:39 PM
(http://img278.imageshack.us/img278/2712/clipboard010yz.jpg)

how do you find this ;)
Title: Re: Go to page...
Post by: Col on December 13, 2005, 08:22:48 PM
Yes, something like that would be useful. Some way of easily navigating to any page in a thread, instead of a few pages at a time. Yes, you could use the URL, but most members would not realise this.
Title: Re: Go to page...
Post by: klumy on December 17, 2005, 07:03:02 AM
any chance to find this feature in a future release?
Title: Re: Go to page...
Post by: Col on December 17, 2005, 08:27:02 PM
You should try this in mod requests as it doesn't appear to be of interest as a feature.


Edit: Just typos
Title: Re: Go to page...
Post by: 1MileCrash on December 17, 2005, 08:56:28 PM
wow. this is definately useful. get's my vote.
Title: Re: Go to page...
Post by: JayBachatero on December 17, 2005, 09:03:48 PM
This is usefull for looooong topics.   It seems like its not too hard to do.
Title: Re: Go to page...
Post by: 1MileCrash on December 17, 2005, 09:08:28 PM
i wouldnt make it a popup though. that seems too vbulletinish/annoying. Id say stick it in the bar next to the "Jump to" box on the Core theme (aligned to the left, as "Jump to" is aligned to the right)
Title: Re: Go to page...
Post by: JayBachatero on December 17, 2005, 09:41:37 PM
Yea that's a great place to put it Tipp.
Title: Re: Go to page...
Post by: klumy on December 18, 2005, 06:18:00 AM
Quote from: Col on December 17, 2005, 08:27:02 PM
You should try this in mod requests as it doesn't appear to be of interest as a feature.


Edit: Just typos

No I think this would be much better to put it as a default feature. It is especially really useful on large topics
Title: Re: Go to page...
Post by: Thantos on December 18, 2005, 01:39:31 PM
File:
Display.template.php
Find:

function template_main()
{
        global $context, $settings, $options, $txt, $scripturl, $modSettings;


Add after

        echo '
        <script type="text/javascript">
        <!--
                function jumptopage(box)
                {
                        jumpbox = document.getElementById("jumptopageinput"+box);
                        var reply = (jumpbox.value-1) * ', $modSettings['defaultMaxMessages'], ';
                        var page = "', $scripturl, '?topic=', $context['current_topic'], '." + reply;
                        window.location = page;
                }
        -->
        </script>';

Find:
<b>', $txt[139], ':</b> ', $context['page_index'];

Add after:

        echo ' Jump to Page <input type="text" id="jumptopageinput" name="jumptopageinput" size="4" /> <input type="button" onclick="jumptopage()" value="Go"/>';


Find:
<a name="bot"></a><b>', $txt[139], ':</b> ', $context['page_index'],

Add after
'Jump to Page <input type="text" id="jumptopageinput2" name="jumptopageinput2" size="4" /> <input type="button" onclick="jumptopage(2)" value="Go"/>',

Feel free to make it prettier and all that jazz
Title: Re: Go to page...
Post by: JayBachatero on December 18, 2005, 01:45:35 PM
A quick not search for $context['page_index'] again to add it to the bottom page index.
Title: Re: Go to page...
Post by: Thantos on December 18, 2005, 01:52:00 PM
Hmm that might cause problems Jay.  IDs are required to be unique.  So by putting it at the bottom you are violating that rule.

Let me update my original post to allow two boxes
Title: Re: Go to page...
Post by: JayBachatero on December 18, 2005, 02:04:09 PM
Ok.  I don't know much bout javascript.  I will make those changes to reflect the changes I've made.
Title: Re: Go to page...
Post by: 1MileCrash on December 18, 2005, 02:19:23 PM
we need it in other places too. not just display. message index too.
Title: Re: Go to page...
Post by: Thantos on December 18, 2005, 02:35:45 PM
On the message index do you mean per topic or per page of the message index?

For per page of the index
File:  MessageIndex.template.php
Find:

function template_main()
{
        global $context, $settings, $options, $txt, $scripturl, $modSettings;


Add after

        echo '
        <script type="text/javascript">
        <!--
                function jumptopage(box)
                {
                        jumpbox = document.getElementById("jumptopageinput"+box);
                        var perpage = ', isset($_REQUEST['all']) && !empty($modSettings['enableAllMessages']) ? $board_info['num_topics'] : $modSettings['defaultMaxTopics'], ';
                        var reply = (jumpbox.value-1) * perpage;
                        var page = "', $scripturl, '?board=', $context['current_board'], '." + reply;
                        window.location = page;
                }
        -->
        </script>';


Then its the same find and replace as before.
Title: Re: Go to page...
Post by: Col on December 18, 2005, 05:59:56 PM
Quote from: klumy on December 18, 2005, 06:18:00 AM
Quote from: Col on December 17, 2005, 08:27:02 PM
You should try this in mod requests as it doesn't appear to be of interest as a feature.


Edit: Just typos

No I think this would be much better to put it as a default feature. It is especially really useful on large topics

Yeah, I agree, but there hasn't been any official support for this, and I'm sure I've seen this raised before. I think a better way of jumping to the correct page should be standard.
Title: Re: Go to page...
Post by: inthe80s on January 26, 2006, 08:38:28 AM
Quote from: Col on December 18, 2005, 05:59:56 PM
Quote from: klumy on December 18, 2005, 06:18:00 AM
Quote from: Col on December 17, 2005, 08:27:02 PM
You should try this in mod requests as it doesn't appear to be of interest as a feature.


Edit: Just typos

No I think this would be much better to put it as a default feature. It is especially really useful on large topics

Yeah, I agree, but there hasn't been any official support for this, and I'm sure I've seen this raised before. I think a better way of jumping to the correct page should be standard.

I totally agree with this post.  I've had several users mention a need for this on my board.  On any messageboard where there are popular threads that people want to reference, regular users want to jump to specific pages (not necessarily the last post read).

So while I'll be adding it as a mod, it certainly should be considered as a regular feature as well.
Title: Re: Go to page...
Post by: inthe80s on January 26, 2006, 01:46:36 PM
You will need to modify one line if you plan on using this with a server that has the search engine friendly URL option on:

search for the line with "var page" and replace it with the following.

var page = "', $scripturl, '/topic,', $context['current_topic'], '." + reply + ".html";


Title: Re: Go to page...
Post by: Vinspire on May 10, 2006, 04:24:09 AM
There is so many codes lying around on this thread ... I've tried the 2 codes stated by thatos which is edit MessageIndex.template.php & Display.template but i couldn't get the things working.

So, whats the proper way to get it working and is there any screenshot of this function ?

Thanks  ;) ;) ;) ;D
Title: Re: Go to page...
Post by: Vinspire on July 02, 2006, 05:37:12 PM
I cant get it working :(

Can someone teach me how to get this working in SMF 1.1 RC 2 Please ?  :'(
Title: Re: Go to page...
Post by: Rudolf on July 08, 2006, 02:56:23 PM
I have a different approach for the jump box. It took half an hour to modify the code and it's universal all over the page indexes of the forum. It's not stylish, but useful nonetheless.
Here's what you have to do:
(Disclaimer: I only tested on a local copy of my forum which has 1.1RC1 installed. For me it works, but you use it at your own risk!)

Add the following code in the script.js file of the default theme.

function sprintf()
{
if (!arguments || arguments.length < 1 || !RegExp)
{
return;
}
var str = arguments[0];
var re = /([^%]*)%('.|0|\x20)?(-)?(\d+)?(\.\d+)?(%|b|c|d|u|f|o|s|x|X)(.*)/;
var a = b = [], numSubstitutions = 0, numMatches = 0;
while (a = re.exec(str))
{
var leftpart = a[1], pPad = a[2], pJustify = a[3], pMinLength = a[4];
var pPrecision = a[5], pType = a[6], rightPart = a[7];

//alert(a + '\n' + [a[0], leftpart, pPad, pJustify, pMinLength, pPrecision);

numMatches++;
if (pType == '%')
{
subst = '%';
}
else
{
numSubstitutions++;
if (numSubstitutions >= arguments.length)
{
alert('Error! Not enough function arguments (' + (arguments.length - 1) + ', excluding the string)\nfor the number of substitution parameters in string (' + numSubstitutions + ' so far).');
}
var param = arguments[numSubstitutions];
var pad = '';
       if (pPad && pPad.substr(0,1) == "'") pad = leftpart.substr(1,1);
  else if (pPad) pad = pPad;
var justifyRight = true;
       if (pJustify && pJustify === "-") justifyRight = false;
var minLength = -1;
       if (pMinLength) minLength = parseInt(pMinLength);
var precision = -1;
       if (pPrecision && pType == 'f') precision = parseInt(pPrecision.substring(1));
var subst = param;
       if (pType == 'b') subst = parseInt(param).toString(2);
  else if (pType == 'c') subst = String.fromCharCode(parseInt(param));
  else if (pType == 'd') subst = parseInt(param) ? parseInt(param) : 0;
  else if (pType == 'u') subst = Math.abs(param);
  else if (pType == 'f') subst = (precision > -1) ? Math.round(parseFloat(param) * Math.pow(10, precision)) / Math.pow(10, precision): parseFloat(param);
  else if (pType == 'o') subst = parseInt(param).toString(8);
  else if (pType == 's') subst = param;
  else if (pType == 'x') subst = ('' + parseInt(param).toString(16)).toLowerCase();
  else if (pType == 'X') subst = ('' + parseInt(param).toString(16)).toUpperCase();
}
str = leftpart + subst + rightPart;
}
return str;
}

The javascript sprintf() function is taken from here (http://jan.moesen.nu/code/javascript/sprintf-and-printf-in-javascript/)

in Sources/Subs.php file search for:
return $pageindex;
add before

//Add jumptobox - Rudiksz
preg_match('~href="(.*)"~',$base_link,$href);
if ($max_value>$num_per_page)
$pageindex .= '<input type="text" name="jumpbox" value="" class="jumptobox" onkeypress="if (event.keyCode == 13) document.location = sprintf(\''.addcslashes($href[1],"'").'\',(this.value-1)*'.$num_per_page.');"/>';


in your theme(s) style.css add

.jumptobox
{
width: 30px;
}

Style according to your taste using any CSS1/2/3 property you know  ;)

Now you should have a small box after every page index on all the forum where there are more then one pages.
Enjoy, and any feedback is appreciated.
Note: You have to press ENTER in the text box to jump
Title: Re: Go to page...
Post by: Vinspire on July 08, 2006, 03:57:40 PM
Rudolf, I tried your code and it is working smoothly. Anyway, how to make it look like this.

(http://img278.imageshack.us/img278/2712/clipboard010yz.jpg)

Thanks :)
Title: Re: Go to page...
Post by: Rudolf on July 08, 2006, 04:01:24 PM
lol, that's more involving
I didn't feel like doing it saturday night
some extra html and javascript coding would be needed, but the main concept is already done
I'll work on it ... soon
I'm glad it's working.
Title: Re: Go to page...
Post by: Vinspire on July 08, 2006, 04:05:26 PM
Quote from: Rudolf on July 08, 2006, 04:01:24 PM
lol, that's more involving
I didn't feel like doing it saturday night
some extra html and javascript coding would be needed, but the main concept is already done
I'll work on it ... soon
I'm glad it's working.

Okie. Thanks. This mod is awesome and your script work smoothly but need some enhancements to make it look nicer than just a box :P

Thanks again dude :)
Title: Re: Go to page...
Post by: Rudolf on July 08, 2006, 06:00:11 PM
Tweaked it a little, to avoid confusion disregard/undo previously described procedure
Here's the updated stuff:
(Disclaimer: I only tested on a local copy of my forum which has 1.1RC1 installed. For me it works, but you use it at your own risk!)

Add the following code in the script.js file of the default theme.

function showHideJumpLink(box)
{
var jumplinks = document.getElementsByName('jumplink'+box);
var jumpboxes = document.getElementsByName('jumpbox'+box);
for (i = 0; i<jumplinks.length; i++)
if (jumplinks[i].id == 'jumplink'+box)
if (jumplinks[i].src == smf_images_url+'/collapse.gif')
{
jumplinks[i].src = smf_images_url+'/expand.gif';
jumpboxes[i].style.display = '';
//position the box below the link
jumpboxes[i].style.left = (findPosX(jumplinks[i]) + jumplinks[i].offsetWidth -jumpboxes[i].offsetWidth) +'px';
}
else
{
jumplinks[i].src = smf_images_url+'/collapse.gif';
jumpboxes[i].style.display = 'none';
}
}

function jumpToPage(baselink,box,num_per_page)
{
var jumptext = document.getElementsByName('jumptext'+box)[0];
document.location = sprintf(baselink,(jumptext.value-1)*num_per_page);
}

function syncJumpText(obj, box)
{
value = obj.value;

var jumptexts = document.getElementsByName('jumptext'+box);
for (i = 0; i<jumptexts.length; i++)
jumptexts[i].value = value;
}

function findPosX(obj) {
var curleft = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curleft += obj.offsetLeft
obj = obj.offsetParent; }
}
else if (obj.x) curleft += obj.x;
return curleft;
}

function findPosY(obj) {
var curtop = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curtop += obj.offsetTop
obj = obj.offsetParent;}
  }
else if (obj.y) curtop += obj.y;
return curtop;
}


function sprintf()
{
if (!arguments || arguments.length < 1 || !RegExp)
{
return;
}
var str = arguments[0];
var re = /([^%]*)%('.|0|\x20)?(-)?(\d+)?(\.\d+)?(%|b|c|d|u|f|o|s|x|X)(.*)/;
var a = b = [], numSubstitutions = 0, numMatches = 0;
while (a = re.exec(str))
{
var leftpart = a[1], pPad = a[2], pJustify = a[3], pMinLength = a[4];
var pPrecision = a[5], pType = a[6], rightPart = a[7];

//alert(a + '\n' + [a[0], leftpart, pPad, pJustify, pMinLength, pPrecision);

numMatches++;
if (pType == '%')
{
subst = '%';
}
else
{
numSubstitutions++;
if (numSubstitutions >= arguments.length)
{
alert('Error! Not enough function arguments (' + (arguments.length - 1) + ', excluding the string)\nfor the number of substitution parameters in string (' + numSubstitutions + ' so far).');
}
var param = arguments[numSubstitutions];
var pad = '';
       if (pPad && pPad.substr(0,1) == "'") pad = leftpart.substr(1,1);
  else if (pPad) pad = pPad;
var justifyRight = true;
       if (pJustify && pJustify === "-") justifyRight = false;
var minLength = -1;
       if (pMinLength) minLength = parseInt(pMinLength);
var precision = -1;
       if (pPrecision && pType == 'f') precision = parseInt(pPrecision.substring(1));
var subst = param;
       if (pType == 'b') subst = parseInt(param).toString(2);
  else if (pType == 'c') subst = String.fromCharCode(parseInt(param));
  else if (pType == 'd') subst = parseInt(param) ? parseInt(param) : 0;
  else if (pType == 'u') subst = Math.abs(param);
  else if (pType == 'f') subst = (precision > -1) ? Math.round(parseFloat(param) * Math.pow(10, precision)) / Math.pow(10, precision): parseFloat(param);
  else if (pType == 'o') subst = parseInt(param).toString(8);
  else if (pType == 's') subst = param;
  else if (pType == 'x') subst = ('' + parseInt(param).toString(16)).toLowerCase();
  else if (pType == 'X') subst = ('' + parseInt(param).toString(16)).toUpperCase();
}
str = leftpart + subst + rightPart;
}
return str;
}

The javascript sprintf() function is taken from here (http://jan.moesen.nu/code/javascript/sprintf-and-printf-in-javascript/)

in Sources/Subs.php file search for:
return $pageindex;
add before

//Add jumptobox - Rudiksz
static $box_num = 0;
global $settings;
$box_num++;
preg_match('~href="(.*)"~',$base_link,$href);
if ($max_value>$num_per_page)
$pageindex .= '
<img src="'. $settings['images_url']. '/collapse.gif" alt="+" name="jumplink'.$box_num.'" id="jumplink'.$box_num.'" border="0" onclick="showHideJumpLink('.$box_num.');"/>
<div id="jumpbox'.$box_num.'" name="jumpbox'.$box_num.'" class="jumpbox windowbg" style="display: none">
<div class="titlebg">Go to page:</div>
<input type="text" name="jumptext'.$box_num.'" value="" class="jumptext" onkeyup="syncJumpText(this,'.$box_num.')"/>
<input type="button" value="Go" onclick="return jumpToPage(\''.addcslashes($href[1],"'").'\','.$box_num.','.$num_per_page.')" />
</div>';


in your theme(s) style.css add

.jumpbox
{
width: 100px;
border: 2px white ridge;
position: absolute;
left: 100px;
z-index: 100;
}
.jumptext
{
width: 60px;
}

Style according to your taste using any CSS1/2/3 property you know  ;)

The box integrates in the used theme, by using it's icons and css classes, though I realise that there is room for improvement regarding its look. I'm not much of a visual designer.
You need to include the .jumpbox into every of your theme's style.css for correct positioning.
It's hard coded in english ... for now.
There are some problems with the current settings, to work around those I had to do a compromise.
Sometimes there are two identical page indexes in the pages and this gives problems. The solution was to show/hide all the boxes regardless if the upper or lower button was clicked. Changing the value in any text box updates all the others. When jumping it takes the first box's value to jump.
It was a tricky one. :P

Edit: removed an alert line from a javascript function. If you already applied then just redo step 1 :)
Title: Re: Go to page...
Post by: Vinspire on July 09, 2006, 12:22:28 AM
(http://img136.imageshack.us/img136/166/goto3ec.jpg)

Awesome .... Thanks rudolf :)
Title: Re: Go to page...
Post by: Rudolf on July 09, 2006, 12:40:37 AM
adjust the width of

.jumptext
{
width: 60px;
}

to make the Go button enter on one line.
Or make the whole box wider.
Title: Re: Go to page...
Post by: Vinspire on July 09, 2006, 12:44:03 AM
Quote from: Rudolf on July 09, 2006, 12:40:37 AM
adjust the width of

.jumptext
{
width: 60px;
}

to make the Go button enter on one line.
Or make the whole box wider.

Adjusted but i am too lazy to take the new screenshot :P
Title: Re: Go to page...
Post by: MonicaCO on August 09, 2006, 06:02:30 PM
Quote from: Rudolf on July 08, 2006, 06:00:11 PM
Tweaked it a little, to avoid confusion disregard/undo previously described procedure
Here's the updated stuff:

I applied the changes as you described, to our forum running 1.0.7...  The jump to box shows and hides as appropriate, but when you hit Go the screen refreshes back to home... presumably because the link generated from this code isn't consistent with 1.0.7 somehow?  Anyone have suggestions as to what the issue is?

Monica
Title: Re: Go to page...
Post by: Webrunner on May 14, 2007, 05:09:12 PM
here is my code (a lot easier i think)

in display.template.php pjut this somewhere in your lay-out.


echo '<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
function formHandler(vp_formpage){
var NUM = 15*(document.vp_formpage.site.value-1)
var URL = "http://www.vrouwenpower.nl/forum/index.php/topic,'.$context['current_topic'].'."+NUM+".html";
window.location.href = URL;
}
// End -->
</SCRIPT>';


echo'<form name="vp_formpage">
<input type="text" name="site" size="4">
<input type=button value="Go!" onClick="javascript:formHandler(this)">
</form>';



No fancy colors etc but it does the trick ;)
Title: Re: Go to page...
Post by: Webrunner on May 14, 2007, 05:35:56 PM
Oh, you need to replace the 15 for the numbers of posts you are showing per page ( couldn't find the context variable for that).
Title: Re: Go to page...
Post by: Rudolf on May 14, 2007, 06:40:26 PM
Quote from: Webrunner on May 14, 2007, 05:09:12 PM
here is my code (a lot easier i think)

in display.template.php pjut this somewhere in your lay-out.


echo '<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
function formHandler(vp_formpage){
var NUM = 15*(document.vp_formpage.site.value-1)
var URL = "http://www.vrouwenpower.nl/forum/index.php/topic,'.$context['current_topic'].'."+NUM+".html";
window.location.href = URL;
}
// End -->
</SCRIPT>';


echo'<form name="vp_formpage">
<input type="text" name="site" size="4">
<input type=button value="Go!" onClick="javascript:formHandler(this)">
</form>';



No fancy colors etc but it does the trick ;)

Your code works for the topics... and nothing else. Modifying the SMF function will make you have an go to page box for every pageindex all around the forum. Without modifying any template file.

I think I'll make this a mod, it's a good code (I tweaked it some more during these months) and it's a waste.
Title: Re: Go to page...
Post by: Webrunner on May 20, 2007, 06:37:49 PM
Isn'ty ity better to modify template files rather then other files?
Also with some minor modifications the code can be used for other parts as well.
Title: Re: Go to page...
Post by: Rudolf on May 20, 2007, 06:42:26 PM
Yes, usually it is better, but in this case you want to modify a functionality, not only how it is displayed. The source code that generates the page index is in that function, so it's logical that I would modify that one.
Then you can simply customize the looks of it in your theme using the stylesheet.

The best advantage of this approach is that you write one block of code and you have it everywhere, it eliminates duplicating, triplicating code.
Title: Re: Go to page...
Post by: BuЯЯЯЯaK on September 02, 2007, 03:37:43 PM
Thx Rudolf =)
Title: Re: Go to page...
Post by: 91design on April 04, 2013, 06:27:36 AM
There's any way to make it work with SMF 2.0.4? The box show and hide correctly, but doesn't work (e.g. topic=xxx.%1$d)