Grid Resizable Drag and Drop, Masonery
How do I make an grid resizable drag and drop, masonery?
Drag and Drop me arround ! Fridster play by Locota Eduard. What is a grid resizable drag and drop, masonery? How do you make a grid resizable drag and drop, masonery? This script and codes were developed by Eduard L. on 15 October 2022, Saturday.
Grid Resizable Drag and Drop, Masonery - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Grid Resizable Drag and Drop, Masonery</title> <link rel='stylesheet prefetch' href='http://gridster.net/dist/jquery.gridster.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="gridster"> <ul> <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li> <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li> <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li> <li data-row="1" data-col="2" data-sizex="1" data-sizey="1"> </li> <li data-row="1" data-col="2" data-sizex="2" data-sizey="2"><img src="http://www.cakewalk.com/Documentation/SONAR%20X2/EN/images/Multitouch_Flick.png" alt="Drag me" height="100%" width="100%"></li> <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li> <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li> <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li> <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li> <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li> <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li> <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li> <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li> <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li> <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li> <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li> <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li> <li data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li> <li data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li> <li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li> <li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li> </ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://gridster.net/dist/jquery.gridster.js'></script> <script src="js/index.js"></script>
</body>
</html>
Grid Resizable Drag and Drop, Masonery - Script Codes CSS Codes
body
{ margin:0px; padding:0px; font-family: "Open Sans", arial; background:url('http://wallpapersus.com/wallpapers/2012/06/abstract-blurry-creative-gaussian-blur-720x1152.jpg'); color:#fff; font-weight:300;
}
li
{
border: 1px solid #f0edf0;
background:#ebebeb; margin:10px; float:right; z-index:10;
-webkit-box-shadow: 3px 3px 9px 0px rgba(50, 50, 50, 0.32);
-moz-box-shadow: 3px 3px 9px 0px rgba(50, 50, 50, 0.32);
box-shadow: 3px 3px 9px 0px rgba(50, 50, 50, 0.32);
-webkit-transition:all .3s;
-webkit-transition-timing-function:gradient;
}
li:hover
{ position:absolute; margin:9px; float:left; z-index:20;
padding: .1em;
border: 1px solid #f0edf0;
-webkit-box-shadow: 9px 3px 9px 0px rgba(50, 50, 50, 0.32);
-moz-box-shadow: 9px 3px 9px 0px rgba(50, 50, 50, 0.32);
box-shadow: 9px 3px 9px 0px rgba(50, 50, 50, 0.32);
transition: all .3s linear;
}
li:active
{ position:absolute; margin:10px; float:left; z-index:10;
border: 1px solid #f0edf0;
-webkit-box-shadow: 9px 3px 9px 0px rgba(50, 50, 50, 0.32);
-moz-box-shadow: 9px 3px 9px 0px rgba(50, 50, 50, 0.32);
box-shadow: 9px 3px 9px 0px rgba(50, 50, 50, 0.32);
-webkit-transition:all .3s;
-webkit-transition-timing-function:gradient;
}
ul
{ list-style:none
}
Grid Resizable Drag and Drop, Masonery - Script Codes JS Codes
var gridster;
$(function () { var log = document.getElementById('log'); gridster = $(".gridster ul").gridster({ widget_margins: [10, 10], widget_base_dimensions: [100, 100], min_cols: 6, resize: { enabled: true, resize: function (e, ui, $widget) { resizeBox(); }, stop: function (e, ui, $widget) { resizeBox(); } } }).data('gridster');
});
Developer | Eduard L. |
Username | EduardL |
Uploaded | October 15, 2022 |
Rating | 3.5 |
Size | 2,437 Kb |
Views | 30,360 |
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 |
A Pen by Eduard L. | 3,953 Kb |
Side Sliding Menu CSS | 4,388 Kb |
Draggable add element | 2,642 Kb |
Social Menu | 1,931 Kb |
Sticker.js Peel and drag the edge to unstick te element | 1,962 Kb |
404 not found page | 3,165 Kb |
HackaGlobal | 1,798 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 |
Webkit decolorize | Fivera | 1,675 Kb |
Prototype Responsive Homepage | Heyitsolivia | 7,677 Kb |
Wrap_Test | Mscfourn | 7,503 Kb |
Portfolio Page | HuffmanJ25 | 5,240 Kb |
Adding Items | Valhead | 4,008 Kb |
TinFoil Boats | Chandralil | 4,577 Kb |
Weather App | Kw7oe | 3,162 Kb |
Scarlett Johansson Tribute Page | Diomed | 3,233 Kb |
Bubble animation | Ftabor | 6,565 Kb |
NT Tribute | Skybutterfly | 2,850 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!