CODEWITHSUNDEEP
javascriptjquerycssipadsafari
aleczandru
aleczandru

Reputation: 5449

Positioning absolute on iPad does not set the element on the desired position

Hi I seem to have some issue regarding the absolute positioning on iPad. Here is my issue.What I am trying to create is a tooltip when a user taps on an image the tooltip will appear.

Here is what I have done so far:

var div = createTooltip(toElement);

$(toElement).click(function () {
     showTooltipNow(toElement, div);
});

function createTooltip(toElement, div){
 var div = document.createElement('DIV');
   div.style.zIndex = 100000;
   div.style.visibility = 'hidden';
   div.style.position = 'absolute';
   div.style.left = 0;
   div.style.top = 0;
   document.body.appendChild(div);
}

 function showTooltipNow(toElement, div) {
    $(div).addClass('tbxtooltip-close');

    var positionedElement = $(div);
    var toElem = $(toElement);

    positionedElement.css({ top: toElem.position().top, left: toElem.position().left, position: "absolute" })


    alert("Top Position " +positionedElement.position().top + " Left Position " +positionedElement.position().left);
    alert("Top ToElement Position " + toElem.position().top + " Left ToElement Position " +toElem.position().left)
    div.style.visibility = 'visible';
}

When I initialize this I get the following readings from the alerts:

Top Position:  363.375  Left Position 300
Top ToElement Position 485  Left ToElement Position 400

What I expected to happen is the positioned element to get the same position as the clicked element but as you can see this does not hapen.

I first assumed that the position is set from another place in the aplication but if I do not called this line : 

    positionedElement.css({ top: toElem.position().top, left: toElem.position().left, position: "absolute" })

in the showTooltipNow function the element is position at top:0 left:0 as it is set in the createTooltip function.

I should also mention that on all desktop browsers this works correctly IE, Firefox, Safari and Chrome do not have this behavios and the element is se tat the desired position.

Does anyone know why my element is not set to the correct position?

Upvotes: 0

Views: 700

Answers (1)

taan_sikirin
taan_sikirin

Reputation: 11

I have made some small arrangement of your code and tested it on iPad (Safari and Chorme) and it worked fine.

var div = createTooltip();

document.getElementById("toElement").addEventListener("click",function () {
    showTooltipNow(this, div);
});

function createTooltip(){
    var div = document.createElement('DIV');
    div.style.zIndex = 100000;
    div.style.visibility = 'hidden';
    div.style.position = 'absolute';
    div.style.left = "0px";
    div.style.top = "0px";
    div.style.width = "100px";
    div.style.height = "100px";
    div.style.backgroundColor = "green";
    document.body.appendChild(div);
    return div
}

function showTooltipNow(toElement, div) {
    //$(div).addClass('tbxtooltip-close');

    var positionedElement = div;
    var toElem = toElement;

    positionedElement.style.cssText += position:absolute;top:"+toElem.style.top+";left:"+toElem.style.left+";";

    alert("Top Position " +positionedElement.style.top + " Left Position " +positionedElement.style.left);
    alert("Top ToElement Position " + toElem.style.top + " Left ToElement Position "+positionedElement.style.left);
    div.style.visibility = 'visible';
}

Here is a fiddle exaple. Hope this help.

Upvotes: 1

Related Questions