FancyBox is not working with Div tag and A tag

Question

Please help me to solve this out.

I have an html file which contain an A tag which refers to a DIV tag in the same html page. Which is given below.

<a href="#addServerDetails" class="addSign"></a>

<div id="addServerDetails" class="addServerDetail">
            <h1>hello</h1>
</div>

This is style properties of the above gievn DIV tag.

.addServerDetail {
    height: 400px;
    width: 500px;
    margin-right: auto;
    margin-left: auto;
    background-color: #333;
    left: 312px;
    top: 81px;
    display: none;
}

I want to fadeIn this DIV tag with overlay effet using JQuery. So I used fancyBox for Jquery.

The Jquery function is as given below.

$('document').ready(function(){
    $("a.addSign").fancybox({
            'titlePosition' : 'over',
            'overlayColor' : '#000',
            'overlayOpacity' : 0.8,
            'transitionIn' : 'elastic',
            'transitionOut' : 'elastic',
            'autoScale' : true
    });
});

But is not working out. Please help me in this as I am a beginner in Jquery.

Thanks friends.

EDIT: Firebug shows the following error!

TypeError: $(...).fancybox is not a function<br />
[Break On This Error]   <br />

'autoScale' : 'true' <br />

It is working for me. [FIDDLE](http://jsfiddle.net/bplumb/svsdx/3211/) What is not working? — Blake Plumb, May 20 '13 at 14:38
http://stackoverflow.com/questions/3963338/loading-inline-content-using-fancybox — mola10, May 20 '13 at 14:39
@Blake Plumb : dude it's working fine with chrome, but not fine with firefox. — Uvais Ibrahim, May 20 '13 at 15:11

score 0 · Answer 1 · answered May 20 '13 at 15:22

Instead of assigning `display:none;` to `.addServerDetail`, create a inline div with `display:none;` as wrapper to `.addServerDetail` div.

JSFiddle:-http://jsfiddle.net/adiioo7/r6x92/

HTML:-

<a href="#addServerDetails" class="addSign">Show Popup</a>

<div style="display:none;">
    <div id="addServerDetails" class="addServerDetail">
         <h1>hello</h1>

    </div>
</div>

JS:-

$('document').ready(function () {
        $("a.addSign").fancybox({
            'titlePosition': 'over',
                'overlayColor': '#000',
                'overlayOpacity': 0.8,
                'transitionIn': 'elastic',
                'transitionOut': 'elastic',
                'autoScale': true
        });
});

CSS:-

.addServerDetail {
    height: 400px;
    width: 500px;
    margin-right: auto;
    margin-left: auto;
    background-color: #333;
    left: 312px;
    top: 81px;
}

FancyBox is not working with Div tag and A tag

1 Answers1

Instead of assigning display:none; to .addServerDetail, create a inline div with display:none; as wrapper to .addServerDetail div.

Instead of assigning `display:none;` to `.addServerDetail`, create a inline div with `display:none;` as wrapper to `.addServerDetail` div.