Draggable Timeline Demo

Developer
EY-Intuitive
Size
4,548 Kb
Views
4,048
  1. Draggable Timeline Demo Previews
  2. Draggable Timeline Demo HTML Codes
  3. Draggable Timeline Demo CSS Codes
  4. Draggable Timeline Demo JS Codes

How do I make an draggable timeline demo?

What is a draggable timeline demo? How do you make a draggable timeline demo? This script and codes were developed by EY-Intuitive on 17 January 2023, Tuesday.

Draggable Timeline Demo Previews
IQ Test

Draggable Timeline Demo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Draggable Timeline Demo</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="timeline-wrapper container">	<ul class="timeline-list container" data-timeline="">	<li class="col-xs-12">	<div class="timeline-item col-xs-12 col-sm-6">	<span class="timeline-item-triangle"><div></div></span>	<header class="timeline-item-header">	<h1 class="title">1. Lorem Ipsum Dolor Sit Amet</h1>	<button class="ellipsis-button fa fa-ellipsis-h"></button>	</header>	<div class="timeline-item-main-content">	<blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti placeat harum suscipit modi, dolorem adipisci consectetur. Modi laudantium!</blockquote>	</div>	<div class="timeline-item-toolbar">	<button class="timeline-toolbar-button button-mood fa fa-smile-o"></button>	<button class="timeline-toolbar-button button-chat fa fa-comment"></button>	<button class="timeline-toolbar-button button-file fa fa-file-o"></button>	<button class="timeline-toolbar-button button-print fa fa-print"></button>	</div>	<footer class="timeline-item-footer">	<div class="timline-item-timestamp">	<span class="timeline-item-avatar">	<span class="timeline-item-avatar-symbol fa fa-user"></span>	</span>	<span class="timeline-item-updated-time">Just Now</span>	</div>	<button class="open-details-button fa fa-arrow-right"></button>	</footer>	</div>	</li>	<li class="col-xs-12">	<div class="timeline-item col-xs-12 col-sm-6">	<span class="timeline-item-triangle"><div></div></span>	<header class="timeline-item-header">	<h1 class="title">2. Lorem Ipsum Dolor Sit Amet</h1>	<button class="ellipsis-button fa fa-ellipsis-h"></button>	</header>	<div class="timeline-item-main-content">	<blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti placeat harum suscipit modi, dolorem adipisci consectetur!</blockquote>	</div>	<div class="timeline-item-toolbar">	<button class="timeline-toolbar-button button-mood fa fa-smile-o"></button>	<button class="timeline-toolbar-button button-chat fa fa-comment"></button>	<button class="timeline-toolbar-button button-file fa fa-file-o"></button>	<button class="timeline-toolbar-button button-print fa fa-print"></button>	</div>	<footer class="timeline-item-footer">	<div class="timline-item-timestamp">	<span class="timeline-item-avatar">	<span class="timeline-item-avatar-symbol fa fa-user"></span>	</span>	<span class="timeline-item-updated-time">Just Now</span>	</div>	<button class="open-details-button fa fa-arrow-right"></button>	</footer>	</div>	</li>	<li class="col-xs-12">	<div class="timeline-item col-xs-12 col-sm-6">	<span class="timeline-item-triangle"><div></div></span>	<header class="timeline-item-header">	<h1 class="title">3. Lorem Ipsum Dolor Sit Amet</h1>	<button class="ellipsis-button fa fa-ellipsis-h"></button>	</header>	<div class="timeline-item-main-content">	<blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti placeat harum suscipit modi, dolorem adipisci consectetur!</blockquote>	</div>	<div class="timeline-item-toolbar">	<button class="timeline-toolbar-button button-mood fa fa-smile-o"></button>	<button class="timeline-toolbar-button button-chat fa fa-comment"></button>	<button class="timeline-toolbar-button button-file fa fa-file-o"></button>	<button class="timeline-toolbar-button button-print fa fa-print"></button>	</div>	<footer class="timeline-item-footer">	<div class="timline-item-timestamp">	<span class="timeline-item-avatar">	<span class="timeline-item-avatar-symbol fa fa-user"></span>	</span>	<span class="timeline-item-updated-time">Just Now</span>	</div>	<button class="open-details-button fa fa-arrow-right"></button>	</footer>	</div>	</li>	<li class="col-xs-12">	<div class="timeline-item col-xs-12 col-sm-6">	<span class="timeline-item-triangle"><div></div></span>	<header class="timeline-item-header">	<h1 class="title">4. Lorem Ipsum Dolor Sit Amet</h1>	<button class="ellipsis-button fa fa-ellipsis-h"></button>	</header>	<div class="timeline-item-main-content">	<blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti placeat harum suscipit modi, dolorem adipisci consectetur!</blockquote>	</div>	<div class="timeline-item-toolbar">	<button class="timeline-toolbar-button button-mood fa fa-smile-o"></button>	<button class="timeline-toolbar-button button-chat fa fa-comment"></button>	<button class="timeline-toolbar-button button-file fa fa-file-o"></button>	<button class="timeline-toolbar-button button-print fa fa-print"></button>	</div>	<footer class="timeline-item-footer">	<div class="timline-item-timestamp">	<span class="timeline-item-avatar">	<span class="timeline-item-avatar-symbol fa fa-user"></span>	</span>	<span class="timeline-item-updated-time">Just Now</span>	</div>	<button class="open-details-button fa fa-arrow-right"></button>	</footer>	</div>	</li>	</ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Draggable Timeline Demo - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300;
}
.timeline-wrapper { position: relative; padding-top: 50px;
}
.timeline-list { border-left: 2px solid rgba(0, 0, 0, 0.2);
}
.timeline-list li { -webkit-transition: padding-top 0.2s ease; transition: padding-top 0.2s ease; margin: 10px 0;
}
.timeline-item { position: relative; border: 2px solid #777; border-radius: 4px; padding-top: 15px; padding-bottom: 15px; background: white;
}
.timeline-item:before { content: ""; width: 10px; height: 10px; position: absolute; background: #333; top: 25px; left: -38px; border-radius: 20px; border: 2px solid white; box-shadow: 0 0 0 2px #333;
}
.timeline-item-triangle { position: absolute; left: -15px; top: 15px; display: inline-block; width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 15px solid #777; -webkit-transform: rotate(180deg); transform: rotate(180deg);
}
.timeline-item-triangle div { width: 0; position: relative; top: -12px; left: -15px; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 12px solid white;
}
h1 { font-size: 20px; line-height: 30px; margin: 0 0 10px 0; padding-right: 30px;
}
.ellipsis-button { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; position: absolute; top: 18px; right: 15px; background: transparent; border: none; outline: none; font-size: 20px; color: rgba(0, 0, 0, 0.8);
}
.ellipsis-button:hover { color: rgba(0, 0, 0, 0.6);
}
blockquote { position: relative; border: none; padding: 0 50px; margin: 0 0 15px 0; font-size: 14px;
}
blockquote:before { content: "\f10d"; top: -12px; left: 0;
}
blockquote:after { content: "\f10e"; bottom: -20px; right: 0;
}
blockquote:before,
blockquote:after { position: absolute; font-family: "FontAwesome"; font-size: 30px; padding: 10px; color: rgba(0, 0, 0, 0.8);
}
.timeline-item-header { cursor: move;
}
.timeline-item-avatar { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; border: 1px solid rgba(0, 0, 0, 0.8); border-radius: 50px; padding: 8px 12px; display: inline-block; margin-right: 5px;
}
.timeline-item-avatar .timeline-item-avatar-symbol { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; font-size: 25px; color: rgba(0, 0, 0, 0.8);
}
.timeline-item-avatar:hover { border: 1px solid rgba(0, 0, 0, 0.6);
}
.timeline-item-avatar:hover .timeline-item-avatar-symbol { color: rgba(0, 0, 0, 0.6);
}
.timeline-item-updated-time { position: relative; top: -2px;
}
.timeline-item-toolbar { margin-bottom: 15px;
}
.timeline-toolbar-button { width: 30px; height: 30px; background: rgba(0, 0, 0, 0.6); outline: none; border: none; color: white; font-size: 18px; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;
}
.timeline-toolbar-button:hover { background: rgba(0, 0, 0, 0.4);
}
.timeline-item-footer { position: relative;
}
.timeline-item-footer .open-details-button { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; position: absolute; right: 0; top: 50%; background: white; border: 1px solid rgba(0, 0, 0, 0.8); border-radius: 100px; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 25px; border-radius: 50px; padding: 8px 12px; color: rgba(0, 0, 0, 0.8);
}
.timeline-item-footer .open-details-button:hover { border: 1px solid rgba(0, 0, 0, 0.6); color: rgba(0, 0, 0, 0.6);
}
.ui-sortable-placeholder { border: 2px dashed rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0);
}

Draggable Timeline Demo - Script Codes JS Codes

var setPadding = function(atHeight) { rule.cssText = 'border-top-width: '+200+'px';	};
$( "[data-timeline]" ).sortable({	connectWith: ".timeline-list",	distance: 5,	axis: "y",	handle: '.timeline-item-header',	tolerance: "intersect",	cursor: "move",	forcePlaceholderSize: true,	forceHelperSize: true,	placeholder: "ui-sortable-placeholder col-xs-12",	start: function(e, ui){	//ui.placeholder.height(ui.item.height());	//$('.ui-sortable-placeholder').css('padding-top', ui.item.height() + 'px');	//$('.ui-sortable-placeholder').next().css('padding-top', ui.item.height() + 'px');	},	sort: function(e, ui) {	$('.timeline-list li').css('padding-top', '0');	$('.ui-sortable-placeholder').next('li').css('padding-top', 100 + 'px');	},	stop: function() {	$('.timeline-list li').css('padding-top', '0');	}
});
Draggable Timeline Demo - Script Codes
Draggable Timeline Demo - Script Codes
Home Page Home
Developer EY-Intuitive
Username ey_intuitive
Uploaded January 17, 2023
Rating 3
Size 4,548 Kb
Views 4,048
Do you need developer help for Draggable Timeline Demo?

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!

EY-Intuitive (ey_intuitive) Script Codes
Name
Awesome Full Page Menu Nav
Animated Menu with Submenus
Facebook Paper Inspired Menu
Reading Interaction
Pure CSS3 Flyout Navigation
Underscore templates - Example 3
Progress Button Animation
Hidden Push Nav with Flyouts
Star Wars Name Generator
Google Material Design Nav Submenu Animation
Create amazing sales emails 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!