How to create css radio button in asp.net? - javascript

I have created a web application using asp.net and I am trying to decorate the radio button using css like below:
But after designing like this the radio buttons are not working any more. Those buttons are getting disabled. Here is my code:
<asp:RadioButtonList ID="rdbSMSType" runat="server" AutoPostBack="true" RepeatDirection
="Horizontal" OnSelectedIndexChanged="rdbSMSType_SelectedIndexChanged" >
<asp:ListItem Value="SMS" Selected="True">SMS</asp:ListItem>
<asp:ListItem Value="MMS">MMS</asp:ListItem>
</asp:RadioButtonList>
CSS:
input[type=radio], input[type=checkbox] {
display:none;
}
input[type=radio] + label, input[type=checkbox] + label {
display:inline-block;
margin:-2px;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #333;
text-align: center;
text-shadow: 0 1px 1px rgba(255,255,255,0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
background-image: -o-linear-gradient(top,#fff,#e6e6e6);
background-image: linear-gradient(to bottom,#fff,#e6e6e6);
background-repeat: repeat-x;
border: 1px solid #ccc;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
border-bottom-color: #b3b3b3;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}
input[type=radio]:checked + label, input[type=checkbox]:checked + label{
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
background-color:#e0e0e0;
}
Please suggest me on this.

In fact, it works in my system (Firefox). Just in case hide your radio and checkboxes in a different way.
input[type="radio"], input[type="checkbox"] {
position: absolute;
z-index: -1;
}

Related

Emoji don't display properly or don't display at all

I made a game I use at the school I teach, it has some emojis that display fine in my computer :
but at the school computer I get only their outline(sorry for the photo):
I also use the hurricane emoji 🌪️ that is not showing at all.
Is there a way to make sure the emojis will be shown properly or is there a way to set a fallback in case the emoji can't be displayed?
:root {
--blue: #5519ff;
--dark-blue: rgb(1, 6, 77);
--blue-outline-shadow: #3872b5;
--blue-outline-highlight: #35a3cc;
--yellow-outline-shadow: #c4bb00;
--yellow-outline-highlight: #fff64d;
}
.emoji {
text-shadow: none;
padding-left: 1vw;
font-family: apple color emoji, segoe ui emoji, noto color emoji,
android emoji, emojisymbols, emojione mozilla, twemoji mozilla,
segoe ui symbol;
color: none;
-webkit-text-stroke-width: 0px !important;
}
.Rtable-cell {
box-sizing: border-box;
flex-wrap: nowrap;
flex-grow: 0;
padding: 1vw;
overflow: hidden;
list-style: none;
font-size: 4vw;
place-items: center;
}
.letters {
display: flex;
flex-direction: row;
justify-content: center;
place-items: center;
text-align: center;
color: var(--dark-blue);
border-bottom: 3px solid var(--dark-blue);
font-size: 4vw !important;
/* padding-bottom: 0; */
}
.blue {
color: var(--blue-outline-highlight) !important;
font-size: 5vw !important;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: var(--dark-blue);
text-shadow: 0 1px 0px var(--yellow-outline-shadow),
1px 0 0px var(--yellow-outline-highlight),
1px 2px 1px var(--yellow-outline-shadow),
2px 1px 1px var(--yellow-outline-highlight),
2px 3px 2px var(--yellow-outline-shadow),
3px 2px 2px var(--yellow-outline-highlight),
3px 4px 2px var(--yellow-outline-shadow),
4px 3px 3px var(--yellow-outline-highlight),
4px 5px 3px var(--yellow-outline-shadow),
5px 4px 2px var(--yellow-outline-highlight),
5px 6px 2px var(--yellow-outline-shadow),
6px 5px 2px var(--yellow-outline-highlight),
6px 7px 1px var(--yellow-outline-shadow),
7px 6px 1px var(--yellow-outline-highlight),
7px 8px 0px var(--yellow-outline-shadow),
8px 7px 0px var(--yellow-outline-highlight),
-12px -12px 2px rgba(49, 206, 99, 0);
}
.place {
background-color: #fee140;
background-image: linear-gradient(to bottom, 0%, #ffff7a #fff500 100%);
border: 3px solid var(--dark-blue);
text-shadow: var(--dark-blue) 0px -2px 0;
box-shadow: inset 0px -5px 10px 1px rgba(1, 6, 77, 0.6);
font-size: 4vw;
font-weight: bolder;
color: white;
text-align: center;
height:100px;
}
.disabled {
pointer-events: none;
background-image: linear-gradient(to top, #fee140 0%, #fa709a 100%);
box-shadow: inset 0px 5px 10px 1px rgba(1, 6, 77, 0.6);
}
<div class="Rtable-cell letters blue">A <span class="emoji">🐜</span></div>
<div class="Rtable-cell place disabled" >🌪️</div>

I am having a slash of headers before the animation brings them in from the side. How do I get rid of it?

I am building a website to put all my projects and resume on and I am using some animation to bring in the title elements in from the side on load as you can see in the snippet below. But when the page initially loads the title text flashes really quickly then the JavaScript loads and brings them in from the sides. Is this a preloading issue? It hasn't seemed to fix it.
Is it a matter of which order the elements/JavaScript is loaded? Or am I missing some line in my JavaScript that prevents this?
window.addEventListener('DOMContentLoaded', function () {
/* Function to bring in navbar from top staggered */
gsap.from(".btn",{duration:2,opacity:0,y:-300,stagger:0.25,});
/* Function to bring h1 in from the left */
gsap.from("h1",{duration:2.5,ease:"power2.out",x:-2000});
/* Function to bring in h2 from right */
gsap.from("h2",{duration:2.5,ease:"power2.out",x:2000});
/* Function to register gsap scroll plugin */
gsap.registerPlugin(ScrollToPlugin);
/* Function to scroll to About me when button is clicked */
document.getElementById('scroll').addEventListener('click', function clicked() {
gsap.to(window, {duration: 0.8, scrollTo:'#red' });
});
});
* {
box-sizing: border-box;
}
body {
background-color: #24305E;
height: 100vh;
}
h1 {
color: #A8D0E6;
font-display: fallback;
font-size: 15vh;
font-family: 'Noto Sans SC', sans-serif;
margin-left: 12vw;
text-shadow:
-1px 1px 1px rgba(0,0,0,1),
-2px 2px 1px rgba(0,0,0,0.6),
-4px 4px 1px rgba(0,0,0,0.4),
-6px 6px 1px rgba(0,0,0,0.2),
-8px 8px 1px rgba(0,0,0,0.18),
-10px 10px 1px rgba(0,0,0,0.16),
-12px 12px 1px rgba(0,0,0,0.15),
-14px 14px 1px rgba(0,0,0,0.14),
-16px 16px 1px rgba(0,0,0,0.13),
-18px 18px 1px rgba(0,0,0,0.12),
-20px 20px 1px rgba(0,0,0,0.11),
-22px 22px 1px rgba(0,0,0,0.1),
-24px 24px 1px rgba(0,0,0,0.09),
-26px 26px 1px rgba(0,0,0,0.08),
-28px 28px 1px rgba(0,0,0,0.07),
-30px 30px 1px rgba(0,0,0,0.06),
-32px 32px 1px rgba(0,0,0,0.05),
-34px 34px 1px rgba(0,0,0,0.04),
-36px 36px 1px rgba(0,0,0,0.03),
-38px 38px 1px rgba(0,0,0,0.02);
}
h2 {
font-family: 'Noto Sans SC', sans-serif;
font-display: fallback;
color: #F8e9a1;
font-size: 15vh;
margin-left: 12vw;
text-shadow:
-1px 1px 1px rgba(0,0,0,1),
-2px 2px 1px rgba(0,0,0,0.6),
-4px 4px 1px rgba(0,0,0,0.4),
-6px 6px 1px rgba(0,0,0,0.2),
-8px 8px 1px rgba(0,0,0,0.18),
-10px 10px 1px rgba(0,0,0,0.16),
-12px 12px 1px rgba(0,0,0,0.15),
-14px 14px 1px rgba(0,0,0,0.14),
-16px 16px 1px rgba(0,0,0,0.13),
-18px 18px 1px rgba(0,0,0,0.12),
-20px 20px 1px rgba(0,0,0,0.11),
-22px 22px 1px rgba(0,0,0,0.1),
-24px 24px 1px rgba(0,0,0,0.09),
-26px 26px 1px rgba(0,0,0,0.08),
-28px 28px 1px rgba(0,0,0,0.07),
-30px 30px 1px rgba(0,0,0,0.06),
-32px 32px 1px rgba(0,0,0,0.05),
-34px 34px 1px rgba(0,0,0,0.04),
-36px 36px 1px rgba(0,0,0,0.03),
-38px 38px 1px rgba(0,0,0,0.02);
}
h3 {
font-family: 'Courier Prime', monospace;
color: #f99f9f;
font-size: 3vh;
margin-left: 13vw;
margin-top: 10vh;
text-shadow:
-1px 1px 1px rgba(0,0,0,1),
-2px 2px 1px rgba(0,0,0,0.6),
-4px 4px 1px rgba(0,0,0,0.4),
-6px 6px 1px rgba(0,0,0,0.2);
}
h4 {
font-family: 'Courier Prime', monospace;
color: #f99f9f;
font-size: 3vh;
margin-left: 13vw;
margin-top: 5vh;
text-shadow:
-1px 1px 1px rgba(0,0,0,1),
-2px 2px 1px rgba(0,0,0,0.6),
-4px 4px 1px rgba(0,0,0,0.4),
-6px 6px 1px rgba(0,0,0,0.2);
}
h5 {
font-size: 5vh;
font-family: 'Noto Sans SC', sans-serif;
color: #f8e9a1;
padding: 20px;
margin: 5vw;
text-shadow:
-1px 1px 1px rgba(0,0,0,1),
-2px 2px 1px rgba(0,0,0,0.6),
-4px 4px 1px rgba(0,0,0,0.4),
-6px 6px 1px rgba(0,0,0,0.2);
}
h5:after {
background-color: #F8E9A1;
content: "";
display: inline-block;
height: 2px;
position: relative;
vertical-align: middle;
width: 50%;
margin-left: 20px;
box-shadow:
-1px 1px 1px rgba(0,0,0,1),
-2px 2px 1px rgba(0,0,0,0.6),
-4px 4px 1px rgba(0,0,0,0.4),
-6px 6px 1px rgba(0,0,0,0.2);
}
#red {
color: #f99f9f;
display: inline-block;
}
.box {
margin-top: 20vh;
width: 66vw;
height: 15vh;
margin-left: 12vw;
}
.content {
display: flex;
}
.column {
flex: 50%;
padding: 75px;
}
p {
color : #A8D0E6;
font-size: 2.75vh;
font-family: 'Courier Prime', monospace;
margin-left: 8vw;
text-shadow:
-1px 1px 1px rgba(0,0,0,1),
-2px 2px 1px rgba(0,0,0,0.6),
-4px 4px 1px rgba(0,0,0,0.4),
-6px 6px 1px rgba(0,0,0,0.2);
}
hr {
height: 1vh;
background-color: #A8D0E6;
border: none;
margin-left: 6vw;
margin-right: 6vw;
}
img {
float: left;
width: 25vw;
height: auto;
border-radius: 30px;
box-shadow:
-1px 1px 1px rgba(0,0,0,1),
-2px 2px 1px rgba(0,0,0,0.6),
-4px 4px 1px rgba(0,0,0,0.4),
-6px 6px 1px rgba(0,0,0,0.2);
}
.imageContainer {
display: inline-block;
position: relative;
}
.imageContainer:before {
position: absolute;
top: 6%;
left: 10%;
width: 100%;
height: 100%;
border: 7px solid #F8E9A1;
content: '';
z-index: -2;
border-radius: 30px;
box-shadow:
-1px 1px 1px rgba(0,0,0,1),
-2px 2px 1px rgba(0,0,0,0.6),
-4px 4px 1px rgba(0,0,0,0.4),
-6px 6px 1px rgba(0,0,0,0.2);
}
.btn {
font-family: 'Courier Prime', monospace;
color: #F8E9A1;
transition: transform .2s;
}
.btn:hover {
background-color: #F8E9A1;
color: #24305E;
transform: scale(1.2);
box-shadow:
-1px 1px 1px rgba(0,0,0,1),
-2px 2px 1px rgba(0,0,0,0.6),
-4px 4px 1px rgba(0,0,0,0.4),
-6px 6px 1px rgba(0,0,0,0.2),
-8px 8px 1px rgba(0,0,0,0.18),
-10px 10px 1px rgba(0,0,0,0.16),
-12px 12px 1px rgba(0,0,0,0.14),
-14px 14px 1px rgba(0,0,0,0.12),
-16px 16px 1px rgba(0,0,0,0.10),
-18px 18px 1px rgba(0,0,0,0.09),
-20px 20px 1px rgba(0,0,0,0.08),
-22px 22px 1px rgba(0,0,0,0.07),
-24px 24px 1px rgba(0,0,0,0.06),
-26px 26px 1px rgba(0,0,0,0.05),
-28px 28px 1px rgba(0,0,0,0.04),
-30px 30px 1px rgba(0,0,0,0.03),
-32px 32px 1px rgba(0,0,0,0.02),
-34px 34px 1px rgba(0,0,0,0.01);
}
.zoom {
transition: transform .2s;
}
.zoom:hover {
transform: scale(1.2);
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Courier+Prime&family=Noto+Sans+SC:wght#700&display=swap" as="font">
<script src="main.js"></script>
<link rel="stylesheet" href="styles.css">
<title>Matthew Salem | Software Engineer</title>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-dark" style="background-color: #24305e;">
<a class="navbar-brand" href="http://www.matthewsalem.com"> Matt Salem Logo </a>
<form class="form-inline">
<div class="zoom">
<div class="btn-group mr-5" role="group" aria-label="First group"><button class="btn btn-outline-primary btn-lg" id="scroll" type="button">01. About Me</button></div>
</div>
<div class="zoom">
<div class="btn-group mr-5" role="group" aria-label="Second Group"> <button class="btn btn-outline-primary btn-lg" type="button">02. Portfolio</button></div>
</div>
<div class="zoom">
<div class="btn-group mr-5" role="group" aria-label="Third Group"> <button class="btn btn-outline-primary btn-lg" type="button">03. Resume</button></div>
</div>
</form>
</nav>
</div>
<h3>Hello! My name is</h3>
<div id="animate">
<h1>Matthew Salem.</h1>
</div>
<h4>I am a</h4>
<h2>Software Engineer</h2>
<h4>experienced in front end website architecture and back end application development.</h4>
<div class="box">
<h5><div id="red">01.</div> About Me</h5>
</div>
<div class="content">
<div class= "column">
<p>Hi! My name is Matt Salem. I am a software engineer based out of
New Haven, CT. Currently I am a student at the Holberton School.
I love buliding awesome software, especially any projects in the field
of web development. My goal is to build products that give the user
not only functional service or tool, but an experience that they will
remember. When I am not working on a project, you can find me
with friends out to eat, playing chess and drinking coffee downtown,
or enjoying a live show at Toad's Place or any other local venues.
</p>
</div>
<div class="column">
<div class="imageContainer">
<img src="IMG_3152 (1).jpg" alt="Headshot">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollToPlugin.min.js"></script>
</body>
</html>
From the docs:
The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
It means your webpage will render before the callback is executed.
I would suggest to use gsap.to (https://greensock.com/docs/v3/GSAP/gsap.to()) instead. You could add your initial position in your CSS, which can then be reset by with gsap.to.
Try moving your <script src="main.js"></script> to the very bottom of the html body so that everything else runs first. I just finished adding some animations to a project...here is how I did it:
window.onload(animations());
function animations(){
const tl = gsap.timeline({defaults: {ease: "power1.out"}});
tl.to(".intro", {y: "-100%", duration: 1, delay: 1});
tl.fromTo(".intro", {opacity: 1}, {opacity: 0, duration: 1}, "-=1");
tl.fromTo(".card", {y: "100%"}, {y: "0%", duration: 1, stagger: 0.25}, "-=1");
tl.fromTo("#logo-blk", {y: "-400%", rotation: "-30"}, {y: "-100%", rotation: "0",
duration: 0.5}, "-=0.5");
}

Input Type Range Control Display as a text box in IE

I am using input type range control in my ASP.NET page as below. This shows correctly in Firefox and Google Chrome browsers and works well.
But in IE-11 , this shows as a input type text control. When I look the browser HTML source , I can not see range control and it is automatically converted to input text control as below.
<input type="text" id="myRange" min="0" value="0" />
I am using bootstrap for my project. Could you please provide some help to solve this issue ?
<div class="row">
<div class="col-xs-2">
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</div>
<div class="col-xs-8">
<input type="range" id="myRange" min="0" value="0" />
</div>
<div class="col-xs-2">
<asp:Label ID="Label2" runat="server" Text=""></asp:Label>
</div>
</div>
Here is The example for cross browser input range including IE10+
input[type=range] {
-webkit-appearance: none;
margin: 10px 0;
width: 100%;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 12.8px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: #ac51b5;
border-radius: 25px;
border: 0px solid #000101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 20px;
width: 39px;
border-radius: 7px;
background: #65001c;
cursor: pointer;
-webkit-appearance: none;
margin-top: -3.6px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ac51b5;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 12.8px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: #ac51b5;
border-radius: 25px;
border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 20px;
width: 39px;
border-radius: 7px;
background: #65001c;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 12.8px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
border-width: 39px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #ac51b5;
border: 0px solid #000101;
border-radius: 50px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: #ac51b5;
border: 0px solid #000101;
border-radius: 50px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 20px;
width: 39px;
border-radius: 7px;
background: #65001c;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: #ac51b5;
}
input[type=range]:focus::-ms-fill-upper {
background: #ac51b5;
}
body {
padding: 30px;
}
<input type="range">

toggling a link's activity on click using javascript

I have a question similar to this question Making a link stay active displaying hover effect upon click using javascript i just wanted to disable the active class when the link is clicked again any help would be appreciated
JSFiddle
HTML
<div id="profile_list">
<h2>Members: 37</h2>
• O.F.
• Founder
• Leader
• Sr. Admin
• Jr. Admin
• Full-Member
• Greenhorn
• Inactive
• Legend
</div>
JS
$('#profile_list a').click(function() {
var a = $(this);
$('#profile_list a').removeClass('active');
$(this).addClass('active');
});
CSS
#profile_list {
width: 250px;
height: 328px;
background-color: #333;
background-image: -moz-linear-gradient(#777, #222);
background-image: -webkit-gradient(linear, left top, left bottom, from(#777), to(#222));
background-image: -webkit-linear-gradient(#777, #222);
background-image: -o-linear-gradient(#777, #222);
background-image: -ms-linear-gradient(#777, #222);
background-image: linear-gradient(#777, #222);
border: 1px solid #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
-webkit-box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
float: left;
position: relative;
top: 20px;
left: 20px;
z-index: 2;
}
#profile_list h2 {
width: 226px;
height: 20px;
padding: 10px 0;
margin: 0 12px;
border-bottom: 1px solid #444;
float: left;
color: #B45F04;
font: 20px Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
}
#profile_list a {
width: 218px;
height: 20px;
padding: 4px 12px 7px 20px;
color: #A4A4A4;
float: left;
font: 18px Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
text-decoration: none;
text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
position: relative;
top: 5px;
}
#profile_list a:hover, #profile_list a.active {
background: rgba(204, 204, 204, 0.5);
-moz-box-shadow: inset 0 -0.3em 0.9em 0.3em #000;
-webkit-box-shadow: inset 0 -0.3em 0.9em 0.3em #000;
box-shadow: inset 0 -0.3em 0.9em 0.3em #000;
color: #FFF;
}
Then do two checks, one to see if the clicked anchor is active already and another to see if any of that anchors siblings are active.
If it's already active, "deactive" it by removing the class.
If one of its siblings is active during the click, don't activate it.
If neither it nor its siblings are active, activate it.
JS
// Add a click listener to the anchors of profile_list
$('#profile_list a').click(function () {
// Set variables for this,
// Whether I am the active one,
// And if there are other active elements in this list
var a = $(this),
amIactive = a.hasClass('active'),
areOthersActive = a.parent().children().hasClass('active');
// If I'm active
if (amIactive) {
// Make me not active when I'm clicked
a.removeClass('active');
}
// Otherwise, if none of my siblings are active
else if(!areOthersActive){
// Make me active
a.addClass('active');
}
});
Forked fiddle with changes: jsfiddle

How can I keep hover state on unhover until page refresh?

I'm having a lot of trouble getting this to work properly. I just want to make .accordion-content stay upon unhover. I've tried several approaches to this and now I'm pretty much at a total loss. Here is the code I'm working with:
HTML
<ul class="accordion-thing">
<li>
<a>How do I setup my Chem+Nect Drum?<span>Learn More</span></a>
<ul class="accordion-content">
<li><em>01</em></li>
</ul>
</li>
CSS
.accordion-thing,
.accordion-thing ul,
.accordion-thing li,
.accordion-thing a,
.accordion-thing span {
margin: 0;
padding: 0;
border: none;
outline: none;
}
.accordion-thing li {
list-style: none !important;
}
.accordion-thing li > a {
display: block;
position: relative;
min-width: 910px;
min-height: 46px;
padding: 0 10px 0 40px;
vertical-align: middle !important;
color: #fdfdfd;
font: bold 16px/42px Arial, sans-serif !important;
text-decoration: none;
text-shadow: 0px 1px 0px rgba(0,0,0, .35) !important;
background: #6c6e74;
background: -moz-linear-gradient(top, #6c6e74 0%, #4b4d51 100%) !important;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51)) !important;
background: -webkit-linear-gradient(top, #6c6e74 0%, #4b4d51 100%) !important;
background: -o-linear-gradient(top, #6c6e74 0%, #4b4d51 100%) !important;
background: -ms-linear-gradient(top, #6c6e74 0%, #4b4d51 100%) !important;
background: linear-gradient(top, #6c6e74 0%, #4b4d51 100%) !important;
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}
.accordion-thing li > a span {
display: block;
position: absolute;
top: 12px;
right: 0px;
padding: 0 10px;
margin-right: 10px;
font: normal bold 14px/18px Arial, sans-serif !important;
background: #404247;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
}
.accordion-content li a {
color: #797979;
text-shadow: 1px 1px 0px rgba(255,255,255, .2);
background: #e5e5e5;
border-bottom: 1px solid #c9c9c9;
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}
.accordion-content li:last-child a { border: none; }
.accordion-content li > a span {
color: #797979;
text-shadow: 1px 1px 0px rgba(255,255,255, .2);
background: transparent;
border: 1px solid #c9c9c9;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.accordion-content {
position: absolute;
top: o;
left: 0
margin-left: 14px;
color: #a6a6a6;
font: normal 10px/32px Arial, sans-serif !important;
}
.accordion-thing > li:hover > a,
.accordion-thing > li:target > a {
color: #00334c;
text-shadow: 1px 1px 1px rgba(255,255,255, .2);
background: #0679b9 !important;
background: -moz-linear-gradient(top, #0679b9 0%, #3b59e2 100%) !important;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0679b9), color-stop(100%,#3b59e2)) !important;
background: -webkit-linear-gradient(top, #0679b9 0%,#3b59e2 100%) !important;
background: -o-linear-gradient(top #0679b9 0%,#3b59e2 100%) !important;
background: -ms-linear-gradient(top #0679b9 0%,#3b59e2 100%) !important;
background: linear-gradient(top #0679b9 0%,#3b59e2 100%) !important;
}
.accordion-thing > li:hover > a span,
.accordion-thing > li:target > a span {
color: #fdfdfd !important;
text-shadow: 0px 1px 0px rgba(0,0,0, .35);
background: #00334c;
}
.accordion-content li:hover a { background: #efefef; }
.accordion-thing li > .accordion-content {
height: 0;
overflow: hidden;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all 2s ease-in-out;
transition: all .2s ease-in-out;
}
.accordion-thing li:hover > .accordion-content {
height: 98px;
}
Is there some Javascript I can add to make this work properly?
If you want to have the hover style applied permanently after the first hover until the page refreshes, you will have to use javascript:
var accordion = document.getElementsByClassName('accordion-thing')[0];
accordion.addEventListener('mouseenter', function () {
this.classList.add('hovered');
});
then in your css, anywhere that you have .accordion-thing li:hover {}, you can change that to .accordion-thing.hovered li {}
Here is a simple example to show this concept.

Categories