views:

39

answers:

0

I just started getting into jQuery and I'm trying to use the SimpleModal library along with some scrolling features. I have a navigation list and each link opens it's own modal window with a set height and width.

However, for link2, after you click it I want it to open a modal window and the user has the ability to scroll up or down depending on the content size of the hidden div. (For simplicity here's my stripped out code.) How do I incorporate another jquery plugin (like scrollto) alongside SimpleModal?

My main navigation and hidden divs:

  <ul id="nav">
    <li><a href="#" class="link1">Link 1</a></li>
    <li><a href="#" class="link2">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
  </ul>

<div id="link1_content"><!--will be hidden-->
 <p>This does not scroll</p>
</div>
<div id="link2_content"><!--will be hidden-->
  <p>This contents a bunch of content (like images) that can be scrolled</p>
 </div>

My jQuery script (custommodal.js):

jQuery(function ($) {
    var link1 = {
        container: null,
        init: function () {
            $("#nav .link1").click(function (e) {
                e.preventDefault(); 

                $("#link1_content").modal({
                    containerId: 'simplemodal-content',
                    overlayClose: true,
                    onOpen: about.open,
                    onClose: about.close
                });
            }); 
        },
        open: function (dialog) {
            dialog.overlay.fadeIn('slow', function () {
                dialog.data.hide();
                dialog.container.fadeIn('slow', function () {
                    dialog.data.fadeIn('slow');
                });
            });

        },
        close: function (dialog) {
            dialog.data.fadeOut('slow', function () {
                dialog.container.fadeOut('slow', function() {
                    dialog.container.hide('slow');
                });
                dialog.overlay.fadeOut('slow', function () {
                    $.modal.close();
                });

            });
        }
    };

    link1.init();

    var link2 = {
        container: null,
        init: function () {
            $("#nav .link2").click(function (e) {
                e.preventDefault(); 

                $("#link2_content").modal({
                    containerId: 'simplemodal-content',
                    overlayClose: true,
                    onOpen: author.open,
                    onClose: author.close
                });
            });
        },
        open: function (dialog) {
            dialog.overlay.fadeIn('slow', function () {
                dialog.data.hide();
                dialog.container.fadeIn('slow', function () {
                    dialog.data.fadeIn('slow');
                });
            });

        },
        close: function (dialog) {
            dialog.data.fadeOut('slow', function () {
                dialog.container.fadeOut('slow', function() {
                    dialog.container.hide('slow');
                });
                dialog.overlay.fadeOut('slow', function () {
                    $.modal.close();
                });

            });
        }
    }

    link2.init();

});