Problem using jquery to calculate coordinates

Hello i'm trying to center an arrow in a picture using jquery... the arrow will ser开发者_StackOverflow社区ve for navigation trought my picture. My problem is i can't center the arrow....

here is my code:

I changed the id with the class name and it's still not working ill link the js css and html to you

html/php

    <div id="large" class="loader">
           <div id="test5"> 
            <img src="<?php bloginfo("template_url"); ?>/images/right.gif" class="right" width="38" height="48" alt="right"/>
            <img src="<?php bloginfo("template_url"); ?>/images/left.gif" width="38" height="48" class="left" />  
            <center><img src="<?php echo catch_that_image() ?>" class="photo_large"/><center>
        </div>
    </div>

css

#large {
padding-top:25px;   
margin: 0 auto;
width:700px;
max-height:500px;   
padding-bottom:25px;
position:relative;

}

.photo_large{

    resize:both;
    border: solid 5px #fff;
    max-height:390px;
    max-width:600px;
    resize:both;
    margin-left:auto;
    margin-right:auto;
}


#test5{
    position:relative;

}


.right {
    position:absolute;
    z-index:1;

}

.left {
    position:absolute;
    z-index:1;

}

js

$(document).ready(function() {
    $(".right").css("top", ($(".photo_large").height()/2) - ($(".right").height()/2));
    $(".right").css("left", ($(".photo_large").width()/2) - ($(".right").width()/2));    
});

$(document).ready(function() {
     $("#right").css("top", (($("#photo_large").height() - $(this).height())/2 + "px"));
});

A note: You're using $("#right").each(); In theory, an id should only be on one element, so running $("#right").each(); shouldn't really do anything. If you are using the same ID for multiple elements, I suggest that you use classes.

Is #photo_large a child of #right? If so, the issue you're likely having is that jQuery's trying to manipulate every #photo_large on page.

$(function() {

$("#right").each(function() {

    var h = $(this).children("#photo_large").height();

    var hr = $(this).height();

    $(this).css("top", ((h - hr)/2 + "px"));

});


});

Agreed with Switz, though; use classes for objects that repeat, IDs for things that are only placed once per page in the layout.

You need a little more CSS, I believe. Check my Live Demo: http://jsfiddle.net/pgHqZ/1/

JS

$(document).ready(function() {
    $("#right").css("top", ($("#photo_large").height()/2) - ($("#right").height()/2));
    $("#right").css("left", ($("#photo_large").width()/2) - ($("#right").width()/2));    
});

HTML

<img src="http://dummyimage.com/300x300/ffc/000&text=Picture1" id="photo_large">
<img src="http://dummyimage.com/30x30/f00/fff&text=>" id="right">

CSS

#photo_large{
    z-index:998;
}
#right{
    z-index:999;
    position:absolute;
}