Develop Reference

Onclick event on search bar suggestions

I have added a search bar with suggestion elements. On click of search bar all the elements is displayed but onclick event is not working on these list suggestion elements.
Have added click event to these suggestions which is stored in li .I want some actions to be performed onclick of these elements
$(document).on("click", ".search.search-list", function(e) {
console.log('clicked')
})
.search {
position: relative;
margin: 0 auto;
width: 300px;
}
.search input {
height: 26px;
width: 100%;
padding: 0 12px 0 25px;
/* background: white url("https://cssdeck.com/uploads/media/items/5/5JuDgOa.png") 8px 6px no-repeat; */
border-width: 1px;
border-style: solid;
border-color: #a8acbc #babdcc #c0c3d2;
border-radius: 13px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-moz-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-ms-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-o-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
}
.search input:focus {
outline: none;
border-color: #66b1ee;
-webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-moz-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-ms-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-o-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
}
.search input:focus + .results { display: block }
.search .results {
display: none;
position: absolute;
top: 35px;
left: 0;
right: 0;
z-index: 10;
padding: 0;
margin: 0;
border-width: 1px;
border-style: solid;
border-color: #cbcfe2 #c8cee7 #c4c7d7;
border-radius: 3px;
background-color: #fdfdfd;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfdfd), color-stop(100%, #eceef4));
background-image: -webkit-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -moz-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -ms-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -o-linear-gradient(top, #fdfdfd, #eceef4);
background-image: linear-gradient(top, #fdfdfd, #eceef4);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.search .results li { display: block }
.search .results li:first-child { margin-top: -1px }
.search .results li:first-child:before, .search .results li:first-child:after {
display: block;
content: '';
width: 0;
height: 0;
position: absolute;
left: 50%;
margin-left: -5px;
border: 5px outset transparent;
}
.search .results li:first-child:before {
border-bottom: 5px solid #c4c7d7;
top: -11px;
}
.search .results li:first-child:after {
border-bottom: 5px solid #fdfdfd;
top: -10px;
}
.search .results li:first-child:hover:before, .search .results li:first-child:hover:after { display: none }
.search .results li:last-child { margin-bottom: -1px }
.search .results a {
display: block;
position: relative;
margin: 0 -1px;
padding: 6px 40px 6px 10px;
color: #808394;
font-weight: 500;
text-shadow: 0 1px #fff;
border: 1px solid transparent;
border-radius: 3px;
}
.search .results a span { font-weight: 200 }
.search .results a:before {
content: '';
width: 18px;
height: 18px;
position: absolute;
top: 50%;
right: 10px;
margin-top: -9px;
/* background: url("https://cssdeck.com/uploads/media/items/7/7BNkBjd.png") 0 0 no-repeat; */
}
.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);
}
:-moz-placeholder {
color: #a7aabc;
font-weight: 200;
}
::-webkit-input-placeholder {
color: #a7aabc;
font-weight: 200;
}
.lt-ie9 .search input { line-height: 26px }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="modal fade" id="search-bar" role="dialog">
<div class="modal-dialog search-modal">
<div class="modal-content search-modal">
<div class="modal-body">
<section class="main">
<form class="search">
<input type="text" class="search-input" name="q" placeholder="Search..." />
<ul class="results" >
<li class="search-list">Search Result #1<br /><span>Description...</span></li>
<li class="search-list">Search Result #2<br /><span>Description...</span></li>
<li class="search-list">Search Result #3<br /><span>Description...</span></li>
<li class="search-list">Search Result #4</li>
</ul>
</form>
</section>
</div>
</div>
</div>
</div>

You just need to make two changes. I'll explain what I did.
The reason why the click event on search-list was not working is because you have defined it in js as .search.search-list. There should be a space between them, like .search .search-list, as #Aioros suggested.
You have displayed the dropdown using CSS :focus, like when the cursor is inside search input, the dropdown should show. Now when the user clicks on one of the items from the dropdown, the focus shifts away from the search input field, thus making the dropdown invisible again. I have used a small jQuery solution to display the dropdown when the user clicks on search field.
$(".search-input").on("click", function(e) {
$(".results").css({
"display": "block"
});
console.log("HEY");
})
$(".search .search-list").on("click", function(e) {
console.log('clicked')
})
.search {
position: relative;
margin: 0 auto;
width: 300px;
}
.search input {
height: 26px;
width: 100%;
padding: 0 12px 0 25px;
/* background: white url("https://cssdeck.com/uploads/media/items/5/5JuDgOa.png") 8px 6px no-repeat; */
border-width: 1px;
border-style: solid;
border-color: #a8acbc #babdcc #c0c3d2;
border-radius: 13px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-moz-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-ms-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-o-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
}
.search input:focus {
outline: none;
border-color: #66b1ee;
-webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-moz-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-ms-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-o-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
}
/*.search input:focus + .results { display: block }*/
.search .results {
display: none;
position: absolute;
top: 35px;
left: 0;
right: 0;
z-index: 10;
padding: 0;
margin: 0;
border-width: 1px;
border-style: solid;
border-color: #cbcfe2 #c8cee7 #c4c7d7;
border-radius: 3px;
background-color: #fdfdfd;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfdfd), color-stop(100%, #eceef4));
background-image: -webkit-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -moz-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -ms-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -o-linear-gradient(top, #fdfdfd, #eceef4);
background-image: linear-gradient(top, #fdfdfd, #eceef4);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.search .results li {
display: block
}
.search .results li:first-child {
margin-top: -1px
}
.search .results li:first-child:before,
.search .results li:first-child:after {
display: block;
content: '';
width: 0;
height: 0;
position: absolute;
left: 50%;
margin-left: -5px;
border: 5px outset transparent;
}
.search .results li:first-child:before {
border-bottom: 5px solid #c4c7d7;
top: -11px;
}
.search .results li:first-child:after {
border-bottom: 5px solid #fdfdfd;
top: -10px;
}
.search .results li:first-child:hover:before,
.search .results li:first-child:hover:after {
display: none
}
.search .results li:last-child {
margin-bottom: -1px
}
.search .results a {
display: block;
position: relative;
margin: 0 -1px;
padding: 6px 40px 6px 10px;
color: #808394;
font-weight: 500;
text-shadow: 0 1px #fff;
border: 1px solid transparent;
border-radius: 3px;
}
.search .results a span {
font-weight: 200
}
.search .results a:before {
content: '';
width: 18px;
height: 18px;
position: absolute;
top: 50%;
right: 10px;
margin-top: -9px;
/* background: url("https://cssdeck.com/uploads/media/items/7/7BNkBjd.png") 0 0 no-repeat; */
}
.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);
}
:-moz-placeholder {
color: #a7aabc;
font-weight: 200;
}
::-webkit-input-placeholder {
color: #a7aabc;
font-weight: 200;
}
.lt-ie9 .search input {
line-height: 26px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="modal fade" id="search-bar" role="dialog">
<div class="modal-dialog search-modal">
<div class="modal-content search-modal">
<div class="modal-body">
<section class="main">
<form class="search">
<input type="text" class="search-input" name="q" placeholder="Search..." />
<ul class="results">
<li class="search-list">Search Result #1<br /><span>Description...</span></li>
<li class="search-list">Search Result #2<br /><span>Description...</span></li>
<li class="search-list">Search Result #3<br /><span>Description...</span></li>
<li class="search-list">Search Result #4</li>
</ul>
</form>
</section>
</div>
</div>
</div>
</div>

show progress percentage on progress bar

I have some HTML file with css and javascript, it shows progress bar depending on project start date, end date and current date, it works fine but I need that progress percentage to show into the bar.
there is my file content:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<style type="text/css">
.meter {
height: 20px;
/* Can be anything */
position: relative;
margin: 60px 0 20px 0;
/* Just for demo spacing */
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 10px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
-moz-box-shadow : inset 0 -1px 1px rgba(255, 255, 255, 0.3);
box-shadow : inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}
.meter > span {
display: block;
height: 100%;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43, 194, 83);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(43, 194, 83)), color-stop(1, rgb(84, 240, 84)));
background-image: -moz-linear-gradient(center bottom, rgb(43, 194, 83) 37%, rgb(84, 240, 84) 69%);
-webkit-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
-moz-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
position: relative;
overflow: hidden;
}
.meter > span:after, .animate > span > span {
content:"";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
z-index: 1;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
-webkit-animation: move 2s linear infinite;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}
.animate > span:after {
display: none;
}
#-webkit-keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
.orange > span {
background-color: #f1a165;
background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f1a165), color-stop(1, #f36d0a));
background-image: -webkit-linear-gradient(#f1a165, #f36d0a);
}
.red > span {
background-color: #f0a3a3;
background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f0a3a3), color-stop(1, #f42323));
background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
}
.nostripes > span > span, .nostripes > span:after {
-webkit-animation: none;
background-image: none;
}
</style>
<title>Date to Percentage Progress</title>
<script type='text/javascript'>//<![CDATA[
var targetDate = new Date("07/12/2017");
var beginDate = new Date("04/20/2017");
var totalTime = (targetDate - beginDate);
$(function () {
//Create a custom event on the span to handle incoming data for animation.
$(".meter > span").bind("progress-event", function (e, data) {
$(this)
.width($(this).prop("width"))
.data("origWidth", data.Complete)
.animate({
width: $(this).data("origWidth") + "%"
}, 1200);
$(this).prop("title",($(this).data("origWidth") + "%"));
});
//Initial animation on page load.
$(".meter > span").each(function () {
$(document).trigger("date-changed", {
Date: new Date()
});
});
//Apply the datepicker with an event handler for a selected date
$("#date-input").datepicker({
onSelect: function (selectedDate, obj) {
$(document).trigger("date-changed", {
Date: selectedDate
});
} // end onSelect function
});
});
//Custom event to handle a date being picked from the datepicker
$(document).bind("date-changed", function (e, data) {
var dateProgress = new Date(data.Date) - beginDate;
var completionPercentage = (Math.round((dateProgress / totalTime) * 100));
if(completionPercentage > 100) { //Make sure we don't go past 100
completionPercentage = 100;
} // end if
$(".meter > span").trigger("progress-event", {
Date: data.Date,
Complete: completionPercentage
});
});
//]]>
</script>
</head>
<body>
<div class="meter"> <span></span>
</body>
</html>

Since you already using jquery. I would suggest to use jQueryUI progressbar UI widget and refer this example from the official jQueryUI website.
https://jqueryui.com/progressbar/#download
I hope this helps.

How to change the colour of a scrollbar on a web page? [closed]

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 5 years ago.
Improve this question
Can somebody tell me how to change the colour of a scrollbar on a web page?

You can do this with CSS
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
}
body::-webkit-scrollbar-thumb {
background-color: red;
outline: 1px solid darkgrey;
}

You May Use SlimScroll. It also helps more features than adding color.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://rocha.la/misc/jsdemos/slimScroll/jquery.slimscroll.js"></script>
<script>
$(function() {
$('#id_of_div_you_need_scroll').slimScroll({
width: '300px',
height: '200px',
color: '#ffcc00',
/* size: '10px',
position: 'left',
alwaysVisible: true,
distance: '20px',
start: $('#child_image_element'),
railVisible: true,
railColor: '#222',
railOpacity: 0.3,
wheelStep: 10,
allowPageScroll: false,
disableFadeOut: false*/
});
});
</script>

enter code here
$(document).ready(function () {
if (!$.browser.webkit) {
$('.wrapper').html('<p>Sorry! Non webkit users. :(</p>');
}
});
header
{
font-family: 'Lobster', cursive;
text-align: center;
font-size: 25px;
}
#info
{
font-size: 18px;
color: #555;
text-align: center;
margin-bottom: 25px;
}
a{
color: #074E8C;
}
.scrollbar
{
margin-left: 30px;
float: left;
height: 300px;
width: 65px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}
.force-overflow
{
min-height: 450px;
}
#wrapper
{
text-align: center;
width: 500px;
margin: auto;
}
/*
* STYLE 1
*/
#style-1::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
/*
* STYLE 2
*/
#style-2::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
#style-2::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
#style-2::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #D62929;
}
/*
* STYLE 3
*/
#style-3::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-3::-webkit-scrollbar
{
width: 6px;
background-color: #F5F5F5;
}
#style-3::-webkit-scrollbar-thumb
{
background-color: #000000;
}
/*
* STYLE 4
*/
#style-4::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-4::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-4::-webkit-scrollbar-thumb
{
background-color: #000000;
border: 2px solid #555555;
}
/*
* STYLE 5
*/
#style-5::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-5::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-5::-webkit-scrollbar-thumb
{
background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%,
color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.5, transparent), to(transparent));
}
/*
* STYLE 6
*/
#style-6::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-6::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-6::-webkit-scrollbar-thumb
{
background-color: #F90;
background-image: -webkit-linear-gradient(45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent)
}
/*
* STYLE 7
*/
#style-7::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
border-radius: 10px;
}
#style-7::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-7::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-image: -webkit-gradient(linear,
left bottom,
left top,
color-stop(0.44, rgb(122,153,217)),
color-stop(0.72, rgb(73,125,189)),
color-stop(0.86, rgb(28,58,148)));
}
/*
* STYLE 8
*/
#style-8::-webkit-scrollbar-track
{
border: 1px solid black;
background-color: #F5F5F5;
}
#style-8::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-8::-webkit-scrollbar-thumb
{
background-color: #000000;
}
/*
* STYLE 9
*/
#style-9::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-9::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-9::-webkit-scrollbar-thumb
{
background-color: #F90;
background-image: -webkit-linear-gradient(90deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent)
}
/*
* STYLE 10
*/
#style-10::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
border-radius: 10px;
}
#style-10::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-10::-webkit-scrollbar-thumb
{
background-color: #AAA;
border-radius: 10px;
background-image: -webkit-linear-gradient(90deg,
rgba(0, 0, 0, .2) 25%,
transparent 25%,
transparent 50%,
rgba(0, 0, 0, .2) 50%,
rgba(0, 0, 0, .2) 75%,
transparent 75%,
transparent)
}
/*
* STYLE 11
*/
#style-11::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
border-radius: 10px;
}
#style-11::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-11::-webkit-scrollbar-thumb
{
background-color: #3366FF;
border-radius: 10px;
background-image: -webkit-linear-gradient(0deg,
rgba(255, 255, 255, 0.5) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0.5) 75%,
transparent 75%,
transparent)
}
/*
* STYLE 12
*/
#style-12::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
border-radius: 10px;
background-color: #444444;
}
#style-12::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
#style-12::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-color: #D62929;
background-image: -webkit-linear-gradient(90deg,
transparent,
rgba(0, 0, 0, 0.4) 50%,
transparent,
transparent)
}
/*
* STYLE 13
*/
#style-13::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
border-radius: 10px;
background-color: #CCCCCC;
}
#style-13::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
#style-13::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-color: #D62929;
background-image: -webkit-linear-gradient(90deg,
transparent,
rgba(0, 0, 0, 0.4) 50%,
transparent,
transparent)
}
/*
* STYLE 14
*/
#style-14::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
background-color: #CCCCCC;
}
#style-14::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-14::-webkit-scrollbar-thumb
{
background-color: #FFF;
background-image: -webkit-linear-gradient(90deg,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) 25%,
transparent 100%,
rgba(0, 0, 0, 1) 75%,
transparent)
}
/*
* STYLE 15
*/
#style-15::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
background-color: #F5F5F5;
border-radius: 10px;
}
#style-15::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-15::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-color: #FFF;
background-image: -webkit-gradient(linear,
40% 0%,
75% 84%,
from(#4D9C41),
to(#19911D),
color-stop(.6,#54DE5D))
}
/*
* STYLE 16
*/
#style-16::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
background-color: #F5F5F5;
border-radius: 10px;
}
#style-16::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-16::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-color: #FFF;
background-image: -webkit-linear-gradient(top,
#e4f5fc 0%,
#bfe8f9 50%,
#9fd8ef 51%,
#2ab0ed 100%);
}
<div id="wrapper">
<div class="scrollbar" id="style-default">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-1">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-2">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-3">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-4">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-5">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-6">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-7">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-8">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-9">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-10">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-11">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-13">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-14">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-15">
<div class="force-overflow"></div>
</div>
</div>

Changing scrollbar colour is a bit tricky. You can do it using the specific CSS rules, but it's going to be very dependent on the browser you are using.
To solve this, there are plenty of JavaScript plugins that hidde the original scrollbar and set a new one made by html elements, which is fully customizable. You can review this, for example.

How to place forgot password link inside the password textbox [closed]

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 9 years ago.
Improve this question
how to add link inside the textbox using jquery or any other techniques.
I have the login form ,in that username and password have the forgot link how to add the link inside the textbox .
similar like paypal login page: https://www.paypal.com/ca/webapps/mpp/home

This is what it looks like:
And the code (fiddle):
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css"></style>
<style type="text/css">
.div-0-mbi { border-color: rgb(102, 102, 102); color: rgb(102, 102, 102); font-family: Arial, Helvetica, sans-serif; font-size: 13px; height: 25px; margin-top: 9px; outline-color: rgb(102, 102, 102); text-align: right; text-decoration: none; width: 510px; -webkit-column-rule-color: rgb(102, 102, 102); -webkit-font-smoothing: antialiased; -webkit-perspective-origin-x: 255px; -webkit-perspective-origin-y: 12.5px; -webkit-text-emphasis-color: rgb(102, 102, 102); -webkit-text-fill-color: rgb(102, 102, 102); -webkit-text-stroke-color: rgb(102, 102, 102); -webkit-transform-origin: 255px 12.5px; }
.div-1-mbi { float: left; height: 26px; margin-right: 8px; position: relative; width: 180px; -webkit-perspective-origin-x: 90px; -webkit-perspective-origin-y: 13px; -webkit-transform-origin: 90px 13px; }
.label-2-mbi { border-color: rgb(145, 145, 145); color: rgb(145, 145, 145); cursor: text; display: block; font-family: 'lucida grande', 'lucida sans unicode', arial, sans-serif; font-size: 11px; height: 15px; left: 12px; outline-color: rgb(145, 145, 145); position: absolute; text-decoration: none; text-shadow: rgba(255, 255, 255, 0.701961) 0px 1px 0px; top: 6px; width: 29px; z-index: 2; -webkit-column-rule-color: rgb(145, 145, 145); -webkit-perspective-origin-x: 14.5px; -webkit-perspective-origin-y: 7.5px; -webkit-text-emphasis-color: rgb(145, 145, 145); -webkit-text-fill-color: rgb(145, 145, 145); -webkit-text-stroke-color: rgb(145, 145, 145); -webkit-transform-origin: 14.5px 7.5px; }
.input-3-mbi { background-clip: padding-box; background-color: rgb(222, 222, 222); border: 1px solid rgb(87, 169, 217); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; box-shadow: rgba(255, 255, 255, 0.14902) 0px 1px 0px 0px, rgba(58, 144, 194, 0.6) 0px 0px 5px 0px, rgba(0, 0, 0, 0.2) 0px 2px 2px 0px inset; box-sizing: border-box; color: rgb(51, 51, 51); font-family: 'lucida grande', 'lucida sans unicode', arial, sans-serif; font-size: 11px; height: 26px; margin: 0px; outline-color: rgb(51, 51, 51); padding: 0px 55px 0px 10px; text-decoration: none; text-shadow: rgb(214, 214, 214) 0px 1px 0px; text-overflow: ellipsis; width: 180px; -webkit-appearance: none; -webkit-background-clip: padding-box; -webkit-box-shadow: rgba(255, 255, 255, 0.14902) 0px 1px 0px 0px, rgba(58, 144, 194, 0.6) 0px 0px 5px 0px, rgba(0, 0, 0, 0.2) 0px 2px 2px 0px inset; -webkit-column-rule-color: rgb(51, 51, 51); -webkit-perspective-origin-x: 90px; -webkit-perspective-origin-y: 13px; -webkit-text-emphasis-color: rgb(51, 51, 51); -webkit-text-fill-color: rgb(51, 51, 51); -webkit-text-stroke-color: rgb(51, 51, 51); -webkit-transform-origin: 90px 13px; -webkit-transition: border 0.2s ease-in-out 0s, background-color 0.2s ease-in-out 0s; transition: border 0.2s ease-in-out 0s, background-color 0.2s ease-in-out 0s; }
.span-4-mbi { }
.a-5-mbi { background-color: rgb(118, 118, 118); border-color: rgb(255, 255, 255); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; box-sizing: border-box; color: rgb(255, 255, 255); display: block; font-size: 10px; font-weight: 600; height: 18px; line-height: 18px; outline-color: rgb(255, 255, 255); padding-left: 6px; padding-right: 6px; position: absolute; right: 4px; text-decoration: none; text-shadow: rgba(0, 0, 0, 0.247059) 0px -1px 0px; top: 4px; width: 45px; -webkit-column-rule-color: rgb(255, 255, 255); -webkit-perspective-origin-x: 22.5px; -webkit-perspective-origin-y: 9px; -webkit-text-decorations-in-effect: none; -webkit-text-emphasis-color: rgb(255, 255, 255); -webkit-text-fill-color: rgb(255, 255, 255); -webkit-text-stroke-color: rgb(255, 255, 255); -webkit-transform-origin: 22.5px 9px; }
.div-6-mbi { display: none; height: auto; width: auto; -webkit-perspective-origin-x: 50%; -webkit-perspective-origin-y: 50%; -webkit-transform-origin: 50% 50%; }
.p-9-mbi { line-height: 19px; margin-bottom: 8px; margin-top: 8px; }
.a-12-mbi { background-image: -webkit-linear-gradient(bottom, rgb(191, 191, 191) 0%, rgb(191, 191, 191) 20%, rgb(224, 224, 224) 100%); border-color: rgb(86, 86, 86) rgb(77, 77, 77) rgb(62, 62, 62); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-style: solid; border-width: 1px; border-top-left-radius: 5px; border-top-right-radius: 5px; box-shadow: rgb(236, 236, 236) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.2) 0px 1px 0px 0px; color: rgb(51, 51, 51); cursor: pointer; display: inline-block; font-size: 11px; font-weight: bold; height: 15.998481750488281px; line-height: 15.998481750488281px; margin-left: 2px; margin-right: 4px; min-width: 44px; outline-color: rgb(51, 51, 51); padding: 4px 8px; position: relative; text-align: center; text-decoration: none; text-shadow: rgb(224, 224, 224) 0px 1px 0px; -webkit-box-shadow: rgb(236, 236, 236) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.2) 0px 1px 0px 0px; -webkit-column-rule-color: rgb(51, 51, 51); -webkit-text-decorations-in-effect: none; -webkit-text-emphasis-color: rgb(51, 51, 51); -webkit-text-fill-color: rgb(51, 51, 51); -webkit-text-stroke-color: rgb(51, 51, 51); }
.label-14-mbi { border-color: rgb(62, 62, 62); color: rgb(62, 62, 62); cursor: text; display: block; font-family: 'lucida grande', 'lucida sans unicode', arial, sans-serif; font-size: 11px; height: 15px; left: 12px; outline-color: rgb(62, 62, 62); position: absolute; text-decoration: none; text-shadow: rgba(255, 255, 255, 0.701961) 0px 1px 0px; top: 6px; width: 51px; z-index: 2; -webkit-column-rule-color: rgb(62, 62, 62); -webkit-perspective-origin-x: 25.5px; -webkit-perspective-origin-y: 7.5px; -webkit-text-emphasis-color: rgb(62, 62, 62); -webkit-text-fill-color: rgb(62, 62, 62); -webkit-text-stroke-color: rgb(62, 62, 62); -webkit-transform-origin: 25.5px 7.5px; }
.input-15-mbi { background-clip: padding-box; background-color: rgb(204, 204, 204); border: 1px solid rgb(92, 92, 94); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; box-shadow: rgba(255, 255, 255, 0.14902) 0px 1px 0px 0px, rgba(0, 0, 0, 0.2) 0px 2px 2px 0px inset; box-sizing: border-box; color: rgb(51, 51, 51); font-family: verdana, arial, sans-serif; font-size: 11px; height: 26px; margin: 0px; outline-color: rgb(51, 51, 51); padding: 0px 55px 0px 10px; text-decoration: none; text-shadow: rgb(214, 214, 214) 0px 1px 0px; text-overflow: ellipsis; width: 180px; -webkit-appearance: none; -webkit-background-clip: padding-box; -webkit-box-shadow: rgba(255, 255, 255, 0.14902) 0px 1px 0px 0px, rgba(0, 0, 0, 0.2) 0px 2px 2px 0px inset; -webkit-column-rule-color: rgb(51, 51, 51); -webkit-perspective-origin-x: 90px; -webkit-perspective-origin-y: 13px; -webkit-text-emphasis-color: rgb(51, 51, 51); -webkit-text-fill-color: rgb(51, 51, 51); -webkit-text-stroke-color: rgb(51, 51, 51); -webkit-transform-origin: 90px 13px; -webkit-transition: border 0.2s ease-in-out 0s, background-color 0.2s ease-in-out 0s; transition: border 0.2s ease-in-out 0s, background-color 0.2s ease-in-out 0s; }
.span-18-mbi { clip: rect(1px 1px 1px 1px); display: block; height: 1px; overflow: hidden; position: absolute; width: 1px; -webkit-perspective-origin-x: 0.5px; -webkit-perspective-origin-y: 0.5px; -webkit-transform-origin: 0.5px 0.5px; }
.p-21-mbi { height: 57px; line-height: 19px; margin-bottom: 8px; margin-top: 8px; -webkit-perspective-origin-x: 0.5px; -webkit-perspective-origin-y: 28.5px; -webkit-transform-origin: 0.5px 28.5px; }
.p-22-mbi { height: 209px; line-height: 19px; margin-bottom: 8px; margin-top: 8px; -webkit-perspective-origin-x: 0.5px; -webkit-perspective-origin-y: 104.5px; -webkit-transform-origin: 0.5px 104.5px; }
.input-31-mbi { background-color: rgba(0, 0, 0, 0); background-image: -webkit-linear-gradient(bottom, rgb(191, 191, 191) 0%, rgb(191, 191, 191) 20%, rgb(224, 224, 224) 100%); border-color: rgb(86, 86, 86) rgb(77, 77, 77) rgb(62, 62, 62); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-style: solid; border-width: 1px; border-top-left-radius: 5px; border-top-right-radius: 5px; box-shadow: rgb(236, 236, 236) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.2) 0px 1px 0px 0px; box-sizing: content-box; color: rgb(51, 51, 51); cursor: pointer; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; height: 15.984375px; line-height: 15.998481750488281px; margin: 0px 4px 0px 2px; min-width: 44px; outline-color: rgb(51, 51, 51); padding: 4px 8px; position: relative; text-decoration: none; text-shadow: rgb(224, 224, 224) 0px 1px 0px; width: 44px; -webkit-appearance: none; -webkit-box-shadow: rgb(236, 236, 236) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.2) 0px 1px 0px 0px; -webkit-column-rule-color: rgb(51, 51, 51); -webkit-font-smoothing: antialiased; -webkit-perspective-origin-x: 31px; -webkit-perspective-origin-y: 12.984375px; -webkit-text-emphasis-color: rgb(51, 51, 51); -webkit-text-fill-color: rgb(51, 51, 51); -webkit-text-stroke-color: rgb(51, 51, 51); -webkit-transform-origin: 31px 12.984375px; }
.a-32-mbi { background-image: -webkit-linear-gradient(bottom, rgb(0, 121, 193) 0%, rgb(0, 121, 193) 20%, rgb(0, 161, 255) 100%); border-color: rgb(86, 86, 86) rgb(77, 77, 77) rgb(62, 62, 62); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-style: solid; border-width: 1px; border-top-left-radius: 5px; border-top-right-radius: 5px; box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px, rgb(77, 190, 255) 0px 1px 0px 0px inset; color: rgb(255, 255, 255); cursor: pointer; display: inline-block; font-size: 11px; font-weight: bold; height: 15.984375px; line-height: 15.998481750488281px; min-width: 44px; outline-color: rgb(255, 255, 255); padding: 4px 8px; text-align: center; text-decoration: none; text-shadow: rgb(0, 105, 44) 0px -1px 0px; width: 44px; -webkit-box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px, rgb(77, 190, 255) 0px 1px 0px 0px inset; -webkit-column-rule-color: rgb(255, 255, 255); -webkit-perspective-origin-x: 31px; -webkit-perspective-origin-y: 12.984375px; -webkit-text-decorations-in-effect: none; -webkit-text-emphasis-color: rgb(255, 255, 255); -webkit-text-fill-color: rgb(255, 255, 255); -webkit-text-stroke-color: rgb(255, 255, 255); -webkit-transform-origin: 31px 12.984375px; }
</style>
</head>
<body>
<div class="div-0-mbi">
<div id="login_emaildiv" class="div-1-mbi">
<label for="login_email" class="label-2-mbi">Email</label>
<input type="text" id="login_email" name="login_email" value="" class="input-3-mbi">
<span class="span-4-mbi">
<a aria-expanded="false" data-shorttext="?" data-longtext="forgot?" aria-controls="passwordRecovery1Desc" id="passwordRecovery1" href="#" role="button" class="a-5-mbi">forgot?</a>
<div aria-hidden="true" aria-labelledby="passwordRecovery1" id="passwordRecovery1Desc" class="div-6-mbi">
<div class="span-4-mbi"><span id="calloutCloseBtn" class="span-4-mbi">Close</span></div>
<p class="p-9-mbi">Forgot your email address?</p>
<p class="p-9-mbi">Enter up to 3 of your email addresses and we'll help you find your account.</p>
<span class="span-4-mbi">
Get started
</span>
</div>
</span>
</div>
<div id="login_passworddiv" class="div-1-mbi">
<label for="login_password" class="label-14-mbi">Password</label>
<input type="password" id="login_password" name="login_password" autocomplete="off" class="input-15-mbi">
<span class="span-4-mbi">
<a aria-expanded="false" data-shorttext="?" data-longtext="forgot?" id="passwordRecovery2" aria-controls="passwordRecovery2Desc" href="#" role="button" class="a-5-mbi">
forgot?
<span class="span-18-mbi">
<div class="span-4-mbi">
<span id="calloutCloseBtn" class="span-4-mbi">Close</span>
</div>
<p class="p-21-mbi">Forgot your password?</p>
<p class="p-22-mbi">Enter your email address and we'll help you reset your password.</p>
<span class="span-4-mbi">
Get started
</span>
</span>
</a>
<div aria-hidden="true" aria-labelledby="passwordRecovery2" id="passwordRecovery2Desc" class="div-6-mbi">
<div class="span-4-mbi">
<span id="calloutCloseBtn" class="span-4-mbi">Close</span>
</div>
<p class="p-9-mbi">Forgot your password?</p>
<p class="p-9-mbi">Enter your email address and we'll help you reset your password.</p>
<span class="span-4-mbi">
Get started
</span>
</div>
</span>
</div>
<input type="submit" name="submit.x" value="Log In" class="input-31-mbi">
Sign Up
</div>
</body>
</html>

Place the link and input in another element.
Style that element to look like an input.
Style the actual input to be invisible (i.e. to have no borders or background).

Is there any technique or plugin to illuminate an element(button)?

I was trying to use "jquery-illuminate" ( http://www.tonylea.com/2011/jquery-illuminate )
However, this didn't work on my web service(jQuery1.9.1)
Can anyone show me how to illuminate an element(button)?
I tried this. But this just hide and shows element.
I want to illuminate a button:(
(function(t){
var func = arguments.callee;
if(t) func.rest=t*2;
if(--func.rest>=0) $(".btn#illuminate").fadeTo(800,(func.b = !!!func.b) ? 0.5 : 1,func);
})(3);

Glowing buttons (HTML & CSS):
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Glowing buttons</title>
</head>
<body>
<!-- Blue -->
Hello World
<!-- Yellow -->
Hello World
<!-- White -->
Hello World
</body>
</html>
COMPASS (SCSS):
#import "compass/css3/images";
#import "compass/css3/border-radius";
#import "compass/css3/box-shadow";
#import "compass/css3/animation";
body {
background: #000 url('http://subtlepatterns.com/patterns/office.png');
padding: 30px;
font-family: "Helvetica Neue", "Helvetica", sans-serif;
}
/* Blue Shadow */
#include keyframes(blue) {
0%, 100%{
#include box-shadow(1px 0px 19px 4px rgba(0, 130, 196, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5));
}
50% {
#include box-shadow(0px 0px 0px 0px rgba(0, 130, 196, 0), inset 0px 0px 0px rgba(255, 255, 255, 0));
}
}
/* Yellow Shadow */
#include keyframes(yellow) {
0%, 100%{
#include box-shadow(1px 0px 19px 4px rgba(255, 245, 3, 1), inset 0px 0px 10px rgba(255, 255, 255, 0.5));
}
50% {
#include box-shadow(0px 0px 0px 0px rgba(255, 245, 3, 0), inset 0px 0px 0px rgba(255, 255, 255, 0));
}
}
/* White Shadow */
#include keyframes(white) {
0%, 100%{
#include box-shadow(1px 0px 19px 4px rgba(255, 255, 255, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5));
}
50% {
#include box-shadow(0px 0px 0px 0px rgba(255, 255, 255, 0), inset 0px 0px 0px rgba(255, 255, 255, 0));
}
}
/* Button */
.button {
text-align: center;
padding: 10px 20px;
text-decoration: none;
color: #000;
font-weight: bold;
#include border-radius(10px 0);
margin-right: 20px;
}
/* Blue Background */
.blue {
text-shadow: 0px 1px 0px #83e0f7;
#include background-image(linear-gradient(top, #87e0fd, #53cbf1));
#include animation(blue 2s infinite);
}
/* Yellow Background */
.yellow {
text-shadow: 0px 1px 0px #faffc7;
#include background-image(linear-gradient(top, #fff966, #f3fd80));
#include animation(yellow 2s infinite);
}
/* White Background */
.white {
text-shadow: 0px 1px 0px #fff;
#include background-image(linear-gradient(top, #fff, #ccc));
#include animation(white 2s infinite);
}
CSS:
body {
background: black url("http://subtlepatterns.com/patterns/office.png");
padding: 30px;
font-family: "Helvetica Neue", "Helvetica", sans-serif; }
/* Blue Shadow */
#-moz-keyframes blue {
0%, 100% {
-moz-box-shadow: 1px 0px 19px 4px rgba(0, 130, 196, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5);
box-shadow: 1px 0px 19px 4px rgba(0, 130, 196, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5); }
50% {
-moz-box-shadow: 0px 0px 0px 0px rgba(0, 130, 196, 0), inset 0px 0px 0px rgba(255, 255, 255, 0);
box-shadow: 0px 0px 0px 0px rgba(0, 130, 196, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }
#-webkit-keyframes blue {
0%, 100% {
-webkit-box-shadow: 1px 0px 19px 4px rgba(0, 130, 196, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5);
box-shadow: 1px 0px 19px 4px rgba(0, 130, 196, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5); }
50% {
-webkit-box-shadow: 0px 0px 0px 0px rgba(0, 130, 196, 0), inset 0px 0px 0px rgba(255, 255, 255, 0);
box-shadow: 0px 0px 0px 0px rgba(0, 130, 196, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }
#-o-keyframes blue {
0%, 100% {
box-shadow: 1px 0px 19px 4px rgba(0, 130, 196, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5); }
50% {
box-shadow: 0px 0px 0px 0px rgba(0, 130, 196, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }
#keyframes blue {
0%, 100% {
box-shadow: 1px 0px 19px 4px rgba(0, 130, 196, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5); }
50% {
box-shadow: 0px 0px 0px 0px rgba(0, 130, 196, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }
/* Yellow Shadow */
#-moz-keyframes yellow {
0%, 100% {
-moz-box-shadow: 1px 0px 19px 4px #fff503, inset 0px 0px 10px rgba(255, 255, 255, 0.5);
box-shadow: 1px 0px 19px 4px #fff503, inset 0px 0px 10px rgba(255, 255, 255, 0.5); }
50% {
-moz-box-shadow: 0px 0px 0px 0px rgba(255, 245, 3, 0), inset 0px 0px 0px rgba(255, 255, 255, 0);
box-shadow: 0px 0px 0px 0px rgba(255, 245, 3, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }
#-webkit-keyframes yellow {
0%, 100% {
-webkit-box-shadow: 1px 0px 19px 4px #fff503, inset 0px 0px 10px rgba(255, 255, 255, 0.5);
box-shadow: 1px 0px 19px 4px #fff503, inset 0px 0px 10px rgba(255, 255, 255, 0.5); }
50% {
-webkit-box-shadow: 0px 0px 0px 0px rgba(255, 245, 3, 0), inset 0px 0px 0px rgba(255, 255, 255, 0);
box-shadow: 0px 0px 0px 0px rgba(255, 245, 3, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }
#-o-keyframes yellow {
0%, 100% {
box-shadow: 1px 0px 19px 4px #fff503, inset 0px 0px 10px rgba(255, 255, 255, 0.5); }
50% {
box-shadow: 0px 0px 0px 0px rgba(255, 245, 3, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }
#keyframes yellow {
0%, 100% {
box-shadow: 1px 0px 19px 4px #fff503, inset 0px 0px 10px rgba(255, 255, 255, 0.5); }
50% {
box-shadow: 0px 0px 0px 0px rgba(255, 245, 3, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }
/* White Shadow */
#-moz-keyframes white {
0%, 100% {
-moz-box-shadow: 1px 0px 19px 4px rgba(255, 255, 255, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5);
box-shadow: 1px 0px 19px 4px rgba(255, 255, 255, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5); }
50% {
-moz-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0), inset 0px 0px 0px rgba(255, 255, 255, 0);
box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }
#-webkit-keyframes white {
0%, 100% {
-webkit-box-shadow: 1px 0px 19px 4px rgba(255, 255, 255, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5);
box-shadow: 1px 0px 19px 4px rgba(255, 255, 255, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5); }
50% {
-webkit-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0), inset 0px 0px 0px rgba(255, 255, 255, 0);
box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }
#-o-keyframes white {
0%, 100% {
box-shadow: 1px 0px 19px 4px rgba(255, 255, 255, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5); }
50% {
box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }
#keyframes white {
0%, 100% {
box-shadow: 1px 0px 19px 4px rgba(255, 255, 255, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5); }
50% {
box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }
/* Button */
.button {
text-align: center;
padding: 10px 20px;
text-decoration: none;
color: #000;
font-weight: bold;
-webkit-border-radius: 10px;
-moz-border-radius: 10px 0;
border-radius: 10px 0;
margin-right: 20px; }
/* Blue Background */
.blue {
text-shadow: 0px 1px 0px #83e0f7;
background-image: -webkit-linear-gradient(top, #87e0fd, #53cbf1);
background-image: -moz-linear-gradient(top, #87e0fd, #53cbf1);
background-image: -o-linear-gradient(top, #87e0fd, #53cbf1);
background-image: linear-gradient(to bottom, #87e0fd, #53cbf1);
-webkit-animation: blue 2s infinite;
-moz-animation: blue 2s infinite;
-o-animation: blue 2s infinite;
animation: blue 2s infinite; }
/* Yellow Background */
.yellow {
text-shadow: 0px 1px 0px #faffc7;
background-image: -webkit-linear-gradient(top, #fff966, #f3fd80);
background-image: -moz-linear-gradient(top, #fff966, #f3fd80);
background-image: -o-linear-gradient(top, #fff966, #f3fd80);
background-image: linear-gradient(to bottom, #fff966, #f3fd80);
-webkit-animation: yellow 2s infinite;
-moz-animation: yellow 2s infinite;
-o-animation: yellow 2s infinite;
animation: yellow 2s infinite; }
/* White Background */
.white {
text-shadow: 0px 1px 0px #fff;
background-image: -webkit-linear-gradient(top, #ffffff, #cccccc);
background-image: -moz-linear-gradient(top, #ffffff, #cccccc);
background-image: -o-linear-gradient(top, #ffffff, #cccccc);
background-image: linear-gradient(to bottom, #ffffff, #cccccc);
-webkit-animation: white 2s infinite;
-moz-animation: white 2s infinite;
-o-animation: white 2s infinite;
animation: white 2s infinite; }
Demo: http://codepen.io/arbaoui_mehdi/details/yoCnx
Note: I used animation compass plugin for apply css3 animations in compass.

You said that you were trying to use "jquery-illuminate" ( http://www.tonylea.com/2011/jquery-illuminate ) However, this didn't work on [your] web service (jQuery1.9.1)
I made an offline demo with this setup and it works:
<head>
<script src="jquery_1.9.1.js"></script>
<script src="jquery-ui_1.10.3.js"></script>
<script src="jquery.illuminate.0.7.js"></script>
<script>
window.onload = function(){
if(true){
var input = $(".box#input");
$(document).scrollTop(input .offset().top - 60);
var v = input.val();
input.val('');
input.focus().val(v);
input.focus()
$(".btn#illuminate").illuminate({'intensity': '0.3'
,'color': '#98cb00','blink': 'true'
,'blinkSpeed': '1200', 'outerGlow': 'true'
,'outerGlowSize': '30px','outerGlowColor': '#98cb00'
});
}
}
</script>
</head>
<body>
If you post your error message we can may be make it work.
Which version of jquery-ui are you using?
Do you use twitter bootstrap as well?
Updates
Update 1: TypeError: $(...).illuminate is not a function
Could it be that the file path is incorrect?
If i change the path to a nonexisitent location i get this erro in the dev tools of chrome 30:
Update 2:
Using jquery.illuminate.0.7.js with firefox 22, jquery_1.9.1.js and jquery-ui_1.10.3.js cause the following error: TypeError: $.css(...) is undefined pointing to jquery.illuminate.0.7.js:223
At line 223 is the following method:
$.cssHooks.boxShadowBlur = {
get: function ( elem, computed, extra ) {
return $.css(elem, support.boxShadow).split(rWhitespace)[5];
},
set: function( elem, value ) {
elem.style[support.boxShadow]=
insert_into($.css(elem,support.boxShadow),value,5);
}
};
In the firefox console several warning / error messages appeared:
CSS Warning: `Unknown property 'box-sizing' more information see this question
JS Error: TypeError: $.css(...) is undefined still searching for more information
Searching for changes in jquery or in jquery-ui regarding $.css has not yet yield any result other than $.css still seems to be in use (or here). In the source of jquery the function css is included as well:
jQuery.fn.extend({
css: function (name, value) {
return jQuery.access(this, function (elem, name, value) {
var styles, len,
map = {},
i = 0;
if (jQuery.isArray(name)) {
styles = getStyles(elem);
len = name.length;
for (; i < len; i++) {
map[name[i]] = jQuery.css(elem, name[i], false, styles);
}
return map;
}
return value !== undefined ?
jQuery.style(elem, name, value) :
jQuery.css(elem, name);
}, name, value, arguments.length > 1);
},
I will try to find out more by asking a question myself.
Update - solution is to modify the jQuery illuminate plugin.
User Dave did an outstanding job and found the cause for illuminate not working in firefox 22. You can find his solution over at my question plugin-illuminate-0-7-incompatible-to-jquery-1-9-1-or-jquery-ui-1-10-3. Please give Dave an upvote for his efforts, his debugging and his outstanding javascript and jQuery knowledge.

Ensure you have set the correct parameters
JSFIDDLE http://jsfiddle.net/kevinPHPkevin/P9GXa/
$(document).ready(function(){
$('#button').illuminate({
'intensity': '0.3',
'color': '#98cb00',
'blink': 'true',
'blinkSpeed': '1200',
'outerGlow': 'true',
'outerGlowSize': '30px',
'outerGlowColor': '#98cb00'
});
});