Show a "bouncing dot loading gif" over button when clicked

Show a "bouncing dot loading gif" over button when clicked - javascript

I'm trying to load a "bouncing dot - loading gif" over the number of a button while script is running.
My problem:
The ENTIRE button gets replaced with the image. I just want to replace the text?!
Please help. Thanks.
Code example: http://jsfiddle.net/v1pezwuh/1/
Javascript
$(function() {
$(".vote").click(function()
{
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
if(name=='up')
{
$(this).fadeIn(200).html('<img src="http://i.imgur.com/UOSBUX1.gif" align="absmiddle">');
$.ajax({
type: "POST",
url: "up_vote.php",
data: dataString,
cache: false,
success: function(html)
{
parent.html(html);
} });
}
else if(name=='down')
{
$(this).fadeIn(200).html('<img src="http://i.imgur.com/UOSBUX1.gif" align="absmiddle">');
$.ajax({
type: "POST",
url: "down_vote.php",
data: dataString,
cache: false,
success: function(html)
{
parent.html(html);
}
});
}
return false;
});
});
CSS
body {
background: black;
}
.button-vote-up
{
display: inline-block;
background: #23d76f;
color: #fff;
text-decoration: none;
font-weight: 300;
font-color: white;
padding: 5%;
width: 100px;
outline: 0;
border-radius:10%;
box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.75), inset 0px 2px 0px 0px rgba(192,255,216,0.5), inset 0px 0px 0px 2px rgba(82,227,99,0.85), 3px 3px 3px 1px rgba(0,0,0,0.15);
background-image: -moz-linear-gradient(top, #23d76f, #019c0f);
background-image: -webkit-linear-gradient(top, #23d76f, #019c0f);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#23d76f), to(#019c0f));
background-image: -ms-linear-gradient(top, #23d76f, #019c0f);
background-image: -o-linear-gradient(top, #23d76f, #019c0f);
background-image: linear-gradient(top, #23d76f, #019c0f);
text-shadow: -1px -1px 1px rgba(0,0,0,0.5);
}
.button-vote-up:hover
{
background: #2bfb83;
box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.75), inset 0px 2px 0px 0px rgba(192,255,216,0.5), inset 0px 0px 0px 2px rgba(82,227,99,0.85), 3px 3px 3px 1px rgba(0,0,0,0.15);
background-image: -moz-linear-gradient(top, #2bfb83, #0cad32);
background-image: -webkit-linear-gradient(top, #2bfb83, #0cad32);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2bfb83), to(#0cad32));
background-image: -ms-linear-gradient(top, #2bfb83, #0cad32);
background-image: -o-linear-gradient(top, #2bfb83, #0cad32);
background-image: linear-gradient(top, #2bfb83, #0cad32);
}
.button-vote-up:active
{
background: #019c0f;
box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.75), inset 0px 2px 0px 0px rgba(192,255,216,0.5), inset 0px 0px 0px 2px rgba(82,227,99,0.85), 3px 3px 3px 1px rgba(0,0,0,0.15);
background-image: -moz-linear-gradient(top, #019c0f, #23d76f);
background-image: -webkit-linear-gradient(top, #019c0f, #23d76f);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#019c0f), to(#23d76f));
background-image: -ms-linear-gradient(top, #019c0f, #23d76f);
background-image: -o-linear-gradient(top, #019c0f, #23d76f);
background-image: linear-gradient(top, #019c0f, #23d76f);
}
HTML
<div class='up'>
<a href='' class='vote' id='2' name='up'>
<div class="button-vote-up">
<div class="numvotes">27</div>
<div class="voteupdown">UP</div>
</div>
</a>

Replace
$(this).fadeIn(200).html('<img src="http://i.imgur.com/UOSBUX1.gif" align="absmiddle">');
with
$(this).children().first().fadeIn(200).html('<img src="http://i.imgur.com/UOSBUX1.gif" align="absmiddle">');
jsfiddle
To make it a bit shorter, you can also use .eq(0) instead of .first().

It's because $(this) in your function is the $('.vote') button. Instead, use $('.button-vote-up') or one of the other elements inside the button.

Related

JQuery Datepicker - vertically center date

I'm currently styling the jquery datepicker but im struggeling with vertically centering the dates positions.
This is what I got so far:
https://jsfiddle.net/L4vrkpmc/1/
Since the datepicker is using a table I tried
.ui-datepicker-calendar td{
vertical-align:center;
}
but it won't work. Anyone know how to vertical center the days?
html,
body {
height: 100%;
}
/* DatePicker Container */
#calendar {
height: 100%;
}
.ui-datepicker {
width: 100%;
height: 100%;
margin: 5px auto 0;
font: 9pt Arial, sans-serif;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
}
.ui-datepicker a {
text-decoration: none;
}
/* DatePicker Table */
.ui-datepicker table {
width: 100%;
height: 100%;
text-align: center;
}
.ui-datepicker-header {
background: url('../img/dark_leather.png') repeat 0 0 #000;
color: #e0e0e0;
font-weight: bold;
-webkit-box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, 2);
-moz-box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, .2);
box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, .2);
text-shadow: 1px -1px 0px #000;
filter: dropshadow(color=#000, offx=1, offy=-1);
line-height: 30px;
border-width: 1px 0 0 0;
border-style: solid;
border-color: #111;
}
.ui-datepicker-title {
text-align: center;
}
.ui-datepicker-prev,
.ui-datepicker-next {
display: inline-block;
width: 30px;
height: 30px;
text-align: center;
cursor: pointer;
line-height: 600%;
overflow: hidden;
}
.ui-datepicker-prev {
float: left;
background-position: center -30px;
}
.ui-datepicker-next {
float: right;
background-position: center 0px;
}
.ui-datepicker thead {
background-color: #f7f7f7;
background-image: -moz-linear-gradient(top, #f7f7f7 0%, #f1f1f1 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7f7f7), color-stop(100%, #f1f1f1));
background-image: -webkit-linear-gradient(top, #f7f7f7 0%, #f1f1f1 100%);
background-image: -o-linear-gradient(top, #f7f7f7 0%, #f1f1f1 100%);
background-image: -ms-linear-gradient(top, #f7f7f7 0%, #f1f1f1 100%);
background-image: linear-gradient(top, #f7f7f7 0%, #f1f1f1 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#f1f1f1', GradientType=0);
border-bottom: 1px solid #bbb;
}
.ui-datepicker th {
text-transform: uppercase;
font-size: 6pt;
padding: 5px 0;
color: #666666;
text-shadow: 1px 0px 0px #fff;
filter: dropshadow(color=#fff, offx=1, offy=0);
}
.ui-datepicker tbody td {
padding: 0;
border-right: 1px solid #bbb;
}
.ui-datepicker tbody td:last-child {
border-right: 0px;
}
.ui-datepicker tbody tr {
border-bottom: 1px solid #bbb;
}
.ui-datepicker tbody tr:last-child {
border-bottom: 0px;
}
.ui-datepicker td span,
.ui-datepicker td a {
display: inline-block;
font-weight: bold;
text-align: center;
width: 100%;
height: 100%;
color: #666666;
text-shadow: 1px 1px 0px #fff;
filter: dropshadow(color=#fff, offx=1, offy=1);
}
.ui-datepicker-calendar .ui-state-default {
background: #ededed;
background: -moz-linear-gradient(top, #ededed 0%, #dedede 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ededed), color-stop(100%, #dedede));
background: -webkit-linear-gradient(top, #ededed 0%, #dedede 100%);
background: -o-linear-gradient(top, #ededed 0%, #dedede 100%);
background: -ms-linear-gradient(top, #ededed 0%, #dedede 100%);
background: linear-gradient(top, #ededed 0%, #dedede 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#dedede', GradientType=0);
-webkit-box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);
-moz-box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);
box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);
}
.ui-datepicker-calendar .ui-state-hover {
background: #f7f7f7;
}
.ui-datepicker-calendar .ui-state-active {
background: #6eafbf;
-webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
-moz-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
color: #e0e0e0;
text-shadow: 0px 1px 0px #4d7a85;
filter: dropshadow(color=#4d7a85, offx=0, offy=1);
border: 1px solid #55838f;
position: relative;
margin: -1px;
}
.ui-datepicker-unselectable .ui-state-default {
background: #f4f4f4;
color: #b4b3b3;
}
.ui-datepicker-calendar td:first-child .ui-state-active {
margin-left: 0;
}
.ui-datepicker-calendar td:last-child .ui-state-active {
margin-right: 0;
}
.ui-datepicker-calendar tr:last-child .ui-state-active {
margin-bottom: 0;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$('#calendar').datepicker({
inline: true,
showOtherMonths: true,
firstDay: 1,
dayNamesMin: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
});
});
</script>
<div id="calendar"></div>
Thanks for your help :)

You Can't vertical align text in "a" tag if its not containing any child tag. I wrapped the text with <span> under 'a' tag using jQuery. here is the code:
$(".ui-datepicker td").each(function(){
var dateText = $(this).find("a").text();
$(this).find("a").html("<span>"+dateText+"</span>");
});
and some simple CSS changes :
.ui-datepicker td a{
display: table;
position: relative;
height: 100%;
width: 100%;
}
.ui-datepicker td a span{
display: table-cell;
text-align:center;
vertical-align: middle;
}

You can achieve this using only CSS by simply setting the line-height of the number to the same height of the square:
.ui-state-default {
height: 45px;
line-height: 45px;
padding: 0;
}

Margin-Right on css not Working

I have been messing with Coding during school because it interests me the most out of anything at school, and have been self-teaching myself Html-Css-and Js for most of the school year.
I have been re-creating my school's website, and I have run into some problems.
My CSS "Margin-Right" command has not been working.
I have been trying to center a <Div> area with CSS and the "Style" command using margin left and right, and the right will never work.
I don't want to just use the position: absolute; command because I want some space on the side so you can see the background.
Here is my Html code.
CSS:
.Isaac {
width: 100%;
padding: 4px;
margin-right:100px;
background-color: white;
-webkit-box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 2px 12px rgba(23, 69, 88, .5);
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 10px;
}
HTML:
<div class="Isaac" Style="Background-color: #E6E6E6 ; Margin-Top: 40px">
<!-- div content -->
</div>
Edit: The "100x" thing was just a silly error on my part, I meant to have "100px"
Also, I changed Margin-Right: 100x ; to margin-right:100px; and it still have no difference
I hope you can help me

Change:
Margin-Right: 100x;
to:
margin-right: 100px;

The problem is the width:100% on the .Isaac divs. This causes the divs themselves to be as wide as their parent, the body. Then the margins extend to the right of that, off screen.
Solution: remove the width:100%.
.Isaac {
/*width: 100%;*/
padding: 4px;
Margin-Right: 100px;
background-color: white;
-webkit-box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 2px 12px rgba(23, 69, 88, .5);
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 10px;
}
.myButton {
-moz-box-shadow: inset 0px 5px 0px 0px #000000;
-webkit-box-shadow: inset 0px 5px 0px 0px #000000;
box-shadow: inset 0px 1px 0px 0px #000000;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #ffffff));
background: -moz-linear-gradient(top, #ffffff 5%, #ffffff 100%);
background: -webkit-linear-gradient(top, #ffffff 5%, #ffffff 100%);
background: -o-linear-gradient(top, #ffffff 5%, #ffffff 100%);
background: -ms-linear-gradient(top, #ffffff 5%, #ffffff 100%);
background: linear-gradient(to bottom, #ffffff 5%, #ffffff 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
background-color: #ffffff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #000000;
display: inline-block;
cursor: pointer;
color: #000000;
font-family: Arial;
font-size: 13px;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0px 1px 0px #000000;
}
.myButton:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #ffffff));
background: -moz-linear-gradient(top, #ffffff 5%, #ffffff 100%);
background: -webkit-linear-gradient(top, #ffffff 5%, #ffffff 100%);
background: -o-linear-gradient(top, #ffffff 5%, #ffffff 100%);
background: -ms-linear-gradient(top, #ffffff 5%, #ffffff 100%);
background: linear-gradient(to bottom, #ffffff 5%, #ffffff 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
background-color: #ffffff;
}
.myButton:active {
position: relative;
top: 1px;
}
/* I added this, because the body start tag doesn't appear in the snippet */
body {
background-attachment: fixed; background-repeat: no-repeat; Background-size: 100% 100%; background-image:url(https://upload.wikimedia.org/wikipedia/commons/3/32/Mount_Rainier_from_above_Myrtle_Falls_in_August.JPG)
}
<div class="Isaac" Style="Background-color: #E6E6E6; Margin-Top: 40px"><img src="http://www.conway.k12.wa.us/sites/default/files/logov4.png" style="width:150px;height:50px;">Menu : Family access : Facebook/Social Media<a/> : <a href="#" class="Hello"><br><a href="#" class="MyButton">District Office
School OfficeDepartmentsStaffFamilyTeachersBoard</div>

use text-align center for aligning your contents to center
issue with margin-right was you use : x instead of px
.Isaac {
width: 100%;
padding: 4px;
text-align: center;
margin-right: 100px;
background-color: white;
-webkit-box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 2px 12px rgba(23, 69, 88, .5);
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 10px;
}
Hope this is what you want to achieve

toggle function making all other divs disappear

So I have many divs (planets). I'd like to make them disappear by clicking on them. So far I have earth and sun only. On my test run, when I click on sun, and earth also disappears. What is the proper code so that not all planets will disappear just by one click.
HTML:
<div class="planets" id="sun"><div>
<div class-"planets" id="earth"></div>
CSS:
#sun {
background-image: -webkit-gradient(linear, 100% 45%, 0% 97%, from(#FEA901), to(#FE4801));
background-image: -webkit-linear-gradient(top, #FEA901, #FE4801);
background-image: -moz-linear-gradient(top, #FEA901, #FE4801);
background-image: -ms-linear-gradient(top, #FEA901, #FE4801);
background-image: -o-linear-gradient(top, #FEA901, #FE4801);
position:relative;
border:3px solid orange;
height:150px;
width:150px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
border-radius:50%;
-webkit-box-shadow: 0px 0px 30px 5px rgba(255, 255, 190, .75);
-moz-box-shadow: 0px 0px 30px 5px rgba(255, 255, 190, .75);
box-shadow: 0px 0px 250px 100px rgba(240, 176, 12, .75);
}
#earth {
position:absolute;
top:440px;
right:700px;
height:100px;
width:100px;
border-radius:50%;
border:1px solid white;
background-image: -webkit-gradient(linear, 100% 45%, 0% 97%, from(#068143), t(#FE4801));
background-image: -webkit-linear-gradient(top, #2215DF, #068143);
background-image: -moz-linear-gradient(top, #FEA901, #068143);
background-image: -ms-linear-gradient(top, #FEA901, #068143);
background-image: -o-linear-gradient(top, #FEA901, #068143);
-webkit-box-shadow: 0px 0px 30px 5px rgba(131, 180, 226, .75);
-moz-box-shadow: 0px 0px 30px 5px rgba(131, 180, 226, .75);
box-shadow: 0px 0px 50px 10px rgba(131, 180, 226, .75);
}
JS:
$(document).ready(function() {
$("html").mousemove(function(e){
$('.follow').css({'top': e.clientY - 100, 'left': e.clientX - 60});
});
$('.planets').click(function() {
$('#sun').toggle(1000);
});
});

$('.planets').click(function() {
$(this).hide();
}
you could also do
$('.planets').click(function() {
$(this).toggle();
}
but it'd be pointless since you can't click on it to make it reappear, after it is already hidden

You had several typos in your code. You forgot the </div> to the sun, which made it not parse correctly and the earth wouldn't show up. Also you had - instead of = for the class. Here is the code for you fixed:
jsFiddle

How to run jsfiddle code in joomla 3.2

I'm trying to run the following code in my Joomla site but it won't run. I am using Joomla 3.2 and the code editor JCK but still I can't get the HTML tags to work propperly. So please help me to run the following code:
$("#text10").keyup(function() {
$("#text10").blur();
$("#text10").focus();
});
$("#text10").change(function() {
var name = $('#text10').val();
var numbers = /^[0-9]+$/;
var specialChars = "<>#!#$%^&*()_+[]{}?:;|'\"\\,./~`-=";
if (name == "" || name == " ") {
// alert('All Boxes have elements.');
$("#equal").show();
$("#equal a").html("please enter account number");
} else if (name.match(numbers)) {
$("#equal").hide();
$("#equal a").html("correct account number"); // alert('All Boxes have elements.');
} else if (name.match(specialChars)) {
$("#equal").show();
$("#equal a").html("correct account number"); // alert('All Boxes have elements.');
} else {
// alert('All Boxes have elements.');
$("#equal").show();
$("#equal a").html("please check your account number correctly");
}
});
#products {
font: 13px/20px'Lucida Grande', Verdana, sans-serif;
color: #404040;
background: #f2f8fc;
}
.ui-widget-content ul li {
display: block;
float: left;
line-height: 30px;
list-style: none;
margin: 0 0px;
text-decoration: blink;
}
.ui-widget-content {
min-height: 40px;
}
.hidden {
visibility: hidden;
}
#equal {
display: none;
}
#e1 {
display: none;
}
.button-purple {
background: #9966cb;
color: #FFFFFF;
border-color: #8040be #8040be #733aab;
background-image: -webkit-linear-gradient(top, #a87dd3, #9966cb 66%, #8f57c6);
background-image: -moz-linear-gradient(top, #a87dd3, #9966cb 66%, #8f57c6);
background-image: -o-linear-gradient(top, #a87dd3, #9966cb 66%, #8f57c6);
background-image: linear-gradient(to bottom, #a87dd3, #9966cb 66%, #8f57c6);
}
.button-purple:active {
background: #9966cb;
color: #FFFFFF;
border-color: #733aab #8040be #8040be;
}
.button {
position: relative;
display: inline-block;
vertical-align: top;
height: 36px;
line-height: 35px;
padding: 0 20px;
font-size: 20px;
color: #FFFFFF;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
background-clip: padding-box;
border: 1px solid;
border-radius: 2px;
cursor: pointer;
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25);
}
.button:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: #FFFFFF;
pointer-events: none;
background-image: -webkit-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
background-image: -moz-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
background-image: -o-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
background-image: radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
}
.button:hover:before {
background-image: -webkit-radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
background-image: -moz-radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
background-image: -o-radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
background-image: radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
}
.button:active {
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
color: #FFFFFF;
}
.button:active:before {
content: none;
color: #FFFFFF;
}
.button-pink {
background: #e8367f;
border-color: #d31865 #d31865 #bc165a;
background-image: -webkit-linear-gradient(top, #eb5190, #e8367f 66%, #e62473);
background-image: -moz-linear-gradient(top, #eb5190, #e8367f 66%, #e62473);
background-image: -o-linear-gradient(top, #eb5190, #e8367f 66%, #e62473);
background-image: linear-gradient(to bottom, #eb5190, #e8367f 66%, #e62473);
}
.button-pink:active {
background: #e8367f;
border-color: #bc165a #d31865 #d31865;
}
.button-orange {
background: #f4902a;
border-color: #df770c #df770c #c76a0a;
background-image: -webkit-linear-gradient(top, #f69f47, #f4902a 66%, #f38617);
background-image: -moz-linear-gradient(top, #f69f47, #f4902a 66%, #f38617);
background-image: -o-linear-gradient(top, #f69f47, #f4902a 66%, #f38617);
background-image: linear-gradient(to bottom, #f69f47, #f4902a 66%, #f38617);
}
.button-orange:active {
background: #f4902a;
border-color: #c76a0a #df770c #df770c;
}
.button-green {
background: #5ca934;
border-color: #478228 #478228 #3c6f22;
background-image: -webkit-linear-gradient(top, #69c03b, #5ca934 66%, #54992f);
background-image: -moz-linear-gradient(top, #69c03b, #5ca934 66%, #54992f);
background-image: -o-linear-gradient(top, #69c03b, #5ca934 66%, #54992f);
background-image: linear-gradient(to bottom, #69c03b, #5ca934 66%, #54992f);
}
.button-green:active {
background: #5ca934;
border-color: #3c6f22 #478228 #478228;
}
.button-red {
background: #d5452f;
border-color: #ae3623 #ae3623 #992f1f;
background-image: -webkit-linear-gradient(top, #da5c48, #d5452f 66%, #c73d28);
background-image: -moz-linear-gradient(top, #da5c48, #d5452f 66%, #c73d28);
background-image: -o-linear-gradient(top, #da5c48, #d5452f 66%, #c73d28);
background-image: linear-gradient(to bottom, #da5c48, #d5452f 66%, #c73d28);
}
.button-red:active {
background: #d5452f;
border-color: #992f1f #ae3623 #ae3623;
}
.button-gray {
background: #47494f;
border-color: #2f3034 #2f3034 #232427;
background-image: -webkit-linear-gradient(top, #55585f, #47494f 66%, #3d3f44);
background-image: -moz-linear-gradient(top, #55585f, #47494f 66%, #3d3f44);
background-image: -o-linear-gradient(top, #55585f, #47494f 66%, #3d3f44);
background-image: linear-gradient(to bottom, #55585f, #47494f 66%, #3d3f44);
}
.button-gray:active {
background: #47494f;
border-color: #232427 #2f3034 #2f3034;
}
.tasks {
margin: 50px auto;
width: 240px;
background: white;
border: 1px solid #cdd3d7;
border-radius: 4px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.ui-widget-header {
position: relative;
line-height: 24px;
padding: 7px 15px;
color: #5d6b6c;
align: "center";
text-shadow: 0 1px rgba(255, 255, 255, 0.7);
background: #f0f1f2;
border-bottom: 1px solid #d1d1d1;
border-radius: 3px 3px 0 0;
background-image: -webkit-linear-gradient(top, #f5f7fd, #e6eaec);
background-image: -moz-linear-gradient(top, #f5f7fd, #e6eaec);
background-image: -o-linear-gradient(top, #f5f7fd, #e6eaec);
background-image: linear-gradient(to bottom, #f5f7fd, #e6eaec);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.03);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.03);
}
.tasks-title {
line-height: inherit;
font-size: 14px;
font-weight: bold;
color: inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Payers account number
<input type="text" name="text10" id="text10" size="25" />
<div width="100%" id="equal">
</div>

On your editor click on source on the left top. then enter this code :
<div id="custom_form">
Payers account number
<input type="text" name="text10" id="text10" size="25" />
<div width="100%" id="equal"></div>
</div>
<style>
#products{font: 13px/20px 'Lucida Grande', Verdana, sans-serif;
color: #404040;
background: #f2f8fc;}
.ui-widget-content ul li
{
display: block;
float: left;
line-height: 30px;
list-style:none;
margin: 0 0px;
text-decoration:blink;
}
.ui-widget-content
{
min-height:40px;
}
.hidden{
visibility:hidden;
}
#equal
{display:none;
}
#e1
{display:none;
}
.button-purple {
background: #9966cb;
color:#FFFFFF;
border-color: #8040be #8040be #733aab;
background-image: -webkit-linear-gradient(top, #a87dd3, #9966cb 66%, #8f57c6);
background-image: -moz-linear-gradient(top, #a87dd3, #9966cb 66%, #8f57c6);
background-image: -o-linear-gradient(top, #a87dd3, #9966cb 66%, #8f57c6);
background-image: linear-gradient(to bottom, #a87dd3, #9966cb 66%, #8f57c6);
}
.button-purple:active {
background: #9966cb;
color:#FFFFFF;
border-color: #733aab #8040be #8040be;
}
.button {
position: relative;
display: inline-block;
vertical-align: top;
height: 36px;
line-height: 35px;
padding: 0 20px;
font-size: 20px;
color:#FFFFFF;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
background-clip: padding-box;
border: 1px solid;
border-radius: 2px;
cursor: pointer;
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25);
}
.button:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
color:#FFFFFF;
pointer-events: none;
background-image: -webkit-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
background-image: -moz-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
background-image: -o-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
background-image: radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
}
.button:hover:before {
background-image: -webkit-radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
background-image: -moz-radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
background-image: -o-radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
background-image: radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
}
.button:active {
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
color:#FFFFFF;
}
.button:active:before {
content: none;
color:#FFFFFF;
}
.button-pink {
background: #e8367f;
border-color: #d31865 #d31865 #bc165a;
background-image: -webkit-linear-gradient(top, #eb5190, #e8367f 66%, #e62473);
background-image: -moz-linear-gradient(top, #eb5190, #e8367f 66%, #e62473);
background-image: -o-linear-gradient(top, #eb5190, #e8367f 66%, #e62473);
background-image: linear-gradient(to bottom, #eb5190, #e8367f 66%, #e62473);
}
.button-pink:active {
background: #e8367f;
border-color: #bc165a #d31865 #d31865;
}
.button-orange {
background: #f4902a;
border-color: #df770c #df770c #c76a0a;
background-image: -webkit-linear-gradient(top, #f69f47, #f4902a 66%, #f38617);
background-image: -moz-linear-gradient(top, #f69f47, #f4902a 66%, #f38617);
background-image: -o-linear-gradient(top, #f69f47, #f4902a 66%, #f38617);
background-image: linear-gradient(to bottom, #f69f47, #f4902a 66%, #f38617);
}
.button-orange:active {
background: #f4902a;
border-color: #c76a0a #df770c #df770c;
}
.button-green {
background: #5ca934;
border-color: #478228 #478228 #3c6f22;
background-image: -webkit-linear-gradient(top, #69c03b, #5ca934 66%, #54992f);
background-image: -moz-linear-gradient(top, #69c03b, #5ca934 66%, #54992f);
background-image: -o-linear-gradient(top, #69c03b, #5ca934 66%, #54992f);
background-image: linear-gradient(to bottom, #69c03b, #5ca934 66%, #54992f);
}
.button-green:active {
background: #5ca934;
border-color: #3c6f22 #478228 #478228;
}.button-red {
background: #d5452f;
border-color: #ae3623 #ae3623 #992f1f;
background-image: -webkit-linear-gradient(top, #da5c48, #d5452f 66%, #c73d28);
background-image: -moz-linear-gradient(top, #da5c48, #d5452f 66%, #c73d28);
background-image: -o-linear-gradient(top, #da5c48, #d5452f 66%, #c73d28);
background-image: linear-gradient(to bottom, #da5c48, #d5452f 66%, #c73d28);
}
.button-red:active {
background: #d5452f;
border-color: #992f1f #ae3623 #ae3623;
}
.button-gray {
background: #47494f;
border-color: #2f3034 #2f3034 #232427;
background-image: -webkit-linear-gradient(top, #55585f, #47494f 66%, #3d3f44);
background-image: -moz-linear-gradient(top, #55585f, #47494f 66%, #3d3f44);
background-image: -o-linear-gradient(top, #55585f, #47494f 66%, #3d3f44);
background-image: linear-gradient(to bottom, #55585f, #47494f 66%, #3d3f44);
}
.button-gray:active {
background: #47494f;
border-color: #232427 #2f3034 #2f3034;
}
.tasks {
margin: 50px auto;
width: 240px;
background: white;
border: 1px solid #cdd3d7;
border-radius: 4px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.ui-widget-header {
position: relative;
line-height: 24px;
padding: 7px 15px;
color: #5d6b6c;
align:"center";
text-shadow: 0 1px rgba(255, 255, 255, 0.7);
background: #f0f1f2;
border-bottom: 1px solid #d1d1d1;
border-radius: 3px 3px 0 0;
background-image: -webkit-linear-gradient(top, #f5f7fd, #e6eaec);
background-image: -moz-linear-gradient(top, #f5f7fd, #e6eaec);
background-image: -o-linear-gradient(top, #f5f7fd, #e6eaec);
background-image: linear-gradient(to bottom, #f5f7fd, #e6eaec);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.03);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.03);
}
.tasks-title {
line-height: inherit;
font-size: 14px;
font-weight: bold;
color: inherit;
}
</style>
<script type="text/javascript">
$("#text10").keyup(function(){
$("#text10").blur();
$("#text10").focus();
});
$("#text10").change(function(){
var name = $('#text10').val();
var numbers = /^[0-9]+$/;
var specialChars = "<>#!#$%^&*()_+[]{}?:;|'\"\\,./~`-=";
if (name == "" || name == " " )
{
// alert('All Boxes have elements.');
$("#equal").show();
$("#equal a").html("please enter account number");
}
else if(name.match(numbers))
{
$("#equal").hide();
$("#equal a").html("correct account number"); // alert('All Boxes have elements.');
}
else if(name.match(specialChars))
{
$("#equal").show();
$("#equal a").html("correct account number"); // alert('All Boxes have elements.');
}
else
{
// alert('All Boxes have elements.');
$("#equal").show();
$("#equal a").html("please check your account number correctly");
}
});
</script>
Then save your article and it should work.

Try this,
for adding custom HTML ,JS , PHP codes inside Joomla article.
You can use some extensions or create your own module for this,
In this case you are trying to add the codes into article section with Joomla editor.
The Include HTML or PHP codes into joomla article will help you to solve .
Other wise simply edit the template file.
Hope its helps..

change div z-index from high to low if div crosses over other div when window resized?

i have a div called 'start-button' with a higher z-index than an image on my page.
Basically if a user shrinks the window width to anything lower than 1024x768 then i want the z-index of 'start-button' to be set below the image so that the image then appears on top of the other div.
is there a way of using jquery of css to say that if the window width goes lower than 1024x768 then to change the z-index of the divs? or can i use something like css .start-button:width=37.7%{ to determine when the divs z-index should change.
<div class="start-button"></div>
<div class="image"></div>
css for start-button:
.start-button{
border: 1px solid #3f3f3f;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 1px rgba(0, 0, 0, 0.3);
color: #434343;
cursor: pointer;
display: block;
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
margin-top: 15px;
margin-left:0px;
padding: 10px;
text-shadow: 0 -1px 0 #444444;
text-align:center;
width: 90px;
height:20px;
position:absolute;
z-index:150;
font-size:16px;
font-weight:400;
text-decoration:none;
background-color:#cccccc;
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
background-color:#333333;
background-image: linear-gradient(top, #f7f7f7 0%, #9f9f9f 100%);
background-image: -o-linear-gradient(top, #f7f7f7 0%, #9f9f9f 100%);
background-image: -moz-linear-gradient(top, #f7f7f7 0%, #9f9f9f 100%);
background-image: -webkit-linear-gradient(top, #f7f7f7 0%, #9f9f9f 100%);
background-image: -ms-linear-gradient(top, #f7f7f7 0%, #9f9f9f 100%);
overflow:hidden;
}
image css:
.header_logo_place{
width:100%;
height:525px;
float:left;
margin-left:4%;
background-image:url(../img/image_logo2013.png);
background-repeat:no-repeat;
background-position:bottom left;
position:relative;
margin-top:-1px;
z-index:230;
}

You can use CSS media-queries for this, no need for javascript/jQuery:
#media (max-width: 1024px) and (max-height: 768px) {
.start-button {
z-index: 0; /* amend as required */
}
}

Develop Reference

JavaScript is the programming language of the Web.

Show a "bouncing dot loading gif" over button when clicked - javascript

Replace $(this).fadeIn(200).html('<img src="http://i.imgur.com/UOSBUX1.gif" align="absmiddle">'); with $(this).children().first().fadeIn(200).html('<img src="http://i.imgur.com/UOSBUX1.gif" align="absmiddle">'); jsfiddle To make it a bit shorter, you can also use .eq(0) instead of .first().

It's because $(this) in your function is the $('.vote') button. Instead, use $('.button-vote-up') or one of the other elements inside the button.

Related

JQuery Datepicker - vertically center date

Margin-Right on css not Working

toggle function making all other divs disappear

How to run jsfiddle code in joomla 3.2

change div z-index from high to low if div crosses over other div when window resized?

Categories

Resources