li as select item using vanilla Javascript - javascript

var dropdown = document.querySelectorAll('.dropdown');
var dropdownArray = Array.prototype.slice.call(dropdown,0);
dropdownArray.forEach(function(el){
var button = el.querySelector('a[data-toggle="dropdown"]'),
menu = el.querySelector('.dropdown-menu'),
arrow = button.querySelector('i.icon-arrow');
button.onclick = function(event) {
if(!menu.hasClass('show')) {
menu.classList.add('show');
menu.classList.remove('hide');
arrow.classList.add('open');
arrow.classList.remove('close');
event.preventDefault();
}
else {
menu.classList.remove('show');
menu.classList.add('hide');
arrow.classList.remove('open');
arrow.classList.add('close');
event.preventDefault();
}
};
})
Element.prototype.hasClass = function(className) {
return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);
};
.text-center {
text-align: center;
}
*,
*:before,
*:after {
-webkit-border-sizing: border-box;
-moz-border-sizing: border-box;
border-sizing: border-box;
}
.container {
width: 350px;
margin: 50px auto;
}
.container > ul {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
.title {
font-family: 'Pacifico';
font-weight: norma;
font-size: 40px;
text-align: center;
line-height: 1.4;
color: #2980B9;
}
.dropdown a {
text-decoration: none;
}
.dropdown [data-toggle="dropdown"] {
position: relative;
display: block;
color: white;
background: #2980B9;
-moz-box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset;
-webkit-box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset;
box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
padding: 10px;
}
.dropdown [data-toggle="dropdown"]:hover {
background: #2c89c6;
}
.dropdown .icon-arrow {
position: absolute;
display: block;
font-size: 0.7em;
color: #fff;
top: 14px;
right: 10px;
}
.dropdown .icon-arrow.open {
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
-webkit-transition: -webkit-transform 0.6s;
transition: transform 0.6s;
}
.dropdown .icon-arrow.close {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
-webkit-transition: -webkit-transform 0.6s;
transition: transform 0.6s;
}
.dropdown .icon-arrow:before {
content: '\25BC';
}
.dropdown .dropdown-menu {
max-height: 0;
overflow: hidden;
list-style: none;
padding: 0;
margin: 0;
}
.dropdown .dropdown-menu li {
padding: 0;
}
.dropdown .dropdown-menu li a {
display: block;
color: #6f6f6f;
background: #EEE;
-moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
-webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
padding: 10px 10px;
}
.dropdown .dropdown-menu li a:hover {
background: #f6f6f6;
}
.dropdown .show,
.dropdown .hide {
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.dropdown .show {
display: block;
max-height: 9999px;
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
animation: showAnimation 0.5s ease-in-out;
-moz-animation: showAnimation 0.5s ease-in-out;
-webkit-animation: showAnimation 0.5s ease-in-out;
-moz-transition: max-height 1s ease-in-out;
-o-transition: max-height 1s ease-in-out;
-webkit-transition: max-height 1s ease-in-out;
transition: max-height 1s ease-in-out;
}
.dropdown .hide {
max-height: 0;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
animation: hideAnimation 0.4s ease-out;
-moz-animation: hideAnimation 0.4s ease-out;
-webkit-animation: hideAnimation 0.4s ease-out;
-moz-transition: max-height 0.6s ease-out;
-o-transition: max-height 0.6s ease-out;
-webkit-transition: max-height 0.6s ease-out;
transition: max-height 0.6s ease-out;
}
#keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
#-moz-keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
#-webkit-keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
#keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
#-moz-keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
#-webkit-keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
<div class="container">
<ul>
<li class="dropdown">
Select Item <i class="icon-arrow"></i>
<ul class="dropdown-menu">
<li>option 1</li>
<li>option 2</li>
<li>option 3</li>
<li>option 4</li>
</ul>
</li>
</ul>
</div>
Drop down works fine. But problem is as I want to use it instead of select tag, so I need to minimize the list field after I select a item. And a way that I can take the data as select item works.
*sorry for bad English.

I really like your custom drop-down menu, especially the CSS you included to give some animation to your menu's expand/collapse actions. I've included a modified version of your snippet, and I hope you'll find it to be of help. I'll explain the revisions I made in what is to follow.
First off, let me begin by noting that I have some minor adjustments to the HTML content. In particular, I included an <input> field before the entire drop-down menu markup with a corresponding <label> element. This has been added to provide a quick manner of illustrating how to capture the value of a particular item from within the selection menu. Now, when you click on one of the drop-down menu's list items, that item's value will be inserted in said <input> field.
Next, you'll probably notice that I've added a few class or id attributes to some relevant HTML elements. This is largely as a matter of convenience and to make their selection (through the appropriate JavaScript selectors) easier. One important addition, however, are the data-attributes used on the .dropdown-menu unordered list element. It is a somewhat common pattern seen in normal <select> form inputs where one adds a data-attribute containing the value of each individual <option> element (similar to what is shown here). I will address this briefly at a later point briefly. Though seemingly redundant, giving some data-attribute (or, alternatively, fixing the value attribute) to the content within the opening and closing tags provides an easy way of referencing that same value later without having to resort to the innerHTML method. For more on data-attributes, see this MDN article.
The first thing to note is that I moved all my var declarations to the very top of the script. In your original snippet, you have three separate variable declarations/assignments within the body of a forEach loop:
dropdownArray.forEach(function(el) {
var button = el.querySelector('a[data-toggle="dropdown"]'),
menu = el.querySelector('.dropdown-menu'),
arrow = button.querySelector('i.icon-arrow');
/* Some more code follows... */
});
This is the first thing I'd point out that could be improved upon. Specifically, this is less than desirable because you are essentially reassigning the value of the button, menu and arrow variables in each iteration of the forEach loop. Since these are, instead, meant as constant references to fixed elements of the DOM, it's advisable to pull these out of the loop and, by extension, just group them alongside your two variables at the very top. You'll also notice that I have replaced the var keyword with the ES6 const keyword. While this does not change anything outright, I did so to emphasize that these are fixed (i.e., constant) references to elements of the DOM and may not be reassigned.
Next, you'll notice I wrote out a function, clickHandler(), that will be used as the callback function to an event listener that will follow. While it's perfectly fine to just write this function inline (i.e., as an anonymous function and argument to the event listener), I have chosen to decouple it into its own space for clarity.
As you had originally done, I too used the preventDefault() method, here doing so as the first statement in the function's body.
Where you previously had 14 lines of code to add/remove the appropriate classes on the menu and arrow elements, I have only 4. It is quite simple to understand how you can condense this. First and foremost, there is no explicit need to divvy these class addition/removal actions into if and/or else blocks. Rather, you can simply make use of the toggle() method on the classList property of the Element API. For this to function correctly, however, it is necessary to seed the menu and arrow HTML elements with the CSS classes appropriate for the initial state: .hide and .close, respectively. You'll see this reflected in the HTML markup.
The last thing to be done with this function is to add an if conditional to check if the target of the user's click is, in fact, one of the drop-down menu's selection boxes (i.e., the <li>s). This can be done in various ways, but perhaps the cleanest is achieved with the contains() method on the Node API. To this end, I began by making a let declaration (again, ES6 syntax) for targ and assigned it to the DOM node upon which the user clicked. (I made a temporary variable to hold this node so that we wouldn't have to repeatedly refer to it as evt.target in the code that follows; this is, furthermore, a good practice and confers performance benefits, if only minor ones, because the JS engine does not have to repeatedly perform lookups but can, instead, refer to a fixed value held in state as a variable). I then specified by if condition, using here the aforementioned contains() method. The provided conditional expression evaluates the binary (true or false) assertion that targ is a descendant node (read: child element) of the .dropdown-menu unordered-list (given by the menu variable). In the event such is true, the value of the <input> element is assigned to be the value of the data-optValue attribute on the clicked <li> element.
let targ = evt.target;
if (menu.contains(targ)) {
selectionInput.value = targ.dataset.optvalue;
}
In the event the target is not a descendant node of menu, it stands to be reasoned that the user either did not click on an entry of the dropdown-menu or that it was the button element. NOTE: As an alternative to assigning the <input> field's value as the value contained in the custom data- attribute, one could also do as shown below:
if (evt.target !== selectMenu && evt.target !== button) {
selectionInput.value = evt.target.innerHTML;
}
I would (at least from a personal point-of-view), discourage this, as it could complicate things should you, for example, add more HTML content nested within the individual <li> tags of the drop-down menu.
Finally, we conclude with adding a simple event handler. In this case, I've attached the click event to the selectMenu element (i.e., the top-level <ul> tag) passing it the aforementioned clickHandler() function as a callback.
const selectMenu = document.querySelector('#custom-select'),
selectionInput = document.querySelector('#input-field'),
dropdown = document.querySelectorAll('.dropdown'),
dropdownArray = Array.prototype.slice.call(dropdown,0),
button = document.querySelector('a[data-toggle="dropdown"]'),
menu = document.querySelector('.dropdown-menu'),
arrow = button.querySelector('i.icon-arrow');
// Event callback function:
function clickHandler(evt) {
evt.preventDefault();
menu.classList.toggle('show');
menu.classList.toggle('hide');
arrow.classList.toggle('open');
arrow.classList.toggle('close');
let targ = evt.target;
if (menu.contains(targ)) {
selectionInput.value = targ.dataset.optvalue;
}
}
// 'Click' event registration:
selectMenu.addEventListener('click', clickHandler, false);
// Purely your code below:
Element.prototype.hasClass = function(className) {
return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);
};
.text-center {
text-align: center;
}
*,
*:before,
*:after {
-webkit-border-sizing: border-box;
-moz-border-sizing: border-box;
border-sizing: border-box;
}
.container {
width: 350px;
margin: 50px auto;
}
.container > ul {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
.title {
font: normal 40px/1.4 'Pacifico', sans-serif;
text-align: center;
color: #2980B9;
}
.dropdown a { text-decoration: none; }
.dropdown [data-toggle="dropdown"] {
position: relative;
display: block;
color: white;
background: #2980B9;
-webkit-box-shadow: 0 1px 0 #409ad5 inset,
0 -1px 0 #20638f inset;
-moz-box-shadow: 0 1px 0 #409ad5 inset,
0 -1px 0 #20638f inset;
box-shadow: 0 1px 0 #409ad5 inset,
0 -1px 0 #20638f inset;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
padding: 10px;
}
.dropdown [data-toggle="dropdown"]:hover { background: #2c89c6; }
.dropdown .icon-arrow {
position: absolute;
display: block;
font-size: 0.7em;
color: #fff;
top: 14px;
right: 10px;
}
.dropdown .icon-arrow.open {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
-webkit-transition: -webkit-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
transition: transform 0.6s;
}
.dropdown .icon-arrow.close {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
-webkit-transition: -webkit-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
transition: transform 0.6s;
}
.dropdown .icon-arrow:before { content: '\25BC'; }
.dropdown .dropdown-menu {
max-height: 0;
overflow: hidden;
list-style: none;
padding: 0;
margin: 0;
}
.dropdown .dropdown-menu li { padding: 0; }
.dropdown .dropdown-menu li a {
display: block;
color: #6f6f6f;
background: #EEE;
-webkit-box-shadow: 0 1px 0 white inset,
0 -1px 0 #d5d5d5 inset;
-moz-box-shadow: 0 1px 0 white inset,
0 -1px 0 #d5d5d5 inset;
box-shadow: 0 1px 0 white inset,
0 -1px 0 #d5d5d5 inset;
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
padding: 10px 10px;
}
.dropdown .dropdown-menu li a:hover {
background: #f6f6f6;
}
.dropdown .show,
.dropdown .hide {
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.dropdown .show {
display: block;
max-height: 9999px;
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
-webkit-animation: showAnimation 0.5s ease-in-out;
-moz-animation: showAnimation 0.5s ease-in-out;
animation: showAnimation 0.5s ease-in-out;
-webkit-transition: max-height 1s ease-in-out;
-moz-transition: max-height 1s ease-in-out;
-o-transition: max-height 1s ease-in-out;
transition: max-height 1s ease-in-out;
}
.dropdown .hide {
max-height: 0;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
animation: hideAnimation 0.4s ease-out;
-moz-animation: hideAnimation 0.4s ease-out;
-webkit-animation: hideAnimation 0.4s ease-out;
-moz-transition: max-height 0.6s ease-out;
-o-transition: max-height 0.6s ease-out;
-webkit-transition: max-height 0.6s ease-out;
transition: max-height 0.6s ease-out;
}
#keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
#-moz-keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
#-webkit-keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
#keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
#-moz-keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
#-webkit-keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
<div class="container">
<label for='input-field'>Selection: </label>
<input type='text' id='input-field' value='' />
<br /><br />
<ul id='custom-select'>
<li class="dropdown">
<a href="#" data-toggle="dropdown">Select Item
<i class="icon-arrow close"></i>
</a>
<ul class="dropdown-menu hide">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</li>
</ul>
</div>

Related

Make a Webpage out of a 3D Cube ?

I´m trying to make a webpage out of a 3D cube with 6 surfaces/pages.
This is the Code of my 3D Cube:
$(document).ready(function(){
$('button').click(function(){
$('button').removeClass('active');
$(this).addClass('active');
});
$('.ft').click(function(){
$('#shape').removeClass().addClass('show-ft');
});
$('.rt').click(function(){
$('#shape').removeClass().addClass('show-rt');
});
$('.lt').click(function(){
$('#shape').removeClass().addClass('show-lt');
});
$('.bk').click(function(){
$('#shape').removeClass().addClass('show-bk');
});
$('.tp').click(function(){
$('#shape').removeClass().addClass('show-tp');
});
$('.bm').click(function(){
$('#shape').removeClass().addClass('show-bm');
});
$('.spinstart').click(function(){
$('#shape').addClass('spin');
});
$('.spinstop').click(function(){
$('#shape').removeClass('spin');
});
});
#main {
margin:0;
padding:0;
border:1px solid #ddd;
background-color:white;
width:800px;
height:500px;
margin:10px auto;
}
.btn-group-wraper {
position:absolute;
top:30px;
left:65px;
}
.shadow {
position:absolute;
width:100px;
height:100px;
box-shadow:0 0 15px white;
box-shadow:inset 0 0 155px white;
background-color:#000 !important;
opacity:.15 !important; -webkit-transform:
rotateX(90deg) translateZ(-100px);
-moz-transform: rotateX(90deg) translateZ(-100px);
}
#container {
width:100%; -webkit-perspective:800px; -moz-
perspective:800px;
perspective:800px; position:relative;
}
#shape {
position:relative; margin:0 auto; top:170px;
width:125px; height:125px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(-5deg) rotateY(-30deg);
-moz-transform: rotateX(-5deg) rotateY(-30deg);
transform: rotateX(-5deg) rotateY(-30deg);
-webkit-transition: -webkit-transform 2s;
-moz-transition: -moz-transform 2s;
transition: transform 2s;
}
#-webkit-keyframes spin {
to { -webkit-transform: rotateX(360deg)
rotateY(360deg);
}
}
#-moz-keyframes spin {
to {
-moz-transform: rotateX(360deg) rotateY(360deg);
}
}
#keyframes spin {
to { transform: rotateX(360deg) rotateY(360deg); }
}
#shape > div {
position:absolute;
width:125px;
height:125px;
border:1px solid white;
background-color:#999;
}
#shape .ft {
-webkit-transform: translateZ(63px);
-moz-transform: translateZ(63px);
transform: translateZ(63px);
}
#shape .rt {
-webkit-transform: rotateY(90deg) translateZ(63px);
-moz-transform: rotateY(90deg) translateZ(63px);
transform: rotateY(90deg) translateZ(63px);
}
#shape .bk { -webkit-transform: rotateY(180deg)
translateZ(63px);
-moz-transform: rotateY(180deg) translateZ(63px);
transform: rotateY(180deg) translateZ(63px);
}
#shape .lt {
-webkit-transform: rotateY(270deg) translateZ(63px);
-moz-transform: rotateY(270deg) translateZ(63px);
transform: rotateY(270deg) translateZ(63px);
}
#shape .tp {
-webkit-transform: rotateX(90deg) translateZ(63px);
-moz-transform: rotateX(90deg) translateZ(63px);
transform: rotateX(90deg) translateZ(63px);
}
#shape .bm {
-webkit-transform: rotateX(270deg) rotateY(0deg)
translateZ(63px);
-moz-transform: rotateX(270deg) rotateY(0deg)
translateZ(63px);
transform: rotateX(270deg) rotateY(0deg)
translateZ(63px);
}
#shape.show-ft {
-webkit-transform: translateZ(63px);
-moz-transform: translateZ(63px);
transform: translateZ(63px);
}
#shape.show-rt {
-webkit-transform: rotateX(360deg) rotateY(-90deg);
-moz-transform: rotateX(360deg) rotateY(-90deg);
transform: rotateX(360deg) rotateY(-90deg);
}
#shape.show-bk {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#shape.show-lt {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
transform: rotateY(90deg);
}
#shape.show-tp {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-webkit-transform: rotateX(-90deg) rotateY(-360deg);
-moz-transform: rotateX(-90deg) rotateY(-360deg);
transform: rotateX(-90deg) rotateY(-360deg);
}
#shape.show-bm {
-webkit-transform: rotateX(90deg) rotateY(360deg);
-moz-transform: rotateX(90deg) rotateY(360deg);
transform: rotateX(90deg) rotateY(360deg);
}
#shape.spin {
-webkit-animation: spin 5s infinite linear;
-moz-animation: spin 5s infinite linear;
animation: spin 5s infinite linear;
}
#shape {
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
-webkit-transform: scale(1);
-webkit-transform: rotateX(-5deg) rotateY(-30deg);
-moz-transform: scale(1);
-moz-transform: rotateX(-5deg) rotateY(-30deg);
transform: scale(1);
transform: rotateX(-5deg) rotateY(-30deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="main">
<div id="container">
<div class="btn-group-wraper">
<div>
<button class="ft">1</button>
<button class="rt">2</button>
<button class="bk">3</button>
<button class="lt">4</button>
<button class="tp">5</button>
<button class="bm">6</button>
</div>
<div>
<button class="spinstart">spin start</button>
<button class="spinstop">spin stop</button>
</div>
</div>
<div id="shape">
<div class="ft" id="#ftid">1</div>
<div class="rt" id="#rtid">2</div>
<div class="bk" id="#bkid">3</div>
<div class="lt" id="#ltid">4</div>
<div class="tp" id="#tpid">5</div>
<div class="bm" id="#ftid">6</div>
</div>
</div>
</div>
To the Fiddle.js:
Fiddle.js
Please ignore the spinstart and spinstop.
To be honest this is not a selfmade code, I found it on a Website and downloaded it there.
As I had no idea about all that 3D stuff I started to learn it but
my knowledge about 3D cubes with css fails at the point optimizing the sizes of the cube.
I tried adding my sites into the:
<div id="shape">
<div class="ft" id="#ftid">1</div>
<div class="rt" id="#rtid">2</div>
<div class="bk" id="#bkid">3</div>
<div class="lt" id="#ltid">4</div>
<div class="tp" id="#tpid">5</div>
<div class="bm" id="#ftid">6</div>
</div>
The Problem about that was, when I do that the cube breaks, meaning it doesn´t rotate correctly anymore, I don´t know if it was because a webpage is bigger than just 1, 2, 3, 4, 5, 6 although I changed the size of the surfaces to auto so they adapt to the webpage´s css.
Maybe I could correct myself if you guys could give me a short explanation or
pointer on this topic.
Please don´t vote this Question down, I did not find anything similar to this topic on the web. I only found simplified examples and tutorials on 3D cubes.
Note:
I not asking for codes, I´m asking for help.

Automatic start Animation CSS3

I have an multipage with slider: I inserted a css3 animation (the famous rocket animation)
I had code:
#outerspace {
position: relative;
height: 400px;
background: #fff;
color: #fff;
}
div.rocket {
position: absolute;
bottom: 10px;
left: 20px;
-webkit-transition: 3s ease-in;
-moz-transition: 3s ease-in;
-o-transition: 3s ease-in;
transition: 3s ease-in;
}
div.rocket div {
width: 92px;
height: 215px;
background: url('https://i.stack.imgur.com/nxion.gif') no-repeat;
-webkit-transition: 2s ease-in-out;
-moz-transition: 2s ease-in-out;
-o-transition: 2s ease-in-out;
transition: 2s ease-in-out;
-webkit-animation: bounceIn 2s;
}
#outerspace:hover div.rocket {
-webkit-transform: translate(0px, -5400px);
-moz-transform: translate(0px, -5400px);
-o-transform: translate(0px, -5400px);
-ms-transform: translate(0px, -5400px);
transform: translate(0px, -5400px);
}
<div id="outerspace">
<div class="rocket">
<div></div>
BoneOS
</div>#outerspace
</div>
How Can I start animation automatically when slide changes?
Soo Plan here is to trigger the animation by adding active class to the outerspace div instead of hover, like below
#outerspace.active div.rocket {
-webkit-transform: translate(0px, -5400px);
-moz-transform: translate(0px, -5400px);
-o-transform: translate(0px, -5400px);
-ms-transform: translate(0px, -5400px);
transform: translate(0px, -5400px);
}
and the trigger it through addclass and removeclass in Jquery.Makesure to set time out to allow time for the transition to take place before removing the class.
$("#outerspace").addClass("active");
setTimeout(function() {
$("#outerspace").removeClass("active");
}, 1000);
I wasnt sure what you wanted to do with the rocket exactly but this codepen link shows the rocket being triggered when the slide changes, i have used simple slider as the question doesnt mention exactly what kind of slider are you using,
http://codepen.io/saa93/full/BQNXJd
You should look into CSS3 animations which will work in almost all the modern browsers without the use of javascript or jQuery.
Here's a JSfiddle to start with, and you will need to add into your slider.
A simple example would be like:
/* Add a keyframe with a name, also add */
#keyframes rocket {
from {
transform: translate(0px, 0);
}
to {
transform: translate(0px, -250px);
}
}
div.rocket {
position: absolute;
bottom: 10px;
left: 20px;
-webkit-transition: 3s ease-in;
-moz-transition: 3s ease-in;
-o-transition: 3s ease-in;
transition: 3s ease-in;
/* Use the animation name with additional properties */
animation-name: rocket;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Working snippet:
#outerspace {
position: relative;
height: 400px;
background: #fff;
color: #fff;
}
div.rocket {
position: absolute;
bottom: 10px;
left: 20px;
-webkit-transition: 3s ease-in;
-moz-transition: 3s ease-in;
-o-transition: 3s ease-in;
transition: 3s ease-in;
-webkit-animation-name: rocket;
-webkit-animation-duration: 3s;
animation-name: rocket;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
div.rocket div {
width: 92px;
height: 215px;
background: url('https://i.stack.imgur.com/nxion.gif') no-repeat;
}
#outerspace:hover div.rocket {
-webkit-transform: translate(0px, -250px);
-moz-transform: translate(0px, -250px);
-o-transform: translate(0px, -250px);
-ms-transform: translate(0px, -250px);
transform: translate(0px, -250px);
}
#-webkit-keyframes rocket {
from {
-webkit-transform: translate(0px, 0);
-moz-transform: translate(0px, 0);
-o-transform: translate(0px, 0);
-ms-transform: translate(0px, 0);
transform: translate(0px, 0);
}
to {
-webkit-transform: translate(0px, -250px);
-moz-transform: translate(0px, -250px);
-o-transform: translate(0px, -250px);
-ms-transform: translate(0px, -250px);
transform: translate(0px, -250px);
}
}
#keyframes rocket {
from {
-webkit-transform: translate(0px, 0);
-moz-transform: translate(0px, 0);
-o-transform: translate(0px, 0);
-ms-transform: translate(0px, 0);
transform: translate(0px, 0);
}
to {
-webkit-transform: translate(0px, -250px);
-moz-transform: translate(0px, -250px);
-o-transform: translate(0px, -250px);
-ms-transform: translate(0px, -250px);
transform: translate(0px, -250px);
}
}
<div id="outerspace">
<div class="rocket">
<div></div>
BoneOS
</div>#outerspace
</div>

Javascript overlay whilst everything loads in background

So i'm a little new to rails and javascript,
I love the look of this, http://codepen.io/msisto/pen/LntJe
Heres the codepen code:
#-webkit-keyframes rotate-forever {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-moz-keyframes rotate-forever {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate-forever {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loading-spinner {
-webkit-animation-duration: 0.75s;
-moz-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: rotate-forever;
-moz-animation-name: rotate-forever;
animation-name: rotate-forever;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
height: 30px;
width: 30px;
border: 8px solid #ffffff;
border-right-color: transparent;
border-radius: 50%;
display: inline-block;
}
body {
background: #774CFF;
}
.loading-spinner {
position: absolute;
top: 50%;
right: 0;
bottom: 0;
left: 50%;
margin: -15px 0 -15px;
}
<body>
<div class="loading-spinner"></div>
</body>
However i'm not sure how i can get this into my application. I'm wanting to have it so that this spins before each page loads.
Any ideas what i can do? any gems for this or?
Rails 4+ comes with Turbolinks gem.
You use this events to show/hide the loading before page loads.

dropzone js onclick submit file upload

upload all files with a single button click.
HTML:
<button id="submit-all">Submit all files</button>
<form action="/target" class="dropzone" id="my-dropzone"></form>
JS:
Dropzone.options.myDropzone = {
// Prevents Dropzone from uploading dropped files immediately
autoProcessQueue: false,
init: function() {
var submitButton = document.querySelector("#submit-all")
myDropzone = this; // closure
submitButton.addEventListener("click", function() {
myDropzone.processQueue(); // Tell Dropzone to process all queued files.
});
// You might want to show the submit button only when
// files are dropped here:
this.on("addedfile", function() {
// Show submit button here and/or inform user to click it.
});
}
};
But the file is upload after drag and drop..
use simple code
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone(element, {
url: "/upload.php",
autoProcessQueue: false,
});
$('#imgsubbutt').click(function(){
myDropzone.processQueue();
});
I accomplished this by placing my dropzone in a div instead of a form, thereby removing the ability for dropzone to automatically POST the uploads to a given URL. The URL I passed to the dropzone instance when I created it is literally 'dummy' since it will never be called. For example,
HTML
<button id="submit-all">Submit all files</button>
<div class="dropzone" id="my-dropzone"></div>
JavaScript
$('#submit-all').on('click', function() {
var files = $('#my-dropzone').get(0).dropzone.getAcceptedFiles();
// Do something with the files.
});
Here how i implement delayed uploading (initiated by click on any button, for an example):
Dropzone implementation
var count = 0;
var addedFilesHash = {};
var myDropzone = new Dropzone("#file_upload-form", {
paramName: "file", // The name that will be used to transfer the file
addRemoveLinks: true,
maxFilesize: 5, // MB
parallelUploads: 5,
uploadMultiple: true,
acceptedFiles: "image/*,.xlsx,.xls,.pdf,.doc,.docx",
maxFiles: 10,
init: function() {
this.on("removedfile", function (file) {
// delete from our dict removed file
delete addedFilesHash[file];
});
},
accept: function(file, done) {
var _id = count++;
file._id = _id;
addedFilesHash[_id] = done;
}
});
Somewhere else
// get all uploaded files in array
var addedFiles = Object.keys(addedFilesHash);
// iterate them
for (var i = 0; i< addedFiles.length; i++) {
// get file obj
var addedFile = addedFiles[i];
// get done function
var doneFile = addedFilesHash[addedFile];
// call done function to upload file to server
doneFile();
}
We override accept and removedFile functions. In accept function we collect file objects and done functions in dict where key is file and value is done function. Later in time, when we are ready to upload added files, we are iterating all done functions for all files in dict addedFilesHash which launches upload progress with progress bar and etc.
I got just finished messing around with this myself- I wanted to add information about the image to a database at the same time as uploading it. Dropping a file opens the input form for the extra info and then the queue needs sending after the form button is pressed.
I finally achieved this by putting a jquery click event handler inside the init 'on add file' function event:
this.on("addedfile", function(file){
var myDropzone = this;
$('#imageinfoCont').animate({left:'4.5%'});//brings form in
$('#imgsubbutt').click(function(){
$('#imageinfoCont').animate({left:'-10000px'}); //hides the form again
myDropzone.processQueue(); //processes the queue
});
});
I am then adding the extra data in a separate 'on sending' function event (could probably do it in the above code but baby steps I think).
Seems to work like a charm.
Although this has been answered, I ran into a situation where I only wanted to submit the queue IF it was a certain type of file. The bug I ran into was it was ignoring processQueue.
this.dropzone = new Dropzone('#my-dropzone', {
autoProcessQueue: false,
});
return this.dropzone.on('addedfile', (function(_this) {
return function(file) {
var IMAGE_EXTENSIONS, ext;
IMAGE_EXTENSIONS = 'png jpg jpeg gif'.split(' ');
ext = (_.last(file.name.split('.'))).toLowerCase();
if (_.include(IMAGE_EXTENSIONS, ext)) {
return console.log('IMAGE!');
} else {
return setTimeout(function() { // HERE!!!!!!!!!!!!!!!!!!!!
return _this.dropzone.processQueue();
}, 10);
}
};
})(this));
I had to use the setTimeout seen above because processQueue did nothing if I didn't defer it in this manner.
Working example
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone('.dropzone-file', {
url: "https://keenthemes.com/scripts/void.php", // Set the url for your upload script location
paramName: "file", // The name that will be used to transfer the file
addRemoveLinks: true,
uploadMultiple: true,
autoProcessQueue: false,
});
$('.upload-files').on('click', function() {
var files = $('.dropzone-file').get(0).dropzone.getAcceptedFiles();
//upload bar
$('.dz-upload').addClass('dz-progress-bar');
// Do something with the files.
console.log(files)
});
.dropzone-file{
border: 1px dashed green;
padding: 1%;
text-align: center;
}
.dropzone-file:hover{
cursor:pointer;
background:whitesmoke;
}
#-webkit-keyframes passing-through {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px);
}
30%,
70% {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
100% {
opacity: 0;
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
}
}
#-moz-keyframes passing-through {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px);
}
30%,
70% {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
100% {
opacity: 0;
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
}
}
#keyframes passing-through {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px);
}
30%,
70% {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
100% {
opacity: 0;
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
}
}
#-webkit-keyframes slide-in {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px);
}
30% {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
}
#-moz-keyframes slide-in {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px);
}
30% {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
}
#keyframes slide-in {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px);
}
30% {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
}
#-webkit-keyframes pulse {
0% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
10% {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
20% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
#-moz-keyframes pulse {
0% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
10% {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
20% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
#keyframes pulse {
0% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
10% {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
20% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
.dropzone-file,
.dropzone-file * {
box-sizing: border-box;
}
.dropzone-file {
min-height: 150px;
border: 2px solid rgba(0, 0, 0, 0.3);
background: #fff;
padding: 20px 20px;
}
.dropzone-file.dz-clickable {
cursor: pointer;
}
.dropzone-file.dz-clickable * {
cursor: default;
}
.dropzone-file.dz-clickable .dz-message,
.dropzone-file.dz-clickable .dz-message * {
cursor: pointer;
}
.dropzone-file.dz-started .dz-message {
display: none;
}
.dropzone-file.dz-drag-hover {
border-style: solid;
}
.dropzone-file.dz-drag-hover .dz-message {
opacity: 0.5;
}
.dropzone-file .dz-message {
text-align: center;
margin: 2em 0;
}
.dropzone-file .dz-message .dz-button {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
.dropzone-file .dz-preview {
position: relative;
display: inline-block;
vertical-align: top;
margin: 16px;
min-height: 100px;
}
.dropzone-file .dz-preview:hover {
z-index: 1000;
}
.dropzone-file .dz-preview:hover .dz-details {
opacity: 1;
}
.dropzone-file .dz-preview.dz-file-preview .dz-image {
border-radius: 20px;
background: #999;
background: linear-gradient(to bottom, #eee, #ddd);
}
.dropzone-file .dz-preview.dz-file-preview .dz-details {
opacity: 1;
}
.dropzone-file .dz-preview.dz-image-preview {
background: #fff;
}
.dropzone-file .dz-preview.dz-image-preview .dz-details {
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-ms-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.dropzone-file .dz-preview .dz-remove {
font-size: 14px;
text-align: center;
display: block;
cursor: pointer;
border: none;
}
.dropzone-file .dz-preview .dz-remove:hover {
text-decoration: underline;
}
.dropzone-file .dz-preview:hover .dz-details {
opacity: 1;
}
.dropzone-file .dz-preview .dz-details {
z-index: 20;
position: absolute;
top: 0;
left: 0;
opacity: 0;
font-size: 13px;
min-width: 100%;
max-width: 100%;
padding: 2em 1em;
text-align: center;
color: rgba(0, 0, 0, 0.9);
line-height: 150%;
}
.dropzone-file .dz-preview .dz-details .dz-size {
margin-bottom: 1em;
font-size: 16px;
}
.dropzone-file .dz-preview .dz-details .dz-filename {
white-space: nowrap;
}
.dropzone-file .dz-preview .dz-details .dz-filename:hover span {
border: 1px solid rgba(200, 200, 200, 0.8);
background-color: rgba(255, 255, 255, 0.8);
}
.dropzone-file .dz-preview .dz-details .dz-filename:not(:hover) {
overflow: hidden;
text-overflow: ellipsis;
}
.dropzone-file .dz-preview .dz-details .dz-filename:not(:hover) span {
border: 1px solid transparent;
}
.dropzone-file .dz-preview .dz-details .dz-filename span,
.dropzone-file .dz-preview .dz-details .dz-size span {
background-color: rgba(255, 255, 255, 0.4);
padding: 0 0.4em;
border-radius: 3px;
}
.dropzone-file .dz-preview:hover .dz-image img {
-webkit-transform: scale(1.05, 1.05);
-moz-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
-webkit-filter: blur(8px);
filter: blur(8px);
}
.dropzone-file .dz-preview .dz-image {
border-radius: 20px;
overflow: hidden;
width: 120px;
height: 120px;
position: relative;
display: block;
z-index: 10;
}
.dropzone-file .dz-preview .dz-image img {
display: block;
}
.dropzone-file .dz-preview.dz-success .dz-success-mark {
-webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
-moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
-ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
-o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
}
.dropzone-file .dz-preview.dz-error .dz-error-mark {
opacity: 1;
-webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
-moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
-ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
-o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
}
.dropzone-file .dz-preview .dz-success-mark,
.dropzone-file .dz-preview .dz-error-mark {
pointer-events: none;
opacity: 0;
z-index: 500;
position: absolute;
display: block;
top: 50%;
left: 50%;
margin-left: -27px;
margin-top: -27px;
}
.dropzone-file .dz-preview .dz-success-mark svg,
.dropzone-file .dz-preview .dz-error-mark svg {
display: block;
width: 54px;
height: 54px;
}
.dropzone-file .dz-preview.dz-processing .dz-progress {
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.dropzone-file .dz-preview.dz-complete .dz-progress {
opacity: 0;
-webkit-transition: opacity 0.4s ease-in;
-moz-transition: opacity 0.4s ease-in;
-ms-transition: opacity 0.4s ease-in;
-o-transition: opacity 0.4s ease-in;
transition: opacity 0.4s ease-in;
}
.dropzone-file .dz-preview:not(.dz-processing) .dz-progress {
-webkit-animation: pulse 6s ease infinite;
-moz-animation: pulse 6s ease infinite;
-ms-animation: pulse 6s ease infinite;
-o-animation: pulse 6s ease infinite;
animation: pulse 6s ease infinite;
}
.dropzone-file .dz-preview .dz-progress {
opacity: 1;
z-index: 1000;
pointer-events: none;
position: absolute;
height: 16px;
left: 50%;
top: 50%;
margin-top: -8px;
width: 80px;
margin-left: -40px;
background: rgba(255, 255, 255, 0.9);
-webkit-transform: scale(1);
border-radius: 8px;
overflow: hidden;
}
.dropzone-file .dz-preview .dz-progress .dz-upload {
background: #333;
background: linear-gradient(to bottom, #666, #444);
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 0;
-webkit-transition: width 300ms ease-in-out;
-moz-transition: width 300ms ease-in-out;
-ms-transition: width 300ms ease-in-out;
-o-transition: width 300ms ease-in-out;
transition: width 300ms ease-in-out;
}
.dropzone-file .dz-preview.dz-error .dz-error-message {
display: block;
}
.dropzone-file .dz-preview.dz-error:hover .dz-error-message {
opacity: 1;
pointer-events: auto;
}
.dropzone-file .dz-preview .dz-error-message {
pointer-events: none;
z-index: 1000;
position: absolute;
display: block;
display: none;
opacity: 0;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
border-radius: 8px;
font-size: 13px;
top: 130px;
left: -10px;
width: 140px;
background: #be2626;
background: linear-gradient(to bottom, #be2626, #a92222);
padding: 0.5em 1.2em;
color: #fff;
}
.dropzone-file .dz-preview .dz-error-message:after {
content: "";
position: absolute;
top: -6px;
left: 64px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #be2626;
}
.dz-progress-bar {
width: 0;
animation: progress 1.5s ease-in-out forwards;
}
#keyframes progress {
from {
width: 0;
}
to {
width: 100%;
}
}
#keyframes show {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/dropzone#5/dist/min/dropzone.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dropzone#5/dist/min/dropzone.min.css" type="text/css" />
<!--begin::Dropzone-->
<div class="dropzone-file fileuploader">
<!--begin::Message-->
<div class="dz-message needsclick">
<!--begin::Icon-->
<i class="bi bi-file-earmark-arrow-up text-primary fs-3x"></i>
<!--end::Icon-->
<!--begin::Info-->
<div class="ms-4">
<h3 class="fs-5 fw-bolder text-gray-900 mb-1">Drop files here or click to upload.</h3>
<span class="fs-7 fw-bold text-gray-400">Upload any kind of files</span>
</div>
<!--end::Info-->
</div>
</div>
<!--end::Dropzone-->
<button class='upload-files'>Upload Files</button>

Jquery Diagonal Scrolling Div

If you look at this plugin: http://cubiq.org/infiniwall
You are able to scroll the div container in any direction, rather than just horizontal or vertical, and you can also change direction during a scroll without needing to remove your finger.
How can I accomplish this? I can't seem to find a plugin that allows it.
Thanks in advance.
I believe you just need <div id="infiniwall"> with var iw = new InfiniWall('#infiniwall'); Also note using <!DOCTYPE html>
https://github.com/cubiq/infiniwall/tree/master/demos/simple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>InfiniWall - Indefinitely panning layer in Javascript</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<script src="../../src/infiniwall.js"></script>
</head>
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body, ul, li {
padding: 0;
margin: 0;
border: 0;
}
#infiniwall {
margin: 140px auto 0 auto;
width: 510px;
height: 420px;
background: #ddd;
overflow: hidden;
position: relative;
}
ul {
position: absolute;
top: -140px;
left: -170px;
width: 850px;
height: 700px;
list-style: none;
-webkit-transform: translate(0px, 0px) translateZ(0);
-moz-transform: translate(0px, 0px) translateZ(0);
-ms-transform: translate(0px, 0px) translateZ(0);
-o-transform: translate(0px, 0px) translateZ(0);
transform: translate(0px, 0px) translateZ(0);
}
li {
display: block;
position: relative;
float: left;
width: 170px;
height: 140px;
-webkit-transform: translate(0px, 0px) translateZ(0);
-moz-transform: translate(0px, 0px) translateZ(0);
-ms-transform: translate(0px, 0px) translateZ(0);
-o-transform: translate(0px, 0px) translateZ(0);
transform: translate(0px, 0px) translateZ(0);
display: block;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
overflow: hidden;
}
li img {
position: absolute;
}
.spinner {
display: block;
position: absolute;
width: 40px;
height: 40px;
left: -9999px;
top: 50%;
margin-top: -35px;
margin-left: -20px;
background: url(images/loading.png) no-repeat;
}
.loading .spinner {
left: 50%;
-webkit-animation: spin 2s linear infinite;
-moz-animation: spin 2s linear infinite;
-o-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#keyframes spin {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-moz-keyframes spin {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-o-keyframes spin {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loading img {
left: -9999px;
}
li span {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(0,0,0,0.6);
color: #fff;
padding: 5px;
font-size: 19px;
}
</style>
<body>
<div id="infiniwall">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
var iw = new InfiniWall('#infiniwall');
</script>
</body>

Categories