• 0

Javascript Layout Issue

Asked by +Nik Louch,

 Share

Question

Grand Master

+Nik Louch Subscriber²

Posted
  • Subscriber²
Posted

Hi

 

I'm building a layout, and ignoring all the stuff about sizing for mobile and so on - I want to achieve something fairly specific.  When scrolling on large screens, the black "A title goes here" scrolls upwards until it sits under the menu and stops - that is working.

 

The sidebar similarly scrolls up until it sits under the menu and then stops.  But the footer could impact it, so when the footer reaches the bottom of the sidebar, it "pushes" it up, so the sidebar scrolls with the page again.

 

This is all working just fine, but awkwardly on line 283, I am having to add a specific offset value.  I know that if I change the height of any of the elements above the sidebar, the offset value needs to change.  But I can't work out how to derive what it should be, so that any sizing of Hero image will work, for example.

 

Sorry for the messy code, I will be tidying that up once this works.  Would anyone take a look?  Also, yeah I'd never put all my CSS and JS in with my HTML normally, it's just for ease of postings sake.

 

Hope @mrbestersees this - he's usually great with these thing...

 

Thanks

  

<!DOCTYPE html>
<html lang="en-GB" dir="ltr">
<head>
<title></title>
<!-- Encolding //-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no">
<link rel="profile" href="http://gmpg.org/xfn/11">
<!-- Scripts //-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js"></script>

<!-- Styles //-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css">
<style>
BODY {}

BODY #pageHolder {
  padding-top: 0rem;
}

BODY.large #pageHolder,
BODY.medium #pageHolder {
  margin-top: 56px;
}

BODY.small #pageHolder {
  margin-top: 41px;
}

BODY.small SIDEBAR,
BODY.medium SIDEBAR {
  padding-top: 1rem;
}

BODY.large SIDEBAR{
  position: relative;
  top: 0;
}
.heroImage{
	background-image: URL("https://theluxurytravelexpert.files.wordpress.com/2014/01/scenery.jpg");
	background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
BODY.large .heroImage{
	height: 400px;
}
BODY.medium .heroImage{
	height: 300px;
}
BODY.small .heroImage{
	height: 200px;
}
H1{
	background: black;
	color: white;
	position: relative;
	top: 0;
	margin: 0px;
	z-index: 10;
}
.top-bar NAV UL LI.menu-text H2 {
  font-size: 1em;
  padding: 0rem;
  margin: 0rem;
  line-height: 1;
  font-weight: bold;
}

.title-bar .title-bar-left h2 {
  font-size: 1em;
  padding: 0rem;
  margin: 0rem;
  line-height: 1;
  font-weight: bold;
}

H1,H2,H3,H4,H5,H6 {
  font-weight: bold;
}

a:focus {
  outline: none;
}

SIDEBAR {
  background: #00ff00;
  font-size: 0.9em;
}

FOOTER {
  background: #e6e6e6;
  font-size: 0.9em;
  /*padding-top: 1rem;*/
}

FOOTER UL LI A {
  padding: 0.3rem 0rem;
}

FOOTER SECTION P {
  padding: 0rem;
}





.top-bar NAV UL LI A {
  /*color: #DDDDDD;*/
}

.top-bar NAV UL LI.is-active {
  /*color: #FFFF;*/
  /*background: #AA0000;*/
}

.top-bar NAV UL LI A:hover {
  /*color: #FFFF;*/
  /*background: #FF0000;*/
}

.top-bar NAV UL LI UL.first-sub {
  /*top: 126%;
  left: 17px;*/
}

.top-bar .top-bar-right ul {
  /*background: #000000;*/
}

.top-bar .top-bar-right ul LI button {
  /*background-color: #FF0000;*/
}

.top-bar .top-bar-right ul LI button:hover {
  /*background-color: #CC0000;*/
}

.dropdown.menu>li.is-dropdown-submenu-parent>a:after {
  /*border-color: #FFFFFF transparent transparent;*/
}

.is-dropdown-submenu .is-dropdown-submenu-parent.opens-right>a:after {
  /*border-color: transparent transparent transparent #FFFFFF;*/
}

#offCanvasLeft {
  /*background: #000000;*/
}

#offCanvasLeft UL#sideMenu {
  /*background: #000000;*/
}

#offCanvasLeft UL#sideMenu LI A {
  /*color: #FFFFFF;*/
}

#offCanvasLeft UL#sideMenu .is-active A {
  /*background: #660000;*/
}

#offCanvasLeft UL#sideMenu A:hover {
  /*background: #FF0000;*/
}

.is-accordion-submenu-parent>a:after {
  /*border-color: #FFFFFF transparent transparent;*/
}

MAIN{
	background: red;
}
</style>
<script>
$(document).ready(function() {
	var sidebarPosTopOrig, titlePosTopOrig;
	
	$(document).foundation();
	
	setupBodySize();
	prepMenus();
	holdStickyElements();

	$(window).resize(function() {
		setupBodySize();
	});
	
	$(window).scroll(function () {
		holdStickyElements();
	});

	function setupBodySize() {
		// Assign BODY classes based upon size
		if ($('#showhideSmall').is(":visible")) {
			$('BODY').addClass("small");
			$('BODY').removeClass("medium");
			$('BODY').removeClass("large");
		}
		if ($('#showhideMedium').is(":visible")) {
			$('BODY').removeClass("small");
			$('BODY').addClass("medium");
			$('BODY').removeClass("large");
		}
		if ($('#showhideLarge').is(":visible")) {
			$('BODY').removeClass("small");
			$('BODY').removeClass("medium");
			$('BODY').addClass("large");
		}
		
		sidebarPosTopOrig =  $('SIDEBAR').position().top;
		titlePosTopOrig =  $('.pageTitle').position().top;
		
		// Set the top of the side menu to compensate for the header
		$('#offCanvasLeft').css('margin-top', $('#mobileHeader').height());
	}
	
	function prepMenus(){
		// Load the top menu into the side menu
		$('#sideMenu').html($('#topMenu').html());

		// Style the side menu sub menus to be vertical
		$('#sideMenu').find("UL").addClass("vertical");

		// Remove the title from the side menu
		$('#sideMenu').find('.menu-text').remove();

		//Turn the side menu into an accordian
		var sideMenu = new Foundation.AccordionMenu($('#sideMenu'), null);

		// Style the top menu to be a drop down
		$('#topMenu').addClass("dropdown");

		//Turn the top menu into a drop down
		var topMenu = new Foundation.DropdownMenu($('#topMenu'), null);
		
		
	}
	
	function holdStickyElements(){
	
		console.log($('.fixedSidebar').height() - $('.fixedSidebar').position().top);
	
		// How far have we scrolled - compensating for the fixed header
		scrollAmount = $(window).scrollTop() + $('HEADER').height();
			
		// Keep the title on screen
		if($('BODY').hasClass("large")){
			// If the page is on a large screen
			
			// Threshold 0 - scroll past here and keep title visible = position of title relative to page originally
			scrollThreshold0 = titlePosTopOrig;
			
			if(scrollAmount <= scrollThreshold0){
				// If the scroll (compensating for the fixed header) hasn't yet reached a distance greater than Threshold 0
				// Meaning - have we scrolled to a point that where the title hasn't yet reached the top of the usable screen
				
				// Keep the title scrolling with the page with a zero difference between itself and its parent.
				holdPoint = 0;
				$('.pageTitle').css('top',holdPoint);
			}
			if(scrollAmount > scrollThreshold0){
				// If the scroll (compensating for the fixed header) has now reached a distance greater than Threshold 0
				// Meaning - have we scrolled to a point that where the title has reached the top of the usable screen
				
				// Fix the title to the top of the usable screen by adjusting the relative difference of the title to it's parent as ((distance scrolled minus original position) and then compensate for fixed header)
				holdPoint = scrollAmount - titlePosTopOrig;
				$('.pageTitle').css('top',holdPoint);
			}
		}

		// Keep the sidebar on screen
		if($('BODY').hasClass("large") && $(window).height() > ($('.fixedSidebar').height() + $('HEADER').height() + $('.pageTitle').height())){
			// If the page is on a large screen and taller than the sidebar + header + title
			
			// Threshold 1 = scroll past here and keep sidebar visible = (position of sidebar originally - height of the title)
			scrollThreshold1 = sidebarPosTopOrig - $('.pageTitle').height();
			
			// Threshold 2 = point where the bottom of main and bottom of sidebar align
			scrollThreshold2 = $('.fixedSidebar').height() - $('.pageTitle').height() + 145;	
			
			
			
			if(scrollAmount < scrollThreshold1){
				// If the scroll (compensating for the fixed header) hasn't yet reached a distance greater than Threshold 1
				// Meaning - have we scrolled to a point that where the sidebar hasn't yet reached the top of the usable screen
				
				// Keep the top of the sidebar scrolling with the page with a zero difference between itself and its parent.
				holdPoint = 0;
				$('.fixedSidebar').css('top',holdPoint);
				return;
			}
			
			
			
			if(scrollAmount >= scrollThreshold1 && scrollAmount < scrollThreshold2){
					// If the scroll (compensating for the fixed header) has reached a distance greater than Threshold 1 but not Threshold 2
					// Meaning - have we scrolled to a point that where the sidebar hasnt reached the top of the usable screen but not impacted by the footer
				
					// Fix the top of the sidebar to the top of the usable screen by adjusting the relative difference of the sidebar to it's parent as ((distance scrolled minus original position) and then compensate for fixed header and fixed title)
					holdPoint = scrollAmount - sidebarPosTopOrig + $('.pageTitle').height();
					$('.fixedSidebar').css('top',holdPoint);
					return;
			}
			
			if(scrollAmount >= scrollThreshold2){
				// If the scroll (compensating for the fixed header) has reached a distance greater than Threshold 1 and Threshold 2
				// Meaning - have we scrolled to a point that where the sidebar hasn reached the top of the usable screen but not impacted by the footer
				
				// Fix the bottom of the sidebar to the top of the footer by adjusting the relative difference of the sidebar to it's parent as (distance from the unscrolled top of the sidebar to the top of the footer minus the height of the sidebar)
				holdPoint = $('FOOTER').position().top - sidebarPosTopOrig - $('.fixedSidebar').height();
				$('.fixedSidebar').css('top',holdPoint);
				return;
			}
		}
		return;
	}









});
</script>


</head>
<body>
  <div class="off-canvas-wrapper">

    <section id="pageHolder" class="off-canvas-content row" data-off-canvas-content>
		
		<div class="heroImage"></div>
		<h1 class="pageTitle">A Title Goes Here...</h1>
		<main class="small-12 large-9 columns">
		
        <!-- CONTENT HERE //-->
		


        <article>
          <h3>Title</h3>
          <p>Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body
            Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body</p>
          <p>Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body
            Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body</p>
          <p>Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body
            Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body</p>
          <p>Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body
            Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body</p>
          <p>Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body
            Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body</p>
        </article>
		
		 <article>
          <h3>Title</h3>
          <p>Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body
            Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body</p>
          <p>Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body
            Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body</p>
          <p>Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body
            Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body</p>
          <p>Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body
            Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body</p>
          <p>Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body
            Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body</p>
        </article>





        <!-- CONTENT HERE //-->
      </main>
      <sidebar id="sidebar" class="small-12 large-3 columns fixedSidebar">

        <aside>
          <h4>Title1</h4>
          <p>Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar</p>
        </aside>

        <aside>
          <h4>Title2</h4>
          <p>Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar</p>
        </aside>
		
		<aside>
          <h4>Title3</h4>
          <p>Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar</p>
        </aside>

        <aside>
          <h4>Title4</h4>
          <p>Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar</p>
        </aside>

        <aside>
          <h4>Title5</h4>
          <p>Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar</p>
        </aside>

      </sidebar>
    </section>
    <footer class="row small-up-1 medium-up-3">
      <section class="column column-block">
        <h6>Title</h6>
        <p>A small paragraph of text could go here, such as a privacy statement or contact details. Potentially use this area for social links also!</p>
      </section>
      <section class="column column-block">
        <h6>Title</h6>
        <ul class="menu vertical">
          <li><a href="#">Item</a></li>
          <li><a href="#">Item</a></li>
          <li><a href="#">Item</a></li>
          <li><a href="#">Item</a></li>
          <li><a href="#">Item</a></li>
          <li><a href="#">Item</a></li>
          <li><a href="#">Item</a></li>
          <li><a href="#">Item</a></li>
          <li><a href="#">Item</a></li>
          <li><a href="#">Item</a></li>
          <li><a href="#">Item</a></li>
          <li><a href="#">Item</a></li>
          <li><a href="#">Item</a></li>
          <li><a href="#">Item</a></li>
          <li><a href="#">Item</a></li>
          <li><a href="#">Item</a></li>
          <li><a href="#">Item</a></li>
        </ul>
      </section>
      <section class="column column-block">
        <h6>Title</h6>
        <ul class="menu vertical">
          <li><a href="#">Item</a></li>
          <li><a href="#">Item</a></li>
          <li><a href="#">Item</a></li>
          <li><a href="#">Item</a></li>
          <li><a href="#">Item</a></li>
        </ul>
      </section>
    </footer>




    <!-- SMALL MENU HERE //-->
    <nav class="off-canvas position-left" id="offCanvasLeft" data-off-canvas class="show-for-small-only">
      <ul id="sideMenu" class="vertical menu"></ul>
    </nav>
    <!-- SMALL MENU HERE //-->



  </div>




  <header style="position: fixed; width: 100%; top: 0px;">

    <!-- SMALL HEADER HERE //-->
    <div id="mobileHeader" class="nav-wrapper show-for-small-only" style="background: #000000; width: 100%;">
      <div class="title-bar">
        <div class="title-bar-left">
          <button class="menu-icon" type="button" data-toggle="offCanvasLeft"></button>
          <span class="title-bar-title">Foundation</span>

        </div>
      </div>
    </div>
    <!-- SMALL HEADER HERE //-->



    <!-- BIG HEADER HERE //-->
    <div id="desktopHeader" class="top-bar show-for-medium">
      <div class="row">
        <nav class="top-bar-left">
          <ul id="topMenu" class="menu">
            <li class="menu-text">Site Title</li>
            <li><a href="#">One</a>
              <ul class="menu">
                <li><a href="#">One - One</a></li>
                <li><a href="#">One - Two</a></li>
                <li><a href="#">One - Three</a></li>
              </ul>
            </li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a>
              <ul class="menu">
                <li><a href="#">Three - One</a></li>
                <li><a href="#">Three - Two</a>
                  <ul class="menu">
                    <li><a href="#">Three - Two - One</a></li>
                    <li><a href="#">Three - Two - Two</a></li>
                    <li><a href="#">Three - Two - Three</a></li>
                  </ul>
                  <li><a href="#">Three - Three</a></li>
              </ul>
              </li>
          </ul>
        </nav>
        <div class="top-bar-right">
          <ul class="menu">
            <li>
              <input type="search" placeholder="Search">
            </li>
            <li>
              <button type="button" class="button">Search</button>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- BIG HEADER HERE //-->


  </header>
  <div id="showhideSmall" class="show-for-small"></div>
  <div id="showhideMedium" class="show-for-medium"></div>
  <div id="showhideLarge" class="show-for-large"></div>
</body>
</html>

 

Link to comment
https://www.neowin.net/forum/topic/1324594-javascript-layout-issue/
Share on other sites

4 answers to this question

Recommended Posts

  • 0
Grand Master

+Nik Louch Subscriber²

Posted
  • Author
  • Subscriber²
Posted
  On 09/03/2017 at 01:00, Seahorsepip said:

You might consider using jsfiddle or codepen, it's easier to look into the code for others.

https://jsfiddle.net/3k8s7knk/

Expand  

Cheers, I did consider it but my only issue is that jsFiddle takes up too much screen estate as to not sufficiently demonstrate the issue.

  On 09/03/2017 at 01:16, The_Decryptor said:

Use position: sticky with a polyfill for old browsers, you shouldn't need these type of JavaScript driven things for modern browsers (Especially because it actually slows them down)

Expand  

Not sure sticky will work here but can try...

This topic is now closed to further replies.
 Share
Go to question listing

  • Posts

    • TP-Link Archer BE6500 Dual-Band Wi-Fi 7 Router (Archer BE400) drops to its lowest price

      By Ccl Ncc · Posted

      I thought router has to have 6 Ghz band to be called wifi-7, guess I was wrong...
    • Everything we know about the Google Pixel 10 series so far

      By naap51stang · Posted

      I have the Pixel 9 Pro XL...Unless this thing is "leaps and bounds" faster than the 9, I'll pass. And by leaps and bounds, I don't mean on benchmarks. "Real world" faster. Most people don't even come close to topping out the performance of their phones. Tensor G5 is Google's most powerful chip to date, boasting a staggering 36 percent performance leap over G4.
    • MIT's stunning 'bubble wrap' device squeezes water out from thin air even in deserts

      By hellowalkman · Posted

      MIT's stunning 'bubble wrap' device squeezes water out from thin air even in deserts by Sayan Sen Image by Matteo Roman via Pexels Massachusetts Institute of Technology (MIT) engineers have built a new kind of device that can pull clean drinking water straight out of the air—no electricity needed. It’s designed for areas where water is scarce and traditional sources like rivers or lakes aren’t reliable. Right now, more than 2.2 billion people globally don’t have access to safe drinking water. In the United States alone, 46 million face water insecurity, with either no running water or water that’s not safe to drink. This new device, called an Atmospheric Water Harvesting Window (AWHW), uses a unique hydrogel panel that looks like black bubble wrap. These dome-shaped bubbles soak up water vapor from the air, especially at night when humidity is higher. During the day, sunlight makes the vapor inside evaporate. That vapor then condenses on a glass surface and drips down through a tube, turning into drinkable water. The AWHW doesn’t rely on power sources like batteries or solar panels. It’s completely passive, meaning it works on its own. The team tested a meter-sized panel in Death Valley, California, one of the driest places in North America, and got between 57.0 and 161.5 milliliters of water per day even with humidity as low as 21 percent. That’s more than what other similar passive devices have managed. “We have built a meter-scale device that we hope to deploy in resource-limited regions, where even a solar cell is not very accessible,” said Xuanhe Zhao, a professor at MIT. “It’s a test of feasibility in scaling up this water harvesting technology. Now people can build it even larger, or make it into parallel panels, to supply drinking water to people and achieve real impact.” Another cool part of the design is how they kept the water safe to drink. Usually, these kinds of hydrogels use salts like lithium chloride to absorb more vapor but that can lead to salt leaking into the water, which isn’t ideal. To solve this, MIT’s team mixed in glycerol, a compound that helps keep salt locked inside the gel. In testing, the lithium ion concentration in the harvested water stayed below 0.06 ppm (parts per million), which is way below the safe limit. The hydrogel domes also give the material more surface area, letting it collect more vapor. The outer glass panel is coated with a special polymer film that helps cool the glass, making it easier for vapor to condense. “This is just a proof-of-concept design, and there are a lot of things we can optimize,” said lead author Chang Liu, now a professor at the National University of Singapore. “For instance, we could have a multipanel design. And we’re working on a next generation of the material to further improve its intrinsic properties.” Published in Nature Water, the study says the AWHW could last at least a year and shows promise for making safe, sustainable water in places with harsh climates. The researchers believe an array of vertical panels could one day supply water to individual households, especially in remote or off-grid locations. Source: MIT News, Nature This article was generated with some help from AI and reviewed by an editor. Under Section 107 of the Copyright Act 1976, this material is used for the purpose of news reporting. Fair use is a use permitted by copyright statute that might otherwise be infringing.
    • Intel is shutting down Clear Linux OS

      By leonsk29 · Posted

      Clear Linux is open source, indeed, so its source code is available for anyone. They're just shutting down its support from them, they're not forbidding anyone else from taking over.
    • Intel is shutting down Clear Linux OS

      By leonsk29 · Posted

      Linux Mint is also my favorite distro, but I fear what will happen with it if Clem were to disappear tomorrow, to be honest.

  • Recent Achievements

    • First Post
      leoniDAM earned a badge
      First Post
    • Reacting Well
      Ian_ earned a badge
      Reacting Well
    • One Month Later
      Ian_ earned a badge
      One Month Later
    • Dedicated
      MacDaddyAz earned a badge
      Dedicated
    • Explorer
      cekicen went up a rank
      Explorer

  • Popular Contributors

    1. 1
      +primortal
      505
    2. 2
      ATLien_0
      209
    3. 3
      Michael Scrip
      202
    4. 4
      Xenon
      144
    5. 5
      +FloatingFatMan
      121
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!