I have a button on click of that button it shows the grid and button name changes to map view. on click on of map view it shows the map but the map loads completely thus hiding this button for some time. i want the map to be loaded while the button is visible.the same is not happening when the grid loads below is my code.
<div id="leftContent" class="HomeFilters">
<div id="MaptoGridSwitcher">
<div class="forwardButton" id="gridViewButton">
<a href="" class="forward_button">Grid View</a>
</div>
<div class="backButton" id="mapViewButton">
<a class="back_button" href="#">Map View</a>
</div>
</div>
</div>
<div id="rightContent" class="HomeContent">
<!-- container for the map -->
<div id="mapView" class="HomeMap">
@Html.Partial("MapView")
</div>
<div id="gridView" class="HomeGrid">
@Html.Partial("GridView")
</div>
</div>
<div style="height: 269px" id="toPopup">
<div class="close"></div>
<span class="ecs-tip">Press Esc to close <span class="arrow"></span></span>
<!-- ko if: currentContract() -->
<div style="height: 259px; width: 355px; padding-left: 3px; padding-right: 3px; margin-top: -28px" class="contract-detail-div-accord-hdr" id="contract-detail-accordion" data-bind="template: { name: 'itemDetailTemplate'}"></div>
<!-- /ko -->
</div>
<div class="loader"></div>
<div id="backgroundPopup"></div>
<!-- include templates -->
@Html.Partial("ContractTemplates")
@Scripts.Render("~/bundles/taps")
<script type="text/javascript">
$(document).ready(function () {
var currentView = 'mapView'; //will be used to show/hide sidebar for the respective view
$(".forward_button").on("click", function () {
currentView = 'gridView';
return showGrid();
});
$(".backButton").on("click", function () {
currentView = 'mapView';
return showMap();
});
// this applies to show/hide sidebar
var slideButtonClicked = 0;
$("#hideShowSidebarBtn").click(function () {
var $currentView = '#' + currentView;
$("#leftContent").toggle("slide", { direction: "left" }, 150);
if (slideButtonClicked == 0) {
slideButtonClicked = 1;
$($currentView).css("margin-left", "");
$($currentView).switchClass('PartialView', 'FullView', 0);
$("#hideShowText").text('Show Sidebar');
}
else {
slideButtonClicked = 0;
$($currentView).switchClass('FullView', 'PartialView', 0);
$("#hideShowText").text('Hide Sidebar');
};
});
});
function showGrid() {
var $mapView = $("#mapView");
var $gridView = $("#gridView");
var $w = $mapView.outerWidth();
var $randomOffset = 1000;
$mapView.animate({ marginLeft: -1 * ($w + $randomOffset) });
$gridView.animate({ marginLeft: 1 });
$('#placesSearch').css("display", "none");
$('#gridViewButton').css("display", "none");
$('#mapViewButton').css("display", "block");
return false;
}
function showMap() {
var $mapView = $("#mapView");
var $gridView = $("#gridView");
var $w = $mapView.outerWidth();
var $randomOffset = 1000;
$gridView.animate({ marginLeft: $w + $randomOffset });
$mapView.animate({ marginLeft:1 });
$('#placesSearch').css("display", "block");
$('#mapViewButton').css("display", "none");
$('#gridViewButton').css("display", "block");
return false;
}
</script>