Draggable Finder Window Visualization

Developer
Charlie Volpe
Size
3,666 Kb
Views
22,264
  1. Draggable Finder Window Visualization Previews
  2. Draggable Finder Window Visualization HTML Codes
  3. Draggable Finder Window Visualization CSS Codes
  4. Draggable Finder Window Visualization JS Codes

How do I make an draggable finder window visualization?

I wanted to try to recreate the Mavericks finder window in html and css. It is draggable and the search can be typed in but those are the only moving parts. I just thought it would be a fun project. I got pretty close but it isn't a One-to-One copy. The finder window design belongs to Apple.. What is a draggable finder window visualization? How do you make a draggable finder window visualization? This script and codes were developed by Charlie Volpe on 08 November 2022, Tuesday.

Draggable Finder Window Visualization Previews
IQ Test

Draggable Finder Window Visualization - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Draggable Finder Window Visualization</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link rel="stylesheet" href="https://goo.gl/gTHiuz">
<div id="finder"> <div class="header"> <div class="top clearfix"> <div class="window-buttons"> <div class="button red"></div> <div class="button yellow"></div> <div class="button green"></div> </div> <div class="title"> <span class="icon icon-folder"></span> <span>Documents</span></div> <div class="full-screen"> <span class="icon icon-expand"></span> </div> </div> <div class="bottom clearfix"> <div class="directions"> <span class="icon-arrow-left"></span> <span class="seperator">|</span> <span class="icon-arrow-right"></span> </div> <div class="style"> <span class="icon-grid"></span> <span class="seperator">|</span> <span class="icon-lines"></span> <span class="seperator">|</span> <span class="icon-columns"></span> <span class="seperator">|</span> <span class="icon-uniE608"></span> </div> <div class="settings"> <span class="icon-cog"></span> <span class="icon-arrow-down"></span> </div> <div class="settings"> <span class="icon-grid2"></span> <span class="icon-arrow-down"></span> </div> <div class="settings"> <span class="icon-export"></span> </div> <div class="settings"> <span class="icon-toggle"></span> </div> <div class="search"><input type='search'></div> </div> </div> <div class="content clearfix"> <div class="sidebar"> <div class="favorites"> <div class="categories">FAVORITES</div> <div class="bookmark selected"> <span class="icon icon-copy"></span>Documents</div> <div class="bookmark"> <span class="icon icon-desktop"></span>Desktop</div> <div class="bookmark"> <span class="icon icon-arrow-down-alt1"></span>Downloads</div> <div class="bookmark"> <span class="icon icon-box"></span>Applications</div> <div class="bookmark"> <span class="icon icon-folder"></span>InVision</div> <div class="bookmark"> <span class="icon icon-folder"></span>Google Drive</div> <div class="bookmark"> <span class="icon icon-folder"></span>Dropbox</div> </div> <div class="devices"> <div class="categories">DEVICES</div> <div class="bookmark"> <span class="icon icon-hdd"></span>BOOTCAMP</div> </div> <div class="devices"> <div class="categories">SHARED</div> <div class="bookmark"> <span class="icon icon-laptop"></span>laptop</div> </div> <div class="tags"> <div class="categories">TAGS</div> </div> </div> <div class="column"> <div class="item"> <span class="icon icon-folder"></span> Aptana Rubles <div class="float-right icon icon-arrow-right"></div> </div> <div class="item"> <span class="icon icon-folder"></span> Clients <div class="float-right icon icon-arrow-right"></div> </div> <div class="item"> <span class="icon icon-folder"></span> Games <div class="float-right icon icon-arrow-right"></div> </div> <div class="item"> <span class="icon icon-folder"></span> Library <div class="float-right icon icon-arrow-right"></div> </div> <div class="item"> <span class="icon icon-folder"></span> Personal <div class="float-right icon icon-arrow-right"></div> </div> <div class="item"> <span class="icon icon-folder"></span> Repos <div class="float-right icon icon-arrow-right"></div> </div> <div class="item"> <span class="icon icon-folder"></span> Resources <div class="float-right icon icon-arrow-right"></div> </div> <div class="item"> <span class="icon icon-folder"></span> Workspaces <div class="float-right icon icon-arrow-right"></div> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Draggable Finder Window Visualization - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,700);
* { box-sizing: border-box;
}
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
body { background: #373737; font-family: 'Open Sans', sans-serif; overflow: hidden;
}
#finder { background: #fff; width: 35rem; height: 30rem; margin: 1rem auto; border-radius: .35rem; overflow: hidden; cursor: default;
}
.header { background: #c7c7c7; background: -webkit-linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.3)); background: linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.3)); width: 100%; height: 3.5rem; border-bottom: 1px solid #777;
}
.top { width: 100%; height: 1.5rem;
}
.window-buttons { position: relative; float:left; top: .15rem; left: .35rem;
}
.button { float: left; width: .7rem; height: .7rem; margin: .2rem; border-radius: 50%; border: 1px solid #a7a7a7; box-shadow: 0 .1rem #f7f7f7, inset 0 .1rem #f7f7f7, inset 0 .1rem rgba(0,0,0,.1);
}
.red { background: #fc5f5e;
}
.yellow { background: #f8c674;
}
.green { background: #a8dd86;
}
.title { float: left; position: relative; left: 12rem; text-align: center;
}
.title span{ font-size: .8rem; font-weight: 600; color: #676767;
}
.full-screen { float: right; margin-right: .35rem;
}
input[type=search] { width: 100%; border-radius: 2rem; border: 1px solid #979797; height: .65rem; box-shadow: inset 0 1px 2px #a7a7a7; outline: none; font-size: .75rem; padding: .25rem;
}
.search { float: right; width: 25%; margin-right: 1rem;
}
.content { position: relative; top: 0; left: 0; width: 100%; height: 100%;
}
.sidebar { float: left; background: #e7e7e7; position: relative; width: 8rem; height: 100%; border-right: 1px solid #a7a7a7;
}
.categories { font-weight: 700; font-size: .75rem; margin-left: .5rem; color: #676767;
}
.bookmark { font-size: .8rem; font-weight: 600; height: 1.5rem; line-height: 1.5rem; padding-left: 1.5rem;
}
.selected { background: #4790d4; background: -webkit-linear-gradient( rgba(71, 144, 212, .65), rgba(71, 144, 212, 1) ); background: linear-gradient( rgba(71, 144, 212, .65), rgba(71, 144, 212, 1) ); color: #f7f7f7; border-top: 1px solid #5fa4db; border-bottom: 1px solid #387abf;
}
.column { float: left; width: 12rem; height: 100%; border-right: 1px solid #c7c7c7;
}
.item { position: relative; width: 100%; height: 1.25rem; line-height: 1.25rem; font-size: .75rem; padding-left: .25rem;
}
.icon { padding-right: .25rem; color: #6a7582;
}
.selected .icon { color: #f7f7f7;
}
.title .icon.icon-folder { color: #85b2cd; padding-right: 0;
}
.item .icon.icon-folder { color: #85b2cd;
}
.icon-expand { font-size: .8rem; padding-right: 0;
}
.item .icon-arrow-right { color: #bdbdbd; font-size: 1.1rem; padding-top: .1rem; padding-right: 0;
}
.float-right { float: right;
}
.directions { float: left; width: 3rem; height: 1.25rem; margin-left: .5rem; border: 1px solid #575757; border-radius: .25rem; padding-left: .1rem;
}
.directions span { float: left; color: #979797;
}
.directions .icon-arrow-left { color: #575757;
}
.style { float: left; margin-left: 1.5rem; width: 7rem; height: 1.25rem; border: 1px solid #575757; border-radius: .25rem; font-size: .75rem; color: #575757;
}
.icon-grid, .icon-columns, .icon-uniE608 { position: relative; top: -.15rem;
}
.icon-grid { padding-left: .5rem;
}
.icon-lines { font-size: 1rem;
}
.seperator { position: relative; font-size: 1rem; top: -.2rem; color: #979797;
}
.settings { float: left; margin-left: .5rem; width: 2.5rem; height: 1.25rem; border: 1px solid #575757; border-radius: .25rem; font-size: .8rem; color: #575757;
}
.settings span { position: relative; top: .1rem; left: .35rem;
}
.icon-export, .icon-toggle { padding-left: .5rem;
}

Draggable Finder Window Visualization - Script Codes JS Codes

$(function(){ $('#finder').draggable();
});
Draggable Finder Window Visualization - Script Codes
Draggable Finder Window Visualization - Script Codes
Home Page Home
Developer Charlie Volpe
Username charlie-volpe
Uploaded November 08, 2022
Rating 3
Size 3,666 Kb
Views 22,264
Do you need developer help for Draggable Finder Window Visualization?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Charlie Volpe (charlie-volpe) Script Codes
Name
Heart Shaped Games Redesign
Draggable Node Based VPL Test
Header Line Issue
Draggable Window
Galaxy S3 CSS Template
List Maker
Bouncing Ball
IPad CSS Template
NES Contoller
Layout Resolutions
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!