Question

I have a container that contains my content, and I am using sideBar for my links. By default sidebar puts it on the side of the page. So I edited the css to move it next to the div called container. But if people use different resolutions it throws it off.

first div is sidebar and the second is container. i tryed

<script>
$("sideBar").position({
 my: "center",
 at: "left bottom",
 of: $("container"),
})
</script>

and nothing happened

   <script>
$j("sideBar").position({
 my: "center",
 at: "left bottom",
 of: "#container",
})
</script>

<div id="sideBar">

    <a href="#" id="sideBarTab"><img src="sidebar/images/slide-button-active.gif" alt="sideBar" title="sideBar"></a>

    <div id="sideBarContents" style="opacity: 0.80;">
        <div id="sideBarContentsInner">
            <h2>side<span>bar</span></h2>

        <ul>
            <li><a href="#" onclick="goto('home');return false;">Link One</a></li>
            <li><a href="#" onclick="goto('connect');return false;">Link Two</a></li>
            <li><a href="#" onclick="goto('contact');return false;">Link Three</a></li>
            <li><a href="#">Link Four</a></li>
            <li><a href="#">Link Five</a></li>
        </ul>

    </div>
</div>

<div id="container">
        <div style="height: 548px;" id="door"  onclick="openclose()">
    </div>
        <div id="nav" style="display: none;">
            <a href="#" id="social_" class="selected" onmouseover="hover(this)" onmouseout="out(this)" onclick="goto('social');return false;"><span id="social_hov" style=""></span></a>
            <a class="" href="#" id="connect_" onmouseover="hover(this)" onmouseout="out(this)" onclick="goto('connect');return false;"><span id="connect_hov" style="display: none;"></span></a>
            <a class="" href="#" id="contact_" onmouseover="hover(this)" onmouseout="out(this)" onclick="goto('contact');return false;"><span id="contact_hov" style="display: none;"></span></a>
            <a class="" href="http://wordpress.thechrismission.com/" target="_blank" id="portfolio_" onmouseover="hover(this)" onmouseout="out(this)"><span id="portfolio_hov" style="display: none;"></span></a>
        </div>

    <div id="social" style="display: none;">
        <div id="subheader">
                <div id="header" class="social"></div>
        </div>
        <div id="content">
                <div id="list">
                    <a href="http://twitter.com/heychrishanna" target="_blank">twitter<span>twitter.com/heychrishanna</span><b class="icon twitter"></b></a>
                    <a href="http://www.facebook.com/ChristopherHanna" target="_blank">facebook<span>facebook.com/ChristopherHanna</span><b class="icon fb"></b></a>

                </div>
        </div>

Answer 1

Your syntax is just slightly off. It should be:

<script>
$("#sideBar").position({
 my: "center",
 at: "left bottom",
 of: "#container",
})
</script>