Part 32 - WordPress Theme Development - Ajax Infinite Scroll - PART 2

hey what's up guys Alex here thank you for checking this video and welcome to the episode number 32 of the series of tutorial on how to build a premium theme for WordPress welcome again this is the part 2 of the tutorial about Ajax and a synchronous loading if you didn't follow park1 I strongly suggest you to go back of one video and check the entirety of the video and learn how to create a load more button too while you click it it's gonna load automatically more post if you don't want to watch this video you can always download the updated code in my github repo but I really again strongly suggest you to check that video in this lesson we're gonna improve the overall user experience of this button first of all we want to give a response to the user so maybe a loading animation of this icon we want to remove the ability to click this button if the system is still loading and still driving posts and we want to implement the appearance of this posts in a better way first of all we have to style a little bit this button maybe in a proper way and apply our own custom style so let's do that let's remove all the bootstrap declarations of this button we don't want to use a generic button but I want to use a custom class called button sunset Lord so we can copy that and inside here let's do a small separation let's use two span tags and we're gonna see why later but first of all is gonna be the container the first span tag is the container of the icon the a spin loading icon we have the second one we want to just use span class and we can use a generic class called just simply text because it's the text that it's contained inside the a tag and just as a generic advice when you use an a tag and you have to insert other tags other HTML tags inside and a tag a link always suggest you to use a span tag it's an inline tag and he's not a block tag so it's not gonna create any issue to our a class but we're gonna change a little bit this stuff let's save it let's grab these buttons and set load let's access our sass file and here we can start coding a new section so let's copy d section title here and let's use Ajax loading options or Ajax loading and we're gonna collect all our Ajax loading options here so let's display:block this one I want a width of 200 pixel and I want a color of dark gray so let's go like maybe two to two like almost black but like it that way and let's go a font size of 50 pixel it to be pretty big let's check how it looks in our front page here it's pretty massive so we can resize a little bit we can style a little bit better this stuff so let's go 30 pixels yeah that's good and overall I like this color but I'm gonna apply a small animation here to make it more interactive so let's go 30 pixels let's align its center so margin:0 auto and then case is gonna be central line perfect so one thing that you know this even this is an AJAX so it's a link if we go on rollover we don't have the usual cursor because we don't have any href attribute inside the a tag so if an a tag is missing the href attribute we're not gonna have the car sir we have to force the use of the cursor on this element by simply stating in cursor:pointer that it's the type of cursor that you have when you go and rollover on a link so now we have the pointer another thing that we want to do we want to create a little bit of animation so let's say that this one starts at opacity 0.7 and then when we go always using sass on rollover or on focus we go opacity:1 and now we have to implement the usual mixing that we always used to animate so in this case is the animate mixing and let's declare that we wanna just animate the opacity and that's perfect save it let's go back here let's refresh and now we have a small nice animation let's give more opacity of this one it's like not enough so let's go 0.5 yeah way better more visible more clear that this is a rollover animation so let's go to zero point five now the other thing that I want to do I want to stack the icon and the text and that's what it comes useful having these two elements inside these two separated tags it is to span tags because I could of course usually or simply put breaking tag like a br braking tag to force these texts you go on another line but this is not really good it's something that we should avoid to do and if we have the ability to manage this stuff in CSS it's always always better to do it in CSS then actually hard coding in HTML so let's do this in a super simple way with CSS so inside our button sunset load we wanna force all the span tags inside this button to act as a display block and that's it simply but just by forcing the to span tags to act as a display block these two tags are gonna span 400% and I'm gonna be a block like a solid block so they're not gonna be aligned one close to another but they're gonna stack at a mother yet we can manage we can edit we can update these functionality dynamically in CSS without having a breaking code inside the HTML so DZ is really useful and that I want to do I want to now create some nice transition some nice interactions first if I click on lot more I wanna deactivate I want to hide the load more deactivate click ability of this button because I don't want a user to like click three four times in a row the load more while maybe still loading and then I wanna animate these icon to maybe spin for the amount of time that our loading process in the backend our Ajax is retrying in the post so let's do that let's access our javascript file where we handle all our Ajax interaction inside our Sanchez dot yes here we have the document unclick the sunset load more that it's actually the button that we are clicking so before doing anything with Ajax we can dynamically update this style and the look and feel of the button so first of all we have the debt that we can use it it's really useful so let's just write debt first let's add a class called loading and that's it so now that if we notice here let's refresh now here if we select the button we don't have any loading class if we click now these button has the loading class this is really helpful because with this loading class we can prevent the action of clicking the button again until this loading class is still there if we didn't remove the loading class and to do that we can update the selector of jQuery by using simply CSS so by writing column not and inside the simple brackets we specify the class that doesn't have to be loading we are saying that this document click action this document click trigger has to be activated only if the sunset load more doesn F not doesn't have a loading class applied to it let's test it out so let's refreshing we start with no loading class we click and we load two more posts now this button has the loading class so if we click nothing happen see we are not loading any more posts so we're blocking the user to click again multiple times and causing maybe an issue or something else and until the loading class is in place to remove this class we can do that inside the success declaration a success function return of the Ajax because inside the success we are pretty sure that our loading options of all the posts it's done and we are already appended all the posts so we can easily and simply just that remove class of course if we try this is gonna be really quick keep your eyes here we can load more loading boom and the loading it's already gone let's do it again loading and it's gone because of course we are I'm on a local machine so the loading process is really quick and I'm loading all the posts basically in less than a second is just really hard to catch but you know what I mean and with this loading option we can also update a little bit whatever options we have in the CSS so for now just remove these removing class of the loading so we can maintain the loading class active on our button and we can see what we are actually doing inside the sass files I this s CSS file we can also implement here another declaration we'd ampersand loading so we're saying that also other than on hover and on focus if this button sunset has a without the column sorry if the this button sunset has the class loading applied to EG opacity has to remain to one it doesn't have to go back at 0.5 so we can check that let's refresh click and now as you can see even if i click outside are gonna roll over these remains on full opacity so just one opacity and that's good so we can control this the other thing that I want to control I wanna remove the cursor pointer because I don't want to give the maybe allusion to the user that that element is still clickable and of course I don't want to put it inside these declaration here because I do want to remove the pointer on rollover so I have to just copy again this declaration and put it outside and this is not a bad practice and so you can read eclair the same class multiple times inside another class and automatically sass during the compiling process gonna take care of creating the proper declaration it's not it's not that error is not a mistake like a read a claim in the same class with different options absolutely so here we wanna put a cursor:default that is the default cursor that we have so let's refresh now we don't have the loading class applied so the opacity is working we have the pointer we click we have the loading class applied these of as it is hundred-percent and then we have the Harrow here so these element it visually for from a user experience perspective from like a user interaction is not clickable anymore because we don't have the cursor the pointer and is not creating any interaction of transitions of the passing and this is really good now we have to remove the load more text may be hiding and then animate this pin for the amount of time that is gonna take to our script to load the next posts so let's go back here and let's do something again in the JavaScript so other than add in the class loading we can keep going with the same function because we can jQuery works in cascading way so it starts from the left and keeps going to the right so we can add more declaration if what we have to do it's always inside the same container the same parent container we can keep going with whatever we want inside the same declaration same row without specifying other stuff so here we can put a dot to the player and think and then we have to find that's what I'm interested in to you we have to find a class inside our debt declaration that in this case is the sunset load more so inside the sunset learn more I want to find that text class that if you remember I applied this span class that doesn't really style anything is not necessary for CSS but gives me the ability to wrap the text that I want to hide it I want animate inside this tax class that then in JavaScript with jQuery I can find inside my button so finally when I find these tags what I can do I can just use a pre-built animation of jQuery called slide up and the slide up accepts a declaration of timing in milliseconds so let's put tree 20 because we're always using inside also our CSS we're using tree 20 milliseconds so we keep the speed pretty much consistent throughout all our animation so let's save it let's go back and we're front-end refresh and now check this out click boom the load more disappeared so we are going an extra step here we removed a lot more the other thing that we have to do we have to animate this pin icon and to do that I'm gonna do pretty much the same thing here so I'm gonna use that here and I'm gonna find I'm gonna search for the class called sunset icon and I'm gonna add class called spin be careful because in jQuery if you add or remove classes you don't have to put the dot but if you are searching for a class you have to put the dot if we go back in our front-end we refresh we click again and we check in our source code now we have the load that it's affecting both opacity interact ability we cannot click anymore and it's animating the display none of this loading is slide up with a nice animation plus we added this spin class to our sunset icon and now we can apply with CSS simple CSS animation spinning an image to the spin class so let's go back in our editor let's access our sass base folder and let's open a mixin it's not really a mixin but we're gonna convert in the next lesson this simple class into an actual mixing so we're gonna create a nice mixing for our keyframe animation that it's what we are using right now so right now let's call just simply at keyframe spin curly brackets we can start with from and from we wanna transform rotate let's start with zero degrees rotate except a degrees variable a degrees attribute so let's put zero degrees and let's go to transform of course again rotate and the declaration is 360 degrees so we are saying that we want a complete full circle from two in this keyframe animation the keyframe animation should be declare as many time as all these stuff like for WebKit derivation and math derivation Microsoft derivation operation and so and so on but we're not gonna do that right now we're gonna do in the next lesson one we're gonna optimize this keyframe we're gonna create the actual mixing sass mixing of a keyframe animation for now we're gonna just leave it like that really simple so now we have these keyframe animation called spin if we go back in our sunset file we can call a class called spin that for declaration is gonna have the animation - name we have to call the animation that we just created that it's called spin of course we can declare a lot of other options if you see here in my outer completely for right animation we have a lot of options so first of all let's declare the animation duration that is the actual like how long is gonna take to these animation to be to go from zero to hundred so to be completed and I want to go 320 millisecond as well because as I said let's keep the speed consistent let's declare also the animation iteration count here we can specify how many time the animation has to loop so if we want the animation to spin or the icon to spin just one it's just point one if we want a five time in point five or if we want to keep going until we have this class apply let's do just infinite so it's gonna keep spinning spinning spinning and we can also declare the animation timing function this has to be a spinning a constant spinning without stopping and go without weird interaction so let's declare a linear animation as we just you to experiment with this animation timing function and level is in he's out or the cubic Bezier with all the options but we're gonna do that in future lessons to experiment more with each animation and that's it let's save it let's go back in our front-end let's refresh and let's click a lot more and whoa that's that's amazing that's kind of fast so let's improve a little bit let's do a here let's instead of three hundred milliseconds let's go maybe the double six twenty let's increase to three times loading and of course you can see like our icon is not fully centered so we have this like wobbling we're spinning stuff but let's go one second thousands seconds so yes okay let's let's say that it's kind of good for now let's update this to one second a thousand milliseconds and let's go here let's refresh click load it's loading nice so now we have pretty much everything this is not clickable the load more it's gone completely and it's loading is having an animation so it's giving the user response and interaction it's something that is happening in the background and the user it's it's obvious for the user that his action is causing some reaction so now what we have to do we have to update again the sunset yes our javascript file to remove all this stuff and river to button to its original position so first of all let's remove class loading then let's search again let's find again inside this class text and let's slide down with the same speed to reveal again the text and again let's do that find and let's find our usual sunset icon and also in this case we wanna remove class let's remove this class spend save it let's go back here of course it's gonna happen in like yeah we we don't having a full spin so that it's kind of girly means that our loading it's super fast and it's a good interaction but probably at least we should have a little bit of interaction for the user we should show him that it's smooth it's a smooth process is now too fast is naughty because he couldn't miss that interaction ik or you could see like half of this transition that could be kind of weird so what we can do we can delay after the adding of this stuff we could delay the remove of these all these animation and transition by setting a tie with the function set timeout the set timeout function is a JavaScript functions not jQuery that gives us the ability to write whatever code we want here and whatever delay we want as a second attribute so first of all let's open a function and an empty function with simple Bracken's and the curly brackets and inside this function let's cut and paste all our codes to update our options let's remove these delay option here let's create a little bit a space so it's more clear and here as a second attribute after the closing of the curly brackets and a comma we have to specify the waiting time also in this case in millisecond before a trigger in this function and I want to wait at least one second probably I'm gonna increase it because one second is really like quick so let's do this let's refresh click one second and load more perfect of course I am going to the bottom so you don't see it but the user doesn't see it because there's this animation but in the case the user is fixed to the bottom it's gonna see these animation and then the revert of the transition the reappearance of the load more and the button is already clickable so this is a nice interaction so is pretty much it for today's lesson it was a super quick lesson but we did a nice implementation of JavaScript and a bit of CSS in the next lesson we're gonna polish a little bit more this interaction we're gonna create a nice transition and a nice revealing transition for the new blog posts that have been dynamically loaded by our Ajax function and we're gonna solve all the other finicky stuff that we have like the non-working carousel by default and we're gonna take care also of the not really a mixin the key frames animation that that we created we're gonna create a proper mix in it's gonna take a while but we have to create for all these other browsers they're revision that we have in order to be fully functional and fully usable on every different browsers so thank you again guys for checking this video hope you enjoyed if you did please give it a thumbs up or subscribe to my channel and if you want you can spend a couple of minutes to check the support me page on my website where you can find all different ways and method to support me support my channel and help me to do better videos and better tutorials for you thank you again guys and until the next lesson as usual happy coding

Channel: Alessandro Castellani

Views: 12,906

Keywords: wordpress, tutorial, php, ajax, infinite scroll, help, coding, web development

Id: zSF43yQAvbE

Length: 24min 54sec (1494 seconds)

Published: Tue Mar 22 2016