How to pass variables to this results div within another function - javascript

EDIT: UPDATED jsfiddle (https://jsfiddle.net/3ow12Lk0/2/)
https://jsfiddle.net/gb8qsrzc/
Im trying to pass variables to pbModal.open
buttonAmount, amountType, toAddress, successField, successMsg, successCallback, bchAmount
(towards bottom of JS), then to function buildOut:
function buildOut(buttonAmount, amountType, toAddress, successField, successMsg, successCallback, bchAmount) {}
in order to display "results" in modal with
// Create content area and append to modal
resultHolder = document.createElement("div");
resultHolder.className = "paybutton-content";
resultHolder.id = "result";
resultHolder.innerHTML = (buttonAmount + " " + amountType + " = " + bchAmount/100000000 + " BCH");
this.modal.appendChild(resultHolder);
Being new, I dont know what to call this.
Attempting to get anything to work, I attempted to just pass all variables anywhere and Im not sure Im even close to doing this correctly.
The code I am working on is here: https://jsfiddle.net/gb8qsrzc/
And the modal original is here for reference https://jsfiddle.net/theranjitkumar/1yhthrv8/
how should I be passing variables from buttons to the modal?
EDIT: UPDATED jsfiddle (https://jsfiddle.net/3ow12Lk0/2/)


I think the issue is related to the fact that you are not passing the parameters in the constructor of the modal. i.e. :
var pbModal = new Modal({
content: pbContent,
buttonAmount: buttonAmount,
amountType: amountType,
toAddress: toAddress,
successField: successField,
successMsg: successMsg,
successCallback: successCallback,
bchAmount: bchAmount
});
pbModal.open();
You can try the code above as illustrated in the sample below.
Also, you may want to have another look at the rate/conversion calculations... they seemed incorrect to me but I am not sure what the right formula should be so I didn't try to fix that :)
// Create an immediately invoked functional expression to wrap our code
(function() {
// Define our constructor
this.Modal = function(buttonAmount, amountType, toAddress, successField, successMsg, successCallback, bchAmount) {
// Create global element references
this.closeButton = null;
this.modal = null;
this.overlay = null;
// Determine proper prefix
this.transitionEnd = transitionSelect();
// Define option defaults
var defaults = {
autoOpen: false,
className: 'fade-and-drop',
closeButton: false,
content: "",
maxWidth: 270,
minWidth: 250,
overlay: true
}
// Create options by extending defaults with the passed in arugments
if (arguments[0] && typeof arguments[0] === "object") {
this.options = extendDefaults(defaults, arguments[0]);
}
if (this.options.autoOpen === true){
this.open();
}
}
// Public Methods
Modal.prototype.close = function() {
var _ = this;
this.modal.className = this.modal.className.replace(" paybutton-open", "");
this.overlay.className = this.overlay.className.replace(" paybutton-open",
"");
this.modal.addEventListener(this.transitionEnd, function() {
_.modal.parentNode.removeChild(_.modal);
});
this.overlay.addEventListener(this.transitionEnd, function() {
if (_.overlay.parentNode) _.overlay.parentNode.removeChild(_.overlay);
});
}
Modal.prototype.open = function() {
buildOut.call(this);
initializeEvents.call(this);
window.getComputedStyle(this.modal).height;
this.modal.className = this.modal.className +
(this.modal.offsetHeight > window.innerHeight ?
" paybutton-open paybutton-anchored" : " paybutton-open");
this.overlay.className = this.overlay.className + " paybutton-open";
}
// Private Methods
function buildOut(buttonAmount, amountType, toAddress, successField, successMsg, successCallback, bchAmount) {
var content, contentHolder, docFrag, resultHolder, buttonAmount, amountType, toAddress, successField, successMsg, successCallback, bchAmount;
/*
* If content is an HTML string, append the HTML string.
* If content is a domNode, append its content.
*/
if (typeof this.options.content === "string") {
content = this.options.content;
} else {
content = this.options.content.innerHTML;
}
// Create a DocumentFragment to build with
docFrag = document.createDocumentFragment();
// Create modal element
this.modal = document.createElement("div");
this.modal.className = "paybutton-modal " + this.options.className;
this.modal.style.minWidth = this.options.minWidth + "px";
this.modal.style.maxWidth = this.options.maxWidth + "px";
// If closeButton option is true, add a close button
if (this.options.closeButton === true) {
this.closeButton = document.createElement("button");
this.closeButton.className = "paybutton-close close-button";
this.closeButton.innerHTML = "×";
this.modal.appendChild(this.closeButton);
}
// If overlay is true, add one
if (this.options.overlay === true) {
this.overlay = document.createElement("div");
this.overlay.className = "paybutton-overlay " + this.options.className;
docFrag.appendChild(this.overlay);
}
// Create content area and append to modal
contentHolder = document.createElement("div");
contentHolder.className = "paybutton-content";
contentHolder.innerHTML = content;
this.modal.appendChild(contentHolder);
// Create content area and append to modal
resultHolder = document.createElement("div");
resultHolder.className = "paybutton-content";
resultHolder.id = "result";
resultHolder.innerHTML = (this.options.buttonAmount + " " + this.options.amountType + " = " + this.options.bchAmount / 100000000 + " BCH");
this.modal.appendChild(resultHolder);
// Append modal to DocumentFragment
docFrag.appendChild(this.modal);
// Append DocumentFragment to body
document.body.appendChild(docFrag);
}
function extendDefaults(source, properties) {
var property;
for (property in properties) {
if (properties.hasOwnProperty(property)) {
source[property] = properties[property];
}
}
return source;
}
function initializeEvents() {
if (this.closeButton) {
this.closeButton.addEventListener('click', this.close.bind(this));
}
if (this.overlay) {
this.overlay.addEventListener('click', this.close.bind(this));
}
}
function transitionSelect() {
var el = document.createElement("div");
if (el.style.WebkitTransition) return "webkitTransitionEnd";
if (el.style.OTransition) return "oTransitionEnd";
return 'transitionend';
}
var payButton = document.getElementsByClassName("pay-button");
for (var i = 0; i < payButton.length; i++) {
var payButtons = payButton[i];
// pull in attribute info from button when clicked
payButtons.addEventListener("click", function(event) {
var buttonAmount = this.getAttribute("amount");
var amountType = this.getAttribute("amount-type");
var toAddress = this.getAttribute("address");
var successField = this.getAttribute("success-field");
var successMsg = this.getAttribute("success-msg");
var successCallback = this.getAttribute("data-success-callback");
var bchAmount;
var test = "test message";
// check if amount type is set to bch or fiat
if (amountType === "BCH") {
bchAmount = 100000000 * buttonAmount;
} else if (amountType === "Satoshi") {
bchAmount = buttonAmount;
}
var qr = new QRious({
element: document.getElementById('qr'),
value: toAddress + "?amount=" + bchAmount,
background: 'white', // background color
foreground: 'black', // foreground color
backgroundAlpha: 1,
foregroundAlpha: 1,
level: 'M',
mime: 'image/png',
size: 250,
padding: null
});
var qrdecoded = qr.toDataURL();
var pbContent =
'<div>' + '<div>' +'<div>' +
'<div><img src="' + qrdecoded + '"></div>' +
'</div>' +
'<div>' +
'<div class="addressdiv"><span>Click QR code to Copy Address</span></div>' +
'</div>' +
'<div>' +
'<div class="amountdiv"><span>Amount = ' + bchAmount + ' BCH</span></div>' +
'</div>' +
'<div>' +
'<div><button class="pbmodal-button"><span>Open in BitcoinCash Wallet</span></button>' +
'</div>' +
'<div>' +
'<div><button class="pbmodal-button"><span>Send BCH with Badger Wallet</span></button></div>' +
'</div>' +
'<div>' +
'<div><button class="pbmodal-button"><span>Send BCH with Telecope Wallet</span></button></div>' +
'</div>' +
'<div>' +
'<div id = "result"></div>' +
'</div>' +
'</div>' +
'</div>';
var pbModal = new Modal({
content: pbContent,
buttonAmount: buttonAmount,
amountType: amountType,
toAddress: toAddress,
successField: successField,
successMsg: successMsg,
successCallback: successCallback,
bchAmount: bchAmount
});
pbModal.open();
});
}
}());
body {
font-family: Helvetica, Arial, san-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
.pay-button {
border-radius: 4px;
cursor: pointer;
border: 2px solid orangeRed;
background: transparent;
position: relative;
padding: 0px;
min-width: 150px;
margin: 5px;
color: #fff;
/*For IE*/
}
.pay-button>span {
display: inline-block;
padding: 8px 16px;
background: linear-gradient(45deg, #fff 50%, orangeRed 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.pay-button:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(45deg, orangeRed 50%, transparent 50%);
z-index: -1;
}
.pay-button>span,
.pay-button:after {
background-size: 300%;
background-position: 100%;
transition: .6s, font-size 0.2s;
}
.pay-button:hover>span,
.pay-button:hover:after {
background-position: 0;
font-size: 1.1em;
color: orangeRed;
/*For IE*/
}
.pbmodal-button {
border-radius: 4px;
cursor: pointer;
border: 2px solid orangeRed;
background: transparent;
position: relative;
padding: 0px;
width: 240px;
margin: 0px 0px 10px 0px;
color: #fff;
/*For IE*/
}
.pbmodal-button>span {
display: inline-block;
padding: 8px 16px;
background: linear-gradient(45deg, #fff 50%, orangeRed 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.pbmodal-button:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(45deg, orangeRed 50%, transparent 50%);
z-index: -1;
}
.pbmodal-button>span,
.pbmodal-button:after {
background-size: 300%;
background-position: 100%;
transition: .6s, font-size .2s;
}
.pbmodal-button:hover>span,
.pbmodal-button:hover:after {
background-position: 0;
font-size: 1.08em;
color: orangeRed;
/*For IE*/
}
/* Modal Base CSS */
.paybutton-overlay {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
-webkit-transition: 1ms opacity ease;
-moz-transition: 1ms opacity ease;
-ms-transition: 1ms opacity ease;
-o-transition: 1ms opacity ease;
transition: 1ms opacity ease;
background: rgba(0, 0, 0, .6);
}
.addressdiv {
word-wrap: break-word;
font-size: 14px;
margin: 0px 0px 10px 0px;
}
.amountdiv {
word-wrap: break-word;
font-size: 16px;
margin: 0px 0px 10px 0px;
}
.paybutton-modal {
position: absolute;
z-index: 9999;
top: 50%;
left: 50%;
text-align: center;
opacity: 0;
overflow: auto;
width: 100%;
padding: 10px 10px 15px 10px;
/*padding: 24px 20px;*/
-webkit-transition: 1ms opacity ease;
-moz-transition: 1ms opacity ease;
-ms-transition: 1ms opacity ease;
-o-transition: 1ms opacity ease;
transition: 1ms opacity ease;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 5px;
background: #fff;
}
.paybutton-modal.paybutton-open.paybutton-anchored {
top: 20px;
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
.paybutton-modal.paybutton-open {
opacity: 1;
}
.paybutton-overlay.paybutton-open {
opacity: 1;
}
/* Default Animation */
.paybutton-overlay.fade-and-drop {
display: block;
opacity: 0;
}
.paybutton-modal.fade-and-drop {
top: -300%;
opacity: 1;
display: block;
}
.paybutton-modal.fade-and-drop.paybutton-open {
top: 50%;
-webkit-transition: 300ms top 300ms ease;
-moz-transition: 300ms top 300ms ease;
-ms-transition: 300ms top 300ms ease;
-o-transition: 300ms top 300ms ease;
transition: 300ms top 300ms ease;
}
.paybutton-modal.fade-and-drop.paybutton-open.paybutton-anchored {
-webkit-transition: 300ms top 300ms ease;
-moz-transition: 300ms top 300ms ease;
-ms-transition: 300ms top 300ms ease;
-o-transition: 300ms top 300ms ease;
transition: 300ms top 300ms ease;
}
.paybutton-overlay.fade-and-drop.paybutton-open {
top: 0;
-webkit-transition: 300ms opacity ease;
-moz-transition: 300ms opacity ease;
-ms-transition: 300ms opacity ease;
-o-transition: 300ms opacity ease;
transition: 300ms opacity ease;
opacity: 1;
}
.paybutton-modal.fade-and-drop {
-webkit-transition: 300ms top ease;
-moz-transition: 300ms top ease;
-ms-transition: 300ms top ease;
-o-transition: 300ms top ease;
transition: 300ms top ease;
}
.paybutton-overlay.fade-and-drop {
-webkit-transition: 300ms opacity 300ms ease;
-moz-transition: 300ms opacity 300ms ease;
-ms-transition: 300ms opacity 300ms ease;
-o-transition: 300ms opacity 300ms ease;
transition: 300ms opacity 300ms ease;
}
/* Close Button */
.paybutton-close {
font-family: Helvetica, Arial, sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 12px;
position: absolute;
top: 5px;
right: 5px;
padding: 5px 7px 7px;
cursor: pointer;
color: #fff;
border: 0;
outline: none;
background: #e74c3c;
}
.paybutton-close:hover {
background: #c0392b;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
<button class="pay-button" amount="0.038" amount-type="BCH" address="bitcoincash:qpajl5cvn0fjsqs30xppuxs3uuhzfdj4ncrcfdukt3" success-field="success" success-msg="Thank you for donating!">
<span>0.038 BCH</span>
</button>
<button class="pay-button" amount="0.1" amount-type="BCH" address="bitcoincash:qpajl5cvn0fjsqs30xppuxs3uuhzfdj4ncrcfdukt3" success-field="success" success-msg="Thank you for donating!">
<span>0.1 BCH</span>
</button>
<button class="pay-button" amount="10000" amount-type="Satoshi" address="bitcoincash:qpajl5cvn0fjsqs30xppuxs3uuhzfdj4ncrcfdukt3" success-field="success" success-msg="Thank you for donating!">
<span>10,000 Satoshi</span>
</button>
UPDATED
I added a second version that improves on the need to generate the code for all elements in the modal (divs, buttons, etc) every single time the buttons are clicked.
Instead, we can have a hidden div and its contents are updated on button click and adding/removing a class that hides/shows it as needed.
For OP: I worked on re-using this div but did not pay attention to the transition effects on the existing code.
A few minor tweaks are still needed for opacity and modal size, etc but I ran out of time to continue working on this part :)
UPDATE 2
Removed second approach as OP will not find it as useful (different requirements than I had anticipated)

Related

changing the background color of the page by array and loop

when i use this code it change the background color yo yellow in one time and i want to change the color one by one red then blue then green and so on.....thanks in advance
var colorss = ["red", "blue", "green","maroon","yellow"];
for (i=0;i<colorss.length;i+=1) {
document.body.setAttribute('style',"background-color:" + colorss[i]);
}

Is this what you mean?
jQuery(function($) {
function changeColor(selector, colors, time) {
var curCol = 0,
timer = setInterval(function() {
if (curCol === colors.length) curCol = 0;
$(selector).css("background-color", colors[curCol]);
curCol++;
}, time);
}
$(window).load(function() {
changeColor(".container", ["green", "yellow", "blue", "red"], 3000);
});
});
.container {
background-color: red;
height: 500px;
-webkit-transition: background-color 0.5s ease-in-out;
-moz-transition: background-color 0.5s ease-in-out;
-o-transition: background-color 0.5s ease-in-out;
-khtml-transition: background-color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container"></div>
OR
using CSS only:
html,
body {
height: 100%;
}
body {
-webkit-animation: background 5s cubic-bezier(1, 0, 0, 1) infinite;
animation: background 5s cubic-bezier(1, 0, 0, 1) infinite;
}
#-webkit-keyframes background {
0% {
background-color: #f99;
}
33% {
background-color: #9f9;
}
67% {
background-color: #99f;
}
100% {
background-color: #f99;
}
}
#keyframes background {
0% {
background-color: #f99;
}
33% {
background-color: #9f9;
}
67% {
background-color: #99f;
}
100% {
background-color: #f99;
}
}

Your code is correct, but the computer computes faster than you can see or the webpage can load.
also you have an s too much in colors document.body.setAttribute('style',"background-color:" + colors[i]);
here is working code if you want to see the loop
var colors = ["red", "blue", "green","maroon","yellow"];
let body = document.getElementById('body');
var i = 0;
function myLoop () {
setTimeout(function () {
document.body.setAttribute('style',"background-color:" + colors[i]);
i++;
if (i < colors.length) {
myLoop();
}
}, 1500) /*1.5 seconds*/
}
myLoop();
<body>
<h1>hello</h1>
</body>

Animating Text In Javascript

So my problem is that I want to animate text (opacity) in js after you press enter, but I don't know how to do it with my code that I wrote. I can't explain why I can't animate but I can show ALL my code and you'll understand.
function handle(e){
if(e.keyCode === 13){
e.preventDefault();
theaction();
}
}
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}
function titleCase(str) {
str = str.toLowerCase().split(' ');
for(var i = 0; i < str.length; i++){
str[i] = str[i].split('');
str[i][0] = str[i][0].toUpperCase();
str[i] = str[i].join('');
}
return str.join(' ');
}
function theaction() {
var int = document.getElementById("every").value;
var inp = int.toUpperCase();
var lop;
var dom = [".AERO",".BIZ",".CAT",".COM",".COOP",".EDU",".GOV",".INFO",".INT",".JOBS",".MIL",".MOBI",".MUSEUM",
".NAME",".NET",".ORG",".TRAVEL",".AC",".AD",".AE",".AF",".AG",".AI",".AL",".AM",".AN",".AO",".AQ",".AR",".AS",".AT",".AU",".AW",
".AZ",".BA",".BB",".BD",".BE",".BF",".BG",".BH",".BI",".BJ",".BM",".BN",".BO",".BR",".BS",".BT",".BV",".BW",".BY",".BZ",".CA",
".CC",".CD",".CF",".CG",".CH",".CI",".CK",".CL",".CM",".CN",".CO",".CR",".CS",".CU",".CV",".CX",".CY",".CZ",".DE",".DJ",".DK",".DM",
".DO",".DZ",".EC",".EE",".EG",".EH",".ER",".ES",".ET",".EU",".FI",".FJ",".FK",".FM",".FO",".FR",".GA",".GB",".GD",".GE",".GF",".GG",".GH",
".GI",".GL",".GM",".GN",".GP",".GQ",".GR",".GS",".GT",".GU",".GW",".GY",".HK",".HM",".HN",".HR",".HT",".HU",".ID",".IE",".IL",".IM",
".IN",".IO",".IQ",".IR",".IS",".IT",".JE",".JM",".JO",".JP",".KE",".KG",".KH",".KI",".KM",".KN",".KP",".KR",".KW",".KY",".KZ",".LA",".LB",
".LC",".LI",".LK",".LR",".LS",".LT",".LU",".LV",".LY",".MA",".MC",".MD",".MG",".MH",".MK",".ML",".MM",".MN",".MO",".MP",".MQ",
".MR",".MS",".MT",".MU",".MV",".MW",".MX",".MY",".MZ",".NA",".NC",".NE",".NF",".NG",".NI",".NL",".NO",".NP",".NR",".NU",
".NZ",".OM",".PA",".PE",".PF",".PG",".PH",".PK",".PL",".PM",".PN",".PR",".PS",".PT",".PW",".PY",".QA",".RE",".RO",".RU",".RW",
".SA",".SB",".SC",".SD",".SE",".SG",".SH",".SI",".SJ",".SK",".SL",".SM",".SN",".SO",".SR",".ST",".SU",".SV",".SY",".SZ",".TC",".TD",".TF",
".TG",".TH",".TJ",".TK",".TM",".TN",".TO",".TP",".TR",".TT",".TV",".TW",".TZ",".UA",".UG",".UK",".UM",".US",".UY",".UZ", ".VA",".VC",
".VE",".VG",".VI",".VN",".VU",".WF",".WS",".YE",".YT",".YU",".ZA",".ZM",".ZR",".ZW"];
if (dom.some(function(v) { return inp.indexOf(v) >= 0; })) {
if (inp.includes("HTTP://") || inp.includes("HTTPS://")) {
window.location.href = inp.toLowerCase();
}
else {
var ht = "http://";
var loplink = ht.concat(inp);
window.location.href = loplink;
}
}
else if (inp.includes("GOOGLE:")) {
var googlesearch = inp.substr(7);
window.location.href = "https://www.google.fi/search?q=" + googlesearch.toLowerCase();
}
else if (inp.includes("DDG:")) {
var ddgsearch = inp.substr(4);
window.location.href = "https://duckduckgo.com/?q=" + ddgsearch.toLowerCase();
}
else if (inp.includes("QWANT:")) {
var qwantsearch = inp.substr(6);
window.location.href = "https://www.qwant.com/?l=en&h=1&hc=1&a=1&s=0&b=1&i=1&r=en&sr=en&q=" + qwantsearch.toLowerCase();
}
else if (inp.includes("HSL:")) {
var hslsearch = inp.substr(4);
window.location.href = "https://m.reittiopas.fi/en/index.php?mod=ls&txtSearch=" + hslsearch.toLowerCase() + "&search=Search";
}
else if (inp.includes("MY NAME IS")) {
var nameis = inp.split("IS ")[1];
var namelow = nameis.toLowerCase();
var namefcap = titleCase(namelow);
var namefinal = namefcap.split(' ').filter(function(v){return v!==' '});
if (namefinal.length < 3) {
lop = "Hello " + namefinal + "! My name is DAT BOIYIIYIYIYIYI!";
lop = lop.replace(",", " ");
document.getElementById("output").innerHTML = lop;
}
else {
lop = "You have a beutiful name!";
document.getElementById("output").innerHTML = lop;
sleep(5000);
window.location.href = "http://www.zombo.com";
}
}
else if (inp.includes("BG:")) {
var bgGoodness = inp.substr(3);
document.getElementById("theBodyOfAModel").style.backgroundColor = bgGoodness;
}
else {
switch(inp){
case 'HEY':
case 'HEY!':
case 'HI!':
case 'HI':
case 'HELLO':
case 'HELLO!':
lop = "Hey!";
break;
case 'HEY SIRI!':
case 'HEY SIRI':
case 'HI SIRI':
case 'HI SIRI!':
case 'HELLO SIRI':
case 'HELLO SIRI!':
lop = "I'm not Siri! I'm dat BOiiii!";
break;
case 'FOO':
lop = "Bar";
break;
case 'BAR':
lop = "Foo";
break;
case 'FOOBAR':
case 'FOO BAR':
lop = 'Searching for bars called "Foo".....';
break;
case 'WHAT TIME IS IT?':
case 'WHAT TIME IS IT':
case 'WHAT IS THE TIME?':
case 'WHAT IS THE TIME?':
lop = "DEMO: " + Date();
break;
default:
lop = "U WOT M8??";
break;
}
document.getElementById("output").innerHTML = lop;
}
}
function stylejs() {
document.getElementById("every").style.width = "600px";
document.getElementById("every").style.borderColor = "blue";
document.getElementById("every").style.cursor = "auto";
}
body {
padding: 0;
background-color: #ecf0f1;
}
#every {
font-size: 25px;
position: absolute;
top: 50%;
left: 50%;
margin-right: 0px;
margin-bottom: 0px:;
width: 300px;
/*340px*/
height: 30px;
/*70px*/
margin-left: -173.4px;
margin-top: -38.08px;
padding: 20px;
vertical-align: middle;
font-family: 'Open Sans', sans-serif;
border: 1px solid #000;
border-radius: 5px;
background-color: #fff;
color: #000;
-webkit-transition: width 0.4s ease-in-out;
-moz-transition: width 0.4s ease-in-out;
-o-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
#every:hover {
border-color: #2980b9;
background-color: #fff;
color: #000;
}
#every:focus {
-webkit-transition: width 0.4s ease-in-out;
-moz-transition: width 0.4s ease-in-out;
-o-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
#every:not(:focus) {
cursor: pointer;
}
#output {
padding: 0px;
font-size: 28px;
font-family: 'Open Sans', sans-serif;
margin: 0px;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
#outwrapper {
height: 120px;
width: 500px;
position: absolute;
top: 55%;
left: 50%;
padding: 0px;
margin-left: -250px;
margin-top: 0px;
margin-bottom: 0px:
margin-right: 0px;
text-align: center;
}
<body id="theBodyOfAModel">
<form onkeypress="handle(event)" action="#">
<input onclick="stylejs();" autocomplete="off" placeholder="Type Something..." type="text" id="every"/>
</form>
<div id="outwrapper">
<p id="output"></p>
</div>
http://jsbin.com/sevesujubo/edit?html,js,output
Im sorry about the weird ID and function names.
And no jquery plz, even if it would make it easier.
P.S Even if you can't help me, it would be nice if you could improve my code. Thanks (:

If I've understand ,To set a an opacity animation on the rendered text you'll :
set transition property to the output paragraph (already set in your css)
and add the below code in your handle function ;
function handle(e){
if(e.keyCode === 13){
e.preventDefault();
//---- added code
document.getElementById("output").style.opacity = 0;
setTimeout(function(){
theaction();
document.getElementById("output").style.opacity = 1;
},500);
//----
}
}
so first set opacity to 0 after wait 500 millisconds then execute theaction(); and set the opacity again to 1 ( css transition will make the annimation )
below working Fiddle :
function handle(e){
if(e.keyCode === 13){
e.preventDefault();
document.getElementById("output").style.opacity = 0;
setTimeout(function(){
theaction();
document.getElementById("output").style.opacity = 1;
//alert("yo")
},500);
}
}
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}
function titleCase(str) {
str = str.toLowerCase().split(' ');
for(var i = 0; i < str.length; i++){
str[i] = str[i].split('');
str[i][0] = str[i][0].toUpperCase();
str[i] = str[i].join('');
}
return str.join(' ');
}
function theaction() {
var int = document.getElementById("every").value;
var inp = int.toUpperCase();
var lop;
var dom = [".AERO",".BIZ",".CAT",".COM",".COOP",".EDU",".GOV",".INFO",".INT",".JOBS",".MIL",".MOBI",".MUSEUM",
".NAME",".NET",".ORG",".TRAVEL",".AC",".AD",".AE",".AF",".AG",".AI",".AL",".AM",".AN",".AO",".AQ",".AR",".AS",".AT",".AU",".AW",
".AZ",".BA",".BB",".BD",".BE",".BF",".BG",".BH",".BI",".BJ",".BM",".BN",".BO",".BR",".BS",".BT",".BV",".BW",".BY",".BZ",".CA",
".CC",".CD",".CF",".CG",".CH",".CI",".CK",".CL",".CM",".CN",".CO",".CR",".CS",".CU",".CV",".CX",".CY",".CZ",".DE",".DJ",".DK",".DM",
".DO",".DZ",".EC",".EE",".EG",".EH",".ER",".ES",".ET",".EU",".FI",".FJ",".FK",".FM",".FO",".FR",".GA",".GB",".GD",".GE",".GF",".GG",".GH",
".GI",".GL",".GM",".GN",".GP",".GQ",".GR",".GS",".GT",".GU",".GW",".GY",".HK",".HM",".HN",".HR",".HT",".HU",".ID",".IE",".IL",".IM",
".IN",".IO",".IQ",".IR",".IS",".IT",".JE",".JM",".JO",".JP",".KE",".KG",".KH",".KI",".KM",".KN",".KP",".KR",".KW",".KY",".KZ",".LA",".LB",
".LC",".LI",".LK",".LR",".LS",".LT",".LU",".LV",".LY",".MA",".MC",".MD",".MG",".MH",".MK",".ML",".MM",".MN",".MO",".MP",".MQ",
".MR",".MS",".MT",".MU",".MV",".MW",".MX",".MY",".MZ",".NA",".NC",".NE",".NF",".NG",".NI",".NL",".NO",".NP",".NR",".NU",
".NZ",".OM",".PA",".PE",".PF",".PG",".PH",".PK",".PL",".PM",".PN",".PR",".PS",".PT",".PW",".PY",".QA",".RE",".RO",".RU",".RW",
".SA",".SB",".SC",".SD",".SE",".SG",".SH",".SI",".SJ",".SK",".SL",".SM",".SN",".SO",".SR",".ST",".SU",".SV",".SY",".SZ",".TC",".TD",".TF",
".TG",".TH",".TJ",".TK",".TM",".TN",".TO",".TP",".TR",".TT",".TV",".TW",".TZ",".UA",".UG",".UK",".UM",".US",".UY",".UZ", ".VA",".VC",
".VE",".VG",".VI",".VN",".VU",".WF",".WS",".YE",".YT",".YU",".ZA",".ZM",".ZR",".ZW"];
if (dom.some(function(v) { return inp.indexOf(v) >= 0; })) {
if (inp.includes("HTTP://") || inp.includes("HTTPS://")) {
window.location.href = inp.toLowerCase();
}
else {
var ht = "http://";
var loplink = ht.concat(inp);
window.location.href = loplink;
}
}
else if (inp.includes("GOOGLE:")) {
var googlesearch = inp.substr(7);
window.location.href = "https://www.google.fi/search?q=" + googlesearch.toLowerCase();
}
else if (inp.includes("DDG:")) {
var ddgsearch = inp.substr(4);
window.location.href = "https://duckduckgo.com/?q=" + ddgsearch.toLowerCase();
}
else if (inp.includes("QWANT:")) {
var qwantsearch = inp.substr(6);
window.location.href = "https://www.qwant.com/?l=en&h=1&hc=1&a=1&s=0&b=1&i=1&r=en&sr=en&q=" + qwantsearch.toLowerCase();
}
else if (inp.includes("HSL:")) {
var hslsearch = inp.substr(4);
window.location.href = "https://m.reittiopas.fi/en/index.php?mod=ls&txtSearch=" + hslsearch.toLowerCase() + "&search=Search";
}
else if (inp.includes("MY NAME IS")) {
var nameis = inp.split("IS ")[1];
var namelow = nameis.toLowerCase();
var namefcap = titleCase(namelow);
var namefinal = namefcap.split(' ').filter(function(v){return v!==' '});
if (namefinal.length < 3) {
lop = "Hello " + namefinal + "! My name is DAT BOIYIIYIYIYIYI!";
lop = lop.replace(",", " ");
document.getElementById("output").innerHTML = lop;
}
else {
lop = "You have a beutiful name!";
document.getElementById("output").innerHTML = lop;
sleep(5000);
window.location.href = "http://www.zombo.com";
}
}
else if (inp.includes("BG:")) {
var bgGoodness = inp.substr(3);
document.getElementById("theBodyOfAModel").style.backgroundColor = bgGoodness;
}
else {
switch(inp){
case 'HEY':
case 'HEY!':
case 'HI!':
case 'HI':
case 'HELLO':
case 'HELLO!':
lop = "Hey!";
break;
case 'HEY SIRI!':
case 'HEY SIRI':
case 'HI SIRI':
case 'HI SIRI!':
case 'HELLO SIRI':
case 'HELLO SIRI!':
lop = "I'm not Siri! I'm dat BOiiii!";
break;
case 'FOO':
lop = "Bar";
break;
case 'BAR':
lop = "Foo";
break;
case 'FOOBAR':
case 'FOO BAR':
lop = 'Searching for bars called "Foo".....';
break;
case 'WHAT TIME IS IT?':
case 'WHAT TIME IS IT':
case 'WHAT IS THE TIME?':
case 'WHAT IS THE TIME?':
lop = "DEMO: " + Date();
break;
default:
lop = "U WOT M8??";
break;
}
document.getElementById("output").innerHTML = lop;
}
}
function stylejs() {
document.getElementById("every").style.width = "600px";
document.getElementById("every").style.borderColor = "blue";
document.getElementById("every").style.cursor = "auto";
}
body {
padding: 0;
background-color: #ecf0f1;
}
#every {
font-size: 25px;
position: absolute;
top: 50%;
left: 50%;
margin-right: 0px;
margin-bottom: 0px:;
width: 300px;
/*340px*/
height: 30px;
/*70px*/
margin-left: -173.4px;
margin-top: -38.08px;
padding: 20px;
vertical-align: middle;
font-family: 'Open Sans', sans-serif;
border: 1px solid #000;
border-radius: 5px;
background-color: #fff;
color: #000;
-webkit-transition: width 0.4s ease-in-out;
-moz-transition: width 0.4s ease-in-out;
-o-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
#every:hover {
border-color: #2980b9;
background-color: #fff;
color: #000;
}
#every:focus {
-webkit-transition: width 0.4s ease-in-out;
-moz-transition: width 0.4s ease-in-out;
-o-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
#every:not(:focus) {
cursor: pointer;
}
#output {
padding: 0px;
font-size: 28px;
font-family: 'Open Sans', sans-serif;
margin: 0px;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
#outwrapper {
height: 120px;
width: 500px;
position: absolute;
top: 55%;
left: 50%;
padding: 0px;
margin-left: -250px;
margin-top: 0px;
margin-bottom: 0px:
margin-right: 0px;
text-align: center;
}
<body id="theBodyOfAModel">
<form onkeypress="handle(event)" action="#">
<input onclick="stylejs();" autocomplete="off" placeholder="Type Something..." type="text" id="every"/>
</form>
<div id="outwrapper">
<p id="output"></p>
</div>

pull variable from css with js

I'm trying to get an action to occur when one clicks on an image, however only when the image is at full opacity
function func() {
if ($('.Absolute-Center').css('opacity') == 1) {
alert("it works");
}
}
.Absolute-Center {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
img.Absolute-Center {
opacity: 0.05;
filter: alpha(opacity=5);
-webkit-transition: opacity 20s linear;
}
img.Absolute-Center:hover {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: opacity 20s linear;
}
<img src="picture.png" class="Absolute-Center" onclick="func()" />

Try using transitionend event , .addClass() , .removeClass() ; removing :hover from css
function func(e) {
if ($(this).css("opacity") == 1) {
alert("it works");
$(this).removeClass("clicked")
}
};
$(".Absolute-Center").on({
"click": function() {
$(this).addClass("clicked")
},
"transitionend": func
})
.Absolute-Center {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
img.Absolute-Center {
opacity: 0.05;
filter: alpha(opacity=5);
transition: opacity 20s linear;
}
img.Absolute-Center.clicked {
opacity: 1;
filter: alpha(opacity=100);
transition: opacity 20s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<img src="http://lorempixel.com/50/50" class="Absolute-Center" />

This should help improve understanding and should be easily adaptable to do exactly what you want.
$(function() {
$('img').on('click', function() {
var alpha = $(this).css('opacity');
$("#msg").text((alpha == 1) ? "full" : alpha);
}).on('transitionend', function() {
var alpha = $(this).css('opacity');
if (alpha == 1) {
$("#msg2").fadeIn().delay(700).fadeOut();
} else {
$("#msg3").fadeIn().delay(700).fadeOut();
}
});
});
img {
border: 1px solid #000;
}
img {
opacity: 0.05;
filter: alpha(opacity=5);
-webkit-transition: opacity 5s linear;
}
img:hover {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: opacity 5s linear;
}
#msg2, #msg3 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="picture.png" />
<div>Last clicked at opacity: <span id="msg"></span>
</div>
<div id="msg2">End of fade-IN transition</div>
<div id="msg3">End of fade-OUT transition</div>

How to add a small description window when mouse cursor is over a element class?

I tested a method for see if it works, but... no, see:
var classname = document.getElementsByClassName('avatarTestCx');
function myFunction() {
document.write("Test.");
}
for(var i=0;i<classname.length;i++){
classname[i].addEventListener('mouseover', myFunction, false);
}
When the mouse cursor is about a element class, it calls a function to write in document (it's just a test to verify if will be possible do the small description window).
It's not working...
Do you have some method for example?

If it's just a simple tooltip I guess a title attribute would get this done.
Here is a example fiddle http://jsfiddle.net/542jwva8/1/
var classname = document.getElementsByClassName('avatarTestCx');
for(var i=0;i<classname.length;i++){
classname[i].setAttribute("title", "Small description \n Another line");
}

I would go about doing this, by using data-tooltip
Example
Inside this example it'll show a message box when hovering over an element, any questions just ask me
// Create style
var style = document.createElement('style');
document.head.appendChild(style);
// Store matching elements
var matchingElements = [];
// All elements
var allElements = document.getElementsByTagName('*');
// Loop through all elements
for (var i = 0, n = allElements.length; i < n; i++)
{
// All elements with attribute of data-tooltip
var attr = allElements[i].getAttribute('data-tooltip');
if (attr)
{
allElements[i].addEventListener('mouseover', hoverEvent);
}
}
function hoverEvent(event)
{
event.preventDefault();
x = event.x - this.offsetLeft;
y = event.y - this.offsetTop;
// Show value of "this" inside console
console.log(this);
// Make it hang below the cursor a bit.
y += 10;
style.innerHTML = '*[data-tooltip]::after { left: ' + x + 'px; top: ' + y + 'px }'
// Show value of "this" inside console
console.log(this);
}
*[data-tooltip] {
position: relative;
}
*[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
top: -20px;
right: -20px;
width: 150px;
pointer-events: none;
opacity: 0;
-webkit-transition: opacity .15s ease-in-out;
-moz-transition: opacity .15s ease-in-out;
-ms-transition: opacity .15s ease-in-out;
-o-transition: opacity .15s ease-in-out;
transition: opacity .15s ease-in-out;
display: block;
font-size: 12px;
line-height: 16px;
background: #fefdcd;
padding: 2px 2px;
border: 1px solid #c0c0c0;
box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.4);
}
*[data-tooltip]:hover::after {
opacity: 1;
}
/* No need for this CSS, just for example purpose */
div {
margin-top: 100px;
background-color: black;
width: 200px;
height: 20px;
}
<div data-tooltip="Test message 1"></div>
<div data-tooltip="Test message 2"></div>

How can I use <ul> list instead of <select> dropdown for the languages switcher?

I use msDropDown to convert the <select> to <ul> list for languages switcher. But the problem is that with this jQuery plugin, the select takes a long time to load after page loaded.
So, how can I use a ul list rather than select?
This is my select code:
<select name="lang" class="language" onchange="location.href='index.php?lang='+this.value+''.$trackpage.'">
<option name="lang" data-image="style/lang/de.png" value="de">Deutsch</option>
<option name="lang" data-image="style/lang/en.png" value="en" selected="selected">English</option>
<option name="lang" data-image="style/lang/es.png" value="es">Espanol</option>
<option name="lang" data-image="style/lang/fr.png" value="fr">Francais</option>
<option name="lang" data-image="style/lang/it.png" value="it">Italiano</option>
</select>
I tried with:
<ul onchange="location.href='index.php?lang='+this.value+'">
<li>
English
</li>
</ul>
but value and onchange is not supported by ul and a.
Is there a way to make ul works with the select attributes?
Thank you! And sorry for my bad English!

Updated Answer 2015
As this question is still visited very often and due to some requests in the comments, I've revisit my code. You can still find my original answer below.
HTML
<button class="language_selector">Choose Language</button>
<ul class="languages">
<li>English</li>
<li>Deutsch</li>
</ul>
<article>
<h1>More Content</h1>
</article>
JavaScript
var trigger = $('.language_selector');
var list = $('.languages');
trigger.click(function() {
trigger.toggleClass('active');
list.slideToggle(200);
});
// this is optional to close the list while the new page is loading
list.click(function() {
trigger.click();
});
CSS
.language_selector {
width: 200px;
background: #222;
color: #eee;
line-height: 25px;
font-size: 14px;
padding: 0 10px;
cursor: pointer;
}
.languages {
display: none;
position: absolute;
margin: 0;
background: #dddddd;
}
.languages > li {
width: 200px;
background: #eee;
line-height: 25px;
font-size: 14px;
padding: 0 10px;
cursor: pointer;
}
.languages > li:hover {
background: #aaa;
}
Demo
Try before buy
Original Answer From 2013
I would do it like this:
var nav = $('#nav');
var selection = $('.select');
var select = selection.find('li');
nav.click(function(event) {
if (nav.hasClass('active')) {
nav.removeClass('active');
selection.stop().slideUp(200);
} else {
nav.addClass('active');
selection.stop().slideDown(200);
}
event.preventDefault();
});
select.click(function(event) {
// updated code to select the current language
select.removeClass('active');
$(this).addClass('active');
alert ("location.href = 'index.php?lang=" + $(this).attr('data-value'));
});
h2 {
width: 200px;
background: #222;
color: #eee;
line-height: 25px;
font-size: 14px;
padding: 0 10px;
cursor: pointer;
}
ol.select {
display: none;
}
ol.select > li {
width: 200px;
background: #eee;
line-height: 25px;
font-size: 14px;
padding: 0 10px;
cursor: pointer;
}
ol.select > li:hover {
background: #aaa;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h2 id="nav">Choose Language</h2>
<ol class="select">
<li data-value="en">English</li>
<li data-value="de">Deutsch</li>
</ol>
This one adds a class the the selected element. This works, if you stay on that very page after the select and don't use location.href.

You can't use the select attributes, instead you can create your own attributes and use them in <ul> element
Maybe this will help you
First the html code
<div id="language">Change Lang</div>
<ul id="lang">
<li>
<a href="" name="lang" data-val="de">
<img src="http://icons.iconarchive.com/icons/famfamfam/flag/16/ad-icon.png"/>
English</a></li>
<li>
<a href="" name="lang" data-val="he">
<img src="http://icons.iconarchive.com/icons/famfamfam/flag/16/il-icon.png"/>
Hebrew</a></li>
</ul>
Next the jquery code
$("#language").click(function(){
$("#lang li").slideToggle();
});
$("#lang li").click(function() {
var url = location.href = "index.php?lang=" + $(this).find('a').attr("data-val");
location.href =url;
});
i have did it without the plugin.
Pay attention that i created a data-val attribute so store the desire language.
and i getting this attribute using jquery code

A very simple one (ul to select dropdown jquery transformation) no need to change html, very useful for mobile menus:
$(function(){
var close = function() {
$("ul").each(function() {
var $thisUl = $(this);
if($thisUl.find("li > a.click").length == 0) {
var $li = $(document.createElement('li')).append($(document.createElement('a')).attr({
"class": "click selectable visible",
"href": "#"
}).text("Select"));
$thisUl.append($li);
}
else {
$thisUl.find("li > a.click").addClass("visible");
}
$thisUl.find("li:has(> a:not(.click))").hide();
$thisUl.find("li > a.click").show();
});
};
var sentinel = function() {
$("ul").each(function(){
var $thisUl = $(this);
$($thisUl).find("li > a").click(function(event){
if($(event.target).is('ul li a.visible')) {
event.preventDefault();
$thisUl.find("li:has(> a:not(.click))").show();
$thisUl.find("li > a.selectable").hide();
$thisUl.find("li > a.click").removeClass("visible");
}
else {
$thisUl.find("li").each(function(){
$(this).find("a").removeClass("click selectable visible");
$(this).find("a.selectable").remove();
});
$(this).addClass("click visible");
close();
}
});
});
};
var reconnaissance = function() {
$(document).click(function(event) {
if(!$(event.target).is('ul li a')) {
close();
}
});
};
close();
sentinel();
reconnaissance();
});
ul {
width: auto;
margin: 2px auto;
background-color: #ddd;
border-top: 1px solid #999;
border-bottom: 3px solid #999;
border-left: 1px solid #999;
border-right: 1px solid #999;
border-radius: 8px;
list-style:none;
background-size: 16px 16px;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: left 2px;
background-color: transparent;
cursor: pointer;
}
li > a.click {
color: darkgreen;
font-weight: bold;
}
li a {
color:darkblue;
text-decoration:none;
}
li a:active, li a:hover {
color:darkred;
background-color: lightyellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>Option 1</li>
<li><a class="click" href="#">Option 2</a></li>
<li>Option 3</li>
</ul>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>

// Generated by CoffeeScript 1.4.0
(function() {
var $;
$ = window.jQuery || window.Zepto || window.$;
$.fn.fancySelect = function(opts) {
var isiOS, settings;
if (opts == null) {
opts = {};
}
settings = $.extend({
forceiOS: false,
includeBlank: false,
optionTemplate: function(optionEl) {
return optionEl.text();
},
triggerTemplate: function(optionEl) {
return optionEl.text();
}
}, opts);
isiOS = !!navigator.userAgent.match(/iP(hone|od|ad)/i);
return this.each(function() {
var copyOptionsToList, disabled, options, sel, trigger, updateTriggerText, wrapper;
sel = $(this);
if (sel.hasClass('fancified') || sel[0].tagName !== 'SELECT') {
return;
}
sel.addClass('fancified');
sel.css({
width: 1,
height: 1,
display: 'block',
position: 'absolute',
top: 0,
left: 0,
opacity: 0
});
sel.wrap('<div class="fancy-select">');
wrapper = sel.parent();
if (sel.data('class')) {
wrapper.addClass(sel.data('class'));
}
wrapper.append('<div class="trigger">');
if (!(isiOS && !settings.forceiOS)) {
wrapper.append('<ul class="options">');
}
trigger = wrapper.find('.trigger');
options = wrapper.find('.options');
disabled = sel.prop('disabled');
if (disabled) {
wrapper.addClass('disabled');
}
updateTriggerText = function() {
var triggerHtml;
triggerHtml = settings.triggerTemplate(sel.find(':selected'));
return trigger.html(triggerHtml);
};
sel.on('blur.fs', function() {
if (trigger.hasClass('open')) {
return setTimeout(function() {
return trigger.trigger('close.fs');
}, 120);
}
});
trigger.on('close.fs', function() {
trigger.removeClass('open');
return options.removeClass('open');
});
trigger.on('click.fs', function() {
var offParent, parent;
if (!disabled) {
trigger.toggleClass('open');
if (isiOS && !settings.forceiOS) {
if (trigger.hasClass('open')) {
return sel.focus();
}
} else {
if (trigger.hasClass('open')) {
parent = trigger.parent();
offParent = parent.offsetParent();
if ((parent.offset().top + parent.outerHeight() + options.outerHeight() + 20) > $(window).height() + $(window).scrollTop()) {
options.addClass('overflowing');
} else {
options.removeClass('overflowing');
}
}
options.toggleClass('open');
if (!isiOS) {
return sel.focus();
}
}
}
});
sel.on('enable', function() {
sel.prop('disabled', false);
wrapper.removeClass('disabled');
disabled = false;
return copyOptionsToList();
});
sel.on('disable', function() {
sel.prop('disabled', true);
wrapper.addClass('disabled');
return disabled = true;
});
sel.on('change.fs', function(e) {
if (e.originalEvent && e.originalEvent.isTrusted) {
return e.stopPropagation();
} else {
return updateTriggerText();
}
});
sel.on('keydown', function(e) {
var hovered, newHovered, w;
w = e.which;
hovered = options.find('.hover');
hovered.removeClass('hover');
if (!options.hasClass('open')) {
if (w === 13 || w === 32 || w === 38 || w === 40) {
e.preventDefault();
return trigger.trigger('click.fs');
}
} else {
if (w === 38) {
e.preventDefault();
if (hovered.length && hovered.index() > 0) {
hovered.prev().addClass('hover');
} else {
options.find('li:last-child').addClass('hover');
}
} else if (w === 40) {
e.preventDefault();
if (hovered.length && hovered.index() < options.find('li').length - 1) {
hovered.next().addClass('hover');
} else {
options.find('li:first-child').addClass('hover');
}
} else if (w === 27) {
e.preventDefault();
trigger.trigger('click.fs');
} else if (w === 13 || w === 32) {
e.preventDefault();
hovered.trigger('click.fs');
} else if (w === 9) {
if (trigger.hasClass('open')) {
trigger.trigger('close.fs');
}
}
newHovered = options.find('.hover');
if (newHovered.length) {
options.scrollTop(0);
return options.scrollTop(newHovered.position().top - 12);
}
}
});
options.on('click.fs', 'li', function(e) {
var clicked;
clicked = $(this);
sel.val(clicked.data('raw-value'));
if (!isiOS) {
sel.trigger('blur.fs').trigger('focus.fs');
}
options.find('.selected').removeClass('selected');
clicked.addClass('selected');
return sel.val(clicked.data('raw-value')).trigger('change.fs').trigger('blur.fs').trigger('focus.fs');
});
options.on('mouseenter.fs', 'li', function() {
var hovered, nowHovered;
nowHovered = $(this);
hovered = options.find('.hover');
hovered.removeClass('hover');
return nowHovered.addClass('hover');
});
options.on('mouseleave.fs', 'li', function() {
return options.find('.hover').removeClass('hover');
});
copyOptionsToList = function() {
var selOpts;
updateTriggerText();
if (isiOS && !settings.forceiOS) {
return;
}
selOpts = sel.find('option');
return sel.find('option').each(function(i, opt) {
var optHtml;
opt = $(opt);
if (!opt.prop('disabled') && (opt.val() || settings.includeBlank)) {
optHtml = settings.optionTemplate(opt);
if (opt.prop('selected')) {
return options.append("<li data-raw-value=\"" + (opt.val()) + "\" class=\"selected\">" + optHtml + "</li>");
} else {
return options.append("<li data-raw-value=\"" + (opt.val()) + "\">" + optHtml + "</li>");
}
}
});
};
sel.on('update.fs', function() {
wrapper.find('.options').empty();
return copyOptionsToList();
});
return copyOptionsToList();
});
};
}).call(this);
div.fancy-select {
position: relative;
color: #505050;
}
div.fancy-select.disabled {
opacity: 0.5;
}
div.fancy-select select:focus + div.trigger {
}
div.fancy-select select:focus + div.trigger.open {
}
div.fancy-select div.trigger {
cursor: pointer;
height: 50px;
line-height: 50px;
padding-left: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
width: 100%;
border: 1px solid #6e6e6e;
transition: all 240ms ease-out;
-webkit-transition: all 240ms ease-out;
-moz-transition: all 240ms ease-out;
-ms-transition: all 240ms ease-out;
-o-transition: all 240ms ease-out;
}
div.fancy-select div.trigger:after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border: 5px solid transparent;
border-top-color: #4B5468;
top: 20px;
right: 9px;
}
div.fancy-select div.trigger.open {
}
div.fancy-select div.trigger.open:after {
}
div.fancy-select ul.options {
list-style: none;
margin: 0;
position: absolute;
top: 49px;
left: 0;
visibility: hidden;
opacity: 0;
z-index: 50;
max-height: 200px;
overflow: auto;
border: 1px solid #6e6e6e;
width: 100%;
padding: 0;
background: #fff;
transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
-webkit-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
-moz-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
-ms-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
-o-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
}
div.fancy-select ul.options.open {
visibility: visible;
top: 50px;
opacity: 1;
/* have to use a non-visibility transition to prevent this iOS issue (bug?): */
/*http://stackoverflow.com/questions/10736478/css-animation-visibility-visible-works-on-chrome-and-safari-but-not-on-ios*/
transition: opacity 300ms ease-out, top 300ms ease-out;
-webkit-transition: opacity 300ms ease-out, top 300ms ease-out;
-moz-transition: opacity 300ms ease-out, top 300ms ease-out;
-ms-transition: opacity 300ms ease-out, top 300ms ease-out;
-o-transition: opacity 300ms ease-out, top 300ms ease-out;
}
div.fancy-select ul.options.overflowing {
top: auto;
bottom: 40px;
transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
-webkit-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
-moz-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
-ms-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
-o-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
}
div.fancy-select ul.options.overflowing.open {
top: auto;
bottom: 50px;
transition: opacity 300ms ease-out, bottom 300ms ease-out;
-webkit-transition: opacity 300ms ease-out, bottom 300ms ease-out;
-moz-transition: opacity 300ms ease-out, bottom 300ms ease-out;
-ms-transition: opacity 300ms ease-out, bottom 300ms ease-out;
-o-transition: opacity 300ms ease-out, bottom 300ms ease-out;
}
div.fancy-select ul.options li {
padding: 8px 20px;
color: #000;
cursor: pointer;
white-space: nowrap;
transition: all 150ms ease-out;
-webkit-transition: all 150ms ease-out;
-moz-transition: all 150ms ease-out;
-ms-transition: all 150ms ease-out;
-o-transition: all 150ms ease-out;
}
div.fancy-select ul.options li.selected {
background: #d3d3d3;
color: #000;
}
div.fancy-select ul.options li:hover, div.fancy-select ul.options li.hover {
background: #d3d3d3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="SortBy" id="SortBy" class="filters-toolbar__input">
<option value="" selected="selected">Option 1</option>
<option value="" selected="selected">Option 2</option>
<option value="" selected="selected">Option 3</option>
</select>
/* --- fancySelect --- */
$(function() {
$('#SortBy').fancySelect();
});

Categories

Resources