Example sites that use Ajaxify
See it working on:
(Sites that use plain vanilla Ajaxify first with green plugin call)
Site | Plugin call |
---|---|
4nf.org | new Ajaxify({elements: “#sidebar, #content”, alwayshints: “functions.js”, menu: “.menu-item a”, idleTime: 60000, slideTime: 5000, addclass: “jqhover”}); |
Voerstreek | new Ajaxify({elements:”#main-content, #header-stay, #footer-stay”, verbosity:2, prefetchoff:true, scrolltop:true, intevents:true, alwayshints:”pgia.js, menukit.js, fcf.just-validate.min.js, swiper-bundle.min.js, cleave.min.js, smooth-scroll.polyfills.min.js, lazysizes.js, main-allmedialab.js”}); |
360zuid | new Ajaxify({elements:”#main-content, #header-stay, #footer-stay”, scrolltop:true, alwayshints:”lazysizes.min.js, pgia.js”}); |
AllMediaLab | new Ajaxify({elements:”#header-stay, #main-content, #footer-stay”,verbosity:2, scrolltop:true, alwayshints:”lazysizes.min.js, pgia.js, wow.min.js”}); |
Dwaze Herder Deals | new Ajaxify({elements:”#main-content, #header-stay, #footer-stay”, verbosity:2, scrolltop: true, alwayshints:”lazysizes.min.js, pgia.js, fcf.form.js”}); |
PDM Hydraulics | new Ajaxify({elements:”#main-content, #header-stay, #footer-stay”, verbosity:2, prefetchoff:true, scrolltop:true, alwayshints:”menukit.js, fcf.just-validate.min.js, swiper-bundle.min.js, cleave.min.js, lazysizes.js, lightgallery.min.js, theme.min.js”}); |
Athene Restaurant Gulpen | new Ajaxify({elements:”#main-part, #header-stay, #footer-stay”, verbosity:2, scrolltop:true, alwayshints:”jarallax-video.min.js, theme.bundle.js”}) |
Oeko-Fakt | new Ajaxify({elements: ‘#content, #prodlogo, #prodh1’, verbosity: 1, alwayshints: “produktsuche.js”}); |
SitForm | new Ajaxify({elements: “#dynData, #dynNav, #dynFoot”, requestDelay: 100, refresh: true, prefetchoff: false, memoryoff: true}); |
Makaan | search for “ajaxify” |
Heusschen-Loozen | jQuery(‘#main-content, #header-stay, #footer-stay, #hours-open-wrap’).ajaxify({‘selector’:’#header-stay a, #footer-stay a’,’verbosity’: 2, scrolltop: true, alwayshints: “leaflet-embed, pgia.js, greensock-init.js, lazy-sizes.min.js”} |
Wikiloops | jQuery(“#content”).ajaxify({style:false, forms:”form:not(.no-ajaxy)”, cb:jaxed}); |
Alpenglow | jQuery(‘#a0, #a1, #a2, #maincontent, #topmenu, #menu, #recent, #gallery’).ajaxify({forms:false}); |
All Media Lab | jQuery(“#main, #header-stay”).ajaxify({selector:”#header-stay a, selector-x, #footer-stay a”, requestDelay:450}); |
Tandarts M.G.M. Alberts | jQuery(‘#main, .btn-primary a, #header-stay’).ajaxify({‘selector’:’#header-stay a, .selector-x, #footer-stay a’, requestDelay:450}); |
Ebo-Ivo Pianos | jQuery(“#main, #header-stay”).ajaxify({selector:”#header-stay a”, requestDelay:400}) |
Kampeerboerderij | jQuery(‘#main, #header-stay, #background-image’).ajaxify({‘selector’:’#header-stay a, .selector-x, #footer-stay a’, requestDelay:400}); |
Radio 1 | jQuery(“.colsmask”).ajaxify({previewoff:false,turbo:false,inline:true,requestDelay:500}); |
Buitenlust | jQuery(“#main, #header-stay, #background-image”).ajaxify({selector:”#header-stay a, #footer-stay a”, }); |
Pluspunt website | jQuery(‘#main, #header-stay, #background-image’).ajaxify({‘selector’:’#header-stay a’, scrolltop: true}); |
Jaro Dakbedekkingen | jQuery(“#main, #header-stay”).ajaxify({selector:”#header-stay a”, scrolltop:true}); |
Dwaze Herder | jQuery(‘#main, #header-stay, #footer-stay’).ajaxify({‘selector’:’#header-stay a, #footer-stay a’,’verbosity’: 2, scrolltop: true, requestDelay: 100, alwayshints: “leaflet-embed”}); |
Marja en Nicole | jQuery(“#main, #header-stay, #background-image, #footer-stay”).ajaxify({selector:”#header-stay a, .selector-x, #footer-stay a”, asyncdef:false,scrolltop:true}); |
StudioARH | jQuery(‘#dynHead,#dynFoot,#dynData’).ajaxify({requestDelay:100,prefetch:true,memoryoff:true}); |
Wil Art | jQuery(‘#main, #header-stay, #background-image, #footer-stay’).ajaxify({selector: ‘#header-stay a, .selector-X, .back-X, #footer-stay a’, scrolltop: true, bodyClasses: false, alwayshints: ‘leaflet-embed’}); |
Via Mosae | jQuery(‘#main, #header-stay, #background-image’).ajaxify({‘selector’:’#header-stay a’, scrolltop: true, alwayshints: “leaflet-embed”}); |
Royalton | search for “ajaxify” |
JHR Interiors | search for “ajaxify” |
Hello there!
I have tried today. The script worked but, there seems to be a problem, my website uses Graphql to fetch data, and the theme name is Ncmaz, it’s built on react and graphql for wordpress, it’s performant, but still takes about a second to load.
After installing your script, the pages did load instantly but the inner data of none of the pages loaded.
I used:
new Ajaxify(); in queryselectorall
and
in head.
The page loaded very fast, thanks for that, but the inner data didn’t loaded, I even tried alwayshints, by hinting the main js files then also not worked :/
Can you please help me tell, is there anything missing or i need to do something more to make this work?
Thanks in advance,
The website link is – https://knowasiak.com
I made it in school and i just run if for free. ๐
Hello as well!
Please make sure, you’re calling Ajaxify like this:
let ajaxify = new Ajaxify();
Otherwise I could imagine, that the garbage collector gets rid of Ajaxify too early…
Thanks and regards,
Arvind
Hii
This is my website https://mo.mi-projekte.com/ i got a problem
site load successfuly when i click first time in any menu this page is load successfuly but i click second time i got error –> ajaxify.min.js?ver=061403:1 Uncaught TypeError: Cannot read properties of undefined (reading ‘addAll’) can you tell me what problem thankyou
Hi,
it seems that you are using an old jQuery version?
Why don’t you use version 8.2.0?
Thanks!
My menu toggler stop functioning each time i click on a link after using ajaxify. It works in the first entry and later on aucks.
Please be sure to include your menu in the list of
elements
to be swapped each time…how do i do that?
i have a js file at plugin/menu/menu.js.
const menuTrigger = document.querySelector(“.mobile-menu-trigger”);
menuTrigger.addEventListener(“click”,() =>{
toggleMenu();
})
ajaxify removes the eventlistener when used at least once.
You can try specifying:
alwayshints: "menu.js"
Do you have a link to your (test) site?
https://wiaxyhub.com/services.tgt
Try the menu toggler (it works). Then click on any of the services and in the loaded page it will not work.
Thanks for the link to your site. Just checked your Ajaxify call:
let ajaxify = new Ajaxify({elements: '#content',alwayshints: "plugins/menu/menu.js"});
…where “
#content
” is the ID of the body.Could you please remove the
elements
property completely, if you want to perform a full body swap?Yes it works alright, when it reloads the menu.js the other instance of the menu.js will still be present. So a conflict start to occurs thqt ….menu has already been declared.
So change the ‘let and const’ keyword in the script to var, and it works. Thanks.
That’s great! Glad it works!
Would you like me to list your site on my Demos page?
Just had a look at your latest Ajaxify call. When using
alwayshints
, please be sure to separate the hints with comma and space!So e.g. this:
let ajaxify = new Ajaxify({alwayshints: "plugins/menu/menu.js, js/custom.js,js/vendor.min.js,plugins/nice-select/jquery.nice-select.min.js"});
…should really be:
let ajaxify = new Ajaxify({alwayshints: "plugins/menu/menu.js, js/custom.js, js/vendor.min.js, plugins/nice-select/jquery.nice-select.min.js"});
(there is a space missing before your third and fourth hint)
Thanks for the recommendation, will do as suggested.
Thats just a testing domain, will update you with the link to the real project once done.
The address above might not be available henceforth.
Thanks, you care too much
let ajaxify = new Ajaxify({alwayshints: “plugins/menu/menu.js”});
I have removes the element property, but its still not working. Please what recommendation do you have again?
Your Ajaxify call should be alright now.
When I traverse to “Projects” and “Partners” it seems to work.
Also, when I hover over your drop down menus it seems to work.
However, there are loads of 404 errors, because content is missing?
I don’t know what to look for?
What exactly do you think doesn’t work?
Hi!, you can submit this site, is under construction but the plugin works like charm with NProgress!. No problems until now ๐
https://tosigned.com/
Regards!
Hi Renan,
nice site and thanks for submitting the link!
Done ๐
Regards,
Arvind
You can add this one too, and thanks for a great plugin… https://www.studioarh.ba/en
Hi Edin,
thanks for using Ajaxify and submitting your nice site. I have listed it on the demos page. Love your visual effects. Also, on your contact page, you seem to have succeeded in getting Google Maps to work!
Thanks again and
Regards,
Arvind
Hi, could you please elaborate on that? What is it exactly, what you would like to do and where do have difficulties?
Hi!
I need two or more requestDelay for different selector. How can i do this with ajaxify?
Hi!
I’m afraid you can’t – sorry…
Hi Arvind,
Is it possible to use this great plugin for wordpress theme?
Thanks,
J:D
Hi Jaroslav!
Sure, this site (4nf.org) was built with WordPress, too.
Or this one, as well…
Thanks,
Arvind
Hi there Arvind,
Just want to say thanks for the great plugin! We’ve been using it for a year now and its working great. It’s on this website: http://www.radio1.bg and you can see that you can listen to the radio while navigating through the website.
Thanks again,
Martin
Hi Martin,
thanks for the feedback – that’s great!
Would you like your site listed on my Demos and Thanks pages?
Regards,
Arvind
Yes, that would be great ๐
Done ๐
i want to know how to add loading image when page loads in Ajaxify…
Thanks
Hi Jatin,
please hook into these events, for starting and stopping the animation…