JS use in homepage

bentael

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>

bentael

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>

kimmanuel

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

bentael

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

bentael

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>

bentael

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

kimmanuel

@bentael what do you mean the naked eye?

kimmanuel

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

andymacx86

This post is deleted!

bentael

@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>