Lately, I've noticed a new technique being used more frequently on websites, but I can't seem to find information on what it's called. The layout consists of a first section that fills the entire width and height of the frame, yet allows users to scroll down to view additional content.
For an example of this technique in action, check out:
Can this effect be achieved using just HTML and CSS, or is Javascript required? Any guidance would be greatly appreciated!
While the previous answer provides some insight, it is important to consider the JavaScript component involved in this scenario. The webpage mentioned utilizes jQuery to execute functions like the one outlined below:
function adjustBannerSize() {
windowHeight = $(window).height();
windowWidth = $(window).width();
var bannerHeight = $(".banner > div").height();
if (windowWidth >= 768) {
$(".banner.home, .banner.project").css({ 'height' : windowHeight + "px"});
$(".banner.home > div, .banner.project > div").not(".imgproject").css('padding-top', parseInt((windowHeight - bannerHeight) / 2));
} else if (windowWidth >= 480 ) {
$(".banner.home, .banner.project").css('height','485px');
$(".banner.home > div").css('padding-top','183px');
$(".banner.project > div").not(".imgproject").css('padding-top','150px');
}
else {
$(".banner.home").css('height','312px');
$(".banner.home > div").css('padding-top','105px');
$(".banner.project").css('height','420px');
$(".banner.project > div").not(".imgproject").css('padding-top','105px');
}
};
This function dynamically adjusts the size of the content within the banner div based on specific screen size categories. To fully understand this process, I recommend examining the page source code and reverse engineering it to uncover the solution. When encountering a feature on a webpage that interests you, utilizing developer tools such as F12 in IE, Chrome's dev tools, or Firebug in Firefox can help dissect the source code and gain insights into its implementation. My advice to you is to investigate the page thoroughly and determine the approach that best addresses your issue.
These CSS properties are being used to set the background size for the initial <section> element:
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
To learn more about this technique, visit: http://css-tricks.com/perfect-full-page-background-image/
In order to ensure that the first div spans the entire width of the window, assign a 100% width to it, and then give the subsequent divs an 80% width so they fit within the remaining space.
For example:
<div style="width:100%">
/* content spanning full width */
</div>
<div style="width:80%">
/* content spanning smaller width */
</div>
To achieve this task, it is necessary to reset your CSS styles.
For instance:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
You do not have to adhere strictly to these rules; you can create custom CSS resets based on the specific elements you intend to use.
Now, let's examine the following HTML structure:
<html>
<head>
</head>
<style type="text/css">
html,body
{
margin:0px;
paddng:0px;
height:100%;
Width:100%;
background-color:black;
vertical-align: baseline;
}
#browserSize
{
color:White;
background-color:blue;
font-size:25px;
}
</style>
<body>
<div id="browserSize">
This fills up the entire browser window
</div>
</body>
</html>
You can save the above code in an HTML file and view it in a web browser.
In this example, I simply removed margins and paddings for the HTML and body elements,
allowing the main div (browserSize) to extend across the full width of the browser window.
About My Current Project For my latest project, I decided to work on a basic HTML canvas without using any frameworks. To ensure type checking and because of my familiarity with it from React projects, I opted to use Typescript. Below is the simple HTML ...
In my current version of Edge, I am facing an issue where the empty attribute selector is not functioning correctly. You can find more information about this problem here. The selector I am using is: [ct-validation]:not([ct-validation=""]) { border-col ...
I am working on an ejs file where I need the user to input their username into a form. I will then use this username in a .get request to perform certain logic. However, I am encountering an issue where the username is showing up as undefined. Here is a s ...
I’m looking to have my images fully fill the CardMedia component. However, because they are of varying sizes, some end up being cropped like this: https://i.stack.imgur.com/JHIrT.png Additionally, when resizing the images, some get cut off as well: ht ...
When presenting the user with a choice between two links, I want them to be able to select either one and have it navigate to the corresponding destination. However, in my current setup, no matter which line they click on, it always redirects to the first ...
After extensively searching through over 20 similar posts, I have not been able to find a solution that works for my specific issue. The layout of some content I'm working with resembles the example provided here: Check out the Fiddle Example In th ...
Looking for some help on how to create two links that, when clicked, will scroll a hidden <div> up to fill the full height of its parent container. I've been having trouble with the element using the full height of the <BODY> instead. ...
I've been staring at this problem for a while now, attempting every possible solution to resize images and maintain aspect ratio, but none seem to work in my case. Here are two images that I manually resized so you can view them side by side: highly ...
In the center, there is a div with content inside. I want the top and bottom divs to occupy the remaining space. Similar to this example <div class="container"> <div class="top"> </div> <div class="middle"> C ...
Seeking assistance with a dilemma involving the use of Orbit Controls with Multiple Overlapping Scenes. To showcase the issue, I made adjustments to the example found at multiple scenes and developed a test specific to my needs. The code can be accessed h ...
I've been working on a project to create a web scraping tool using Python, Selenium, beautifulSoup, and pandas to generate a .csv report. Unfortunately, I'm facing an issue with extracting the "data-date" text from the HTML snippet below. Specif ...
I have a JavaScript function that controls the display of a popup window based on its visibility. The function used to work perfectly, with the close button effectively hiding the window when clicked. However, after making some changes to the code, the clo ...
I'm currently working with two HTML forms and two PHP scripts. The first form is designed to save a user's email to a .txt file, while the second form is a Stripe payment form that processes payments using PHP code. However, I've encountere ...
Take a look at this code snippet: http://jsfiddle.net/zygnz/1/ <div class="container"> <div class="left"> LEFT </div> <div class="right"> RIGHT </div> </div> Is i ...
Is there a way to create a text box that shows a hint when clicked on? For example, you can see this feature by clicking on the address text box in the following link: ...
Have you noticed that this input button appears perfectly centered in Chrome, but in IE or Firefox it seems to be off to the right? You can see it as the second button on the right side of this page: Site : HTML : <div style="float:center;text-align: ...
My goal is to display the HTML page in a browser while containing the content within the dimensions of an A4 size page. Additionally, when printed, the HTML page should be formatted to fit onto A4-sized paper pages. <div classNa ...
As a newcomer to the world of React.js, I find myself unsure of how Bootstrap integrates with React. While researching, I came across npm packages like reactstrap and react-bootstrap, but I still don't quite understand. The HTML code seems to be gene ...
Currently, I have a collapsible side navigation whose height is unknown, with a div underneath it. The goal is for the div to change its position to 'fixed' when scrolled to its bottom. I have successfully achieved this functionality; however, I ...
I am looking to display the count result from my count.php on my index page. I want to automatically count the number of rows in the user_code table and show the result on the index page every time it is visited. However, I am facing an issue where the AJ ...