Anchor and Jump BBCode!

[pimpery]

This hack adds 2 BBCodes to your forum: [anchor] and [jump]
Demo: http://www.socomcity.net/forum/showthread.php?p=7353
Cross-Page Jump Demo: http://www.socomcity.net/forum/index.php (below the header, Latest Glitches Added)

[username:test][password:test] (thanks to acidburn0520 :D)



Functions
--------------

If you can't already tell from the example, you can set anchors in your posts via the [anchor] tag, and create a link that enables the user to jump to them via the [jump] tag. This comes very handy if you want to make a navigation for your forum rules, tutorials, or any other list-type post. Best of all, using cube root, the javascript function I made allows for a smooth/exponential jump.



Features
------------

prioritization: if there are multiple anchors - it uses DOM nesting detection to choose the anchor which is within the post containing the jump tag being clicked
optional cross-page jumping (hyper-link to anchors!)
optional key-shortcuts (remembers last anchor and last jump)
uses setInterval as oppose to a loop for best performance
works on all internet browsers
works on every version of vBulletin


Installation
------------------

Just download the zipped txt attached to this post with the 3 easy installation steps. Follow them and it's as easy as cake. Enjoy!


Hyperlinking Anchors
-----------------------------

To hyperlink anchors, your link must contain a reference to the post the anchor is in and the anchor of which to jump to
Heres the 2 possible ways (order of paramters doesn't matter - as long as the link contains the anchor parameter and a hash(#) to the post, or the p parameter to the post):
nameofanchor is the name of the anchor
1337 is the number of the post which contains the anchor
http://site.com/etcetcetc?anchor=nameofanchor&p=1337
http://site.com/etcetcetc?anchor=nameofanchor#post1336


Key-Shortcuts
-----------------------------

There are two keyshortcuts: Alt+A and Alt+J
Alt+A (Anchor Shortcut) jumps you to the last anchor that you previously jumped to
Alt+J (Jump Shortcut) jumps you to the last jump tag you previously clicked

[Marco van Herwaarden]

Very nice, thanks for sharing.

Could you please also provide these instructions in a textfile, so people can keep that for future reference and upgrades.

[Floris]

I don't know js that well, so have no clue what that code does. Not using it on my site .. using other bbcodes that works without file modifications.

http://www.vbulletin-tutorials.com/showthread.php?t=2

[pimpery]

I don't know js that well, so have no clue what that code does. Not using it on my site .. using other bbcodes that works without file modifications.

http://www.vbulletin-tutorials.com/showthread.php?t=2
Well it can work without file modifications by including the code in the bbcode thing by using script tags...BUT...lots of bandwith will be sucked up. I don't see whats so bad about 1 small file modification.

Instructions put in a zipped txt as for Marco's request. Thanks Marco! :)

[Kirk Y]

Oh dear lord. I love you. This is incredible... my website compiles lists of working glitches on various video games. I've moved them all into one post and have always wanted a way so that users could simply click a glitch's name from a list and they would be pointed to the appropriate glitch. Did I mention I love you? :)

Edit: It makes perfect sense that the hack I've been dreaming of finally arrives and I can't get it to work. Ha! I've cleared my cache, but still no go. I've tried in Firefox, Opera, and Internet Explorer. Will this work across most common browsers, or is it limited to IE only? Perhaps I'm not properly clearing my cache. In Firefox and Opera, there's an option that specifically states, "Clear Cache". However, in IE, there is no similar option. Perhaps an auto-installer isn't such a bad idea... for those of us not gifted with intelligence, lol. :nervous:

[pimpery]

Oh dear lord. I love you. This is incredible... my website compiles lists of working glitches on various video games. I've moved them all into one post and have always wanted a way so that users could simply click a glitch's name from a list and they would be pointed to the appropriate glitch. Did I mention I love you? :)

Edit: It makes perfect sense that the hack I've been dreaming of finally arrives and I can't get it to work. Ha! I've cleared my cache, but still no go. I've tried in Firefox, Opera, and Internet Explorer. Will this work across most common browsers, or is it limited to IE only? Perhaps I'm not properly clearing my cache. In Firefox and Opera, there's an option that specifically states, "Clear Cache". However, in IE, there is no similar option. Perhaps an auto-installer isn't such a bad idea... for those of us not gifted with intelligence, lol. :nervous:
It was tested on FireFox, Opera, Internet Explorer, and Safari - and it works on all of them. The code is simple and fast. Goto Tools --> Internet Options --> Delete Files (Check 'Delete all offline content') and press 'OK' for Internet Explorer cache deletion. In IE - refreshing the page should work just as well.

[pimpery]

Oh yes, Acidburn - I forgot to tell you that for your purpose another hack I made might be better - it's called Accordion BBCode: (https://vborg.vbsupport.ru/showthread.php?t=76405&page=4)

[Kirk Y]

Well, it's still not working. I've seen the Accordian BBCode before, it's cool, but this BBCode works the best, in my opinion... plus it's like extra super-special cool. I just wish I could get it to work. I've rechecked the BBCode replacements, they're correct... I'm putting the provided code at the bottom of my vbulletin_global.js file.

tds[i].origclass = tds[i].className;
tds[i].swapclass = iif(tds[i].className == "alt1Active", "alt2Active", "alt1Active");
tds[i].onmouseover = activecells_mouseover;
tds[i].onmouseout = activecells_mouseout;
tds[i].onclick = activecells_click;
}
break;
}
}
}
function jump(a){var b=document.getElementById(a);if(b){var c=b.offsetTop;while(b.offsetParent){c=c+b.offsetPa rent.offsetTop;b=b.offsetParen t;}var d=document.documentElement;var e;if(c<d.scrollTop){e=-1;}else{e=1;}while(c!==d.scrollTop){scroll(0,d.scr ollTop+Math.pow(Math.abs(c-d.scrollTop),1/3)*e);}}else{alert("Jump Error: '"+a+"' does not exist");}}
/*================================================= =====================*\
|| ################################################## ##################
|| # Downloaded: 15:34, Wed May 4th 2005
|| # CVS: $RCSfile: vbulletin_global.js,v $ - $Revision: 1.89 $
|| ################################################## ##################
\*================================================ ======================*/

I've cleared my cache... for all intents and purposes this BBCode should be working... but for whatever reason, it's not. Could you have perhaps mistyped or mispasted the Javascript code in the above instructions?

By the way, I've noticed that when I place the Javascript code into the .js file, some things on my Forum mess up. Like I cannot type in the New Reply box and I cannot click on a drop-down menu.

[pimpery]

Acid,

Ahhh - figured it out. For some reason the install instructions within the code tags in my post were being screwed up. The code tag added spaces as shown between the n and the t:

"b=b.offsetParen t"

Now I only have the instructions in the zip attached. Please just download the zipped txt and copy the function from there. Sorry for the inconvenience - I guess code tags aren't suited for pasting in javascript :(

[pimpery]

Oh ya - If it does work after copying, please tell me so I can move the hack into the regular section.

[Kirk Y]

AHHH!!!! OMFG! LOL! Okay...whew. It works! :D Wow, finally... damn this rocks. Nice freaking hack pimp, God I love you!

[pimpery]

AHHH!!!! OMFG! LOL! Okay...whew. It works! :D Wow, finally... damn this rocks. Nice freaking hack pimp, God I love you!

No problem Acid - moved to the regular hack section since it's been beta tested :)

Btw - could you post a link to an example of the hack on your forum so future viewers get a better idea of it - thanks.

[pimpery]

Anyone who downloaded - please redownload - there was a thing in the bbcode values that has been changed:

The container tags have been changed from divs to spans so content is inline instead of being pushed to a new line.

[Kirk Y]

Btw - could you post a link to an example of the hack on your forum so future viewers get a better idea of it - thanks.

That's what I was planning on doing. I'm currently setting it up in my thread right now. I'll edit this post with a link when I'm finished. Thank you so much!

Edit: Okay, here's a demo link on my board.

Login with username: test
Login with password: test

http://www.socomcity.net/forum/showthread.php?p=7353 (http://www.socomcity.net/forum/showthread.php?p=7353)

Look for the Table of Contents section, choose a glitch, and watch your screen fly!

Thanks again for this hack!

[pimpery]

That's what I was planning on doing. I'm currently setting it up in my thread right now. I'll edit this post with a link when I'm finished. Thank you so much!
No problem :) and thanks as well for your support!

[pimpery]

Just noticed you posted the link. Make sure you also update both your anchor and jump bbcode replacement values because as I look - the anchor bbcode is still a div tag. Just download the zipped txt and replace the anchor and jump replacement values with the new ones - thanks! :D

By the way, nice forum!

[sirbutts]

Judging from the demo this looks like another great BBCode pimpery :)
I'll post a link tommorow to my board when I have the hack installed.

[Kirk Y]

Just noticed you posted the link. Make sure you also update both your anchor and jump bbcode replacement values because as I look - the anchor bbcode is still a div tag. Just download the zipped txt and replace the anchor and jump replacement values with the new ones - thanks! :D

By the way, nice forum!

Yeah a thread with 95 Glitches and I had to jump tag and anchor tag all of them...whew... what a work out. I was in no mood to go into the ACP and start changing BBCodes, lol. I'll do that now, though. Thanks for the compliment, I try to make it look nice... can't wait till the stable release of 3.5 though, I'm ready for a new template!

[pimpery]

Someone alerted me that if the browser is in the middle of doing a 'jump' you cannot switch to another tab/window in the browser until the jump is finished. I believe this is due to my loop.
I'll have to change the scroll actions to setTimeout.

Someone also alerted me that if someone posted an anchor tag in a post below someone elses post - the person with the above post can edit his post to have an anchor with the same name which would OVERRIDE the anchor in the post below.
I'll have to add a different function rather than getElementById - which will only check for anchors within the post the anchor is within.

I'm also going to have an autoinstaller made shortly.

[Kirk Y]

Mmm... the overriding thing could become a problem. At the moment I haven't disclosed how to use the vBCode to my Forum Members, so atleast they won't know how to use it. As for the tab problem... it's not like the jump takes more than 5 seconds to do... can't they wait they long to switch to another tab?

[pimpery]

Mmm... the overriding thing could become a problem. At the moment I haven't disclosed how to use the vBCode to my Forum Members, so atleast they won't know how to use it. As for the tab problem... it's not like the jump takes more than 5 seconds to do... can't they wait they long to switch to another tab?
Ok.
So far (haven't updated the install.zip yet though):
hash (#anchor) support added for browsers without javascript capabilities
the scrolling now uses setInterval and clearInterval so people can switch between tabs / windows and do other stuff while waiting for the scroll to finish

TODO: working on part of the function that will recognize which anchor (if multiple ones) is closest to the jump tag on the dom tree - and will jump to that one

This way there will be no possible OVERRIDING (as acidburn said)

[pimpery]

Ok.
So far (haven't updated the install.zip yet though):
hash (#anchor) support added for browsers without javascript capabilities
the scrolling now uses setInterval and clearInterval so people can switch between tabs / windows and do other stuff while waiting for the scroll to finish

TODO: working on part of the function that will recognize which anchor (if multiple ones) is closest to the jump tag on the dom tree - and will jump to that one

This way there will be no possible OVERRIDING (as acidburn said)
It took long enough (gahh! javascript >.<)
but now I have it all done.

Features include:
Support for non-javascript users
Scrolling uses setInterval so it doesn't tie up browser
Anchors in a member's own post have a higher priority than anchors in another member's post (based on DOM nesting [this was kinda hard to do!] - will always work even when vBulletin is updated)
Works on all major browsers

[sirbutts]

It took long enough (gahh! javascript >.<)
but now I have it all done.

Features include:
Support for non-javascript users
Scrolling uses setInterval so it doesn't tie up browser
Anchors in a member's own post have a higher priority than anchors in another member's post (based on DOM nesting [this was kinda hard to do!] - will always work even when vBulletin is updated)
Works on all major browsers
Just reinstalled with the new textfile instructions.

I don't know how it really works but it's amazing how you dealt with the override thing using javascript. I mean - how does it work? Wouldnt u need to know who made what post in php to do something like that?

Anyhow - very nice job. The only thing I think you should add is maybe a little box that says can cancel the jump incase the jump is tremendously long and the person wants to cancel it.

[pimpery]

Just reinstalled with the new textfile instructions.

I don't know how it really works but it's amazing how you dealt with the override thing using javascript. I mean - how does it work? Wouldnt u need to know who made what post in php to do something like that?

Anyhow - very nice job. The only thing I think you should add is maybe a little box that says can cancel the jump incase the jump is tremendously long and the person wants to cancel it.
I attempted to do that - but the problem is it gets all stuttery since the window is scrolling at the time.
I could use position:fixed; but it's not supported by very many browsers.

BTW - I'm going to have a tutorial on my site about DOM Nesting soon. I'll pm you a link when it goes up.

[Kirk Y]

Updated and everything is working fine. I love how I can scroll past the anchor and it goes up... then I scroll above it and it goes down... it could easily entertain people for hours. I know some members on my site said they sat in that thread for a good 10 minutes simply clicking the jump links... lol. Thanks for the update Pimp!

Edit: I have a question for you Pimp. I have a table underneath my Forum Statistics on forumhome. Inside the table I have links to popups that give directions on the latest glitches added. Would it be possible to have a jump for the link so that once clicked it would take you to the universal glitch list (the demo page where my anchors/jumps are) and jump to the specified anchor tag? This would be like cross-page jumping, but would indeed be incredibly handy.

[pimpery]

Updated and everything is working fine. I love how I can scroll past the anchor and it goes up... then I scroll above it and it goes down... it could easily entertain people for hours. I know some members on my site said they sat in that thread for a good 10 minutes simply clicking the jump links... lol. Thanks for the update Pimp!

Edit: I have a question for you Pimp. I have a table underneath my Forum Statistics on forumhome. Inside the table I have links to popups that give directions on the latest glitches added. Would it be possible to have a jump for the link so that once clicked it would take you to the universal glitch list (the demo page where my anchors/jumps are) and jump to the specified anchor tag? This would be like cross-page jumping, but would indeed be incredibly handy.

Great idea! Yes - that wouldn't be too hard.
I will have it like this:
http://site.com/etc..?anchor=nameofanchor

On document load a javascript function will parse the url and extract the anchor param if it exists - then it will jump to that anchor. If anchor doesn't exist, then it shows an error alert like it normally does.

There is ONE problem though
If there are multiple anchors - it won't know which one to goto since there's no reference point (no jump tag).
I have an idea though:
If we craft the url as such:
http://site.com/etc..?anchor=nameofanchor#post1337
or
http://site.com/etc..?anchor=nameofanchor&p=1337
Where 1337 is the postnumber...
Then it can also extract the postnumber and only jump to an anchor IN THE SPECIFIED POST.

I think this is a good solution. I'll have the function ready soon. I first have to pack my bags because I'm going to stonybrook for summer courses. BTW acid, you might want to redownload the zip again. There's no difference in what it does, but I did increase the performance of the function (milliseconds matter! :P)
Night mate!

[Kirk Y]

Thanks for taking up the task! I really appreciate it and am sure that most other members here will as well. I'll download the zip now; everything must be done faster! Ha ha, thanks again. :)

[pimpery]

Updated!
Few bugs fixed.
Optional cross-page jumping feature added (hyperlink an anchor!) :D

[sirbutts]

Updated!
Few bugs fixed.
Optional cross-page jumping feature added (hyperlink an anchor!) :D
Woah. This cross-page anchor stuff is 1337! My members love it :D
Thanks for the update pimpery! :)

[Kirk Y]

Updated!
Few bugs fixed.
Optional cross-page jumping feature added (hyperlink an anchor!) :D

Yipee! I'll install now... god this hack rocks! :P

Edit: Two things:
1) How on Earth do you make the hyperlink for the cross-page jump? There's no example in the installation instructions.
2) In the installation instructions, the 1A and 1B parts are right next to each other, I accidentally copied 1A's steps and 1B's and pasted them into the clientscript file as the JS function. Maybe space them apart?

Edit (Again):
1) Nevermind, was scrolling up and saw the post you made Pimp, theorizing how this could work and noticed you had posted a possible URL. I tried it out and it works. Nice job and thanks again, you may want to add an example URL into the install directions.

Oh, for anyone that wants to know:
http://www.socomcity.net/forum/showthread.php?anchor=glitch25&p=7353

socomcity.net - your website address (Obviously)
showthread.php?anchor=glitch25 - (This is the anchor's name that you'd like to jump to)
&p=7353 - (This is the post that the anchor you'd like to jump to is nested in)

Oh and Pimpery, if you'd like to add an example of the cross-page jumping feature:
User: test
Password: test
Location: http://www.socomcity.net/forum/index.php

It's just below the header, in a little table; "Latest Glitches Added".

[sirbutts]

Yipee! I'll install now... god this hack rocks! :P

Edit: Two things:
1) How on Earth do you make the hyperlink for the cross-page jump? There's no example in the installation instructions.
2) In the installation instructions, the 1A and 1B parts are right next to each other, I accidentally copied 1A's steps and 1B's and pasted them into the clientscript file as the JS function. Maybe space them apart?

Edit (Again):
1) Nevermind, was scrolling up and saw the post you made Pimp, theorizing how this could work and noticed you had posted a possible URL. I tried it out and it works. Nice job and thanks again, you may want to add an example URL into the install directions.

Oh, for anyone that wants to know:
http://www.socomcity.net/forum/showthread.php?anchor=glitch25&p=7353

socomcity.net - your website address (Obviously)
showthread.php?anchor=glitch25 - (This is the anchor's name that you'd like to jump to)
&p=7353 - (This is the post that the anchor you'd like to jump to is nested in)

Oh and Pimpery, if you'd like to add an example of the cross-page jumping feature:
User: test
Password: test
Location: http://www.socomcity.net/forum/index.php

It's just below the header, in a little table; "Latest Glitches Added".


He did add the instructions about how to do the anchor link in the vB3.5 post. Aye guess he forgot to do it here

[pimpery]

Thanks for clarifying that sirbutts.

Yeh. Sorry bout that, acid. I didn't realize that I had only put them in the 3.5 post.
Anyhow, I just updated the main post with your example cross-page url - and the instructions on how to use the cross-page jumping.
Glad ya like the hack as well - but it seems that not many others are using it. Hehe - if they only knew how nice it was :D

[Kirk Y]

Well, in my opinion, this is a must for anyone that lists information on their site.

[Jolten]

This does not work in Safari. The page simply scrolls to the bottom. There's no jumping or linking to anywhere else. Click a link.... wait for the page to scroll to the bottom, and then, not be able to scroll up again because it continues to scroll downward.

[Kirk Y]

This does not work in Safari. The page simply scrolls to the bottom. There's no jumping or linking to anywhere else. Click a link.... wait for the page to scroll to the bottom, and then, not be able to scroll up again because it continues to scroll downward.

Well, I can't test it to make sure, since Safari requires an Apple computer. Try going to the Demo Links at the top of the page, if they show the same problem, then it'd appear that you're right and the Javascript won't work in Safari.

[pimpery]

Well, I can't test it to make sure, since Safari requires an Apple computer. Try going to the Demo Links at the top of the page, if they show the same problem, then it'd appear that you're right and the Javascript won't work in Safari.
Jolten, I tested the earlier versions a week or so ago on my friends Mac. If you would please post the error you get (use the javascript console). Thanks!

[sirbutts]

I wish I had a mac so I could help ya, but who uses macs anyways? They suck ass! :lick:

[Kirk Y]

I wish I had a mac so I could help ya, but who uses macs anyways? They suck ass! :lick:

lol. You can say that again! :nervous:

[Jolten]

Well, I can't test it to make sure, since Safari requires an Apple computer. Try going to the Demo Links at the top of the page, if they show the same problem, then it'd appear that you're right and the Javascript won't work in Safari.


I was referring to the demo links. I haven't installed because this hack will absolutely exclude most Mac users from using the links and in return annoy the hell out of them.

[Kirk Y]

Hmm... that's a shame. This is a great vBCode. Do Firefox/Opera work on Mac?

[pimpery]

I was referring to the demo links. I haven't installed because this hack will absolutely exclude most Mac users from using the links and in return annoy the hell out of them.

Use the javascript console and give me the error you get so I can fix it:

Anyhow - I don't consider Safari a major browser considering that I don't consider poop a major browser (which is what Safari is: Safari=poop)

This hack works on:
Opera
Internet Explorer
Firefox

[pimpery]

Use the javascript console and give me the error you get so I can fix it:

Anyhow - I don't consider Safari a major browser considering that I don't consider poop a major browser (which is what Safari is: Safari=poop)

This hack works on:
Opera
Internet Explorer
Firefox

I found out Konqueror uses the same engine as Safari - so I'm dling Konquerer w/ cygwin to test it.

[Kirk Y]

Okay, hope it gets fixed. I just noticed something, in the Custom BBCodes section in the AdminCP; if you click the jump link demo vBCode, it scrolls to the anchor demo vBCode. But when you try to scroll back up, it scrolls back down again to the anchor demo, it sounded similar to what Jolten is experiencing on Safari.

[pimpery]

Okay, hope it gets fixed. I just noticed something, in the Custom BBCodes section in the AdminCP; if you click the jump link demo vBCode, it scrolls to the anchor demo vBCode. But when you try to scroll back up, it scrolls back down again to the anchor demo, it sounded similar to what Jolten is experiencing on Safari.

I see what your talking about.
The problem has now been fixed:
Please download the new install.zip attachment - and update your jump function to fix the bug.

[Kirk Y]

Downloaded and updated; working fine.

[pimpery]

Downloaded and updated; working fine.

Glad that it worked. I still have yet to get Konqueror installed via Cygwin tho. The server keeps quitting on me when I try to get the packages :(

[Jolten]

Now it simply doesn't work a all in Safari.

And "poop" or not. Mac users use Safari. It's one of the better browsers out there.

[Kirk Y]

As I said earlier, would it be possible for you to use Firefox or Opera? Neither have any compatibility issues with the Javascript Jump function.

[Jolten]

Firefox and Opera are not default browsers on the Mac. Sure it's possible to use them but why? Safari is better then both. 99% of Mac users use Safari.

[Kirk Y]

Better than both? Mmm... I dunno about that. I haven't fully seen Safari, (aside from Screenshots on the product's website) but Firefox and Opera are probably two of the top browsers out there... even though Opera costs money, but is well worth it.

[pimpery]

Better than both? Mmm... I dunno about that. I haven't fully seen Safari, (aside from Screenshots on the product's website) but Firefox and Opera are probably two of the top browsers out there... even though Opera costs money, but is well worth it.

Safari is nothing compared to the Camino browser Mozilla came out with.

[pimpery]

Safari is nothing compared to the Camino browser Mozilla came out with.

Testing on Konqueror as well - and it works..
Konqueror uses the same javascript engine as safari so the only thing I can think of Jolten, is that you are using an old version of Safari that came bundled with your big mac.

[Kirk Y]

Rotfl.. Big Mac... no pun intended... lol.

[pimpery]

Rotfl.. Big Mac... no pun intended... lol.

Ahaha. After reading it another time it does seem indeed funny.

https://vborg.vbsupport.ru/

[sirbutts]

Ahaha. After reading it another time it does seem indeed funny.

http://img348.imageshack.us/img348/2712/macdonalds6vc.png

LOL. That's hilarious pimpery. Their computers are just as crappy as McDonald's food. :speechless:
Did you make it yourself?

[pimpery]

LOL. That's hilarious pimpery. Their computers are just as crappy as McDonald's food. :speechless:
Did you make it yourself?

Made it myself man :D

[sirbutts]

Made it myself man :D

Nice. You're a graphic designer? I need some gfx done for my site! :D

[pimpery]

BIG UPDATE!

Smoothness made better - no more of the little jerks!
KEY SHORTCUTS ADDED!



Key-Shortcuts
-----------------------------

There are two keyshortcuts: Alt+A and Alt+J
Alt+A (Anchor Shortcut) jumps you to the last anchor that you previously jumped to
Alt+J (Jump Shortcut) jumps you to the last jump tag you previously clicked


Update now if you use this hack!