CODEWITHSUNDEEP
javascriptjquerycss
Chris Dixon
Chris Dixon

Reputation: 9167

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

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.

Upvotes: 0

Views: 237

Answers (4)

Matt Bucci
Matt Bucci

Reputation: 2140

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

Upvotes: 1

joeltine
joeltine

Reputation: 1630

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
});

Upvotes: 1

denoise
denoise

Reputation: 1097

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.

Upvotes: 1

Carol McKay
Carol McKay

Reputation: 2424

this is your problem:

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

Upvotes: 0

Related Questions