Results 1 to 8 of 8

Thread: Using FancyBox as an Error or Success Message without clicking on a link.

  1. #1

    Thread Starter
    PowerPoster Arc's Avatar
    Join Date
    Sep 2000
    Location
    Under my rock
    Posts
    2,336

    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.


  2. #2
    Frenzied Member tr333's Avatar
    Join Date
    Nov 2004
    Location
    /dev/st0
    Posts
    1,605

    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.
    CSS layout comes in to the 21st century with flexbox!
    Just another Perl hacker,

  3. #3

    Thread Starter
    PowerPoster Arc's Avatar
    Join Date
    Sep 2000
    Location
    Under my rock
    Posts
    2,336

    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.


  4. #4

    Thread Starter
    PowerPoster Arc's Avatar
    Join Date
    Sep 2000
    Location
    Under my rock
    Posts
    2,336

    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.


  5. #5

    Thread Starter
    PowerPoster Arc's Avatar
    Join Date
    Sep 2000
    Location
    Under my rock
    Posts
    2,336

    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.


  6. #6
    Frenzied Member tr333's Avatar
    Join Date
    Nov 2004
    Location
    /dev/st0
    Posts
    1,605

    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.

    JavaScript Code:
    1. $("#errorLink").click();
    CSS layout comes in to the 21st century with flexbox!
    Just another Perl hacker,

  7. #7
    Frenzied Member tr333's Avatar
    Join Date
    Nov 2004
    Location
    /dev/st0
    Posts
    1,605

    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"
    CSS layout comes in to the 21st century with flexbox!
    Just another Perl hacker,

  8. #8

    Thread Starter
    PowerPoster Arc's Avatar
    Join Date
    Sep 2000
    Location
    Under my rock
    Posts
    2,336

    Thumbs up Re: Using FancyBox as an Error or Success Message without clicking on a link.

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


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
  •  



Click Here to Expand Forum to Full Width