[postonoh]

I am trying pull the following link id and rel = number for a rectangle shape box for a link to reposition on an iPad.

This code append the link to the page.
$("#Page-" + (page).toString()).append(RightHotLinks); //append links to the page
GoSize(page) // resize and move the links to the correct place on page.

function GoSize(page) {
            if (page < 1) {
                return;
            }
            if (page > Contents.length) {
                return;
            }

            var pg = $("#Page-" + page).attr("id");
            var rel = $("#Page-" + page).attr("rel");
            if (typeof pg == 'undefined') {
                return;
            }
            var attribs = rel.split("x");

            //New Width and Height of the image map
            var width = $("#Page-" + page.toString()).width();
            var height = $("#Page-" + page.toString()).height();

            //Orignal Width and hieght of the image map
            var OrigWidth = parseFloat(attribs[0]);
            var OrigHeight = parseFloat(attribs[1]);
            //Change Ratio
            var HChange = height / OrigHeight;
            var WChange = width / OrigWidth;

            if ($("#Page-" + page.toString())) {
                $("#Page-" + page.toString()).css("top", height - 50);
                $("#Page-" + page.toString()).css("left", 0);
            } else {
                $("#Page-" + page.toString()).css("top", height - 50);
                $("#Page-" + page.toString()).css("left", width - 50);
            }

            $(".Page-" + page).each(function () {
                $(this).css("background-image", "url(./images/transparent.gif)");

                var relCoords = $(this).attr("rel");
                var arryCoords = relCoords.split(",");

                //Orginal Values 
                var OrgX = arryCoords[0];
                var OrgY = arryCoords[1];
                var OrgW = arryCoords[2];
                var OrgH = arryCoords[3];

                //Calculate new values 
                var newLeft = OrgX * WChange;
                var newTop = OrgY * HChange;
                var NewWidth = OrgW * WChange;
                var NewHeight = OrgH * HChange;

                //Asign Values 
                $(this).width(NewWidth);
                $(this).height(NewHeight);
                $(this).css("left", newLeft.toString() + "px");
                $(this).css("top", newTop.toString() + "px");
            });
        }

 $("#Page-" + (page).toString()).append(RightHotLinks); The output for the RightHotlinks is this"<div linkType=\"DIRECTPAGE\"[size="4"][b] id=\"M71034\"[/b][/size] class=\"imgLink Page-4\" style=\"position:absolute; z-Index:5000; border:0px solid #FF0000; background-image: url(books/images/transparent.gif) repeat; left:151px; top:156px; width:36px; height:10px;\" [size="4"][b]rel=\"151,156,36,10\"[/b][/size] title=\"234\"></div>

Having problem getting their value.

[Kruithne]

Hello there,

Firstly, rather than constantly call $("#Page-" + page.toString()), at the top of the function I would declare it as a variable and then you only need call that to access the object.

// There is no need to use toString, appending an INT to a STRING makes a STRING.
var thePage = $("#Page-" + page);

// Now inside the scope thePage will be the object!
// Example of accessing it below..
var width = thePage.width();
var height = thePage.height();

Now, answering this I assume the HTML output from RightHotLinks does not include the BB code and other non-HTML stuff inside it and is in-fact a correctly formatted DIV element that displays on the page.

The problem I see is that you are calling .each on the page DIV, but it's a HTML element, not an array, therefore what are you looping? Not what you want.

I assume you are trying to loop through each of the page objects children (the elements inside it). What you want to be doing is using .children, like so...

// OLD
$(".Page-" + page).each(function () {

// NEW (thePage refers to a previous change I mentioned)
thePage.children().each(function () {