# Other Languages > jQuery >  Using FancyBox as an Error or Success Message without clicking on a link.

## Arc

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. 



```

 <!-- 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. 




```

 <!-- 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!

----------


## tr333

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.

----------


## Arc

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.

----------


## Arc

It seems to be this javascript that is clicking the link that is making it not working appropriately.



```

<script type="text/javascript">document.getElementById("errorLink").click();</script> 



```

It clicks this link



```

<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.

----------


## Arc

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



```

<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.


```

<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.

----------


## tr333

Try changing your click() to the jQuery equivalent.  Not sure what effect this would have, though.


JavaScript Code:
$("#errorLink").click();

----------


## tr333

The fancybox website has some examples to do this:  http://fancyapps.com/fancybox/

#12: "Launch fancyBox on page load"

----------


## Arc

Thanks a lot for the help. I had looked on those pages and just didn't see what I was looking for until you pointed it out.


With some tweaking I got it to work how I wanted it to.

Thanks again. :wave:

----------

