FREELessons: 26Length: 5.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.2 Finishing Up the Home Page

During this lesson we’re going to add a basic button to our Home page, which will transition our images. We’ll look extensively at the API for the transition module including callbacks, settings and behaviours.

3.2 Finishing Up the Home Page

Hi, guys. Welcome back to Getting Started with Semantic UI. And in this lesson, I wanna take a look at finishing off the Home page, and we want to first of all start with the reveal element inside of the Semantic UI. Now, in order for us to use reveal we need two images so if we take a look at the images directory we already have the food.jpg and I'm planning to transition in the reveal.jpg. And it can appear over the top, this is why this is a png and it has a bit of alpha transparency and that adds a very nice effect. So I have my two images now. And it's time to take a look at the Semantic UI documentation. So underneath the Element section, you'll notice you have the Reveal element. So, you can see here that we can scroll down and take a look at a few options. So you have fading, moving, and you also have rotating and you'll notice that it's working with circular images. And that's also the same for these reveals right here, so even you have circular images it will work. And also you have masked, and then also you have instant, so those are your two variations. And then also you have states which is disabled, so potentially the user can click a button and you can say, right, well you can no longer reveal some things so you put it in the disabled state. So now that we have this information, let's just scroll up and I want to choose the fade. So let's review the code we have a div with a class of ui fade reveal. And then inside there we have the first image and this one has the classes of visible content, so that is visible when the user goes onto the page straight away and then you have the second image which has hidden content which is to be revealed. When the user hovers their mouse cursor over the visible content. So now let's take a look at applying that to our page. So the first thing we want to do is wrap our images in a div element. And the div needs to have a few classes on there, ui, and then we want the type of reveal, so we'll say fade in this case, and then, we want the class reveal. Then we want to cut out that ending div tag, go down to new line, indent, and then we need to paste in. Those ending div tags, so now the images are wrapped up. Now right here what I'm gonna do is take a look at copying this entire line right here. So I'm just gonna copy that and then we're going to. Select all these guys right here, go down to a new line and paste. And then we need to change the image. So we need to change the image to be reveal.png. So now that we have this, what we can do is start to take out a few classes right here on the visible image. So, we don't need pop. I'm gonna get rid of that. That's only for the reveal and I'll explain why in just a second. But we wanna give these guys the class of visible content. So there the visible images chopping board image. And then also we need to delete the data content and also the data-variation attribute as well. So I'm gonna get rid of those guys. Now why did I do that? Well the reason why reveal has now got the class of pop is because the reveal image is actually over the top, even though you can't actually see it and it's transparent, it's still there. And when you hover over it, that's the thing that's gonna have the pop-up on it as well. So it's gonna reveal, but it's also gonna have a pop-up. If you do it the other way around, you're actually going to be hovering over the reveal. And even though you may have all the classes and the correct attributes on there, it's not going to give you a pop up. And that's because this image is overlaying the original image. So the only thing left to do is to define the hidden content. So that will be the reveal.png, and we need to put those classes in. So if we save that and take a look at this in the browser, you're able to see here is the result. Now the only problem is. That, we don't have our images aligning in the center anymore. So how do we do that? Well if we go ahead and inspect the element, and we take a look at the div, the div is now being displayed as an inline block. So this is actually causing a problem. Even if we were to set the margin to zero auto,. We would still get the problem of it going all the way over to the left hand side. And the reason being is because an inline block doesn't really care about that margin auto trick. It won't center it. What you've got to do is use the text alignment on the parent. So with the class column you can temporarily just set the style so I'll say text align in the center and now that inline block will centralize. And also I like this because it centralizes obviously the paragraph text. And it does a really good job of it as well. And then we don't really need to worry about the header threes. >> So let's go ahead and move on over into Sublime and take a look at the CSS, and right here we have Home 3, Header 3 and so I'm just gonna change this from Home 3, Header 3, to Home 3, and then we're going to look at the classes of column, because don't forget we have each one of these right here. And we'll get the text alignment in the center, that means these inline block div elements will align up in the center. So we refresh and now, those changes are permanent. Good. So, the next thing I want to do is take a look at transitioning some of the images. So in order for me to trigger the transition, we want to put in a little button right here. So, down below I'm going to put in a div. And let's just give it the id of center. So now what I want to do is inside of there, I wanna put in a nice little button. So we create a div element and then we need to put on some classes right here. And if you want to review the documentation again, you can go ahead and take a look at the button under the elements section. And if we scroll down, you see can have the labeled icon button. I like that. So we have ui labeled icon button. And then also I want to change the styling just a little bit. So if we scroll down, under Variations. You have Basic. And I like this type of styling, so that's what I'm gonna go with. So let's move on back, ui button icon labeled. And then also we want the styling to be basic. And again you can review the code, right there. Then inside of there, we're going to have the i tag, and that is going to be an icon. And then you just have the label. So let's go ahead and put that in. We have the i tag, we need a few classes on there, so this is going to be icon bell. And then below there we're just going to have the label order. And then if we go back into the browser and hit refresh we now have our nice basic button. But we want to centralize it and also move it away from the content. So I'm going to point to the ID of the parent which is center in the CSS. So I'm gonna say center and then we're going to set the margin top to 20 pixels and also we're gonna set the text alignment into the center. And again we're doing that to centralize it instead of using margin auto. Because even though this is a div element, it's not being displayed as a block level element by default, they've changed it to display as an inline block. So if I hit refresh now, you'll notice it centralizes and we have a button. So when I click on order I'd like these guys to shake and pulse as well. So we're gonna take a look at queued transitions. And then also we may want to apply a call back in there as well. So let's take a look at first of all, the documentation. And so we're gonna open up the Menu, and then inside of there we're just gonna scroll down. And under Modules you'll notice you have Transition. So first of all, we have the definitions, and you can take a look at the example image and you can run some code on the example image. And you can have a whole different variety of effects, so you have flashing, shaking, pulse which is one we're gonna be using, and tada. And then also you have, you know, a nice bouncing effect. You can also have the appearance. So with the appearance it's like a toggle, so you can click on and off, or you can click one, and then click another, and as you can see it would just toggle the appearance from hidden to visible, or visible to hidden. And you can go ahead and play around with some of these effects. So, the ones that I'm going to choose is the tada effect. And then I want it to pulse. So I want two transitions on the images that are along here. So the way I am going to do that is take a look at the JavaScript. And then we want to target the element with the ID of center, and then we're gonna target the div element that resides inside of there. And then I want to wait until this div element, my button, is clicked. And then we want to run a function. Then inside of there, we need to target the image or images or particular elements that we would like to transition. So I'm just going to target the class first of all reveal. So if we take a look at the index.php we have the revealed div. Now you don't actually want to be transitioning this div. Because due to the fact it's a reveal and we've got pop-ups inside of here it messes things up. Also you don't want to be targeting the hidden image, the one that's gonna be revealed because again it does mess it up. But however, we do wanna target the visible image. So let's target the class visible and then what I want to do is run the transition method. And then we can pass in what type of transition we would like, so I can say tada. And then also we're going to put another transition in the queue so once this one has finished. The ones waiting in the queue and it runs. So let's go and create that. So I'm gonna say transition and then we want to run the pulse and then end with a semicolon. So if I save that and move back over into the browser and hit refresh, you'll now notice. That they shake and then they pulse. You can also set the timing. So you can do it in of two ways. You can do it either by the CSS shorthand, by passing in the strings. So I can make this 2000 milliseconds. So you need to put the ms in there. Or you could do it by passing in a number. So, for example, pulsing, I'll make it 200 milliseconds. So, if I save that, we go back and hit refresh. You can see that that's taking a lot longer. And the pulse was very, very quick indeed. Then also you can set the looping as well so I can say transition, and we can say set looping. Now just to note this will actually break the queue that we have, so it will only do the tada effect, and it will just carry on looping it. And let's bring the time down, something like 500 milliseconds. So if I go back and hit refresh, you'll notice that it won't pulse anymore. But it will be looping over and over and over again the tada effect. Now also, just to mention, that you can remove the looping as well so you could have another button and you can say, remove looping. And also what you're able to do is pass in a function right at the end and this will basically execute when it completes. So I'll say console.log. And then we'll say done. So for this one, I'm just gonna save it, hit refresh, and then I'm just gonna bring this in a little bit so we can see the console, so you see it was blank. Then you run it and there it says it was done and then it went on to the pulsing. So, I could say the same thing again, so we can copy this, and then we can paste it in just like so, and we can say done pulse. So save it, and now we can hit refresh, and then you can see the console is empty, and run it. And then you have done for the first one and done pulse. So obviously you could run whatever code you would like in there, it's entirely up to you. So, once we have done that, I'm going to copy the selector that we're gonna be targeting, paste that above, and then we're just gonna comment this line out. So that's one way of doing it. The other way of doing it is using the transition method. And then we want to pass in an object and the object will contain all of our settings. So to review your settings, they're all here under the Settings tab. You know you have queuing, animation and so and so forth. So I am going to do animation. Let's have a callback complete and also let's do duration as well. So, I'm just going to take a look at first of all the animation property. We're going to set it to tada. Then we're going to have the duration property and that's going to either be shorthand, so I could say two seconds. 2000 milliseconds. Or I could give a number inside of JavaScript. So I could say, you know, 300 milliseconds. And then we have the complete call back. So I had it say complete function. And then we can just say console.log finished. All right. So we have this now. And we can take a look at saving this. And then going back to the browser. Hitting refresh. And now we get the tada effect. And we get the callback. So thank you for watching me in this lesson. And please join me in the next lesson where we'll take a look at the About page.

Back to the top