I am using a very simple code to bind the user text input to the model.
The text box prompts the user to enter the name & says hello "username" on enter.
But I also want Hello to appear only when the user enters the name.
Can anyone help me with that. Currently Hello is present by default.
ui page
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script type="text/javascript" src="../js/prac_controller.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>prac_one</title>
</head>
<body ng-app>
<div ng-controller="pracOne">
Enter the name<br>
<input type="text" ng-model="message.text"/>
<p>Hello, {{message.text}}</p>
</div>
</body>
</html>
controller
function pracOne($scope)
{
$scope.message={text:""};
}
<p>{{message.text ? 'Hello, ' + message.text : message.text}}</p>
Or
<p>{{message.text && 'Hello, '+message.text || message.text}}</p>
Update: You can use ngShow if you want to conditionally display an element:
<p><span ng-show="message.text != ''">Hello, </span>{{message.text}}</p>
Related
How do I get a variable in an iframe from the parent if I do not know how many iframes are on the parent page and the order of the one in question. For instance, I know the iframe in question is the second one, so I can select windows.frames[1]. But if I didn't know know it was the second one, how would I select it by ID.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
<style type="text/css">
</style>
<script type="text/javascript">
$(function(){
$('#getValues').click(function(){
//This works, but I don't want to select the iframe by the number since I don't know it.
console.log(
window.frames[1],
window.frames[1].window,
window.frames[1].window.getMe
);
console.log(
window.frames['myIFrame'],
window.frames['myIFrame'].document,
window.frames['myIFrame'].window,
document.getElementById('myIFrame'),
document.getElementById('myIFrame').window
);
});
});
</script>
</head>
<body>
<button id="getValues">getValues</button>
<div><iframe src="otherIframe.html"></iframe></div>
<!-- iframe3_get.html only sets global variable getMe to something. -->
<div><iframe id="myIFrame" src="iframe3_get.html"></iframe></div>
</body>
</html>
In the bellow example, getM1 and getMe2 will be equal. This doesn't seem to be a very good answer, but it is the only one I have. If it is a bad answer and you elect to vote it down, please provide a better answer.
$('#getValues').click(function(){
var getMe1=window.frames[1].window.getMe;
for (var i = window.frames.length - 1; i >= 0; i--) {
if(window.frames[i].frameElement.id=='myIFrame'){
var getMe2=window.frames[i].frameElement.getMe;
break;
}
}
});
I am looking to build a webpage that submits into a database (.asp) but also calculates a percentage.
The percentage amount is 8%.
Ideally I want the user to type an amount in an input box (for example lets say £100)
Then underneath there is another input box which automatically caluates the £100 + 8% (so £108)
I haven't got a clue how to start so I haven't got any code
Live jsFiddle: http://jsfiddle.net/5mB3Q/
This is your jQuery:
$("#val").on('keyup', function(){
$("#incPerc").text(parseInt($(this).val())*1.08);
});
you might want to use a library to limit the input to digits only.
something like this: Limit Textfield Input to digits only
added the second input http://jsfiddle.net/5mB3Q/1/
and the round of two digits:
$("#val").on('keyup', function(){
var withPerc = parseFloat($(this).val())*1.08;
$("#incPerc").text(withPerc.toFixed(2));
$("#otherInput").val(withPerc.toFixed(2));
});
edit: ok, full code because of the comment:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-2.0.0.js" type="text/javascript"></script>
</head>
<body>
<form>
<input id="val">
<input id="otherInput">
</form>
<script type="text/javascript">
$(document).ready(function() {
$("#val").on('keyup', function(){
var withPerc = parseFloat($(this).val())*0.08;
$("#incPerc").text(withPerc.toFixed(2));
$("#otherInput").val(withPerc.toFixed(2));
});
});
</script>
</body>
</html>
You forgot the protocol when you linked the jQuery lib. (and doc.ready)
$('#output').text = (int)($('#input').text.Substring(0, $('#input').text.Length - 1)) * 1,08 + $('#input').text.Substring($('#input').text.Length - 1);
I have made a Language Translator but that translates hard coded strings in a html page using java script. I would to make it flexible by allowing user enter a string into a textbox/textarea and my app can then translate it for the user.
Any help would be appreciable :)
Heres my code: (please note to enter your own API key)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="http://www.google.com/jsapi?key=YOUR_API_KEY_HERE" type="text/javascript"></script>
<script type="text/javascript">
google.load("language", "1");
function initialize() {
var content = document.getElementById('content');
// Setting the text in the div.
content.innerHTML = '<div id="text">Hola, me alegro mucho de verte.<\/div><div id="translation"/>';
// Grabbing the text to translate
var text = document.getElementById("text").innerHTML;
// Translate from Spanish to English, and have the callback of the request
google.language.translate(text, 'es', 'en', function(result) {
var translated = document.getElementById("translation");
if (result.translation) {
translated.innerHTML = result.translation;
}
});
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="content">Loading...</div>
</body>
</html>
You can use the google translate api
You can make calls to the api and get a translated version. Refer this
Put this in html
<button type="button" onclick="initialize()">Translate</button>
And this in your initialize function if content is a textbox
content.value = "your translated text"
This will change your text in the same box
In the following code , I have a javascript function and I am tring to change the backgroundColor of the page to a color passed in as a parameter. But my code doesn't work, can anybody help me what is wrong in my code?
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Changing Color</title>
<head>
<style type="text/css">
body {
background-color:#ffcccc;
}
</style>
</head>
<body>
<form>
<label>color: <input type="text" name="color"> </label>
<input name="color" type = "button" onClick = "changecolor(color.value) " value = "color">
</form>
</body>
</html>
Javascript:
function changecolor(colour)
{
document.bgcolor=colour;
}
Assuming colour contains a valid CSS color descriptor, you can write:
document.body.style.backgroundColor = colour;
you have to put the function in a script block.
...
</form>
<script type="text/javascript>
//function declaration
</script>
Try this code it works finely man .i have just tried it.you can use it where-ever you want.also appended the code for onmouse click and onmouseover.
<html>
<head>
<script language="javaScript">
function change_background(color){
document.bgColor = color;
}
</script>
</head>
<body>
<form>
<label>color: <input type="text" name="color" >
</label>
<input name="clrs" type ="button" value="getcolor" onClick = "change_background(color.value) " >
</form>
ClickBlue
Mouseoverblack
Mouseover white
</body>
</html>`
This code attempts to dynamically switch the class of the StateContainer div from StateOne to StateTwo to alternate the visibility of the DIV.
When I run it, I always see the following both before and after clicking the button.
Visible first
Visible first
Visible first
Visible first
Would appreciate any suggestions for why this code does not work the way I'm expecting.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<style type="text/css">
.StateOne .InitiallyHidden { display: none; }
.StateTwo .InitiallyVisible { display: none; }
</style>
<script type="text/javascript">
$(document).ready(function()
{
$('.x').click(
var s = document.GetElementById('StateContainer');
s.className = (s.className == 'StateOne' ? 'StateTwo' : 'StateOne');
);
});
</script>
</head>
<body>
<button class="x">Change StateContainer</button>
<div class="StateOne" id="StateContainer">
<div class="InitiallyVisible">Visible first</div>
<div class="InitiallyHidden">Visible second</div>
<div class="InitiallyVisible">Visible first</div>
<div class="InitiallyHidden">Visible second</div>
<div class="InitiallyVisible">Visible first</div>
<div class="InitiallyHidden">Visible second</div>
<div class="InitiallyVisible">Visible first</div>
<div class="InitiallyHidden">Visible second</div>
</div>
</body>
</html>
It looks like you're not using the click event properly. You need to provide it with a function:
$('.x').click(function() {
var s = document.getElementById('StateContainer');
s.className = (s.className == 'StateOne' ? 'StateTwo' : 'StateOne');
});
Also, if you're already using jQuery, the following syntax is much shorter than document.getElementById (which doesn't have a capital G, by the way):
var s = $("#StateContainer")[0];
Steve