CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Maniraj Murugan
Maniraj Murugan

Reputation: 9084

How to make the map opener to show full height?

I have a map section with html as follows,

  <div id="map-section" class="map-section">
    <!-- map opener -->
    <div id="map-opener" class="map-mask" style="opacity:0.5;">
      <div class="map-opener">
        <div class="font-second">locate us on the map<i class="ci-icon-uniE930"></i></div>
        <div class="font-second">close the map<i class="ci-icon-uniE92F"></i></div>
      </div>
    </div>
    <!--/ End map opener -->
    <div id="map-container">
    </div>
  </div>
  <!--/ End Map Section -->

and the css was,

.map-section {
  height: 150px;
  overflow: hidden;
  position: relative;
  -webkit-transition: height 0.2s ease-out;
  transition: height 0.2s ease-out;
}
.map-mask {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  cursor: pointer;
  z-index: 4;
}
.map-mask .row {
  position: relative;
}
.map-mask .row > div {
  position: relative;
  top: 50%;
}
.map-opener {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  margin-left: -200px;
  width: 400px;
  height: 50px;
  overflow: hidden;
  line-height: 50px;
  text-align: center;
  font-weight: 400;
}
.map-opener div {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.map-opener div:first-child {
  opacity: 1;
}
.map-opener div:nth-child(2) {
  margin-top: -50px;
  opacity: 0;
}
.map-opener i {
  font-size: 28px;
  vertical-align: middle;
}
.map-opener i:before {
  display: inline;
}
.map-opened {
  height: 450px;
}
.map-opened .map-mask {
  height: 100px;
}
.map-opened .map-opener div:first-child {
  opacity: 0;
}
.map-opened .map-opener div:nth-child(2) {
  opacity: 1;
}

But this html won't give you full description about my problem and hence i am explaining here regarding it.. In a website i am using a map section in which at initial stage i have map with height of 150px; , and a text named "Locate us on map".. When we click the text, the map with a height of 450px; gets opened, here comes the issue the opened map was not scrolling down to full height and there is a need of manual scroll down to look at the full map.. How could i do it (i.e, if we click on "Locate us on map", the map container should move to full height without manual scroll down".. The link of the site was http://dev.seyali.com/seyalitechv3/ and look at the footer of this site.. This link will clears you my issue..

Upvotes: 0

Views: 69

Answers (1)

Nadir Laskar
Nadir Laskar

Reputation: 4160

Your div height of the map is changing and thus changing the height of the window but the window scroll position is not changing, you need to scroll the window on change of the div height.

To scroll the window you can add a click listener to the map mask as shown below and animate to the bottom of the page usng jQuery.

Add this JS code to your javascript file. 

$('.map-mask').on('click',function(){
     $("html, body").animate({ scrollTop: $(document).height() }, 1000);
});

Upvotes: 1

Related Questions