I am a novice when it comes to modern HTML (HTML5/CSS/Ajax/JQuery, etc). I have a web application that is using a Google Earth plugin like tool called Cesium. Like Google Earth, it allows you to view and interact with a global map of the earth. Cesium runs as a widget in a div container. The canvas takes up a whole div element. In my app it takes the entire width and most of the body.
I have a need for a small text search form that exists outside of this div container.
It consists of one form input and a couple of buttons. I would like this to sit on top (overlay) the div container that contains the cesium widget. I would like it to only take up a small section in the upper left corner, overlaying the cesium widget. I would be great if the background, underneath the form input field and buttons were transparent.
Below is a small sample of the HTML and CSS. I know it will involve some CSS but as I said I’m a novice.
Any helpful hints on slick ways for doing this would be appreciated.
Thanks!
body
{
background-color : #000000;
margin : 0;
margin-bottom : 20px;
margin-top : 20px;
width : 100%;
}
.textSearchSection
{
display:inline-block;
float:left;
height : 5%;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 5px;
width: 500px;
}
.textInputField
{
width : 200px;
}
.map
{
height : 95%;
overflow : hidden;
width : 100%;
}
.button
{
width : 80px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="../cesium/Build/Cesium/Widgets/widgets.css">
<script>
var cesiumViewer = null; //declare these here so processTextInputForm() has access to them
</script>
</head>
<body>
<!--I want this to semi transparently overlay the cesiumContainer div, and only take a minumum amount of width-->
<div class="textSearchSection" id="textSearchSection">
<form id="searchForm" name="searcForm">
<input type="text" id="searchText" name="searchText" class="textInputField" onchange="somejavascriptfunction()"/>
<input id="searchButton" type="button" value="Text Search" class="button" onclick="somejavascriptfunction()">
<input id="clearButton" type="button" value="Clear" class="button" onclick="somejavascriptfunction()">
</form>
</div>
<!--This is the div that contains the cesium application-->
<div class="map" id="cesiumContainer"></div>
<script>
cesiumViewer = new CesiumViewer(); //This can't be created until after the cesiumContainer id is declared in the div.
</script>
</body>
</html>
My approach would be to move the textSearchSection so that it nests inside a parent container as a sibling element to cesiumContainer:
<div id="parentContainer">
<div class="map" id="cesiumContainer"></div>
<div class="textSearchSection" id="textSearchSection">...</div>
</div>
Then you can style parentContainer so that it is exactly the same size as cesiumContainer and style textSearchSection with:
#textSearchSection {
position: absolute;
top: 0;
left: 0;
z-index: 12;
}
Actually moving the form div (searchContainer below) into the cesiumContainer div, and using CSS z-index attributes as shown below (searchOverlay set to 1, map set to 0) does the trick. So it is a child of the cesiumContainer div.
.map
{
height : 100%;
overflow : hidden;
width : 100%;
z-index : 0;
}
.searchOverlay
{
left : 10;
position : relative;
top : 33;
width : 50%;
z-index : 1;
}
<div class="map" id="cesiumContainer">
<div class="searchOverlay" id="searchContainer">
<input class="textSearch" id="searchText" name="searchText" type="text" onchange="processTextInputForm()"/>
<input class="button" id="searchButton" type="button" value="Search" onclick="processTextInputForm()" onkeydown="searchEnter(event)">
<input class="button" id="searchButton" type="button" value="Clear" onclick="clearResults()">
</div>
</div>
Related
I need to open/close a div container that will always appear at the top left corner no matter where I am on a page that has page scrolling. Position fixed would be acceptable in a desktop environment but in a mobile environment I need the user to be able to pull up or move down the div container so they can get to other input fields. If I use position absolute the div container could appear out of view if you are scrolled down at the bottom of the page.
Example problem using fixed... The mobile device popup keyboard will cover the lower input field. If you change position to absolute then you can see the out of view issue. https://jsfiddle.net/r71vb73u/15/
#workarea {
width: 160px;
padding: 5px;
height: 400px;
position: fixed;
background: #cccccc;
}
.input1 {
height: 90%;
}
.input2 {
height: 10%;
}
.blah {
float: left;
}
.buttons {
float: right;
}
.filler {
clear: both;
height: 800px;
}
function workarea(action) {
if (action == 'open') {
document.getElementById('workarea').style.display = '';
} else {
document.getElementById('workarea').style.display = 'none';
}
}
<body>
<div id="workarea">
<div class="input1">
<input type="text" value="hello">
</div>
<div class="input2">
<input type="text" value="world">
</div>
</div>
<div class="blah">blah blah ...</div>
<div class="buttons">
<input type="button" value="Open" onMouseDown="workarea('open');">
<input type="button" value="Close" onMouseDown="workarea('close');">
</div>
<div class="filler"></div>
<div class="blah">blah blah ...</div>
<div class="buttons">
<input type="button" value="Open" onMouseDown="workarea('open');">
<input type="button" value="Close" onMouseDown="workarea('close');">
</div>
</body>
Okay this wasn't my final answer but when u mention in mobile environment i got blank. But first i let u see my first answer. I will keep update until u say this is a correct answer. Check the DEMO
#workarea {
width: 160px;
padding: 5px;
position: fixed;
background: #cccccc;
left:0;
top:0;
bottom:0;
}
DEMO
Looks like I can add the following to the javascript action open:
document.getElementById('workarea').style.top = document.body.scrollTop + 10 + 'px';
This places the workarea at current top using position absolute.
https://jsfiddle.net/r71vb73u/28/
In an overlapping like the one below, how to prevent the large space between the title and text field?
.icon-link-mail {
position: relative;
left: 485px;
top: 29px;
padding: 8px 8px 7px 8px;
z-index: 2
}
<h3>Title</h3>
<form name="mail_form" id="mail_form" method="POST" action="">
<label for="sendto">
<i class="icon-envelope icon-2x icon-link-mail" style="color:#E4E4E4; text-decoration:none"></i>
<input name="sendto" class="sendto" type="text" style="width: 98%; margin-bottom:10px" placeholder="Send to.." />
</label>
</form>
Result can be seen in this fiddle
Personally I'd just use a pseudo-element, but if you wish to use the <i> icon, then we can do that a lot better by using position:absolute instead of position:relative. Adding position:relative just moves the icon, but leaves the space that it would have taken. position:absolute won't leave that space.
We need to make sure to set the parent contain (label) to position:relative though, so that the icon will be absolutely positioned in relation to the parent instead of the entire page.
#mail_form label {
position: relative;
}
.icon-link-mail {
position: absolute;
z-index: 2;
right: 0;
}
<h3>Title</h3>
<form name="mail_form" id="mail_form" method="POST" action="">
<label for="sendto">
<i class="icon-envelope icon-2x icon-link-mail" style="color:#E4E4E4; text-decoration:none"></i>
<input name="sendto" class="sendto" type="text" style="width: 98%; margin-bottom:10px" placeholder="Send to.." />
</label>
</form>
Result
Fiddle
http://jsfiddle.net/Ay6Hw/4/
I find the best way to do this is to just use an image. Here would be the code:
.search input {
padding-left: 17px;
background: #FFF url("../images/icon_search.png") left no-repeat;
}
.search input:focus {
background:#fff;
}
This will also remove the background image on focus giving the user a better experience overall.
Here is a solution that works with simple CSS and standard font awesome syntax, no need for unicode values, etc.
Create an <input> tag followed by a standard <i> tag with the icon you need.
Use relative positioning together with a higher layer order (z-index) and move the icon over and on top of the input field.
(Optional) You can make the icon active, to perhaps submit the data, via standard JS.
See the three code snippets below for the HTML / CSS / JS.
Or the same in JSFiddle here:
Example: http://jsfiddle.net/ethanpil/ws1g27y3/
$('#filtersubmit').click(function() {
alert('Searching for ' + $('#filter').val());
});
#filtersubmit {
position: relative;
z-index: 1;
left: -25px;
top: 1px;
color: #7B7B7B;
cursor: pointer;
width: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="filter" type="text" placeholder="Search" />
<i id="filtersubmit" class="fa fa-search"></i>
I'm attempting to add a search field to a responsive sidebar, and want the field to responsively scale to the width of the sidebar, while keeping the 'submit' button at a set width, on the same line as the search field.
I've been able to mock up the effect with divs, but when applying the same styles to the form elements, the search field will always fill the full width of the form element:
http://dabblet.com/gist/5618200
I am aware that I can get this to work with percentages:
http://dabblet.com/gist/5618209
But I really would like the 'submit' button to have a set width.
What can I do to make the form behave -exactly- like the div mockup in my first example?
Not getting your question well, but do you want the text box to be width 100% and a fixed button like this?
Demo
<input type="submit" value="Search" />
<div>
<input type="text" />
</div>
input[type=submit] {
float: right;
}
input[type=text] {
width: 100%;
}
div {
overflow: hidden;
padding-right: .5em;
}
Here is a fully functional solution.
<form>
<div class="form-element textfield">
<input type="text">
</div>
<div class="form-element submit-btn">
<input type="submit" value="Search">
</div>
</form>
And the styles:
.form-element {
display: table-cell;
box-sizing: border-box;
}
.textfield {
width:100%
}
.textfield > input {
width:100%
}
Here is the example:
http://codepen.io/capynet/pen/vJBnL
My application uses some bars on a timeline. Every line consists of a barkeeper div that holds the bars for this line. The barkeeper also has 2 style properties width and height.
.barkeeper {
margin-bottom: 1px;
position: relative;
}
The bars have some interactive ajax actions that come from Richfaces and CSS hover and jquery javascript. Therefore around each bar there is a form. I've left out the action javascript to simplify this example.
.bar {
position: absolute;
text-align: center;
vertical-align: middle;
z-index: 0;
}
<form id="j_id163:0:j_id165:0:medfrm" onmouseover="" method="post" name="j_id163:0:j_id165:0:medfrm" target="">
<div id="bar1" class="bar antibiotic" onmouseout="" onmouseover="" style="left: 7px; width:1528px;">
<img style="float:right;" src="endarrow.gif">
<div class="cornr_top">
<div></div>
</div>
<div style="text-align: center; direction: ltr;">Bartext </div>
<div class="cornr_bottom">
<div></div>
</div>
<script type="text/javascript">
</div>
<input type="hidden" value="" name="" autocomplete="off">
<input type="hidden" value="" name="autoScroll" autocomplete="off">
<script type="text/javascript">
<input id="javax.faces.ViewState" type="hidden" autocomplete="off" value="" name="javax.faces.ViewState">
</form>
The bars are absolutaly positioned using a left and width parameter.
The bars have to have rounded corners so I've added these cornr_top and cornr_bottom
.cornr_top div, .cornr_top, .cornr_bottom div, .cornr_bottom {
font-size: 1px;
height: 3px;
width: 100%;
}
.cornr_top {
background: url("../img/tr.gif") no-repeat scroll right top transparent;
}
.cornr_top div {
background: url("../img/tl.gif") no-repeat scroll left top transparent;
}
The cornr_bottom classes are identicaly defined except for the images being used.
The last thing I've added is this line
<img style="float:right;" src="endarrow.gif">
This displays a running an arrow at the end of the bar to indicate that it is still running.
Now every browser displays all of this correctly. The corners are added to the corners and if available the arrow overrides the right side of the bar and overlaps the 2 corners over there.
In IE7 the arrow is displayed on a new line. How can I resolve this issue?
I've found the solution myself.
I've changed the arrow image tag from
<img style="float:right;" src="endarrow.gif">
to
<img style="position:absolute; right:0px;" src="endarrow.gif">
For example I have a 200px div containing three buttons, the text is only minimal so the buttons don't fill the horizontal space available. Is it possible to..
Make the last button stretch to occupy all the remaining space?
The First button to stretch to fill the remaining space pushing the last two buttons along?
The middle button to stretch to fill the remaining space pushing the last button along?
I've realised that the real issue is buttons won't stretch until you give them an explicit width (ie, width:100%). You still need the table-cells though to constrain that 100% to a 'what will fit' model. You could just set 33% on each button but that won't work if your buttons are being added dynamically (unless you calculate the percentages on the server).
METHOD 1 (doesn't work): Buttons don't expand to fit the row (ie, display:table-cell appears to be ignored).
<div style="display:table;width:200px">
<div style="display:table-row">
<button style="display:table-cell">1</button>
<button style="display:table-cell">2</button>
<button style="display:table-cell">3</button>
</div>
</div>
For IE prior to IE8 you'll need to feed a real table or a compatibility script like IE8-js. The basic concept is easy enough though:
<!--[if ie lt 8]>
<script><!--pseudo-code, not real js-->
for (el in getElementsByTagName('button')) {
if el.style.find('display:table-cell') {
el.innerHTML = '<td><button>'+el.innerHTML+'</button></td>'
}
}
</script>
<![endif]-->
METHOD 2 (works): Hmmm.. Well for whatever reason the display:table-cell style does not work on button elements. I was able to do it with some extra markup though.
<div style="display:table;width:500px;">
<div style="display:table-row">
<div style="display:table-cell"> <button style="width:100%">1938274</button> </div>
<div style="display:table-cell"> <button style="width:100%">2</button> </div>
<div style="display:table-cell"> <button style="width:100%">3</button> </div>
</div>
</div>
I admit it ain't pretty but it will ensure all of the horizontal space is filled. It can be cleaned up a bit by using classes like in this demo I put together. Still, when combined with IE's shortcomings this is probably a case where I'd say ignore the purists and just use a table:
<style>table button {width:100%}</style>
<table style="width:500px;">
<tr> <td><button>1938274</button> <td> <button>2</button> <td> <button>3</button> </tr>
</table>
Similar to Roberts:
HTML
<div id="container">
<button id="one">One</button><button id="two">Two</button><button id="three">Three</button>
</div>
CSS
div#container {
border: solid 1px;
width: 200px;
}
div#container button {
width: 33%;
}
div#container button:last-child {
width: 34%;
}
That doesn't allow for a fluid layout: #container width must be known, then you do the math.
To allow for a fluid layout you need to hop into the world of absolute positioning:
div#container {
border: solid 1px;
width: 50%; /* resize your browser window to see results */
position: relative;
}
div#container button {
position: absolute;
width: 50px;
}
button#one {
top: 0;
left: 0;
}
button#two {
top: 0;
left: 55px;
}
button#three {
width: auto !important; /* get rid of the 50px width defined earlier */
top: 0;
left: 110px;
right: 0px;
}
Watch out for the height of #container. It's gone since all it's children in this example are absolutely positioned--you can see that from the border.
Can't you just set the widths like so...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test css button stretch</title>
<style>
#btn_container
{
width: 200px;
}
#btn_container button
{
width: 20%;
}
#btn_container button.stretch
{
width: 58%;
}
</style>
</head>
<body>
<div id="btn_container">
<p>last button stretch...</p>
<button type="button">eat</button>
<button type="button">drink</button>
<button class="stretch" type="button">sleep</button>
<br>
<p>first button stretch...</p>
<button class="stretch" type="button">eat</button>
<button type="button">drink</button>
<button type="button">sleep</button>
<br>
<p>middle button stretch...</p>
<button type="button">eat</button>
<button class="stretch" type="button">drink</button>
<button type="button">sleep</button>
</div>
</body>
</html>
This seems to get the desired effect, is fluid (if the div button container's width is changed or set to a %), and works in IE, Firefox and Opera.
edit: removed the redundant btn class; bumped up the width % for the stretch class; added the doctype. Left the types on, could technically haved removed for just an example, but meh.
#rpflo: the types are in there because my buttons in this example are not submit buttons. If these were part of a form and were submitting, I'd have left them off since the default is type=submit. (W3C HTML BUTTON)