Adding common elements like menu or footer dynamicaly

Hello,

This could possibly work but we do not recommend it since this increases the Memory Size on the Page which is why PHP is the best solution for this as everything still works normally and in the default order! However, since you are planning to use this, you will need to check the js/functions.js File for the Functions handling the Menu such as the SEMICOLON.header.superfish(); and reload it in the jQuery Callback which will make the Superfish Menu work on the Externally Loaded Menu.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Hello,

Can you please provide us with a Live URL so that we can check out the exact issue with the jQuery which is causing the Menus to not load properly and then provide you with more assistance on this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Hello,

The Code will look similar to this:

$( "#result" ).load( "ajax/test.html", function() {
	SEMICOLON.header.superfish();
});

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Hello,

Thanks for your Patience! [sb_private_reply]Your Support Query was answered according to the dates mentioned. This might have been a cache issue. We will definitely look into what went wrong with this.[/sb_private_reply]

Without a Live URL it is really hard to understand the core issue. Additionally, we hope you understand that this is a Customization Request and a feature which is not included by default into Canvas. The real issue here is the JS Initialization which causes all the messup. The js/function.js File is designed in a way so that it minimizes the risk of the js garbage bubbling up in the Memory which caused a website to lag. The jQuery Objects are initialized only once on Page Load and reused when necessary. But the way you are adding the Header and Footer on the Page using JS, the default js/functions.js File do not find the Elements on the Page. This is the code which initializes the objects present on a Page:

var $window = $(window),
	$body = $('body'),
	$wrapper = $('#wrapper'),
	$header = $('#header'),
	$headerWrap = $('#header-wrap'),
	$content = $('#content'),
	$footer = $('#footer'),
	windowWidth = $window.width(),
	oldHeaderClasses = $header.attr('class'),
	oldHeaderWrapClasses = $headerWrap.attr('class'),
	stickyMenuClasses = $header.attr('data-sticky-class'),
	responsiveMenuClasses = $header.attr('data-responsive-class'),
	defaultLogo = $('#logo').find('.standard-logo'),
	defaultLogoWidth = defaultLogo.find('img').outerWidth(),
	retinaLogo = $('#logo').find('.retina-logo'),
	defaultLogoImg = defaultLogo.find('img').attr('src'),
	retinaLogoImg = retinaLogo.find('img').attr('src'),
	defaultDarkLogo = defaultLogo.attr('data-dark-logo'),
	retinaDarkLogo = retinaLogo.attr('data-dark-logo'),
	defaultStickyLogo = defaultLogo.attr('data-sticky-logo'),
	retinaStickyLogo = retinaLogo.attr('data-sticky-logo'),
	defaultMobileLogo = defaultLogo.attr('data-mobile-logo'),
	retinaMobileLogo = retinaLogo.attr('data-mobile-logo'),
	$pagemenu = $('#page-menu'),
	$onePageMenuEl = $('.one-page-menu'),
	onePageGlobalOffset = 0,
	$portfolio = $('.portfolio'),
	$shop = $('.shop'),
	$gridContainer = $('.grid-container'),
	$slider = $('#slider'),
	$sliderParallaxEl = $('.slider-parallax'),
	swiperSlider = '',
	$pageTitle = $('#page-title'),
	$portfolioItems = $('.portfolio-ajax').find('.portfolio-item'),
	$portfolioDetails = $('#portfolio-ajax-wrap'),
	$portfolioDetailsContainer = $('#portfolio-ajax-container'),
	$portfolioAjaxLoader = $('#portfolio-ajax-loader'),
	$portfolioFilter = $('.portfolio-filter,.custom-filter'),
	prevPostPortId = '',
	$topSearch = $('#top-search'),
	$topCart = $('#top-cart'),
	$verticalMiddleEl = $('.vertical-middle'),
	$topSocialEl = $('#top-social').find('li'),
	$siStickyEl = $('.si-sticky'),
	$dotsMenuEl = $('.dots-menu'),
	$goToTopEl = $('#gotoTop'),
	$fullScreenEl = $('.full-screen'),
	$commonHeightEl = $('.common-height'),
	$testimonialsGridEl = $('.testimonials-grid'),
	$pageSectionEl = $('.page-section'),
	$owlCarouselEl = $('.owl-carousel'),
	$parallaxEl = $('.parallax'),
	$parallaxPageTitleEl = $('.page-title-parallax'),
	$parallaxPortfolioEl = $('.portfolio-parallax').find('.portfolio-image'),
	$textRotaterEl = $('.text-rotater'),
	$cookieNotification = $('#cookie-notification');

So if the Header does not exist on your Page, then the all the above JS(related to Header) will not initialize throwing an Error which is why you will need to include all the Header, Primary menu, Top Search, Top Cart or any JS related to the Headers from the js/functions.js in your load() Function.

It is highly recommended to use PHP to include all the Dynamic HTML since this will cause no issues with any Elements at all!

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Hello,

Did you really edit my own comment above? You know, the comment saying that you predate your late replies, making the impression that you are super fast to reply !! Are you kidding me ? You didn’t answer before today and I know it because I came back here everyday since I posted, the 28th.

1. We have been providing support for a long time now and if we are late, we are late. There is no excuse and there is no reason for us to predate our replies. We have checked out the Server and Forum Logs and the issue appears to be with the Revision Updates, we made an update to the bbpress database and optimized it on 5th December to clear any inconsistencies which might have caused the replies to not display. So we suspect that after repairing the Database, your reply might have displayed late than the original posted date. We will make sure that this does not happen again.

You don’t even gave a valuable answer to the issue, in fact, you just say that your code is not re-usable. Come on, it’s been 2 weeks since I renewed my support and today you still don’t have a better advise than “you have to pay to use our theme correctly” ?

1. We are just providing you with an explanation of what is the issue with the codes you are trying to use and its future impacts. We are here to make your Websites function better and we will never provide you with inaccurate or unnecessary advice. The codes you are using are really dangerously inconsistent and will always cause issues in the future and PHP include is always better because it negates any extra Code Modifications (which is why we are using PHP in our Live Previews). JS and PHP is not same, so it is not possible to provide with the same solution for JS. Please consider contacting anyone regarding this and getting a second opinion if you want. We assure you that it is way more complicated and Browser resources hungry to make this work by JS than you think.

We are always here to provide you with Support with any issues you face with the features included within the Template: https://help.market.envato.com/hc/en-us/articles/208191263 and more than happy to provide you with minimal customizations which we have always done in the past. But unfortunately, we cannot do customizations which could potentially take around 2-3 hours to make something work correctly and then always have the risk of future issues with the customization.

“you have to pay to use our theme correctly” ?

You do not need to pay us anything, you can hire any freelancer you want. Just consider getting a quote from on this request.

Well, we explained everything and the issues related to your codes in our previous reply, but you say otherwise. :(

I first wait 1 week before you considered the bug connecting to this forum

1. We would like to re-iterate again that there was no bug with the Forum Logins as previously mentioned and works fine for all the customers, instead there was issue only with your account since we modified your Support License and added extra 60 days to it as requested by you earlier which is why there was a date mismatch. This is why it took us time to find out the exact issue with your account.

to erase my comment

1. You can contact Envato to re-instate your Comment: https://help.market.envato.com/hc/en-us/requests/new .

We assure you that we are always here to help you within the Item Support Guidelines. Thanks for your Patience.

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Hello,

Hmm what are you talking about? I know exactly when I replied, it was the 5th of december, 2017 at 5:07 PM. This is the real date and it stick exactly with the time I posted it. It is the answer to YOUR reply from the same day (during the 5th of december) but artificially predated from the 30 th of november at 9:31 PM. I know it as I reloaded this page everyday from the 29th.

We can't explain you more regarding this since we already mentioned that this was a Database repair issue and not all the replies were affected. Just a few of them from 29th November (New WordPress Release update) to 5th December (the day we updated the Databases). So nothing more to explain in this regard.

In this case why not just writing it directly. Instead of deleting the part of my message that highlights the fact that the date of your message doesn’t stick with the reality and has been predated. From my point of view it looks like you tried to hide stuffs 1/ you predate your message, hoping that I didn’t came back to see if an update had been posted 2/ you delete the sentence that highlights it in my next reply from the 5th of december 3/ you don’t even mention it in your next message. 4/ no email sent to notify that there is a new reply on the topic. Looks really strange isn’t it ? Can you see the point ?

1. Which part of the Reply was deleted? 2. We do not Predate messages. Period. 3. Not sure what you are talking about. 4. ? 5. We are working on this and surely enable this soon enough (we did not enable this earlier because of SPAM issues).

So, ok let’s say you are of good faith. You know, between this ‘inconsistency’ plus the one when I renewed the licence ( maybe that was a special case, I understand, but anyway you didn’t even considered my warning messages on envato comments ). Now we are like at +2 weeks after the licence renewal and I am still losing time because I don’t know how to fix this menu issue. Exactly the same point…..

Firstly, there is no Menu Issue. The Menu has caused issues because of your Custom Codes and also not following the Solutions (PHP) we have already provided to you. It would have been great if you could have asked us whether support on this request was included before renewing the support.

Solution:
We have worked on this Solution for the past 2 Hours! You can consider using this File: https://www.dropbox.com/s/nhenenr5113b0i4/header-footer-include.html?dl=1 . Make sure, that you set the data-loader-timeout Attribute on the <body> tag, else the Page Transition feature will not work properly. This Solution works for us and this is the only solution we have. Unfortunately, we will not be able to provide any further support on this. Thanks for your Co-operation.

Meanwhile, to let you know this is not even SEO Friendly since the Code is loaded via AJAX and does not even exist on the Page so Google will not be able to index the links.

We really do not want to discuss on this matter with you anymore or make you understand that we are always providing support with good faith and Customizations are not entertained within the Support policy. So you are really welcome to request a refund: https://help.market.envato.com/hc/en-us/requests/new and we would approve it. A little bit of politeness goes a far way and we would have worked more than harder to find a solution for you even if it is a complex customization. Because respect is always mutual and while we respect and appreciate every customer, we would really expect the same. No hard feelings. :)

We appreciate all your Patience and really apologize about any inconveniences and delays caused!

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Hello,

Since you are using this code on the Localhost the 2 loads are working fine. When you go live, your code will not work fine since the jQuery load works asynchronously and the js/functions.js file will not initialize the functions properly. Unfortunately, as we mentioned earlier, we cannot provide you with further support on this and currently cannot change the js/functions.js structure since it works perfectly fine for all the default cases. Frankly, this is the first time we have seen JS being used to include HTML on a Page.

Well we don't understand, why were you angry? Didn't you upgrade your Support License for a lower price? We just mentioned it to you that Canvas 5 will be available soon and did not really release it publicly to garner more sales. And Canvas 5 is a Huge Update which will be available for Free for all the Users of Canvas, no matter if they have Support License or not. Meanwhile, the delay is because Canvas 5 is upgraded to Bootstrap 4 and the code has changed considerably and so its a big task to change 900 Files, 50+ Plugins and make everything work correctly.

Well thanks for your Patience and Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Hello,

Allow us to rephrase: Frankly, this is the first time we have seen JS being used to include HTML on all the Pages instead of PHP Include.

Shortcodes and Widgets can be reinitialized but the Fundamentals blocks on the Page cannot.

Also, we would love to hear your thoughts on this: https://themeforest.net/page/item_support_policy .

It is important for you to understand that we are more than happy to help you with the features, fix issues and bugs for what is included within Canvas and but we will not support Customizations as we really do not have the time to create custom codes or provide support for your custom codes. There is no reason to get angry on this as this is the support policy common with all the items on the marketplace.

Hope you understand.

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Hello,

Ok I think I see what you mean, but after all, why not ? If I use the Ajax portfolio on one page, the blog timeline on an other, an ajax loaded JSON on 2 other ones with JS templating, finally it is equally if not heavier than a little snippet of HTML code. You know if everybody always used PHP, frameworks like angular js, vue js or react wouldn’t exist. And for your information, it’s been 3 years that Google bots are able to manage javascript and ajax loaded content in body and header of a page.

Unfortunately, our JS codes are currently not designed to support Entire Headers/Footers included via AJAX/JS on a Page since it works differently from other AJAX Features included within the Template. We will consider working on this in our future updates.

Item support does not include services to modify or extend the item beyond the original features, style and functionality described on the item page.

As described above, the feature you are trying to implement has not been described within the Item Description or displayed in any of the Live previews. As you yourself mentioned: I know that what I want to achieve works but not with your template, this feature is not included within Canvas and the JS Codes are not designed to work in this way for the Fundamental Elements like Header, Sliders, Footers to avoid JS Memory overhead issues.

No, I came here with the code used and described exactly where and what was the issue. Issue that has already been asked by others and by myself 8 months ago

Exactly what we mentioned in our previous posts, this is your customized codes(not available anywhere in Canvas) and we are aware of the issues it might generate because of the current structure of the code (which cannot be changed anytime soon because many users are using it right now).

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Hello,

Referring to this topic and a lot others, you are very able to customize code that “are not described within the Item Description and displayed in any of the Live previews.“. Perfect for him, you provided a solution to its request while it is not shown in demo nor in description, that’s nice.

Yes! So we do make Customizations within the scope of the Template and what is possible by tweaking the codes slightly.

In fact, the point is not that you don’t customize the template for customers, no, the point is that the template is not really customizable if we can’t even do that without modifying the core structure. And this is not written anywhere. And you make issues to advise because it is not the way you code… After all, you don’t know what I need to achieve and for what purpose, so why do you care for me about SEO or JS memory issue ?
So when I ask you what I have to call or where I have to place code to make it work, why is it so complicated ?

Haha! Well! We can't really disagree more. :) Just because something is not working because you want it to work according to your codes doesn't mean Canvas is not customizable. There can be 1000s of Usage Scenarios out of which 10 or more will not work. This is a complex request according to the scope of the Template and will take indefinite amount of time to code, debug and recode. This request requires us to code some functions from scratch which we cant really afford to do now. We hope this is definitely not hard to understand. We are selling a Template, not Customizations. Customizations can be implemented by Freelancers only.

In fact, we did try to provide you with a solution right with a working code? But you tried implementing it in a different way and it didnt work. In these type of requests we can only provide pointers and not a tailor-made solution.

You can get in touch with Envato regarding this if you like and take an opinion.

Ho really!? Good news, you should have done it since a long time, sincerely.

If we have enough user requests regarding a feature that needs to be implemented and will benefit a lot of users, we will implement it in our immediate updates. :)

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Hello,

No no no, it is not MY code, nor the way I want it to work. I am talking about a jQuery function .load() which is a very common function mixed with your core functions.js file. Both seems to be uncompatible as you are not able to provide a working solution to MY issue because of ‘the scope of the Template‘. And it is not my issue because other people also faced it.

It is your code because you want to implement it in your way. As we mentioned earlier, the fundamental elements will not work for this but the shortcodes/widgets will. A working solution will need 3-4 hours to implement because it requires us to rewrite some of the functions which we are not willing to do right now!

Well no, sorry but really no. You did provide a html file using a .getScript() call. That’s right. Unfortunately you didn’t even tried it… it doesn’t work. Read it again, I told you that I also tried this solution earlier but the isotope and social top-bar weren’t running (and by the way, probably other JS based features). Then, I just asked you what to call exactly in the callback function in order to properly re-run plugins.
You will agree that your are very better well placed than me to advise on that.
You will also agree that I am not asking you a deep customization nor a strong over work than anyone else.

Yes it works but maybe not for all the Elements on the Page because as we mentioned earlier your solution is a complicated one and you will have to do some work by yourself when you are trying to customize a code in a template! We also guess that you have never ordered Customization before which is why you don't understand that time is valuable for freelancers and they charge by time. Meanwhile, try replacing the following code in the file we had provided you earlier:

	jQuery(document).on( 'ready', function(){
		jQuery( '#header-wrap' ).load( 'include/header-html.html', function(){
			jQuery( '#footer' ).load( 'include/footer-html.html', function(){
				$.getScript( 'js/functions.js' );
			});
		});
	});

with the following:

	jQuery(document).on( 'ready', function(){
		jQuery( '#header-wrap' ).load( 'include/header-html.html', function(){
			jQuery( '#footer' ).load( 'include/footer-html.html', function(){
				$.getScript( 'js/functions.js', function(){
					SEMICOLON.documentOnLoad.init();
				});
			});
		});
	});

It works for us!! Unfortunately, this is the final time we are providing you any help on this issue. So any issues you have face further because of this will have to be fixed by yourself or by hiring a freelancer.

Thanks for your all your Patience.

Hello,

Well it takes a lot of time and experience to come up with a solution like this. The code seems easy but in reality takes time to figure out which corner of the code causes issues. It took us 8 months to build Canvas and we try to perfect each and every corner of a code. So here is an example of Canvas's customizability before you. :)

I don’t understand your main problem. CSS –> for free & JS –> hire a freelancer ?
I don’t know what’s your rate but 3-4 hours for this simple line might be a good earn. And what if I pay and you add it in further version ? Not that the problem is to share it with next customer but finally I pay to make your template better, isn’t it a bit strange to charge for it ?

CSS Support Query asked: took us 4 minutes to figure out. Your JS Support Query: took us more than 3 hours (collectively) to completely understand the issue before coming up with a solution which included us to setup the codes according to your Usage Scenario (since you didnt want to provide us with a Live URL) and debug various variations of the code. The code you see is the end product of more than 20 tests. :)

So a very ignorant statement on your part and truly disheartening. Do you do freelancing? Btw we doubt anyone would try use JS to include headers/footers on their website. And so we wont add this in Future Versions anytime soon.

And nope you are wrong! You are paying only for the Template and the Support that comes with it for the features described. The result of this solution was you pushing us way too much to provide you with a Solution of a feature not included with Canvas.

PS : if it would have to happen, how much would you charge if I really need you to rebuild the functions.js file in order to integrate a feature like this ? Meaning, loading snippet of code in the DOM before it is ready without using : .load(), .getScript() and having to reinitialize it with SEMICOLON.documentOnLoad.init() as callback.

We don't support Customizations. Too much of a headache. :/ Btw, the code above does not use any Reinitializing. Everything gets initialized for the first time.

Anyways, Thanks for all your Patience.

Do let us know if we can help you with anything else or if you find any further issues with Canvas.