'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;
}
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've used a javaScript function to "build" a widget, call it on an HTML page and make it responsive using CSS.
Now, I've to use that same widget on an mvc.net application and i can't make it work like i want it. In the image shown bellow "aluger","venda", "compra" and "permuta" all show up in the same line, and I want them to show up on different lines. I've used display:block and nothing happend.
Those options are loaded automatic.
Can some one please help me?
CSS of DIV:
#div_maior {
display:block;
width: 100%;
height: 100%;
background-color: #ffffcc;
clear: both;
min-height: 50px;
max-height: 200px;
}
#div_global {
clear:left;
display:block;
float:left;
padding: .5%;
border-color: transparent;
height: 100%;
width: 30%;
// overflow: auto;
}
HTML OF THE WIDGET:
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="javascript.js"></script>
<link rel="stylesheet" type="text/css" href="estilos.css"/>
</head>
<body id="body" onload="getFacetasAJAX()">
<label id="div_maior">
<label id="div_global" style="display: inline-block">
</label>
<label id="div_resultados" style="display: inline-block">
</label>
</label>
</body>
</html>
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>
How does facebook vertically align its photos? I inspected their img tag and its parent. The parent doesn't use padding and the img doesn't use margins. There is vertical-align, but I don't think it applies in this case(see Image not vertical-align:middle). I normally vertically align using margins (and sometimes with javascript) so I'm interested in how facebook does it without padding or margins. Does anyone know how they do it?
After doing some research in facebook's website i found the answer,here is the code
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.img_contain {
height: 700px;
text-align: center;
line-height: 700px;
border: #333333 1px solid;
}
.img_contain img {
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="img_contain">
<img src="images/image.jpg" />
</div>
</body>
</html>
Only thing i was missing is adding <!DOCTYPE html> at the top of the document.Now its working.
And one more thing the height and line-height of the parent should be equal and it should be greater than height of the image it contains
TESTED CODE using display: table-cell
*refer to http://www.w3schools.com/cssref/pr_class_display.asp*
test page at http://anotherfeed.com/stack/css/valign.php
<!DOCTYPE html>
<html>
<head>
<title>StackOverflow on Another Feed</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<div style="height: 500px; min-height: 500px; width: 500px; border: 1px solid; display: table-cell; vertical-align: middle; text-align: center">
<img src="http://anotherfeed.com/facebook_icon.png" style="display: inline-block; margin-left: auto; margin-right: auto;" />
</div>
</body>
</html>