Search jQuery

jQuery Forum

Noob's questions about using jQuery in php

in Getting Started • 7 years ago

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

<style type="text/css">
body header.main-header {visibility: hidden;}
</style>

Then just before closing body I have ...

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.tooltip').tooltip({
html: true
});
});</script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("div#mm-sidebar").mmenu({
<?php if ($mmenucolor) : ?>
classes: "<?php echo $mmenucolor; ?>",
<?php endif; ?>
offCanvas: {
position : "<?php echo $mmenuslide; ?>",
zposition: "<?php echo $mmenueffect; ?>"
},
header: {
title: "<?php echo $mmenutitle; ?>",
add: <?php echo $mmenuheader; ?>,
update: "<?php echo $mmenuheader; ?>"
}
});
});</script>
<?php if ($topnavbar && $topnavbaraffix == 2): ?>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#menu').scrollupbar();
});</script>
<?php endif; ?>
<?php if ($navbarStyle): ?>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("nav#menu ul.col-centered.jqnavbarStyle").removeClass("jqnavbarStyle").addClass("<?php echo $navbarStyle; ?>");
});</script>
<?php endif; ?>
<?php if ($topnavbar && $mainmenuVAlignment == "top") :
?>
<style> header.main-header ul.nav.menu{ margin-top: 0px; }</style>
<script type="text/javascript">
jQuery(window).load(function(){
jQuery('header.main-header').css({'min-height': jQuery('nav#menu .row').outerHeight(true) });
});</script>
<?php elseif ($topnavbar && $mainmenuVAlignment == "middle") : ?>
<script type="text/javascript">
jQuery(window).load(function(){
jQuery('header.main-header').css({'min-height': jQuery('nav#menu .row').outerHeight(true) });
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 ) });
});</script>
<?php elseif ($topnavbar && $mainmenuVAlignment == "bottom") : ?>
<script type="text/javascript">
jQuery(window).load(function(){
jQuery('header.main-header').css({'min-height': jQuery('nav#menu .row').outerHeight(true) });
jQuery('header.main-header ul.nav.menu').css({'margin-top': jQuery('header.main-header .row').outerHeight() - jQuery('header.main-header ul.nav.menu').outerHeight() });
});
</script>
<?php endif; ?>
<?php if ($topnavbar) : ?>
<script type="text/javascript">
jQuery(window).load(function(){
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() ) });
});</script>
<?php endif; ?>
<script type="text/javascript">
jQuery(window).load(function(){
jQuery("body header.main-header").css("visibility","visible");
});
</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).

Replies(2)

jakecigar

Re: Noob's questions about using jQuery in php

7 years ago

Am I doing things the most efficient way possible?

Mixing javaScript and PHP is always more confusing.

Will I gain performance / lose by putting the code in a separate file?

That small amount of code won’t make any difference.

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" ?

It’s a good idea to put it in a file.

Any tips, advice, guidance you’d care to give?

You get some extra speed for sites with many pages when you use cached files on the client machine. Small HTML, CSS, and javascript files

JΛ̊KE

watusiware

Re: Noob's questions about using jQuery in php

7 years ago

Let me start by saying I'm brand new to java / jQuery world so please bear with me if I say something really stupid.

Although I wouldn't classify it as "really stupid", I'd like to point out that jQuery has no relationship to Java. It's written in Javascript, though. Javascript has nothing to to with Java, and entirely different computer language.

It's a historical stupidity. (THERE'S the thing that' really stupid...) Java was a "hot" new language when Netscape introduced Javascript, and I guess wanted to go along for the ride.

It's relevant, e.g. when you search for help. If you search for Java help, you're gonna come up with irrelevant stuff.

I wouldn't worry about efficiency. I'd worry about maintainability. Do what 99% of PHP developers never seem to do. Get both your jQuery and your PHP out of your pages/templates!

Since this isn't a PHP forum, I'd suggest you seek some further advice on this topic from a PHP development site or forum. They will be able to give you more specific advice on best practices.

Top Reply

Response title

Attachments

jQuery Forum

Noob's questions about using jQuery in php

Replies(2)

Re: Noob's questions about using jQuery in php

Re: Noob's questions about using jQuery in php

Statistics

Tags

Actions