• 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
8 hours ago, Seahorsepip said:

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

https://jsfiddle.net/3k8s7knk/

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.

7 hours ago, 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)

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

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

  • Posts

    • Nothing kills CMF Phone 2 Pro's successor due to rising memory prices

      By Lamp0 · Posted

      It was always going to be nothing.
    • Windows 11 version 26H2 is now available for testing in the latest preview build

      By Captain_Eric · Posted

      Would you please fix your graphics. They are outdated and don't fit the article.
    • The Light of Life? We actually do glow till our Death, study finds

      By hellowalkman · Posted

      The Light of Life? We actually do glow till our Death, study finds by Sayan Sen Image by Rafael Rendon via Pexels A study by researchers at the University of Calgary has found that living organisms produce an extremely faint light known as ultraweak photon emission, and that this glow appears to drop significantly after death. The research was published in the Journal of Physical Chemistry in April 2025 and quickly drew widespread attention, leading to more than 200 news stories about the findings. Ultraweak photon emission (or UPE), sometimes called biophoton emission, refers to tiny amounts of light released by living cells as a result of normal biological activity. A photon is the basic particle of light, and researchers say every living system examined so far, including plants and animals, has been found to emit these photons. The glow is far too faint to be seen by the human eye. “I suppose it has a little to do with people being reminded of auras,” says Dr. Christoph Simon, PhD, one of the authors of the study and a professor in the Department of Physics and Astronomy in the Faculty of Science. “It is a fact that living beings glow. It’s a very weak glow, but it’s there and visible with very sensitive cameras.” According to the study, the light involved is extremely weak, ranging from 10 to 1,000 photons per square centimetre per second across a spectral range of 200 to 1,000 nanometres. For comparison, a nanometre is one-billionth of a metre and is commonly used to measure wavelengths of light. Detecting emissions at such low levels requires highly specialized equipment. To study the phenomenon, researchers used electron-multiplying charge-coupled device (EMCCD) and charge-coupled device (CCD) cameras. These imaging systems are designed to detect extremely small amounts of light, including individual photons, while minimizing background noise. The technology allowed researchers to capture signals that would otherwise be impossible to observe. The team worked with the Human Health Therapeutics Research Centre at the National Research Council of Canada (NRC) in Ottawa to examine photon emissions in mice. Researchers took two-hour exposure images of the animals before and after death and compared the results. “We saw that the level of light that they emit – this biophoton glow – is distinctly different between living and dead animals,” says Dr. Daniel Oblak, PhD, an associate professor in Physics and Astronomy and the corresponding author of the study. The images showed a clear decrease in photon emissions after death across the entire body of each mouse. According to the researchers, this provided direct evidence that living and dead tissue produce different levels of ultraweak photon emission. “It’s a very small amount and it’s, of course, very tricky to detect,” Oblak says. The study grew out of discussions between Simon, whose research interests include quantum biology, and Oblak, whose work focuses on detecting light for quantum communication experiments. Quantum biology is a field that explores whether processes described by quantum physics, which studies matter and energy at very small scales, may also play a role in living systems. “Since I work as a quantum physicist on light detection for quantum communication, I thought that experimentally we have a lot of the tools to be able to detect the light,” Oblak explains. The researchers also investigated UPE in plants and found that the light changed in response to stress. When plants were exposed to higher temperatures or physically injured, their photon emissions increased. Chemical treatments also affected the glow. Among the substances tested, the local anesthetic benzocaine produced the strongest emission response when applied to injured plant tissue. These findings suggest that ultraweak photon emission is closely linked to biochemical and metabolic activity inside living organisms. Metabolism refers to the chemical reactions that allow cells and organisms to stay alive and function. Because these reactions change when an organism experiences stress, injury or disease, researchers believe UPE may provide a way to monitor those changes. The researchers stress that the glow is a physical and biological phenomenon, not a metaphysical one. Oblak says more research is needed to understand exactly how the light is produced and what information it may reveal about the condition of living tissue. “We must understand what that is to figure out what’s happening,” he says. “If we can understand how that relates to certain influences on the body – stress, diseases – then that could be used as a diagnostic tool.” The researchers believe the technique could eventually help scientists study health and disease without invasive procedures. Because UPE can be measured without adding dyes, markers or labels, it may offer a way to monitor whether tissue is healthy, damaged or alive. In plants, it could help researchers better understand how organisms respond to injury, heat and other forms of stress. While the work is still in its early stages, the study demonstrates that ultraweak photon emission imaging can provide a non-invasive and label-free way to observe biological activity. Researchers say the approach could become a useful tool for studying vitality, stress responses and other important processes in both animals and plants. Source: University of Calgary, ACS publication 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.
    • The official Funny Pictures thread

      By +Edouard · Posted

      Damn, I loved this show back in the day.  
    • Rufus 4.15.2393 Beta 2

      By Copernic · Posted

      Rufus 4.15.2393 Beta 2 by Razvan Serea Rufus is a small utility that helps format and create bootable USB flash drives, such as USB keys/pendrives, memory sticks, etc. Despite its small size, Rufus provides everything you need! Oh, and Rufus is fast. For instance it's about twice as fast as UNetbootin, Universal USB Installer or Windows 7 USB download tool, on the creation of a Windows 7 USB installation drive from an ISO (with honorable mention to WiNToBootic for managing to keep up). It is also marginally faster on the creation of Linux bootable USBs from ISOs. A non-exhaustive list of Rufus supported ISOs is available here. It can be especially useful for cases where: you need to create USB installation media from bootable ISOs (Windows, Linux, UEFI, etc.) you need to work on a system that doesn't have an OS installed you need to flash a BIOS or other firmware from DOS you want to run a low-level utility Rufus 4.15.2393 Beta 2 changelog: Add RISC-V 64 support to UEFI:NTFS Improve the guards for using the "silent" option Improve the ability to cancel during write retries Improve progress reporting for compressed image extraction Fix unrestricted XML entity expansion and integer overflow in ezxml parser (courtesy of @esadowski4) [GHSA-55r2-34wg-8mv9] Fix "silent" Windows installation failing at 75% in most cases [#2960] Fix a crash during boot when using UEFI:NTFS on Snapdragon X based ARM64 platforms [#2934] Fix the first WUE option always being checked by default [#2965] Fix an infinite loop when using Windows ISOs that contain multiple WIMs Fix "Enable runtime UEFI media validation" checkbox not always being properly enabled Other WUE improvements/fixes for OneDrive removal and username validation (with thanks to @christian8641) [#2984, #2991] Download: Rufus 4.15 Beta 2 | 1.9 MB (Open Source) Links: Rufus Home Page | Project Page @GitHub | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware

  • Recent Achievements

    • One Year In
      hhgygy earned a badge
      One Year In
    • One Month Later
      AMV earned a badge
      One Month Later
    • Week One Done
      AMV earned a badge
      Week One Done
    • Collaborator
      ryansurfer98 went up a rank
      Collaborator
    • One Month Later
      Eurosoft10 earned a badge
      One Month Later

  • Popular Contributors

    1. 1
      +primortal
      515
    2. 2
      +Edouard
      171
    3. 3
      PsYcHoKiLLa
      83
    4. 4
      Steven P.
      74
    5. 5
      Michael Scrip
      72
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!