I use Webshim polyfill to guide a user step by step through parts of a form. A date input is hidden at page load style="display: none;". It's width is specified in percentage. Webshim sets the width of the input wrapper element (that is shown instead of the actual date input) at page load to a fixed width. It does not update the width of the wrapper element when it is shown $('#initiallyHidden').show();. But it updates the width if the user resizes the window. How can I trigger the update manually? Is it possible to trigger the update automatically on show?
webshim.activeLang('de');
webshims.setOptions('forms-ext', {
replaceUI: true
});
webshims.polyfill();
webshims.cfg.no$Switch = true;
$('#showHiddenInput').click(function () {
$('#initiallyHidden').show();
});
.full-width {
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webshim/1.15.10/dev/polyfiller.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<form action="">
<button id="showHiddenInput">show hidden input</button>
<div id="initiallyHidden" style="display: none;">
<input name="initiallyHidden" type="date" class="full-width" required>
<label for="initiallyHidden">Input was initially hidden and should have full width (100%)</label>
</div>
</form>
</body>
</html>
Related
I am using timepicker.js library to pick a time. On input click, timepicker should be shown next to input field. It works like expected if the input is in main view of document. If the input is situated lower (we need to scroll to see it) and we click it, the timepicker is shown more higher, in the main view page.
Expected behaviour:
Behaviour for inputs after scrolling lower:
I'd like to have timepicker next to input field in second case also, like in first case.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="text" id="time1" placeholder="Time" />
<div style="height: 70rem;"></div>
<input type="text" id="time2" placeholder="Time" value="18:00" />
<div style="height: 70rem;"></div>
</body>
<link
href="//cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.css"
rel="stylesheet"
/>
<script src="//cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.js"></script>
<script src="./index.js"></script>
</html>
index.js:
var time1 = document.getElementById("time1");
var time2 = document.getElementById("time2");
var timepicker = new TimePicker(["time1", "time2"], {
lang: "en"
});
timepicker.on("change", function(evt) {
var value = (evt.hour || "00") + ":" + (evt.minute || "00");
evt.element.value = value;
});
Looks like the style / css is setting position to absolute as opposed to relevant to the textbox control or area. I would load F12 dev tools and look into the CSS around the date picker to see if any classes or styles are being overwritten, namely around position values, or top / bottom etc...
I'm trying to grab an input value with javascript and render it into a div element. What do I do to make it work?
I'm using querySeclector to grab the input value. When I hardcode it like this:
document.getElementById("result").innerHTML = "Hello World";
It works but doesn't when I replace "Hello World" with the variable that stores the input value and when I do a console.log, I get nothing back even though there are no errors.
HTML
<body>
<div id="container">
<div id="values">
<input id="firstinput" type="text" placeholder="Enter 2 positive figures">
<button id="submit">Submit</button>
</div>
<div id="result"></div>
</div>
<script src="script.js"></script>
</body>
JAVASCRIPT
let submitButton = document.querySelector("#submit"),
showResult = document.getElementById("result").innerHTML,
weightsForLeftAndRightSides = document.querySelector("#firstinput").value;
submitButton.addEventListener("click", weightBalancer);
function weightBalancer() {
showResult = weightsForLeftAndRightSides;
console.log(weightsForLeftAndRightSides);
}
you need get input value inside weightBalancer when sumbit button clicked
function weightBalancer() {
var weightsForLeftAndRightSides = document.querySelector("#firstinput").value;
document.getElementById("result").innerHTML = weightsForLeftAndRightSides;
}
if i understood your question, you can write this code to put the user input in div tag:
<!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> Test</title>
<script >
/*to put the user input in div tag*/
function myFunction(){
const userInput=document.querySelector("#firstinput");
const output=document.querySelector("#result");
output.innerHTML=userInput.value;//this parte overwrite the first input
}
</script>
</head>
<body>
<body>
<div id="container">
<div id="values">
<input id="firstinput" type="text" placeholder="Enter 2 positive figures">
<button id="submit" onclick="myFunction()">Submit</button>
</div>
<div id="result"></div>
</div>
</body>
</html>
Hope this helps
First see this plunker
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div style="height:100px;width:100px; background-color:blue" draggable="true"></div>
<input disabled draggable="true"/>
<script>
</script>
</body>
</html>
In Chrome, both the blue square and the text input are draggable.
But in Safari, only the blue square is draggable. The input field does not work.
Is there a work around for Safari? I have tried wrapping the input with dives and making the div draggable and still does not work.
See this Forked Plunker for the functioning work around described below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script>
const selectInput = () => {
let target = document.getElementById('input');
target.className = "";
target.focus();
};
const disableInput = () => {
document.getElementById('input').className = "input-disabled";
};
</script>
<style>
.input-disabled {
pointer-events: none;
}
</style>
</head>
<body>
<h1>Hello Plunker!</h1>
<div style="height:100px;width:100px; background-color:blue" draggable="true"></div>
<div draggable="true" onmouseup="selectInput();">
<input id="input" class='input-disabled' onblur="disableInput();" />
</div>
</body>
</html>
The steps are:
Wrap the input in a draggable div
Disable mouse events on the input via the "pointer-events: none;" CSS property
Add an onmouseup callback to the div that selects the input, removes the "pointer-events: none;" CSS property, and assigns the input focus
Add an onblur callback to the input that re-adds the "pointer-events: none;" CSS property such that the div will be draggable again once the user leaves the input field
I am currently working in jsp. I need to get the value of input on text box while a buttton is clicked. My code is given below. While running it produces output which disappears in seconds. I need a stable output (text in textbox) when button is clicked.
<html>
<head>
<style type="text/css">
body {
background-color: #cccccc;
}
tab{ padding-left: 4em; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<form>
<title>Businesscard Management</title>
</head>
<body>
<br><br><br><br><br><br>
<h2> Search : <input type="text" class="textbox" size="75" id="myText" autofocus="true" name="searchinput"/></h2>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("myText").value="ertyu";
}
</script>
</body>
</html>
First of all you have some errors in your code markup. You have just one opened <form> tag inside of <head> tag. Also I noticed that you're trying to set styles for tab but this is not appropriate tag. And you forgot to close </html> tag. Be careful when writing code, better to use code indention for better reading and it could prevent plenty of errors.
regarding your code:
<html>
<head>
<style type="text/css">
body {
background-color: #cccccc;
}
tab {
padding-left: 4em;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Businesscard Management</title>
</head>
<body>
<br><br><br><br><br><br>
<form action="/">
<h2> Search : <input type="text" class="textbox" size="75" id="myText" autofocus="true" name="searchinput"/></h2>
<input type="button" onclick="myFunction()" value="Try it"/>
<p id="demo"></p>
</form>
<script>
function myFunction() {
document.getElementById("myText").value = "ertyu";
}
</script>
</body>
</html>
I've move <form> tag to it desired position. And replaced <button> with <input type="button"> to prevent form submitting. So regarding your code when you press Try it button you will assign "ertyu" text to the input value. And if you want to get value of it, just use document.getElementById("myText").value
Why could the same action when turned into a function stop working? are there any general rules? here is a very concrete and clear example of this issue.
jQuery Mobile, http://jsbin.com/osovoh/2/edit
in this version, js works well. the label of radio button gets changed instantly.
var radio_elem = $('#edit-new-amount-no-cost');
$("label[for='edit-new-amount-no-cost']").html(radio_elem).append("label changed");
but if you remove the /* s and thus turn the same action into a function triggered by the other button,
function go() {
var radio_elem = $('#edit-new-amount-no-cost');
$("label[for='edit-new-amount-no-cost']").html(radio_elem).append("label changed");
}
the the same code messes formatting of the destination. what's wrong?
If it is inside of the function, the markup change happens AFTER jQuery Mobile renders the page. You'll have to cause jQuery Mobile to re-render the page or element you are modifying.
here is the answer:
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="WORKING: replace text in radiobutton" />
<meta charset=utf-8 />
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body style="text-align:center">
<div class="form-radios">
<div class="form-item" id="edit-new-amount-no-cost-wrapper">
<label class="option" for="edit-new-amount-no-cost" >
<input type="radio" id="edit-new-amount-no-cost" name="new_amount" value="no_cost" class="form-radio"/>
original label
</label>
</div>
</div>
<input name="click to change the label" type="button" onClick="go()">
<script>
function go(){
$("label[for='edit-new-amount-no-cost'] .ui-btn-text").html("label changed");
}
</script>
</body>
</html>