• Home
  • Categories
  • Recent
  • Popular
  • Top
  • Tags
  • Users
  • Groups
  • Documentation
    • Home
    • Read API
    • Write API
    • Plugin Development
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
v3.5.2 Latest
Buy Hosting

JS use in homepage

Scheduled Pinned Locked Moved General Discussion
nodebbhomepage
11 Posts 3 Posters 4.3k Views
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • kimmanuelK Offline
    kimmanuelK Offline
    kimmanuel
    wrote on last edited by
    #1

    May I know what js file is used at the very start of loading the homepage?

    Thanks! 🙂

    1 Reply Last reply
    0
  • B Offline
    B Offline
    bentael Plugin & Theme Dev
    wrote on last edited by
    #2

    Admin Control Panel > Themes > Customize, scroll down you will see

    Custom JS
    You can enter custom JS here, it will be added to the head tag.

    Then in the textarea create a <script>, something like this

    <script>
      // anything outside the function will execute immediately.
    
      $(function() {
          // anything here will execute on document ready
         // I highly suggest you use this code block
      });
    </script>
    

    Not strictly related note:

    there is a difference between the Custom CSS textarea and the Custom JS textarea is that the CSS one does not expect to <style> ..</style> tag, it will wrap the CSS content with it, but the JS one does expect the content to include <script>.. </script>

    1 Reply Last reply
    0
  • B Offline
    B Offline
    bentael Plugin & Theme Dev
    wrote on last edited by
    #3

    However, this Custom JS will be included AFTER the following:

    	<script>
    		var RELATIVE_PATH = "";
    	</script>
    	<script src="/socket.io/socket.io.js"></script>
    	<script src="/nodebb.min.js?fdda0130"></script>
    	<script>
    		require.config({
    			baseUrl: "/src/modules",
    			waitSeconds: 3,
    			urlArgs: "v0.5.0-2-110-g537dea4",
    			paths: {
    				'forum': '../forum',
    				'vendor': '../../vendor',
    				'buzz': '../../vendor/buzz/buzz.min'
    			}
    		});
    	</script>
          
           <script>
            // ... CUSTOM JS HERE
          </script>
    
    
    kimmanuelK 1 Reply Last reply
    0
  • kimmanuelK Offline
    kimmanuelK Offline
    kimmanuel
    replied to bentael on last edited by
    #4

    @bentael Does the script will load first before the menu.tpl

    1 Reply Last reply
    0
  • B Offline
    B Offline
    bentael Plugin & Theme Dev
    wrote on last edited by bentael
    #5

    In reality no, but to the naked eye, yes.

    kimmanuelK 2 Replies Last reply
    0
  • B Offline
    B Offline
    bentael Plugin & Theme Dev
    wrote on last edited by
    #6

    if you're loading your own external JS

    Custom JS

    <script>
       
     // if you're not using $(function(){ .... }); then your script should either do that within it self, or at least make sure whatever DOM elements needed are there before executing. 
    
    $(function() {
        var s = document.createElement('script'); 
        s.type = 'text/javascript';
        s.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'YOUR_SCRIPT_URL_HERE.js' ;
        var ls = document.getElementsByTagName('script')[0]; 
        ls.parentNode.insertBefore(s, ls);
    });
    </script>
    
    1 Reply Last reply
    0
  • B Offline
    B Offline
    bentael Plugin & Theme Dev
    wrote on last edited by
    #7

    Also, if you're writing a plugin, that's not the way to inject JS.

    in your plugin.json add this:

    	"scripts": [
    		"public/js/scripts.js"
    	],
    	"less": [
    		"public/less/styles.less"
    	]
    

    where public is a sibling folder to plugin.json

    1 Reply Last reply
    0
  • kimmanuelK Offline
    kimmanuelK Offline
    kimmanuel
    replied to bentael on last edited by
    #8

    @bentael what do you mean the naked eye? 😄

    1 Reply Last reply
    0
  • kimmanuelK Offline
    kimmanuelK Offline
    kimmanuel
    replied to bentael on last edited by kimmanuel
    #9

    @bentael I need my menu.tpl updated based in js file I am going to create 😄 🙂

    1 Reply Last reply
    0
  • A Offline
    A Offline
    andymacx86
    wrote on last edited by
    #10
    This post is deleted!
    1 Reply Last reply
    0
  • B Offline
    B Offline
    bentael Plugin & Theme Dev
    wrote on last edited by bentael
    #11

    @kimmanuel what I meant that it's too fast for the user to see it.

    just use the Custom JS and try it out. It'll work, i already edit the menu items here: http://forums.afraidtoask.com/

    Right click and view-source (or if you're in chrome click here) and you'll see the Custom JS script tag that reverses the menu items, hides the icons, shows the text instead and it adds a new item called "Home"

    <script>
    $(function() {
      var ul = $("ul#main-nav"); 
      var items = ul.find("li"); 
      items.each(function(i, li){
        li = $(li);
        li.find("a>i").addClass("hide");
        li.find("a span").removeClass("visible-xs-inline");
      }); 
      ul
          .append(items.get().reverse())
          .prepend('<li><a href="http://www.afraidtoask.com" title="" target="_top" data-original-title="Home"><i class="fa fa-fw fa-home hide"></i><span class=""> Home</span></a></li>');
    });
    </script>
    
    
    1 Reply Last reply
    0

Copyright © 2023 NodeBB | Contributors
  • Login

  • Don't have an account? Register

  • Login or register to search.
Powered by NodeBB Contributors
  • First post
    Last post
0
  • Home
  • Categories
  • Recent
  • Popular
  • Top
  • Tags
  • Users
  • Groups
  • Documentation
    • Home
    • Read API
    • Write API
    • Plugin Development