Skip to content

Instantly share code, notes, and snippets.

@daephx
Last active Mar 6, 2022
Embed
What would you like to do?
[Sticky Header] #P5JS
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<div class="header" id="myHeader">
<head>
<h1>
<u>p5.js Playground</u>
</h1>
</head>
<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="slider round"></div>
</label>
<em>Enable Dark Mode!</em>
</div>
<body>
<script src="https://cdn.jsdelivr.net/npm/p5@0.10.2/lib/p5.js"></script>
<script src="sketch.js"></script>
<!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
-->
<div id="sketchHolder"></div>
</body>
</div>
</html>
{
"scripts": [],
"styles": []
}
window.onscroll = function () {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
function switchTheme(e) {
if (e.target.checked) {
console.log('data-theme switched to "Dark"')
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark'); //add this
} else {
console.log('data-theme switched to "Light"')
document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light'); //add this
}
}
toggleSwitch.addEventListener('change', switchTheme, false);
const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
if (currentTheme) {
document.documentElement.setAttribute('data-theme', currentTheme);
if (currentTheme === 'dark') {
toggleSwitch.checked = true;
}
}
/* p5.js region */
function setup() {
console.clear()
console.log("Starting application!");
var cnv = createCanvas(960, 540);
cnv.parent("sketchHolder");
// cnv.background( "blue" );
var button = createButton("Button");
button.position(10, 10);
button.parent("sketchHolder");
button.mousePressed(button);
}
function draw() {
background(220);
}
function button() {
console.log("Button Pressed!");
}
.header {
position: sticky;
background-color: darkcyan;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 102px;
}
body {
background-color: var(--bg-color);
color: var(--font-color);
/* Force body height for testing sticky header */
height: 1000px;
}
h1 {
color: var(--secondary-color);
/*other styles*/
}
a {
color: var(--primary-color);
/*other styles*/
}
#sketchHolder {
width: 960px;
height: 540px;
margin: 0 auto;
position: relative;
}
:root {
--primary-color: #302ae6;
--secondary-color: #536390;
--font-color: #424242;
--bg-color: #fff;
--heading-color: #292922;
}
[data-theme="dark"] {
--primary-color: #9a97f3;
--secondary-color: #818cab;
--font-color: #e1e1ff;
--bg-color: #161625;
--heading-color: #818cab;
}
/*Simple css to style it like a toggle switch*/
.theme-switch-wrapper {
display: flex;
align-items: center;
em {
margin-left: 10px;
font-size: 1rem;
}
}
.theme-switch {
display: inline-block;
height: 34px;
position: relative;
width: 60px;
}
.theme-switch input {
display: none;
}
.slider {
background-color: #ccc;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: 0.4s;
}
.slider:before {
background-color: #fff;
bottom: 4px;
content: "";
height: 26px;
left: 4px;
position: absolute;
transition: 0.4s;
width: 26px;
}
input:checked + .slider {
background-color: #66bb6a;
}
input:checked + .slider:before {
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment