In a twitter bootstrap page, I have a 12 wide column inside a row. Above the 12 wide column is the navbar. In the column is an open layers map and I need that column to take up the entire vertical space that remains under the navbar. This does not work. the map div shows up with 0px height. The only work around I found online is to add a width of 100% on html, body and the map div. that makes the map div span the entire document not just the column it is in. Thanks for any helpful pointers.
bootstrap version : 3.0.3
ol version: 2.13.1
This does not help http://openlayers.org/dev/examples/bootstrap.html
<!DOCTYPE html>
<html lang="en" class="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Fixed Top Navbar Example for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="/bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body class="">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">Nav</a>
</div>
</nav>
<div style="padding: 0 15px">
<div class="row" style="">
<div class="col col-md-12">
<div id="mapDiv"></div>
</div>
</div>
</div>
<!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/js/OpenLayers/OpenLayers.debug.js"></script>
<script src="/js/jquery-1.10.2.js"></script>
<script src="/bootstrap/js/bootstrap.js"></script>
<script src="/view/home/presenter.js"></script>
<script>
(function () {
console || console.log(mapDiv);
var osm = new OpenLayers.Layer.OSM();
var map = new OpenLayers.Map({
div: "mapDiv",
layers:[osm]
});
map.zoomToMaxExtent();
})();
</script>
</body>
</html>
The example you refer to use Bootstrap version 2.2.1. your are using Bootstrap 3.0.3. There are many changes between version 2 and 3 of Twitter's Bootstrap, see also: Updating Bootstrap to version 3 - what do I have to do?
In your case start reading: http://getbootstrap.com/getting-started/#third-parties
The Openlayers' javascript add a class olMap to <div id="mapDiv"></div> use CSS to set it's height / width, like:
div.olMap
{
cursor: default;
height: 500px;
margin: 0 !important;
padding: 0 !important;
width: 100%;
z-index: 0;
}
NB your html for the row and column looks strange, try:
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="mapDiv"></div>
</div>
</div>
</div>
Related
Kindly guide me how to make this heading hover in Bootstrap because I tried css but it isn't working. Thank you in advance.
NOTE. Not included bootstrap links as I am using the downloaded
compiled files.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap-Begining</title>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet'>
</head>
<body>
<!--TOP BAR THAT GONNA HOLD TITLE AND MENU-->
<div id="top-bar"class="container-fluid"
style="background-color: black;">
<div class="row">
<div id="title"class="col-6 p-5"style=" border: 1px solid white;">
<p id="logo"style="color:white ;font-family: Lato;margin-left: 30%;">
<span style="font-size:45px;">ENERGY FLASH.</span><br> /MUSIC BLOG</p>
</div>
<div id="menu"></div>
</div>
</div>
</body>
</html>
hovering on #logo>spanwhich means direct child inside #logo of type span and changing the color of its text
#logo>span:hover{
color:purple;
cursor:pointer
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap-Begining</title>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet'>
</head>
<body>
<!--TOP BAR THAT GONNA HOLD TITLE AND MENU-->
<div id="top-bar"class="container-fluid"
style="background-color: black;">
<div class="row">
<div id="title"class="col-6 p-5"style=" border: 1px solid white;">
<p id="logo"style="color:white ;font-family: Lato;margin-left: 30%;">
<span style="font-size:45px;">ENERGY FLASH.</span><br> /MUSIC BLOG</p>
</div>
<div id="menu"></div>
</div>
</div>
</body>
</html>
So if you want to change the color of the text in the two span elements when hovering over them, you will need to use CSS as this cannot be achieved with just Bootstrap. To do this you need to select the div with the id="title" and its children. Your CSS might looks like this:
#title:hover span {
color: "yellow";
}
or
span:hover {
color: "yellow";
}
Also I recommend rearranging the elements in your #title - they probably shouldn't all be wrapped in a p tag. Also look into Flexbox to learn more.
You can look for information about the hover effects in the documentation
https://mdbootstrap.com/docs/standard/content-styles/hover-effects/#docsTabsOverview
I'm creating a website that grabs the location input (Origin & Destination) and relays it to the map which in turn would show the path using the MapBox API. So the problem I'm facing here is that how do I grab the input values and convert them to coordinates and show them on the map. Later on, the program will calculate the distance between the two endpoints and put it out there.
Here's my HTML code which contains the input fields:
<!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">
<script src='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet' />
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta charset="utf-8">
<title>Distance btw Cities App</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="styling.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="jumbotron">
<div class="container-fluid">
<h1>Distance between cities App.</h1>
<p>Our app will help you calculate travelling distances.</p>
<form class="form-horizontal">
<div id='geocoder-container' class="form-group">
<label for="from" class="col-xs-2 control-label">From:</label>
<div class="col-xs-10">
<input type="text" id="from" placeholder="Origin" class="form-control">
</div>
</div>
<div class="form-group">
<label for="to" class="col-xs-2 control-label">To:</label>
<div class="col-xs-10">
<input type="text" id="to" placeholder="Destination" class="form-control">
</div>
</div>
</form>
<div class="col-xs-offset-2 col-xs-10">
<button class="btn btn-info btn-lg" onclick="calcRoute();">Submit</button>
</div>
</div>
<div class="container-fluid">
<div id="googleMap">
</div>
<div id="output">
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script
src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.min.js"></script>
<link rel="stylesheet"
href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.css" type="text/css">
<!-- Promise polyfill script required to use Mapbox GL Geocoder in IE 11 -->
<script src="https://cdn.jsdelivr.net/npm/es6-promise#4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise#4/dist/es6-promise.auto.min.js"></script>
<script src="javascript.js"></script>
</body>
</html>
And here's my JS code:
mapboxgl.accessToken = 'Token';
// Get Current Location
navigator.geolocation.getCurrentPosition(successLocation, errorLocation, { enableHighAccuracy: true })
// Live Coordinates
function successLocation(position) {
setupMap([position.coords.longitude, position.coords.latitude])
}
// Default Coordinates if location fails
function errorLocation() {
setupMap([38.189980, 24.023176])
}
// Create Map
function setupMap(center) {
var map = new mapboxgl.Map({
container: 'googleMap',
style: 'mapbox://styles/mapbox/streets-v11',
center: center,
zoom: 12,
})
// Navigation Controls
const nav = new mapboxgl.NavigationControl()
map.addControl(nav)
var geocoder = new MapboxGeocoder({ accessToken: mapboxgl.accessToken });
document.getElementById('from').appendChild(geocoder.onAdd(map))
}
Also, I dunno how to tell the program which input is my origin and which one is the destination. On following this code, . This is really messed up cuz I'm not able to make my input fields as my location finder. Neither this location will reflect on the map. Please someone help me solve this issue, It's really frustrating.
My class fixed-content appears to be stopping onmouseover from changing an images which uses src.this
The html
<!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">
<title>Blah</title>
<link href="https://fonts.googleapis.com/css?family=Mada:900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Francois+One" rel="stylesheet">
<script src="https://use.fontawesome.com/07f9f0d505.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="fixed-content col-md-1 hidden-sm-down">
<div class="row">
<div class="col-md-12 firstSideMenuElement">
<img class="sideMenu" src="images/Desmond_blank-01.png" onmouseover="this.src='images/Desmond_mouseover-01.png'" onmouseout="this.src='images/Desmond_blank-01.png'">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The css
.fixed-content{
top: 0;
/*bottom:0;*/
right: 0;
position:fixed;
overflow-y:scroll;
overflow-x:hidden;
}
When I remove this class from the html the onmouseover works correctly.
UPDATE:
This code is at https://sonjadorlas.github.io/Website/desmond.html
The sidebar menu, which contains four images should change slightly onmouseover. When I scroll down the page, this menu is fixed as I want. But when I mouseover the icons in the sidebar menu again, they do not change. If I scroll back to the top of the page, the behaviour is correct again on mouseover.
SOLUTION:
/* SIDE BAR */
.fixed-content{
top: 0;
right: 0;
z-index: 100;
position:fixed;
overflow-y:scroll;
overflow-x:hidden;
}
Thanks
I think your problem has to do with the z-index on your .fixed-content. You need to make sure that the z-index puts it's position above the other content.
Try adding something like this:
.fixed-content{
z-index: 10;
}
Code as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My God Man Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link href="/Content/bootstrap/bootstrap.css" rel="stylesheet"/>
<link href="/Content/bootstrap/bootstrap-responsive.css" rel="stylesheet"/>
<link href="/Content/fontawesome/font-awesome.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="/Content/IE9FixScripts"></script>
;
<![endif]-->
</head>
<body>
<div id="wrap">
<div class="container">
<!-- Main content any sections which need to be filld in and then body -->
<div class="container">
<div class="jumbotron">
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h3>Home Page.</h3>
<h4> Welcome GodMan, if you click on the above link where it says [Needs Role] and if it works then you are good else you see a custom 401 message.</h4>
</hgroup>
</div>
</section>
<!-- footer section here needs customisation.-->
<div id="footer">
<footer>
<div class="row">
<div class="col-lg-12">
<ul class="list-unstyled">
<li class="pull-right">Back to top</li>
<li><a id="testingID" href="#"data-placement="left" data-toggle="tooltip" class="btn btn-default" type="button" data-original-title="Tooltip on left">Tool Tip Left</a></li>
<li>Tool Tip Right</li>
<li>Tool Tip Bottom</li>
<li>Tool Tip Top</li>
<li>PopOver</li>
<li>PopOver2</li>
</ul>
</div>
</div>
</footer>
</div>
<!-- footer ends-->
</div>
</div>
<script src="/Scripts/jquery-2.0.3.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script type="text/javascript">
$.ready(function () {
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover({trigger: "hover"});
$('#testingID').tooltip('show');
//$().tooltip({
// selector: "[data-toggle=tooltip]",
// container: "body"
//})
});
</script>
</body>
</html>
Looked at the other link which [https://stackoverflow.com/questions/18410922/bootstrap-3-0-popovers-and-tooltips]
did what it says but ain't working.
what is the mistake what i am making.
am i forgetting to add a reference to something?
or my JQuery verion is not good should i go back?
Tried the fiddler example with JQ 2.X edge on the example above mentioned in post. and it works there.
but not for me. Strange. it may be some thing really small. but cant seem to get it.
Any help is appreciated.
I made a JS fiddle based on your code which can be found here - http://jsfiddle.net/w2gTy/
For the jQuery dependency I used 2.0.2, hopefully that isn't the difference. That said, you were missing 'document' in your $.ready declaration. Without it the tooltips never appeared.
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover({trigger: "hover"});
$('#testingID').tooltip('show');
//$().tooltip({
// selector: "[data-toggle=tooltip]",
// container: "body"
//})
});
That said, you could also even omit the $(document).ready() section and leave just the .tooltip initializers and that would work as well.
is there any way to create a text input just like search bar for Jquery Mobile. For example when we type text there should be a cross mark which allows users to clear the field.
Even if I to use search bar as input field there is a search icon showing up and it doesn't seem nice and appropritate for a textbox.
Can someone help me out. Thanks in advance
I think this is what you are looking for.The idea is to hide the icon in the search input.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<style>
.content .ui-icon-searchfield::after{
display:none !important;
}
.content .ui-input-search{
padding:0 10px !important;
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content" class="content">
<input type="search" name="search" id="searc-basic" value="" />
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
A demo here - http://jsfiddle.net/8sg6M/
Add data-clear-btn="true" to your input TextBox