Topic: Why does mdb.js have to be in the body tag

Robert McIntosh pro asked 6 years ago

I am trying to use mdb, but I am including it in the head tag. I have never had a problem including in scripts into my head tag and using them later in the body, however I am having an issue accomplishing this with the mdb script. I have read your support, but all I get is, "Must be in the body tag" but I don't understand why...

Robert McIntosh pro answered 5 years ago

Hey @chrisvv, I would highly suggest buying mdbootstrap. Yes, it comes with some weird design choices like this, but usually, if you post something you do get some sorta response from someone. And if it makes you feel more comfortable I would be happy to help and answer questions. I have become quite familiar with the product over the last year. Please be advised that I am in no way affiliated with the project just a fan that loves to help people. I will do my best to answer and help implement the mdbootstrap into your project by answering any and all questions. If that would ease your mind about buying the product my email is rmcitnosh at remabledesigns dot com.

chrisvv pro answered 5 years ago

Thank you Robert. That solution of yours helped me get the waves animation working the way it should have with the initial product. Let me just say that I find the lack of appropriate response from mdbootstrap quite concerning and I am having some doubts about buying the product.

Robert McIntosh pro answered 6 years ago

Finally, not sure if anyone else will care, but so far I have found if you wrap the waves initialization on in $(document).ready(function() {}); it appears to work just fine in the header tag.
$(document).ready(function () {
	Waves.attach('.btn, .btn-floating', ['waves-light']);
	Waves.attach('.view .mask', ['waves-light']);
	Waves.attach('.waves-light', ['waves-light']);
	Waves.attach('.navbar-nav a, .nav-icons li a, .navbar form, .nav-tabs .nav-item', ['waves-light']);
	Waves.attach('.navbar-brand', ['waves-light']);
	Waves.attach('.pager li a', ['waves-light']);
	Waves.attach('.pagination .page-item .page-link', ['waves-effect']);
	Waves.init();//Preloading script

Robert McIntosh pro answered 6 years ago

Yes, I understand that, but in many cases this can't be done in a dynamically generated content management system. Because many of the apps have custom JS files that load with them. So I guess I wont be able to use any JS features from MDB in my site and just focus on the CSS and Components. It is kinda a waste, but whatever. Lastly my question had nothing to do with best practices, I understand and know why they exist, they are always not practical. My question was why was mdb coded to not work in the head tag? I have used many libraries before, but never one that prevented itself from working if it wasn't placed in the body of the page?

Hi, Robert! JavaScript files should be just before close the body tag to load your website faster. Read Best Practices for Speeding Up Your Web Site

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.


Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No