We Keep Coding

Issue with slideToggle()

I have a scenario in which I'm using slideToggle(). In id="beginner-sub", I have used customized scroll bar (enscroll.js) in case of overflow. If I use default browser's scroll bar, slideToggle() works fine. But when I use customized scroll bar, during slide up and slide down, there is a lag between moving element and scroll bar upward .i.e they don't reach at top on same time. Scroll bar is sliding up slowly.
What can be the issue ?
Here is the javascript code :-
$(document).ready(function(){
//For custom scroll loading
$('#beginner-sub').enscroll({
verticalTrackClass: 'track',
verticalHandleClass: 'handle',
minScrollbarLength: 28
});
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
$("#beginner").click(function(){
$("#beginner-sub").slideToggle("slow");
});
});
HTML code -
<!-- left panel area - begin -->
<div id="left-pane" class="col-md-2 col-lg-2">
<div class = "row-fluid">
<div id="flip">Algorithms<i id="slide-down" class="fa fa-chevron-down pull-right" aria-hidden="true"></i><i id="slide-up"
class="fa fa-chevron-up pull-right" aria-hidden="true"></i>
</div>
<div id="panel">
<a id="beginner">Beginner Level<i class="fa fa-hand-o-right pull-left" aria-hidden="true"></i><i class="fa fa-angle-double-down pull-right"
aria-hidden="true"></i><i class="fa fa-angle-double-up pull-right" aria-hidden="true"></i></a>
<div>
<div id="beginner-sub" class="well">
<a>Simple Program<i class="fa fa-angle-double-right pull-left" aria-hidden="true"></i></a>
<hr><a>Reverse a string<i class="fa fa-angle-double-right pull-left" aria-hidden="true"></i></a>
<hr><a>Odd Even<i class="fa fa-angle-double-right pull-left" aria-hidden="true"></i></a>
<hr><a>Possible Subsets<i class="fa fa-angle-double-right pull-left" aria-hidden="true"></i></a>
<hr><a>Uncommon Elements<i class="fa fa-angle-double-right pull-left" aria-hidden="true"></i></a>
<hr>
</div>
</div>
<hr>
<a>Intermediate Level<i class="fa fa-hand-o-right pull-left" aria-hidden="true"></i></a>
<hr>
</div>
</div>
</div>
CSS -
#flip{
overflow : auto;
color : white;
cursor : pointer;
font-family : Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size : 15px;
padding: 5px;
text-align: center;
border-radius : 0px;
border-width : 1px;
border-color : #cccccc;
border-style : solid;
background-color : #1a1a1a;
}
#panel {
overflow : auto;
color : white;
cursor : pointer;
font-family : Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size : 14px;
padding: 10px;
text-align: left;
border-radius : 0px;
border-width : 1px;
border-color : #cccccc;
border-style : solid;
background-color : #404040;
display: none;
}
#beginner-sub {
overflow : auto;
width : 206px;
height : 500px;
padding-left : 5px;
padding-right: 5px;
background-color : #666666;
border-style : dotted;
border-width : 0.5px;
border-radius : 0px;
padding-top : 10px;
margin-top : 20px;
padding-bottom : 15px;
}
.track {
position : relative !important;
overflow : auto !important;
margin-top : 20px;
width : 10px;
background-clip : padding-box;
background-color : silver;
border-style : solid;
border-color : transparent;
border-width : 0;
border-left-width : 1px;
}
.track.dragging,
.track:hover {
background : #f2f2f2;
background : rgba(0, 0, 0, 0.05);
-webkit-box-shadow : inset 1px 0 0 rgba(0, 0, 0, 0.1);
box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.1);
}
.track:active {
background : #f2f2f2;
background : rgba(0, 0, 0, 0.05);
-webkit-box-shadow : inset 1px 0 0 rgba(0, 0, 0, 0.14),
inset -1px -1px 0 rgba(0, 0, 0, 0.07);
box-shadow : inset 1px 0 0 rgba(0, 0, 0, 0.14),
inset -1px -1px 0 rgba(0, 0, 0, 0.07);
}
.handle {
overflow : auto;
width: 10px;
height : 50px !important;
background-clip: padding-box;
background: #ccc;
background: rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),
inset 0 -1px 0 rgba(0, 0, 0, 0.07);
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),
inset 0 -1px 0 rgba(0, 0, 0, 0.07);
}
.handle:hover {
background: #999;
background: rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
}
.dragging .handle,
.handle:active {
background: gray;
background: rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
}

First off, you're using an Anchor tag () to handle this. You should definitely use a tag in this instance. Also, you should be targeting that underneath your tag. Post your CSS up here so I can see what you're trying to do.

How to properly style the Select2 outline on :focus?

I'm using Select2 to style my <select> boxes, but I can't seem to style the forced outline which Chrome applies to the style:
Problem:
I've tried several lines of (very unprofessionally, !important) CSS code, but so far I haven't come up with the solution, this is what i'm at right now:
CSS:
.select2 > *:focus, .select2:focus .select2 > *, .select2 {
outline-width: 0px !important;
}
For the sake of excluding potential problems, i'm definitely including this CSS file, after my regular select2.css
Also, a fiddle would be problematic, but I could provide one if really necessary

This seems to do the trick:
<style>
.select2-container *:focus {
outline: none;
}
</style>
Here is a plunk.

This works for me:
&.select2-container--focus {
outline: none;
}

That's because neither select2 or chrome use the outline property. Here is the actual definition of select:focus pseudo element in select2 (+bootstrap):
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
Try changing border and box-shadow instead :
.form-control:focus {
border-color: unset;
-webkit-box-shadow: none;
box-shadow: none;
}
Hope this helps, cheers.

It using box shadow, not outline, look at the inspector:
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
so you need to reset it

How to apply css to link in dropdown table using arrow keys and hover event?

I'm a beginner web developer and I'm trying to enable selection in a search results dropdown using the up and down keys. Previously it was only working with a mouse, so you had to hover over the search result with the mouse and then click on the link you were interested in. So far I've been able to apply my css class to the result row in the table, but once I release the up or down key the css reverts to the default. This is my code so far:
Hover css:
.search .results a:hover {
text-decoration: none;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
border-color: #2380dd #2179d5 #1a60aa;
background-color: #338cdf;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf));
background-image: -webkit-linear-gradient(top, #59aaf4, #338cdf);
background-image: -moz-linear-gradient(top, #59aaf4, #338cdf);
background-image: -ms-linear-gradient(top, #59aaf4, #338cdf);
background-image: -o-linear-gradient(top, #59aaf4, #338cdf);
background-image: linear-gradient(top, #59aaf4, #338cdf);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-ms-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-o-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
}
Highlight css:
.highlight {
text-decoration: none;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
border-color: #2380dd #2179d5 #1a60aa;
background-color: #338cdf;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf));
background-image: -webkit-linear-gradient(top, #59aaf4, #338cdf);
background-image: -moz-linear-gradient(top, #59aaf4, #338cdf);
background-image: -ms-linear-gradient(top, #59aaf4, #338cdf);
background-image: -o-linear-gradient(top, #59aaf4, #338cdf);
background-image: linear-gradient(top, #59aaf4, #338cdf);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-ms-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-o-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
}
Keydown handler:
var current_row = -1;
var up = 38;
var down = 40;
$("#sinput").keydown(function (e) {
switch (e.keyCode) {
case down:
var links = $(".results").find("a");
if (current_row < links.length) {
links.eq(current_row).removeClass();
current_row++;
}
//links.eq(current_row).removeClass("hover");
links.eq(current_row).addClass("highlight");
break;
case up:
var links = $(".results").find("a");
if (current_row > 0) {
links.eq(current_row).removeClass();
current_row--;
}
//links.eq(current_row).removeClass("hover");
links.eq(current_row).addClass("highlight");
break;
}
return true;
});
I thought perhaps the hover class was interfering with my highlight class (which should not depend on the mouseover event) so I tried removing it. However this does not work. The highlight appears but as soon as I release the up/down key it goes away. Why might this be happening?

I've tried to reduce your code to the bare minimum and to me it looks like the JavaScript is working just fine (except that current_row < links.length should be current_row < links.length - 1).
var current_row = -1;
var up = 38;
var down = 40;
$("#sinput").keydown(function (e) {
switch (e.keyCode) {
case down:
var links = $(".results").find("a");
if (current_row < links.length - 1)
{
links.eq(current_row).removeClass();
current_row++;
}
links.eq(current_row).addClass("highlight");
break;
case up:
var links = $(".results").find("a");
if (current_row > 0)
{
links.eq(current_row).removeClass();
current_row--;
}
links.eq(current_row).addClass("highlight");
break;
}
return true;
});
.search .results a:hover {
color: red;
}
.highlight {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search">
<input type="text" id="sinput" />
<ul class="results">
<li><a>Foo</a></li>
<li><a>Bar</a></li>
<li><a>Baz</a></li>
</ul>
</div>
Original theory: What's probably causing the problem is that .highlight is an relatively short selector and in CSS the rule with the longest selector takes precedence.
If you have a rule .search .results a which sets the default style of the result items it overwrites the properties in .highlight.
The example below is therefore not working.
var current_row = -1;
var up = 38;
var down = 40;
$("#sinput").keydown(function (e) {
switch (e.keyCode) {
case down:
var links = $(".results").find("a");
if (current_row < links.length - 1)
{
links.eq(current_row).removeClass();
current_row++;
}
links.eq(current_row).addClass("highlight");
break;
case up:
var links = $(".results").find("a");
if (current_row > 0)
{
links.eq(current_row).removeClass();
current_row--;
}
links.eq(current_row).addClass("highlight");
break;
}
return true;
});
.search .results a {
color: gray;
}
.search .results a:hover {
color: red;
}
.highlight {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search">
<input type="text" id="sinput" />
<ul class="results">
<li><a>Foo</a></li>
<li><a>Bar</a></li>
<li><a>Baz</a></li>
</ul>
</div>
If this is the case you just have to be more specific in the declaration of .highlight to solve the problem:
var current_row = -1;
var up = 38;
var down = 40;
$("#sinput").keydown(function (e) {
switch (e.keyCode) {
case down:
var links = $(".results").find("a");
if (current_row < links.length - 1)
{
links.eq(current_row).removeClass();
current_row++;
}
links.eq(current_row).addClass("highlight");
break;
case up:
var links = $(".results").find("a");
if (current_row > 0)
{
links.eq(current_row).removeClass();
current_row--;
}
links.eq(current_row).addClass("highlight");
break;
}
return true;
});
.search .results a {
color: gray;
}
.search .results a:hover {
color: red;
}
.search .results a.highlight {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search">
<input type="text" id="sinput" />
<ul class="results">
<li><a>Foo</a></li>
<li><a>Bar</a></li>
<li><a>Baz</a></li>
</ul>
</div>
Actual solution: A keyup listener, which generates the search results, could cause the issue: when the up/down key is released the results are regenerated and overwrite the existing results (And therefore the highlight class). You could try to return from the keyup handler if e.keyCode is up or down or listen for input events instead (Which are fired only when the input actually changes): $("#sinput").on("input", function(e) { ... })

Skeuomorphic keys for keyboard shortcut documentation

I'm writing up some documentation for the keyboard shortcuts for some software. The documentation is in html/css/js. I'd like to have images (skeuomorphic?) of a control and c key instead of just having [ctrl] + [c]. I have seen this done on the web, but I am not finding any solutions with my web searches.
How can I render the Control and C keys as images using HTML/CSS/JS? I am happy to use a third party party library to achieve the effect.

The following CSS will style text wrapped in <kbd></kbd> tags exactly the same as the buttons you see here at StackOverflow.
CSS
kbd {
padding: .1em .6em;
border: 1px solid #ccc;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
background-color: #f7f7f7;
color: #333;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
border-radius: 3px;
display: inline-block;
margin: 0 .1em;
text-shadow: 0 1px 0 #fff;
line-height: 1.4;
white-space: nowrap
}
HTML
<kbd>⌘</kbd>+<kbd>X</kbd><br><br>
<kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Delete</kbd>
Output
⌘+X
Ctrl+Alt+Delete

There are pure CSS options for creating realistic, professional-quality key cap graphics. Google "keyboard key css", for a larger list, but my favorite is KEYS.css: it's super simple to use:
<link rel="stylesheet" href="keys.css" type="text/css" />
...
<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd>
renders as:

Javascript: to change class width from 0% to 100% and from 100% to 0% non stop

The code below changes the width of the "inner" class from 0% to 100%, so the bar is filled progressively with the green color. But this is incomplete because once the width is 100% I need it to go back to 0% and then to 100% and so on .. it will only stop going from 0% to 100% and from 100% to 0% when clicked.
I'll figure out how to add the clicking even but please help me achieve the non stop changing width.
Thanks a ton!
<style>
.bar {
background-color: #191919;
border-radius: 16px;
padding: 4px;
position: relative;
overflow: hidden;
width: 300px;
height: 24px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
-webkit-box-shadow: inset 0 1px 2px #000, 0 1px 0 #2b2b2b;
-moz-box-shadow: inset 0 1px 2px #000, 0 1px 0 #2b2b2b;
box-shadow: inset 0 1px 2px #000, 0 1px 0 #2b2b2b;
}
.bar .inner {
background: #999;
display: block;
position: absolute;
overflow: hidden;
max-width: 97.5% !important;
height: 24px;
text-indent: -9999px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 3px rgba(0, 0, 0, 0.4),
0 1px 1px #000;
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 3px rgba(0, 0, 0, 0.4),
0 1px 1px #000;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 3px rgba(0, 0, 0, 0.4),
0 1px 1px #000;
-webkit-transition: width 0.3s linear;
-moz-transition: width 0.3s linear;
transition: width 0.3s linear;
}
.green .inner {
background: #7EBD01;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7EBD01), to(#568201));
background: -moz-linear-gradient(top, #7EBD01, #568201);
}
</style>
<script type="text/javascript">
for (i=0;i<=100;i++){
setTimeout(function(){
document.querySelector('.green.bar .inner').style.width = i+'%';
},0);
}
</script>
<div class="green bar">
<div class="inner" style="width:0%"></div>
</div>

Fiddle: http://jsfiddle.net/ZeYJy/
I have included two ways to implement my suggestion: The first bar immediately goes back to 0 after reaching 100, the second bar has a small delay.
Use the modulo operator % to reset the counter to zero at 100. See below:
<script>
window.onload = function(){
var counter = 0;
window.setInterval(function(){
document.querySelector('.green.bar .inner').style.width =
(++counter % 101) + '%';
}, 50);
}
</script>
This script adds an interval on load, which increase the width of the element. After the counter has reached 100, the width will be reset to zero.
Explanation of the code:
var counter = 0 (inside a function, window.onload) - A local variable is defined and initialised at zero.
window.setInterval(function(){ ... }, 50) - An interval is defined, activating the function (first argument) every 50 milliseconds (20x a second, adjust to your own wishes)
(++counter % 101) - Increments the counter by one, modulo 101:
The modulo operator calculates the remainder after division, ie: 0 % 101 = 0, 100 % 101 = 100 and 200 % 101 = 99, 201 % 101 = 100, 202 % 101 = 100

Instead of setTimeout, use setInterval.
Each time the interval is fired, use a function to work out how much to fill the bar. Once it hits 100, reset it.
You can then clear the interval using clearInterval once the user has clicked.

This article shows how to repeat a CSS animation infinitely. This will be easier on your CPU than using Javascript:
http://developer.apple.com/library/safari/#codinghowtos/Mobile/GraphicsMediaAndVisualEffects/_index.html