Geeks With Blogs
Moez Mousavi

JQuery is probably the most popular JavaScript library ever. I was facing a bad "time" requirement change tonight and that was poping up "Terms and Conditions" pop up as a mandatory option for registration. I just picked up fife minute solution:

You will need Fancy box (fancybox.net) but just whatch out to not overwriting JQuery references, they need to loaded sequentially and could easily drive you to a horrible nightmare!

 

1-Set References:

    <link rel="stylesheet" type="text/css" href="Scripts/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" />
      
    <script src="Scripts/jquery.fancybox-1.3.4/jquery-1.4.3.min.js" type="text/javascript"></script>
        <script src="Scripts/jquery.fancybox-1.3.4/fancybox/jquery.mousewheel-3.0.4.pack.js"
        type="text/javascript"></script>
    <script src="Scripts/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"
        type="text/javascript"></script>
    <link href="Scripts/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet"
        type="text/css" />

2-Within Document.Ready:

<script language="javascript" type="text/javascript">
        $(document).ready(function () {
            ...
           //if its just a peace of text within a hidden div
            $("#various1").fancybox({
                'titlePosition': 'inside',
                'transitionIn': 'none',
                'transitionOut': 'none',
                
            });

             //If you want to show the page with fully customised style
             $("#v2").fancybox({
                'titlePosition': 'inside',
                'transitionIn': 'none',
                'transitionOut': 'none',
                'type'    : 'iframe'
            });

         ...
        });

3-Call your grandmother, ask about combination of two kid, you and hell load of work in a weekend, she would guide you to the closest mental hospital...hang on, put your anchor tags somewhere :

             <a id="various1" href="#inline1" >Inline</a> // usage of hidden div
             <a id="v2" href="http://www.google.com" >Inline2</a>  // loading in iFrame

 

4-Just make the hidden div:

<div style="display: none;">
        <div id="inline1" style="width:400px;height:200px;overflow:auto;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque. Nulla
            sit amet se e vitae eleifend vel, iaculis sed magna. Aenean tempus lacus vitae orci posuere porttitor eget non feli
             s. Donec lectus elit, aliquam nec eleifend sit amet, vestibulum sed nunc.
        </div>
</div>

Note:

Div Id should be equal to href="#inline1" in Anchor tag

Anchor tag Id should be used:     $("#various1").fancybox({});

If you get these ids confuse, I bet you will waste a box of red bull. Watch out!

 

Posted on Monday, August 22, 2011 10:20 PM JavaScript , JQuery | Back to top

Copyright © MoezMousavi | Powered by: GeeksWithBlogs.net