does anyone know how to include a form in the VR scene built with A-Frame? Any experience with Web2VR?
If by a form you mean a standard HTML 2d form then you can simply overlay the 3d scene with any standard HTML element. Just use the z-index parameter.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<meta charset="UTF-8" />
</head>
<body>
<a-scene>
<a-sphere position="0 2 -10"color="red"></a-sphere>
<a-plane color="green" position="0 0 -5" rotation="-90 0 0" width="20" height="20"></a-plane>
<a-sky color="#aaf"></a-sky>
</a-scene>
<div>
<form style="z-index: 100; position: absolute; left: 10px; top: 10px">
<input type="text"/><br/>
<input type="number"/><br/>
<input type="date"/><br/>
<input type="submit"/>
</form>
</div>
</body>
</html>
You can also use an embedded attribute on a-scene to specify where the scene should be placed inside the standard web page.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<meta charset="UTF-8" />
</head>
<body>
<a-scene embedded style="width: 200px; height: 100px">
<a-sphere position="0 2 -10"color="red"></a-sphere>
<a-plane color="green" position="0 0 -5" rotation="-90 0 0" width="20" height="20"></a-plane>
<a-sky color="#aaf"></a-sky>
</a-scene>
<div>
<form>
<input type="text"/><br/>
<input type="number"/><br/>
<input type="date"/><br/>
<input type="submit"/>
</form>
</div>
</body>
</html>
Related
I have a time selector built with two input type="radio" inside of a div. When browser zoom, the radioS don't auto-size and . How could I get this autosize using CSS?
Pics of the problem:
My code is:
<div id="timePeriodSelector" style="font-size: 100%">
<form action="">
<input type="radio" id="timePeriodSelector_default" onclick="Dash.dateTypeSwitcher('default')">Effective Date
<input type="radio" id="timePeriodSelector_secondary" onclick="Dash.dateTypeSwitcher('secondary')">Billing Date
</form>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
#timePeriodSelector{
border: 1px dotted black;
}
</style>
<body>
<div id="timePeriodSelector" style="font-size: 100%">
<form action="">
<input type="radio" id="timePeriodSelector_default" onclick="Dash.dateTypeSwitcher('default')">Effective Date
<input type="radio" id="timePeriodSelector_secondary" onclick="Dash.dateTypeSwitcher('secondary')">Billing Date
</form>
</div>
</body>
</html>
It is work correctly in chrome
Hello I am using the has-error class on an input like so:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta input1="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form method="post">
<div class="col-lg-4 col-lg-offset-4 has-error">
<input type="text" name="input" class="form-control"/>
</div>
</form>
</body>
</html>
But I would like to increase the thickness of the red border, so I tried to add this:
<style>
.has-error{
line-height:3px;
}
</style>
But it has no effect, so is it possible to change the thickness of this class and how to do it ?
Thank you
line-height is not the property you want to change, try border-width. You also need to specify the class to .form-control, otherwise your style won't be applied.
.has-error .form-control{
border-width: 3px;
border-color: blue !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta input1="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form method="post">
<div class="col-lg-4 col-lg-offset-4 has-error">
<input type="text" name="input" class="form-control"/>
</div>
</form>
</body>
</html>
Hope it helps.
line-height has no relevance to border thickness - it sets the vertical size of each line of text inside the element. To set the thickness of a border, use the border-width property:
.has-error {
border-width: 3px;
}
I have a header in which I have one < image and back text is present .I need to give space or margin between these field example :5px .can we give margin in between field .
here is my code
http://codepen.io/anon/pen/xGgXVE
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Tabs Example</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body>
</body>
<ion-view>
<ion-header-bar align-title="center" class="bar-balanced">
<div class="buttons">
<a class="button icon-left ion-chevron-left button-clear">Back</a>
<!--i style="font-size:30px;" class='icon ion-chevron-left'></i-->
</div>
<h1 class="title">Title</h1>
</ion-header-bar>
</ion-view>
</html>
Use this CSS:
.button:before{
margin: 0 5px;
}
The :before element is the < icon.
I have a button in which I am using bootstrap css, I have used unicode text for the button, and I want the unicode text to be font size at 30px and the button height to be 34px; but it seems like the text is not centering within the button.
Can anyone please tell me some solution for this
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-primary" style="height: 34px;"><span style="font-size:30px;">⇉</span></button>
</div>
</body>
</html>
You can achive this in 2 ways :
with line height
remove height
Update: Update / Add this in your css file
.btn{
outline:none !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style>
.btn{
outline:none !important;
}
</style>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-primary" style="height: 34px; line-height: 16px; vertical-align:middle"><span style="font-size:30px;">⇉</span></button>
<button type="button" class="btn btn-primary" style=" line-height: 34px; vertical-align:middle"><span style="font-size:30px;">⇉</span></button>
</div>
</body>
</html>
I'm an html noob and I just wanted to know if it's possible to make a text box in which you could type a website and when you click submit it will load the website in the iframe of your choice.
<html>
<head>
<title> Answer </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$('.frmSubmit').click(function(e)
{
$('#dynFrame').attr('src', $('.frmUrlVal').attr('value'));
e.preventDefault();
});
});
</script>
</head>
<body>
<form>
<input type="text" class="frmUrlVal">
<input type="submit" class="frmSubmit" value="Go">
</form>
<iframe src="http://www.google.com" width="100%" height="400" id="dynFrame"></iframe>
</body>
</html>
<html>
<head>
<script language="JavaScript">
function SendMe()
{
document.all.myframe.src = document.forms[0].txtval.value;
}
</script/>
</head>
<body>
<form name="myform">
<input type="text" name="txtval">
<input type="button" value="Go" onclick="javascript:SendMe()">
<br>
<iframe src="http://www.google.com" width="400" height="200" name="myframe"></iframe>
</form>
</body>
</html>