Noob's questions about using jQuery in php

Noob's questions about using jQuery in php

Let me start by saying I'm brand new to java / jQuery world so please bear with me if I say something really stupid. In fact this is the very first thing I've ever written so it might be horrible @ best.  This will be a bit lengthy but I want to try to be as clear as I can so I don't waste anyone's time.

What I'm doing: using jQuery to manipulate class elements within my Joomla! template that don't seem to conform well to just a .css solution.  Like...
  • figuring out proper margin-top for the .nav when the .navbar-brand has a non-fixed size.
  • Creating proper margin-top to offset header size when using .navbar-fixed.
  • vertically positioning ( top middle bottom ) within the header the navbar based on users choice.  etc....
What my questions are:
  • Am I doing things the most efficient way possible?
  • Will I gain performance / lose by putting the code in a separate file?
  • To enhance maintainability can I simply extract the entire php / jQuery logic section and put it in another .php file and do a "include_once" ?  
  • Any tips, advice, guidance you'd care to give?
My ultimate goal is: Fast, well written, flexible code.

Code used:
You can see a site where I'm using the template as a test bed,  Hallhome.us This site changes a bit right now while I use it to test out the template in a real life situation.
The section of code that I've tested and seems to work well is below...
just after <head> I have...
  1. <style type="text/css">
  2.       body header.main-header {visibility: hidden;}
  3. </style>
Then just before closing body I have ...
  1. <script type="text/javascript">
  2. jQuery(document).ready(function() {
  3. jQuery('.tooltip').tooltip({
  4. html: true
  5. });
  6. });</script>
  7. <script type="text/javascript">
  8. jQuery(document).ready(function() {
  9. jQuery("div#mm-sidebar").mmenu({
  10. <?php if ($mmenucolor) : ?>
  11. classes: "<?php echo $mmenucolor; ?>",
  12. <?php endif; ?>
  13. offCanvas: {
  14. position : "<?php echo $mmenuslide; ?>",
  15. zposition: "<?php echo $mmenueffect; ?>"
  16. },
  17. header: {
  18. title: "<?php echo $mmenutitle; ?>",
  19. add: <?php echo $mmenuheader; ?>,
  20. update: "<?php echo $mmenuheader; ?>"
  21. }
  22. });
  23. });</script>
  24. <?php if ($topnavbar && $topnavbaraffix == 2): ?>
  25. <script type="text/javascript">
  26. jQuery(document).ready(function(){
  27. jQuery('#menu').scrollupbar();
  28. });</script>
  29. <?php endif; ?>

  31. <!-- insert navbar style -->
  32. <?php if ($navbarStyle): ?>
  33. <script type="text/javascript">
  34. jQuery(document).ready(function(){
  35. jQuery("nav#menu ul.col-centered.jqnavbarStyle").removeClass("jqnavbarStyle").addClass("<?php echo $navbarStyle; ?>");
  36. });</script>
  37. <?php endif; ?>
  38. <!-- center menu vertically -->
  39. <!-- menu is @ top so set margin to zero -->
  40. <?php if ($topnavbar && $mainmenuVAlignment == "top") :
  41. ?>
  42. <style> header.main-header ul.nav.menu{ margin-top: 0px; }</style>
  43. <script type="text/javascript">
  44. jQuery(window).load(function(){
  45. jQuery('header.main-header').css({'min-height':  jQuery('nav#menu .row').outerHeight(true) });
  46. });</script>

  48. <!-- is it set to vertical center ? -->
  49. <?php elseif ($topnavbar && $mainmenuVAlignment == "middle") : ?>
  50. <script type="text/javascript">
  51. jQuery(window).load(function(){
  52. jQuery('header.main-header').css({'min-height':  jQuery('nav#menu .row').outerHeight(true) });
  53. jQuery('header.main-header ul.nav.menu').css({'margin-top':  parseInt( ( parseInt(jQuery('nav#menu .row').outerHeight(true) ) - parseInt( jQuery('header.main-header ul.nav.menu').outerHeight(true) +5 ) ) / 2 ) });
  55. });</script>
  56. <!-- must be bottom -->
  57. <?php elseif ($topnavbar && $mainmenuVAlignment == "bottom") : ?>
  58. <script type="text/javascript">
  59. jQuery(window).load(function(){
  60. jQuery('header.main-header').css({'min-height':  jQuery('nav#menu .row').outerHeight(true) });
  61. jQuery('header.main-header ul.nav.menu').css({'margin-top':  jQuery('header.main-header .row').outerHeight() - jQuery('header.main-header ul.nav.menu').outerHeight() });
  62. });
  63. </script> 
  64. <?php endif; ?>
  65. <!-- limit width of navbar to available space for single row -->
  66. <?php if ($topnavbar) : ?>
  67. <script type="text/javascript">
  68. jQuery(window).load(function(){
  69. jQuery('header.main-header ul.nav.menu').css({'max-width':  ( jQuery('.container').width() - jQuery('header.main-header a.navbar-brand').innerWidth() - jQuery('header.main-header .search .row').width() ) });
  70. });</script>
  71. <?php endif; ?>
  73. <script type="text/javascript">
  74. jQuery(window).load(function(){
  75. jQuery("body header.main-header").css("visibility","visible");
  76. });
  77. </script>
I'm using .load because .ready was causing the header to move AFTER the page had loaded.
65-71 exist because the row does not use col- for sizing so its value must be computed dynamically afaik.
If you've read this far I want to thank you for caring enough to stick with me.  I anxiously & nervously await your reply(s).