Have an issue with mouse pointer when choosing Dates and Times from calendar input fields.
Mouse pointer changes from arrow to round circle with bar through it.
Using the following calls
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script
src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"
integrity="sha256-eTyxS0rkjpLEo16uXTS0uVCS4815lc40K2iVpWDvdSY="
crossorigin="anonymous"></script>
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js">
<script src="https://www.website.com/01DatepickerTEST/DateTimeInsert.js"></script>
Can view at https://www.carltonparkandfly.com
Many Thanks
B.
In the HTML on the page of the site you provided the input elements have the readonly attribute. Remove that attribute and the styles that change the cursor to not-allowed won't apply.
e.g. instead of:
<input
type="text"
id="DropOffDate"
name="DropOffDate"
size="7"
maxlength="16"
style="text-align: center; white-space: pre; width: 90px;"
readonly
class="hasDatepicker"
>
Change it to the following (removing the readonly attribute):
<input
type="text"
id="DropOffDate"
name="DropOffDate"
size="7"
maxlength="16"
style="text-align: center; white-space: pre; width: 90px;"
class="hasDatepicker"
>
Related
I m having following code to convert image using html2canvas. It is working fine but the select tag icon (down arrow) is not coming when capture the image
<!DOCTYPE html>
<html>
<head>
<title>html2canvas</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<style>
button{
display:block;
height:20px;
margin-top:10px;
margin-bottom:10px;
}
.icon-diamond:before {
content: "\e943";
}
</style>
</head>
<body>
<div id="target">
<div style="position:relative;" class="noteclasscontainer" >
<span style="font-size: 60px;" class="glyphicon">
<span style="color:white;font-size: 21px; position: absolute; top: 16px;left:10px;">dd</span>
</span>
</div>
<div style="position:relative;" class="noteclasscontainer">
<select>
<option>1</option>
<option>1</option>
</select>
</div>
</div>
<button onclick="takeScreenShot()">to image</button>
<script>
window.takeScreenShot = function() {
html2canvas(document.getElementById("target"), {
onrendered: function (canvas) {
document.body.appendChild(canvas);
},
width:320,
height:220
});
}
</script>
</body>
</html>
Image is capturing correctly but only the select icon is not coming properly.how to fix this issue ?
This is part of browsers default CSS, everything is not accessible to html2canvas, and it should not be (possible leak of privacy info on some OS).
Maybe this exact one could be tweaked for chrome, since chrome does expose some of its shadow selectors, but I don't even know if it is in the list, and anyway, since non-standards these selectors could change at any time in the future, and here is how it looks like on my FF :
So the best for you, is to create the dropdown entirely from scratch. This way all UAs will show the same, and html2canvas will be able to "snapshot" it.
Iam using kendo-ui for implementing select tags.
The border is appearing very light as you can see in this but i want to increase the width of the border.
Below is my code my aim is to achieve to increase the size of the border.
$(document).ready(function() {
// create ComboBox from input HTML element
// create ComboBox from select HTML element
$("#size").kendoComboBox();
var select = $("#size").data("kendoComboBox");
});
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
<!doctype html>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
<div id="example" role="application">
<div id="tshirt-view" class="demo-section k-content">
<h4 style="margin-bottom: .5em;">T-shirt Size</h4>
<select id="size" placeholder="Select size..." style="width: 300px;">
<option />X-Small
<option />Small
<option />Medium
<option />Large
<option />X-Large
<option />2X-Large
</select>
</div>
</div>
The border is set on the wrappers with a class k-dropdown-wrap
You can therefore override the border width with:
.k-dropdown-wrap{
border-width: 3px !important;
}
Check this JSFiddle
You need to add just one CSS line:
.k-combobox {
border-width: 1px;
}
I have a input field with plus minus sign to raise/lower the number in it. Looks like this:
<a onclick="less()">-</a>
<input type="text" text-input">
<a onclick="more()">+</a>
How can I disable/prevent the select/highlight of the +/- text when I click to raise the numbers?
I'm looking for a solution that works cross browser. Thanks
Depending of what versions of browsers you have to support, you can try using css property user-select to none. Here you have an example of such implementation http://css-tricks.com/almanac/properties/u/user-select/
you can use css ::selection
::selection {
background: none;
}
::-moz-selection {
background: none;
}
::-webkit-selection {
background: none;
}
The best practice is to have <button> doing that.
Then both your highlight problem is solved and you write code in a better way.
(you can also change buttons with CSS so they look like you want)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
.linklike { color: blue; text-decoration:underline }
</style>
</head>
<body>
<button onclick="less()">-</button>
<input type="text">
<button onclick="more()">+</button>
<br>
<br>
OR<br
<br>
<br>
<span onclick="less()" class="linklike">-</span>
<input type="text">
<span onclick="more()" class="linklike">+</span>
</body>
</html>
Quick plnkr: http://plnkr.co/edit/u7dKekjLg6DpyUjz1a06?p=preview
I have situation where in my page one text field and a small icon(edit.png) is there. Initially text field is in readonly mode & when I click this edit.png it remove the attribute readonly from text field. It works fine but now I want to do this: When click on edit.png it should remove the attribute readonly from text field as well as the icon itself change to save.png icon. This is my code. Please suggest where should I change to achieve this.
<html>
<head>
<script language="JavaScript">
function removeAlignment(x){
var read=document.getElementById(x).removeAttribute("readonly",0);
if(document.getElementById("toogle").value==="OK")
{
document.getElementById("toogle").value="SAVE";
}
}
</script>
<style type="text/css">
a.table-actions-button {
width: 1.25em;
height: 1.25em;
display: inline-block;
background-position: center center;
}
.ic-table-edit { background-image: url("actions-edit.png"); }
</style>
</head>
<body>
<p>
<label for="email">Email</label>
<input type="text" name="email" id="email" value="abcd#dsa.com" readonly="readonly"/>
</p>
<input type="submit" id="toogle" value="OK" />
</body>
Where should I change? Please answer according to my Page.
Here's the edit.
if(document.getElementById("toogle").value==="OK")
{
document.getElementById("toogle").value="SAVE";
$('.ic-table-edit').css('background-image', 'url("actions-save.png")');
}
Make sure you have included j query plugin in your code.
With in the anchor tag,include <img> tag.
In toggle function,just change src attribute of your image to new image.
Find the example code below
<html>
<head>
<script>
function removeAlignment(x){
var read=document.getElementById(x).removeAttribute("readonly",0);
if(document.getElementById("toogle").value==="OK")
{
document.getElementById("toogle").value="SAVE";
$("#image").attr("src","actions-save.png");
}
}
</script>
<style type="text/css">
a.table-actions-button {
width: 1.25em;
height: 1.25em;
display: inline-block;
background-position: center center;
}
</style>
</head>
<body>
<p>
<label for="email">Email</label>
<input type="text" name="email" id="email" value="abcd#dsa.com" readonly="readonly"/>
<img src="actions-edit.png" id="image">
</p>
<input type="submit" id="toogle" value="OK" />
</body>
</html>
I'm trying to set the default focus on an input box when the page loads (example: google).
My page is very simple, yet I can't figure out how to do this.
This is what I've got so far:
<html>
<head>
<title>Password Protected Page</title>
<script type="text/javascript">
function FocusOnInput()
{
document.getElementById("PasswordInput").focus();
}
</script>
<style type="text/css" media="screen">
body, html {height: 100%; padding: 0px; margin: 0px;}
#outer {width: 100%; height: 100%; overflow: visible; padding: 0px; margin: 0px;}
#middle {vertical-align: middle}
#centered {width: 280px; margin-left: auto; margin-right: auto; text-align:center;}
</style>
</head>
<body onload="FocusOnInput()">
<table id="outer" cellpadding="0" cellspacing="0">
<tr><td id="middle">
<div id="centered">
<form action="verify.php" method="post">
<input type="password" name="PasswordInput"/>
</form>
</div>
</td></tr>
</table>
</body>
</html>
How come that doesn't work while this works fine?
<html>
<head>
<script type="text/javascript">
function FocusOnInput()
{
document.getElementById("InputID").focus();
}
</script>
</head>
<body onload="FocusOnInput()">
<form>
<input type="text" id="InputID">
</form>
</body>
</html>
Help is much appreciated :-)
And you can use HTML5's autofocus attribute (works in all current browsers except IE9 and below). Only call your script if it's IE9 or earlier, or an older version of other browsers.
<input type="text" name="fname" autofocus>
This line:
<input type="password" name="PasswordInput"/>
should have an id attribute, like so:
<input type="password" name="PasswordInput" id="PasswordInput"/>
This is one of the common issues with IE and fix for this is simple.
Add .focus() twice to the input.
Fix :-
function FocusOnInput() {
var element = document.getElementById('txtContactMobileNo');
element.focus();
setTimeout(function () { element.focus(); }, 1);
}
And call FocusOnInput() on $(document).ready(function () {.....};
You could also use:
<body onload="focusOnInput()">
<form name="passwordForm" action="verify.php" method="post">
<input name="passwordInput" type="password" />
</form>
</body>
And then in your JavaScript:
function focusOnInput() {
document.forms["passwordForm"]["passwordInput"].focus();
}