Just Jolly Functions
Functions: Adding a Banner with HTML, CSS, and JavaScript
This code creates a simple, customizable banner that appears at the top of the page. It includes a message and a close button. Users can personalize and customize various aspects of the banner using HTML, CSS, and JavaScript.
Key Features:
Fixed Position: The banner stays at the top of the page as users scroll, ensuring visibility.
Close Button: The banner can be closed by clicking the close button, allowing users to dismiss it once they’ve read the message.
Easy Customization: Through simple changes in the HTML, CSS, and JavaScript, you can adjust the banner's design, content, and functionality to suit your needs.
Tip: Learn how to Insert HTML Code into Your Post.
Banner Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Banner</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* Banner Styles */
.banner {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 20px;
font-size: 20px;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
.banner p {
margin: 0;
}
.banner button {
background-color: transparent;
color: white;
border: none;
font-size: 18px;
cursor: pointer;
padding: 5px 15px;
}
/* Close button hover effect */
.banner button:hover {
background-color: rgba(255, 255, 255, 0.2);
}
</style>
</head>
<body>
<!-- Banner HTML -->
<div class="banner" id="banner">
<p>Welcome to my post! Enjoy reading.</p>
<button onclick="closeBanner()">Close</button>
</div>
<script>
// JavaScript function to close the banner
function closeBanner() {
document.getElementById('banner').style.display = 'none';
}
</script>
</body>
</html>
Explanation of the code:
1. HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Banner</title>
<style>
/* CSS code here */
</style>
</head>
<body>
<!-- Banner HTML -->
<div class="banner" id="banner">
<p>Welcome to my post! Enjoy reading.</p>
<button onclick="closeBanner()">Close</button>
</div>
<script>
// JavaScript function here
</script>
</body>
</html>
<html lang="en">: Specifies the language of the document as English.
<meta charset="UTF-8">: Specifies the character encoding for the document, ensuring it supports a wide range of characters (UTF-8).
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures the page is responsive on mobile devices.
<title>Banner</title>: Sets the title of the page, which appears in the browser tab.
2. CSS Styles
The styles are applied inside the <style> tag in the <head> section.
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
This CSS rule removes default margin and padding for the body element and sets the font to Arial (or sans-serif as a fallback).
/* Banner Styles */
.banner {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 20px;
font-size: 20px;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
.banner: Targets the banner div.
background-color: #4CAF50;: Sets the banner's background color to a green shade (#4CAF50).
color: white;: Makes the text color white.
text-align: center;: Centers the text inside the banner.
padding: 20px;: Adds padding inside the banner for spacing.
font-size: 20px;: Sets the font size of the text inside the banner.
position: fixed;: Positions the banner at a fixed position on the screen, so it stays at the top even when scrolling.
top: 0; left: 0;: Positions the banner at the top-left corner of the page.
width: 100%;: Ensures the banner stretches across the entire width of the page.
z-index: 1000;: Makes sure the banner stays on top of other page elements.
display: flex;: Uses Flexbox layout to position items inside the banner.
justify-content: space-between;: Distributes space between the message and the button.
align-items: center;: Vertically centers the items inside the banner.
.banner p {
margin: 0;
}
.banner p: Removes any margin around the paragraph tag inside the banner.
.banner button {
background-color: transparent;
color: white;
border: none;
font-size: 18px;
cursor: pointer;
padding: 5px 15px;
}
.banner button: Styles the button inside the banner.
background-color: transparent;: Makes the background of the button transparent.
color: white;: Sets the button text to white.
border: none;: Removes the border around the button.
font-size: 18px;: Sets the font size of the button text.
cursor: pointer;: Changes the cursor to a pointer when hovering over the button, indicating it's clickable.
padding: 5px 15px;: Adds padding inside the button for spacing.
/* Close button hover effect */
.banner button:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.banner button:hover: Adds a hover effect to the button.
background-color: rgba(255, 255, 255, 0.2);: Changes the background color of the button to a slightly transparent white when the user hovers over it.
3. HTML Banner Content
<div class="banner" id="banner">
<p>Welcome to my post! Enjoy reading.</p>
<button onclick="closeBanner()">Close</button>
</div>
<div class="banner" id="banner">: This is the main banner container with a class of banner and an id of banner.
<p>Welcome to my post! Enjoy reading.</p>: This is the text displayed inside the banner.
<button onclick="closeBanner()">Close</button>: This is a button with the text "Close" that, when clicked, triggers the closeBanner() function.
4. JavaScript Function
function closeBanner() {
document.getElementById('banner').style.display = 'none';
}
function closeBanner(): This is a JavaScript function that will be called when the "Close" button is clicked.
document.getElementById('banner').style.display = 'none';: This line of code hides the banner by setting its display style to none, effectively removing it from the page.
Summary:
The HTML defines the structure of the page and the banner.
The CSS styles the banner to make it fixed at the top, visually appealing, and responsive.
The JavaScript enables the functionality to hide the banner when the "Close" button is clicked.
This results in a banner that appears at the top of the page, displaying a message and a button to close it when clicked.
Banner Modifications:
You can modify various aspects of the HTML, CSS, and JavaScript. Here's a breakdown of what you can adjust to customize the banner:
1. Customizing the Text
To change the message displayed in the banner, modify the text inside the <p> tag within the div.banner.
Example:
<p>Welcome to my amazing website! Enjoy your stay.</p>
2. Customizing the Banner's Background Color
To change the banner's background color, modify the background-color property in the .banner CSS class. You can use any valid color code (e.g., hex, RGB, color names).
Example:
.banner {
background-color: #FF5733; /* Change to a different color */
}
This will change the background color of the banner to a red shade.
3. Customizing the Text Color
To change the text color inside the banner, modify the color property in the .banner CSS class. This will affect the color of the text (currently white).
Example:
.banner {
color: #333333; /* Change text color to dark gray */
}
4. Customizing the Font Size
To change the size of the text, modify the font-size property in the .banner CSS class.
Example:
.banner {
font-size: 24px; /* Increase text size */
}
5. Customizing the Close Button
You can customize the close button’s style, such as changing its color, size, or even the hover effect.
Example:
To change the close button's background color when hovered:
.banner button:hover {
background-color: rgba(0, 0, 0, 0.2); /* Darker background on hover */
}
To change the button's text color:
.banner button {
color: #FF6347; /* Change to tomato red */
}
6. Customizing the Position and Size of the Banner
If you'd like to change the position or size of the banner, adjust properties like top, left, width, and padding in the .banner class.
Example:
.banner {
position: fixed;
top: 50px; /* Adjust the distance from the top */
left: 0;
width: 100%;
padding: 15px; /* Reduce the padding */
}
7. Customizing the Close Functionality
To customize how the banner closes, you can modify the JavaScript function that hides the banner. For example, you can use a fade-out effect instead of instantly hiding it.
Example (Fade-out Effect):
function closeBanner() {
const banner = document.getElementById('banner');
banner.style.transition = "opacity 0.5s";
banner.style.opacity = 0;
setTimeout(function() {
banner.style.display = 'none';
}, 500);
}
This will create a smooth fade-out effect when the banner is closed.
8. Customizing the Button Label
To change the text on the close button, modify the text inside the <button> tag.
Example:
<button onclick="closeBanner()">Dismiss</button>
Summary of Customization Options:
Change text: Modify the <p> tag content.
Change background color: Modify background-color in the .banner CSS.
Change text color: Modify color in the .banner CSS.
Change font size: Modify font-size in the .banner CSS.
Change button appearance: Modify styles in .banner button.
Change position and size: Modify top, left, width, and padding in the .banner CSS.
Change close functionality: Modify the closeBanner() JavaScript function for custom behavior.
By adjusting these properties, you can personalize the banner to fit your post’s design and functionality needs.