Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
- Building a design in Photoshop
- Converting Photoshop design to HTML and CSS
- Setting up MAMP on Mac and WAMP on Windows
- Moving HTML and CSS into a WordPress theme
- Building navigation
- Using custom fields
- Creating a commenting system
Skill Level Intermediate
So we will say script and we're just going to need a source and we will close that script tag. Now what's that source going to be? It's in our template file, so we will go ahead and steal this little function right here where we linked out to our custom store.css. That's just giving us the URL of where our template lives on our server. We'll plunk that in here and then say /js/widgetcorp.js. So we will save that and we will reload this homepage and we are going to take a look at the source just to make sure that that worked properly.
So here is jQuery being loaded and then underneath that here this is where our widgetcorp.js file is being loaded. So that's going to work great for us. We could test quick, we could do something like-- let's see. A lot of jQuery starts like this. We'll wrap it in this, which means when the DOM is ready. We could do something dramatic like we will target the body tag and make its background red.
So that's pretty neat. Now each one of these ribbon things here in the sidebar also have and those of a class of date, so we can select multiple things in jQuery by just going like this, date. And we will reload that. Now each one of those has that as well. So it's a kind of a neat little effect. What we are going to be going for here though is kind of a grow-shrink effect as you scroll over these and we are going to do that and we are going to use a plug-in to help us do it. It's called the hoverFlow plugin, so just google hoverFlow and it will come right up and it solves a little animation problem in jQuery.
Now we have access to that as well. So in our header.php file as part of our theme, we loaded up our custom script but we are going to use this plug-in now, so just before our own script, we are going to load that. It's called jquery.hoverflow.min.js and I switch them around again. The whole point was to load the plug- in first, so we will do that. Now we have access to this hoverFlow function and it works like this.
Again, we are going to target all anchor links in our navigation and when you hover over it, this is the effect and we run our function. Now the e there represents the event that happened, which is going to be a Mouse Enter event. We are going to want something to happen and what we want to happen is something to this, which this refers to the anchor link that we just rolled over. We are going to do a number of things. We are going to use hoverFlow. We're going to give it the event type.
That's required for hoverFlow. We are going to tell it that we want to animate something. So when we hover in, we want to extend the width a bit. So we are going to say we want to extend the width to about 230 pixels, we want you to take 200 milliseconds to run that animation and while you're in there, we want to make sure that the overflow is visible. Then we are going to find that span, which is that little part that sticked out with the shadow, so we're going to find the span and we are going to use hoverFlow on it as well.
We are going to make it shorter than it normally is, so we are going to give a width of 15 and want you to take 200 milliseconds to complete that as well. Now the Hover function has a callback event. So we can do something like this. function. We will give it e again. That's the event. So this is going to run when your mouse out of something. This is the code that we want to run when our mouse enters an area and this is the code that we want to run when our mouse leaves the area. So I am going to copy this code and paste it in here and we want this to return to what it was before, which is about 215 pixels. We want the span to return to what it was before, which is about 20 pixels.