A CSS (or JavaScript) way of making an elements position relative to the screen resolution

Question

There's a lot of information on the web about this, but I really can't seem to find any exact answer that I need for my scenario - I've tried basically every combination of CSS I've found in tutorials and nothing's working.

Here's a couple of screenshots of what I'm facing (notice the markers):

Full resolution (1080p): enter image description here

Shrunk browser window: (tablet) enter image description here

You can see the markers are all over the place. I want these to stay relative, so the "marker" should stay above the word "great", even when the page resolution changes.

Here's my CSS, note that I've tried setting the overlay to position: absolute, with the pins as relative positioning. I've tried setting the top and left values as percentages for the markers, I can't seem to get anything to work.

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 9997;
  background-color: rgba(0,0,0,0.5);
  display: none;
}

.overlay-inner {
    width: 100%;
    height: 100%;
    position: absolute;
}

.pp_pin_dropped {
    width: 48px; // tried as percentages, position: absolute is set on the elements in JQuery - will be moved to CSS
    height: 48px;
    z-index: 9998;
    cursor: pointer;
    background-image: url('/Images/pin_dropped.png');
}

And, finally, you can see this on the following URL: http://pintool.azurewebsites.net/ (click on the bottom right hand side icon to see the markers)

I know it's asking a lot, I just hope there's some CSS guru out there that I can point me in the right direction before I pull all my hair out.

position fixed doesn't work on tablets and phones as far as I know — Carol McKay, Aug 09 '14 at 08:43
I'm game to change it to whatever it needs to be really - surely there must be answers for this scenario and other people have achieved it? — Chris Dixon, Aug 09 '14 at 08:45

score 1 · Answer 1 · edited May 23 '17 at 12:05

1

you could wrap the targeted words or characters with a span tag and then use jQuery (or javascript) to locate them on the page.

perhaps this question would be helpful too: jQuery x y document coordinates of DOM object

When you locate the specific words, just use javascript to relocate the pins. And don't forget to reposition the pins on window resize.

edited May 23 '17 at 12:05

Community

1
1

answered Aug 09 '14 at 08:47

denoise

1,067
2
14
40

Sounds like this and the other answer are getting at the same thing - I figured it'd have to be JavaScript based - thank you! – Chris Dixon Aug 09 '14 at 08:53

score 1 · Accepted Answer · answered Aug 09 '14 at 08:47

1

Yikes, this is going to be very difficult to do using strictly CSS and HTML. I think you're going to need to use JS for this behavior. The jQuery UI position library will come in very handy for finding your marker locations: http://jqueryui.com/position/.

Here's one idea:

I'd wrap every "keyword" on the page in a span with a unique ID. For example:

<div>some text here <span id="pos">pos</span></div>
<img src="marker.png" id="pos_marker"/>

Then on window resize, reposition your images:

$( window ).resize(function() {
  $("#pos_marker").position({my: "bottom center", at: "top center", of: "#pos"});
  // and so on
});

answered Aug 09 '14 at 08:47

joeltine

1,610
17
23

Thank you for this and the code snippets, I figured I'd have to do something with the positioning of the elements on browser resize (unfortunately). The tough part is that I'm trying to make a standalone plugin and not rely on anything other than jQuery - but this definitely gives me a starting point. – Chris Dixon Aug 09 '14 at 08:54
Sounds interesting! I could imagine you pass your plugin a configuration object of image->marker pairs. E.g., var $markers = $.markers({ '#pos_marker': '#pos', ... }); Under the hood you handle the event binding and positioning. Perhaps you provide an external api to control when they're shown/hidden: $markers.show(); – joeltine Aug 09 '14 at 08:58

score 1 · Answer 3 · answered Aug 09 '14 at 08:53

I think you could treat them similar to how tooltips are done, embedding the pins directly as elements like

<span data-content="Great" class="pin"></span>

then use javascript to display the icon based on the element position and redraw it when the window is resized.

<script>
    function drawpins() {
         $(".pin").each(function(){
             pos = this.position()

             pin = this.data("content");
             pin += '<img src="tooltip.jpg"'
             pin += 'style="position:absolute;'
             pin += 'top:' + pos.y + ';'
             pin += 'left:'+ pos.x + ';'
             this.html(pin)
         })
    }

    $(window).resize(drawpins())
</script>

WARNING Not TESTED, just concept

Thanks for this - again it's the same concept as the other 2 answers and I appreciate your code snippet, I'll give it a whirl! — Chris Dixon, Aug 09 '14 at 08:56

score 0 · Answer 4 · answered Aug 09 '14 at 08:45

0

this is your problem:

element.style {
left: 872px;
position: absolute;
top: 154px;
}

answered Aug 09 '14 at 08:45

Carol McKay

2,438
1
15
15

I've tried changing that to percentages too and it's still the same result. That may be the issue, but is there a solution? – Chris Dixon Aug 09 '14 at 08:46

A CSS (or JavaScript) way of making an elements position relative to the screen resolution

4 Answers4