Go Back   vb.org Archive > vBulletin 4 Discussion > vB4 General Discussions
FAQ Community Calendar Today's Posts Search

Reply
 
Thread Tools Display Modes
  #1  
Old 12-08-2016, 09:56 PM
Inked_Mono Inked_Mono is offline
 
Join Date: Jan 2015
Location: Canada
Posts: 116
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default Implementing JS script within forum? (Snow Effect)

Hey, everyone! I'm just wondering what the best way to implement as JS script I have would be. The JS itself is currently being hosted off the FTP titled "snow.js", and I've tried sticking the following in many different places (footer and header included);

< script src="./snow.js" >< /script >

For whatever reason, I can't seem to get it to load. Also, something to sort of keep in mind is I have the following assigned as a div:

Code:
<div id="particles-js"></div>
and the following CSS:

Code:
#particles-js {
            position: absolute;
            width: 100%;
            height: 780px;
            left: 0;
            top: 0;
            opacity: 0.9;
        }
The main page URL for the site is as follows, which currently contains the snow effect I'm trying to get on the forum;

https://www.os-scape.com/

Could anybody help?
Reply With Quote
  #2  
Old 12-08-2016, 10:17 PM
MarkFL's Avatar
MarkFL MarkFL is offline
 
Join Date: Feb 2014
Location: St. Augustine, FL
Posts: 3,853
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Try the following in your footer template:

Locate:

PHP Code:
        {vb:raw template_hook.footer_javascript
And directly below, add:

PHP Code:
        script type="text/javascript" src="snow.js" >< /script 
Personally, I would add this via a plugin so all styles get it, but go with that for now.
Reply With Quote
Благодарность от:
Inked_Mono
  #3  
Old 12-08-2016, 10:25 PM
Dave Dave is offline
 
Join Date: May 2010
Posts: 2,583
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

According to the developer console errors, it happens because it can't find a div with classname "particles-js-canvas-el". This might happen because of conflicting JavaScript files. For example vBulletin's JavaScript files may not work properly with the snow.js JavaScript.
Reply With Quote
Благодарность от:
Inked_Mono
  #4  
Old 12-09-2016, 01:37 AM
Inked_Mono Inked_Mono is offline
 
Join Date: Jan 2015
Location: Canada
Posts: 116
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by MarkFL View Post
Try the following in your footer template:

Locate:

PHP Code:
        {vb:raw template_hook.footer_javascript
And directly below, add:

PHP Code:
        script type="text/javascript" src="snow.js" >< /script 
Personally, I would add this via a plugin so all styles get it, but go with that for now.
Hey Mark,

Ended up giving that a shot to no avail! I would totally consider making it a plugin, however that's a bit beyond me and not actually too necessary as we only use the same them (yeaaah, for now even for mobile version). Thank you though!

Quote:
Originally Posted by Dave View Post
According to the developer console errors, it happens because it can't find a div with classname "particles-js-canvas-el". This might happen because of conflicting JavaScript files. For example vBulletin's JavaScript files may not work properly with the snow.js JavaScript.
Hey Dave,

I think you might be right! After trying Mark's idea above, I'm all out of options. I think I might play around with it for a bit longer and see if I can't figure something else out, or start a hunt for a predesigned snow plugin. Thank you!
Reply With Quote
  #5  
Old 12-09-2016, 01:44 AM
MarkFL's Avatar
MarkFL MarkFL is offline
 
Join Date: Feb 2014
Location: St. Augustine, FL
Posts: 3,853
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Yes, if you only have one active style, then the template hack is fine, although with a plugin, you can turn it on and off without touching your template.

If you want, send the login credentials to an admin account to your site via PM to me, and I will be glad to take a look and see if I can get it to work.
Reply With Quote
  #6  
Old 12-09-2016, 02:52 AM
Inked_Mono Inked_Mono is offline
 
Join Date: Jan 2015
Location: Canada
Posts: 116
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by MarkFL View Post
Yes, if you only have one active style, then the template hack is fine, although with a plugin, you can turn it on and off without touching your template.

If you want, send the login credentials to an admin account to your site via PM to me, and I will be glad to take a look and see if I can get it to work.
Hey there, Mark!

I sent a PM containing as much information as I thought you may have needed. As mentioned within, if you need anything else please let me know and I'd be more than happy to provide it! Thanks!
Reply With Quote
  #7  
Old 12-09-2016, 08:14 AM
the one the one is offline
 
Join Date: Nov 2013
Posts: 243
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

i have this code below

PHP Code:
<script type="text/javascript" src="clientscript/snowstorm.js"></script
I added that to the bottom of my headinclude template and works for me.Hope you get it sorted.
Reply With Quote
2 благодарности(ей) от:
Inked_Mono, MarkFL
  #8  
Old 12-09-2016, 08:50 AM
MarkFL's Avatar
MarkFL MarkFL is offline
 
Join Date: Feb 2014
Location: St. Augustine, FL
Posts: 3,853
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by the one View Post
i have this code below

PHP Code:
<script type="text/javascript" src="clientscript/snowstorm.js"></script
I added that to the bottom of my headinclude template and works for me.Hope you get it sorted.
I found the JS file online, and uploaded it to the OP's server, and added the script via a plugin, and it works right out of the box with no additional HTML needed.

Inked_Mono, if you don't like this particular effect, simply delete the plugin titled "Add Snowstorm" and delete the file "clientscript/snowstorm.js" from your server.
Reply With Quote
Благодарность от:
the one
  #9  
Old 12-09-2016, 06:05 PM
Inked_Mono Inked_Mono is offline
 
Join Date: Jan 2015
Location: Canada
Posts: 116
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by MarkFL View Post
I found the JS file online, and uploaded it to the OP's server, and added the script via a plugin, and it works right out of the box with no additional HTML needed.

Inked_Mono, if you don't like this particular effect, simply delete the plugin titled "Add Snowstorm" and delete the file "clientscript/snowstorm.js" from your server.
Thank you so much for your help! I know it was quite the struggle. As mentioned in the PM, you need only let me know the answer to what I was offering.

Cheers!
Reply With Quote
Благодарность от:
MarkFL
Reply


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 01:33 AM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.10428 seconds
  • Memory Usage 2,273KB
  • Queries Executed 11 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (1)ad_showthread_firstpost
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (2)bbcode_code
  • (6)bbcode_php
  • (5)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)navbar
  • (3)navbar_link
  • (120)option
  • (9)post_thanks_box
  • (6)post_thanks_box_bit
  • (9)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (5)post_thanks_postbit
  • (9)post_thanks_postbit_info
  • (9)postbit
  • (9)postbit_onlinestatus
  • (9)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.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/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.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
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • fetch_musername
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • post_thanks_function_fetch_thanks_bit_start
  • post_thanks_function_show_thanks_date_start
  • post_thanks_function_show_thanks_date_end
  • post_thanks_function_fetch_thanks_bit_end
  • post_thanks_function_fetch_post_thanks_template_start
  • post_thanks_function_fetch_post_thanks_template_end
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete