Question

I have created an online price quote. I don’t know coding that much as I’m a small business owner and have to do most things myself. I created a jquery script and i had to keep it in the header as I dont know how to insert it in the wordpress post.

My question is: How can I make this whole Jquery script only load on http://www.leadcomm.net/cost-estimate/ ?

The script is long so i didnt post it but you can view source and it’s in the header. It’s messy, I know.

The header is used for all the pages and I think its causing some issues with other pages. Please let me know if you have any ideas, Thanks!

Answer 1

If you do this:

if (window.location.href.indexOf('http://www.leadcomm.net/cost-estimate/') == 0) {
   //all jquery code here
}

it will restrict the code to any page with 'http://www.leadcomm.net/cost-estimate/' at the begining of the url. This will also account for 'http://www.leadcomm.net/cost-estimate/?qsname=qsvalue' types of urls. But it will also allow for subdirectories 'http://www.leadcomm.net/cost-estimate/dir1/dir2/'.

If you do this:

if (window.location.href == 'http://www.leadcomm.net/cost-estimate/') {
   //jquery code here
}

It will restrict to specifically that page.

EDIT

On second thought, and even better option would be to create a .js document with all of that code. Then do the below in the header to load it dynamically based on the page. This will keep the code from loading at all unless it’s needed.

<script type="text/javascript">
if (window.location.href == 'http://www.leadcomm.net/cost-estimate/') {
    var js = document.createElement('script');
    js.setAttribute("type","text/javascript");
    js.setAttribute("src", "jsfilename.js");
    document.getElementsByTagName("head")[0].appendChild(js);
} 
</script>