Develop Reference

Dashed outline with outline-offset not working in IE

i have to add dashed outline on focus at a specific offset of 4px, this is working fine in all browsers except IE since it doesn't support outline-offset and i cannot add a wrapper element in the HTML as work around with padding because i am trying to make a generic fix across the application, and i cannot add a border: 4px solid transparent, because the elements have a border which is required, and Pseudo elements will not work because we have a pseudo class of focus and we cannot use box-shadow as it doesn't allow a dashed outline
this is what i want to achieve in IE.
Css which is working fine on chrome
.keyBoardUser input[type="radio"]:focus + div {
//border: 4px solid transparent // cannot use this
outline-offset: 4px;
outline: 1px dashed black;
}
keyboard user is a class which is added on tabbing using JS.

Please refer to this thread, use CSS pseudo elements or nested div to set the border property, and use it as a alternative method.
Sample code as below:
<style>
.keyBoardUser {
margin-left:20px;
text-align: center;
width:30px;
}
input[type="radio"]{
width:20px;
height:20px;
}
#media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
.keyBoardUser input[type="radio"]:focus + div {
outline-offset: 6px;
outline: 2px dashed black;
}
}
/*Microsft Edge browser*/
#supports (-ms-ime-align:auto) {
.keyBoardUser input[type="radio"]:focus + div {
outline-offset: 6px;
outline: 2px dashed black;
}
}
/*IE Browser*/
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.box {
position: relative;
text-align: center;
}
.keyBoardUser input[type="radio"]:focus + div:after {
content: "";
position: absolute;
top: -6px;
left: -6px;
display: block;
width: 40px;
height: 40px;
border: 2px dashed red;
}
.box input[type="radio"] {
margin-left: 5px;
margin-top: 5px;
}
}
</style>
Html code as below:
<div class="keyBoardUser ">
<input id="Radio1" type="radio" />
<div class="box"><input id="Radio1" type="radio" checked="checked" /></div>
</div>
The output like this:
IE browser:
Chrome browser:

Use a pseudo element on the sibling element to style the dashed outline. I am calculating the width and height dynamically.
Use the below class. This works on IE as well!
.keyBoardUser input[type="radio"]:focus + div::after {
content: "";
position: absolute;
display: block;
border: 4px solid transparent;
outline: 1px dashed #000;
width: calc(100% + 10px);
height: calc(100% + 10px);
top: -5px;
left: -5px;
}

Some hr tags have gaps inside them while other doesn't

I have a pen, which is basically a todo app. The todo items are actually li elements which have text, button and a hr. Some of them are having hr with spaces inside them while some doesn't.
Image:
HTML:
const j = $;
j(() => {
let validify = txt => {
if (txt.length > 0) {
j('#ctn').append(`<li class='td'>${txt}<button class='td-btn'>Dismiss</button><hr/></li>`);
}
j('.td-btn').on('mouseenter', function() {
console.log('added');
j(this)
.parent()
.addClass('del');
console.log(j(this).parent().attr('class'))
}).on('mouseleave', function() {
console.log('removed')
j(this)
.parent()
.removeClass('del');
}).on('click', function() {
j(this).parent().css('display', 'none');
});
j('#addtd').val('');
}
validify('');
j('#btn').on('click', () => {
validify(j('#addtd').val());
});
});
#import url("https://fonts.googleapis.com/css?family=Lato");
* {
box-sizing: border-box;
font-family: Lato;
}
body {
margin: 0;
padding: 3vh 7vw;
background: #004D40;
}
#in-ctn {
position: fixed;
width: 86vw;
height: 16vh;
background: #388E3C;
box-shadow: 0 6px 9px #272727;
z-index: 2;
}
#btn {
position: absolute;
border-radius: 100%;
outline: none;
border: none;
right: 7vh;
top: 3vh;
width: 10vh;
height: 10vh;
font: 500 8vh arial;
display: inline-block;
transition: 0.25s all;
background: #CDDC39;
}
#btn:hover {
box-shadow: 0 2px 1px rgba(0, 0, 0, 0.33);
transform: scale(1.1);
}
#btn:active {
transform: translateY(4px);
}
#addtd {
position: absolute;
outline: none;
border: none;
background: rgba(255, 255, 255, 0.33);
width: 50vw;
height: 6vh;
top: 5vh;
left: 5vw;
font: 500 14pt Lato;
padding: 0 10px;
}
#addtd::placeholder {
color: #FFF;
}
#ctn {
position: absolute;
top: 27vh;
width: 86vw;
background: #388E3C;
box-shadow: 0 6px 9px #272727;
padding: 3vh 5vw;
z-index: 1;
}
li.td {
font: 500 20pt Lato;
list-style: none;
color: #FFF;
}
button.td-btn {
float: right;
outline: none;
border: none;
background: #E53935;
height: 20px;
position: relative;
top: 25px;
color: #FFF;
}
hr {
border: 7px solid #9E9D24;
padding: 0;
}
.del {
color: #CDDC39 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='main'>
<div id='in-ctn'>
<button id='btn'>+</button>
<input type='text' id='addtd' placeholder='Enter a new Todo' />
</div>
<div id='ctn'>
<li class='td'>
Code a Todo App
<button class='td-btn'>Dismiss</button>
<hr/>
</li>
<li class='td'>
Style the Elements
<button class='td-btn'>Dismiss</button>
<hr/>
</li>
<li class='td'>
Debug some problems
<button class='td-btn'>Dismiss</button>
<hr/>
</li>
<li class='td'>
Go for a walk
<button class='td-btn'>Dismiss</button>
<hr/>
</li>
</div>
</div>
Can anyone explain me why it is so?

This is happening due to CSS Sub pixel rendering.
When you zoom-in/out of the browser, the rescaled elements will have left over pixel values like 5.75px etc. The vendor decides how to deal with that.
In your case the easiest fix, at least in Chrome, is to cancel the border radius to 0px, instead set the height of the hr to double the border and give it a background color:
border: 0px solid #9E9D24;
padding: 0;
height: 14px;
background: #9E9D24;

Seems like this issue is browser related, since it works fine for most people. Possibly your browser has a default styling for hr elements. It is, however, nowadays bad practice to use a horizontal line for presentational terms. Source
You would be fine by using a border-bottom on your li element. If you want to position the border lower than the default position, you can use padding-bottom on the li element. Your HTML structure also looks a lot more clear with this.
For example, changing the styling of your CSS selector li.td to the following could do the trick:
li.td {
font: 500 20pt Lato;
list-style: none;
color: #CDDC39;
border-bottom: 10px solid #9E9D24;
padding-bottom: 10px;
margin-bottom: 10px;
}
In case you really need to use the hr element, you could attempt to remove all default margin since some browsers add a margin by default. For that, add the following styling to the element:
margin: 0
which would result into
hr {
border: 7px solid #9E9D24;
padding: 0;
margin: 0;
}

Did you edit your pen to fix the issue? When looking at your pen preview all <hr> tags are rendered without an empty space inside.
The only suggestion I have, is that in HTML <hr> doesn't need to be explicitly closed, unless you are using XHTML, then you need to properly close the tag <hr />. Since you are just writing HTML, I would go with the <hr>.

How to reverse jQuery css styling?

What is the best way to reverse css styling on the second on click?
What I'd like to happen is when the user clicks on the button again, it will just reverse everything to the original position. I'm not sure what's the most efficient way to do this without re-declaring everything in reverse. Especially that there's not just one class that changes status.
HTML:
<div class="wrapper-available">
<a class="available">Available</a>
<div class="available-img"><img src="http://www.petmd.com/sites/all/modules/breedopedia/images/thumbnails/cat/tn-california-spangled-cat.jpg" width="40" height="40"></div>
</div>
CSS:
.wrapper-available {
display: inline-block;
margin-top: 40px;
position: relative;
}
.available {
border-radius: 15px;
padding: 5px 20px 5px 50px;
background: #39b54a;
color: #FFF;
display: inline-block;
font-weight: bold;
}
.available-img {
left: 0;
position: absolute;
top: -12px;
transition: all .20s ease-in;
}
.available-img img {
border-radius: 30px;
border: 2px solid #39b54a;
}
jQuery:
$(".available").click(function() {
$(this).css({ "background" : "#CCC", "padding" : "5px 50px 5px 20px" }).text("Away");
$(".available-img").css({
"left": 100
});
$(".available-img img").css({
"border" : "2px solid #CCC"
});
});
http://codepen.io/aguerrero/pen/ORKjya

The simplest way would be to toggle a class on the wrapper-available instead of adding inline styling and to also toggle the text() within the .available element. Try this:
$(".available").click(function() {
$(this).text(function(i, t) {
return t == 'Available' ? 'Away' : 'Available';
}).closest('.wrapper-available').toggleClass('away');
});
.wrapper-available {
display: inline-block;
margin-top: 40px;
position: relative;
}
.available {
border-radius: 15px;
padding: 5px 20px 5px 50px;
background: #39b54a;
color: #FFF;
display: inline-block;
font-weight: bold;
}
.wrapper-available.away .available {
background-color: #CCC;
padding: 5px 50px 5px 20px;
}
.available-img {
left: 0;
position: absolute;
top: -12px;
transition: all .20s ease-in;
}
.wrapper-available.away .available-img {
left: 70px; /* note 70px seems to work better than 100px here */
}
.available-img img {
border-radius: 30px;
border: 2px solid #39b54a;
}
.wrapper-available.away .available-img img {
border: 2px solid #CCC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper-available">
<a class="available">Available</a>
<div class="available-img">
<img src="http://www.petmd.com/sites/all/modules/breedopedia/images/thumbnails/cat/tn-california-spangled-cat.jpg" width="40" height="40">
</div>
</div>

I added three classes in your CSS document with the styling that you added in your jQuery snippet. Now, instead of updating the specific styling for each element via jQuery you can just specify the new styling in your three selectors with the .active class.
CSS:
.available.active {
background: #CCC;
padding: 5px 50px 5px 20px;
}
.available-img.active {
left: 100px;
}
.available-img.active img {
border: 2px solid #CCC;
}
The jQuery snippet now toggles the .active class on your desired elements. These two:
<a class="available">Available</a>
<div class="available-img">
$(this).text() now toggles between Available and Away.
jQuery:
$('.available').click(function() {
$(this).toggleClass('active').siblings().toggleClass('active');
$(this).text(function(i, text) {
return (text === 'Available') ? 'Away' : 'Available';
});
});
Example: http://codepen.io/praktikdan/pen/wzVrGM

Possibly better way to code this hacky toggle button?

I have a toggle button that has been coded up, but I dont think its good to use in my form, since its a pretty bad hacky code to select either option.
Is there a better/efficient way to code this toggle button instead? I am not good with jQuery, so any help with provided functionality would be helpful.
If there is also a way of programming it to slide the toggle left/right instead of clicking left/right would be great also.
I have also attached these images to show the behaviour of how it should function:
toggle behaviour diagram
current html file(below) button look for left/right toggle buttons
Any questions, please ask...
<html>
<head>
<style>
#toggle-slide {
border: 4px #303F9F solid;
border-radius: 5px;
display: flex;
width:300px;
color: white;
font-weight: 700;
text-align: center;
cursor: pointer;
}
#toggle-slide div {
flex:1;
padding: 10px 20px;
}
#toggle-option-0 {
background-color:#3F51B5;
}
#toggle-option-1 {
background-color:white;
}
</style>
<script>
function toggle() {
realToggle = document.getElementById('real-toggle');
if (realToggle.value == 0) {
realToggle.value=1;
document.getElementById('toggle-option-0').style.backgroundColor='#3F51B5';
document.getElementById('toggle-option-1').style.backgroundColor='#FFF';
} else {
realToggle.value=0;
document.getElementById('toggle-option-0').style.backgroundColor='#FFF';
document.getElementById('toggle-option-1').style.backgroundColor='#3F51B5';
}
}
</script>
</head>
<body>
<div id='toggle-slide' onclick='toggle()'>
<div id='toggle-option-0' class='active'>Private</div>
<div id='toggle-option-1'>Public</div>
<input id='real-toggle' type=hidden name=private value=1 />
</div>
</body>
</html>

A pure CSS version:
On the following snippet there's a hidden checkbox that becomes checked/unchecked when the content in label is clicked. Using the CSS :checked selector, the #background position is changed from 0% to 50% and it's color changes from red to blue.
The background is separated from the text and set with position:absolute (to be easily moved) plus z-index:-1 (which brings it to behind the subtitles). A CSS transition added on the #background animates the changes on it's position/color.
.toggle-slide {
border: 4px #555 solid;
border-radius: 5px;
display: flex;
width: 300px;
color: white;
font-weight: 700;
text-align: center;
cursor: pointer;
position: relative;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none;
}
.toggle-slide .subtitle {
flex: 1;
padding: 10px 20px;
}
#background {
width: 50%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: -1;
background-color: tomato;
-webkit-transition: all 0.6s; /* Safari */
transition: all 0.6s;
-webkit-transition-timing-function: cubic-bezier(0.2,1,0.2,1);
transition-timing-function: cubic-bezier(0.2,1,0.2,1);
}
input[type=checkbox] {
display: none;
}
#real:checked ~ label #background {
background-color: skyblue;
left: 50%;
}
<input id=real type=checkbox name=real />
<label class=toggle-slide for=real>
<div id=background></div>
<div class=subtitle>Private</div>
<div class=subtitle>Public</div>
</label>

You can do this completely in pure css, but since you were asking for jQuery...
$(document).ready(function() {
$('.input-button').click(function() {
if ($('.public').hasClass('selected')) {
$('.public').removeClass('selected');
$('.private').addClass('selected');
$('.slider').stop().animate({
left: '48%'
}, 200);
} else {
$('.private').removeClass('selected');
$('.public').addClass('selected');
$('.slider').stop().animate({
left: '2%'
}, 200);
}
});
});
html,
body {
padding: 0;
margin: 0;
}
.input-button {
width: 200px;
height: 40px;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -20px;
position: absolute;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #FFF;
background-color: #2E86AB;
border-radius: 4px;
line-height: 40px;
font-family: sans-serif;
-webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
span {
width: 50%;
height: 100%;
float: left;
text-align: center;
cursor: pointer;
-webkit-user-select: none;
}
.input-button div {
width: 100px;
height: 85%;
top: 50%;
left: 2%;
transform: translateY(-50%);
position: absolute;
background-color: #FFF;
border-radius: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='input-button'>
<div class='slider'></div>
<span class='private'>Private</span>
<span class='public selected'>Public</span>
</div>

Here is a good example of what you were trying to create
jQuery on-off-switch.js Plugin
It also implemented with jQuery and supports the sliding on drag functionality.
How to use the plugin

Input with a copy button just like github clone view

I need to develop a view with similar tooltip which is on github.
I tried using the css but was not able to create the exact ui.
My CSS is as follow
[tooltip] {
display: inline;
position: relative;
}
[tooltip]:hover:after {
background: #333;
background: rgba(0, 0, 0, .8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(tooltip);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 99;
white-space: nowrap;
}
[tooltip]:hover:before {
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
Please advise how can I get the same effect.

For what is worth if you consider bootstrap, similar, or a partial bootstrap installation or related classes, you can achieve this like this:
HTML
<div class="container">
<div class="col-xs-4 col-xs-push-4 martop50">
<div class="input-group">
<span class="input-group-addon">https://</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon"><i class="fa fa-clipboard" data-toggle="tooltip" data-placement="bottom" title="Copy to clipboard"></i></span>
</div>
<span class="download-btn"><button class="btn btn-sm" ><i class="fa fa-download"></i></button></span>
</div>
</div>
CSS
.martop50{
margin-top:50px;
}
.download-btn{
display:inline;
float: left;
margin: 0px 2px;
}
.btn-group-sm>.btn, .btn-sm {
padding: 7px 12px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
.input-group {
position: relative;
display: table;
border-collapse: separate;
width: 88%;
float: left;
}
Tooltip JQUERY
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
The rest of your work would be practically cosmetics and replacing the http:// with a dropdown. That should be fairly easy for you to do.
Here is the DEMO

Try removing , adjusting left:20% , also possibly padding: 5px 15px; at [tooltip]:hover:after

Here's a tooltip that opens downwards.
[tooltip] {
display: inline;
position: relative;
border-bottom: 1px dotted rgba(0,0,0,.21);
}
[tooltip]:hover {
border-bottom: 1px solid transparent;
}
[tooltip]:hover:after {
background: #333;
background: rgba(0, 0, 0, .8);
border-radius: 5px;
top: calc(100% + 3px);
color: #fff;
content: attr(tooltip);
left: 50%;
transform: translateX(-50%);
padding: 5px 15px;
position: absolute;
z-index: 99;
white-space: nowrap;
box-sizing: border-box;
}
[tooltip]:hover:before {
border: solid;
border-color: transparent transparent rgba(0,0,0,.8);
border-width: 6px;
bottom: -3px;
left: calc(50% - 3px);
content: "";
position: absolute;
z-index: 99;
}
<div tooltip="I am tooltip">
I am some content.
</div>
<hr>
Let's see a tooltip on an <span tooltip="Hey, I'm a tooltip, too!">inline element.</span>
However, the way to go here is to have tooltip arguments on the html element and build specific positioning rules for your alignment params (You probably want to have tooltip-position attribute set to top|bottom|left|right and have specific CSS for each case). For example:
[tooltip][tooltip-position="bottom"]:hover:after { /*code here*/ }
From the looks of it, considering the required coding effort and your apparent CSS knowledge, using a library might save you some time. Possible candidates:
Bootstrap Tooltip
jQuery tootip
tooltipster
qtip2
tipped
tooltipsy
These are only a few examples, I'm not endorsing any of them and there are plenty of others. You should research this yourself and decide based on your projects' needs.