We Keep Coding

Adding custom text to a twitter button

I am trying to add an anchor tag with specific attributes to an empty div in order to create a twitter button that will tweet out some custom text. The twitter button works if I add the anchor tag manually to the html. However, I cannot figure out how to add the anchor tag using JavaScript. I have tried creating a function that I would like to run when the page loads.
I am still in the early stages of learning so please excuse any obvious mistakes. I would greatly appreciate any help. I am using vanilla JavaScript (have not learnt jQuery yet).
Link to the CodePen is below:
Twitter Button: Codepen
HTML:
<div class="custom-tweet-button">
<!--I am trying to add the anchor tag below to the existing div when the generateTweetButton FUNCTION RUNS (i.e. when the page is loaded).
<a href="https://twitter.com/intent/tweet?text=This is some custom text"
target="_blank" alt ="Tweet this pen">
<i class="btn-icon"></i>
<span class="btn-text">Tweet</span>
</a>
-->
</div>
CSS:
.custom-tweet-button {
width: 200px;
margin: 1em auto 2em;
}
.custom-tweet-button a {
position: relative;
display: inline-block;
height: 16px;
padding: 2px;
border: 1px solid #ccc;
font-size: 11px;
color: #333;
text-decoration: none;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
font-weight: bold;
background-color: #F8F8F8;
background-image: -webkit-gradient(linear,left top,left
bottom,from(#FFF),to(#DEDEDE));
background-image: -moz-linear-gradient(top,#FFF,#DEDEDE);
background-image: -o-linear-gradient(top,#FFF,#DEDEDE);
background-image: -ms-linear-gradient(top,#FFF,#DEDEDE);
border: #CCC solid 1px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
overflow: hidden;
}
.custom-tweet-button a:hover {
border-color: #BBB;
background-color: #F8F8F8;
background-image: -webkit-gradient(linear,left top,left
bottom,from(#F8F8F8),to(#D9D9D9));
background-image: -moz-linear-gradient(top,#F8F8F8,#D9D9D9);
background-image: -o-linear-gradient(top,#F8F8F8,#D9D9D9);
background-image: -ms-linear-gradient(top,#F8F8F8,#D9D9D9);
background-image: linear-gradient(top,#F8F8F8,#D9D9D9);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.custom-tweet-button a .btn-icon {
position: absolute;
width: 16px;
height: 13px;
top: 50%;
left: 3px;
margin-top: -6px;
background: url('https://twitter.com/favicons/favicon.ico') 1px center no-
repeat;
background-size: 13px;
}
.custom-tweet-button a .btn-text {
display: inline-block;
padding: 2px 3px 0 20px;
}
JAVASCRIPT:
var customText = "This is some custom text";
function generateTweetButton(text) {
var tweetButton = document.getElementsByClassName("custom-tweet-button"); //grab the existing div
var anchor = document.createElement('a'); // create anchor element
anchor.setAttribute("href", "https://twitter.com/intent/tweet?text=" + encodeURIComponent(text)); //set the href url to include custom text
anchor.setAttribute("target", "_blank"); //add the target attribute
anchor.setAttribute("alt", "Tweet this pen"); //add the alt attribute
var iTag = document.createElement('i'); //create <i> tag
iTag.setAttribute("class", "btn-icon"); //give class "btn-icon" to <i> tag
var span = document.createElement("span"); // create span tag
span.setAttribute("class", "btn-text"); //give class "btn-text" to span tag
span.textContent = "Tweet"; //add "Tweet" text to span tag
anchor.appendChild(iTag); //append iTag to the anchor tag
anchor.appendChild(span); //append span tag to the anchor tag
tweetButton.appendChild(anchor); //append anchor tag to tweetButton
return tweetButton; // return the element
}
window.onload = generateTweetButton(customText); //run the function when the page loads

I think this is what you are wanting to do. The problem is that: document.getElementsByClassName returns an array of objects that have the same class name. You either need to loop through it or specify which object you want to change.
var customText = "This is some custom text";
function generateTweetButton(text) {
var tweetButton = document.getElementsByClassName("custom-tweet-button")[0]; //grab the existing div
var anchor = document.createElement('a'); // create anchor element
anchor.setAttribute("href", "https://twitter.com/intent/tweet?text=" + encodeURIComponent(text)); //set the href url to include custom text
anchor.setAttribute("target", "_blank"); //add the target attribute
anchor.setAttribute("alt", "Tweet this pen"); //add the alt attribute
var iTag = document.createElement('i'); //create <i> tag
iTag.setAttribute("class", "btn-icon"); //give class "btn-icon" to <i> tag
var span = document.createElement("span"); // create span tag
span.setAttribute("class", "btn-text"); //give class "btn-text" to span tag
span.textContent = "Tweet"; //add "Tweet" text to span tag
anchor.appendChild(iTag); //append iTag to the anchor tag
anchor.appendChild(span); //append span tag to the anchor tag
tweetButton.appendChild(anchor); //append anchor tag to tweetButton
return tweetButton; // return the element
}
window.onload = generateTweetButton(customText);
.custom-tweet-button {
width: 200px;
margin: 1em auto 2em;
}
.custom-tweet-button a {
position: relative;
display: inline-block;
height: 16px;
padding: 2px;
border: 1px solid #ccc;
font-size: 11px;
color: #333;
text-decoration: none;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
font-weight: bold;
background-color: #F8F8F8;
background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#DEDEDE));
background-image: -moz-linear-gradient(top, #FFF, #DEDEDE);
background-image: -o-linear-gradient(top, #FFF, #DEDEDE);
background-image: -ms-linear-gradient(top, #FFF, #DEDEDE);
border: #CCC solid 1px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
overflow: hidden;
}
.custom-tweet-button a:hover {
border-color: #BBB;
background-color: #F8F8F8;
background-image: -webkit-gradient(linear, left top, left bottom, from(#F8F8F8), to(#D9D9D9));
background-image: -moz-linear-gradient(top, #F8F8F8, #D9D9D9);
background-image: -o-linear-gradient(top, #F8F8F8, #D9D9D9);
background-image: -ms-linear-gradient(top, #F8F8F8, #D9D9D9);
background-image: linear-gradient(top, #F8F8F8, #D9D9D9);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.custom-tweet-button a .btn-icon {
position: absolute;
width: 16px;
height: 13px;
top: 50%;
left: 3px;
margin-top: -6px;
background: url('https://twitter.com/favicons/favicon.ico') 1px center no- repeat;
background-size: 13px;
}
.custom-tweet-button a .btn-text {
display: inline-block;
padding: 2px 3px 0 20px;
}
<div class="custom-tweet-button">
<!--I am trying to add the anchor tag below to the existing div when the generateTweetButton FUNCTION RUNS (i.e. when the page is loaded).
<a href="https://twitter.com/intent/tweet?text=This is some custom text"
target="_blank" alt ="Tweet this pen">
<i class="btn-icon"></i>
<span class="btn-text">Tweet</span>
</a>
-->
</div>

My href link buttons don't work online

I've just creted my first website in HTML5 and javascript and all the links work offline (double and triplechecked it), but when I uploaded it onto the host server, none of the links work. Could anyone give me any suggestions? Here's and example of my link buttons:
<div>
<center>
<button style="margin-top:10px;margin-bottom:10px;height:25px;width:100px;font-size:14px">Books</button>
</center>
</div>

You put an anchor tag inside a button. I assumed that you want to redirect the user if they click on the button. You can do something like this:
Example 1:
<button type="button">Click on me</button>
Example 2: (Recommended)
<button type="button" onclick="location.href='page.html'">Click on me</button>
I hope this will help you!

Or else you can also add anchor tag with css that makes it look like a button
Click on me
.btn:active {
position: relative;
top: 1px;
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}
.btn{
display: inline-block;
zoom: 1;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
JSFiddle

changing checkbox style on uncheck

I have a list of checkboxes in a page with all the boxes are checked by default. When user clicks on any particular checkbox to uncheck it, the background color of the checkbox should be changed or the boxes should be checked with cross mark in a red color.
I tried the following on uncheck,
document.getElementById("checkBooxId1").style = "background-color:red";
This is not working.
Also, I would like to do this on some occasion not all the time. So, when the parent checkbox is checked and the child is unchecked, the style of the unchecked checkebox should be different. Whereas, if the parent is also not checked, then the child and the parent should be in normal style.
Is there any other way?

As I said before, you can't change the background-color of a checkbox, but there are workarounds to get the desired effect.
Using JavaScript:
var defaultState = "checked";
var fakecboxes = document.getElementsByClassName("fakecbox");
for (var i = 0; i < fakecboxes.length; i++) {
(function (i) {
if (!fakecboxes[i].classList.contains(defaultState)) {
fakecboxes[i].classList.add(defaultState);
}
fakecboxes[i].onclick = function () {
if (!this.classList.contains("checked")) {
this.classList.add("checked");
this.classList.remove("unchecked");
} else {
this.classList.remove("checked");
this.classList.add("unchecked");
}
};
})(i);
}
body {
user-select: none;
-webkit-user-select: none;
}
.fakecbox {
width: 12px;
height: 12px;
box-sizing: border-box;
margin: 3px;
margin-left: 4px;
display: inline-block;
position: relative;
box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
background-color: rgb(222, 222, 222);
background: linear-gradient(to bottom, rgb(243, 243, 243) 0%, rgb(224, 224, 224) 40%, rgb(224, 224, 224) 100%);
border-radius: 2px;
border-width: 1px;
border-style: solid;
border-top-color: rgb(178, 178, 178);
border-left-color: rgb(167, 167, 167);
border-right-color: rgb(167, 167, 167);
border-bottom-color: rgb(167, 167, 167);
}
.fakecbox:hover {
border-top-color: rgb(168, 168, 168);
border-left-color: rgb(157, 157, 157);
border-right-color: rgb(157, 157, 157);
border-bottom-color: rgb(157, 157, 157);
box-shadow: 0 1px 0 rgba(0, 0, 0, .125);
background: linear-gradient(to bottom, rgb(244, 244, 244) 0%, rgb(226, 226, 226) 40%, rgb(226, 226, 226) 100%);
}
.fakecbox:active {
border-top-color: rgb(173, 173, 173);
border-left-color: rgb(161, 161, 161);
border-right-color: rgb(161, 161, 161);
border-bottom-color: rgb(161, 161, 161);
background: linear-gradient(to bottom, rgb(231, 231, 231) 0%, rgb(213, 213, 213) 40%, rgb(213, 213, 213) 100%);
box-shadow: none;
}
.fakecbox.checked::after {
content:"";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAMAAADz0U65AAAAM1BMVEX///9CQkJERERMTExPT09WVlZZWVlfX19gYGBlZWVmZmZpaWlra2txcXFycnJzc3N6enq1N2u5AAAAAXRSTlMAQObYZgAAAC5JREFUeAElwYcRACEMwDD7eyHA/tNyuUiUj3JtB+nXBp2pAx5PvYFQd9KrlCAtF1AAoT8ZlaoAAAAASUVORK5CYII=);
background-repeat: no-repeat;
background-position: center;
}
.fakecbox.red {
background: rgba(255,0,0,.4);
border: 1px solid rgba(200,0,0,.5);
}
.fakecbox.redonuncheck.unchecked {
background: rgba(255,0,0,.4);
border: 1px solid rgba(200,0,0,.5);
}
<input type="checkbox" />Normal checkbox
<br>
<div class="fakecbox"></div>Fake checkbox
<br>
<div class="fakecbox red"></div>Fake red checkbox
<br>
<div class="fakecbox redonuncheck"></div>Fake red-on-uncheck checkbox
This one using only CSS. You can remove the last label <label for="cbox">Normal checkbox</label>. Checkbox still works. You can modify the span for unchecked state and input:checked + span for checked state.
.checkbox input {
display: none;
}
.checkbox span {
width: 20px;
height: 20px;
display: inline-block;
background-color: red;
}
.checkbox input:checked + span {
background-color: lime;
}
<label class="checkbox">
<input type="checkbox" name="checkbox"/>
<span></span>
</label>
<label for="checkbox">Normal(modified) checkbox</label>

http://jsfiddle.net/2ck4tfj3/1/
input[type=checkbox] {
position: relative;
}
input[type=checkbox].awesome::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: red;
}
and just use this to change the background to red dynamically: document.getElementById("checkbox1").className = "awesome";
I used CSS pseudo elements to style the input checkboxes when they have the class awesome. You can change whether an element has this class with JavaScript.

you can use CSS psuedo elements.
The :checked pseudo-class in CSS selects elements when they are in the selected state. It is only associated with input () elements of type radio and checkbox . The :checked pseudo-class selector matches radio and checkbox input types when checked or toggled to an on state. If they are not selected or checked, there is no match.
So when a checkbox is checked, and you are targeting the label immediately after it:
CSS:
input[type=checkbox] + label {
color: #ccc;
font-style: italic;
}
input[type=checkbox]:checked + label {
color: #f00;
font-style: normal;
}
The label text will turn from grey italic to red normal font.
HTML:
<input type="checkbox" id="ossm" name="ossm">
<label for="ossm">CSS is Awesome</label>
Taken from CSS-Tricks
Hope this helps

Auto complete doesn't work

I have integrated google search queries with my simple search form. It is showing queries in dropdown as expected but when I click on the query it doesn't search for that query. Here is the code:
http://jsfiddle.net/enetqz54/21/
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<form method="get" action="search.php" class="searchform cf">
<input id="search" name="q" type="text" placeholder="Start typing a search term">
<button type="submit">Search</button>
</form>
JS:
var suggestCallBack; // global var for autocomplete jsonp
$(document).ready(function() {
$("#search").autocomplete({
source: function(request, response) {
$.getJSON("http://suggestqueries.google.com/complete/search?callback=?", {
"hl": "en", // Language
"jsonp": "suggestCallBack", // jsonp callback function name
"q": request.term, // query term
"client": "youtube" // force youtube style response, i.e. jsonp
});
suggestCallBack = function(data) {
var suggestions = [];
$.each(data[1], function(key, val) {
suggestions.push({
"value": val[0]
});
});
suggestions.length = 5; // prune suggestions list to only 5 items
response(suggestions);
};
},
});
});
CSS
*,*:after,*:before {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
body {
background: #3aaae8;
color: #fff;
font:12px/18px 'HelveticaNeue', Helvetica, Arial, sans-serif;
}
a,a:visited { color:#fff }
/*--------------------------------------------------------------
2.0 - SEARCH FORM
--------------------------------------------------------------*/ .searchform { background:#f4f4f4;
background:rgba(244,244,244,.79); border: 1px solid #d3d3d3;
left: 50%; padding: 2px 5px; position: absolute;
margin: -22px 0 0 -170px;
top: 50%; width:339px; box-shadow:0 4px 9px rgba(0,0,0,.37); -moz-box-shadow:0 4px 9px rgba(0,0,0,.37); -webkit-box-shadow:0 4px 9px rgba(0,0,0,.37); border-radius: 10px; -moz-border-radius:
10px; -webkit-border-radius: 10px }
.searchform input, .searchform button {
float: left } .searchform input {
background:#fefefe;
border: none;
font:12px/12px 'HelveticaNeue', Helvetica, Arial, sans-serif;
margin-right: 5px;
padding: 10px;
width: 216px;
box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);
-moz-box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);
-webkit-box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75); border-radius: 9px; -moz-border-radius:
9px; -webkit-border-radius: 9px }
.searchform input:focus {
outline: none;
box-shadow:0 0 4px #0d76be inset;
-moz-box-shadow:0 0 4px #0d76be inset;
-webkit-box-shadow:0 0 4px #0d76be inset;
}
.searchform input::-webkit-input-placeholder {
font-style: italic;
line-height: 15px
}
.searchform input:-moz-placeholder {
font-style: italic;
line-height: 15px
}
.searchform button {
background: rgb(52,173,236);
background: -moz-linear-gradient(top, rgba(52,173,236,1) 0%, rgba(38,145,220,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(52,173,236,1)),
color-stop(100%,rgba(38,145,220,1)));
background: -webkit-linear-gradient(top, rgba(52,173,236,1) 0%,rgba(38,145,220,1) 100%);
background: -o-linear-gradient(top, rgba(52,173,236,1) 0%,rgba(38,145,220,1) 100%);
background: -ms-linear-gradient(top, rgba(52,173,236,1) 0%,rgba(38,145,220,1) 100%);
background: linear-gradient(to bottom, rgba(52,173,236,1) 0%,rgba(38,145,220,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#34adec', endColorstr='#2691dc',GradientType=0 );
border: none;
color:#fff;
cursor: pointer;
font: 13px/13px 'HelveticaNeue', Helvetica, Arial, sans-serif;
padding: 10px;
width:106px;
box-shadow: 0 0 2px #2692dd inset;
-moz-box-shadow: 0 0 2px #2692dd inset;
-webkit-box-shadow: 0 0 2px #2692dd inset; border-radius: 9px; -moz-border-radius: 9px; -webkit-border-radius: 9px; }
.searchform button:hover {
opacity:.9;
}

jQuery's autocomplete, which apparently you are using, has a select event.
This event gets triggered when an item get selected. Since the value already gets populated into the input field, the only thing you have to do is submit.
$("#search").autocomplete({
// irrelevant code omitted
select: function(event, ui){
$(this).parent('form').trigger('submit');
}
});
See also this updated jsFiddle

Sorry.... what i was trying to say is that you can create your own autosuggest script.
1: Ist you need to create a dictionary.This would be an array of some kind.
2: Now you need to have two elements for the job a text-input (INP) and a list to show suggestion (LIST).
In HTML it'd be like this:
<input type="text" id="INP"/>
<ul id="LIST">
</ul>
3:Now you need to create certain scripts:
a) To find the value inside input box.
example , in jQuery
$('#INP').val();
-this has to be executed each time the key is pressed you can use $().keyup..
b) Now you have to define a method to find the items inside the array that match with the value.(use indexOf() function in javascript)
JAVASCRIPT
var i =0;
var SUGG="";
while(i<array.length){
if(array[i].indexOf($('#INP').val().toString()!=-1){
SUGG+="<li><a class='sugg'>"+array[i]+"</a></li>"
}
}
$('#LIST').html(SUGG);
b) a method to autofill the input when the suggestion is clicked.
SCRIPT
$('.sugg').click(function(e){
$('#INP').val($(this).text());
$('#LIST').html("");
});
That's all.
I have completed and created a simple autosuggest script...
you can find it on github..
[https://github.com/ArjunAtlast/a2suggest][1]

adding a progress indicator inside a button

I have the following button:
http://jsfiddle.net/TU6vQ/
and I wanted to add a loading spinner next to the 'Invite your friends' text. How do I do so?
The spinner is here.
Is this spinner going to be a div inside a button? Or what is the easiest way to do so? I also wanted to show the spinner on a button click.
This is the simple button I have:
<button id="inviteYourFriends" class="arvo-bold button blue" >
Invite your friends
</button>

If you make the button relatively positioned, you can absolutely position the spinner inside of the button:
http://jsfiddle.net/TU6vQ/8/
HTML:
<button id="inviteYourFriends" class="arvo-bold button blue" style='position:relative'>
<img src="http://www.gifstache.com/images/ajax_loader.gif" class='spinner'/>
Invite your friends
</button>
CSS:
.spinner {
position: absolute;
right: 5px;
top: 6px;
width: 25px;
height: 25px;
display: none;
}
JS:
$('button#inviteYourFriends').click(function() {$('.spinner').show();});

Put spinner inside of button, give it absolute positioning, and relative on the button. The button is a block level element, you don't need an additional div around it all.

I updated the jsfiddle here:
<div style='position:relative'>
<img src='http://www.gifstache.com/images/ajax_loader.gif' style='position:absolute; width:16px; margin:10px 10px; height:16px;' />
<button id="inviteYourFriends" class="arvo-bold button blue" >
Invite your friends
</button>
</div>

The button tag can support img tags like almost any other element, and so all you need to do is put the image inside it; as simple as it sounds.
<button id="inviteYourFriends" class="arvo-bold button blue" >
<img src="http://www.gifstache.com/images/ajax_loader.gif" height=10> Invite your friends
</button>
On your button click just prepend your button contents with the image. Voila.

You can do this.
http://jsfiddle.net/YQNn4/
HTML
<img class="progress" src="http://www.gifstache.com/images/ajax_loader.gif" height="20px" width="20px" alt="">
<button id="inviteYourFriends" class="arvo-bold button blue" >
Invite your friends
</button>
JS
$(document).ready(function(){
$('.progress').hide();
$('#inviteYourFriends').click(function(){
$('.progress').show();
});
});

i would add the image inside the button element, then position and size it using css.
here is the jfiddle: http://jsfiddle.net/TU6vQ/9/
here's the code:
<button id="inviteYourFriends" class="arvo-bold button blue" >
Invite your friends
<img src="http://www.gifstache.com/images/ajax_loader.gif" alt="..." class="spinner"/>
</button>
CSS:
.button {
line-height: 52px;
font-size: 16px;
width: 270px;
height: 50px;
text-shadow: -1px -1px 1px rgba(175,175,175,.42);
text-transform: uppercase;
text-decoration: none;
text-align: center;
line-height: 38px;
color: #fefefe;
font-size: 14px;
display: block;
height: 38px;
border: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 1px 2px 2px rgba(0,0,0,.1);
-moz-box-shadow: 1px 2px 2px rgba(0,0,0,.1);
box-shadow: 1px 2px 2px rgba(0,0,0,.1);
}
.button.blue {
background: rgb(169,191,200);
background: -moz-linear-gradient(top, rgba(169,191,200,1) 0%, rgba(169,191,200,1) 51%, rgba(143,170,182,1) 54%, rgba(143,170,182,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,191,200,1)), color-stop(51%,rgba(169,191,200,1)), color-stop(54%,rgba(143,170,182,1)), color-stop(100%,rgba(143,170,182,1)));
background: -webkit-linear-gradient(top, rgba(169,191,200,1) 0%,rgba(169,191,200,1) 51%,rgba(143,170,182,1) 54%,rgba(143,170,182,1) 100%);
background: -o-linear-gradient(top, rgba(169,191,200,1) 0%,rgba(169,191,200,1) 51%,rgba(143,170,182,1) 54%,rgba(143,170,182,1) 100%);
background: -ms-linear-gradient(top, rgba(169,191,200,1) 0%,rgba(169,191,200,1) 51%,rgba(143,170,182,1) 54%,rgba(143,170,182,1) 100%);
background: linear-gradient(to bottom, rgba(169,191,200,1) 0%,rgba(169,191,200,1) 51%,rgba(143,170,182,1) 54%,rgba(143,170,182,1) 100%);
}
.spinner
{
margin-top:8px;
margin-left:5px;
height:20px;
width:20px;
position:absolute;
}