We Keep Coding

If 2 different radios are selected, Do something

I essentially have 1 radio selection with a few colours, all with the same attributes, just different values, using an onclick event to pass on the value. worked great, it would allow the user to click on a color(radio) and it would display an image.
Working fiddle - https://jsfiddle.net/ktmzy8L0/
The above now includes another radio selection called pattern. But every where I searched cant seem to find an answer to solve this.
Essential - If the user selects 2 separate radios [different names], show a different picture. If you are following the jsfiddle it would show a blue diamond(I would use a url to show the image depending on the 2 radio values they choose) and the image would popup in showpicture.
The below code I originally have for jquery
function CB(colorbackground) {
var url;
$('#showpictureheader').show();
$('#showpicture').show();
if (colorbackground == "Navy Blue") {
url = "https://www.colorhexa.com/023333.png";
document.getElementById("showpicture").style.backgroundImage = "url(" + url + ")";
$('#showpictureheader').text('Navy Blue Pattern');
}
}

This code makes it more dynamic. Simply add data-color='ff0000' to the bg color radio buttons. Then this code will simply take the selected pattern value and bg color radio and show the title and selected bgcolor.
bgcolor = "";
pattern = "";
$("input[type='radio']").on("change",function(){
if($(this).prop("name") == "properties[Background Color]"){
bgcolor = $(this);
}
else if($(this).prop("name") == "properties[Background Pattern]"){
pattern = $(this);
}
if(bgcolor && pattern){
$('#showpictureheader').show();
$('#showpicture').show();
url = "https://www.colorhexa.com/" + bgcolor.data("color") + ".png";
document.getElementById("showpicture").style.backgroundImage = "url(" + url + ")";
$('#showpictureheader').text(bgcolor.val() + ' ' + pattern.val());
}
});
.background-choices label>input {
visibility: hidden;
position: absolute;
}
.background-choices label>input+img {
cursor: pointer;
border: 1px solid transparent;
border-radius: 50%;
width: 30px;
height: 30px;
margin: 0 10px;
-webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
}
#media only screen and (min-width: 500px) {
.background-choices label>input+img {
border: 2px solid transparent;
width: 40px;
height: 40px;
}
}
.background-choices label>input:checked+img {
border: 5px solid #fd8252;
}
.background-choices label>input:not(:checked)+img {
border: 5px solid #f4f5f5;
}
.background-choices label:hover {
opacity: 0.6;
}
.background-tab-wrapper h3 {
margin-top: 10px;
}
#showpictureheader {
display: none;
}
.showpictureheader{
text-align: center;
padding-bottom: 10px;
}
#showpicture {
border: 5px solid #f4f5f5;
cursor: pointer;
border-radius: 20px;
width: 250px;
height: 250px;
margin: 10px 10px;
-webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
margin: auto;
display: none;
background-size: contain;
}
<div class="background-choices">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<h3>Color</h3>
<label>
<input data-color="000080" id="background-choice-input1" type="radio" name="properties[Background Color]" class="background-choices-selector" value="Navy Blue"/>
<img src="https://www.colorhexa.com/000080.png">
</label>
<h3>Pattern</h3>
<label>
<input id="background-choice-input2" type="radio" name="properties[Background Pattern]" value="Diamond"/>
<img src="https://w7.pngwing.com/pngs/884/524/png-transparent-diamond-rhombus-shape-oval-outline-s-blue-angle-white-thumbnail.png">
</label>
</div>
<div class="showpictureheader">
<h7 id="showpictureheader"></h7>
</div>
<div id="showpicture">
</div>

here is, you should separate to one more function.
function CB(bg) {
var url;
$('#showpictureheader').show();
$('#showpicture').show();
if (bg == "Navy Blue") {
url = "https://www.colorhexa.com/023333.png";
document.getElementById("showpicture").style.backgroundImage = "url(" + url + ")";
}
}
function secondcb() {
$('#showpictureheader').text('Navy Blue Pattern');
}
.background-choices label>input {
visibility: hidden;
position: absolute;
}
.background-choices label>input+img {
cursor: pointer;
border: 1px solid transparent;
border-radius: 50%;
width: 30px;
height: 30px;
margin: 0 10px;
-webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
}
#media only screen and (min-width: 500px) {
.background-choices label>input+img {
border: 2px solid transparent;
width: 40px;
height: 40px;
}
}
.background-choices label>input:checked+img {
border: 5px solid #fd8252;
}
.background-choices label>input:not(:checked)+img {
border: 5px solid #f4f5f5;
}
.background-choices label:hover {
opacity: 0.6;
}
.background-tab-wrapper h3 {
margin-top: 10px;
}
#showpictureheader {
display: none;
}
.showpictureheader {
text-align: center;
padding-bottom: 10px;
}
#showpicture {
border: 5px solid #f4f5f5;
cursor: pointer;
border-radius: 20px;
width: 250px;
height: 250px;
margin: 10px 10px;
-webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
margin: auto;
display: none;
background-size: contain;
}
<div class="background-choices">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<h3>Color</h3>
<label>
<input id="background-choice-input1" type="radio" name="properties[Background Color]" class="background-choices-selector" value="Navy Blue" onClick="CB(this.value);"/>
<img src="https://www.colorhexa.com/000080.png">
</label>
<h3>Pattern</h3>
<label>
<input onchange="secondcb()" id="background-choice-input2" type="radio" name="properties[Background Pattern]" value="Diamond"/>
<img src="https://w7.pngwing.com/pngs/884/524/png-transparent-diamond-rhombus-shape-oval-outline-s-blue-angle-white-thumbnail.png">
</label>
</div>
<div class="showpictureheader">
<h7 id="showpictureheader"></h7>
</div>
<div id="showpicture">
</div>

Change color when scrolling

I've been looking a solution for this but I couldn't get it to work.
I would like my page header to change from a transparent background to a red background as the user begins scrolling the page.
$(window).on("scroll", function() {
if($(window).scrollTop() > 800) {
$(".header").addClass("active");
} else {
$(".header").removeClass("active");
}
});
* {margin:0;padding:0}
html {
background: lightgray;
height: 5000px;
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 0;
z-index: 10000;
transition: all 1s ease-in-out;
height: auto;
background-color: rgba(17, 42, 107, 0.7);
text-align: center;
line-height: 40px;
}
.header.active {
background: red;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">the header</div>

$(window).scroll(function () {
var scroll = $(window).scrollTop();
console.log(scroll);
if (scroll >= 10) {
$(".header").addClass("active");
} else {
$(".header").removeClass("active");
}
});

Add On/Off text inside toggle switch

As the question suggests, I want to add 'On' or 'Off' text inside the toggle switch depending on the switch state using js only. There are few examples in this topic, but unable to grip. The MWE is presented below:
window.addEventListener('DOMContentLoaded', function() {
var swPos = [Math.random() >= 0.5];
var swConnection = ["a0"];
switchPosition(swPos, swConnection);
var togglebtns = document.getElementsByClassName('togglebtn');
for (var i = 0; i < togglebtns.length; i++) {
togglebtns[i].addEventListener('click', function() {
changingPin = Number(this.id.substr(2));
swPos[changingPin] = !swPos[changingPin];
drawSwitch(this.id.substr(2), swPos[changingPin]);
});
}
}, false);
function switchPosition(swPos, swConnection) {
for (i = 0; i < swConnection.length; i++) {
drawSwitch(pad(i, 2), swPos[i]);
}
}
function drawSwitch(pinNoStr, state) {
var btnWrapper = document.getElementById('tb' + pinNoStr);
var btn = document.getElementById('mt' + pinNoStr);
if (state == true) {
btn.style.left = (btnWrapper.offsetWidth - btn.offsetWidth - 2) + 'px';
btnWrapper.style.background = '#7bc77b';
btnWrapper.style.border = '1px solid #7bc77b';
document.getElementById('l' + pinNoStr).style.cssText = 'background: #b9f3fe;\
background: gradient-gradient(#ffffff, #77a1b9);\
box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(100,231,253,1), inset 0 0 8px rgba( 61,157,247,0.8), inset 0 -2px 5px rgba(185,231,253,0.3), inset 0 -3px 8px rgba(185,231,253,0.5);'
} else {
btn.style.left = '0px';
btnWrapper.style.background = 'lightgrey';
btnWrapper.style.border = '1px solid lightgrey';
document.getElementById('l' + pinNoStr).style.cssText = 'background: #283446;\
background: gradient-gradient(#36455b, #283446);\
box-shadow: inset 0 1px 0 rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(185,231,253,0), inset 0 0 8px rgba(0,0,0,0.9), inset 0 -2px 5px rgba(0,0,0,0.3), inset 0 -5px 5px rgba(0,0,0,0.5);'
}
}
function pad(n, width, z) {
z = z || '0';
n = n + '';
return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}
* {
margin: 0;
padding: 0;
}
.dc {
margin: 10px 50px 10px 50px;
padding: 10px 10px 10px 10px;
background: rgb(183, 154, 216);
}
.tbanimate {
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
.togglebtn {
width: 75px;
height: 33px;
float: left;
background: lightgray;
border-radius: 9999px;
border: 2px solid lightgray;
}
.mainToggle {
width: 33px;
height: 33px;
background: whitesmoke;
border-radius: 9999px;
position: relative;
left: 0;
}
.light {
content: "";
display: inline-block;
width: 18px;
height: 18px;
margin: 10px;
border-radius: 9999px;
-webkit-transition: all .5s ease;
transition: all .5s ease;
z-index: 2;
}
<section class="dc" id="00">
<div>
<div class="togglebtn tbanimate" id="tb00">
<div class="mainToggle tbanimate" id="mt00"></div>
</div>
<div class="light" id="l00"></div>
</div>
</section>
Extra: Is this possible to make a draggable switch. Currently, only click can change state. It would be nice if I can drag the circle from one side to another. Pure JS, CSS.

You change the textContent of the #mt00 div based on the value of the boolean inside swPos.
* {
margin: 0;
padding: 0;
}
.dc {
margin: 10px 50px 10px 50px;
padding: 10px 10px 10px 10px;
background: rgb(183, 154, 216);
}
.tbanimate {
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
.togglebtn {
width: 75px;
height: 33px;
float: left;
background: lightgray;
border-radius: 9999px;
border: 2px solid lightgray;
}
.mainToggle {
width: 33px;
height: 33px;
background: whitesmoke;
border-radius: 9999px;
position: relative;
left: 0;
}
.light {
content: "";
display: inline-block;
width: 18px;
height: 18px;
margin: 10px;
border-radius: 9999px;
-webkit-transition: all .5s ease;
transition: all .5s ease;
z-index: 2;
}
#mt00{
vertical-align: middle;
display: table-cell;
}
<section class="dc" id="00">
<div>
<div class="togglebtn tbanimate" id="tb00">
<div class="mainToggle tbanimate" id="mt00"></div>
</div>
<div class="light" id="l00"></div>
</div>
<span id="result"></span>
</section>
<script>
window.addEventListener('DOMContentLoaded', function() {
var swPos = [Math.random() >= 0.5];
var swConnection = ["a0"];
var mtoo = document.getElementById('mt00');
if(swPos[0]){
mtoo.innerHTML = "On";
} else {
mtoo.innerHTML= "Off";
}
switchPosition(swPos, swConnection);
var togglebtns = document.getElementsByClassName('togglebtn');
for (var i = 0; i < togglebtns.length; i++) {
togglebtns[i].addEventListener('click', function() {
changingPin = Number(this.id.substr(2));
swPos[changingPin] = !swPos[changingPin];
if(swPos[changingPin]){
mtoo.innerHTML = "On";
} else {
mtoo.innerHTML = "Off";
}
drawSwitch(this.id.substr(2), swPos[changingPin]);
});
}
}, false);
function switchPosition(swPos, swConnection) {
for (i = 0; i < swConnection.length; i++) {
drawSwitch(pad(i, 2), swPos[i]);
}
}
function drawSwitch(pinNoStr, state) {
var btnWrapper = document.getElementById('tb' + pinNoStr);
var btn = document.getElementById('mt' + pinNoStr);
if (state == true) {
btn.style.left = (btnWrapper.offsetWidth - btn.offsetWidth - 2) + 'px';
btnWrapper.style.background = '#7bc77b';
btnWrapper.style.border = '1px solid #7bc77b';
document.getElementById('l' + pinNoStr).style.cssText = 'background: #b9f3fe;\
background: gradient-gradient(#ffffff, #77a1b9);\
box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(100,231,253,1), inset 0 0 8px rgba( 61,157,247,0.8), inset 0 -2px 5px rgba(185,231,253,0.3), inset 0 -3px 8px rgba(185,231,253,0.5);'
} else {
btn.style.left = '0px';
btnWrapper.style.background = 'lightgrey';
btnWrapper.style.border = '1px solid lightgrey';
document.getElementById('l' + pinNoStr).style.cssText = 'background: #283446;\
background: gradient-gradient(#36455b, #283446);\
box-shadow: inset 0 1px 0 rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(185,231,253,0), inset 0 0 8px rgba(0,0,0,0.9), inset 0 -2px 5px rgba(0,0,0,0.3), inset 0 -5px 5px rgba(0,0,0,0.5);'
}
}
function pad(n, width, z) {
z = z || '0';
n = n + '';
return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}
</script>

I have managed to do with pseudo elemets :after and :before
You need to give relative position to the parent, and absolute position to the :after and :before.
(()=>{
var swPos = [Math.random() >= 0.5];
var swConnection = ["a0"];
if(swPos[0]){
document.getElementById("tb00").classList.add("on-text");
document.getElementById("tb00").classList.remove("off-text");
} else {
document.getElementById("tb00").classList.add("off-text");
document.getElementById("tb00").classList.remove("on-text");
}
switchPosition(swPos, swConnection);
var togglebtns = document.getElementsByClassName('togglebtn');
for (var i = 0; i < togglebtns.length; i++) {
togglebtns[i].addEventListener('click', function() {
changingPin = Number(this.id.substr(2));
swPos[changingPin] = !swPos[changingPin];
if(swPos[changingPin]){
document.getElementById("tb00").classList.add("on-text");
document.getElementById("tb00").classList.remove("off-text");
} else {
document.getElementById("tb00").classList.add("off-text");
document.getElementById("tb00").classList.remove("on-text");
}
drawSwitch(this.id.substr(2), swPos[changingPin]);
});
}
})();
function switchPosition(swPos, swConnection) {
for (i = 0; i < swConnection.length; i++) {
drawSwitch(pad(i, 2), swPos[i]);
}
}
function drawSwitch(pinNoStr, state) {
var btnWrapper = document.getElementById('tb' + pinNoStr);
var btn = document.getElementById('mt' + pinNoStr);
if (state == true) {
btn.style.left = (btnWrapper.offsetWidth - btn.offsetWidth - 2) + 'px';
btnWrapper.style.background = '#7bc77b';
btnWrapper.style.border = '1px solid #7bc77b';
document.getElementById('l' + pinNoStr).style.cssText = 'background: #b9f3fe;\
background: gradient-gradient(#ffffff, #77a1b9);\
box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(100,231,253,1), inset 0 0 8px rgba( 61,157,247,0.8), inset 0 -2px 5px rgba(185,231,253,0.3), inset 0 -3px 8px rgba(185,231,253,0.5);'
} else {
btn.style.left = '0px';
btnWrapper.style.background = 'lightgrey';
btnWrapper.style.border = '1px solid lightgrey';
document.getElementById('l' + pinNoStr).style.cssText = 'background: #283446;\
background: gradient-gradient(#36455b, #283446);\
box-shadow: inset 0 1px 0 rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(185,231,253,0), inset 0 0 8px rgba(0,0,0,0.9), inset 0 -2px 5px rgba(0,0,0,0.3), inset 0 -5px 5px rgba(0,0,0,0.5);'
}
}
function pad(n, width, z) {
z = z || '0';
n = n + '';
return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}
* {
margin: 0;
padding: 0;
}
.dc {
margin: 10px 50px 10px 50px;
padding: 10px 10px 10px 10px;
background: rgb(183, 154, 216);
}
.tbanimate {
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
.togglebtn {
width: 75px;
height: 33px;
float: left;
background: lightgray;
border-radius: 9999px;
border: 2px solid lightgray;
position: relative;
}
.on-text:before {
content: 'On';
position: absolute;
top: 8px;
left: 8px;
}
.off-text:after {
content: 'Off';
position: absolute;
top: 8px;
right: 8px;
}
.mainToggle {
width: 33px;
height: 33px;
background: whitesmoke;
border-radius: 9999px;
position: relative;
left: 0;
}
.light {
content: "";
display: inline-block;
width: 18px;
height: 18px;
margin: 10px;
border-radius: 9999px;
-webkit-transition: all .5s ease;
transition: all .5s ease;
z-index: 2;
}
<section class="dc" id="00">
<div>
<div class="togglebtn tbanimate off-text" id="tb00">
<div class="mainToggle tbanimate" id="mt00"></div>
</div>
<div class="light" id="l00"></div>
</div>
</section>

Plus / Minus pictures for accordion list

The code below is for an accordion list I have created using HTML, CSS and JavaScript. Is there any way add a plus and minus picture in the left corner of the heading? So when I clicked on heading "A" or "B" the picture goes from the plus sign to the minus sign. Here are the two images I would like to use:
https://www.independencecenter.org/wp-content/uploads/2014/04/wellness.png
https://web.archive.org/web/20150227045704/http://licensing.paperbagrecords.com/wp-content/themes/licensing/assets/images/minus.png
(function () {
var accordions, i;
// Make sure the browser supports what we are about to do.
if (!document.querySelectorAll || !document.body.classList) return;
// Using a function helps isolate each accordion from the others
function makeAccordion(accordion) {
var targets, currentTarget, i;
targets = accordion.querySelectorAll('.accordion > * >h1 ');
for(i = 0; i < targets.length; i++) {
targets[i].addEventListener('click', function (e) {
/*Added the code below*/
if (e.target.parentNode.classList.contains("expanded")) {
e.target.parentNode.classList.remove("expanded")
} else {
/*Else do the following, same as before */
if (currentTarget)
currentTarget.classList.remove('expanded');
currentTarget = this.parentNode;
currentTarget.classList.add('expanded');
}
}, false);
}
accordion.classList.add('js');
}
// Find all the accordions to enable
accordions = document.querySelectorAll('.accordion');
console.log(accordions);
// Array functions don't apply well to NodeLists
for(i = 0; i < accordions.length; i++) {
makeAccordion(accordions[i]);
}
})();
<style>
/*All paragraphs*/
.p {
margin: 5px;
color: #007a5e;
}
.bold {
color: #007a5e;
font-weight:bold;
}
.boldwhite {
font-weight:bold;
}
/*Accordion Movement*/
.accordion.js > * {
overflow: hidden;
}
.accordion.js > *:not(.expanded) > *:not(h1) {
max-height: 0;
margin-top: 0;
margin-bottom: 0;
opacity: 0;
visibility: hidden;
overflow: hidden;
}
.accordion.js > .expanded > *:not(h1) {
opacity: 1;
visibility: visible;
}
.accordion.js > * > h1 {
cursor: pointer;
visibility: visible;
}
.accordion.js > * > *:not(h1) {
transition: max-height 0.5s, visibility 0.5s, margin 0.5s, opacity 0.5s;
}
/*Section Properties*/
.sections {
font-family: Verdana;
font-weight: lighter;
color: #5E5E5E;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #dddddd;
padding: 5px;
background-color: #FCFCFC;
border-radius: 1px;
}
.sections:hover {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/*Green Section Properties*/
.sections2 {
font-family: Verdana;
font-weight: lighter;
color: #5E5E5E;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #ccd6e0;
padding: 5px;
background-color:rgba(224, 235, 245,0.3);
border-radius: 1px;
}
.sections2:hover {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.accordion > section > div {
margin-bottom: 15px;
}
</style>
<section class="accordion js">
<section class="sections">
<h1><span style="font-size: 18px;">A</span></h1>
<div>
<p class="p" style="text-align: center;"><span style="color: #007a5e;">aerheahqeh.</span></p>
</div>
</section>
<br style="line-height: 15px;"/>
<section class="sections2">
<h1><span style="font-size: 18px;">B</span></h1>
<div>
<p class="p" style="text-align: center;">Twtjwrjwrj </p>
</div>
</section>
</section>

Use pseudo-elements on the child of your expanded class and a background image. Something like:
.accordion.js h1{
position:relative;
}
.accordion.js h1::before{
content: "";
display:block;
height:20px;
width:20px;
position:absolute;
left:0;
top:0;
background: url(YourPlusImageUrlHere);
}
.accordion.js .expanded h1::before{
background: url(YourMinusImageUrlHere);
}
Adjust for your styles.

JavaScript error: Uncaught SyntaxError: Invalid or unexpected token on line 1

Encoded code: http://js.do/code/hash717
Decoded code:
<script language="JavaScript">m='<style type="text/css">
#popup{
padding-top:5%;
margin:0 auto 0;
}
#popup_container{
width:485px;
height:auto;
margin:0 auto 0;
padding:10px;
background-color:#4e4e4e;
opacity:0.90;
}
#popup_inner{
width:inherit;
height:inherit;
background-color:#fff;
}
#popup_inner #header{
background-color: rgb(109, 132, 180);
color: rgb(255, 255, 255);
font-size: 15px;
font-weight: 700;
padding: 5px;
text-align: left;
}
#popup_inner #popup_content{
width:inherit;
position:relative;
padding-bottom:5px;
}
#container{
width:inherit;height:auto;margin:0 auto 0;
}
#container #content_wrapper{
box-shadow: 1px 1px 25px 2px rgb(11, 56, 97);
border-top: medium none;
background: none repeat scroll 0% 0% white;
font-size: 15px;
margin: 25px auto;
padding: 25px;
}
#content_wrapper #content{
background-color: #faeaf5;
border: 2px solid rgb(204, 204, 204);
margin:0 auto 0;
height:auto;
padding-top:5px;
text-align:center;
}
.uibutton {
position: relative;
z-index: 1;
overflow: visible;
display: inline-block;
padding: 0.3em 0.6em 0.375em;
border: 1px solid #999;
border-bottom-color: #888;
margin: 0;
text-decoration: none;
text-align: center;
font: bold 11px/normal 'lucida grande', tahoma, verdana, arial, sans-serif;
white-space: nowrap;
cursor: pointer;
/* outline: none; */
color: #333;
background-color: #eee;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f6f6), to(#e4e4e3));
background-image: -moz-linear-gradient(#f5f6f6, #e4e4e3);
background-image: -o-linear-gradient(#f5f6f6, #e4e4e3);
background-image: linear-gradient(#f5f6f6, #e4e4e3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f6f6', EndColorStr='#e4e4e3'); /* for IE 6 - 9 */
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
/* IE hacks */
zoom: 1;
*display: inline;
}
.uibutton:hover,
.uibutton:focus,
.uibutton:active {
border-color: #777 #777 #666;
}
.uibutton:active {
border-color: #aaa;
background: #ddd;
filter: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/* overrides extra padding on button elements in Firefox */
.uibutton::-moz-focus-inner {
padding: 0;
border: 0;
}
/* ............................................................................................................. Icons */
.uibutton.icon:before {
content: "";
position: relative;
top: 1px;
float:left;
width: 10px;
height: 12px;
margin: 0 0.5em 0 0;
background: url(fb-icons.html) 99px 99px no-repeat;
}
.uibutton.edit:before { background-position: 0 0; }
.uibutton.add:before { background-position: -10px 0; }
.uibutton.secure:before { background-position: -20px 0; }
.uibutton.prev:before { background-position: -30px 0; }
.uibutton.next:before { float:right; margin: 0 -0.25em 0 0.5em; background-position: -40px 0; }
/* ------------------------------------------------------------------------------------------------------------- BUTTON EXTENSIONS */
/* ............................................................................................................. Large */
.uibutton.large {
font-size: 2em;
}
/* ............................................................................................................. Submit, etc */
.uibutton.confirm {
border-color: #29447e #29447e #1a356e;
color: #fff;
background-color: #5B74A8;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#637bad), to(#5872a7));
background-image: -moz-linear-gradient(#637bad, #5872a7);
background-image: -o-linear-gradient(#637bad, #5872a7);
background-image: linear-gradient(#637bad, #5872a7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#637bad', EndColorStr='#5872a7'); /* for IE 6 - 9 */
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
}
.uibutton.confirm:active {
border-color: #29447E;
background: #4F6AA3;
filter: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/* popup */
.clear {
clear: both;
font-size: 1px;
height: 1px;
}
.dialog_parent {
position: absolute;top: 150px;z-index: 1000;
}
.corner1 {
background-position: left top;
}
.corner2 {
background-position: right top;
}
.corner3 {
background-position: left bottom;
}
.corner4 {
background-position: right bottom;
}
.corner {
background-image: url("http://2.bp.blogspot.com/-9nVh-xgamvw/Ud1_84PW_XI/AAAAAAAAADU/J7HRRbNvaOA/s1600/Vo3hNjP.gif");
height: 10px;
opacity: 0.7;
width: 10px;
}
.shadow_border1 {
height: 10px;
width: 600px;
}
.shadow_border {
background-color: #4F4F4F;
opacity: 0.7;
}
.dialog_inner {
background-color: #FFFFFF;
border: 1px solid #665665;
}
.dialog_parent .title_bar {
background-color: #6D84B4;
color: #FFFFFF;
font-size: 15px;
font-weight: 700;
padding: 5px;
text-align: left;
}
.dialog_inner .main_div {
border: 1px solid #999999;
padding: 10px;
text-align: center;
}
.dialog_inner .buttons_div {
background-color: #F2F2F2;
border-top: 1px solid #C6C6C6;
padding: 6px 18px;
}
#tbl_div{
border: 0pt none; display: block; height: 100%; left: 0pt; padding: 0px; position: fixed; top: 0pt; width: 100%; z-index: 1001;
}
#tbl_div_bg{
background-color: black; border: 0pt none; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30); height: 100%; left: 0pt; opacity: 0.3; padding: 0px; position: fixed; top: 0pt; width: 100%; z-index: 1001;
}
.FBConnectButton_Simple,
.FBConnectButton_RTL_Simple{background-image:url("http://1.bp.blogspot.com/-vIio-9kUZ1c/Ud2Af00qfhI/AAAAAAAAADc/0dTA-2TdJX8/s1600/connect_favicon0992.png");background-repeat:no-repeat;outline:none;text-decoration:none}
.FBConnectButton_RTL_Simple{background-position:right 0}
.FBConnectButton_Simple .FBConnectButton_Text_Simple{margin:0 0 0 20px;padding-bottom:1px}
.FBConnectButton_RTL_Simple .FBConnectButton_Text_Simple{margin:0 10px 0 0}
a.FBConnectButton_Simple:hover .FBConnectButton_Text_Simple,
a.FBConnectButton_RTL_Simple:hover .FBConnectButton_Text_Simple,
.FBConnectButton_Simple:hover .FBConnectButton_Text_Simple,
.FBConnectButton_RTL_Simple:hover .FBConnectButton_Text_Simple{text-decoration:underline}
.FBConnectButton,
.FBConnectButton_RTL{background:#29447e url("http://3.bp.blogspot.com/-gp5_OiXMIIs/Ud2BI-O6ZvI/AAAAAAAAADk/nu9PdWY1t1c/s1600/connect_spriteb2be.png");background-repeat:no-repeat;cursor:default;display:inline-block;padding:0 0 0 1px;text-decoration:none;outline:none}
.FBConnectButton .FBConnectButton_Text,
.FBConnectButton_RTL .FBConnectButton_Text{background:#5f78ab url("http://3.bp.blogspot.com/-gp5_OiXMIIs/Ud2BI-O6ZvI/AAAAAAAAADk/nu9PdWY1t1c/s1600/connect_spriteb2be.png");border-top:solid 1px #879ac0;border-bottom:solid 1px #1a356e;color:#fff;display:block;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;font-weight:bold;padding:2px 6px 4px;margin:1px 1px 0 0;text-shadow:none}
a.FBConnectButton,
a.FBConnectButton_RTL ,
.FBConnectButton,
.FBConnectButton_RTL{text-decoration:none}
a.FBConnectButton:active .FBConnectButton_Text,
a.FBConnectButton_RTL:active .FBConnectButton_Text ,
.FBConnectButton:active .FBConnectButton_Text,
.FBConnectButton_RTL:active .FBConnectButton_Text{border-bottom:solid 1px #29447e;border-top:solid 1px #45619d;background:#4f6aa3;text-shadow:none}
.FBConnectButton_BigPun,
.FBConnectButton_RTL_BigPun{background-position:left -60px;font-size:24px;line-height:30px}
.FBConnectButton_BigPun .FBConnectButton_Text{padding:3px 8px 3px 12px;margin-left:38px}
a.FBConnectButton_BigPun:active{background-position:left -99px}
.FBConnectButton_RTL_BigPun{background-position:right -268px}
.FBConnectButton_RTL_BigPun .FBConnectButton_Text{padding:3px 8px 3px 12px;margin-right:39px}
a.FBConnectButton_RTL_BigPun:active{background-position:right -307px}
.FBConnectButton_Large,
.FBConnectButton_RTL_Large{background-position:left -138px;font-size:13px;line-height:16px}
.FBConnectButton_Large .FBConnectButton_Text{margin-left:24px}
a.FBConnectButton_Large:active{background-position:left -163px}
.FBConnectButton_RTL_Large{background-position:right -346px}
.FBConnectButton_RTL_Large .FBConnectButton_Text{margin-right:25px}
a.FBConnectButton_RTL_Large:active{background-position:right -371px}
.FBConnectButton_Medium,
.FBConnectButton_RTL_Medium{background-position:left -188px;font-size:11px;line-height:14px}
.FBConnectButton_Text,
.FBConnectButton_Medium .FBConnectButton_Text{padding:2px 6px 3px 6px;margin-left:21px}
a.FBConnectButton_Medium:active{background-position:left -210px}
.FBConnectButton_RTL_Medium{background-position:right -396px}
.FBConnectButton_RTL_Text,
.FBConnectButton_RTL_Medium .FBConnectButton_Text{padding:2px 6px 3px 6px;margin-right:22px}
a.FBConnectButton_RTL_Medium:active{background-position:right -418px}
.FBConnectButton_Small,
.FBConnectButton_RTL_Small{background-position:left -232px;font-size:10px;line-height:10px}
.FBConnectButton_Small .FBConnectButton_Text{padding:2px 6px 3px;margin-left:17px}
a.FBConnectButton_Small:active ,
.FBConnectButton_Small:active{background-position:left -250px}
.FBConnectButton_RTL_Small{background-position:right -440px}
.FBConnectButton_RTL_Small .FBConnectButton_Text{padding:2px 6px;margin-right:18px}
a.FBConnectButton_RTL_Small:active{background-position:right -458px}
.FBConnectButton_Inactive{filter:alpha(opacity = 40);-khtml-opacity:.4;-moz-opacity:.4;opacity:.4}
.fb_share_count_wrapper{position:relative;float:left}
.fb_share_count{background:#b0b9ec none repeat scroll 0 0;color:#333;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;text-align:center}
.fb_share_count_inner{background:#e8ebf2;display:block}
.fb_share_count_right{margin-left:-1px;display:inline-block}
.fb_share_count_right .fb_share_count_inner{border-top:solid 1px #e8ebf2;border-bottom:solid 1px #b0b9ec;margin:1px 1px 0 1px;font-size:10px;line-height:10px;padding:2px 6px 3px;font-weight:bold}
.fb_share_count_top{display:block;letter-spacing:-1px;line-height:34px;margin-bottom:7px;font-size:22px;border:solid 1px #b0b9ec}
.fb_share_count_nub_top{border:none;display:block;position:absolute;left:7px;top:35px;margin:0;padding:0;width:6px;height:7px;background-repeat:no-repeat;background-image:url(../rsrc.php/zCXBS/hash/89zgzk50.html)}
.fb_share_count_nub_right{border:none;display:inline-block;padding:0;width:5px;height:10px;background-repeat:no-repeat;background-image:url(../rsrc.php/zAQB0/hash/1a8txe26.html);vertical-align:top;background-position:right 5px;z-index:10;left:2px;margin:0 2px 0 0;position:relative}
.fb_share_no_count{display:none}
.fb_share_size_Small .fb_share_count_right .fb_share_count_inner{font-size:10px}
.fb_share_size_Medium .fb_share_count_right .fb_share_count_inner{font-size:11px;padding:2px 6px 3px;letter-spacing:-1px;line-height:14px}
.fb_share_size_Large .fb_share_count_right .fb_share_count_inner{font-size:13px;line-height:16px;padding:2px 6px 4px;font-weight:normal;letter-spacing:-1px}
hr{
margin:20px;
border:none;
border-top:1px solid #ff6d00;
border-left:1px solid #ff6d00;
}
</style>
<div id="fb_popup" style="display: none;">
<div id="tbl_div">
<div id="tbl_div_bg">
</div>
</div>
<div style="position: fixed; right: 0; top: 38%; width: 100%; z-index: 10002;">
<center>
<div class="dialog_parent" style="position: inherit; visibility: visible; z-index: 1004;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="corner corner1"></td>
<td class="shadow_border shadow_border1"></td>
<td class="corner corner2"></td>
</tr>
<tr>
<td class="shadow_border"></td>
<td style="width: 500px;">
<div class="dialog_inner" id="_PopupDiv1">
<div class="title_bar">
</div>
<div style="padding: 10px;">
<div class="main_div">
<table>
<tr>
<center>
<script type="text/javascript">
//<![CDATA[
LSM_Slot({
adkey: '6ce',
ad_size: '300x250',
slot: 'slot70147'
});
//]]>
</script></center>
</tr>
</table>
<div align="center" style="margin: auto; width: 190px;">
<b><span class="FBConnectButton FBConnectButton_Medium" onclick="check = 'true';wopen2('http://www.facebook.com/sharer.php?u= ' window.location.href,'sharer',650,310,'no','no');" style="cursor: pointer;">
<span class="FBConnectButton_Text">PLEASE SHARE THIS!</span>
</span>
</b></div>
<b style="font-size: 11px;">CLICK "CLOSE" AFTER SHARING. </b>
</div>
</div>
<div class="buttons_div"></br>
<iframe src="http://onlinaz.com/banner-header.html" style="border:0px #FFFFFF none;" name="B1" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="40px" width="333px"></iframe>
<div style="float: right;">
<input class="uibutton" onclick="closePopup();" type="button" value="Close" />
</div>
<div class="clear">
</div>
</div>
</div>
</td>
<td class="shadow_border"></td>
</tr>
<tr>
<td class="corner corner3"></td>
<td class="shadow_border shadow_border1"></td>
<td class="corner corner4"></td>
</tr>
</tbody></table>
</div>
<!-- close _DialogDiv-->
</center>
</div>
</div>
<!-- close fb popup-->
<script type="text/javascript">
var check = 'false' ;
document.getElementById('fb_popup').style.display = 'block';
function closePopup() {
if ( check == 'true' ) {
//document.getElementById('ads_popup').style.display = 'block';
document.getElementById('fb_popup').style.display = 'none';
}
else {
alert('Please Support Us By Sharing This Content To Access The Site!');
}
}
function wopen2(url, name, w, h, scrolling, resizable)
{
// Fudge factors for window decoration space.
// In my tests these work well on all platforms & browsers.
w = 32;
h = 96;
wleft = (screen.width - w) / 2;
wtop = (screen.height - h) / 2;
// IE5 and other old browsers might allow a window that is
// partially offscreen or wider than the screen. Fix that.
// (Newer browsers fix this for us, but let's be thorough.)
if (wleft < 0) {
w = screen.width;
wleft = 0;
}
if (wtop < 0) {
h = screen.height;
wtop = 0;
}
var win = window.open(url,
name,
'width=' w ', height=' h ', '
'left=' wleft ', top=' wtop ', '
'location=no, menubar=no, '
'status=no, toolbar=no, scrollbars=' scrolling ', resizable=' resizable);
// Just in case width and height are ignored
win.resizeTo(w, h);
// Just in case left and top are ignored
win.moveTo(wleft, wtop);
win.focus();
}
function call_page(url)
{
var xhr_object ;
if(window.XMLHttpRequest) // FIREFOX
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // IE
try { xhr_object = new ActiveXObject('Msxml2.XMLHTTP'); }
catch (e)
{
try { xhr_object = new ActiveXObject('Microsoft.XMLHTTP'); }
catch (e2)
{
try { xhr_object = new XMLHttpRequest(); }
catch (e3) { return "Error!, sorry retry this later!" ; }
}
}
else
return "Error!, sorry retry this later!";
var tmp = "Error!, sorry retry this later!";
//IE
xhr_object.onreadystatechange = function()
{
if(xhr_object.readyState == 4)
{
if(xhr_object.status == 200) {
tmp = xhr_object.responseText;
document.getElementById("message").innerHTML = tmp ;
}
else {
tmp = "Error!, sorry retry this later!" ;
}
} else {
document.getElementById("message").innerHTML = "wait for registering...";
}
};
xhr_object.open("GET", url, true); // false/true (synchrone/asynchrone)
xhr_object.send(null);
return tmp ;
}
</script><script>;d=unescape(m);document.write(d);</script>

It looks like you're trying to set the value of m to multiple lines of text, which you can't do in JavaScript. Instead, you'll need to do it like so:
m='<style type="text/css">' +
'#popup{' +
' padding-top: 5%' +
// and so on
You can do multi-line strings in JavaScript using template literals, but these don't have broad enough support yet for production use.