Skip to content

Commit

Permalink
Demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@jadus
jadus committed Nov 29, 2015
1 parent a6e3210 commit ceed7f5
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 52 deletions.
92 changes: 46 additions & 46 deletions demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,22 @@
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>jquery-SortScroll</title>
<title>jQuery sortScroll</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css">
<link rel="stylesheet" href="https://rawgit.com/jadus/jquery-sortScroll/master/jquery.sortScroll.js">
<!--<link rel="stylesheet" href="https://rawgit.com/jadus/jquery-sortScroll/master/jquery.sortScroll.css">-->
<link rel="stylesheet" href="jquery.sortScroll.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="container">
<h1 class="center">jquery-sortScroll</h1>
<h4 class="center">Sorting without moving !</h4>
<a href="https://github.com/jadus/jquery-sortScroll"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
</header>
<div class="container sort-scroll" data-sortable-class="element" data-button-up-class="button-up" data-button-down-class="button-down">
<div class="card element z-depth-0">
<div class="container sort-scroll-container">
<div class="card sort-scroll-element z-depth-0">
<div class="card-content">
<h4>Demo</h4>

Expand All @@ -25,39 +27,39 @@ <h4>Demo</h4>
</p>
</div>
<div class="card-action">
<a href="#" class="button-up"><i class="material-icons">arrow_upward</i></a>
<a href="#" class="button-down"><i class="material-icons">arrow_downward</i></a>
<a href="#" class="sort-scroll-button-up"><i class="material-icons">arrow_upward</i></a>
<a href="#" class="sort-scroll-button-down"><i class="material-icons">arrow_downward</i></a>
</div>
</div>

<div class="card element z-depth-0">
<div class="card sort-scroll-element z-depth-0">
<div class="card-content">
<h4>Set-up</h4>
<pre><code class="language-markup">&lt;!DOCTYPE html>
&lt;html lang="en-us">
&lt;head>

&lt;!-- insert css -->
&lt;link rel="stylesheet" href="jquery.sortScroll.css">
&lt;link rel="stylesheet" href="http://cdn.rawgit.com/jadus/jquery-sortScroll/master/jquery.sortScroll.css">
&lt;/head>
&lt;body>

&lt;!-- insert jquery.sortScroll.js after jquery core -->
&lt;script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js">&lt;/script>
&lt;script type="text/javascript" src="jquery.sortScroll.js">&lt;/script>
&lt;script type="text/javascript" src="http://cdn.rawgit.com/jadus/jquery-sortScroll/master/jquery.sortScroll.js">&lt;/script>
&lt;/body></code></pre>
</div>
<div class="card-action">
<a href="#" class="button-up"><i class="material-icons">arrow_upward</i></a>
<a href="#" class="button-down"><i class="material-icons">arrow_downward</i></a>
<a href="#" class="sort-scroll-button-up"><i class="material-icons">arrow_upward</i></a>
<a href="#" class="sort-scroll-button-down"><i class="material-icons">arrow_downward</i></a>
</div>
</div>
<div class="card element z-depth-0">
<div class="card sort-scroll-element z-depth-0">
<div class="card-content">
<h4>Basic usage</h4>
<pre><code class="language-markup">&lt;!-- automatic initialization using default css classes -->
&lt;div class="sort-scroll">
&lt;div class="sort-scroll-element">
<pre><code class="language-markup">&lt;!-- automatic initialization using css classes and data attributes-->
&lt;div class="sort-scroll-container">
&lt;div class="sort-scroll-element" data-animation-duration="1000" data-easing="swing">
content1
&lt;button class="sort-scroll-button-up">up&lt;/button>
&lt;button class="sort-scroll-button-down">down&lt;/button>
Expand All @@ -75,79 +77,77 @@ <h4>Basic usage</h4>
&lt;/div></code></pre>
</div>
<div class="card-action">
<a href="#" class="button-up"><i class="material-icons">arrow_upward</i></a>
<a href="#" class="button-down"><i class="material-icons">arrow_downward</i></a>
<a href="#" class="sort-scroll-button-up"><i class="material-icons">arrow_upward</i></a>
<a href="#" class="sort-scroll-button-down"><i class="material-icons">arrow_downward</i></a>
</div>
</div>
<div class="card element z-depth-0">
<div class="card sort-scroll-element z-depth-0">
<div class="card-content">
<h4>Styling</h4>
<pre><code class="language-css">/**jQuery-sortScroll is adding .sort-scroll-sorting to the element being sorted**/
.sort-scroll-sorting{
opacity: 0.6;
}
</code></pre>
</div>
<div class="card-action">
<a href="#" class="sort-scroll-button-up"><i class="material-icons">arrow_upward</i></a>
<a href="#" class="sort-scroll-button-down"><i class="material-icons">arrow_downward</i></a>
</div>
</div>
<div class="card sort-scroll-element z-depth-0">
<div class="card-content">
<h4>Javascript initialization</h4>
<pre><code class="language-javascript">//showing default options here
$(".my-container-class").sortScroll({
sortableClass: "sort-scroll-element",//css class for sortable elements
movingClass: "sort-scroll-moving",//css class applied to the element being sorted
buttonUpClass: "sort-scroll-button-up",//css class for moving up button
buttonDownClass: "sort-scroll-button-down",//css class for moving down button
animationDuration: 1000,// duration of the animation in ms
easing: "swing"// easing type for the animation
});</code></pre>
</div>
<div class="card-action">
<a href="#" class="button-up"><i class="material-icons">arrow_upward</i></a>
<a href="#" class="button-down"><i class="material-icons">arrow_downward</i></a>
</div>
</div>
<div class="card element z-depth-0">
<div class="card-content">
<h4>Data attributes initialization</h4>
<pre><code class="language-markup">&lt;!-- no need for javascript-->
&lt;div class="sort-scroll" data-animation-duration="2000">
...
&lt;/div></code></pre>
</div>
<div class="card-action">
<a href="#" class="button-up"><i class="material-icons">arrow_upward</i></a>
<a href="#" class="button-down"><i class="material-icons">arrow_downward</i></a>
<a href="#" class="sort-scroll-button-up"><i class="material-icons">arrow_upward</i></a>
<a href="#" class="sort-scroll-button-down"><i class="material-icons">arrow_downward</i></a>
</div>
</div>
<div class="card element z-depth-0">
<div class="card-content">
<h4>Programmatic sorting</h4>
<pre><code class="language-javascript">//you can sort without buttons if you want
//here we move the element in slot 3 (zero based) 2 slots up (in slot 1)
$('.my-container-class').sortScroll('moveElement',3,-2)</code></pre>
$('.my-container-class').sortScroll('sortElement',3,-2)</code></pre>
</div>
<div class="card-action">
<a href="#" class="button-up"><i class="material-icons">arrow_upward</i></a>
<a href="#" class="button-down"><i class="material-icons">arrow_downward</i></a>
<a href="#" class="sort-scroll-button-up"><i class="material-icons">arrow_upward</i></a>
<a href="#" class="sort-scroll-button-down"><i class="material-icons">arrow_downward</i></a>
</div>
</div>
<div class="card element z-depth-0">
<div class="card sort-scroll-element z-depth-0">
<div class="card-content">
<h4>Events</h4>
<pre><code class="language-javascript">//you can do something when sorting starts and when it's done
$('.my-container-class').on('sortScroll.sortStart', function(event, element, initialOrder, destinationOrder)
{
var title = element.find('h2').text();
console.log("element named "+title+" is moving from slot n°"+initialOrder+" to slot n°"+destinationOrder);
console.log("element named "+title+" is being reordered from slot n°"+initialOrder+" to slot n°"+destinationOrder);
}

$('.my-container-class').on('sortScroll.sortEnd', function(event, element, initialOrder, destinationOrder)
{
var title = element.find('h2').text();
console.log("element named "+title+" was moved from slot n°"+initialOrder+" to slot n°"+destinationOrder);
console.log("element named "+title+" was reordered from slot n°"+initialOrder+" to slot n°"+destinationOrder);
}</code></pre>
</div>
<div class="card-action">
<a href="#" class="button-up"><i class="material-icons">arrow_upward</i></a>
<a href="#" class="button-down"><i class="material-icons">arrow_downward</i></a>
<a href="#" class="sort-scroll-button-up"><i class="material-icons">arrow_upward</i></a>
<a href="#" class="sort-scroll-button-down"><i class="material-icons">arrow_downward</i></a>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/jadus/jquery-sortScroll/master/jquery.sortScroll.css"></script>
<!--<script type="text/javascript" src="https://rawgit.com/jadus/jquery-sortScroll/master/jquery.sortScroll.js"></script>-->
<script type="text/javascript" src="jquery.sortScroll.js"></script>
<script type="text/javascript">
$('.container').on('sortScroll.sortStart sortScroll.sortEnd', function (event, element, initialOrder, destinationOrder) {
element.toggleClass("z-depth-1");
Expand Down
8 changes: 2 additions & 6 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,4 @@
.card-title:first-letter {
font-size: 50px
}

.sort-scroll-moving {
z-index: 2;
.sort-scroll-sorting {
opacity: 0.6;
}
}

0 comments on commit ceed7f5

Please sign in to comment.