Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
Using this JSFiddle, edited to use two divs instead of two tables (#kellypockets and #birkinpockets), I'm trying to style the button whose content is currently being displayed.
I've written the following script, but it doesn't seem to work (obviously, I'm new at this):
$(document).ready(function() {
if ($("#kellypockets").css('display') === 'block') {
$('#button2').addClass("pockets-button-active");
}
if ($("#birkinpockets").css('display') === 'block') {
$('#button1').addClass("pockets-button-active");
}
});
.pockets-button-active {
font-family: "Oswald", sans-serif;
font-weight: 400;
font-style: normal;
font-size: em(14px);
color: #373737;
text-align: center;
text-transform: uppercase;
letter-spacing: 0em;
border-style: solid;
border-bottom: 3px;
border-color: #f5591b;
#include at-query($max, $small) {
font-size: em(12px);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button1" class="pockets-button" type="button">
<img src="//cdn.shopify.com/s/files/1/1079/2758/files/birkin-181x178-X2.png?3337508748521283727" width="89px" alt="Hermes Birkin icon" style="margin-left: auto; margin-right: auto; vertical-align: middle;" /> Hermes Birkin
</button>
<button id="button2" class="pockets-button" type="button">
<img src="//cdn.shopify.com/s/files/1/1079/2758/files/kelly-181x178-X2.png?3337508748521283727" width="89px" alt="Hermes Birkin icon" style="vertical-align: middle; margin-left: auto; margin-right: auto;" /> Hermes Kelly
</button>
<div id="kellypockets" class="grid pockets">Bla</div>
<div id="birkinpockets" class="grid pockets">Bla</div>
Can anyone help?
You've got syntax errors, missing ( and ) in the if statements
<script>
$(document).ready(function() {
if ($("#kellypockets").css('display') === 'block') {
$('#button2').addClass("pockets-button-active");
}
if ($("#birkinpockets").css('display') === 'block') {
$('#button1').addClass("pockets-button-active");
}
});
</script>
Related
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 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 2 years ago.
Improve this question
I want the burger to show up when my screen size is lesser than 1023px.
It is not happening only when using media query
.burger {
display: none;
position: absolute;
cursor: pointer;
right: 5%;
top: 15px;
font-size: 25px;
background: none;
border: none;
}
#media only screen and (max-width: 1053px) {
.burger {
display: block;
}
}
<button
type="button"
class="burger"
data-toggle="collapse"
data-target="#myNavbar"
>
☰
</button>
But the burger icon is not appearing although I've tried creating burger from span and I tags
This seems to work perfectly for me when testing on codepen. Can you check how your stylesheet is connected in your HTML document, as in this piece of code.
<link rel="stylesheet" href="stylesheet.css"></link>
In the <head> section of your html document. I have a feeling that it might not be connected.
EDIT
html
<button
type="button"
id="burger"
data-toggle="collapse"
data-target="#myNavbar"
>
☰
</button>
CSS
#burger {
display: none;
position: absolute;
cursor: pointer;
right: 5%;
top: 15px;
font-size: 25px;
background: none;
border: none;
}
#media screen and (max-width: 1053px) {
#burger {
display: block;
}
}
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 2 years ago.
Improve this question
I would like to create a field to choose sizes for my page exactly like "Case size" in the link below. I just started learning HTML, CSS, and javascript.
https://www.apple.com/shop/buy-watch/apple-watch?option.watch_cases=MWT42LL/A&option.watch_bands=MXP72AM/A&preSelect=false&product=Z0YQ&step=detail#
table {
table-layout:auto;
width: 100%;
border-collapse: collapse;
border: 2px solid black;
height: 30px;
font-size: large;
font-weight: bold;
}
table tr td {
padding: 10px;
}
<div class="case-size">
<table id="my-table" onclick="changeBorderColor()">
<tr>
<td>40mm</td>
<td rowspan="2" style="text-align: right;">From $399</td>
</tr>
<tr>
<td><small>Case fits 130-200mm wrists.</small></td>
</tr>
</table><br>
<table>
<tr>
<td>44mm</td>
<td rowspan="2" style="text-align: right;">From $429</td>
</tr>
<tr>
<td><small>Case fits 140-220mm wrists.</small></td>
</tr>
</table>
</div>
These pieces of codes should help you. You do not need JavaScript for doing that. Plain CSS has the necessary logic for this purpose.
Use a radio input so that only one of the given options can be selected. Checking if the input is checked is done with the CSS pseudo-class selector :checked. Using an input removes all the worries for the onclick logic you are trying. The + selector is adjacent sibling selector, it selects its sibling directly next to it.
Talking of functionality, use the onchange event handler instead of onclick.
Reading the code should explain itself to you. Check out the Further Reading section at the bottom of this answer. Don't hesitate to comment your query.
/*Do not focus on the numbers,
they are taken from the webpage given in your question to match the exact style*/
input.size-button-input[type="radio"] {
display: none;
}
label.size-button-label {
font-family: 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
font-size: 17px;
line-height: 1.23543;
font-weight: 400;
letter-spacing: -.022em;
color: #333;
width: 400px;
min-height: 4.88235rem;
padding: .70588rem .88235rem;
margin-top: .82353rem;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row;
border: 1px solid #d6d6d6;
border-radius: 4px;
box-sizing: border-box;
border-spacing: 0;
background-color: hsla(0, 0%, 100%, .8);
overflow: hidden;
cursor: pointer;
}
.size-button-label .size-text {
font-weight: bold;
}
.size-button-label .desc {
margin-top: 4px;
font-weight: normal;
font-size: 12px;
line-height: 1.33341;
font-weight: 400;
letter-spacing: -.01em;
}
input.size-button-input:checked+label.size-button-label {
box-shadow: 0 0 0 .11765rem #0070c9;
border-color: transparent;
}
label.size-button-label:hover {
border-color: #888;
}
label.size-button-label:active {
box-shadow: 0 0 0 0.17647rem rgba(131, 192, 253, .5);
outline: none;
}
<input type="radio" name="size" id="size1" class="size-button-input" onchange="//Your Function" checked>
<label for="size1" class="size-button-label">
<div class="size-text">40mm
<div class="desc">Case fits 130-200mm wrists.</div>
</div>
<div class="price-text">From $399</div>
</label>
<input type="radio" name="size" id="size2" class="size-button-input" onchange="//Your Function">
<label for="size2" class="size-button-label">
<div class="size-text">44cm
<div class="desc">Case fits 140-220mm wrists.</div>
</div>
<div class="price-text">From $429</div>
</label>
Further Reading:
CSS Selectors: Combinators on MDN
:checked - CSS on MDN
:checked on CSS Tricks
onchange event handler on MDN
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 3 years ago.
Improve this question
.b_btnWrapp .btn.btn_default:after {
content: "\f054";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
position: absolute;
top: 15px;
right: 30px;
}
.b_btnWrapp .btn.btn_default:after:hover {
content: "\f054";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
position: absolute;
top: 15px;
right: 18px;
}
<button class="b_btnWrapp btn btn_default">CLick</button>
I want the arrow to move the right side of the button using CSS AFTER concept.
You have to remove backspace in a style selector, because it's get interpreted as ".btn.btn_default is a child of .b_btnWrapp".
Just use this code and it will work
.b_btnWrapp {
position: relative;
width: 100px;
height: 30px;
}
.b_btnWrapp:after {
font-family: "Font Awesome 5 Free";
content: "\f061";
font-weight: 900;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 15px;
transition: all .2s;
}
.b_btnWrapp:hover:after {
right: 5px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<button class="b_btnWrapp btn btn_default">CLick</button>
</body>
</html>
Also notice, that I simplified your code a bit (removed unnecessary complexity in selectors and removed duplicated code). Don't forget to use position:relative on a parent if you want to use track absolute position of a child in parent "coordinates". And have an attention on order. .element:hover:after is not same to .element:after:hover
Try to add this in your style
.b_btnWrapp.btn.btn_default:after {
content: "\f054";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
position: absolute;
top: 15px;
right: 30px;
cursor:pointer;
}
.b_btnWrapp.btn.btn_default:after:hover {
top: 15px;
right: 18px;
}
I made the toggling of arrow using javascript. Hope it helps!
var icon=document.querySelector("#btn i");
function toggleArrow(){
var isLeftArrow=icon.classList.contains("fa-chevron-left");
if(isLeftArrow){
icon.classList.add("fa-chevron-right");
icon.classList.remove("fa-chevron-left");
}else{
icon.classList.add("fa-chevron-left");
icon.classList.remove("fa-chevron-right");
}
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/solid.css" integrity="sha384-r/k8YTFqmlOaqRkZuSiE9trsrDXkh07mRaoGBMoDcmA58OHILZPsk29i2BsFng1B" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/fontawesome.css" integrity="sha384-4aon80D8rXCGx9ayDt85LbyUHeMWd3UiBaWliBlJ53yzm9hqN21A+o1pqoyK04h+" crossorigin="anonymous">
<button id="btn" class="b_btnWrapp btn btn_default" onclick="toggleArrow()">
Click
<i class="fas fa-chevron-left"></i>
</button>
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 4 years ago.
Improve this question
I want to align this button centre of the web page; any ideas how to do that?
<button id="user-button" class="Sign-in"> Sign in </button>
<style>
.Sign-in{
background-color: springgreen;
border: none;
color: white;
padding: 15px 25px;
text-align: center;
font-size: 18px;
cursor: pointer;
border-radius: 10px;
font-family: Lobster, helvetica;
}
</style>
Try wrapping the button in a div and giving that div a text-align property of center.
CSS:
#button-container {
text-align: center;
}
<div id="button-container">
<button>Center Me</button>
</div>