Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed yesterday.
This post was edited and submitted for review 23 hours ago.
Improve this question
I need help with the following. I need the information to be displayed when I click the button, it is currently doing so through classes.
How can I make the function run when the button is clicked?
function mostrarProvincia(provincia) {
console.log(provincia.value);
if (provincia.value == 1) {
document.getElementById('lima').classList.remove('d-none');
} else {
document.getElementByid('lima').classList.add('d-none');
};};
.d-none {
display: none;
}
<div class="alinear_dropdown">
<select id="provincia" onchange="mostrarProvincia(this)">
<option value="0 selected"> Selecciona tu Provincia ...</option>
<option value="1">LIMA</option>
</select>
<button style="padding: 20px 32px;
width: 18rem;background-color:#DC241F;color: #FFFFFF;">BUSCAR</button>
<div id="lima" class="d-none">
<div style="background-color:#F1F1F1; border-radius: 1rem;">
<h3 style="padding: 25px 10px 0px 20px;">Automotores Yoshival Huaraz</h3>
<a href="https://goo.gl/maps/hFrzeSaDVmXfNQiv8">
<p style="padding: 0px 10px 0px 20px;">Av. Monterrey S/N (Carretera Huaraz Monterrey). </p>
</a>
<div style="display: flex;align-items: center;padding: 0px 10px 0px 20px;">
<p>+56 9 9711 8500</p>
<a href="tel:+56 9 9711 8500" style="padding-left: 20px;
padding-right: 20px;color:#DC241F;font-weight: 900;">Llamar</a>
</div>
<div style="display: flex;align-items: center;padding: 0px 10px 0px 20px;">
<p>+56 9 9711 8500</p>
<a href="tel:+56 9 9711 8500" style="padding-left: 20px;
padding-right: 20px;color:#DC241F;font-weight: 900;">Llamar</a>
</div>
</div>
</div>
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
im creating a calculator with html,css and js.
now i have a problem in html and css.
my calculator has a section for a paragraph that displays users entered number and operators. the problem is here: when user enters a lot of number, p will go out of calculator but it should go to new line! you can see what i mean in this link
here is the important part of html and css code:
.container div {
font-size: x-large;
border: 1px solid rgba( 255, 255, 255, 0.60);
border-radius: 5px;
user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
cursor: pointer;
transition: 0.30s;
}
.container div:not(.result):hover {
background: rgba( 255, 255, 255, 0.70);
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37);
backdrop-filter: blur( 3.5px);
-webkit-backdrop-filter: blur( 3.5px);
}
.result {
grid-area: 1 / 1 / 3 / 6;
}
.result p {
height: 100%;
width: 100%;
padding: 10px;
}
<section class="container">
<div class="div1 result"><p class="show"></p></div>
<div class="div2"><p>+/-</p></div>
<div class="div3 number"><p>1</p></div>
<div class="div4 number"><p>4</p></div>
<div class="div5 number"><p>7</p></div>
<div class="div6 clean"><p>C</p></div>
<div class="div7"><p>( )</p></div>
<div class="div8 number"><p>8</p></div>
<div class="div9 number"><p>5</p></div>
<div class="div10 number"><p>2</p></div>
<div class="div11 number"><p>0</p></div>
<div class="div12"><p>%</p></div>
<div class="div13 number"><p>9</p></div>
<div class="div14 number"><p>6</p></div>
<div class="div15 number"><p>3</p></div>
<div class="div16"><p>.</p></div>
<div class="div17"><p>÷</p></div>
<div class="div18"><p>×</p></div>
<div class="div19"><p>_</p></div>
<div class="div20"><p>+</p></div>
<div class="div21"><p>=</p></div>
</section>
thanks for helping
try using this
When the text overflows in width use ---> word-break: break-word; to break up the text(or numbers in this case)
you can also add height: fit-content; to ajust the height of the div to your text or numbers
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I was trying to create a white box like the example, that shows information when i click on a button (Web Development, Software engineering, System Administration).
I would like to have a tip for this with CSS, also, do i need a JavaScript for that?
Example
like this?
.box{
margin:40px;
position: relative;
box-shadow: 0 0 30px rgba(0,0,0,0.4);
padding: 30px;
}
.box:before{
content: "";
position:absolute;
top: -30px;
left: 50px;
border: 15px solid transparent;
border-bottom-color: white;
}
<div class="box">
Some content about development
</div>
I think:
.container p {
text-align: center;
vertical-align: center;
color: #fff;
font-family: sans-serif;
border-radius: 10px;
background-color: #FF2000;
width: 200px;
height: 110px;
padding-top: 90px;
}
<div class="container">
<p>Your Text</p>
</div>
Hope this is helpful. Details can be edited on .css.
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h2>W3.CSS Modal</h2>
<button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Open Modal</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>Some text. Some text. Some text.</p>
<p>Some text. Some text. Some text.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Link to test here
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have 6 different input-fields and I want to do so you have to fill in all of them, else a alert message will pop-up. Any tips on how to do this?
I also have problems with option for different font-styles. When you click on the different options for the font-style, the text that you wrote in the input-filed should change and also the text infront "förtag" and so on.
This is my code:
function SkrivUt() {
var el = document.getElementById('f');
el.style.color = document.getElementById('textColor').value;
el.style.fontStyle = document.getElementById('selectedFont').value;
el.style.backgroundColor = document.getElementById('backGroundColour').value;
$("#area1").html($("#foretagText").val());
$("#area2").html($("#efternamnText").val());
$("#area3").html($("#fornamnNamnText").val());
$("#area4").html($("#titleText").val());
$("#area5").html($("#telefonText").val());
$("#area6").html($("#epostText").val());
$("#visitkort").hide();
$("#visitkortsDemo").show();
}
function reset() {
document.getElementById('foretagText').value = "";
document.getElementById('efternamnText').value = "";
document.getElementById('fornamnNamnText').value = "";
document.getElementById('titleText').value = "";
document.getElementById('telefonText').value = "";
document.getElementById('epostText').value = "";
}
.form-style-3 {
max-width: 400px;
max-height 400px;
font-family: "Comic Sans MS", cursive, sans-serif;
}
.form-style-3 label {
display: block;
margin-bottom: 10px;
}
.form-style-3 label span {
float: left;
width: 150px;
font-weight: bold;
font-size: 13px;
text-shadow: 1px 1px 1px #fff;
}
.form-style-3 fieldset {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
margin: 0px 0px 10px 0px;
border: 1px solid #FFD2D2;
padding: 20px;
background: lightblue;
box-shadow: inset 0px 0px 15px #FFE5E5;
-moz-box-shadow: inset 0px 0px 15px #FFE5E5;
-webkit-box-shadow: inset 0px 0px 15px #FFE5E5;
}
/*Format legent inom ett fieldset*/
.form-style-3 fieldset legend {
color: #FFA0C9;
border-top: 1px solid #FFD2D2;
border-left: 1px solid #FFD2D2;
border-right: 1px solid #FFD2D2;
border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
background: #FFF4F4;
padding: 0px 8px 3px 8px;
box-shadow: -0px -1px 2px #F1F1F1;
-moz-box-shadow: -0px -1px 2px #F1F1F1;
-webkit-box-shadow: -0px -1px 2px #F1F1F1;
font-weight: normal;
font-size: 12px;
}
.select-field {
background: gray;
color: white;
border-radius: 5px 5px 5px 5px;
}
.input-field {
font-family: "Comic Sans MS", cursive, sans-serif;
color: red
}
<!DOCTYPE html>
<html>
<head>
<title>Visitkort</title>
<link rel='stylesheet' type='text/css' href='Style.css' />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="form-style-3">
<div id="visitkort" style='display:block'>
<fieldset>
<legend>Visitkort</legend>
<label><span>Företaget</span>
<input type="text" id="foretagText" />
</label>
<label><span>Efternamn </span>
<input type="text" id="efternamnText" />
</label>
<label><span>Förnamn </span>
<input type="text" id="fornamnNamnText" />
</label>
<label><span>Titel </span>
<input type="text" id="titleText" />
</label>
<label><span>Telefon </span>
<input type="text" id="telefonText" />
</label>
<label><span>Epost </span>
<input type="text" id="epostText" />
</label>
<label>
<span>Välj bakgrundsfärg</span>
<select class="select-field" id="backGroundColour">
<option value="RoyalBlue">Blå</option>
<option value="Yellow">gul</option>
<option value="Crimson">Röd</option>
</select>
</label>
<label>
<span>Välj Textfärg</span>
<select class="select-field" id="textColor">
<option value="RoyalBlue">Blå</option>
<option value="Yellow">Gul</option>
<option value="Crimson">röd</option>
</select>
</label>
<label>
<span>Välj typsnitt</span>
<select class="select-field" id="selectedFont">
<option value="Verdana">Verdana</option>
<option value="Ariel">Ariel</option>
<option value="Impact">Impact</option>
<option value="Tahoma">Tahoma</option>
</select>
</label>
<label><span><button type="button" onclick="reset()">Nollställ</button></span><span><button type="button" onclick="SkrivUt()">Skriv ut</button></span>
</label>
</fieldset>
</div>
<div id="visitkortsDemo" style='display:none'>
<fieldset id="f">
<legend>Förgranskning av visitkort</legend>
n>Företaget </span>
<p id="area1"></p>
</label>
<label><span>Efternamn </span>
<p id="area2"></p>
</label>
<label><span>Förnamn </span>
<p id="area3"></p>
</label>
<label><span>Titel </span>
<p id="area4"></p>
</label>
<label><span>Telefon </span>
<p id="area5"></p>
</label>
<label><span>Epost </span>
<p id="area6"></p>
</label>
</fieldset>
</div>
</div>
</body>
</html>
A simple and quick way would be to use HTML5's required attribute!
Example:
<input type="text" id="foretagText" required />
This will produce browser alerts, when an input field is empty. No need for difficult custom Javascript.
You haven't tried much, so im not just going to give answer, but here is an idea, in raw javascript. You will want a better way of collecting the input Ids obviously, thats up to you.
<script>
var inputs = ["inputid1", "inputid2", "inputid3"];
var notFilled = "";
for (var i in inputs){
element = document.getElementById(i);
if(element.value==""){
notFilled = i;
break;
}
}
if(notFilled!=""){
alert("you must fill" + notFilled);
}
</script>
// create your err array
var err = [];
//test if values are a blank string
if($("#foretagText").val() === ""){
//add the error message to your error array
err.push("Foretag not entered");
}
// be sure you only have if statements and they aren't nested like this
if($("#idOfNextValue").val() === ""){
//add the error message to your error array
err.push("Foretag not entered");
}
//alert all messages in your error array.
alert (err.length + " Errors:<br>" +err.join("<br>"));//join
In HTML5 you can use required attribute as follow;
<input type="text" required>
Or in jQuery:
Let's say HTML:
<input type="text" id="input-1">
<input type="text" id="input-2">
<input type="text" id="input-3">
<input type="text" id="input-4">
and so on..
Now jQuery
if($("[id^=input]").val()=="")
{
alert("error");
return;
}
HTML way : Use required attribute
<input type="text" id="somename" required>
Javascript way:
if ($('#foretagText').val() == '' || $('#efternamnText').val() != ' ...) {
alert("Fields empty");
}
For your first question. To require the user to select a value in a select you have to add the atributte required like this
<select class="select-field" id="backGroundColour" required>
<option value="RoyalBlue">Blå</option>
<option value="Yellow">gul</option>
<option value="Crimson">Röd</option>
</select></label>
For your second question I'm not completely sure about this but I think that the problem resides in that you are trying to change the label style directly without change the associated css.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I have hidden div and there is some content when div is been displayed the content should displayed in horizontally not vertically ?
the div will be displayed when i click on button.
<div class = "firstHidden">
<h4> Account No </h4>
<h5> 123456789 </h5>
<h4> Service Address </h4>
<h5> 49, Rampasture Raod, Hampton</h5>
<h4> Amount Due </h4>
<h5> payment Date : 09/12/2015 </h5>
</div>
try this css
.firstHidden h4, .firstHidden h5{
float:left;
padding-right:10px;
}
Try the following in your CSS: Adjust the div's width to your requirement.
div {
border: 1px solid black;
width: 70px;
overflow: hidden;
white-space: nowrap;
}
You can use this css class
.toCenterHorizontally{
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I want that when I click on one of the circle it shows the next row of circles. But can only have on with is-selected class. This is the code I have:
<table>
<tr>
<td>
<div style="position: relative;" class="can-select1">
<img src="http://lkimg.zamimg.com/images/guides/ability-marker.png" style="vertical-align: middle;" class="can-select">
<div class="can-select-text">1</div>
</div>
</td>
<td>
<div style="position: relative;" class="nothing1" id="tier1">
<img src="http://lkimg.zamimg.com/images/guides/ability-marker.png" style="vertical-align: middle;" class="nothing">
<div class="can-select-text">2</div>
</div>
</td>
</tr>
<tr>
<td>
<div style="position: relative;" class="can-select1">
<img src="http://lkimg.zamimg.com/images/guides/ability-marker.png" style="vertical-align: middle;" class="can-select">
<div class="can-select-text">1</div>
</div>
</td>
<td>
<div style="position: relative;" class="nothing1" id="tier1">
<img src="http://lkimg.zamimg.com/images/guides/ability-marker.png" style="vertical-align: middle;" class="nothing">
<div class="can-select-text">2</div>
</div>
</td>
</tr>
</table>
Javascript:
$('.can-select1').click(function(e){
$(this).addClass("is-selected");
$(this).find('.can-select').addClass("is-selected");
$(this).children('.can-select-text').addClass("is-selected");
});
CSS:
.can-select1 {
cursor:pointer;
opacity:0.4;
}
.can-select-text{
opacity: 0;
position: absolute;
top: 0;
left: 0;
text-align: center;
width: 32px;
font: bold 13px/32px 'Trebuchet Ms';
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); color: #111;
}
.is-selected {
cursor:default;
opacity:1.0;
}
.nothing1{
cursor:default;
opacity:0;
}
JS fiddle: http://jsfiddle.net/p3Q7Z/7/
It's hard to tell what you actually want but this should help:
http://jsfiddle.net/p3Q7Z/8/
First, ids must be unique. I removed them.
Next, I added the line:
$(this).closest('td').next('td').find('.nothing1').removeClass('nothing1').addClass('can-select1');
This traverses from the button, up to the parent td, to the next sibling td, looks for its .nothing1 button, and makes it clickable.
Also, I changed the click handler line to:
$('table').on('click','.can-select1',function(e){
So the handler will apply when classes are added and removed. As you had it, the handler will only apply to the elements that existed when the page loaded for the first time.
edit
To modify all next td in the column:
$(this).closest('td').nextAll('td').each(function() {
$(this).find('.nothing1').removeClass('nothing1').addClass('can-select1');
});
edit after chat, here's a re-write
http://jsfiddle.net/p3Q7Z/12
Use radio buttons and labels:
<td class="column-0 selectable">
<input type="radio" name="column-0" id="column-0-row-0">
<label for="column-0-row-0">
<img src="http://lkimg.zamimg.com/images/guides/ability-marker.png">
<div>1</div>
</label>
</td>
Do all the styling in css without names:
td input[type="radio"] {
display: none;
}
td input[type="radio"] + label {
display:none;
cursor:default;
opacity:0;
position: relative;
}
td input[type="radio"] + label img {
vertical-align: middle;
}
td input[type="radio"] + label div {
position: absolute;
top: 0;
left: 0;
text-align: center;
width: 32px;
font: bold 13px/32px'Trebuchet Ms';
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
color: #111;
}
td.selectable input[type="radio"] + label {
display:block;
cursor:pointer;
opacity:0.4;
}
td.selectable input[type="radio"]:checked + label {
cursor:pointer;
opacity:1.0;
}