Go to page...

Started by klumy, December 13, 2005, 12:23:39 PM

Previous topic - Next topic

Rudolf

#20
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!)


  • Step 1:
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

  • Step 2:
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.');"/>';


  • Step 3:
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
I will update all my mods in the next few weeks. Thanks for your patience.

SVG-Collapse (you need an SVG compliant browser)

Vinspire

Rudolf, I tried your code and it is working smoothly. Anyway, how to make it look like this.



Thanks :)

Rudolf

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.
I will update all my mods in the next few weeks. Thanks for your patience.

SVG-Collapse (you need an SVG compliant browser)

Vinspire

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 :)

Rudolf

#24
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!)


  • Step 1:
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

  • Step 2:
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>';


  • Step 3:
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 :)
I will update all my mods in the next few weeks. Thanks for your patience.

SVG-Collapse (you need an SVG compliant browser)

Vinspire



Awesome .... Thanks rudolf :)

Rudolf

adjust the width of

.jumptext
{
width: 60px;
}

to make the Go button enter on one line.
Or make the whole box wider.
I will update all my mods in the next few weeks. Thanks for your patience.

SVG-Collapse (you need an SVG compliant browser)

Vinspire

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

MonicaCO

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

Webrunner

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 ;)
There is a difference between knowing the path and walking the path.

=========================================
Vrouwen Power! | Sprintweb: No nonsense e-Business consultancy

Webrunner

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).
There is a difference between knowing the path and walking the path.

=========================================
Vrouwen Power! | Sprintweb: No nonsense e-Business consultancy

Rudolf

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.
I will update all my mods in the next few weeks. Thanks for your patience.

SVG-Collapse (you need an SVG compliant browser)

Webrunner

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.
There is a difference between knowing the path and walking the path.

=========================================
Vrouwen Power! | Sprintweb: No nonsense e-Business consultancy

Rudolf

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.
I will update all my mods in the next few weeks. Thanks for your patience.

SVG-Collapse (you need an SVG compliant browser)

BuЯЯЯЯaK


91design

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)

Advertisement: