Problem jqDock integration in AeroWindow

Problem jqDock integration in AeroWindow

Hello all,

I hope someone can help me with this problem, struggled a few hours on this problem and it seems I will not find a solution on my own .

I want to integrate jqDock in AeroWindow, so that I have a dock in the bottom of the page instead of the icons on the desktop. Implementing and styling the dock was not that difficult with the documentation on the site of jqDock. But I have no clue how to link the icons in the dock to the corresponding window. Inside the dock code you can link the images only with <a href..., but AeroWindow uses a div to capture the click. When I put the img inside a div the whole dock simply disappears. Here is the code I now have.

I've put following comments in it, to show what I mean, probaply it's not that difficult to fix it but I'm not really good in javascript:
<!-- The firefoxicon, links to the window with id Firefoxapp, now I want home.png in the dock link to this window. Putting <div id="Firefoxicon"> before the img tag doesn't work because the dock than dissapears. -->
<!--bottom dock, the images got to replace the desktopicons, but I can't link them to the correct windows -->

thanks in advance,
Skull
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
    <head>
    <title>DEMO: AeroWindow - jQuery Plugin (v3.5)</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="css/AeroWindow.css?r=123" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js/interface.js"></script>
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/jquery-AeroWindow.js"></script>
    <script type="text/javascript" src="js/jquery.jqDock.js"></script>
    <script type="text/javascript" src="js/jquery.jqDock.min.js"></script>


    <script type="text/javascript">
    $(document).ready(function() {
    $('#Window1').AeroWindow({
    WindowTitle: 'Window 1 - Happy OutBounce',
    WindowPositionTop: 100,
    WindowPositionLeft: 200,
    WindowWidth: 300,
    WindowHeight: 200,
    WindowAnimation: 'easeOutBounce'
    });
    $('#Firefoxapp').AeroWindow({
    WindowTitle: 'FireFox',
    WindowPositionTop: 'center',
    WindowPositionLeft: 'center',
    WindowWidth: 700,
    WindowHeight: 500,
    WindowAnimation: 'easeOutCubic'
    });
    $('#jqDock0').click(function() {
    $('#Firefoxapp').AeroWindow({
    WindowTitle: 'FireFox',
    WindowPositionTop: 'center',
    WindowPositionLeft: 'center',
    WindowWidth: 700,
    WindowHeight: 500,
    WindowAnimation: 'easeOutCubic'
    });
    });
    $('#Twittericon').click(function() {
    $('#Window2').AeroWindow({
    WindowTitle: 'jQuery Twitter',
    WindowPositionTop: 'center',
    WindowPositionLeft: 'center',
    WindowWidth: 550,
    WindowHeight: 300,
    WindowAnimationSpeed: 1000,
    WindowAnimation: 'easeOutCubic',
    WindowResizable: true,
    WindowDraggable: true,
    WindowMinimize: false,
    WindowMaximize: false,
    WindowClosable: true
    });
    })
    });
    </script>
    <style>
    body {
    background: #09368b url(win7-desktop-bg.jpg);
    }
    #iconContainer {
    position: absolute;
    top: 10px;
    left: 5px;
    width: auto;
    height: auto;
    }
    #iconContainer div {
    width: 70px;
    height: 70px;
    margin-bottom: 10px;
    }
    </style>
    </head>
    <body>
    <!-- The firefoxicon, links to the window with id Firefoxapp, now I want home.png in the dock link to this window. Putting <div id="Firefoxicon"> before the img tag doesn't work because the dock than dissapears. -->
    <div id="iconContainer">
    <div id="Firefoxicon"><img src="images/DesktopIcon-Firefox.png"></div>
    <div id="Twittericon"><img src="images/DesktopIcon-Twitter.png"></div>
    </div>
    <!-- Demo Aero Window 1 -->
    <div id="Window1">
    <p>
    My Window Animation Style is <strong>OutBounce</strong>
    </p>
    <ul>
    <li>Dobbleclick me! And see my <strong>happy Animation</strong>
    <li>Resize me! Press my Buttons try my Look and Feel
    <li>Drag me (header) and see my <strong>Live Aero Glass Header</strong>
    </ul>
    </div>
    <!-- Demo Aero Window 2 -->
    <div id="Window2" style="display: none;">
    <p>
    My Window Animation Style is <strong>OutBounce</strong>
    </p>
    <h1>AeroWindow Features:</h1>
    <ul>
    <li><strong>Special feature:</strong> Live animated Aero Glossy look (see header when moving) </li>
    <li>Usual window buttons: Minimize, Zoom, Maximize and Close </li>
    <li>Double-click support, such as in windows (maximize, zoom out) </li>
    <li>Active window is highlighted visually, as in Windows </li>
    <li>User-infinitely scalable window size </li>
    <li>Sliding window by mouse dragging </li>
    <li>Usual Z-order management, as in Windows </li>
    <li>+ Animated change of window size</li>
    <li>+ Multiple configuration options </li>
    </ul>
    <a href="http://www.soyos.net/aerowindow-jquery.html">�Go to Website AeroWindow - jQuery plugin</a>
    </div>
    <!-- Demo Aero Window - FireFox App -->
    <div id="Firefoxapp" style="display: none;">
    <iframe src="http://www.funnyforums.nl/06092003/forum" width="100%" height="100%" style="border: 0px;" frameborder="0"></iframe>
    <div id="iframeHelper"></div>
    </div>
    <!--bottom dock, the images got to replace the desktopicons, but I can't link them to the correct windows -->
    <div id='menu'>
    <img src='images/home.png' title='Home' alt='' />
    <img src='images/forum.png' title='Forum' alt='' />
    <img src='images/pm.png' title='PB' alt='' />
    <img src='images/games.png' title='Games' alt='' />
    <img src='images/zoeken.png' title='Zoeken' alt='' />
    </div>

    <!--dock menu JS options -->
    <script type="text/javascript">

    jQuery(document).ready(function($){
    // set up the options to be used for jqDock...
    var dockOptions =
    { align: 'bottom' // horizontal menu, with expansion UP from a fixed BOTTOM edge
    , labels: true // add labels (defaults to 'tc')
    };
    // ...and apply...
    $('#menu').jqDock(dockOptions);
    });

    </script>
    </body>
    </html>