Calender UI
How do I make an calender ui?
Design by codemarkie (BBC iPlayer TV Guide inspired). What is a calender ui? How do you make a calender ui? This script and codes were developed by Charlie Walter on 11 January 2023, Wednesday.
Calender UI - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Calender UI</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="calender"> <header> <div id="scrubber"> </div> <a href="#9am" class="time">9 am</a> <a href="#10am" class="time">10 am</a> <a href="#11am" class="time">11 am</a> <a href="#12pm" class="time">12 pm</a> <a href="#1pm" class="time">1 pm</a> <a href="#2pm" class="time">2 pm</a> <a href="#3pm" class="time">3 pm</a> <a href="#4pm" class="time">4 pm</a> <a href="#5pm" class="time">5 pm</a> <a href="#6pm" class="time">6 pm</a> <a href="#7pm" class="time">7 pm</a> <a href="#8pm" class="time">8 pm</a> </header> <div id="location"> <ul> <li><h3>Consectetur<span>Lorem ipsum</span></h3></li> <li><h3>Dolorem<span>Lorem ipsum</span></h3></li> <!--li><h3>Adipisicing<span>Lorem ipsum</span></h3></li> <li><h3>Voluptas<span>Lorem ipsum</span></h3></li> <li><h3>Architecto<span>Lorem ipsum</span></h3></li> <li><h3>Sint<span>Lorem ipsum</span></h3></li--> </ul> </div> <div id="main"> <div class="times"> <div id="9am">9 am</div> <div id="9:30am">9:30 am</div> <div id="10am">10 am</div> <div id="10:30am">10:30 am</div> <div id="11am">11 am</div> <div id="11:30am">11:30 am</div> <div id="12pm">12 pm</div> <div id="12:30pm">12:30 pm</div> <div id="1pm">1 pm</div> <div id="1:30pm">1:30 pm</div> <div id="2pm">2 pm</div> <div id="2:30pm">2:30 pm</div> <div id="3pm">3 pm</div> <div id="3:30pm">3:30 pm</div> <div id="4pm">4 pm</div> <div id="4:30pm">4:30 pm</div> <div id="5pm">5 pm</div> <div id="5:30pm">5:30 pm</div> <div id="6pm">6 pm</div> <div id="6:30pm">6:30 pm</div> <div id="7pm">7 pm</div> <div id="7:30pm">7:30 pm</div> <div id="8pm">8 pm</div> <div id="8:30pm">8:30 pm</div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Calender UI - Script Codes CSS Codes
body { background: #999; font-family: Open sans, Helvetica, Arial; color: #333; font-weight: lighter;
}
#calender { background: white; width: 90%; margin: 0 auto; position: relative;
}
#calender #scrubber { position: absolute; left: 0; top: 0; background: dodgerblue; width: 8.333333333333333%; height: 10px;
}
#calender .time { width: 8.333333333333333%; padding: 1em; display: block; float: left; text-decoration: none; color: #999; background: #ddd;
}
#calender .time:hover { color: #666; background: #ccc;
}
#calender .time.selected { color: #333; background: white;
}
#location { width: 20%; float: left; background: white;
}
#location ul { padding: 0; margin: 0; margin-top: 1em;
}
#location li { list-style: none;
}
#main { width: 80%; overflow: auto; float: right; background: #666;
}
.times { width: 9648px; height: 100px;
}
.times > div { float: left; background-color: whitesmoke; border-left: 1px solid #ccc; width: 400px; padding: 5px 5px 15px 5px;
}
.box-sizing, #calender .time, .times > div { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
h3 { font-weight: lighter; padding: 1em;
}
h3 span { display: block; font-size: 0.75em; color: #666;
}
Calender UI - Script Codes JS Codes
$(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); var childPos = target.offset(), parentPos = target.parent().offset(), posInRelationToParent = childPos.left - parentPos.left; target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('#main').stop().animate({ scrollLeft: posInRelationToParent }, 250); return false; } } });
});
var block_width = $('#main').width()/2, block_count = $('#main .times > div').length;
$('.times > div').css('width', block_width);
$('.times').css('width', block_width * block_count);
$('#main').scroll(function(e){ $('#scrubber').css('left',($(this).scrollLeft()/$(this).get(0).scrollWidth)*100 + "%");
});
Developer | Charlie Walter |
Username | cjonasw |
Uploaded | January 11, 2023 |
Rating | 3 |
Size | 3,513 Kb |
Views | 10,120 |
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!
Name | Size |
Animating Scrolling | 3,221 Kb |
Growing Root - Scroll control - CANVAS | 2,342 Kb |
Projection - Tank Three.js | 3,182 Kb |
Charliejwalter.net | 4,688 Kb |
MMORPG UI | 7,869 Kb |
Login form | 3,129 Kb |
JQuery countdown | 4,386 Kb |
CSS3 Carousel | 3,346 Kb |
Facebook tabs with AngularJS | 3,539 Kb |
Flash CC HTML5 Canvas | 14,083 Kb |
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!
Name | Username | Size |
Slider for stackoverflow | KKOKU | 3,222 Kb |
Loading... | Adamjacob | 2,384 Kb |
Factorial | KeithleySLHS | 1,158 Kb |
SVG Playground | Roygwells | 1,834 Kb |
STAR WARS LIGHTSABER | Francoiscoron | 4,420 Kb |
Toggle menu | Seyedi | 2,279 Kb |
3D-box | Parthviroja | 2,346 Kb |
About Mazano | Kiti | 2,585 Kb |
Materializecss input form | Jasonchan | 1,443 Kb |
Buttons with style | Chbymnky | 2,082 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!