1 Replies - 803 Views - Last Post: 02 November 2012 - 02:49 AM

#1 postonoh  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 4
  • Joined: 02-October 12

The using of the attr Attribute trying to get the "id" and 

Posted 03 October 2012 - 08:19 AM

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.

Is This A Good Question/Topic? 0
  • +

Replies To: The using of the attr Attribute trying to get the "id" and 

#2 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: The using of the attr Attribute trying to get the "id" and 

Posted 02 November 2012 - 02:49 AM

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 () {

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1