We Keep Coding

Javascript won't close popup window on mobile, fine on desktop

I'm making a website which you can view here: carlraymondhansen.com
I'm not very good at coding so I don't really know what I'm doing here. But I got the website to work how I want on the desktop. Mobile works just as well except that when you open a popup, you can't close it like you can on desktop. I wanted to make it so you can tap anywhere outside the window and it'll close. You can click anywhere on desktop, not on mobile. How do I fix this?
Here's all the code for the site:
$(document).ready(function() {
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel');
var popURL = $(this).attr('href');
var query = popURL.split('?');
var dim = query[1].split('&');
var popWidth = dim[0].split('=')[1];
$('#' + popID).fadeIn().css({
'width': Number(460)
}).prepend('<a href="#" class = "close" > < /a>');
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
$('#' + popID).css({
'margin-top': -popMargTop,
'margin-left': -popMargLeft
});
$('body').append('<div id="fade"></div>');
$('#fade').css({
'filter': 'alpha(opacity=80)'
}).fadeIn();
return false;
});
$('a.close, #fade').live('click', function() {
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove();
});
return false;
});
});
body {
background-image: url(https://i.imgur.com/Y4eYm05.jpg);
background-attachment: relative;
background-repeat: no-repeat;
}
.container {
width: 100%;
font-family: Cormorant Garamond;
font-size: 20px;
font-weight: 500;
color: black;
text-align: center;
line-height: 1.5;
}
.container #card1 {
width: 400px;
height: 200px;
background-color: white;
margin: auto;
top: 300px;
position: relative;
box-shadow: 5px 0px 10px rgba(30, 30, 30, .3), -5px 0px 10px rgba(30, 30, 30, .3), 0px 5px 10px rgba(30, 30, 30, .3), 0px -10px 20px rgba(30, 30, 30, 1);
}
.container #card1 #name {
width: 400px;
height: 200px;
padding-top: 70px;
}
.container a {
color: black;
text-decoration: none;
}
.container #card2 {
width: 400px;
height: 200px;
background-image: url(https://i.imgur.com/PkOy68G.gif);
background-size: 400px 200px;
margin: auto;
top: 508px;
position: relative;
box-shadow: 5px 0px 10px rgba(30, 30, 30, .3), -5px 0px 10px rgba(30, 30, 30, .3), 0px 5px 10px rgba(30, 30, 30, .3), 0px -10px 20px rgba(30, 30, 30, 1);
}
.container #card3 {
width: 400px;
height: 200px;
background-image: url(https://i.imgur.com/XRjMag8.gif);
background-size: 400px 200px;
margin: auto;
top: 720px;
position: relative;
box-shadow: 5px 0px 10px rgba(30, 30, 30, .3), -5px 0px 10px rgba(30, 30, 30, .3), 0px 5px 10px rgba(30, 30, 30, .3), 0px -10px 20px rgba(30, 30, 30, 1);
}
.container #card4 {
width: 400px;
height: 200px;
background-image: url(https://i.imgur.com/r9wm3Zv.gif);
background-size: 400px 200px;
margin: auto;
top: 930px;
position: relative;
box-shadow: 5px 0px 10px rgba(30, 30, 30, .3), -5px 0px 10px rgba(30, 30, 30, .3), 0px 5px 10px rgba(30, 30, 30, .3), 0px -10px 20px rgba(30, 30, 30, 1);
}
.container #card5 {
width: 400px;
height: 200px;
background-color: white;
margin: auto;
top: 1138px;
position: relative;
margin-bottom: 250px;
box-shadow: 5px 0px 10px rgba(30, 30, 30, .3), -5px 0px 10px rgba(30, 30, 30, .3), 0px 5px 10px rgba(30, 30, 30, .3), 0px -10px 20px rgba(30, 30, 30, 1);
}
.container #card5 #contact {
width: 400px;
height: 200px;
padding-top: 70px;
}
.popup_block {
text-align: center;
font-family: Cormorant Garamond;
font-size: 18px;
font-weight: 500;
padding: 30px;
width: 500px;
display: none;
background: #fff;
float: left;
position: fixed;
top: 50%;
left: 50%;
z-index: 99999;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
}
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
#fade {
display: none;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: #000;
opacity: 0.8;
}
.popup_block a {
color: blue;
text-decoration: none;
}
.popup_block a:hover {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:500,700" rel="stylesheet">
<!----------------------------------------->
<!----------------------------------------->
<div class="container">
<div id="card1">
<a href="#?w=500" rel="box4" class="poplight">
<div id="name">Carl Raymond Hansen</br>Writer & Director</div </a>
</div>
<div id="card2">
</div>
<div id="card3">
</div>
<div id="card4">
</div>
<div id="card5">
<a href="#?w=500" rel="box5" class="poplight">
<div id="contact">408 — 887 — 0157</br>carlraymondhansen#gmail.com</div>
</a>
</div>
</div>
<div class="content">
<div id="blur"></div>
</div>
<!---------------------------------------->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<!---------------------------------------->
<link rel="stylesheet" href="styles.css">
</head>
<!----------------------------------------->
<body>
<div id="box1" class="popup_block">
</br>
Reel
</br>
Cinematography
</br>
</br>
</br>
<iframe width="400" height="224" src="https://www.youtube.com/embed/csUuikE2ZIg?showinfo=0" frameborder="0" allowfullscreen></iframe>
</br>
</br>
</div>
<div id="box3" class="popup_block">
</br>
— then Stupor —
</br>
Writer & Director
</br>
</br>
<iframe width="400" height="224" src="https://www.youtube.com/embed/hmDk0CIPV7U?showinfo=0" frameborder="0" allowfullscreen></iframe>
</br>
</br>
</div>
<div id="box2" class="popup_block">
</br>
Calling Lisa
</br>
Writer & Director
</br>
</br>
</br>
<iframe width="400" height="224" src="https://www.youtube.com/embed/EkYuXxTvdFw?showinfo=0" frameborder="0" allowfullscreen></iframe>
</br>
</br>
</div>
<div id="box4" class="popup_block">
</br>
Currently Attending
</br>
Art Center College of Design
</br>
For Directing
</br>
</br>
Resume
</br>
</br>
</div>
<div id="box5" class="popup_block">
</br>
Follow my Social Media
</br>
</br>
Twitter
</br>
Instagram
</br>
</br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!----------------------------------------->
</body>
</html>

You can use tap event to make it work on mobile. Example:
$('a.close, #fade').on('tap', function() {
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove();
});
return false;
});
});
reference: https://api.jquerymobile.com/tap/

Try using vclick event, works both on desktop and mobile devices:
$('a.poplight[href^=#]').on( "vclick", function() { ... } )
Docs

JavaScript. How to control background image slide show to synchronize with bubbles

I am trying to create backgroundImage slide show with bubbles. i was working very fine untill i added eventListeners for mouseover and mouseout.
mouseover enent clears the setInterval while the mouseout calls back the setInterval().
The execution is triggered with the setInterval in the window load event.
i dont know if my explained my problem very well
var bubble_Array;
var bubble_i = 0;
var intrval;
var ba;
var bi =0;
var intr;
var man = ['url(imags/ParLour.jpg', 'url(imags/767.jpg', 'url(imags/7series.jpg', 'url(imags/02.jpg', 'url(imags/BedRoom.jpg', 'url(imags/30.jpg', 'url(imags/volks.jpg', 'url(imags/sports.jpg', 'url(imags/real.jpg', 'url(imags/portable.jpg', 'url(imags/perspective.jpg', 'url(imags/green.jpg', 'url(imags/fantom.jpg', 'url(imags/fantom2.jpg', 'url(imags/elegance.jpg', 'url(imags/bridge.jpg', 'url(imags/BMW.jpg', 'url(imags/interior.jpg','url(imags/3Dcar007.jpg'];
function _(x){
return document.getElementById(x);
}
function bubbleMain(bi){
bubble_i++;
if(bubble_i == man.length){
bubble_i = 0;
}
_('bubblebox').style.opacity = 0;
for (var i =0; i < ba.length; i ++){
ba[i].style.background = "rgba(0,0,0,.1)";
}
setTimeout(function(){
_('bubblebox').style.backgroundImage = man[bubble_i];
ba[bi].style.background = "red";
_("bubblebox").style.opacity = 1;
}, 500);
}
function bubbleSlide(){
ba = _('bubbles').children;
_('bubblebox').style.backgroundImage = man[bubble_i];
ba[bi].style.backgroundColor = 'red';
bi++;
if (bi == ba.length){
bi =0;
}
bubbleMain(bi);
}
window.addEventListener("load", function(){
ba = _('bubbles').children;
_('bubblebox').style.backgroundImage = man[bubble_i];
ba[bi].style.backgroundColor = 'red';
intrval = setInterval(bubbleSlide, 2000);
})
window.addEventListener("mouseover", function(){
clearInterval(intrval);
})
window.addEventListener("mouseout", function(){
intrval = setInterval(bubbleSlide, 2000);
})
#bubblebox{
height: 550px;
width: 1200px;
border:2px solid black;
margin: 50px auto;
background-repeat: no-repeat;
z-index: -5;
background-size: cover;
transition:background-image 0.2s;
transition: opacity 0.3s linear 0s;
}
#bubbles{
height: 0px;
width: auto;
text-align: center;
z-index: 100;
position: absolute;
}
#bubbles div{
height: 20px;
width: 20px;
background: rgba(0,0,0,.1);
border: 2px solid green;
border-radius: 100%;
display: inline-block;
position: relative;
margin: 0px auto;
top: 10px;
z-index: 1000;
left: 310px;
color:#fff;
cursor: pointer;
}
#heading{
height: 20px;
width: 200px;
background-color: red;
position: relative;
top: 100px;
left: 500px;
color: #fff;
text-align: center;
}
#arrow_right, #arrow_left, #arrow_middle{
width: 20px;
height: 20px;
transition: .5s;
float: left;
box-shadow: -4px 4px 0 rgb(255, 255, 255);
cursor: pointer;
left: 1100px;
position: relative;
margin: 0 -10px 0 0px;
top: 200px;
border-bottom: 3px solid black;
border-left: 3px solid black;
transform: rotate(225deg);
}
#arrow_right2, #arrow_left2, #arrow_middle2{
width: 20px;
height: 20px;
transition: .5s;
float: left;
box-shadow: -4px 4px 0 rgb(255, 255, 255);
cursor: pointer;
left: 10px;
position: relative;
margin: 0 -10px 0 0px;
top: 200px;
border-bottom: 3px solid black;
border-left: 3px solid black;
transform: rotate(45deg);
tex
}
#arrow_right2:hover, #arrow_left2:hover, #arrow_middle2:hover{
box-shadow: -5px 5px 0 rgb(255, 255, 255);
}
#arrow_right:hover, #arrow_left:hover, #arrow_middle:hover{
box-shadow: -5px 5px 0 rgb(255, 255, 255);
}
<div id="bubblebox">
<div id="bubbles">
<div onclick="bubbleMain(0)">1</div>
<div onclick="bubbleMain(1)">2</div>
<div onclick="bubbleMain(2)">3</div>
<div onclick="bubbleMain(3)">4</div>
<div onclick="bubbleMain(4)">5</div>
<div onclick="bubbleMain(5)">6</div>
<div onclick="bubbleMain(6)">7</div>
<div onclick="bubbleMain(7)">8</div>
<div onclick="bubbleMain(8)">9</div>
<div onclick="bubbleMain(9)">10</div>
<div onclick="bubbleMain(10)">11</div>
<div onclick="bubbleMain(11)">12</div>
<div onclick="bubbleMain(12)">13</div>
<div onclick="bubbleMain(13)">14</div>
<div onclick="bubbleMain(14)">15</div>
<div onclick="bubbleMain(15)">16</div>
<div onclick="bubbleMain(16)">17</div>
<div onclick="bubbleMain(17)">18</div>
<div onclick="bubbleMain(18)">19</div>
<div onclick="bubbleMain(19)">20</div>
</div>
<div id="heading">Caption</div>
<div id="arrow_right"></div>
<div id="arrow_middle"></div>
<div id="arrow_left"></div>
<div id="arrow_right2"></div>
<div id="arrow_middle2"></div>
<div id="arrow_left2"></div>
<div id="bubblecontent"></div>
</div>

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.

How would I fix elements moving due to an element animating above?

I am getting an error with my website. I cannot seem to figure out why the 3 buttons below the title images are moving while the 2nd title picture is animating. My goal is to get the 3 buttons below the titles to stay where they are when the title2 is animating. The animation is a constant shrink/grow and is called pulse. Here is all of my code, its messy but this is just for me to learn.
<!DOCTYPE html>
<html>
<head>
<title>Test Website</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script src="scripts/snow.js"></script>
<style type="text/css">
body
{
background-color: black;
background-image: url("res/bg.png");
background-repeat: no-repeat;
}
div.button1
{
width: 600px;
position: static;
height: 150px;
margin: 30px 50px;
background-image: url("res/button1.png");
border: 1px solid #FF0030;
border-radius: 55px;
/*opacity:0.4;*/
/*filter:alpha(opacity=40);*/
}
div.button2
{
width: 600px;
height: 150px;
margin: 30px 50px;
background-image: url("res/button2.png");
border: 1px solid #00B7FF;
border-radius: 55px;
/*opacity:0.4;*/
/*filter:alpha(opacity=40);*/
}
div.button3
{
width: 600px;
height: 150px;
margin: 30px 50px;
background-image: url("res/button3.png");
border: 1px solid #00FFD5;
border-radius: 55px;
/*opacity:0.4;*/
/*filter:alpha(opacity=40);*/
}
div.button1:hover
{
transition: all 0.2s ease-in;
-webkit-stroke-width: 5.3px;
-webkit-stroke-color: #FFFFFF;
-webkit-fill-color: #FFFFFF;
box-shadow: 1px 0px 20px #000000;
border: 2px solid #FF0030;
}
div.button2:hover
{
transition: all 0.2s ease-in;
-webkit-stroke-width: 5.3px;
-webkit-stroke-color: #FFFFFF;
-webkit-fill-color: #FFFFFF;
box-shadow: 1px 0px 20px #000000;
border: 2px solid #00B7FF;
}
div.button3:hover
{
transition: all 0.2s ease-in;
-webkit-stroke-width: 5.3px;
-webkit-stroke-color: #FFFFFF;
-webkit-fill-color: #FFFFFF;
box-shadow: 1px 0px 20px #000000;
border: 2px solid #00FFD5;
}
#seventyfive{
font-size:100px;
font-weight:bold;
}
</style>
</head>
<body>
<center>
<img src="res/title.png"</img>
<img id="seventyfive"; src="res/title2.png"</img>
</br>
<div class="button1">
</div>
<div class="button2">
</div>
<div class="button3">
</div>
</center>
</body>
</html>
<script>
$(document).ready( function(){
$.fn.snow({ minSize: 8, maxSize: 15, newOn: 390, flakeColor: '#C800FF' });
});
(function pulse(back) {
$('#seventyfive').animate(
{
'font-size': (back) ? '100px' : '160px',
height: (back) ? "60%" : "50%",
width: (back) ? "60%" : "50%",
}, 700, function(){pulse(!back)});
})(false);
</script>
Thank you for reading my question, I am open to any answers/suggestions. Thank you all!

The vertical placement is going to be based on the size of whatever is above the items. So, if the item above it is 100px, then the button below will be at position 100px + margin-bottom. When that item is 200px, the button below will start at 200px + margin-bottom.
What you want is a div around your image tag that doesn't change size.
<div style="width: 500px; height: 500px">
<img id="seventyfive"; src="res/title2.png"</img>
</div>
PS, look into css animations vs. jquery.

Try
#seventyfive{
font-size:100px;
font-weight:bold;
position:absolute;
}
I'm not making any promises on it. Tried to run it through a fiddle first, but the pulse wasn't working. If that doesn't work then you could also try
CSS
.seventyfive {
position:absolute;
}
HTML
<div class="seventyfive">
<img src="res/title.png">
<img id="seventyfive"; src="res/title2.png">
</div>

Open a div on click for each tooltip in Jquery

I am trying to get a tooltip for each portion on a location map. Using the code below, I am getting the tool tip for as many portions as I want. But the next step is to give a link in each tooltip and it should open another which has more information.
Please suggest if I can do something in my code. Note: It should not be involve manually adding divs, divs should just be added as my tooltips are added (using variables).
<style>
body {
text-align: center;
font: 13px Arial,Helvetica;
}
/* Relative positioning*/
#wrapper {
position: relative;
margin: 10px auto 20px auto;
border: 1px solid #fafafa;
-moz-box-shadow: 0 3px 3px rgba(0,0,0,.5);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,.5);
box-shadow: 0 3px 3px rgba(0,0,0,.5);
}
/* Hide the original tooltips contents */
.pin {
display: none;
}
/* Begin styling the tooltips and pins */
.tooltip-up, .tooltip-down {
position: absolute;
background:url(mapimg.png);
width: 26px;
height: 15px;
}
.tooltip-down {
background-position: 0 -52px;
}
.tooltip {
display: none;
width: 180px;
cursor: ;
text-shadow: 0 1px 0 #fff;
position: absolute;
top: 12px;
left: 140px;
z-index: 999;
margin-left: -125px;
padding:15px;
color: #222;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 3px 0 rgba(0,0,0,.7);
-webkit-box-shadow: 0 3px 0 rgba(0,0,0,.7);
box-shadow: 0 3px 0 rgba(0,0,0,.7);
background: #fff1d3;
background: -webkit-gradient(linear, left top, left bottom, from(#fff1d3), to(#ffdb90));
background: -webkit-linear-gradient(top, #fff1d3, #ffdb90);
background: -moz-linear-gradient(top, #fff1d3, #ffdb90);
background: -ms-linear-gradient(top, #fff1d3, #ffdb90);
background: -o-linear-gradient(top, #fff1d3, #ffdb90);
background: linear-gradient(top, #fff1d3, #ffdb90);
}
.tooltip::after {
content: '';
position: absolute;
top: -10px;
left: 50%;/*
margin-left: -90px;
border-bottom: 10px solid #fff1d3;
border-left: 10px solid transparent;
border-right :10px solid transparent;*/
}
.tooltip-down .tooltip {
bottom: 12px;
top: auto;
}
.tooltip-down .tooltip::after {
bottom: -10px;
top: auto;
border-bottom: 0;
border-top: 10px solid #ffdb90;
}
.tooltip h2 {
font: bold 1.3em 'Trebuchet MS', Tahoma, Arial;
margin: 0 0 10px;
}
.tooltip ul {
margin: 0;
padding: 0;
list-style: none;
}
#pop1, #pop2 {
display:none;
width: 180px;
cursor: ;
text-shadow: 0 1px 0 #fff;
position: absolute;
top: 12px;
left: 140px;
z-index: 999;
margin-left: -125px;
padding:15px;
color: #222;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background: #fff1d3;
}
</style>
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script>
$(document).ready(function(){
// set the wrapper width and height to match the img size
$('#wrapper').css({'width':$('#wrapper img').width(),
'height':$('#wrapper img').height()
})
//tooltip direction
var tooltipDirection;
for (i=0; i<$(".pin").length; i++)
{
// set tooltip direction type - up or down
if ($(".pin").eq(i).hasClass('pin-down')) {
tooltipDirection = 'tooltip-down';
}
else {
tooltipDirection = 'tooltip-up';
}
// append the tooltip
$("#wrapper").append("<div style='left:"+$(".pin").eq(i).data('xpos')+"px;top:"+$(".pin").eq(i).data('ypos')+"px' class='" + tooltipDirection +"'>\
<div class='tooltip'>" + $(".pin").eq(i).html() + "</div>\
</div>");
}
// show/hide the tooltip
$('.tooltip-up, .tooltip-down').mouseenter(function(){
$(this).children('.tooltip').fadeIn(100);
}).mouseleave(function(){
$(this).children('.tooltip').fadeOut(100);
})
});
</script>
<div id="wrapper">
<img width="920" height="450" src="image.jpg" alt="World continents">
<div class="pin pin-down" data-xpos="280" data-ypos="110">
tooltip 1 <br>
<b>Area:</b> 24 sft<br>
<b>block:</b> 2 Click here for more info(need to give link here for new pop div..for all other tooltips)
</div>
<div class="pin" data-xpos="280" data-ypos="135">
<b>Area 2</b><br/>
Area: 17 sft<br/>
Population: 382,000,000
</div>
<div class="pin pin-down" data-xpos="280" data-ypos="158">
<b>Area 3</b><br/>
Area: 10<br/>
<b>Population:</b> 731,000,000 Click here for more info(need to give link here for new pop div..for all other tooltips)
</div>
<div class="pin" data-xpos="280" data-ypos="180">
<strong>Area 4</strong><br/>
Area: 30<br/>
Population: 1,022,011,000 Click here for more info(need to give link here for new pop div..for all other tooltips)
</div>
<div class="pin pin-down" data-xpos="280" data-ypos="206">
<strong> tooltip 5 </strong><br/>
Area : 43,820,000<br/>
Population: 3,879,000,000 Click here for more info(need to give link here for new pop div..for all other tooltips)
</div>
<div class="pin pin-down" data-xpos="750" data-ypos="310">
<strong> tooltip 5 </strong><br/>
Area : 43,820,000<br/>
Population: 3,879,000,000 Click here for more info(need to give link here for new pop div..for all other tooltips)
</div>
<div class="pin pin-down" data-xpos="850" data-ypos="310">
<strong> tooltip 5 </strong><br/>
Area : 43,820,000<br/>
Population: 3,879,000,000 Click here for more info(need to give link here for new pop div..for all other tooltips)
</div>
</div>

This will add a div after an anchor once the anchor is clicked, if the anchor is clicked again the div will be removed:
$('a').click(function()
{
var currTag = $(this);
if (currTag.next('div').attr('name'))
{
currTag.next('div').remove();
}
else
{
currTag.after("<div name='details'>Here's more information</div>");
}
});