• 0

Javascript Layout Issue

Asked by +NJ Louch,

 Share Followers 0

Question

+NJ Louch
  • 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 post
Share on other sites

4 answers to this question

Recommended Posts

  • 0
+NJ Louch
  • Author
  • Subscriber²
Posted

Anyone?  I can't see what I'm missing here.

 

Ta

Link to post
Share on other sites
  • 0
Seahorsepip
  • Veteran
Posted

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

https://jsfiddle.net/3k8s7knk/

Link to post
Share on other sites
  • 0
The_Decryptor
  • Veteran
Posted

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)

  • Like 1
Link to post
Share on other sites
  • 0
+NJ Louch
  • 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...

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Followers 0
Go to question listing

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • Mozilla Firefox 83 comes with big JavaScript enhancements
      By zikalify
      Mozilla Firefox 83 comes with big JavaScript enhancements
      by Paul Hill



      Mozilla has announced the release of Firefox 83. Unlike Firefox 82, which was a modest upgrade, Firefox 83 includes some big improvements including improvements to the SpiderMonkey JavaScript engine which increases page load performance, page responsiveness and lowers memory usage.

      With Firefox 83, Mozilla has decided to replace parts of its JavaScript engine. Aside from boosting the browser's security and making it easier to maintain, the changes increase page load performance by 15%, page responsiveness by 12% and reduces memory usage by 8%. You won’t need to do anything to experience these improvements as they come switched on by default in the update.

      Another new feature is HTTPS-Only Mode. This is an optional feature that can be turned on in Firefox Preferences. As you can see from the name, this mode will ensure that all of your connections to websites are encrypted and secure giving you peace of mind when connected to a public network. If a website does not support HTTPS, you will be greeted by a ‘Secure Connection Not Available’ message. You do have the option to proceed to the website using only HTTP but the warning will let you know before you proceed.

      Some other notable changes include pinch zoom support for Windows touch screen devices and touchpads on Mac devices, the directional arrows can be used to fast forward, rewind and adjust the volume in Picture-in-Picture mode, and AcroForm support has been added which lets you fill in, print, and save supported PDF forms.

      The firm said that this release is big for WebRender as the rollout expands on Windows 7 and 8 as well as on macOS 10.12 to 10.15. Regarding Mac devices, the firm said that Firefox 83 and above will work on Apple’s new Silicon CPU using emulation under Apple’s Rosetta 2 that ships with Big Sur. Going forward, the firm will support the new processor natively.

    • Pay What You Want for this 20-Course Programming Bundle
      By News Staff
      Pay What You Want for this 20-Course Programming Bundle
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can Pay What You Want for the The 20-Course Programming Bundle. From game development to making responsive apps, this 20-course collection has everything you need to start coding.



      What's the deal?
      With the Pay What You Want bundles, you can get something incredible for as little as you want to pay. And if you beat the average price, you’ll receive the fully upgraded bundle! Included in this Pay What You Want deal, are the following courses:

      Pay What You Want (as little as $1) for the following course:

      Image Processing with Python: Build an Instagram-Style Filter
      Develop a Photo Filter Editor from Scratch & Master Your Understanding of Matrices, Color Models & More

      Beat the average price to get the following courses as well:

      Azure Deployment for Node.js Applications
      Discover How to Deploy Your Node.js Apps to Microsoft Azure & Make Them Accessible Online

      MongoDB for Beginners
      Get Acquainted with MongoDB & Discover How to Manage Data Operations Like a Pro

      Node.js For Beginners: Create Server-Side Apps with JavaScript
      Learn How to Build Fast Web Applications with Node.js, the Server-Side Solution for JavaScript

      Intro to Next.js
      Get started with the Minimalist Framework That Allows You to Build Static, Server-Rendered React Apps

      Intro to Bootstrap
      Learn Bootstrap, the Secret to Quickly Creating Professional & Attractive Websites + Web Apps

      Create Interactive Pages with Javascript & the DOM API
      Explore the DOM API, HTML5 & Advanced JavaScript Concepts by Building Three Projects

      JavaScript Programming: Learn by Making a Mobile Game
      Dive into JavaScript's Core Concepts By Building a Game From Scratch

      HTML & CSS Course
      Learn HTML & CSS from Scratch by Creating a Responsive Landing Page

      AWS Deployment for Node.js Applications
      Discover How to Deploy Your Node.js Apps to AWS & Make Them Accessible Online

      The Complete HTML5 Mobile Game Development Course
      Use the Phaser HTML5 Framework & JavaScript Technologies to Build Cross-Platform Games

      Master Unity Game Development: Beginner's Bootcamp
      Learn Unity & C# by Creating a 3D Multi-Level Platformer Game

      Master Unity Mobile Game Development
      Learn the Quirks of Mobile Game Development with Unity

      Unity Game Development: Build a First-Person Shooter
      Master Unity by Building Your Own Version of Doom or Call of Duty

      Data Manipulation with Pandas
      Learn How to Read & Manipulate Data + Prepare It for Analysis Using the Pandas Library

      The Complete Python Data Visualization Course
      Master the Major Plotting Libraries Matplotlib, Seaborn & Bokeh + Use Them to Create Beautiful Plots

      Learn Python 3 by Making a Game
      Get up to Speed with Python by Creating Your Very Own Game

      Build a Tower Defense Game with Phaser 3
      Master the Skills Needed to Build a Complete Tower Defense Game Using Phaser 3

      Numpy Matrices & Vectors
      Take Advantage of the Numpy Library & Build Powerful + Functional Arrays and Matrices

      The Complete Responsive Web Design Course
      Learn How to Build Professional Websites That Work Across Different Devices & Platforms

      Good to know
      Certification of completion included Length of time users can access this course: lifetime Redemption deadline: redeem your code within 30 days of purchase Here's the deal:
      The bundle represents an overall retail value of $3,732 But you can Pay What You Want for the unlocked courses (as little as $1) Beat the average price and you'll take home the entire bundle. Qualify for the giveaway!
      Beat the Leader's price and get entered into the epic giveaway—plus get featured on the leaderboard!

      >> Pay What You Want for The 20-Course Programming Bundle <<
      See other Pay What You Want deals. This is a time-limited offer that ends soon.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      If this offer doesn't interest you, why not check out the following offers:



      The Win Your Dream 2020 Tesla Model 3 Giveaway 20% off Ivacy VPN subscription with coupon code IVACY20 NordVPN subscription at up to 68% off for a 2 year plan Private Internet Access VPN subscription at up to 71% off Unlocator VPN or SmartDNS unblock Geoblock with 7-day free trial Subscribe to Neowin for $14 a year, or $28 a year for Ad-Free experience Disable Sponsored posts · Neowin Deals · Free eBooks · Neowin Store

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.

    • Save 97% off this Complete One-Hour Coder Bundle - now just $34.99
      By News Staff
      Save 97% off this Complete One-Hour Coder Bundle - now just $34.99
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can save 97% off this Complete One-Hour Coder Bundle. Train your inner programmer with 6 one-hour courses on C++, CSS, HTML, JavaScript, and Python.



      This bundle consists of the following courses:

      C++ Foundations
      Begin Your Coding Journey with the High-End, Popular C++ Language for Software & Game Development CSS Foundations
      Enhance Website Aesthetics & Designs with the Style Sheet Language CSS HTML Foundations
      Start Creating Your Own Websites, Web Apps, & More Java Foundations
      Master the General Purpose & Object-Oriented Language of Java for Mobile Development JavaScript Foundations
      Learn JavaScript for Web & HTML5 Game Development Python Foundations
      Learn the Foundations of Python for Data Science & Machine Learning Good to know
      Updates included Certification of completion included Length of time users can access this course: lifetime Redemption deadline: redeem your code within 30 days of purchase For specifications, license and instructor info please click here.

      Here's the deal:
      This Complete One-Hour Coder Bundle normally costs* $1,200, but it can be yours for just $34.99 for a limited time, that's a saving of $1,165.01 (97%) off.

      >> Get this deal, or learn more about it here <<
      See all Online Courses on offer. This is a time-limited offer that ends soon.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      If this offer doesn't interest you, why not check out the following offers:



      The Win Your Dream 2020 Tesla Model 3 Giveaway 20% off Ivacy VPN subscription with coupon code IVACY20 NordVPN subscription at up to 68% off for a 2 year plan Private Internet Access VPN subscription at up to 71% off Unlocator VPN or SmartDNS unblock Geoblock with 7-day free trial Subscribe to Neowin for $14 a year, or $28 a year for Ad-Free experience Disable Sponsored posts · Neowin Deals · Free eBooks · Neowin Store

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.

    • Get this Interactive Learn to Code Bundle at 73% off for just $29.99
      By News Staff
      Get this Interactive Learn to Code Bundle at 73% off for just $29.99
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can save 73% off the Interactive Learn to Code Bundle. Start writing codes and programs from scratch with 9 interactive courses on SQL, JavaScript, PHP, jQuery, BootStrap, and more.



      This deal consists of the following courses:

      An Interactive SQL Tutorial for Beginners: Introduction to SQL
      Getting Started with SQL Doesn't Have to Be Hard An Interactive JavaScript Course for Beginners
      Learn JavaScript Interactively with a One-of-a-Kind JS Online Course Interactive jQuery Tutorial: Learn jQuery Step-by-Step
      Take an Interactive jQuery Training Course for Beginners to Quickly Master jQuery Events, Effects & More Learn PHP Online: PHP Basics Explained in an Interactive & Fun Manner
      An Interactive Tutorial for Beginners Who Want to Master PHP Basics in a Non-Boring Way The Complete Solidity Smart Contract Guide
      Master Solidity Programming Through Hands-On Experience Master Python Fundamentals the Fun Way: An Interactive Python Tutorial
      A Python Training Course for Absolute Beginners Who Wants to Master the Language Without Getting Bored A Responsive Web Design Course: Find Out How to Create a Responsive Website
      Make a Website Mobile-Friendly with a Step by Step, Responsive Web Design Tutorial Bootstrap Tutorial: Learn to Create Dynamic Websites in a Pinch
      Find Out How to Use Bootstrap the Fun Way by Using an Interactive Course An Interactive Java Tutorial: Learn by Practice!
      Learn Java From Scratch by Combining Theory with Hands-On Coding Experience Good to know
      Length of time users can access this course: lifetime Certification of completion included Redemption deadline: redeem your code within 30 days of purchase For a full description, specs, and instructor info, click here.

      Here's the deal:
      This Interactive Learn to Code Bundle normally costs* $112, but you can pick it up for just $29.99 for a limited time - that represents a saving of $82.01 (73%) off.

      >> Get this deal, or learn more about it <<
      See all discounted Online Courses. This is a time-limited offer.


      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      If this offer doesn't interest you, why not check out the following offers:

      The Win Your Dream 2020 Tesla Model 3 Giveaway
      The Nintendo Gaming Bundle Giveaway 20% off Ivacy VPN subscription with coupon code IVACY20 NordVPN subscription at up to 68% off for a 2 year plan Private Internet Access VPN subscription at up to 71% off Unlocator VPN or SmartDNS unblock Geoblock with 7-day free trial Disable Sponsored posts · Other recent deals · Preferred partner software

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.

      running costs.

    • Free eBook: Your First Week With Node.js
      By News Staff
      Free eBook: Your First Week With Node.js
      by Steven Parker

      Claim your complimentary copy for free, before the offer expires.



      What's it about?


      A beginner's introduction to Node and its related technologies.

      Used by some of the biggest companies today, Node is blazingly fast. Taking JavaScript, a ubiquitous language among developers, we'll get you up and running with guides on when to use Node, NPM, Security, as well as connecting with MySQL, MongoDB and more.

      How to get it
      Please ensure you read the terms and conditions to claim this offer. Complete and verifiable information is required in order to receive this free offer. If you have previously made use of these free offers, you will not need to re-register. While supplies last!

      >> Your First Week With Node.js - free eBook <<
      Offered by SitePoint, view their other free resources. Limited time offer.

      Not for you?
      That's OK, there are other free eBooks on offer you can check out here, but be aware that these are all time-limited offers. If you are uncomfortable sharing your details with a third-party sponsor, we understand. Or via our preferred partner:

      How can I disable these posts? Click here.

      Disclosure: A valid email address is required to fulfill your request. Complete and verifiable information is required in order to receive this offer. By submitting a request, your information is subject to TradePub.com's Privacy Policy.