Develop Reference

Increase/decrease DIV and PROGRESSBAR Value CSS/JS - positioning elements

I want to create simple donation option using CSS/JS and HTML.
I have this photo of how it supposed to look like:
Plus button should increase donation, while it's increasing, the progressbar should be changing too. Same with minus button with decreasing value.
I thought that it would be easier, but I have problems on the beginning,
The main problem for me is positioning elements, so I would apprecieate if someone give me instructions or send me to a good tutorial about positioning. I am total beginner.
Here's where I stuck for now:
var donate = parseInt(document.getElementById(donate_nr).innerHTML);
function increaseDonate() {
if (donate < 750) {
donate += 10;
document.getElementById("donate_nr").innerHTML = donate;
} else document.getElementById("donate_nr").innerHTML = donate + "Thank you, that's the maximum you can donate.";
}
function decreaseDonate() {
if (donate > 0) {
donate -= 10;
document.getElementById("donate_nr").innerHTML = donate;
}
}
.minButton {
background: #17f8b2;
width: auto;
cursor: pointer;
font-size: 3.4em;
font-family: 'coc';
text-align: center;
color: #fff;
line-height: 33px;
height: 40px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: 1px solid #907d10;
text-shadow: 0 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.plusButton {
background: #17f8b2;
width: auto;
cursor: pointer;
font-size: 3.4em;
font-family: 'coc';
text-align: center;
color: #fff;
line-height: 33px;
height: 40px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: 1px solid #907d10;
}
.col1{
float:left;
width: 10%;
margin: 10px 10px 10px 10px;
position:f
}
.col3{
float:right;
width:10%;
}
.divContainer{
background: linear-gradient(to bottom, #007ead 0%,#006188 100%);
border-top: 2px solid #000;
border-right: 2px solid #000;
border-left: 2px solid #000;
}
.donateValue{
text-shadow: 0 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
color: #fff;
letter-spacing: 2px;
font-size: 3.6em;
padding: 17px 20px 10px 80px;
font-family: 'coc';
line-height: 1em;
}
<h1>
Your Donation:
</h1>
<br>
<div class=columnWrapper>
<div class="col1">
<div class="minButton" onclick="decreaseDonate()">-</div></div>
<div class="col2">
<div class="divContainer">
<div id="donate_nr" class="donateValue">10
</div>
</div>
</div>
<div class="col3">
<div class="plusButton" onclick="increaseDonate()">+</div></div>
</div>

Instead of float you can use flex for the layout you can find a complete tutorial on mdn flexbox
var donate = parseInt(document.getElementById('donate_nr').innerHTML);
function increaseDonate() {
if (donate < 750) {
donate += 10;
document.getElementById("donate_nr").innerHTML = donate;
} else document.getElementById("donate_nr").innerHTML = donate + "Thank you, that's the maximum you can donate.";
}
function decreaseDonate() {
if (donate > 0) {
donate -= 10;
document.getElementById("donate_nr").innerHTML = donate;
}
}
.minButton {
background: #17f8b2;
width: auto;
cursor: pointer;
font-size: 3.4em;
font-family: 'coc';
text-align: center;
color: #fff;
line-height: 33px;
height: 50px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: 1px solid #907d10;
text-shadow: 0 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.plusButton {
background: #17f8b2;
width: auto;
cursor: pointer;
font-size: 3.4em;
font-family: 'coc';
text-align: center;
color: #fff;
line-height: 45px;
height: 50px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: 1px solid #907d10;
text-shadow: 0 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.columnWrapper{
display:flex;
align-items:center;
}
.col1{
width: 10%;
padding:5px
}
.col2{
width:90%;
}
.col3{
width:10%;
padding:5px
}
.divContainer{
background: linear-gradient(to bottom, #007ead 0%,#006188 100%);
border-top: 2px solid #000;
border-right: 2px solid #000;
border-left: 2px solid #000;
}
.donateValue{
text-shadow: 0 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
color: #fff;
letter-spacing: 2px;
font-size: 3.6em;
padding: 17px 20px 10px 80px;
font-family: 'coc';
line-height: 1em;
}
<h1>
Your Donation:
</h1>
<br>
<div class=columnWrapper>
<div class="col1">
<div class="minButton" onclick="decreaseDonate()">-</div>
</div>
<div class="col2">
<div class="divContainer">
<div id="donate_nr" class="donateValue">10
</div>
</div>
</div>
<div class="col3">
<div class="plusButton" onclick="increaseDonate()">+</div>
</div>
</div>

You will need to create an extra div for the progress bar which has position: absolute within your divContainer, and you will need to give this a position: relative value to allow the child to be absolutely positioned within it. Then you can add a line of code to your JS functions to give the progress bar a percentage width whenever the donation amount changes.
<div class="divContainer">
<div id="donate_nr" class="donateValue">10</div>
<div class="progressBar"></div>
</div>
// CSS:
.divContainer {
position: relative;
// etc.
}
.progressBar {
position: absolute;
left: 0;
bottom: 0;
height: 20px;
background-color: red;
}
// JS:
// In both `increaseDonate()` and `decreaseDonate()`, call this at the end
// to set the width of the progress bar by percentage:
const progressBar = document.querySelector('.progressBar');
progressBar.style.width = `${donate / 750 * 100}%;`

Remove Div not working

I'm trying to write a code for a page:
show a button and embedded youtube video, once the user clicks on it, he goes to a link (not youtube) and the video disappears.
also there is a button to remove the video.
I've managed to make the video clickable to a link, but the problem that the video doesn't get removed - not when clicked on and not when clicking on the button.
.the-click {
position: absolute;
left: 0px;
right: 0px;
width: 100%;
height: 100%;
z-index: 999;
background-color: white;
opacity: 0;
}
.container {
position: relative;
}
.myxButton {
-moz-box-shadow: inset 0px 1px 0px -1px #cf866c;
-webkit-box-shadow: inset 0px 1px 0px -1px #cf866c;
box-shadow: inset 0px 1px 0px -1px #cf866c;
background-color: #d0451b;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #942911;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 16px;
font-weight: bold;
padding: 5px 24px;
text-decoration: none;
text-shadow: 0px 1px 0px #854629;
}
.myxButton:hover {
background-color: #bc3315;
}
.myxButton:active {
position: relative;
top: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
<button class="myxButton" onclick=$( '#div1').remove();>« Stop Video »</button>
<div id="div1" align="center" class="container" onclick=$( '#div1').remove();>
<iframe width="560" height="315" src="http://www.youtube.com/embed/UKftOH54iNU?modestbranding=1&autoplay=1&controls=0&fs=0&rel=0&showinfo=0&disablekb=1&wmode=opaque" frameborder="0"></iframe>
</div>
</center>
Console result when clicking
I've also tried:
onclick="$('#div1').remove();"
onclick='$('#div1').remove();'
#same with# onclick=$('#div1').hide();
Thanks

Use this syntax. remove your inline onClick attribute from the button and use jquery to add the event listener.
Your button HTML should be just
<button class="myxButton">« Stop Video »</button>
The reason for asking to remove the inline attribute is because its deprecated already (but still few browsers support it), But in future almost all browsers will stop supporting it. Also this way we keep the HTML and JavaScript code separate which is good for maintenance.
Here is a working snippet.
$('.myxButton').on('click',function(){
$('#div1').remove();
});
.the-click {
position: absolute;
left: 0px;
right: 0px;
width: 100%;
height: 100%;
z-index: 999;
background-color: white;
opacity: 0;
}
.container {
position: relative;
}
.myxButton {
-moz-box-shadow: inset 0px 1px 0px -1px #cf866c;
-webkit-box-shadow: inset 0px 1px 0px -1px #cf866c;
box-shadow: inset 0px 1px 0px -1px #cf866c;
background-color: #d0451b;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #942911;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 16px;
font-weight: bold;
padding: 5px 24px;
text-decoration: none;
text-shadow: 0px 1px 0px #854629;
}
.myxButton:hover {
background-color: #bc3315;
}
.myxButton:active {
position: relative;
top: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
<button class="myxButton">« Stop Video »</button>
<div id="div1" align="center" class="container">
<iframe width="560" height="315" src="http://www.youtube.com/embed/UKftOH54iNU?modestbranding=1&autoplay=1&controls=0&fs=0&rel=0&showinfo=0&disablekb=1&wmode=opaque" frameborder="0"></iframe>
</div>
</center>

Show Facebook like box popup if referrer is Facebook [duplicate]

This question already has answers here:
Checking the referrer
(6 answers)
Closed 6 years ago.
I have a Facebook Like Box inside a Popup div. However, I would like the Facebook Like Box to be displayed ONLY when a user entered the site directly from Facebook.
In short:
User came from Facebook: show
User entered URL directly: do not show
User came from google: do not show
How can I check and validate that facebook is the user referrer? Here is my code:
if (document.cookie.indexOf('_visited=1') == -1) {
var delay_popup = 1000;
setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
var date = new Date;
date.setDate(date.getDate() + 1); // текущая дата + 1 день
document.cookie = '_visited=1; path=/; expires=' + date.toUTCString();
}
#parent_popup {
background-color: rgba(0, 0, 0, 0.8);
display: none;
position: fixed;
z-index: 99999;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#popup {
background: #fff;
width: 380px;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border: 10px solid #ddd;
position: relative;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#popup h4 {
font: 28px Monotype Corsiva, Arial;
font-weight: bold;
text-align: center;
color: #008000;
text-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
#popup h5 {
font: 24px Monotype Corsiva, Arial;
color: red;
text-align: center;
text-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.close {
background-color: rgba(0, 0, 0, 0.8);
border: 2px solid #ccc;
height: 24px;
line-height: 24px;
position: absolute;
right: -24px;
cursor: pointer;
font-weight: bold;
text-align: center;
text-decoration: none;
color: rgba(255, 255, 255, 0.9);
font-size: 16px;
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
top: -24px;
width: 24px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background-color: rgba(0, 122, 200, 0.8);
}
<div id="parent_popup">
<div id="popup">
<font size="2" style="font-size: 15pt;">
<b style="color: rgb(255, 0, 0);"><center>pls like us !</center></b>
</font>
<center>like box code </center>
<p style="text-align: center;">
<strong><a class="button" href=""></a></strong>
</p>
</div>
</div>

You can use JavaScript to detect the referrer and then show an element if the referer URL matches facebook using .match(regex):
var fblike = document.getElementById('fblike');
var ref = document.referrer;
if (ref.match(/^https?:\/\/([^\/]+\.)?facebook\.com(\/|$)/i)) {
fblike.style.display = 'block';
}
#parent_popup {
background-color: rgba(0, 0, 0, 0.8);
position: fixed; z-index: 1;
top: 0; right: 0; bottom: 0; left: 0;
text-align: center;
}
#popup {
background: #fff;
margin: 10% auto;
width:50%;
padding: 5px 20px 13px 20px;
border: 10px solid #ddd;
position: relative;
border-radius: 10px;
}
#fblike {
display: none;
}
<div id="parent_popup">
<div id="popup">
<div id="fblike"><p>Like us on Facebook!</p></div>
</div>
</div>
Notice how #fblike has display:none by default. When user visits from facebook, the div will show up using the pure JavaScript code: document.getElementById('fblike').style.display = 'block';
Referer regex code from: Checking the referrer with JavaScript

Styling JQuery UI Autocomplete

Fiddle
I'm trying to style the sections inside the AutoComplete, but I don't know what to put in the CSS for the sections. I'm specifically trying to make:
color: #96f226;
border-radius: 0px;
border: 1px solid #454545;
Any suggestions???

Are you looking for this selector?:
.ui-menu .ui-menu-item a{
background:red;
height:10px;
font-size:8px;
}
Ugly demo:
http://jsfiddle.net/zeSTc/
Just replace with your code:
.ui-menu .ui-menu-item a{
color: #96f226;
border-radius: 0px;
border: 1px solid #454545;
}
demo: http://jsfiddle.net/w5Dt2/

Bootstrap styling for jQuery UI Autocomplete
.ui-autocomplete {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
float: left;
display: none;
min-width: 160px;
padding: 4px 0;
margin: 0 0 10px 25px;
list-style: none;
background-color: #ffffff;
border-color: #ccc;
border-color: rgba(0, 0, 0, 0.2);
border-style: solid;
border-width: 1px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
*border-right-width: 2px;
*border-bottom-width: 2px;
}
.ui-menu-item > a.ui-corner-all {
display: block;
padding: 3px 15px;
clear: both;
font-weight: normal;
line-height: 18px;
color: #555555;
white-space: nowrap;
text-decoration: none;
}
.ui-state-hover, .ui-state-active {
color: #ffffff;
text-decoration: none;
background-color: #0088cc;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
background-image: none;
}

Based on #md-nazrul-islam reply, This is what I did with SCSS:
ul.ui-autocomplete {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
float: left;
display: none;
min-width: 160px;
margin: 0 0 10px 25px;
list-style: none;
background-color: #ffffff;
border: 1px solid #ccc;
border-color: rgba(0, 0, 0, 0.2);
//#include border-radius(5px);
#include box-shadow( rgba(0, 0, 0, 0.1) 0 5px 10px );
#include background-clip(padding-box);
*border-right-width: 2px;
*border-bottom-width: 2px;
li.ui-menu-item{
padding:0 .5em;
line-height:2em;
font-size:.8em;
&.ui-state-focus{
background: #F7F7F7;
}
}
}

You can overwrite the classes in your own css using !important, e.g. if you want to get rid of the rounded corners.
.ui-corner-all
{
border-radius: 0px !important;
}

JavaScript calling show hide methods

I'm a complete newbie to JavaScript trying to understand simple things....
Please look at complete code below. It's simple, show and hide.
I'm doing something wrong due to which it's not working.
http://jsbin.com/esokic/edit#javascript,html,live
Would appreciate any help..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Close</title>
<SCRIPT type="text/javascript" src="jquery.all.min.js"></SCRIPT>
<style type="text/css">
.header-nav-outer {
float: left;
}
.get-daily-alerts-outer {
background: rgb(161, 8, 8); border-width: 0px 2px 2px; border-style: solid; border-color: rgb(0, 0, 0); padding: 2px 10px 20px 20px; border-radius: 0px 0px 8px 8px; width: 477px; height: 88px; display: none; position: absolute; z-index: 1000; -moz-border-radius: 0 0 8px 8px; -webkit-border-radius: 0 0 8px 8px;
}
span.close {
background: url("/img/snapdeal/sprite/snapdeal.png?v=1") no-repeat -674px -748px; padding: 1px 0px 1px 16px; color: rgb(255, 255, 255); font-size: 10px; cursor: pointer;
}
.get-daily-alerts-head {
color: rgb(224, 220, 220); padding-bottom: 10px; font-size: 19px; font-weight: bold;
}
.get-daily-alerts-head span {
font-size: 13px; font-weight: normal;
}
.header-top-nav {
background: url("/img/snapdeal/sprite/snapdeal-x.png?v=1") repeat-x left -73px; margin: 0px 0px 3px 170px; width: 592px; height: 32px; overflow: hidden;
}
.get-deal-alerts {
background: url("/img/snapdeal/sprite/snapdeal.png?v=1") no-repeat -565px -803px rgb(161, 8, 8); padding: 3px 5px; width: 115px; color: rgb(255, 255, 255); font-size: 11px; float: left; cursor: pointer; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px;
}
.csupport-drop-outer {
float: right;
}
.csupport-drop {
width: 120px !important; display: block;
text-align: left;
color: #C7C5C5;
font-size: 11px;
font-weight: normal;
cursor: pointer;
}
span.selected-city {
background: url("/img/snapdeal/sprite/snapdeal.png?v=1") no-repeat right 3px; padding-right: 20px;
}
.cust-support-outer {
margin: 0px; width: 121px; height: auto;
background: rgb(255, 255, 255); border-width: 0px 2px 7px; border-style: solid; border-color: rgb(0, 0, 0); margin: 0px; padding: 5px 2px; position: absolute; z-index: 1000 !important; border-radius: 0px 0px 7px 7px; -moz-border-radius: 0 0 7px 7px; -webkit-border-radius: 0 0 7px 7px;
}
ul.cust-support {
background: rgb(255, 255, 255); list-style: none; margin: 0px; padding: 0px; color: rgb(94, 94, 94); font-size: 12px;
}
ul.cust-support li {
margin-top: 1px;
margin-right: 5px;
border-bottom-color: #888484;
border-bottom-width: 1px;
border-bottom-style: dotted;
}
ul.cust-support li a {
list-style: none;
margin: 0px 0px 1px;
padding: 3px;
color: #5E5E5E;
font-size: 12px;
display: block;
cursor: pointer;
_cursor: hand;
}
.active-drop-tab {
background: rgb(255, 255, 255); border-width: 2px 2px 0px; border-style: solid; border-color: rgb(0, 0, 0); color: rgb(51, 176, 212); cursor: default; -moz-border-radius: 8px 8px 0 0; -webkit-border-radius: 8px 8px 0 0;
}
</style>
<script type="text/javascript">
this.init=function(){
$(".csupport-drop").click(function(){
$(".csupport-drop").addClass("active-drop-tab");
$(".cust-support-outer").show();
return false
});
$(".close").click(function(){
$(".get-daily-alerts-outer").hide();
return false
});
$(".get-deal-alerts").click(function(){
$(".get-daily-alerts-outer").show();
return false
});
};
</script>
</head>
<body>
<DIV class="header-nav-outer">
<DIV class="get-daily-alerts-outer">
<DIV align="right"><SPAN class="close">Close</SPAN></DIV>
<DIV class="get-daily-alerts-head">Get The Best Deals <SPAN>Everyday in your
mailbox</SPAN></DIV>
</DIV>
<DIV class="header-top-nav">
<DIV class="get-deal-alerts">Get daily deal alerts</DIV>
<DIV class="csupport-drop-outer">
<DIV class="csupport-drop"><SPAN class="selected-city">Customer
Support</SPAN></DIV>
<DIV class="cust-support-outer" style="display:none;">
<UL class="cust-support">
<LI><A><SPAN id="orderStatus">Order Status</SPAN></A></LI>
<LI><A><SPAN id="voucherResend">Resend Voucher</SPAN></A></LI>
<LI><A href="http://www.snapdeal.com/info/contactus" target="_blank">Contact
Us</A></LI></UL></DIV>
</DIV>
</DIV>
</body>
</html>

You never actually call init() so your click handlers are never being applied.
$(function() { init(); });

Try:
$(document).ready(function() {
$(".csupport-drop").click(function() {
$(this).addClass("active-drop-tab");
$(".cust-support-outer").show();
});
$(".close").click(function(){
$(".get-daily-alerts-outer").hide();
});
$(".get-deal-alerts").click(function(){
$(".get-daily-alerts-outer").show();
});
});

The problem is on this line:
this.init=function(){
What you want there instead of defining an init function is a document.ready handler, so
$(document).ready(function(){
and then at the end of the code block where you've got:
};
you need to close off the call to ready( that was opened above, so:
});
Or just leave your existing code as is and add a separate document.ready handler that calls your init function:
$(document).ready(init);
// OR, if you need to do other things in your document ready:
$(document).ready(function() {
// other stuff here
init();
// other stuff here
}
Updated demo: http://jsbin.com/esokic/6/edit