0
Welcome Guest! Login
0 items Join Now

Joomla/Template Loading Order of JavaScript

Last Post
Search Topic

  • Joomla/Template Loading Order of JavaScript

    Posted 14 years 9 months ago
    • I am having an issue where I have a set of modules for displaying videos from jVideoDirect that use jQuery. I have it set to load the jquery.noconflict setting to be compatible, however, here is the issue....
      On the component menu links for jVideoDirect, jquery is listed first in the page load and the Fusion Menu displays properly. example http://dearbornschools.org/video (View Source code to see the order of how the JS files are loaded)

      Here is an example where the module for displaying videos was loaded after the fusion menu and the fusion menu is broken: http://dearbornschools.org/departments/communications This is when I try to have the module load on an article without the main jvideodirect component. You can look at the source code to see the module JS Jquery was loaded last and thus it breaks the fusion menu.

      My question is how can I get the modules to load their JS first before the fusion and other JS files are loaded?

      Any suggestions?
    #531240

  • Re: Joomla/Template Loading Order of JavaScript

    Posted 14 years 9 months ago
    #531245

  • Re: Joomla/Template Loading Order of JavaScript

    Posted 14 years 9 months ago
    • Here are some more details:
      I am having an issue where I need a module's javascript link to load first in order to avoid a jQuery and Mootools conflict. I am hoping with a small hack, I can change the order of how the page head is constructed so that this module loads before some of the theme javascript does.

      Here is an example of when the JS libraries conflict. You will notice the top menu looks funky with solid bold lines below each sub-item link:
      http://dearbornschools.org/departments/communications

      Here is how the scripts load on the bad page:
      <script type="text/javascript" src="/components/com_jcomments/js/jcomments-v2.1.js?v=2"></script>
      <script type="text/javascript" src="/components/com_jcomments/libraries/joomlatune/ajax.js"></script>
      <script type="text/javascript" src="/media/system/js/mootools.js"></script>
      <script type="text/javascript" src="/media/system/js/caption.js"></script>
      <script type="text/javascript" src="/plugins/system/rokbox/rokbox.js"></script>
      <script type="text/javascript" src="/templates/rt_panacea_j15/js/gantry-articledetails.js"></script>
      <script type="text/javascript" src="/components/com_gantry/js/gantry-smartload.js"></script>
      <script type="text/javascript" src="/components/com_gantry/js/gantry-inputs.js"></script>
      <script type="text/javascript" src="/components/com_gantry/js/gantry-morearticles.js"></script>
      <script type="text/javascript" src="/modules/mod_roknavmenu/themes/fusion/js/fusion.js"></script>
      <script type="text/javascript" src=" dearbornschools.org/components/com_jvide.../jquery-1.3.2.min.js "></script>
      <script type="text/javascript" src=" dearbornschools.org/components/com_jvide...jquery.scrollable.js "></script>
      <script type="text/javascript" src=" dearbornschools.org/components/com_jvide...s/tooltip/tooltip.js "></script>
      <script type="text/javascript" src="/modules/mod_rokajaxsearch/js/rokajaxsearch.js"></script>


      When you are on the main component page link for jVideoDirect, the Jquery loads first and there is no issue with the main top menu: http://dearbornschools.org/video
      And here is how that script order looks:
      <script type="text/javascript" src="/components/com_jcomments/js/jcomments-v2.1.js?v=2"></script>
      <script type="text/javascript" src="/components/com_jcomments/libraries/joomlatune/ajax.js"></script>
      <script type="text/javascript" src=" dearbornschools.org/components/com_jvide.../jquery-1.4.2.min.js "></script>
      <script type="text/javascript" src=" dearbornschools.org/components/com_jvide...jquery.scrollable.js "></script>
      <script type="text/javascript" src="/media/system/js/mootools.js"></script>
      <script type="text/javascript" src="/plugins/system/rokbox/rokbox.js"></script>
      <script type="text/javascript" src="/templates/rt_panacea_j15/js/gantry-articledetails.js"></script>
      <script type="text/javascript" src="/components/com_gantry/js/gantry-inputs.js"></script>
      <script type="text/javascript" src="/components/com_gantry/js/gantry-morearticles.js"></script>
      <script type="text/javascript" src="/modules/mod_roknavmenu/themes/fusion/js/fusion.js"></script>
      <script type="text/javascript" src=" dearbornschools.org/components/com_jvide...s/tooltip/tooltip.js "></script>
      <script type="text/javascript" src="/modules/mod_rokajaxsearch/js/rokajaxsearch.js"></script>


      Notice how the Jquery stuff is on the almost very top before the mootools in the second page where the menu works?

      How can I make it so that when I use the jQuery jVideoDirect modules that it loads those libraries first?
      Thanks! I appreciate any help someone might provide here.
    #531380

Time to create page: 0.064 seconds