-
Mar 18th, 2013, 07:08 PM
#1
Thread Starter
PowerPoster
Using FancyBox as an Error or Success Message without clicking on a link.
Hello guys, I would like to use fancybox as an Error and Success Message indication withouth clicking on a link.
Scenario:
A user fills out an HTML form and if some things are wrong, they see a fancybox image that is an Error. If they filled out the HTML form correctly, they see a fancybox image that is a Success message.
I am hiding the link for the fancybox, which you can see in the <a> tag, then using javascript to click on it automaticaly.
I am close to getting this working, but there is a bug where the image does not show up as a fancybox, it is just the image on a blank white page.
Here is my Code. These includes are in the correct directories.
PHP Code:
<!-- Add fancyBox --> <link rel="stylesheet" href="js/fancybox/source/jquery.fancybox.css?v=2.1.4" type="text/css" media="screen" /> <script type="text/javascript" src="js/fancybox/source/jquery.fancybox.pack.js?v=2.1.4"></script>
<script type="text/javascript"> $(document).ready(function() { $(".fancybox").fancybox(); }); </script>
Here is the code I am using to display the ERROR message.
PHP Code:
<!-- FancyBox Error Page --> <a id="errorLink" class="fancybox" hidden="true" href="images/panel/adv-trigger.png"><img src="images/panel/adv-trigger.png" alt="" /></a>
<script type="text/javascript"> document.getElementById("errorLink").click(); </script>
Can someone please show me what I am doing wrong here? Thank you!
-We have enough youth. How about a fountain of "Smart"?
-If you can read this, thank a teacher....and since it's in English, thank a soldier.
-
Mar 18th, 2013, 07:31 PM
#2
Re: Using FancyBox as an Error or Success Message without clicking on a link.
Check the browser js console or error console. In chrome/safari, you find it in Developer Tools, while in firefox you can use Firebug or open the Web Console. That should show any relevant script errors. Are you including a reference to jQuery correctly?
If that doesn't help, any chance of putting up a quick test page on http://jsfiddle.net/ ? You should be able to link to the raw script files on https://github.com/fancyapps/fancyBox.
Last edited by tr333; Mar 18th, 2013 at 07:34 PM.
-
Mar 18th, 2013, 07:53 PM
#3
Thread Starter
PowerPoster
Re: Using FancyBox as an Error or Success Message without clicking on a link.
Yah, all the necessary jQuery files are being included in the right places and are all working.
I will try uploading a sample page.
So you see anything wrong with the code?
Thanks.
-We have enough youth. How about a fountain of "Smart"?
-If you can read this, thank a teacher....and since it's in English, thank a soldier.
-
Mar 18th, 2013, 08:17 PM
#4
Thread Starter
PowerPoster
Re: Using FancyBox as an Error or Success Message without clicking on a link.
It seems to be this javascript that is clicking the link that is making it not working appropriately.
PHP Code:
<script type="text/javascript"> document.getElementById("errorLink").click(); </script>
It clicks this link
PHP Code:
<a id="errorLink" class="fancybox" hidden="true" href="images/panel/adv-trigger.png"><img src="images/panel/adv-trigger.png" alt="" /></a>
<script type="text/javascript"> document.getElementById("errorLink").click(); </script>
But as I said, the image pops up on a blank white page instead of in the Fancybox.
-We have enough youth. How about a fountain of "Smart"?
-If you can read this, thank a teacher....and since it's in English, thank a soldier.
-
Mar 18th, 2013, 09:00 PM
#5
Thread Starter
PowerPoster
Re: Using FancyBox as an Error or Success Message without clicking on a link.
Ok, I have narrowed down the issue and I think I understand it, but I still don't know how to fix it.
The javascript
PHP Code:
<script type="text/javascript">
document.getElementById("errorLink").click();
</script>
Is clicking on the Link below as it should. But for some reason, the fancybox "Class" is not being used.
PHP Code:
<a id="errorLink" class="fancybox" hidden="true" href="images/panel/adv-trigger.png"><img src="images/panel/adv-trigger.png" alt="" /></a>
Is there a way to use Javascript to click on the link above and have it use the FancyBox Class?
Thanks.
-We have enough youth. How about a fountain of "Smart"?
-If you can read this, thank a teacher....and since it's in English, thank a soldier.
-
Mar 19th, 2013, 06:21 PM
#6
Re: Using FancyBox as an Error or Success Message without clicking on a link.
Try changing your click() to the jQuery equivalent. Not sure what effect this would have, though.
-
Mar 19th, 2013, 06:25 PM
#7
Re: Using FancyBox as an Error or Success Message without clicking on a link.
The fancybox website has some examples to do this: http://fancyapps.com/fancybox/
#12: "Launch fancyBox on page load"
-
Mar 24th, 2013, 11:56 PM
#8
Thread Starter
PowerPoster
Tags for this Thread
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|