View Full Version : Facebox, jquery-1.7.1.min.js is stopping it from working

04-25-2013, 09:13 AM
1) Script Title: Facebox v1.1

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/facebox/index.htm

3) Describe problem: Hello everyone. I am new to webpage coding so please forgive my lack of knowledge. I am trying to implement facebox v1.1 into my webpage and can't get it working. When I click the button/text (whatever is linked to activate facebox) nothing appears. I have been racking my brains but have worked out that another script (<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>) is stopping facebox from working. If I remove the call to jquery-1.7.1.min.js facebox works fine, but if it is left it facebox does not work.
Could I please ask if there a way to have them both work together or are that not compatible? Am I missing something that would make facebox work when I keep in jquery-1.7.1.min.js?

Cheers, Cameron

04-25-2013, 12:10 PM
Facebox will work with jQuery 1.7.1, I just tried it out.

Facebox will not work without jQuery. If it works without jQuery 1.7.1, then there must be another jQuery on the page (probably 1.2.2 which comes with Facebox). Whatever it is get rid of it (remove its external script tag), and move the external jQuery 1.7.1 tag to before the external tag for facebox.js.

One other thing to keep in mind is that adding jQuery 1.7.1 implies that you also have another script you are adding - one that requires jQuery. If that script invokes noConflict mode, that could be a part of the problem. Comment out that directive from the other script.

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

04-25-2013, 01:51 PM
Thank you very much John for your help and suggestions. I"ll give it a go and get back to you if it's not working.

Thanks again! :)

04-25-2013, 07:55 PM
Hello John,
I was wondering if I could borrow your knowledge once again please.

I ended up using easybox (https://code.google.com/p/easybox/) on my webpage and it is working really well. However there are a couple of small problems that I can't seem to figure out. I was wondering if I could possibly bother you to have a look at it?

I have uploaded what I have done so far to my domain, www.elevationevents.com.au I have modified a free template that I found on the internet, but please ignore my bad coding :)
I have implemented easybox on a couple of pages but the issues I am having can easily been seen on http://elevationevents.com.au/upcoming.html

If you click the more button underneath the top "Eats Everything" banner it activates easybox, the overlay window appears and the information reads well.
The issues I am having with it are:
1. When you click the more button it first loads the overlay in the colour of the lower text bar of the easybox window (in my case I am using the dark blue). Is there anyway that can load with black but still keep the dark blue background of the lower text bar in the easybox window?

2. And my other issue, which is really bugging me :).. In the easybox window there is a brownish box (a .gif file set to repeat). This background image is being called from the body settings in the style.css:
body {font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:25px;color:#7f7f7f;min-width:1000px;height:100%;background:url(../images/body-tail.gif) center top repeat #0e0f0f;}

I can not for the life of me work out a way to get rid of the background image .gif from the easybox windows, and just make it a black background, without removing the .gif from its other places on the website. Could I please bother you to have a look at it and see if you can find a solution?

And second to that, the height of the actual easybox windows is being set by: <a href="Eats Everything.html" title="Eats Everything" class="lightbox button4" data-width="1000" data-height="462">more</a>
Is it possible to make the height of the easybox windows adjust automatically to the height of that content? This would be ideal :)

I understand it could take a little time to sort through my messy coding so I am happy to pay you for your time.

Thanks very much, Cameron

04-26-2013, 04:02 PM
Do you have much of a grasp of CSS style and what is what within the EasyBox interface? In the easybox.min.css file the overlay (the partially opaque dimming effect outside the easy box that dims the rest of the page) already is black:


What I think you mean is the easyCenter (what shows as the easy box is expanding, before its content arrives):

#easyCenter{position:fixed;left:50%;top:35%;z-index:9999;overflow:hidden;background:#00001c;border-radius:4px;border:1px solid #000}

That is a dark blue, you can change that to black or #000 (same thing). Use a text only editor like NotePad to do the editing.

As for the:

background:url(../images/body-tail.gif) center top repeat #0e0f0f;

on the body, that's in the style.css file for the entire site. However, on Eats Everything.html you can override that in many ways. It's body has an id="page1", so you could use that (in the style.css file, this assumes that no other page's body has an id of 'page1'):

/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block;}
mark, rp, rt, ruby, summary, time {display:inline;}

/* Global properties ======================================================== */
html {width:100%; height:100%;}

body {font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:25px;color:#7f7f7f;min-width:1000px;height:100%;background:url(../images/body-tail.gif) center top repeat #0e0f0f;}
body#page1{background: black;}
.ic {border:0;float . . .

Or just put the style right on the Eats Everything.html page:

<!DOCTYPE html>
<html lang="en">
<title>Eats Everything Main</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
<style type="text/css">
body{background: black;}
a {
font-size: 100%;
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/cufon-replace.js" type="text/javascript"></script>
<script src="js/Glegoo_400.font.js . . .

Or put it inline in the Eats Everything page's body tag:

. . .
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">

<body id="page1" style="background: #000;">
<div class="main">
<div class="main_poster">
<div class="container_12">
<div class="wrap . . .

To name just three.

As to having EasyBox auto size the content. Hmm, in your style.css file the body is already min-width: 1000px, so you will be needing that, unless you change it for the page in the iframe. The body is also height: 100%, which is a little ambiguous, but often makes the page taller than it needs to be to show its content. Again, that could be changed on the page in the iframe (Eats Everything in this case). Usually a page's width/height/min-width/min-height are not set in style. Those sorts of things are usually reserved for elements within the page.

But I'm not seeing anything with EasyBox itself that allows for auto sizing of the easy box with iframe. It would do it it with images, to the size of the image and the available space on the page (I think that's the default), but iframes (their content pages actually) are harder to measure. If you were to remove the constraining dimensions from the body of the page in the iframe, and not set any dimensions for the easy box (no data-width or data-height attributes for the link), then I think EasyBox would size its easy box as it sees fit. You may or may not like the result.

There might be a command/option to force EasyBox to fit iframe content into an easy box that fits the page, but I doubt it. I'll have another look later.

If I missed anything from your questions on this, or you have further questions, let me know.

Oh, about paying, you can select any of the donation options in the "Show Additional Thanks:" portion of my signature below this post, that last two links go directly to me.

And, something occurs to me about resizing the iframe east box automatically. Some other 'Box' script might do that, I'm thinking FancyBox. Probably requires version 2 though, which is only free for personal and non-profit use.

04-27-2013, 10:34 AM
Hello John,
I can't thank you enough for your expert help...I use to program webpages as a teenager using simple html, things have certainly changed a lot since then, it's a steep learning curve for me now :)

I have had a look at Fancy Box, it certainly seems as though it will do the job well. I'll implement it into the webpage over the weekend and see how it goes.

As for your other fixes suggestions, they all make sense, and thank you once again for taking the time to look over the code and help me out. Cheers.

05-01-2013, 03:39 PM
Hello John,
I hope you are well.
I was wondering if I could borrow your expert knowledge again please. The website is coming along well, I have got it to the point where I can start adding extras features and tidying it up however I have run into a slight problem that I can't seem to find a solution for.
I have now incorporated the following into the site (www.elevationevents.com.au):
easybox (https://code.google.com/p/easybox/) - for the pop out information pages (I haven't yet changed to Fancy Box as you suggested but I intend to as it looks good),
jqcoolgallery (http://www.jqcoolgallery.com/) - for picture viewing under the gallery tab,
Simple-Grid (http://thisisdallas.github.io/Simple-Grid/) to align the 3 items in the footer correctly (I was having all sorts of issues with this but then found Simple-Grid which makes it very easy.

The issue I am having is:
Simple-Grid calls on a style sheet called simplegrid.css. Within simplegrid.css there are a few lines of code which are making the rest of the website not function correctly. The lines of code are:
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

I have identified within that "-webkit-box-sizing: border-box;" is the specific line causing issues, if I remove that line the rest of the website works fine but the footer alignment then goes terribly wrong, if I leave it in the footer won't align correctly but the rest of the site works as it should.
The issues I am having with the rest of the site when the above code is active are:
- the gallery changes from 4 image boxes wide to 3 image boxes wide and those image boxes do not align correctly vertically,
- the lower text border on the popout boxes (activated by pressing a "more" button), that has the close button "X" and the artists name, gets chopped off the bottom of the box.

Would you happen to know of a way I can get all three items playing nice together?
At the moment I have left the code active in the simplegrid.css sheet and you can see the footer is misaligned.

Cheers, Cameron

05-01-2013, 04:19 PM
-webkit- anything is only for Chrome and Safari, perhaps Konqueror (a rarely used Unix only browser).

But those other two cover earlier Firefox and other earlier Mozilla browsers (-moz-box-sizing) and all modern browsers (box-sizing) that support CSS 3 box-sizing. Anyways, the trick would be to get those styles to only apply to the footer. Two choices, apply the styles to the footer tag as well as its contents or just to its contents. To do it with the footer tag and its contents, change:

*, *:after, *:before {


footer, footer:after, footer:before, footer *, footer *:after, footer *:before {

For just the footer's contents use this instead:

footer *, footer *:after, footer *:before {

The browser cache may need to be cleared and/or the page refreshed to see changes.

05-01-2013, 07:03 PM
You're a genius John, it worked a treat. Thank you very much once again! :)