I wish to make an input element look just like an anchor link. Furthermore, it should look like a link where the x-editable plugin is applied to it. My attempt is displayed below. My difficulty is the underline extends past the text, and the text width is not always the same. Ideally, the input width would always be the width of the text (JavaScript solutions are okay). I also have problems with the before/after clicked color, but suppose I could just eliminate this from the other links on the page.
.inputLink {
border: none;
outline: none;
background-color: transparent;
font-family: inherit;
font-size: inherit;
cursor: pointer;
color:#0000ff;
border-bottom: 1px dashed #0088cc;
text-decoration: none;
/* width:75px; */
}
Why am I doing this?
I need jQuery datepicker (actually timepicker) to be initiated by clicking the current date. I've seen several solutions, but believe my solution posted below (and also at http://jsbin.com/tadaqomure/1/) is cleaner provided I can figure out the input CSS. If you feel I should be doing differently, please provide a comment.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing</title>
<style type="text/css">
.inputLink {
border: none;
outline: none;
background-color: transparent;
font-family: inherit;
font-size: inherit;
cursor: pointer;
color:#0000ff;
border-bottom: 1px dashed #0088cc;
text-decoration: none;
/* width:75px; */
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.min.js" type="text/javascript"></script>
<link href= "https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.css" rel="stylesheet">
<link href= "https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/jqueryui-editable/css/jqueryui-editable.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/jqueryui-editable/js/jqueryui-editable.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#text').editable();
$("#datetime").datetimepicker();
});
</script>
</head>
<body>
<div>
<span>Normal Link:</span>
test
</div>
<div>
<span>Datetime Fake Link:</span>
<input class="inputLink" id="datetime" type="text" readonly value="1/05/1984" />
</div>
</body>
</html>
Related
I can't figure out how I can save some text in a div which has 'ContentEditable="true"'set?
Basically, I am very naive at coding HTML and CSS and JS is way out of my league. However, I have managed to make some sort of a day planner for myself using HTML and CSS.
The problem is that, I don't know how to make the text that I put into a div in HTML (with contenteditable set to true) to remain and appear the next time I turn on the html file on a browser.
I am going to use my application only in localhost and don't want to use any sort of database.
Looking forward to you guys' expertise and kind help.
Required information is given below--
.quote
{
width: 92%;
height: 48vh;
margin: 2% auto auto auto;
background-color: beige;
border-style: solid;
border-width: 12px;
border-color: aqua;
display: grid;
grid-template-rows: 12% auto;
}
.quote .p
{
height: 100%;
margin:0 auto auto 12px;
font-family: 'Montserrat', sans-serif;
font-size: 12vh;
background-image: linear-gradient(180deg, rgba(26,18,189,1) 51%, rgba(43,181,131,1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.quote .p p
{
height: 100%;
width: 100%;
margin:0;
}
.quote .writetext
{
min-height: 8vmax;
max-height: 19vmax;
width: 25.6vmax;
margin: 12px auto 12px auto;
border-style: solid;
border-width: 2px;
border-color: white;
font-family: 'Patrick Hand', cursive;
font-size: 4vh;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DayMaker- Welcome</title>
<link rel="stylesheet" href="styles.css">
<script src="scripts.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#-1,600&display=swap" rel="stylesheet">
</head>
<body>
<div class="quote">
<div class="p"><p>"</p></div>
<div class="writetext" contenteditable="true">
</div>
</div>
</body>
</html>
NOTE: The given code snippets are part of a larger project. So, please ignore the graphical discrepancies.
This is a pic of the project I'm working on:-WE need to fix that box at bottom right
I tried to search for solution a lot on the web but couldn't find any.
Sincerely looking forward to your help.
You need a database there is no way I know of to do it without the data base if you are having trouble with SQL you can use excel otherwise I do not have a solution except use a database
Will this work? It uses a textarea element instead of div with conteneditable=true. Since you don't have a database it stores the text in localstorage and retrieves from it on page reload.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DayMaker- Welcome</title>
<link rel="stylesheet" href="styles.css">
<script src="scripts.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#-1,600&display=swap" rel="stylesheet">
<style>
#writetext {
resize: none;
background-color: inherit;
}
</style>
</head>
<body>
<div class="quote">
<div class="p">
<p>"</p>
</div>
<textarea id="writetext" class="writetext"></textarea>
</div>
<script>
const textarea = document.querySelector('#writetext');
textarea.value = localStorage.getItem('writetext');
textarea.addEventListener('change', () => {
localStorage.setItem('writetext', textarea.value);
})
</script>
</body>
</html>
Since there is no submit button you will have to lose focus from the textarea to save the text.
I'm trying to create a text(S) inside a rectangular box and the other one(Fox.) outside the box,
Just like this:
I tried to create it but something is wrong
Here's the code:
div {
width: 18px;
height: 72px;
padding: 10px;
border: 5px solid black;
margin: 0;
}
<html>
<head>
</head>
<body>
<div><h1>S</h1></div><p><h1>Fox.</h1>
</body>
</html>
Fixed it for you.
The problem was that you used 2 h1 next to each other.
Each h1 will automatically go to a new line.
I fixed it by using only one h1 and added a <block> where you can add the styles.
block {
width: 18px;
height: 72px;
padding: 10px;
border: 5px solid black;
margin: 0;
}
<html>
<head>
</head>
<body>
<h1>
<block>S</block> Fox.
</h1>
</body>
</html>
the basic idea is not bad! Now I will show you a solution to your problem and we will analyze all the components together.
Let's think about the structure of DIV. First you will need two divs with a reference class or reference ID and you want them to be arranged side by side.
To put them side by side you could create an additional parent div, of flexible type (called father).
We also need 2 texts. In this example I will use simple spans.
We also create a style.css file where we will store the style of our containers
So we can write this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Link your stylesheet -->
<link rel="stylesheet" href="style.css">
<title>Title</title>
<div id="father">
<div id="sonOne"><span>S</span></div>
<div id="sonTwo"><span class="fox">FOX.</span></div>
</div>
</head>
<body>
</body>
</html>
For the style instead, we need to assign the parent a flexible orientation and line type. For the style, on the other hand, we need to assign a flexible, row-type orientation to the parent. To the first div should be put the border and to the second div, the text inside should be bold
Create style.css and try all togheter. Run this!!!
#sonTwo,#sonOne {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#sonTwo,#sonOne span {
font-size: 50px;
}
#father {
display: flex;
flex-direction: row;
}
#sonOne {
border: 2px solid black;
border-radius: 5px;
padding: 5px;
}
#sonTwo {
padding: 5px;
}
.fox {
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Link your stylesheet -->
<link rel="stylesheet" href="style.css">
<title>Title</title>
<div id="father">
<div id="sonOne"><span>S</span></div>
<div id="sonTwo"><span class="fox">FOX.</span></div>
</div>
</head>
<body>
</body>
</html>
For the S on the other hand, you could assign a font from Google Fonts that we have the borders the way you like them
I'm currently trying to create a spelling quiz as part of a project website using HTML, CSS and JScript.
The concept is: the user is shown a word with two letters missing (shown by the underscores). They then select which answer is right (the three button options) and an alert message should come back on the window to say if they are correct or incorrect.
My idea behind the code I wrote so far was to have an event listener on the button that when clicked would trigger the alert either saying correct or incorrect if I have programmed it to be so.
My code isn't working, could anyone help me?
var aChoice = document.getElementById("S1");
aChoice.addEventLister("Click", C1)
function C1 ()
{
alert("Correct");
}
#QuizBod {
background-color: #ffff80;
}
#QTitle {
text-align: center;
font-family: 'Langar', cursive;
font-weight: bold;
font-size: 30pt;
color: black;
text-decoration: underline;
text-decoration-color: #FFBF00;
}
#S1 {
background-color: white;
color: black;
font-size: 25pt;
font-family: 'Langar', cursive;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
display: inline;
margin-left: auto;
margin-right: auto;
padding-top: 5px;
padding-bottom: 5px;
}
<!DOCTYPE html>
<html lang="en">
<!--Mobile Compatibility-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Style Sheet, Google Font Link, Page Title-->
<head>
<link rel="stylesheet" type="text/css" href="Site.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Langar&display=swap" rel="stylesheet">
<title>Spelling Test</title>
</head>
<body id="QuizBod">
<h2 id="QTitle">Spelling Quiz</h2>
<p id="MQ1">C h _ _ r</p>
<label class ="Albl">Answer:
<button id="S1">a i</button>
<button id="S1">i a</button>
<button id="S1">e i</button>
</label>
<script src="SpellTest.js"></script>
</body>
</html>
(More code I was intending to write on Javascript here for logic purposes.)
var bChoice = document.getElementById("S2");
bChoice.addEventLister("Click", C2)
function C2 ()
{
alert("Incorrect");
}
var cChoice = document.getElementById("S3");
cChoice.addEventLister("Click", C2)
function C2 ()
{
alert("Incorrect");
}
1.You cannot have more than one id="S1"! Since the id attribute is unique for the entire html document. In your case, it is better to use the class. Since there may be more buttons with answer options, like this:
<label class="Albl">Answer:
<button class="btn">a i</button>
<button class="btn">i a</button>
<button class="btn">e i</button>
</label>
2.Now on js ... I corrected your code. Also, you need to change the method of accessing elements (buttons). Like this:
var aChoice = document.querySelector(".btn");
3.Now everything is ready, but not completely! You need the logic for determining the correctness of the choice of the option by buttons.
var aChoice = document.querySelectorAll(".btn");
aChoice.forEach(function(aChoice_current, index) {
aChoice_current.addEventListener('click', function(){
if (index == 0) {
console.log('The answer is correct! :)');
} else {
console.log('The answer is not correct! :(');
}
})
})
#QuizBod {
background-color: #ffff80;
}
#QTitle {
text-align: center;
font-family: 'Langar', cursive;
font-weight: bold;
font-size: 30pt;
color: black;
text-decoration: underline;
text-decoration-color: #FFBF00;
}
.btn {
background-color: white;
color: black;
font-size: 25pt;
font-family: 'Langar', cursive;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
display: inline;
margin-left: auto;
margin-right: auto;
padding-top: 5px;
padding-bottom: 5px;
}
<!DOCTYPE html>
<html lang="en">
<!--Mobile Compatibility-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Style Sheet, Google Font Link, Page Title-->
<head>
<link rel="stylesheet" type="text/css" href="Site.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Langar&display=swap" rel="stylesheet">
<title>Spelling Test</title>
</head>
<body id="QuizBod">
<h2 id="QTitle">Spelling Quiz</h2>
<p id="MQ1">C h _ _ r</p>
<label class="Albl">Answer:
<button class="btn">a i</button>
<button class="btn">i a</button>
<button class="btn">e i</button>
</label>
<script src="SpellTest.js"></script>
</body>
</html>
I am making a Tizen web app and want to use jQuery mobile's "taphold" listener.
I downloaded the latest .js from the jQuery mobile site, but when I try to include it, it doesn't work.
Am I meant to use it with jQuery or by itself? both product errors.
Without including jQuery I get the error:
js/jquery.mobile-1.4.2.min.js (26) :TypeError: 'undefined' is not an object (evaluating '$.mobile = {}')"
But if I do include jQuery when going to that page the screen is completely black and I can not do anything.
You should post your code. JQuery Mobile works with Tizen, you can even add it to project from IDE.
Below is index.html for TizenWeb version of JQuery tutorial on taphold event. All is working. You can use it as template for your solution.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="A single-page template generated by Tizen Web IDE"/>
<title>Tizen Web IDE - Tizen - jQuery Mobile - tapHold listener</title>
<link rel="stylesheet" href="./css/jquery.mobile-1.2.0.css"/>
<script type="text/javascript" src="./js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.2.0.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
<link rel="stylesheet" href="./css/style.css" />
<style>
<!--
based on http://api.jquerymobile.com/taphold/
-->
html, body { padding: 0; margin: 0; }
html, .ui-mobile, .ui-mobile body {
height: 85px;
}
.ui-mobile, .ui-mobile .ui-page {
min-height: 85px;
}
#nav {
font-size: 200%;
width:17.1875em;
margin:17px auto 0 auto;
}
#nav a {
color: #777;
border: 2px solid #777;
background-color: #ccc;
padding: 0.2em 0.6em;
text-decoration: none;
float: left;
margin-right: 0.3em;
}
#nav a:hover {
color: #999;
border-color: #999;
background: #eee;
}
#nav a.selected,
#nav a.selected:hover {
color: #0a0;
border-color: #0a0;
background: #afa;
}
div.box {
width: 3em;
height: 3em;
background-color: #108040;
}
div.box.taphold {
background-color: #7ACEF4;
}
</style>
</head>
<body>
<!--
based on http://api.jquerymobile.com/taphold/
-->
<div data-role="page" >
<div data-role="header" data-position="fixed" >
<h1>Single-Page Application </h1>
</div><!-- /header -->
<div data-role="content" >
<p>This is a single page boilerplate template that you can copy to build your first jQuery Mobile page.</p>
<h3>Long press the square for 750 milliseconds to see the above code applied:</h3>
<div class="box"></div>
<script>
$(function(){
$( "div.box" ).bind( "taphold", tapholdHandler );
function tapholdHandler( event ) {
$( event.target ).addClass( "taphold" );
}
});
</script>
</div><!-- /page -->
</body>
</html>
'm currently working on a project, there are two options and I am wanting to have a pointing finger image rather than the standard radio button, as well as this I was wondering if it would be possible to only show the radio image for the one that is selected only.
I have tried using a js library but can't seem to get it to work
Current code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.screwdefaultbuttonsV2.min.js" ></script>
<script type="text/javascript">
$('input:radio').screwDefaultButtons({
image: "url(images/hand.png)",
width: 39,
height: 17
});
</script>
</head>
<body>
<div id="content">
<label for="LiquoriceandPeppermint" class="check">Liquorice and Peppermint<input type="radio" name="flavour" id="LiquoriceandPeppermint" value="option1" /></label><br>
<label for="RooibusCremeCaramel " class="check">Rooibus Crème Caramel <input type="radio" name="flavour" id="RooibusCremeCaramel " value="option2" /></label>
</div>
</body>
</html>
Thanks
Radio buttons are rendered by the OS, not the browser. Styling them has always been limited and non standardized across browsers. You're better off trying to style the label to accomplish what you want.
try css:
input[type='radio']:checked {
background: url("images/hand.png") center center no-repeat;
opacity: 0;
}
This can create completly custom radio buttons. Even different icons...
input[type="radio"] {
display:none;
vertical-align: middle;
}
input[type="radio"] + label {
display:inline;
font-size: 18px;
}
input[type="radio"] + label:before {
content: '';
display:inline-block;
width: 25px;
height: 25px;
border: 2px solid black;
}
input[type="radio"][class="customRadio"] + label:before {
background: url('../icons/bc.png') no-repeat;
}
input[type="radio"][class="customRadio"]:checked + label:before {
background: url('../icons/bc1.png') no-repeat;
}