AMay/portfolio-website
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Window dragging and styling

Browse Source
This commit is contained in:
AMay 2026-05-07 17:45:07 -05:00
commit 9c838514fa
4 changed files with 2281 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2181
7.css Normal file
View File

File diff suppressed because one or more lines are too long

BIN
background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

44
index.html Normal file
View File

@ -0,0 +1,44 @@
<head>
<link rel="stylesheet" href="7.css"></style>
<script src="windows.js"></script>
</head>
<div class="background">
</div>
<div class="window glass active" style="min-width: 640px">
<div class="title-bar" style="background-attachment: local;">
<div class="title-bar-text">A Window With A Status Bar</div>
</div>
<div class="window-body has-space">
<p> There are just so many possibilities:</p>
<ul>
<li>A Task Manager</li>
<li>A Notepad</li>
<li>Or even a File Explorer!</li>
</ul>
<div class="filler" style="height:100px;"></div>
</div>
<div class="status-bar">
<p class="status-bar-field">Press F1 for help</p>
<p class="status-bar-field">Slide 1</p>
<p class="status-bar-field">CPU Usage: 14%</p>
</div>
</div>
<div class="window glass active" style="min-width: 640px">
<div class="title-bar" style="background-attachment: local;">
<div class="title-bar-text">A Window With A Status Bar</div>
</div>
<div class="window-body has-space">
<p> There are just so many possibilities:</p>
<ul>
<li>A Task Manager</li>
<li>A Notepad</li>
<li>Or even a File Explorer!</li>
</ul>
<div class="filler" style="height:100px;"></div>
</div>
<div class="status-bar">
<p class="status-bar-field">Press F1 for help</p>
<p class="status-bar-field">Slide 1</p>
<p class="status-bar-field">CPU Usage: 14%</p>
</div>
</div>

56
windows.js Normal file
View File

@ -0,0 +1,56 @@
document.addEventListener("DOMContentLoaded", (event) => {
console.log("DOM fully loaded and parsed");
addListeners();
})
var offX;
var offY;
function addListeners(){
for(let win of document.getElementsByClassName("window")){
win.addEventListener('mousedown', mouseDown, false);
win.addEventListener('mousemove', mouseMove, false);
}
window.addEventListener('mouseup', mouseUp, false);
window.addEventListener('mousedown', globalMouseDown, false);
}
function mouseUp()
{
window.removeEventListener('mousemove', divMove, true);
}
function globalMouseDown(e){
for(let win of document.getElementsByClassName("window")){
win.classList.remove("active")
}
}
function mouseMove(e){
const bounds =e.currentTarget.getBoundingClientRect();
const posX = e.clientX - bounds.left;
const posY = e.clientY - bounds.top;
}
function mouseDown(e){
for(let win of document.getElementsByClassName("window")){
win.classList.remove("active")
win.style["z-index"]=0
}
var div = e.currentTarget;
offY= e.clientY-parseInt(div.offsetTop);
offX= e.clientX-parseInt(div.offsetLeft);
window.addEventListener('mousemove', divMove, true);
window.targetWindow=div;
div.classList.add("active")
div.style["z-index"]=1000
}
function divMove(e){
var div = window.targetWindow;
div.style.position = 'absolute';
div.style.top = (e.clientY-offY) + 'px';
div.style.left = (e.clientX-offX) + 'px';
}