Popup Message Boxes – HTML, CSS, JAVASCRIPT [2021]

hey guys today we're going to be creating these pop-up message boxes where you hover over these options and then the associated message box pops into existence and the cool thing about this and it will be the main focus of this tutorial is that when we hover uh up as you can see it just automatically goes to the to the next option above and they're not obscured by the message box that is already opened uh that's already opened like this one here um and yes so if you didn't follow the method that's explained throughout the length of this tutorial then this message box here would uh obscure the above option and we wouldn't be able to select it but with and you can also go really fast as you can see and everything works without errors but yeah if we uh just followed norman method then we won't be able to do this and if you're looking for if you're wondering where this um i'll close the page now but if you're wondering where the idea for this effect came from it comes from stripe uh if you go to the pricing page then you should be able to see it here and i've just recreated the top row as you can see this is where i got it from it's not exactly the same but it's close enough as you can see very similar so yeah if learning how to create this uh interest you then keep watching and find out how to create this okay and before we start this tutorial it's worth mentioning that the completed project can be found on codepen in the description box below so if you're stuck at any point in the tutorial then you can head over head on over here and look at uh what the finished result is here so hopefully this will solve your queries but anyway i should move on now and talk about the webpack boilerplate that's created for you you don't have to use it for this tutorial but it does save a lot of time if you just follow along with the instructions here and clone it from github into your project folder so what we'll do we will create a new project folder here and i'll say message boxes new and then what i will do is i'll launch up the terminal like so and then instead of your app i'll change this to a dot to launch to create the project uh in this empty project folder so in the code folder that the terminal is opened up in and as you can see that will copy it in here and then we don't need to see it into it because we're already our terminal's already in the folder of the project but we will need to remove the origin and then we'll need to install the dependencies and the reason why uh we're using the webpack boilerplate is because it already it's already set up with babel and some other things like post css with auto prefix etc so this will simply allow us to use um the latest javascript and css features and it will automatically compile it so that it's more compatible with older browsers that's the reason why we're using babel it also allows us to use es6 imports etc and all that will get compiled into a single javascript file so we don't need to worry about compatibility uh in terms of imports this is quite helpful so that you know use the boilerplate you don't have to set it up manually so once we've done all that we will launch up vs code which is you know a very good source code editor definitely recommend it but chances are you're already using it anyway if you're watching this tutorial unless you're using sublime or something but anyway uh as it says in the markdown which you should probably delete actually because we don't need it for this project we will launch the script uh dev using npm rov the script name is dev and this will start a local server on port 9000 containing our project as you can see this is what i set the boilerplate to be but we can delete this and because it's got hot reload um because it's got hot reload change automatically get reflected about us needing to refresh anything and we'll zoom in so that you can actually see what's going on but essentially the first thing that we all do is because this is just a dummy website with a single html file that's being hosted we will set the body to be display flex and then we'll set what expands the height out whoops to be 100 of the viewport so that we can align things in the center vertically obviously we can already do that horizontally because um it's already a hundred percent of the width of the viewport but not just just not the height uh so then so yeah we'll set our line items to be center and to center things vertically and then we'll do it's very common to create a container class in css projects beat strap has one that's very famous but this is our one well i wouldn't say famous but you know it's just very commonly used probably the most commonly used class in bootstrap well no i don't use bootstrap but yeah so we'll center in the middle with some margin the padding will give some padding on left and right the width will set that's 300 percent but then we'll also set max width to be 1200 so that it can't exceed well that needs to be pixels it can't exceed 1200 pixels so if we have a container on the body we'll create one using emma abbreviation and then we set the background color to be red again this is just like you can see what's going on heights be 500 pixels go back again we don't need to be fresh as you can see this is our container class and due to our body uh the flex being applied to our body it's centered in the middle of the page and now it's 100 width but then obviously it can't exceed 1200 which is the reason why it stays at this width uh when our 100 when our viewport is a lot wider considerably wider than the width of 1200 pixels what we'll then do basically we're using bm to do this so we will contain we'll create a flex modifier for this container block if you don't know what bmbm is i'll advise that you lock it up there's some good videos already out there on youtube so i won't explain it and besides we don't really have time to explain it in this tutorial anyway we'll set the flex wrap to be that so that when the horizontal width is exceeded it will start a new row automatically uh and then we'll set the padding top 16 pixels and we'll do the same for the bottom as well so that this does have a padding on both the top and bottom and this doesn't obviously which is the reason for the zero if we apply this then all of a sudden this element will have vertical padding apply it like so and then what we'll do after this we will create three container sections like so because we want three obviously you saw at the start you saw that you saw those three columns and this is where they come they'll come from essentially those three columns so we'll create that and we'll style them but we'll only style the ones that are inside that are children of the container block with a modifier of flex which is the reason why we use a hierarchical selector so we'll set display to be flexed no sorry what not that's not what we'll do we'll set the width to be 33 like so uh obviously we use three threes instead of three recurring which is obviously a third that's about as close to a third as we're going to get obviously you know that's that's pretty precise as it is position be relative because we're using absolute positioning uh as a child of this later on padding will be a bit weird but it will become clear why we're doing this later on 60 what are you 60 pixels on the top 50 pixels on the right 10 pixels on the bottom 10 pixels on the left and the margin 40 pixels top and bottom zero on the sides and then what we'll do after this we will copy you know yeah we copied it because we can't whoops uh sorry i'm using different monitor now so but anyway copied svg from the official website again obviously i don't expect you to do this now you can copy this svg flat tag from the code pen if you're following along obviously as i said link in the description anyway i have added this class of container icon and we'll be starting that very shortly let me just get the other svg elements so we'll get the second one again it has the container icon class applied to it and then we'll get the last one like so copy that in there again it also has the class it's not an outlier and copy this just because just to be um efficient about how we do things we'll set the position to be absolute and then we'll set top align the top edge of this icon with the top edge of the container section it's it's parent element left or maybe it's the right of it started to align uh with with the text okay we haven't actually created the text yet but it's aligned with the elements that get affected by the padding which is applied to the left of the container section obviously this isn't affected by that because its position is absolute so if we go back we should be able to see these uh these svg icons now uh but obviously we need some more content so what we'll do again we'll copy just to save time i mean obviously i'm not going to copy paste this entire tutorial because otherwise that would it wouldn't really be a tutorial but we should be safe to copy this because it's not too hard so h2 with a classicaltane header and this is the text here again you can get this from the code pen if you so desire but it's not exactly hard really you could type that out yourself it will take about 10 seconds maybe more i don't know anyway paste that one there uh obviously you know it's different text for the different rows and then we'll get this as well instead of icon i believe it's header and then we'll just say margin bottom 1.7 relative unit so this is what we have here um problem with this is that it looks good but then on shrunken wits we get this horizontal scroll bar and everything's really squidged up uh so everything's really squished so we will solve that using media queries so what we'll do we'll say at media max width so this will apply to 879 so if this will apply to everything that is less than 880 pixels essentially we'll set the width to be 50 percent and we'll copy this again and we'll change it so everything it's applied to everything less than 680 pixels but then once we have reached 680 pixels this media query will apply until we've reached 880 pixels in which case no media queries will apply but we'll set the width to 300 so one column here two columns here three columns uh when no media queries are applied so as you can see this is what we have here as you can see it looks a lot better now okay and what we'll now do we won't complete the entire html file here but we will do some of it because we need to in order to complete this tutorial so we'll create an order an order ah sorry an unordered list with a ul tag with a classic container list and url tags good for compatibility so that screen readers another compatibility devices know that this is an unordered list and what we'll do the list items uh will have a classic container list item and along with the text which contains inside it will also have a popover div which contained inside the li and this will have container pop over a class of that and just that we complete have a completed list just for the first column we'll copy these over again they follow the same structure li same class div with popover and the actual text of the li and again no different for the last two list items no different for them again you know code pen if this confuses you but hopefully you should already know if you're watching this tutorial i expect you to already know and you probably should if you've gotten this far anyway like the basics html etc and you obviously that's not going to look that's not going to look good at the moment because you haven't started anything so as for as for removing the full stop again we'll only style the container list within the container block with a modifier of flex and we'll set the list style to be none so that should remove the bullet point as you can see it does and as for the container list item the color so the text color will be a sort of grayish color uh and we'll just copy this you know because again we're copying a lot but we want to we don't want to waste your time so so 0.9 uh relative units for the top and bottom margin and we'll set the position to be relative you'll see why later on as for now though what we'll do we'll create a modifier class we'll be using at the moment but we'll use it later on and all this does is simply simply change the color to be something else to be um well as you can see a more purple color um what we'll now do is we will replace the bullet point uh that we removed and we'll replace it with a sort of tick and the way that we'll do this is with the before pseudo element that's what the chord so you add two colon cyclones onto the end and then say before and this will be represented as an actual element that is the first child it's always going to be the first child of the class of the element that you decided to use the pseudo element on the before suit element on the content will be nothing so no text content but as for the background that will be a url and this u this image this svg image that we're linking to will act as a replacement for the bullet points and we'll say display inline blocks that it can be displayed next to next to the text and not below it which is what we would use which is what would happen if this was block the default value for display and because this is the first child this will be displayed to the left of the text because it's before so before the text or anything inside of the container list item so obviously we need to give it a some dimensions that we can actually see the image and then we'll set margin right to push the text to the right more away from this image and this currently won't work at the moment because we've still got the pop-up and this is interfering with what we have so what we'll do is we'll style the popover position absolute so based off of this relative list item line height very important again this three setting the line height now will become very important later on but not so important at the moment just trust me that it's very important that we do this so left we use minus uh units to move it more towards the left if we use positive then we would move it towards the right uh in this for this left property anyway and same with this so we're using minus to move it more towards the top and then we'll set the quality black to overwrite the grayish color that was set on the list item background color will be white get some border radius to round off those edges and then we'll say padding 15 pixels on top and bottom 20 pixels uh left and right box shadow again i'm just going to copy this again it'll be too long for me to write that out or by myself again codepen transition transition or elements and we'll have ease and ease out on that and then we'll set opacity 0 and transform to be 0.5 but we're going to comment this out at the moment this will simply be the starting state of the transition because we will transition both to the opacity and the transform property later on but we'll comment down now so that you can actually see the pop-over element that we've created and the transform origin which will be the center of where the transform applies to so by default the scale applies to the top left which is the origin of our elements we will set it to be eight pixels away from the right side away from the left edge to the right it's 8 pixels to the right from the left edge 100 so essentially the transform origin which will be the center of what will be the anchor point essentially of the transform property uh will be the bottom edge of the elements and eight pixels away from the left edge of it so i hope that makes sense so now if you go back as you can see you can see everything again it doesn't look good at the moment uh and that's because they're all appearing at once and that never happens on the finished application it will appear uh one after each other when we hover over that we hover over the associated list item so lastly what we'll do is we will create the arrow that points downwards towards the bullet point again you can only use what's towards the tick now uh which is which you created as a placement for the bullet point and the way that we do this again we use another before soda element set the content to be nothing position will be absolute so it's absolute based on the pop over and then what's up left 15 pixels towards the light the way from the left edge bottom we use minus pixels to move at eight pixels actually downwards from the bottom edge already and the way that we create a downward pointing hour in css you just set border top if um and because you want a white arrow then why use white as a color but if you were to use a what if we wanted to create a pointing upwards triangle then we would set this to be border top instead but the rest of this would remain the same with the rest of the border properties would anyway in our case obviously the pixels uh determines how the size of the determines the size of the triangle that you want to create and then we'll do the same for white as well so now we should have as you can see we have a downward pointing arrow so there it is there what we'll now do is we will uncomment this again this yeah so we'll get this weird thing but again we'll solve this uh because we're now done with the css we're now done with the styling completely it's now time to go on to the main bulk of this tutorial and that is the javascript file as you can see we're importing the stylesheets already because we don't actually do that on the html file we import them here because we're using style loader for webpack and when we import a style sheet the styling automatically gets applied to the website from the javascript compiling that webpack automatically does for us so that's quite handy the first thing that we would do is we will declare some references two elements loads outside elements as applause which is the reason why we're using crow selector or so we will select all of the list items the ul elements within the container with a modifier of flex and we'll copy this just so that we save some time uh and instead yeah so we'll create a reference to all of the pop over as well pop overs and then after that we will declare a function that will be called immediately straight away on document load so this is us calling it immediately as soon as we created the function inside we'll loop through the array that we should have gotten back from the query selector or and as you can see we're using our function which is fine to use we don't have to worry about platability reasons because of able uh because we have babel included on webpack so that's the reason why i recommended that you use the webpack template and what will do inside won't really make much sense at the moment um but it will make more sense later on we'll set all the displays to be none so refresh we don't get that weird effect anymore uh and you might think that why don't we just set display to be none here and that's a good that's actually a good um that's actually a good question but the reason being it will be explained later on the reason why we do that at the moment i can't really explain it at the moment but just rest assured there is a good reason for this and it will become clearer later on okay and we'll now need to create some global variables like so [Music] um yes this may again all be explained later on again i know this is but i'm doing it like this because just to save time so if you keep on going back and forth then that's going to take longer than is necessary uh if you do it like this although you might not um understand things at the moment [Music] it means that we do get to save some time and and at the toilets already long so what we're doing here we're creating three variables uh and these will all be eventually anyway these will contain dom elements but we're doing we have to do them as global elements because we need to access them within event listeners and stuff uh however they get initialized outside of those event events um event listeners um yeah [Music] but it's outlining the basic structure of these objects well not all them objects but so mouse paths will be well you'll see in a second but that will be initialized um in every single event listener uh and then we'll say that container what content what k two billions now uh and these booleans will just allow things to smoothly work uh make sure that we don't get any errors or anything uh and now what we'll do is the first thing that we'll do is just so that you get uh a bit more of an explanation a bit more of an idea as to what we're actually doing we'll create the mouse movement listener again it's pretty self-explanatory as to every time uh this callback function will be called every time you move the mouse obviously uh and we'll say if popover isn't initialized or if selecting new item is initialized and we will return because otherwise so return and we won't proceed with the rest of the with the rest of the code um contained inside essentially we won't proceed if any of either of these conditions are met however if they are then the first thing that we will do is initialize uh the mouse plus x and y properties so e dot client x will give us the our x coordinates of our of our mouse currently and we'll do the same for the y obviously the y property which we should just created e dot client y obviously and we'll just lock that so that you have a better idea of what's actually going on here so obviously expect console um oh that's true actually yeah this one obviously should have thought about that that won't work obviously because popover is uh uninitialized but yeah obviously this is what we have uh we are getting the x and y coordinates so there you go and because this is a global variable mouse pass we'll have access to these coordinates at any point during our application um see that's good but we will get this back uh now because of the other things that we will be doing so we will loop through all of the all of the list items we'll look for like so and what we'll do we will add a mouse over event listener to every single one of them so mouse over like so and i'll say basically we want we'll say um if either the container is selected if that boolean is set to true or window.inner width is less than 680. that corresponds to pixels but obviously in javascript this just gets returned as a number like so what an integer um so yeah basically we don't want this effect uh on smaller unlike smartphones and stuff so when this media query is mapped we basically don't want this uh we don't want the message box effect at all so the users just won't be able to view the message boxes it's only an effect that is suitable for like desktops and laptops etc because they actually have the mouse to hover over things obviously smartphones they don't have any mouse they can't really hover over anything so therefore it wouldn't make sense for us to make this effect for smartphones so obviously if either these conditions are met then return don't proceed uh with the rest of the code inside of this event quarterback we will initialize event target if these conditions aren't met obviously and we'll set it to be the uh the text elements that we are currently hovering over and we get that from target target is the actual element that triggered the event in the first place and then we'll set list item and remember that uh selected class that we created along while back we'll currently add that to our element now and that will change the color of it again i'll just copy it from here just that we can save time this will change our color to be our text to be purple remember purple with that color there uh what we'll then do is we will create a function that we will call quite often actually um [Music] yeah we'll call this function quite often every time we initialize a list item and what it would do is it will initialize the other these other elements based off of the list item uh you'll see what uh how this works in a second so first of all we'll work out the offset pause so we'll say offset pause.x list item which has now been initialized because it will be called um here [Music] so after list item has been initialized so we'll say list item dot offset left so how offset is it based on it's um based on its apparent element which is container list if you can see so it's not a container list it is the actual it's it's uh container section sign because there we go this is position relative and so this is its closest parent uh element that is actually positioned sorry about how far away from the left edge of its container is it essentially and so we'll store that in offsetpods.x and then as for y [Music] that will be the same except we'll say offset top instead and what i need to do is we'll do the other properties and this will be offset left of the list item yeah we did it on one line just like we don't bloat things out artificially uh plus the actual width of it [Music] so basically this is his right edge offset le offset left is obviously just the left edge but if we add this to the client width it's actual width of the element then this will be the right edge offset obviously that's just basic logic and we'll need to do the same for the height using the same principle so offset offset top and then client height again that's that should be that shouldn't be uh too difficult and then we'll need to get access to this actual um container section and because these list items uh are two they're two uh child uh elements down so we go up one parent element and then we go up again and then we'll get access to the container section that this uh container list is actually nested inside of so we'll get access to it very simply like so equals list item parent and meant dot pant element so that's how we use uh parent and get the pad element of the parent element essentially and then we'll get we'll get access to it and then finally we'll initialize the popover and we'll do that like so you can use query selector to get access to it because popover is contained is a direct child of the list item so you can just do it very simply like so there you go once you've initialized these global variables we can say just in case i mean it's very unlikely but if we made a mistake in our uh in our markup file if we made a mistake there then maybe pop over it doesn't actually exist on the dom if that's the case that we need to return to prevent any errors from occurring because we are actually going to work with popover now so if it's uninitialized then we'll get an error uh for these for these lines where he tries to access style etc and we'll set it to be block is what we'll do because um obviously we need to be able to view it and obviously it's set to none uh at the very start here and for us to be able to even begin animating it then um obviously we need to set it to be blocked because otherwise you'll be able to see the animation and that and then we'll set uh container selected to be true so that none of the mouseovers will work after the initial mouse over has happened because of this if condition here at the top so that and then what we'll do to actually animate it i'll just copy this because it's taking a while i know it's tutorial again all my tutorials are long but they're long for reason because they're not exactly the most uh lightweight should we say tutorials are not very basic kind of intermediate but anyway to animate it because remember it's scale not point five here well setting this to be one we'll animate it from 0.5 to one and same as i know here yes animate not for five to one here and same with opacity it'll go from zero to one uh well actually actually i know this won't work but what i'm talking about essentially yeah so what what's happening here is it's not actually working and the reason being is because we need to include this in a timeout because basically what's happening is that because we apply the because we change the display at the same time that we change uh these other properties that you want to transition it means that these don't actually happen okay and just before i get ahead of myself i did actually notice an hour there that should be double underscores as uh is the bem proper naming convention so now when we hover over this as you can see we are getting uh the very first um okay just ignore that again we'll solve this we will solve these problems later on but we are getting the message box to actually appear um however they're not animating in and the reason why they're not animating in is because the display is being changed at the same time as these transition properties and basically because the display property isn't we're not able to transition it it means that because because it happens at the same time it means that these transitions don't actually happen because the display just uh prevents the other ones from happening so what we'll do is we'll in a set timeout method it can be zero milliseconds it doesn't matter it just slides literally an almost non-existent delay but still a delay nonetheless it will actually get things to work so now as you can see uh what's actually working now which is good for start obviously how do we get what what once it's animated in there's nothing we can do now because of this container selected well it never gets set to false again so you know this will never be caught ever again basically at the moment so how do we select other things and how do we deselect uh our initial selection well what we will do is we will need to create a well first of all actually we'll need to initialize our mouse plus properly because at the moment this isn't in relation to our container selected sorry our main container section uh which is what all of our values stored in the offset parts is uh in relation to so what we'll need to do is we'll need to subtract main container section which we can do by the way because remember this will only be chord if popover is initialized and pop over can only be initialized if set globals is met where main container section was initialized so we'll subtract offset left so now the mouse pass will be stored in relation to the main container section so our mouse pause and our offset will actually be position in relation to the same thing which is something that we need and we'll need to do is on for the y axis as well obviously there's no different just offset top instead then we'll also subtract window.scroll y and the reason we'll do that just in case uh they're viewing it like with a horizontal scroll bar like so just in case you know they're scrolling because otherwise if we don't do this and it won't take into account our scroll our vertical scroll uh so yeah it's important that we include that but anyway once that is done we will create some if statements and they will detect whether or not we have hovered too far up away from our current selection or too far down or whether they've moved towards the sides to not select anything else so what we'll do we'll say if mouse parse not y is less than offset pars dot y minus 10 and remember i've set pass.y is the top edge of our current list item selection and we're subtracting 10 so we're saying 10 pixels up from that so if it's less than that and mousepause.x is greater than the left edge so it was still within the horizontal boundaries of the li element uh and we also need to set consider it less than uh sorry not offset oh my god that would that would cause an hour inside yes offset pause dart with uh then we at the moment we'll just log something obviously we're gonna we're not we're actually gonna do something proper later on but for now we'll just log yes so that we can see so we can test that things are working so we highlighted this yes and then we're getting yes now because we we hovered up uh and we're still within the horizontal boundaries of our list item as you can see i'll show you again if we hover over and then go to site and then go up we're not getting yes anymore because we moved towards the towards the side way too much so that's one of the if conditions and returns that if this is met then nothing below is uh ever chord uh we'll get rid of this now because we know that it's working as for this one this will be the same difference is that this will be if we move too far down if we move too far down then offset yeah this will be height instead plus 10 and the final if condition will be if we move too far towards the side towards either of the sides so we'll say mouse dot x is less than offset x or so that this is as we move too far towards the left and then if we move too far towards the right then this will be true and well we don't need return because we'll there won't be anything below this if condition to record in the first place so now what we'll do we'll need to create a function that gets called in these three if conditions if they're met so what we'll say [Music] select an adjacent list item and then have a single argument like so and inside the first thing that we would do is we will set selecting new item to be true whoops so we set this to be true so that when until this is meant to insert until this is set back to false again nothing in the mouse move event uh listener whatever be called because this if condition would be met immediately and what we'll do is we will set the uh the basically what animate the current pop-over out and we'll do that by setting it back to its original values both of its opacity and it's uh transform so that's that transformative opacity so we will do that and we'll also initialize we'll get because we're going to reinitialize pop over again very shortly but we'll get access um see what to what it is currently with uh what we're doing here that'll be contained let pop over local variable and then what we'll do so the animation is 0.15 of a second which is the same as 150 milliseconds so when the animation is done so 150 milliseconds we will say old popover dot style dark display and we'll set that back to none so that it doesn't interfere with anything ever again unless we quickly go back to the old popover and we know that to be the case if i'll pop over if the current population is the same as i'll pop over if that is the case if we quickly gone back and forth then we don't want to do this because otherwise it will just mess things up so i hope that makes sense but anyway our first condition will be if direction is set to clear and this will be the case if this last uh this last if condition is met so actually right out here and we'll do the same for the other ones now as well this one will be up this one will be down so yeah we'll do it like that if that is the case then all we'll do is we will call a function where all the global variables are reset to their initial values so we'll actually do what we'll create this method right now oh yeah as well we'll also set the list item to remove the current selected um class they should have applied to it remember it should have it applied to it from from here and also we'll set it in this method as well just hold on so yeah we'll move that and then we'll copy these set them all back to initial values um obviously we need to move the left because we're not redeclaring the local variables we're literally just resetting all these blacks are initial values global variables so yeah if that is met then we'll just call that method and then we'll say return so don't call if this is if this is met then don't um activate any code that that comes after this however if the direction isn't clear then it's obviously it's either up or down in which case we will you know we'll do we'll copy this because we need to move the current selection because we're going to select another element that's either above uh or below this one actually no that's not what we're going to do we will do that later on uh so yeah we'll handle the other case now well one of the one of the other cases and that's up if the direction is uh so we'll say if basically up could if we are currently selected like the top one like here then obviously we go up and there's no um we go up then there's no more items to select above this one so if that is the case i know that's the case if list item dot previous element sibling if we know that if that is false or sorry undefined sign which corresponds to bank operator if that is the case then again we'll reset everything because there's nothing more to select and then we'll return so i never caught anything that comes after this um if that isn't the case and actually is something above this one that we need to select then then we will remove the current selection um which also gets happening in here as well but obviously we don't we're not going to reset all our global variables here and then what we'll do is we will initialize this item to actually be the previous element sibling so the one that comes before which we know to exist because this wasn't matte and then we will add this now to our new to our new list item and then we will set labels because as i said before this always gets called after every time we set our list item uh and then again we need to just make sure that there is a pop over for this list item just just uh for error checking to make sure that everything's safe basically uh and yeah because we will be dealing with pop over now immediately uh and how we'll be dealing with it what again we know we'll just animate it in which you've already covered um how we're doing that here so we'll just copy that from there and then finally we will set selecting the item back to be false at the very end of this so that we can get our mouse move event listener to continue working and then return so that never caught anything after this and finally for down it will be very simple we'll just copy up but we will make some changes just very minor changes instead of previous element sibling it will be next so we'll place this like so next element sibling uh and yeah this should be this should almost be the entire tutorial if we yeah just ignore that yes so this should be this is uh yeah we can go back and forth like this so this is the effect essentially but again oh you know how we're going to deal with this because this is a different height uh because the height and the heights are of none of these heights of the message boxes they're not set because we can't set them because obviously we don't know how many lines of text they're going to be so what we need to do is calculate the um the height based on the number of lines that there are and then we need to set to the offset top so that they are actually in the correct place regardless of whether it's two lines one lines or three lines etcetera and i believe on smaller widths they actually yeah sometimes they bulk up to more lines so what we need to do is uh remember this um remember at the very top the this function that we created at the very start what what we need to do is we need to store the height of the pop over and very simply we do that pop over dot client height and then we minus 20. the reason why minus 20 is because we want to take into account that the padding that's applied to the text and yes we want to take this into account essentially the padding so we subtract 20 uh from the client height and so that should take the padding into account and then but unfortunately this one this won't uh have any effect and the reason why it won't have any effect is because the client height on elements that are currently set to display none uh it would just initialize to zero so what we need to do is just for a split second well just before just for this uh line of code here we will set everything back to display block again users won't even be able to see this happening because it will never get rendered because it happens way too quickly and i also need to set um all of this to be scale one as well so that so it's full uh scale again just trust me on this it does work um and then we'll need to set transition to be nuns that happens instantly it goes to its full full uh width and height immediately with no transition and then once we stored the height we need to set everything back so that obviously things are back to what they were beforehand so again we'll just copy this this will be go back to 0.5 and then this will just be removed entirely so it will go back to its tracking normal transition as defined by its class and not in lines to inline styling and the way that we work out the number of lines that there are is we will say let lines equals math.floor so always round down so 1.1 will round down to just one uh and then we'll say height divided by 20 20 is line height remember so that's where you get that from so this should tell us the number of lines that we have um yeah and then what we'll say we'll say let's offset top equals we need to set this to be minus so i've worked out that basically one line needs 55 minus 55 pixels of padding um but lines after that they need uh minus 20 so two lines needs minus 75 which is the reason why most of them are working because most of them are two lines and we already set uh minus 75 pixels uh top offset on our class already so what i'll say is we'll say plus lines minus one multiplied by twenty line minus one because remember it needs to be 55 pixels for one line obviously if it's one line then it'll be plus 20 but we don't want that so we'll say if it's just one line then this will go to zero uh but if it's two lines then this will go to 20 et cetera so that's how this works and then finally [Music] i know this is a long tutorial guys but hopefully we got there in the end just message me uh in the comments box below if you had any if you got stuck at any point during this tutorial and the code pen uh the codepen page wasn't enough to help you then i would be very glad to help you in the comments box below but anyway lastly we use backticks because we can using webpack and we'd like to worry about compatibility and then we'll set the top offset to be whatever's contained in here and then we'll use pixels we'll use that value as a pixel unit so yeah anyway so this is everything's working now as you can see this automatically uh works now because of what we did and yeah everything's working uh just real quick i'll just copy the other an ordered list from the completed project and we'll just copy it in so that we have a completed project so we'll copy them in like that and then here we go so as you can see all of this is working three lines two lines okay there's no one line to be fair but all this is working either way uh and yeah this is we have again no message boxes here because of what we did with the window uh and because by this point we're getting onto mobile widths so we don't have it the effect there but anyway i hope this tutorial helped you i hope you learned something from it um please like and subscribe because i put a lot of effort into this tutorial and i greatly appreciate any help that you might be able to give me plus it doesn't cost you anything but more importantly have a great day guys and peace out

Channel: Qixotl LFC

Views: 93

Rating: 5 out of 5

Keywords: qixotl_lfc, Qixotl, LFC, how to create popup message boxes on website, javascript popup message boxes tutorial, how to create message boxes in javascript css, javascript, popup message boxes tutorial, hover over message boxes in javascript tutorial, how to create hover over message boxes in javascript css

Id: upy2ojXEhbQ

Length: 59min 10sec (3550 seconds)

Published: Sat Aug 28 2021