Page 1 of 2
Facebox won't load when page loads - how do I do it?
Posted: Fri Aug 29, 2014 5:18 am
by simonmlewis
I need to make a particular Facebox open when the page loads, but only on a given URL.
ie. /cart won't open it, but /cart&n=y would.
Code: Select all
<link href="/js/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/source/facebox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="/js/facebox/jquery.js" type="text/javascript"></script>
<script src="/js/facebox/facebox.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({
loadingImage : '/js/facebox/loading.gif',
closeImage : '/js/facebox/closelabel.png'
})
})
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
</script>
<a rel='facebox' href='#login' style='text-decoration: none;' class='btn_cart'>Send Request</a>
<div id='login' style='display: none;width:300px;height:200px;overflow:auto; font-size: 11.2px'>
here
</div>
I've tried this, but nothing loads. This is only going to work on each page load of this page, but if I can get it to do it, I Can then query the URL and run it only when $n == "y".
The Facebox generally works on it's own tho, so that side of it is fine - it' sjust the onload part.
Re: Facebox won't load when page loads - how do I do it?
Posted: Fri Aug 29, 2014 6:30 am
by Celauran
Why do you have two doc.ready blocks? Why are you calling .facebox() twice? Anything in your console?
Re: Facebox won't load when page loads - how do I do it?
Posted: Fri Aug 29, 2014 6:37 am
by Celauran
Also, do you not already have jQuery loaded? Is this necessary?
Code: Select all
<script src="/js/facebox/jquery.js" type="text/javascript"></script>
Re: Facebox won't load when page loads - how do I do it?
Posted: Fri Aug 29, 2014 6:46 am
by simonmlewis
Ignore the second one, that is what I tried, but it failed.
I basically need to do this now:
Click link that runs an Ajax query (I can do that bit), and once that link is clicked, it also opens Facebox.
Here's the form:
Code: Select all
<form>
<input type='text' id='email' name='email' class='sendtofriendemail'/>
<input type='hidden' id='buildid' name='buildid' value='$row->buildid'/>
<input type='button' id='submit' value='Submit' class='submitsendtofriend'/>
</form>
How do I make Facebox work when that 'button' is clicked? The Button isn't a submit, as it does it thru Ajax instead (which works). So I need it to open one generic facebox popup, it will just be something like: "continue browsing", "Go to cart".
Ignore on the "onload" request, as I got it wrong.
Re: Facebox won't load when page loads - how do I do it?
Posted: Fri Aug 29, 2014 7:09 am
by Celauran
Looking quickly through the Facebox code, it's really designed to work on anchors and specifically looks for rel and href attributes. Easiest solution would be to swap your button to an anchor and adjust your AJAX listener to listen for a link instead of a button.
Re: Facebox won't load when page loads - how do I do it?
Posted: Fri Aug 29, 2014 7:14 am
by simonmlewis
Trouble is, when I built the Ajax listener, I did it from learning from others. So you are asking me to learn a way and break what currently works.
I did read that you can use an onclick to trigger a <div> on the page, that then opens it. But I failed to get it working.
I was going to use a <ahref' to run it via a Javascript submit, but the Ajax form doesn't use "submit".
Can Facebox not work (or any other option that opens a darkened screen wtih a HTML popup box) via onclick?
Re: Facebox won't load when page loads - how do I do it?
Posted: Fri Aug 29, 2014 7:19 am
by Celauran
simonmlewis wrote:So you are asking me to learn a way and break what currently works.
I'm really not.
simonmlewis wrote:Can Facebox not work (or any other option that opens a darkened screen wtih a HTML popup box) via onclick?
I'm sure it could be made to do whatever you like, but would you rather rewrite Facebox or change a jQuery listener?
Re: Facebox won't load when page loads - how do I do it?
Posted: Fri Aug 29, 2014 7:24 am
by simonmlewis
I'd rather find a tool that will be separate from Facebox, that actions "onclick", but displaying a hidden div.
If I could find that - job done, no need to rewrite anything major.
Re: Facebox won't load when page loads - how do I do it?
Posted: Fri Aug 29, 2014 7:28 am
by Celauran
simonmlewis wrote:I'd rather find a tool that will be separate from Facebox, that actions "onclick", but displaying a hidden div.
Facebox actually does precisely that. It's expecting an anchor rather than a button, that's all. Changing a listener is trivial and way faster than trying to hunt down some tool that does precisely what you need. Why the aversion to learning a little jQuery? It's not going anywhere, so you'll need to learn it at some point.
Re: Facebox won't load when page loads - how do I do it?
Posted: Fri Aug 29, 2014 7:29 am
by simonmlewis
I could spend a week learning it, but right now I just need to get a 'button' to open the Facebox, onclick, but only on this one page.
I don't want to override Facebox functions completely.
So if there is a little addon script to put on this page, that makes the onclick do it, then that's the trick.
Re: Facebox won't load when page loads - how do I do it?
Posted: Fri Aug 29, 2014 9:00 am
by simonmlewis
So can it be altered to trigger a Facebox DIV onclick, within the embedded <script> ??
Re: Facebox won't load when page loads - how do I do it?
Posted: Fri Aug 29, 2014 9:09 am
by simonmlewis
Unless can make the 'button' into a ahref type link, but still personal the Ajax function?
Code: Select all
<form>
<input type='hidden' id='email' name='email' value='$row->id'>
<input type='hidden' id='prodid' name='prodid' value='$row->id'>
<input type='hidden' id='prodname' name='prodname' value='$row->title'>
<input type='button' id='submit' value='REQUEST SAMPLE' class='submitcart'/>
</form>
Into:
Code: Select all
<form>
<input type='hidden' id='email' name='email' value='$row->id'>
<input type='hidden' id='prodid' name='prodid' value='$row->id'>
<input type='hidden' id='prodname' name='prodname' value='$row->title'>
<a id='submit' class='submitcart'>REQUEST SAMPLE</a>
</form>
This kind of thing.
Re: Facebox won't load when page loads - how do I do it?
Posted: Fri Aug 29, 2014 9:13 am
by Celauran
Theoretically, yes, you could modify Flexbox itself. Exponentially easier to use a link instead of a button and be done with it. You may not even need to update your listener depending on how it's implemented.
http://sandbox.celauran.com/facebox.php
Re: Facebox won't load when page loads - how do I do it?
Posted: Fri Aug 29, 2014 9:27 am
by simonmlewis
With respect, I've now got it to post Ajax no problem. But it uses a JS file, and then a PHP file.
To change that to something else (like you have done) maybe work nice, but fact is - mine's working and I don't want to break it now.
When you click the button, I've got it to go dark and a DIV to appear, in which I can put my HTML, BUT, it's not filling the entire scrollable browser. It's only filling what's on screen.
Code: Select all
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="/js/js_sendtofriend.js"></script>
<script>
function toggle_visibility(id) {
var e = document.getElementById(id);
e.style.display = ((e.style.display!='none') ? 'none' : 'block');
}
</script>
<style type="text/css">
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:100;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
<div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
<div id="fade" class="black_overlay"></div>
<div id='form$row->id'>
<form>
<input type='hidden' id='email' name='email' value='$row->id'>
<input type='hidden' id='prodid' name='prodid' value='$row->id'>
<input type='hidden' id='prodname' name='prodname' value='$row->title'>
<input type='button' id='submit' value='REQUEST SAMPLE' class='submitcart' onclick = \"document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'\"/>
</form>
</div>
The bigger issue is if you scroll down the page and choose "Request Sample", the dark area and DIV shown, still appears only at the very top - not in the middle of the screen where you are viewing it.
Re: Facebox won't load when page loads - how do I do it?
Posted: Fri Aug 29, 2014 9:31 am
by simonmlewis
GOT IT!!!!
Code: Select all
.black_overlay{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:100;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: fixed;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
Fills the whole screen in black, and puts the DIV slap bang in the middle.