CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Nathan
Nathan

Reputation: 666

Align center of a div that is wider than the screen to the center of the screen

I have an image nested in a couple of divs. The width of the image is 2000px, which, when the browser's width is set smaller than that when the page loads, I want the center of the image to be aligned to the center of the screen and be able to scroll to the left/right to view the rest of the image. I also need the pink bordered divs to follow the image, staying in the same position that they are now (Square needs to stay over the UK and the circle over Poland).

I have a JS fiddle below of what I've got so far, so when the page loads, I want the X that I've placed on the map to appear in the middle of the screen and then be able to still scroll both left and right to view the rest of the map. I also need the image to remain as an image element and not a background image as I have a feature of the page that allows scaling but I get undesirable results when using a background image, but I've stripped all that code for the purpose of this question.

//html
    <div id="map-container">
        <div id="map-inner-container">
        <img src="http://img253.imagevenue.com/aAfkjfp01fo1i-27999/loc573/72685_vector_world_map_v2.2copy_122_573lo.jpg" style="z-index:-9999;">
        <div id="map-1" onclick="showPopup(1)"><!-- UK --></div>
        <div id="map-2" onclick="showPopup(2)"><!-- Poland --></div>
        </div>
    </div>

//css
    #map-container{
        z-index:-9000;
        width:2000px;
        height:1414px;
    }
    #map-inner-container {
        position:relative;
        top:0;
    }

JSFIDDLE: http://jsfiddle.net/Lt4PW/7/

I've had a look at a lot of other similar questions on here and tried all of their solutions, but none of them seem to work. I did get close once by getting the center of the image to align to the center of the scree, but could not scroll, event when adding overflow:auto.

All of the other solutions I found used just css, with things like left:50% and margin-left:-1000px /*half of width*/ on the img's outer div, but as things like that didn't work for me, I'm open to a JavaScript/jQuery solution, or pure css if it works.

Help is much appreciated with this as I'm at a loss! :(

Upvotes: 2

Views: 185

Answers (2)

Trevor
Trevor

Reputation: 16116

Using jQuery you can do the following: 

  var windowHeight = $(window).height();
  var windowWidth = $(window).width();
  $('body').scrollTop(($('#map-container').height()/2)-(windowHeight/2));
  $('body').scrollLeft(($('#map-container').width()/2)-(windowWidth/2));

FIDDLE

Upvotes: 2

Jop
Jop

Reputation: 456

You can set the width of the #map-inner-container to 100% and set the overflow-x property to auto. When your #map-containeris smaller than the image inside your #map-inner-container It will add a scrollbar to the bottom of your #map-inner-container so you can still scroll to see the left and right side of your image. I've changed the width of your #map-container to 900px to simulate this.

#map-container{ z-index:-9000; width:900px; height:1414px;
}

#map-inner-container { position:relative;
width: 100%;
overflow-x: auto; overflow-y: hidden; }

To initially show the center of the image, instead of the left side, you can use JQuery's .scrollLeft method

$("#map-inner-container").scrollLeft(500);

You can change the value 500 as you see fit.

Example: http://jsfiddle.net/Lt4PW/4/

Upvotes: 0

Related Questions