Creggd1
Content Velocity Specialist
LEVEL 1
300 XP
Introduction:
This part is the second and final part of my notification box tutorial in which we will be styling the HTML we create in part 1, and adding Javascript functionality to the close box.
CSS:
First we want to set our CSS area in our HTML file...
Now we want to style the elements. outerBox will have a full width, minimum height of 80 pixels, and a black background colour...
.innerBox will set the area for the message and content, which is within 980 pixels to the center of the screen...
.innerBox #information will have some basic font styling properties...
And finally, the close box will be styled to look like a box. The 'X' text is already written within the HTMl of our page...
Javascript:
Finally we want to write the 'close' box Javascript function. First we add an inline event listener to the HTML close box to run a new function we are yet to create named 'closeBox'...
Next we want to write our Javascript area underneath our CSS style area...
Now we want to write our 'closeBox' function. First it gets the HTML notification box via it's ID, then it sets its visibility to 'hidden', simple...
Finished!
Download
This part is the second and final part of my notification box tutorial in which we will be styling the HTML we create in part 1, and adding Javascript functionality to the close box.
CSS:
First we want to set our CSS area in our HTML file...
Now we want to style the elements. outerBox will have a full width, minimum height of 80 pixels, and a black background colour...
- .outerBox
{
- width
:
100%
;
- min-height
:
80px
;
- background-color
:
#2e2e2e
;
- }
.innerBox will set the area for the message and content, which is within 980 pixels to the center of the screen...
- .innerBox
{
- width
:
980px
;
- margin
:
0px
auto
;
- position
:
relative
;
- }
.innerBox #information will have some basic font styling properties...
- .innerBox
#information
{
- font-size
:
16px
;
- text-align
:
center
;
- font-family
:
Verdana;
- color
:
#ffffff
;
- width
:
100%
;
- margin
:
0px
auto
;
- }
And finally, the close box will be styled to look like a box. The 'X' text is already written within the HTMl of our page...
- .innerBox
#close
{
- width
:
40px
;
- height
:
40px
;
- text-align
:
center
;
- position
:
relative
;
- top
:
0
;
- right
:
0
;
- color
:
#2e2e2e
;
- background-color
:
#ffffff
;
- }
Javascript:
Finally we want to write the 'close' box Javascript function. First we add an inline event listener to the HTML close box to run a new function we are yet to create named 'closeBox'...
Next we want to write our Javascript area underneath our CSS style area...
Now we want to write our 'closeBox' function. First it gets the HTML notification box via it's ID, then it sets its visibility to 'hidden', simple...
- function
closeBox(
)
{
- var
notificationBox =
document.getElementById
(
'notificationBox'
)
;
- notificationBox.style
.visibility
=
'hidden'
;
- }
Finished!
Download
You must upgrade your account or reply in the thread to view hidden text.