What are the steps to effectively utilize <ul> for showcasing scrolling content?

I stumbled upon and found it to be a great inspiration for my project.

I tried replicating the layout of the listed items on the site: 

.wrap {
    display: block;
    list-style: none;
    position: relative;
    padding: 0;
    margin: 0;
    border: 0;

    li {
        background-color: green;
    }
}

.content {
    margin: 0 auto;
    max-width: 66rem;
    width: 90%;
    padding: 0;
    border: 0;
    position: relative;
}

.right-details {
    display: inline-block;
    float: right;
    box-size: border-box;
    width: 33.33333%;
}

.left-img {
    display: inline-block;
    float: left;
    box-sizing: border-box;
    width: 66.66666%;

    img {
        width: 50px;
    }
}
<ul class="wrap">
    <li>
        <div class="content">
            <div class="left-img">
                <img src="/assets/img/macbook-image.png"/>
            </div>
            <h2 class="right-details">
                Item 1
            </h2>
        </div>
    </li>
    <li>
        <div>
            <h2>
                Item 2
            </h2>
        </div>
    </li>
</ul>

However, the first <li> seems to vanish.

How can I showcase my content in a continuous scroll format like ? Am I following the correct approach as seen on the website? Any tips or advice on mirroring it more effectively would be highly appreciated.

javascripthtmlcss

Answer №1

It is recommended to utilize min-height:100vh over height:100vh;. Feel free to view my fiddle

// To select all elements with data-background attribute
var lis = document.querySelectorAll("[data-background]");
// Create an empty array
var heights = [];
// Utilizing a for loop to iterate through the lis array
for(var i = 0; i < lis.length; i++){
  // Get the element's distance from the top
  var distanceFromTop = lis[i].offsetTop;
  // Obtain value from data-backgrount attribute
  var background = lis[i].getAttribute("data-background");
  // Add background and distance to heights array
  heights.push({background: background, distance: distanceFromTop});
};

// Check if page was scrolled
window.addEventListener("scroll", function(evt){
    // Find the user's distance from the top on scroll
var distanceFromTop = this.scrollY;
 
  // Iterate through distances in heights array
  heights.forEach(function(height) {
    // Check if user reached another checkpoint
    if(height.distance < distanceFromTop) {
            // Change the background to the value obtained from data-background attribute
document.body.className = height.background;
    }
  });
});
body {
  transition: background-color .8s ease;
  -webkit-transition: background-color .8s ease;
}

body.blue { background-color: #39f; }
body.red { background-color: #FF351A; }
body.dark { background-color: #222; }
body.yellow { background-color: #fd3; }
body.deep-blue { background-color: #417ABA; }
body.white { background-color: #fff; }
body.beige { background-color: #F7D693; }

li {
  min-height: 100vh;
  list-style-type:none;
}
<body class="blue">
  <ul>
    <li data-background="blue"></li>
    <li data-background="red"></li>
    <li data-background="dark"></li>
    <li data-background="yellow"></li>
    <li data-background="deep-blue"></li>
    <li data-background="white"></li>
    <li data-background="beige"></li>
  </ul>
</body>

It is advisable to use min-height:100vh rather than height:100vh;. Don't forget to take a look at my fiddle

Answer №2

To simplify things, using height: 100vh; is the most straightforward approach as it represents hundredths of the viewport height (learn more at quirksmode.org).

body, ul, li {
  height: 100%;
}
li { height: 100vh; }
ul { list-style-type: none; }
.a { background-color: red; }
.b { background-color: yellow; }
.c { background-color: black; }
.d { background-color: green; }
.e { background-color: orange; }
.f { background-color: pink; }
<body>
    <ul>
        <li class="a"></li>
        <li class="b"></li>
        <li class="c"></li>
        <li class="d"></li>
        <li class="e"></li>
        <li class="e"></li>

    </ul>
</body>

However: This method is not compatible with IE versions less than or equal to 10 and Android versions less than or equal to 4.3. (see: caniuse).

On their website, minimill uses two <ul> tags:

  1. <ul class="backgrounds"> which has a position: fixed (clearly named classes);
  2. <ul class="sections"> which contains the actual content of the website;
  3. and the key factor for making this setup work: .sections li with padding: 16rem 0 0; (equivalent to padding-top: 16rem;). Customized according to their image requirements.

Check it out here:

body, li, ul { /* RESET */
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
}
html, body { height: 100%; }
body {
    line-height: 1.5;
    position: relative;
}
ul { list-style-type: none; }
.backgrounds {
    height: 100%;
    display: block;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1;
}
.backgrounds li {
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: .5s ease opacity;
    width: 100%;
    z-index: 1;
}
.sections {
    position: relative;
    transition: .5s ease opacity;
    z-index: 2;
}
.sections li { padding: 16rem 0 0; }

.a { background-color: red; }
.b { background-color: yellow; }
.c { background-color: black; }
.d { background-color: green; }
.e { background-color: orange; }
.f { background-color: pink; }
<body>
    <ul class="backgrounds">
        <li class="a"></li>
        <li class="b"></li>
        <li class="c"></li>
        <li class="d"></li>
        <li class="e"></li>
        <li class="f"></li>

    </ul>
    <ul class="sections">
      <li class="a"><p>Lorem ipsum dolor sit amet;</p></li>
      <li class="b"><p>Lorem ipsum dolor sit amet;</p></li>
      <li class="c"><p>Lorem ipsum dolor sit amet;</p></li>
      <li class="d"><p>Lorem ipsum dolor sit amet;</p></li>
      <li class="e"><p>Lorem ipsum dolor sit amet;</p></li>
      <li class="f"><p>Lorem ipsum dolor sit amet;</p></li>
    </ul>
</body>

Additionally, all background transitions are handled with JS.

Answer №3

After reviewing the provided example, it is recommended that the first list item should have a style of height: 100vh;, while the height of the subsequent items will be determined by their content. Additionally, a script has been included to enable scrolling from the first item to the second upon clicking the "Scroll Down" anchor tag.

To see a working example, visit my jsfiddle.

Below is the HTML code:

<ul id="wrap">
  <li>
    <div>
      <h2>Item 1</h2>
      <div id="scroll-down">
        <a href="javascript:void(0)">Scroll Down</a>
      </div>
    </div>
  </li>
  <li id="scrollto">
    <div>
      <h2>Item 2</h2>
    </div>
  </li>
  <li>
    <div>
      <h2>Item 3</h2>
    </div>
  </li>
</ul>

The SCSS code looks like this:

$width: 100%;
$height: 100%;

html, body {
  width: $width;
  height: $height;
  margin: 0;
  padding: 0;
}
#wrap {
  display: inline-block;
  list-style: none;
  padding: 0;
  margin: 0;
  width: $width;
  height: $height;
  li {
    display: block;
    overflow: hidden;
    position: relative;
    width: $width;
  }
  li:first-child {
    background-color: green;
    height: 100vh;
  }
  li:not(:first-child) {
    min-height: 400px;
  }
  li:nth-child(2) {
    background-color: lightgreen;
  }
  li:last-of-type {
    background-color: lightblue;
  }
}
h2 {
  margin-top: 0;
}
#scroll-down {
  position: absolute;
  bottom: 15px;
  width: $width;
}
#scroll-down a {
  display: block;
  text-align: center;
  color: #ffffff;
}

Lastly, here's the JQuery snippet used:

$(document).ready(function(){
  $("#scroll-down").click(function() {
    $('html, body').animate({
      scrollTop: $("#scrollto").offset().top
    }, 1000);
  });
});

Answer №4

The elements you see at consist of two ul's - one for the background color and another for the content display. The ul responsible for the background color has a javascript event listener that adjusts the color based on your window scroll position.

https://i.sstatic.net/C8ETr.png

You are correct in your observation. This page features a significant top padding (16rem = 256px) to center the content, with different css classes applied based on the window size.

https://i.sstatic.net/PWCk2.png https://i.sstatic.net/PWCk2.png

In response to your query, I did experiment with it and found that the first item is visible to me.

Answer №5

When considering what you aim to accomplish on Minimill's site, it ultimately depends on your specific goals. While Minimill does offer a captivating background-color-change feature that uses an event listener, it seems like you may simply be interested in replicating their section layout?

For example:

Section about: We are Minimill
Section about: Redspread
Section about: KPCB
...
...

If all you need is the layout structure seen in these sections, achieving this can be done relatively easily. If you're unfamiliar with how to do so, I recommend looking into Bootstrap, a CSS library that streamlines the process for you. Initially, delving into Bootstrap may seem daunting, but understanding its functionality can save you significant time in the long run.

You also have the option of coding the entire layout yourself, as demonstrated here: https://jsfiddle.net/2awczzcc/2/

Here is the code snippet:

<ul class="wrap">
<li>
 <div class="content">
  <div class="left-container">
   <img src="http://vignette2.wikia.nocookie.net/fantheories/images/4/43/Toy-Story-Theme-Song-6.jpg/revision/latest?cb=20140624192735"/>
  </div>

  <div class="right-container">
   <h2>
   Item 1
   </h2>
   <p>
   Text text text.
   </p>
  </div>
 </div>
</li>
...
... (Repeat structure for other items)
...
</ul>

And the accompanying CSS:

.wrap {
  display: block;
  list-style: none;
  position: relative;
  padding: 0;
  margin: 0;
  border: 0;
  width: 100%;
}

  .wrap li {
    width: 100%;
    clear: both; 
    display: block; 
    min-height: 200px;
    float: left;
    margin: 0;
    padding: 0;
  }

  .wrap li:first-child {
    background-color: green;
  }

  .wrap li:nth-child(2) {
    background-color: blue;
  }

  .wrap li:nth-child(3) {
    background-color: yellow;
  }
  
  ... (Additional CSS rules provided)

Answer №6

Visit jsFiddle for interactive demo
Example HTML Code:

<ul>
<li id="one" data-color="#16A085">
<h2>Section One</h2>
</li>
<li id="two" data-color="#C0392B">
  <h2>Section Two</h2>
</li>
<li id="three" data-color="#ff44AD">
  <h2>Section Three</h2>
</li>
<li id="four" data-color="#f88f18">
  <h2>Section Four</h2>
</li>
<li id="five" data-color="#E91E63">
  <h2>Section Five</h2>
</li>

</ul>

Implementing JavaScript Functionality

$(window).on("scroll touchmove", function() {

  if ($(document).scrollTop() >= $("#one").position().top) {
    $('body').css('background', $("#one").attr("data-color"));
  };

  if ($(document).scrollTop() > $("#two").position().top) {
    $('body').css('background', $("#two").attr("data-color"))
  };

  if ($(document).scrollTop() > $("#three").position().top) {
    $('body').css('background', $("#three").attr("data-color"))
  };

  if ($(document).scrollTop() > $("#four").position().top) {
    $('body').css('background', $("#four").attr("data-color"))
  };
   if ($(document).scrollTop() > $("#five").position().top) {
    $('body').css('background', $("#five").attr("data-color"))
  };

});

Adding Some CSS Styles

li {
  display: block;
  width: 100%;
  height: 100vh;
}
body {
  background: #16A085;
  color: #fff;
  margin: 0;
  transition: all 550ms ease;
  will-change: background;
}

Answer №7

To achieve the desired outcome, simply include height: 100vh; in the LI style and you'll be good to go.

Here's a live example on CodePen, although I had to make some adjustments to the CSS because CodePen doesn't support sass.

If my interpretation of your question is incorrect or if you have different requirements, please feel free to inform me.

Answer №8

To adjust the size of your ul or div, simply specify the desired height and set the overflow property to auto:

<div style="width: 300px; height: 200px; overflow: auto">
  <p>content</p>
  <p>content</p>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transforming XML into Json using HTML string information in angular 8

I am currently facing a challenge with converting an XML document to JSON. The issue arises when some of the string fields within the XML contain HTML tags. Here is how the original XML looks: <title> <html> <p>test</p> ...

javascriptjsonangularxmltypescript

Control the access to shared resources when dealing with asynchronous functions in JavaScript

Currently, I am developing a node.js server script that will utilize a shared text list for multiple clients to access asynchronously. Clients have the ability to read, add, or update items within this shared list. static getItems(){ if (list == undef ...

javascriptnode.jsexpressasynchronousrace-condition

Transferring information via Segments in Ionic 3

I'm facing a challenge where I need to transfer a single ion-card from the "drafts" segment to the "sent" segment by simply clicking a button. However, I am unsure of how to achieve this task seamlessly. Check out this image for reference. ...

htmltypescriptionic-frameworkionic2ionic3

Swapping out video files with varying quality using HTML5 and Jquery

Objective: Implementing a feature to change the video being played when a user clicks a button using Jquery. Example website for reference: (click on the "hd" button in the player control) More details: When the page loads, the browser will play the fi ...

javascriptjqueryhtmlhtml5-video

The POST method functions properly in the local environment, however, it encounters a 405 (Method Not Allowed) error in the

After testing my code locally and encountering no issues, I uploaded it to Vercel only to run into the error 405 (Method Not Allowed) during the POST method. Despite checking everything thoroughly, I'm unable to find a solution on my own. Your assista ...

javascriptpostnext.jsfetch-apicloudinary

Uploading files with Angular and NodeJS

I am attempting to achieve the following: When a client submits a form, they include their CV AngularJS sends all the form data (including CV) to the Node server Node then saves the CV on the server However, I am encountering difficulties with this proc ...

javascripthtmlangularjsnode.jsfile-upload

working with JSON array information

I have a JSON array retrieved from a database that I need to manipulate. Currently, it consists of 8 separate elements and I would like to condense it down to just 2 elements while nesting the rest. The current structure of my JSON looks like this: { "i ...

javascriptarraysjson

Hover or click on HTML input type using CSS in your webpage

I am currently working on adding hover effects to my elements. I have successfully added a hover effect to the outer list item, but I am wondering how I can achieve the same effect on the <input> element instead of the <li>. ul.slides li:hov ...

jqueryhtmlcss

How can I style the empty text in an ExtJS grid using CSS?

Is there a specific CSS class for a grid's emptyText? After inspecting the element with Firebug, all I found was: <div id="gridview-1021" class="x-component x-grid-view x-fit-item x-component-default x-unselectable" role="presentation" tabindex=" ...

javascriptcssextjsextjs4

Images positioned next to each other appear distorted when adjusting for different screen sizes

I have been struggling with this issue for quite some time and I just can't seem to get it right. My goal is to display two images side by side with a gap between them. The problem arises when the browser is resized, as the gap disappears and the im ...

htmlcss

The properties are not appearing on the screen nor in the React Development Tools

Having difficulties grasping React props and mapping data from an array? Struggling to get the props to show up on your Card component, or display in React dev tools? It's unclear where the mistake lies. Seeking assistance to pinpoint the issue. Also ...

javascriptreactjsreact-props

How can I get the class name of the drop destination with react-dnd?

Imagine having this component that serves as a drop target module. import { useDrop } from 'react-dnd'; import './css/DraggableGameSlot.css'; type DraggableGameSlotProps = { className: string, text: string } function Draggable ...

javascriptreactjstypescriptreact-dnd

Only one submenu can be opened at a time & click to close

I am encountering an issue with my list and submenus. When I click on List 1, submenu 1 opens but if I then click on List 2, submenu 2 opens while submenu 1 remains open. However, when I click on List 2 again, instead of just closing submenu 2, it toggles ...

jqueryhtmlcss

What is the best way to showcase saved HTML content within an HTML page?

I have some HTML data that was saved from a text editor, <p style=\"font-size: 14px;text-align: justify;\"> <a href=\"https://www.xpertdox.com/disease-description/Chronic%20Kidney%20Disease\" style=\"background-color: tr ...

javascripthtmlangularjsdata-bindinginterpolation

Encountering a problem when attempting to utilize AngularFire's Cloud Messaging Angular module due to missing configuration values for the app

Working with Firebase Cloud Messaging in my Angular application using AngularFire2 has presented a challenge. I am facing an error when attempting to retrieve the user's current token. I have already set up the "firebase-messaging-sw.js" and "manifes ...

javascriptangularfirebase-cloud-messagingangularfire

Transferring information among components and incorporating the ngDoCheck function

We are currently working on transferring data from one component to another using the following method. If there is no data available, we display an error message; however, if there is data present, we populate it in a select box. showGlobalError = true; ...

javascriptangulartypescriptangular7

Creating a blank grid using ng-repeat in angularJS

I'm attempting to create an empty grid using angularJS, but I've only been working with it for 2 days so I'm not very experienced. This is what I have come up with so far: <!doctype html> <html ng-app> <head> < ...

javascripthtmlangularjs

Dynamic Image Grid Created Using JavaScript Glitches

My dilemma involves using JQuery to create an HTML grid of images styled with Flex Boxes. The setup works perfectly on desktop, but when viewing it on mobile devices, the images begin to act strangely - jumping, overlapping, and even repeating themselves i ...

javascriptjqueryhtmlcss

Traversing through data stored in a variable (JSON object)

Does anyone know how to loop through JSON data inside a variable? For example: var data = { $.each(data, function(i, item) { console.log(data[i].PageName); });​ ...

javascriptjson

Dynamically created HTML elements have no events attached to them in Angular and jQuery

Utilizing jQuery, I am dynamically generating new elements within an Angular Form that has been constructed using a Template Driven Forms approach. Despite successfully creating the dynamic elements, they do not seem to be assigned events/callbacks due to ...

javascriptjqueryhtmlangular