toggle function making all other divs disappear - javascript

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

Related

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.

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

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

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.

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 */
}
}

Categories

Resources