Related
Pretty new to coding, was just wondering if maybe someone could revise why my .CSS & .JS files are not linking with my HTML?
Here are the lines & this is what it's supposed to look like: https://codepen.io/MatteoV/pen/aGqQBe
I will also be trying to implement this code into Webflow, would anyone know where I can implement these lines?
Thank you guys for the help! :D
jQuery(document).ready(function($) {
// Terms & Discounts
var termArr = [1, 12, 24, 36],
discArr = [0, 0.2, 0.25, 0.3];
// Custom Region Pricing
var prices = {
ca: [0.12, 0.11, 0.1],
az: [0.12, 0.11, 0.1],
va: [0.12, 0.11, 0.1],
sg: [0.2, 0.19, 0.18],
th: [0.2, 0.19, 0.18],
hk: [0.2, 0.19, 0.18]
};
// Exchange Rates & Symbols
var exchange = {
rates: {
USD: 1,
CNY: 6.92,
THB: 35
},
symbol: {
USD: "$",
CNY: "¥",
THB: "฿"
}
};
// Total TB Slider
$("#gb-slider")
.slider({
range: "min",
value: 2000,
step: 500,
max: 10000,
min: 1000,
slide: function(event, ui) {
if (ui.value < 10000) {
$(".contact-us").fadeOut(200, function() {
$(".price-wrap").fadeIn(200);
});
var term = $("#term-slider").slider("option", "value");
$('[name="qty"]').val(ui.value);
$("#total-price .price").text(calcPrice(ui.value, term));
$("#price-per-gb .price").html(pricePerGB(ui.value).toFixed(2));
$('[name="unit_price"]').val(pricePerGB(ui.value).toFixed(2));
} else {
$(".price-wrap").fadeOut(200, function() {
$(".contact-us").fadeIn(200);
});
}
}
})
.each(function() {
var opt = $(this).data().uiSlider.options;
var vals = (opt.max - opt.min) / 1000;
for (var i = 0; i <= vals; i++) {
var el = $('<label class="value-label">' + (i + 1) + "TB</label>").css(
"left",
"calc(" + i / vals * 100 + "% - 10px)"
);
$(this).append(el);
}
});
// Contract Slider
$("#term-slider")
.slider({
range: "min",
max: termArr.length - 1,
slide: function(event, ui) {
var size = $("#gb-slider").slider("option", "value");
$('[name="period"]').val(termArr[ui.value]);
$("#total-price .price").text(calcPrice(size, ui.value));
$('[name="discount_term"]').val(discArr[ui.value]);
}
})
.each(function() {
var opt = $(this).data().uiSlider.options;
var vals = opt.max - opt.min;
for (var i = 0; i <= vals; i++) {
if (i == 0) {
var el = $('<label class="value-label">Monthly</label>').css("left", "0%");
} else {
var el = $(
'<label class="value-label">' + termArr[i] + " Mo.</label>"
).css("left", i / vals * 95 + "%");
}
$(this).append(el);
}
});
// Calcutate Price Per GB
function pricePerGB(value) {
var region = $("#region").val();
if (value <= 2000) {
return prices[region][0];
} else if (value <= 4999) {
return prices[region][1];
} else if (value <= 10000) {
return prices[region][2];
} else {
return false;
}
}
// Calculate Total Price
function calcPrice(size, term) {
var basePrice = size * pricePerGB(size),
discount = basePrice - basePrice * discArr[term],
rate = exchange.rates[$("#currency-select").val()],
price = (discount * rate).toFixed(2);
return price;
}
// Changing Currencies
$("#currency-select, #region").change(function() {
var pricePer = pricePerGB($("#gb-slider").slider("option", "value")).toFixed(
2
);
$(".currency-symbol").text(exchange.symbol[$(this).val()]);
$("#total-price .price").text(
calcPrice(
$("#gb-slider").slider("option", "value"),
$("#term-slider").slider("option", "value")
)
);
$('[name="unit_price"]').val(pricePer);
$("#price-per-gb .price").text(pricePer);
});
// Load price when page does
$("#total-price .price").text(
calcPrice(
$("#gb-slider").slider("option", "value"),
$("#term-slider").slider("option", "value")
)
);
$("#price-per-gb .price").html(
pricePerGB($("#gb-slider").slider("option", "value")).toFixed(2)
);
$('[name="discount_term"]').val(
discArr[$("#term-slider").slider("option", "value")]
);
$("#backup-form").submit(function(e) {
console.log($(this).serialize());
e.preventDefault();
});
});
#import "susy"; Add
#import "breakpoint"; Add
#import "color-schemer"; Add
#import "bourbon#5.*"; Add
#import "neat#2.*"; Add
#import "modularscale#3.*";
*,
*:before,
*:after {
box-sizing: border-box;
}
$yellow: #fdb022;
$yellow-alt: #eea61e;
$grey: #e6e6e6;
html,
body {
font: 16px "Open Sans", Arial, sans-serif;
}
#veeam-sliders {
width: 72em;
margin: 40px auto 0;
h3 {
font-weight: 600;
font-size: 21px;
margin: 0;
}
label {
font: normal 16px/1 "Open Sans", Arial, sans-serif;
text-transform: uppercase;
color: #aaa;
}
button,
.btn {
text-decoration: none;
border: none;
background: $yellow;
color: #fff;
text-transform: uppercase;
font: 700 14px "Open Sans", Arial, sans-serif;
padding: 8px 20px;
border-radius: 3px;
box-shadow: 0 2px 0 0 darken($yellow-alt, 5%);
cursor: pointer;
&:active {
position: relative;
top: 2px;
box-shadow: none;
}
}
.select-wrap {
margin-bottom: 40px;
margin-left: 15px;
display: inline-block;
position: relative;
&:after {
position: absolute;
top: 8px;
right: 10px;
content: "▾";
color: black;
display: block;
z-index: -1;
font-size: 20px;
}
#region,
#currency-select {
padding: 10px 30px 10px 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ccc;
margin: 0;
appearance: none;
position: relative;
background: rgba(255, 255, 255, 0);
color: #222;
&:hover {
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
}
}
}
.sliders-wrap {
width: 70%;
padding-right: 100px;
float: left;
.slider {
position: relative;
margin: 25px 0;
}
#gb-slider {
margin-bottom: 80px;
}
}
.total-wrap {
width: 30%;
float: left;
button {
margin-top: 40px;
}
.price-wrap {
h3 {
margin-bottom: 10px;
}
#total-price {
font-size: 42px;
line-height: 1.15;
color: #999;
border-bottom: 1px solid $grey;
padding: 0 0 20px;
margin: 0 0 10px;
span {
color: #999;
}
}
#price-per-gb {
color: #222;
font-size: 21px;
clear: both;
.price {
color: #222;
}
}
}
.veeam-provider {
float: right;
}
}
.value-label {
white-space: nowrap;
position: absolute;
top: 25px;
font-size: 15px;
color: #666;
text-transform: none;
font-weight: normal;
}
.contact-us {
margin-top: 25px;
display: none;
h3 {
margin: 0;
line-height: 1;
}
p {
margin: 10px 0 25px;
}
}
/* jQuery UI Slider Theming */
.ui-slider,
.ui-slider-handle,
.ui-slider-range {
border-radius: 500px;
}
.ui-slider {
background: $grey;
border: none;
height: 1em;
}
.ui-slider-handle {
width: 1.8em;
height: 1.8em;
top: -0.4em;
margin-left: -0.7em;
cursor: grab;
background: $yellow-alt;
border-color: $yellow-alt;
}
.ui-slider-range {
background: $yellow;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!DOCTYPE html>
<html lang "en">
<head>
<meta charset="utf-8">
<title>...</title>
<link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/Crackerzzzz/slider/master/slider.css" />
<script type='text/javascript' src='https://raw.githubusercontent.com/Crackerzzzz/slider/master/Slider.js'></script>
</head>
<body>
<section id="veeam-sliders" class="clearfix">
<form id="backup-form">
<div class="sliders-wrap">
<label>Select Data Center:</label>
<div class="select-wrap">
<select id="region" name="idc">
<option value="ca">Los Angeles, CA</option>
<option value="az">Phoenix, AZ</option>
<option value="va">Ashburn, VA</option>
<option value="sg">Singapore, SG</option>
<option value="th">Bangkok, TH</option>
<option value="hk">Hong Kong, HK</option>
</select>
</div>
<div class="tb-wrap">
<h3>Total GB to Backup</h3>
<div id="gb-slider" class="slider"></div>
<input type="hidden" name="qty" value="2000">
</div>
<div class="contract-wrap">
<h3>Contract Term Length</h3>
<div id="term-slider" class="slider"></div>
<input type="hidden" name="period" value="1">
</div>
</div>
<div class="total-wrap">
<label>Select Currency:</label>
<div class="select-wrap">
<select id="currency-select">
<option value="USD">USD</option>
<option value="CNY">CNY</option>
<option value="THB">THB</option>
</select>
</div>
<div class="price-wrap">
<h3>Total:</h3>
<div id="total-price">
<span class="currency-symbol">$</span><span class="price">000.00</span> /m.
</div>
<div id="price-per-gb">
<span>$</span><span class="price">0.00</span> /GB
<input type="hidden" name="unit_price" value="0.12">
</div>
<button type="submit">Add To Cart</button>
<img class="veeam-provider" src="/wp-content/uploads/veeam-gold-provider_x100.jpg">
</div>
<div class="contact-us">
<h3>Contact Us</h3>
<p>If you're interested in enterprise backup with over 10TB of space, please contact our sales agent for a custom quote based on your needs.</p>
Contact Us
</div>
</div>
<input name="discount_term" type="hidden">
<input name="id" value="621" type="hidden">
<input name="option" value="7688:53546" type="hidden">
</form>
</section>
</body>
</html>
Note: the css is messed up due to not having sass installed.
I am creating an HTML table dynamically from JSON objects. I am trying to create a filter for one of the table columns. It works fine but I cannot make it work with a multiselect function.
I tried adding this line:
$('.One1').multiselect();
in my script, in different places and it did not work.
var data = {"headers":["One","Two","Three","Four","Five","Six","Seven","Number1","Number2"],"rows":[["One1","Two1","Three1","Four1","Five1","Six1","Seven1",11,1000],["One1","Two1","Three2","Four1","Five1","Six1","Seven1", 22, 2000],["One2","Two1","Three1","Four2","Five1","Six1","Seven1", 77, 99]]};
//////First table - Three1 for Views
var table1 = '<div class = "filter_box"></div><div class="row"><div class="col-lg-6" style="background-color: #e90649; width: 117px;"> </div><div class="col-lg-6" style="max-width: 100px; padding-left: 10px; font-size: 2vw;">Table<br/><br/><span style="font-size: 1vw;">One1, Three1, Five1</span></div><div class="col-lg-6"><div class="container"><table><thead><tr></tr><tr><th>One</th><th>Two</th><th>Three</th><th>Four</th><th>Five</th><th>Six</th><th>Seven</th><th>Number1</th><th>Number2</th></tr></thead><tbody>';
var One = '<div class = "filter"><select class="One1" data-col="0"><option value="a">' + "One" + '</option>';
for (i = 0; i < data.rows.length; i++)
{
table1 +="<tr><td>" + data.rows[i][0] + "</td><td>" + data.rows[i][1] + "</td><td>" + data.rows[i][2] + "</td><td>" + data.rows[i][3] + "</td><td>" + data.rows[i][4] + "</td><td>" + data.rows[i][5] + "</td><td>" + data.rows[i][6] + "</td><td>" + data.rows[i][7].toLocaleString() + "</td><td>" + data.rows[i][8].toLocaleString() + "</td><td>" + "</td></tr>";
// Interactive filters
One +='<option value="' + i + '">' + data.rows[i][0] + '</option>';
}
table1 += '</tbody></table></div></div></div>';
One +='</select></div>';
$("#one").html(table1);
$(".filter_box").html(One);
////First table - Filter
$('.One1').change(function () {
var values = [];
$('.One1').each(function () {
var colIdx = $(this).data('col');
$(this).find('option:selected').each(function () {
if ($(this).val() != "") values.push({
text: $(this).text(),
colId: colIdx
});
});
});
One1('#one table > tbody > tr', values);
});
function One1(selector, values) {
$(selector).each(function () {
var sel = $(this);
var txt = sel.find('td:eq(0)').text().trim();
var hwMatches = values.filter(function(ele, idx) {
return ele.text == txt;
}).length;
sel.toggle(hwMatches > 0 || values.length == 0);
});
};
//$('.One1').multiselect();
#import url('https://fonts.googleapis.com/css?family=Roboto');
body, * {
margin: 0;
color:#fff;
font-family: Roboto;
text-transform:capitalize;
}
.row {
display: table;
width: 100%;
height: 241px;
background-color:#454545;
}
.row > .col-lg-6 {
display: table-cell;
vertical-align: middle;
}
.container {
/*display: flex;*/
flex-wrap: wrap;
}
.container > div {
padding: 15px;
margin: 5px;
flex: 0 0 calc(100% - 20px);
text-align: left;
}
/*img {
padding-left: 7%;
max-height:55px;
width:auto;
}*/
td{
padding: 2px 2px;
text-align: center;
margin: 6px 0;
border: none;
}
table{
width: 100%;
background-color:#454545;
font-weight:500;
border-collapse: separate;
border-spacing:0.3em 1.1em;
color: #fff;
border: 0;
}
tr{
font-size: 1.1em;
}
th {
color: #CCC;
font-size: 0.7em;
}
#one,#two,#three,#four{
padding-top:2%;
}
.filter
{
margin:1px;
width:20%;
text-align:center;
display:inline-block;
}
.filter_box
{
text-align:center;
display:inline-block;
width:100%;
}
.filter select, .multiselect dropdown-toggle btn btn-default {
min-width:120px;
-webkit-appearance: button;
-webkit-border-radius: 2px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-webkit-padding-end: 20px;
-webkit-padding-start: 2px;
-webkit-user-select: none;
background-image: url(http://i62.tinypic.com/15xvbd5.png), -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
background-position: 97% center;
background-repeat: no-repeat;
border: 1px solid #AAA;
color: #000;
font-size: inherit;
margin: 3px;
overflow: hidden;
padding: 1px 10px;
text-overflow: ellipsis;
white-space: nowrap;
}
/*
tr th:nth-child(5) {
background: red;
display:none;
}
tr td:nth-child(5) {
background: red;
display:none;
}
*/
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<div id="one"></div>
When you declare your select, you can specify it is multiple:
var One = '<div class = "filter"><select class="One1" data-col="0"><option value="a">' + "One" + '</option>';
Change it to:
var One = '<div class = "filter"><select multiselect class="One1" data-col="0"><option value="a">' + "One" + '</option>';
Result:
var data = {"headers":["One","Two","Three","Four","Five","Six","Seven","Number1","Number2"],"rows":[["One1","Two1","Three1","Four1","Five1","Six1","Seven1",11,1000],["One1","Two1","Three2","Four1","Five1","Six1","Seven1", 22, 2000],["One2","Two1","Three1","Four2","Five1","Six1","Seven1", 77, 99]]};
//////First table - Three1 for Views
var table1 = '<div class = "filter_box"></div><div class="row"><div class="col-lg-6" style="background-color: #e90649; width: 117px;"> </div><div class="col-lg-6" style="max-width: 100px; padding-left: 10px; font-size: 2vw;">Table<br/><br/><span style="font-size: 1vw;">One1, Three1, Five1</span></div><div class="col-lg-6"><div class="container"><table><thead><tr></tr><tr><th>One</th><th>Two</th><th>Three</th><th>Four</th><th>Five</th><th>Six</th><th>Seven</th><th>Number1</th><th>Number2</th></tr></thead><tbody>';
var One = '<div class = "filter"><select multiple class="One1" data-col="0"><option value="a">' + "One" + '</option>';
for (i = 0; i < data.rows.length; i++)
{
table1 +="<tr><td>" + data.rows[i][0] + "</td><td>" + data.rows[i][1] + "</td><td>" + data.rows[i][2] + "</td><td>" + data.rows[i][3] + "</td><td>" + data.rows[i][4] + "</td><td>" + data.rows[i][5] + "</td><td>" + data.rows[i][6] + "</td><td>" + data.rows[i][7].toLocaleString() + "</td><td>" + data.rows[i][8].toLocaleString() + "</td><td>" + "</td></tr>";
// Interactive filters
One +='<option value="' + i + '">' + data.rows[i][0] + '</option>';
}
table1 += '</tbody></table></div></div></div>';
One +='</select></div>';
$("#one").html(table1);
$(".filter_box").html(One);
////First table - Filter
$('.One1').change(function () {
var values = [];
$('.One1').each(function () {
var colIdx = $(this).data('col');
$(this).find('option:selected').each(function () {
if ($(this).val() != "") values.push({
text: $(this).text(),
colId: colIdx
});
});
});
One1('#one table > tbody > tr', values);
});
function One1(selector, values) {
$(selector).each(function () {
var sel = $(this);
var txt = sel.find('td:eq(0)').text().trim();
var hwMatches = values.filter(function(ele, idx) {
return ele.text == txt;
}).length;
sel.toggle(hwMatches > 0 || values.length == 0);
});
};
//$('.One1').multiselect();
#import url('https://fonts.googleapis.com/css?family=Roboto');
body, * {
margin: 0;
color:#fff;
font-family: Roboto;
text-transform:capitalize;
}
.row {
display: table;
width: 100%;
height: 241px;
background-color:#454545;
}
.row > .col-lg-6 {
display: table-cell;
vertical-align: middle;
}
.container {
/*display: flex;*/
flex-wrap: wrap;
}
.container > div {
padding: 15px;
margin: 5px;
flex: 0 0 calc(100% - 20px);
text-align: left;
}
/*img {
padding-left: 7%;
max-height:55px;
width:auto;
}*/
td{
padding: 2px 2px;
text-align: center;
margin: 6px 0;
border: none;
}
table{
width: 100%;
background-color:#454545;
font-weight:500;
border-collapse: separate;
border-spacing:0.3em 1.1em;
color: #fff;
border: 0;
}
tr{
font-size: 1.1em;
}
th {
color: #CCC;
font-size: 0.7em;
}
#one,#two,#three,#four{
padding-top:2%;
}
.filter
{
margin:1px;
width:20%;
text-align:center;
display:inline-block;
}
.filter_box
{
text-align:center;
display:inline-block;
width:100%;
}
.filter select, .multiselect dropdown-toggle btn btn-default {
min-width:120px;
-webkit-appearance: button;
-webkit-border-radius: 2px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-webkit-padding-end: 20px;
-webkit-padding-start: 2px;
-webkit-user-select: none;
background-image: url(http://i62.tinypic.com/15xvbd5.png), -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
background-position: 97% center;
background-repeat: no-repeat;
border: 1px solid #AAA;
color: #000;
font-size: inherit;
margin: 3px;
overflow: hidden;
padding: 1px 10px;
text-overflow: ellipsis;
white-space: nowrap;
}
/*
tr th:nth-child(5) {
background: red;
display:none;
}
tr td:nth-child(5) {
background: red;
display:none;
}
*/
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<div id="one"></div>
For example if you want to filter "One1" in a table, you can simply use something like: $('td:contains("One1")').parent().hide(); and $('td:contains("One1")').parent().show(); as a filter.
If you want to filter specific column, combine something like this with your selector: $('table tr > td:nth-child(yourColumnNumberShouldBeFiltered), table tr > th:nth-child(yourColumnNumberShouldBeFiltered)'). These expressions may be used in a function binded to 'change' event of your multiselect.
UPDATE: Above method, because of using :contains(), filter all of "One1", "One12", and so on! For exact match filteration you can use something like this:
$('table tr > td:nth-child(yourColumnNumberShouldBeFiltered)').filter(function() {
return $(this).text() == "yourExactTextToFilter";
}).parent().hide();
$('table tr > td:nth-child(yourColumnNumberShouldBeFiltered)').filter(function() {
return $(this).text() == "yourExactTextToFilter";
}).parent().show();
or for better performance of getting exact matches, see this link: Select element by exact match of its content
I have tried to recreate jQuery's native event handler, .click("body", "element, element", function( ... ));. Where if the user clicks on anything but those two elements, it will do something.
I've successfully done this, however, sometimes the script will not work. After a while, if the user clicks on the body, then the actual dropdown button trigger, it will not toggle the class for the dropdown. I'm unsure why this is happening, because it is working every now and then...
This is my JavaScript:
var uButton = document.getElementById("user_content"), // the trigger
uDropdown = document.getElementById("user__dropdown-menu"); // the menu
document.onclick = function(e){
if(e.target == uButton){ // if button has been clicked
toggleClass(uDropdown, "active"); // (custom function) toggle the class "active"
} else if(e.target != uButton && e.target != uDropdown){ // if anything BUT the dropdown and button are clicked
if(hasClass(uDropdown, "active")){ // (custom function) if the dropdown is active
uDropdown.className = "user__procedural-outer-dropdown"; // reset the classes to default
}
}
}
And the corresponding HTML:
<div class="navigation__user-content" id="user_content"> <!-- the button !-->
<span id="nav_username">Sign In</span>
<div class="user__procedural-outer"></div>
</div>
<div class="user__procedural-outer-dropdown" id="user__dropdown-menu"></div> <!-- dropdown !-->
I've included a JsFiddle to so you can try and recreate my problem.
All help is greatly appreciated,
Thanks.
I modified your code as minimally as possible. I hope this is what you're looking for.
function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
function toggleClass(element, cls){
element.classList.toggle(cls);
}
var uButton = document.getElementById("user_content"), // the trigger
uDropdown = document.getElementById("user__dropdown-menu"); // the menu
document.onclick = function(e){
var elem = e.target;
do {
switch(elem) {
case uButton:
return toggleClass(uDropdown, "active");
case uDropdown:
return void(0);
}
}
while(elem = elem.parentNode);
if(hasClass(uDropdown, "active"))
uDropdown.className = "user__procedural-outer-dropdown";
}
.navigation__user-content{
width: 70px;
height: 15px;
margin-top: 6px;
padding: 8px;
float: right;
background: #730aa2;
border-radius: 2px;
cursor: pointer;
}
.navigation__user-content:hover{
box-shadow: inset 2px 2px 0px #5a0d91;
}
.navigation__user-content:hover #nav_username{
text-shadow: 2px 2px 0px #5a0d91;
}
.navigation__user-content > #nav_username{
display: inline-block;
position: relative;
top: -2px;
left: 3px;
font-size: 13px;
font-weight: bold;
color: #e6e6e6;
}
.user__procedural-outer{
float: right;
position: relative;
top: -2px;
width: 17px;
height: 17px;
border-radius: 16px;
background: url("noimagefound.png") no-repeat center;
background-size: cover;
}
.user__procedural-outer-dropdown{
position: absolute;
top: 43px;
right: 0;
width: 320px;
height: 200px;
overflow: hidden;
}
.user__procedural-outer-dropdown.active{
background: red;
}
<div class="navigation__user-content" id="user_content">
<span id="nav_username">Sign In</span>
<div class="user__procedural-outer"></div>
</div>
<div class="user__procedural-outer-dropdown" id="user__dropdown-menu"></div>
since your nav_username is not in the user__procedural-outer, you need to target it also when document.onclick = function(e) happens
function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
function toggleClass(element, cls){
element.classList.toggle(cls);
}
var uButton = document.getElementById("user_content"),
uButtonSpan = document.getElementById("nav_username"),
/*since your "nav_username" is not in the "user__procedural-outer", you need to target it also when "document.onclick = function(e)" happens */
uDropdown = document.getElementById("user__dropdown-menu");
document.onclick = function(e){
if((e.target == uButton) || (e.target == uButtonSpan)){
toggleClass(uDropdown, "active");
} else if((e.target != uDropdown) && (e.target != uButtonSpan) && (hasClass(uDropdown, "active"))){
uDropdown.className = "user__procedural-outer-dropdown";
}
}
It seems there are several problems here. i renamed the class names to more simple words and test the code. i found, based on your css and what you set as position:relative and position:absolute, the dropdown-menu div must be inside the user_...-outer div!
i revise the code as following and test it. it works without problem:
var uButton = document.getElementById("user_content"),
uDropdown = document.getElementById("user-dropdown");
document.onclick = function (e) {
if (e.target == uButton || e.target.parentNode == uButton) {
toggleClass(uDropdown, "active");
} else if (e.target != uButton && e.target != uDropdown) {
if (hasClass(uDropdown, "active")) {
uDropdown.className = "user-dropdown";
}
}
}
function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
function toggleClass(element, cls) {
element.classList.toggle(cls);
}
.user-content{
width: 70px;
height: 15px;
margin-top: 6px;
padding: 8px;
float: right;
background: #730aa2;
border-radius: 2px;
cursor: pointer;
}
.user-content:hover{
box-shadow: inset 2px 2px 0 #200050;
}
.user-content > #signin{
display: inline-block;
position: relative;
top: -2px;
left: 3px;
font-size: 13px;
font-weight: bold;
color: #e6e6e6;
}
.user-content:hover > #signin{
text-shadow: 1px 1px 3px #caca30;
}
.user-outer{
float: right;
position: relative;
top: -2px;
width: 17px;
height: 17px;
border-radius: 16px;
background: yellow no-repeat center;
background-size: cover;
}
.user-dropdown{
position: absolute;
top: 43px;
right: 0;
width: 320px;
height: 200px;
/*background:#f8f8f8;*/ /* to see its position*/
visibility: hidden; /* hide when not active */
overflow: hidden;
}
.user-dropdown.active{
background: red;
visibility:visible;
}
<p>This is a test page!</p>
<div id="user_content" class="user-content">
<span id="signin">Sign In</span>
<div id="user-outer" class="user-outer">
<div id="user-dropdown" class="user-dropdown"></div>
</div>
</div>
Edit:
use if (e.target == uButton || e.target.parentNode == uButton) in click event to include all elements inside button to show the dropdown.
I'm using the POPR Jquery plugin to get a simple pop-up menu.
While the script is working fine, i always have to click twice to activate my pop-up. How can i get it to work with a single click?
(function($) {
$.fn.popr = function(options) {
var set = $.extend( {
'speed' : 200,
'mode' : 'bottom'
}, options);
return this.each(function() {
var popr_cont = '.popr_container_' + set.mode;
var popr_show = true;
$(this).click(function(event)
{
$('.popr_container_top').remove();
$('.popr_container_bottom').remove();
if (popr_show)
{
event.stopPropagation();
popr_show = false;
}
else
{
popr_show = true;
}
var d_m = set.mode;
var id = $j(this).closest('td').siblings(':first-child').text();
var but_log = '<button title="Logs" type="button" id="log" value="'+ id +'" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-info-sign"></span></button>';
var but_del = '<button title="Verwijder Contract" type="button" id="rem" value="'+ id +'" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-remove"></span></button>';
var but_edi = '<button title="Bewerk Contract" type="button" id="edit" value="'+ id +'" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-pencil"></span></button>';
var but_verl_nu = '<button title="Verleng vanaf nu" type="button" id="verlengvanafnu" value="'+ id +'" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-upload"></span></button>';
var but_verl_eind = '<button title="Verleng vanaf contract eind" type="button" id="verlengvanafeind" value="'+ id +'" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-ok"></span></button>';
var out = '<div class="popr_container_' + d_m + '"><div class="popr_point_' + d_m + '"><div class="popr_content">'+ but_verl_nu + but_verl_eind + but_edi + but_del + but_log +'</div></div></div>';
$(this).append(out);
var w_t = $(popr_cont).outerWidth();
var w_e = $(this).width();
var m_l = (w_e / 2) - (w_t / 2);
$(popr_cont).css('margin-left', m_l + 'px');
$(this).removeAttr('title alt');
$(popr_cont).fadeIn(set.speed);
});
$('html').click(function()
{
$('.popr_container_top').remove();
$('.popr_container_bottom').remove();
popr_show = true;
});
});
};
})(jQuery);
I'm sorry i see i missed a little part of the script.
The popr is used to get options on a huge datagrid.
The piece of script i use to activate the popr is:
$(document).ready(function() {
$('.popr').popr();
});
$("#datagrid").on("click", "td", function(){
$( this ).popr();
});
When i use:
$("#datagrid").on("click", "td", function(){
alert('Feugait');
});
It works in a single click.
Link to the plug-in: http://www.tipue.com/popr/
Works for me using the documentation and demo - answering here for formatting reasons.
NOTE I left the minified POPR minified since it is only here because there is no CDN for it.
// no need to format this. It is the minified version of the POPR code
(function($){$.fn.popr=function(options){var set=$.extend({'speed':200,'mode':'bottom'},options);return this.each(function(){var popr_cont='.popr_container_'+set.mode;var popr_show=true;$(this).click(function(event)
{$('.popr_container_top').remove();$('.popr_container_bottom').remove();if(popr_show)
{event.stopPropagation();popr_show=false;}
else
{popr_show=true;}
var d_m=set.mode;if($(this).attr('data-mode'))
{d_m=$(this).attr('data-mode')
popr_cont='.popr_container_'+d_m;}
var out='<div class="popr_container_'+d_m+'"><div class="popr_point_'+d_m+'"><div class="popr_content">'+$('div[data-box-id="'+$(this).attr('data-id')+'"]').html()+'</div></div></div>';$(this).append(out);var w_t=$(popr_cont).outerWidth();var w_e=$(this).width();var m_l=(w_e / 2)-(w_t / 2);$(popr_cont).css('margin-left',m_l+'px');$(this).removeAttr('title alt');if(d_m=='top')
{var w_h=$(popr_cont).outerHeight()+39;$(popr_cont).css('margin-top','-'+w_h+'px');}
$(popr_cont).fadeIn(set.speed);});$('html').click(function()
{$('.popr_container_top').remove();$('.popr_container_bottom').remove();popr_show=true;});});};})(jQuery);
// ACTUAL INVOCATION:
$(function() {
$('.popr').popr();
});
/*
Popr 1.0
Copyright (c) 2015 Tipue
Popr is released under the MIT License
http://www.tipue.com/popr
*/
.popr
{
cursor: pointer;
}
.popr a
{
color: #333;
text-decoration: none;
border: 0;
}
.popr-box
{
display: none;
}
.popr_content
{
background-color: #fff;
padding: 7px 0;
margin: 0;
}
.popr-item
{
font: 300 14px/1.7 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #333;
padding: 4px 29px 5px 29px;
}
.popr-item:hover
{
color: #333;
background-color: #dcdcdc;
}
.popr_container_bottom
{
display: none;
position: absolute;
margin-top: 10px;
box-shadow: 2px 2px 5px #f9f9f9;
z-index: 1000;
}
.popr_container_top
{
display: none;
position: absolute;
box-shadow: 2px 2px 5px #f9f9f9;
z-index: 1000;
}
.popr_point_top, .popr_point_bottom
{
position: relative;
background: #fff;
border: 1px solid #dcdcdc;
}
.popr_point_top:after, .popr_point_top:before
{
position: absolute;
pointer-events: none;
border: solid transparent;
top: 100%;
content: "";
height: 0;
width: 0;
}
.popr_point_top:after
{
border-top-color: #fff;
border-width: 8px;
left: 50%;
margin-left: -8px;
}
.popr_point_top:before
{
border-top-color: #dcdcdc;
border-width: 9px;
left: 50%;
margin-left: -9px;
}
.popr_point_bottom:after, .popr_point_bottom:before
{
position: absolute;
pointer-events: none;
border: solid transparent;
bottom: 100%;
content: "";
height: 0;
width: 0;
}
.popr_point_bottom:after
{
border-bottom-color: #fff;
border-width: 8px;
left: 50%;
margin-left: -8px;
}
.popr_point_bottom:before
{
border-bottom-color: #dcdcdc;
border-width: 9px;
left: 50%;
margin-left: -9px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="popr" data-id="1">Feugait nostrud</div>
<div class="popr-box" data-box-id="1">
<div class="popr-item">Feugait delenit</div>
<div class="popr-item">Vero dolor et</div>
<div class="popr-item">Exerci ipsum</div>
</div>
I'm trying to use a Jquery movie seat selection plugin on my jsp website. The plugin works well and i can able to select the seat.
My problem is, since i don't know Jquery i could not able to print the user selected seat on my jsp page.
kindly help me to print the users selected seat on jsp page. So that i can use them to store on my derby database.
HTML
<div class="demo">
<div id="seat-map">
<div class="front">SCREEN</div>
</div>
<div class="booking-details">
<p>Seat: </p>
<ul id="selected-seats"></ul>
<p>Tickets: <span id="counter">0</span></p>
<p>Total: <b>Rs.<span id="total">0</span></b></p>
<input type="button" value="BUY" class="checkout-button"/>
<div id="legend"></div>
</div>
<div style="clear:both"></div>
Jquery :
</style>
<script>
var price = 120; //price
$(document).ready(function() {
var $cart = $('#selected-seats'), //Sitting Area
$counter = $('#counter'), //Votes
$total = $('#total'); //Total money
var sc = $('#seat-map').seatCharts({
map: [ //Seating chart
'aaaaaaaaaa',
'aaaaaaaaaa',
'aaaaaaaaaa',
'aaaaaaaaaa',
'aaaaaaaaaa',
'aaaaaaaaaa',
'aaaaaaaaaa',
'aaaaaaaaaa',
'aaaaaaaaaa',
],
naming : {
top : false,
getLabel : function (character, row, column) {
return column;
}
},
legend : { //Definition legend
node : $('#legend'),
items : [
[ 'a', 'available', 'Avail' ],
[ 'a', 'unavailable', 'Sold']
]
},
click: function () { //Click event
if (this.status() == 'available') { //optional seat
$('<li>R'+(this.settings.row+1)+' S'+this.settings.label+'</li>')
.attr('id', 'cart-item-'+this.settings.id)
.data('seatId', this.settings.id)
.appendTo($cart);
$counter.text(sc.find('selected').length+1);
$total.text(recalculateTotal(sc)+price);
return 'selected';
} else if (this.status() == 'selected') { //Checked
//Update Number
$counter.text(sc.find('selected').length-1);
//update totalnum
$total.text(recalculateTotal(sc)-price);
//Delete reservation
$('#cart-item-'+this.settings.id).remove();
//optional
return 'available';
} else if (this.status() == 'unavailable') { //sold
return 'unavailable';
} else {
return this.style();
}
}
});
//sold seat
sc.get(['1_2', '4_4','4_5','6_6','6_7','8_5','8_6','8_7','8_8', '10_1', '10_2']).status('unavailable');
});
//sum total money
function recalculateTotal(sc) {
var total = 0;
sc.find('selected').each(function () {
total += price;
});
return total;
}
</script>
CSS:
<style>
.front{width: 300px;margin: 5px 32px 45px 32px;background-color: #f0f0f0; color: #666;text-align: center;padding: 3px;border-radius: 5px;}
.booking-details {float: right;position: relative;width:200px;height: 450px; }
.booking-details h3 {margin: 5px 5px 0 0;font-size: 16px;}
.booking-details p{line-height:26px; font-size:16px; color:#999}
.booking-details p span{color:#666}
div.seatCharts-cell {color: #182C4E;height: 25px;width: 25px;line-height: 25px;margin: 3px;float: left;text-align: center;outline: none;font-size: 13px;}
div.seatCharts-seat {color: #fff;cursor: pointer;-webkit-border-radius:5px;- moz-border-radius:5px;border-radius: 5px;}
div.seatCharts-row {height: 35px;}
div.seatCharts-seat.available {background-color: #B9DEA0;}
div.seatCharts-seat.focused {background-color: #76B474;border: none;}
div.seatCharts-seat.selected {background-color: #E6CAC4;}
div.seatCharts-seat.unavailable {background-color: #472B34;cursor: not-allowed;}
div.seatCharts-container {border-right: 1px dotted #adadad;width: 400px;padding: 20px;float: left;}
div.seatCharts-legend {padding-left: 0px;position: absolute;bottom: 16px;}
ul.seatCharts-legendList {padding-left: 0px;}
.seatCharts-legendItem{float:left; width:90px;margin-top: 10px;line-height: 2;}
span.seatCharts-legendDescription {margin-left: 5px;line-height: 30px;}
.checkout-button {display: block;width:80px; height:24px; line- height:20px;margin: 10px auto;border:1px solid #999;font-size: 14px; cursor:pointer}
#selected-seats {max-height: 150px;overflow-y: auto;overflow-x: none;width: 200px;}
#selected-seats li{float:left; width:72px; height:26px; line-height:26px; border:1px solid #d3d3d3; background:#f7f7f7; margin:6px; font-size:14px; font- weight:bold; text-align:center}
</style>
Please Help!
Thanks.
I may suggest you to use the jQuery dialog plugin (dialog), plus jsPDF in order to produce a dialog on a print button containing a pdf version of the html related to your selected seat.
The result is like:
The snippet is:
var price = 120; //price
var sc;
//sum total money
function recalculateTotal(sc) {
var total = 0;
sc.find('selected').each(function () {
total += price;
});
return total;
}
$(function () {
var $cart = $('#selected-seats'), //Sitting Area
$counter = $('#counter'), //Votes
$total = $('#total'); //Total money
sc = $('#seat-map').seatCharts({
map: [ //Seating chart
'aaaaaaaaaa',
'aaaaaaaaaa',
'aaaaaaaaaa',
'aaaaaaaaaa',
'aaaaaaaaaa',
'aaaaaaaaaa',
'aaaaaaaaaa',
'aaaaaaaaaa',
'aaaaaaaaaa',
],
naming: {
top: false,
getLabel: function (character, row, column) {
return column;
}
},
legend: { //Definition legend
node: $('#legend'),
items: [
['a', 'available', 'Avail'],
['a', 'unavailable', 'Sold']
]
},
click: function () { //Click event
if (this.status() == 'available') { //optional seat
$('<li>R' + (this.settings.row + 1) + ' S' + this.settings.label + '</li>')
.attr('id', 'cart-item-' + this.settings.id)
.data('seatId', this.settings.id)
.appendTo($cart);
$counter.text(sc.find('selected').length + 1);
$total.text(recalculateTotal(sc) + price);
return 'selected';
} else if (this.status() == 'selected') { //Checked
//Update Number
$counter.text(sc.find('selected').length - 1);
//update totalnum
$total.text(recalculateTotal(sc) - price);
//Delete reservation
$('#cart-item-' + this.settings.id).remove();
//optional
return 'available';
} else if (this.status() == 'unavailable') { //sold
return 'unavailable';
} else {
return this.style();
}
}
});
//sold seat
sc.get(['1_2', '4_4', '4_5', '6_6', '6_7', '8_5', '8_6', '8_7', '8_8', '10_1', '10_2']).status('unavailable');
$(':button[value="PRINT"]').on('click', function(e) {
e.preventDefault();
if ($('#selected-seats li').length > 0) {
var doc = new jsPDF();
var specialElementHandlers = {
'#selected-seats': function(element, renderer){
return true;
}
};
doc.fromHTML($('#selected-seats').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
var uriPdf = doc.output('datauristring');
$('<div>').prop('id', '_currentDialog').add('<iframe id="_myPdf" type="application/pdf" src="' + uriPdf + '"></iframe>').dialog({
title: "Selected seat",
width: 600,
height: 800,
close: function (event, ui) {
$('#_currentDialog').remove();
}
});
} else {
alert('No selected seat to print!')
}
});
});
.front {
width: 300px;
margin: 5px 32px 45px 32px;
background-color: #f0f0f0;
color: #666;
text-align: center;
padding: 3px;
border-radius: 5px;
}
.booking-details {
float: right;
position: relative;
width: 200px;
height: 450px;
}
.booking-details h3 {
margin: 5px 5px 0 0;
font-size: 16px;
}
.booking-details p {
line-height: 26px;
font-size: 16px;
color: #999
}
.booking-details p span {
color: #666
}
div.seatCharts-cell {
color: #182C4E;
height: 25px;
width: 25px;
line-height: 25px;
margin: 3px;
float: left;
text-align: center;
outline: none;
font-size: 13px;
}
div.seatCharts-seat {
color: #fff;
cursor: pointer;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
div.seatCharts-row {
height: 35px;
}
div.seatCharts-seat.available {
background-color: #B9DEA0;
}
div.seatCharts-seat.focused {
background-color: #76B474;
border: none;
}
div.seatCharts-seat.selected {
background-color: #E6CAC4;
}
div.seatCharts-seat.unavailable {
background-color: #472B34;
cursor: not-allowed;
}
div.seatCharts-container {
border-right: 1px dotted #adadad;
width: 400px;
padding: 20px;
float: left;
}
div.seatCharts-legend {
padding-left: 0px;
position: absolute;
bottom: 16px;
}
ul.seatCharts-legendList {
padding-left: 0px;
}
.seatCharts-legendItem {
float: left;
width: 90px;
margin-top: 10px;
line-height: 2;
}
span.seatCharts-legendDescription {
margin-left: 5px;
line-height: 30px;
}
.checkout-button {
display: inline;
width: 80px;
height: 24px;
line-height: 20px;
margin: 10px auto;
border: 1px solid #999;
font-size: 14px;
cursor: pointer
}
#selected-seats {
max-height: 150px;
overflow-y: auto;
overflow-x: none;
width: 200px;
}
#selected-seats li {
float: left;
width: 72px;
height: 26px;
line-height: 26px;
border: 1px solid #d3d3d3;
background: #f7f7f7;
margin: 6px;
font-size: 14px;
font- weight: bold;
text-align: center
}
#_myPdf {
width: 100% !important;
}
<link href="js/jquery.seat-chart/jquery.seat-charts.css" rel="stylesheet">
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="js/jquery.seat-chart/jquery.seat-charts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
<div class="demo">
<div id="seat-map">
<div class="front">SCREEN</div>
</div>
<div class="booking-details">
<p>Seat: </p>
<ul id="selected-seats"></ul>
<p>Tickets: <span id="counter">0</span></p>
<p>Total: <b>Rs.<span id="total">0</span></b></p>
<input type="button" value="BUY" class="checkout-button"/>
<input type="button" value="PRINT" class="checkout-button"/>
<div id="legend"></div>
</div>
<div style="clear:both"></div>
</div>
The function to print in the html with jquery is "html()" for example if you want to write in the div with the id legend you can do this:
$("#legend").html("<p>whatever you want to write</p>");
You can find more details on this page
w3schools tutorial
Hope it help