vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vBulletin 3.0 Full Releases (https://vborg.vbsupport.ru/forumdisplay.php?f=33)
-   -   Anchor and Jump BBCode! (https://vborg.vbsupport.ru/showthread.php?t=91595)

pimpery 07-03-2005 10:00 PM

Anchor and Jump BBCode!
 
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 07-04-2005 07:18 AM

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 07-04-2005 07:00 PM

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 07-05-2005 12:16 AM

Quote:

Originally Posted by 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

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 07-05-2005 05:45 AM

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 07-06-2005 02:39 AM

Quote:

Originally Posted by acidburn0520
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 07-06-2005 02:51 AM

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/showthrea...t=76405&page=4)

Kirk Y 07-06-2005 06:41 AM

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.

Code:

                                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.offsetParent.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.scrollTop+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 07-08-2005 01:15 AM

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 07-08-2005 01:18 AM

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

Kirk Y 07-08-2005 02:07 AM

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

pimpery 07-08-2005 02:28 AM

Quote:

Originally Posted by acidburn0520
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 07-08-2005 02:54 AM

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 07-08-2005 02:57 AM

Quote:

Originally Posted by pimpery
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

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

Thanks again for this hack!

pimpery 07-08-2005 02:58 AM

Quote:

Originally Posted by acidburn0520
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 07-08-2005 05:19 AM

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 07-08-2005 05:56 AM

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 07-08-2005 02:53 PM

Quote:

Originally Posted by 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!

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 07-08-2005 06:41 PM

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 07-08-2005 06:48 PM

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 07-08-2005 11:35 PM

Quote:

Originally Posted by acidburn0520
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 07-09-2005 06:03 PM

Quote:

Originally Posted by 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 07-09-2005 07:02 PM

Quote:

Originally Posted by pimpery
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 07-09-2005 10:38 PM

Quote:

Originally Posted by sirbutts
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 07-10-2005 03:44 AM

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 07-10-2005 04:48 AM

Quote:

Originally Posted by acidburn0520
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 07-10-2005 04:56 AM

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 07-11-2005 01:42 PM

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

sirbutts 07-11-2005 06:38 PM

Quote:

Originally Posted by pimpery
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 07-12-2005 03:00 AM

Quote:

Originally Posted by pimpery
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:
Code:

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 07-12-2005 11:38 AM

Quote:

Originally Posted by acidburn0520
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:
Code:

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 07-12-2005 07:16 PM

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 07-12-2005 07:21 PM

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

Jolten 07-12-2005 10:55 PM

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 07-13-2005 02:29 AM

Quote:

Originally Posted by 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.

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 07-13-2005 04:06 AM

Quote:

Originally Posted by acidburn0520
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 07-14-2005 04:16 PM

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

Kirk Y 07-14-2005 05:30 PM

Quote:

Originally Posted by sirbutts
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 07-15-2005 12:49 AM

Quote:

Originally Posted by acidburn0520
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 07-15-2005 03:26 AM

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


All times are GMT. The time now is 09:44 PM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01405 seconds
  • Memory Usage 1,891KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (3)bbcode_code_printable
  • (18)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (1)pagenav_pagelink
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (40)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 

Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • pagenav_page
  • pagenav_complete
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete