jemz
September 12, 2014, 8:17pm
1
Hi PaulOB,
I am trying to put also sliding div at the bottom,but when I toggled,. the map did not goes up,and also the sliding is wrong it slides from left to right,but I want bottom to up sliding.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Custom CSS -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script type="text/javascript">
var map;
function initialize(){
google.maps.visualRefresh = true;
var initial = new google.maps.LatLng(35, -105);
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 5,
center: initial,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},
scaleControl: false,
rotateControl:false,
panControl:false
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
#wrapper {
padding-bottom: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper{
padding-bottom: 250px;
}
#bottom-wrapper {
z-index: 1000;
position: fixed;
bottom: 0px;
width: 0;
height: 40%;
/* overflow-y: auto;*/
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #bottom-wrapper {
width: 100%;
}
#page-content-wrapper {
width: 100%;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active, .sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#wrapper {
padding-bottom: 250px;
}
#wrapper.toggled {
padding-bottom: 0;
}
#bottom-wrapper {
width: 100%;
}
#wrapper.toggled #bottom-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-bottom: 0;
}
</style>
</head>
<body >
<div id="wrapper" class="toggled">
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">show bottom</a>
<!-- /#bottom-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12">
<div id="map_canvas" style="height:600px; width: 100%;"></div>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
<!-- Bottom -->
<div id="bottom-wrapper"> </div>
</div>
<!-- /#wrapper -->
<script src="bootstrap.min.js"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
Hi, update your CSS accordingly.
#bottom-wrapper {
z-index: 1000;
position: fixed;
width:100%;height:40%;
bottom:0;
left:0;
right:0;
transition: height 1s ease;
-moz-transition: height 1s ease;
-webkit-transition: height 1s ease;
background: #000;
}
#wrapper.toggled #bottom-wrapper {
height:0%;
}
Still working on making the reverse functionality work although as for your base requirements, it’sworking. This was much more difficult than I originally anticipated
Nice. Go me. I got it. Here is fully updated code. Enjoy!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Custom CSS -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script type="text/javascript">
var map;
function initialize(){
google.maps.visualRefresh = true;
var initial = new google.maps.LatLng(35, -105);
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 5,
center: initial,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},
scaleControl: false,
rotateControl:false,
panControl:false
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
#wrapper {
padding-bottom: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper{
padding-bottom: 250px;
}
#bottom-wrapper {
z-index: 1000;
position: fixed;
width:100%;height:40%;
bottom:0;
left:0;
right:0;
transition: height 1s ease;
-moz-transition: height 1s ease;
-webkit-transition: height 1s ease;
background: #000;
}
#wrapper.toggled #bottom-wrapper {
height:0%;
}
#page-content-wrapper {
width: 100%;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active, .sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#wrapper {
padding-bottom: 250px;
}
#wrapper.toggled {
padding-bottom: 0;
}
#bottom-wrapper {
width: 100%;
}
#page-content-wrapper {
padding: 20px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-bottom: 0;
}
</style>
</head>
<body >
<div id="wrapper" class="toggled">
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">show bottom</a>
<!-- /#bottom-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12">
<div id="map_canvas" style="height:600px; width: 100%;"></div>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
<!-- Bottom -->
<div id="bottom-wrapper"></div>
</div>
<!-- /#wrapper -->
<script src="bootstrap.min.js"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
Here is another cool one without Javascript. Not sure I’d recommend it - would depend on your page. If the show / close would be the only internal #jumping page links then sure go for this Javascript-less solution.
Both demos can be found here.http://codefundamentals.com/demos/
The Javascript-less solution is hte last one there. Please note that you will have to introduce a Close button (which isn’t a bad thing really - many sites have one
jemz
September 13, 2014, 7:26am
5
@RyanReese , Thank you for the quick reply…Okay I will try I will let you know ,Thank you again
jemz
September 13, 2014, 11:08am
6
@RyanReese ,I tried it the bottom div works fine but why is it that the div will cover the map when it toggle?
Thank you in advance.
If it’s covering the map then the map is too tall. It covers up 40% of the bottom section of the screen. So the map has to take up 60% of less of hte height.
jemz
September 13, 2014, 12:40pm
8
Okay I will try to resize the map just like the sidebar in my other thread.
Thank you.
You’re welcome. You can probably also resize the bottom slider. 40% seems a tad much.
jemz
September 15, 2014, 12:28pm
10
@RyanReese ,@PaulOB , I already got it but there is a little problem,when I click the togglemenu the bottombar will not resize same as the map,.also if I click the show bottom the map also will not resize,still the bottom bar covers the map.
Thank you in advance
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Custom CSS -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script type="text/javascript">
var map;
function initialize(){
google.maps.visualRefresh = true;
var initial = new google.maps.LatLng(35, -105);
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 5,
center: initial,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},
scaleControl: false,
rotateControl:false,
panControl:false
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
/*** SIDE BAR**/
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper{
padding-right: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
right: 0px;
width: 0;
height: 100%;
overflow-y: auto;
background: #0000ff;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
}
/* Sidebar Styles */
#wrapper {
padding-right: 250px;
}
#wrapper.toggled {
padding-right: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
/****** ENS SIDE BAR *****/
/** bottom bar**/
#wrapper {
padding-bottom: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper{
padding-bottom: 0px;
}
#bottom-wrapper {
background-color:#000;
border: 1px solid #98c0f4;
/* z-index: 1000;*/
position: fixed;
width:97.5%;/*if sidebar width must 79% */
height:250px;
bottom:0;
left:0;
right:0;
transition: height 1s ease;
-moz-transition: height 1s ease;
-webkit-transition: height 1s ease;
}
#wrapper.toggledbottom #bottom-wrapper {
height:50px;
width: 97.5%;
}
#page-content-wrapper {
width: 100%;
padding: 15px;
}
#wrapper.toggledbottom #page-content-wrapper {
position: relative;
}
#page-content-wrapper {
padding: 20px;
}
#wrapper.toggledbottom #page-content-wrapper {
position: relative;
margin-bottom: 0;
}
/*** End bottom bar**/
</style>
</head>
<body >
<div id="wrapper" class="toggled toggledbottom">
<!-- Sidebar -->
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
<div id="sidebar-wrapper"> </div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12">
<div id="map_canvas" style="height:600px; width: 100%;"></div>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
<!-- Bottom -->
<div id="bottom-wrapper"> <a href="#bottom-toggle" class="btn btn-default" id="bottom-toggle">show bottom</a></div>
</div>
<!-- /#wrapper -->
<script src="bootstrap.min.js"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
$("#bottom-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggledbottom");
});
</script>
I’m back at my work station computer, do you have an online example I can tinker with?
jemz
September 15, 2014, 12:42pm
12
@RyanReese , I don’t have an online,but that code is what I am using now.
jemz
September 18, 2014, 8:30am
13
I could not make the map resize just like in the sidebar the map will resize if the sidebar will show.
