I am working on a little project where I am trying to implement a popup window from a button. I am using code that I found on this developers site bPopup. I played around with the code on JSFiddle and it works but when I uploaded the code to my site it is not working. I tried playing around with the way I am referencing the jquery and bpopup javascript files and still nothing. I also looked into the DOM Ready issue and I believe I am ok there but maybe I am wrong.
When I run the site with these three files the output is a button that when I click it nothing happens and the video in the iframe shows below it (before I click the button). Thanks in advance for any help!!
Html (file name blog.html, it is linked to from my index.html):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="animate.css"/>
<script src="bPopup.js"></script>
<script src="jquery-1.8.2.min.js"></script>
<meta name ="viewport" content = "width=640, user-scalable=yes">
<title>OneLine</title>
</head>
<body>
<!-- Button that triggers the popup -->
<button id="my-button">POP IT UP</button>
<!-- Element to pop up -->
<div id="element_to_pop_up">
<a class="bClose"></a>
<iframe width="280" height="157.5" src="http://www.youtube.com/embed/iw8wDinJxBQ" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>
CSS (file name animate.css):
/* PopUp Window */
#element_to_pop_up {
background-color:#000000;
border-radius:15px;
color:#000;
display:none;
padding:20px;
min-width:300px;
min-height: 400px;
}
.bClose{
cursor:pointer;
position:absolute;
right:10px;
top:5px;
}
Javascript (file name bPopup.js):
// Semicolon (;) to ensure closing of earlier scripting
// Encapsulation
// $ is assigned to jQuery
;(function($) {
// DOM Ready
$(function() {
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('#my-button').on('click', function(e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$('#element_to_pop_up').bPopup();
});
});
})(jQuery);
/*********************************************************************************
* @name: bPopup
* @author: (c)Bjoern Klinggaard (http://dinbror.dk/bpopup - twitter@bklinggaard)
* @version: 0.7.0.min
*********************************************************************************/
(function(b) {
b.fn.bPopup = function(n, p) {
function t() {
b.isFunction(a.onOpen) && a.onOpen.call(c);
k = (e.data("bPopup") || 0) + 1;
d = "__bPopup" + k;
l = "auto" !== a.position[1];
m = "auto" !== a.position[0];
i = "fixed" === a.positionStyle;
j = r(c, a.amsl);
f = l ? a.position[1] : j[1];
g = m ? a.position[0] : j[0];
q = s();
a.modal && b('<div class="bModal ' + d + '"></div>').css({
"background-color": a.modalColor,
height: "100%",
left: 0,
opacity: 0,
position: "fixed",
top: 0,
width: "100%",
"z-index": a.zIndex + k
}).each(function() {
a.appending && b(this).appendTo(a.appendTo)
}).animate({
opacity: a.opacity
}, a.fadeSpeed);
c.data("bPopup", a).data("id", d).css({
left: !a.follow[0] && m || i ? g : h.scrollLeft() + g,
position: a.positionStyle || "absolute",
top: !a.follow[1] && l || i ? f : h.scrollTop() + f,
"z-index": a.zIndex + k + 1
}).each(function() {
a.appending && b(this).appendTo(a.appendTo);
if (null != a.loadUrl) switch (a.contentContainer = b(a.contentContainer || c), a.content) {
case "iframe":
b('<iframe scrolling="no" frameborder="0"></iframe>').attr("src", a.loadUrl).appendTo(a.contentContainer);
break;
default:
a.contentContainer.load(a.loadUrl)
}
}).fadeIn(a.fadeSpeed, function() {
b.isFunction(p) && p.call(c);
u()
})
}
function o() {
a.modal && b(".bModal." + c.data("id")).fadeOut(a.fadeSpeed, function() {
b(this).remove()
});
c.stop().fadeOut(a.fadeSpeed, function() {
null != a.loadUrl && a.contentContainer.empty()
});
e.data("bPopup", 0 < e.data("bPopup") - 1 ? e.data("bPopup") - 1 : null);
a.scrollBar || b("html").css("overflow", "auto");
b("." + a.closeClass).die("click." + d);
b(".bModal." + d).die("click");
h.unbind("keydown." + d);
e.unbind("." + d);
c.data("bPopup", null);
b.isFunction(a.onClose) && setTimeout(function() {
a.onClose.call(c)
}, a.fadeSpeed);
return !1
}
function u() {
e.data("bPopup", k);
b("." + a.closeClass).live("click." + d, o);
a.modalClose && b(".bModal." + d).live("click", o).css("cursor", "pointer");
(a.follow[0] || a.follow[1]) && e.bind("scroll." + d, function() {
q && c.stop().animate({
left: a.follow[0] && !i ? h.scrollLeft() + g : g,
top: a.follow[1] && !i ? h.scrollTop() + f : f
}, a.followSpeed)
}).bind("resize." + d, function() {
if (q = s()) j = r(c, a.amsl), a.follow[0] && (g = m ? g : j[0]), a.follow[1] && (f = l ? f : j[1]), c.stop().each(function() {
i ? b(this).css({
left: g,
top: f
}, a.followSpeed) : b(this).animate({
left: m ? g : g + h.scrollLeft(),
top: l ? f : f + h.scrollTop()
}, a.followSpeed)
})
});
a.escClose && h.bind("keydown." + d, function(a) {
27 == a.which && o()
})
}
function r(a, b) {
var c = (e.width() - a.outerWidth(!0)) / 2,
d = (e.height() - a.outerHeight(!0)) / 2 - b;
return [c, 20 > d ? 20 : d]
}
function s() {
return e.height() > c.outerHeight(!0) + 20 && e.width() > c.outerWidth(!0) + 20
}
b.isFunction(n) && (p = n, n = null);
var a = b.extend({}, b.fn.bPopup.defaults, n);
a.scrollBar || b("html").css("overflow", "hidden");
var c = this,
h = b(document),
e = b(window),
k, d, q, l, m, i, j, f, g;
this.close = function() {
a = c.data("bPopup");
o()
};
return this.each(function() {
c.data("bPopup") || t()
})
};
b.fn.bPopup.defaults = {
amsl: 50,
appending: !0,
appendTo: "body",
closeClass: "bClose",
content: "ajax",
contentContainer: null,
escClose: !0,
fadeSpeed: 250,
follow: [!0, !0],
followSpeed: 500,
loadUrl: null,
modal: !0,
modalClose: !0,
modalColor: "#000",
onClose: null,
onOpen: null,
opacity: 0.7,
position: ["auto", "auto"],
positionStyle: "absolute",
scrollBar: !0,
zIndex: 9997
}
})(jQuery);
All files are in the same directory on my site.
EDIT: THESE ARE THE ERRORS I GET WHEN RUNNING THE CONSOLE ERRORS
[18:14:51.018] GET http://www.onelineco.net/Blog.html [HTTP/1.1 200 OK 47ms]
[18:14:51.076] GET http://www.onelineco.net/animate.css [HTTP/1.1 304 Not Modified 68ms]
[18:14:51.077] GET http://www.onelineco.net/bPopup.js [HTTP/1.1 304 Not Modified 68ms]
[18:14:51.078] GET http://www.onelineco.net/jquery-1.8.2.min.js [HTTP/1.1 404 Not Found 78ms]
[18:14:51.106] ReferenceError: jQuery is not defined @ http://www.onelineco.net/bPopup.js:23
[18:14:51.201] GET http://www.onelineco.net/jquery-1.8.2.min.js [HTTP/1.1 404 Not Found 61ms]
[18:14:51.232] The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must to be declared in the document or in the transfer protocol. @ http://www.onelineco.net/Blog.html
[18:14:51.285] GET http://www.youtube.com/embed/iw8wDinJxBQ [HTTP/1.1 200 OK 141ms]
[18:14:51.386] Unrecognized at-rule or error parsing at-rule '@-moz-viewport'. @ http://www.youtube.com/embed/iw8wDinJxBQ:14
[18:14:51.386] Unrecognized at-rule or error parsing at-rule '@viewport'. @ http://www.youtube.com/embed/iw8wDinJxBQ:17
[18:14:51.391] Error in parsing value for 'filter'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1
[18:14:51.391] Unknown property '-moz-border-radius'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1
[18:14:51.391] Unknown property '-moz-box-shadow'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1
[18:14:51.391] Error in parsing value for 'background-image'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1
[18:14:51.391] Expected declaration but found '*'. Skipped to next declaration. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1
[18:14:51.393] Expected media feature name but found '-webkit-min-device-pixel-ratio'. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1
[18:14:51.393] Unknown property 'box-sizing'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1
[18:14:51.393] Unknown property '-moz-border-radius-topleft'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1
[18:14:51.393] Unknown property '-moz-border-radius-bottomleft'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1
[18:14:51.411] Unknown property '-moz-border-radius-topright'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1
[18:14:51.411] Unknown property '-moz-border-radius-bottomright'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1
[18:14:51.411] Error in parsing value for 'cursor'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1
[18:14:51.413] Unknown property '-moz-background-size'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1
[18:14:51.416] Error in parsing value for 'background'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1
[18:14:51.877] Expected declaration but found '*'. Skipped to next declaration. @ http://s.ytimg.com/yts/cssbin/www-player-actions-vflaifYoV.css:1
[18:14:51.877] Unknown property '-moz-border-radius'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-player-actions-vflaifYoV.css:1
[18:14:51.877] Error in parsing value for 'filter'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-player-actions-vflaifYoV.css:1
[18:14:51.877] Unknown property '-moz-box-shadow'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-player-actions-vflaifYoV.css:1
[18:14:51.877] Error in parsing value for 'background-image'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-player-actions-vflaifYoV.css:1
[18:14:51.879] Expected media feature name but found '-webkit-min-device-pixel-ratio'. @ http://s.ytimg.com/yts/cssbin/www-player-actions-vflaifYoV.css:1
[18:14:51.879] Unknown property 'box-sizing'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-player-actions-vflaifYoV.css:1
[18:14:51.879] Unknown property '-moz-border-radius-topleft'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-player-actions-vflaifYoV.css:1
[18:14:51.879] Unknown property '-moz-border-radius-bottomleft'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-player-actions-vflaifYoV.css:1
[18:14:51.880] Unknown property '-moz-border-radius-topright'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-player-actions-vflaifYoV.css:1
[18:14:51.880] Unknown property '-moz-border-radius-bottomright'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-player-actions-vflaifYoV.css:1
[18:14:51.880] Error in parsing value for 'cursor'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-player-actions-vflaifYoV.css:1
[18:14:51.886] Use of getAttributeNodeNS() is deprecated. Use getAttributeNS() instead. @ resource://dwhelper/util-service.jsm:567
[18:14:51.886] Use of attributes' ownerDocument attribute is deprecated. @ resource://dwhelper/util-service.jsm:567
[18:14:51.886] Use of attributes' nodeType attribute is deprecated. It always returns 2. @ resource://dwhelper/util-service.jsm:571
[18:14:51.886] Use of attributes' firstChild attribute is deprecated. Use value instead. @ resource://dwhelper/util-service.jsm:580
You have to load jQuery before your other script that is dependant on it.