就像现在一样,我的网站的某些部分在代码中有style="display:none;"
。我网站上的一些按钮运行Javascript,显示那些,$('#phonecompText').fadeIn();
。当我让网站上的文字行淡出时,背景跟不上页面。
在
关于如何延长背景的任何想法?
这些是我的css文件夹中的文件。
这是我的style.css
@charset 'UTF-8';
@import url("font-awesome.min.css");
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,700|Open+Sans+Condensed:300,700");
/*********************************************************************************/
/* Basic */
/*********************************************************************************/
body {
background-color: #dbdbdb;
background-image: url('images/bg02.png');
}
body.is-loading * {
-moz-transition: none !important;
-webkit-transition: none !important;
-o-transition: none !important;
-ms-transition: none !important;
transition: none !important;
-moz-animation: none !important;
-webkit-animation: none !important;
-o-animation: none !important;
-ms-animation: none !important;
animation: none !important;
}
body, input, textarea, select {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
color: #565656;
}
a {
color: #1784CD;
}
strong, b {
font-weight: 700;
color: #232323;
}
h2, h3, h4, h5, h6 {
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
color: #232323;
}
h2 a, h4 a, h5 a, h6 a {
text-decoration: none;
color: inherit;
}
blockquote {
border-left: solid 5px #ddd;
padding: 1em 0 1em 2em;
font-style: italic;
}
em, i {
font-style: italic;
}
hr {
border: 0;
border-top: solid 1px #ddd;
padding: 1.5em 0 0 0;
margin: 1.75em 0 0 0;
}
sub {
position: relative;
top: 0.5em;
font-size: 0.8em;
}
sup {
position: relative;
top: -0.5em;
font-size: 0.8em;
}
br.clear {
clear: both;
}
p, ul, ol, dl, table {
margin-bottom: 1em;
}
/* Table */
table {
width: 100%;
}
table.default {
}
table.default tbody tr:nth-child(2n+2) {
background: #f4f4f4;
}
table.default td {
padding: 0.5em 1em 0.5em 1em;
}
table.default th {
text-align: left;
font-weight: 700;
padding: 0.75em 1em 0.75em 1em;
}
table.default thead {
border-bottom: solid 1px #ddd;
}
table.default tfoot {
border-top: solid 1px #ddd;
background: #eee;
}
table.default tbody {
}
/* Form */
form {
}
form label {
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
color: #232323;
margin: 0 0 0.75em 0;
}
form input[type="text"], form input[type="email"], form input[type="password"], form select, form textarea {
display: block;
border-radius: 0.4em;
-webkit-appearance: none;
border: solid 1px #ddd;
padding: 0.5em 0.75em;
width: 100%;
line-height: 1.25em;
}
form input[type="text"]:focus, form input[type="email"]:focus, form input[type="password"]:focus, form select:focus, form textarea:focus {
box-shadow: 0px 0px 2px 2px #1784CD;
}
form ::-webkit-input-placeholder {
color: #aaa;
}
form :-moz-placeholder {
color: #aaa;
}
form ::-moz-placeholder {
color: #aaa;
}
form :-ms-input-placeholder {
color: #aaa;
}
/* Section/Article */
header {
margin: 0 0 2em 0;
}
header > p {
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 300;
display: block;
margin-top: 1em;
color: #999;
}
section, article {
margin-bottom: 3em;
}
section > :last-child, article > :last-child {
margin-bottom: 0;
}
section > .inner > :last-child, article > .inner > :last-child {
margin-bottom: 0;
}
section:last-child, article:last-child {
margin-bottom: 0;
}
/* Image */
.image {
display: inline-block;
}
.image img {
display: block;
width: 100%;
}
.image.fit {
display: block;
width: 100%;
}
.image.featured {
display: block;
width: 100%;
margin: 0 0 2em 0;
}
.image.left {
float: left;
margin: 0 2em 2em 0;
}
.image.centered {
display: block;
margin: 0 0 2em 0;
}
.image.centered img {
margin: 0 auto;
width: auto;
}
/* Button */
{
display: none;
}
input[type="button"], input[type="submit"], input[type="reset"], .button {
cursor: pointer;
background-color: #1784CD;
background-image: url('images/bg01.png');
border-radius: 0.4em;
text-align: center;
box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,0.15);
color: #fff;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
text-decoration: none;
-moz-transition: background-color .25s ease-in-out, color .25s ease-in-out;
-webkit-transition: background-color .25s ease-in-out, color .25s ease-in-out;
-o-transition: background-color .25s ease-in-out, color .25s ease-in-out;
-ms-transition: background-color .25s ease-in-out, color .25s ease-in-out;
transition: background-color .25s ease-in-out, color .25s ease-in-out;
text-shadow: -1px -1px 0px rgba(59,0,0,0.5);
}
input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled, input[type="button"].disabled, input[type="submit"].disabled, input[type="reset"].disabled, .button.disabled {
opacity: 0.35;
cursor: default;
}
input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, .button:hover {
background-color: #289eed;
}
input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active, .button:active {
background-color: #b93653;
}
input[type="button"].alt, input[type="submit"].alt, input[type="reset"].alt, .button.alt {
background-color: #364050;
}
input[type="button"].alt:hover, input[type="submit"].alt:hover, input[type="reset"].alt:hover, .button.alt:hover {
background-color: #465060;
}
input[type="button"].alt:active, input[type="submit"].alt:active, input[type="reset"].alt:active, .button.alt:active {
background-color: #263040;
}
/* List */
ul.default {
list-style: disc;
padding-left: 1em;
}
ul.default li {
padding-left: 0.5em;
}
ol.default {
list-style: decimal;
padding-left: 1.25em;
}
ol.default li {
padding-left: 0.25em;
}
/* Pagination */
.pagination {
}
.pagination .pages {
display: inline-block;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
}
.pagination .pages span {
display: inline-block;
width: 1.5em;
text-align: center;
margin: 0 0.4em 0 0;
}
.pagination .pages a {
cursor: pointer;
display: inline-block;
text-align: center;
text-decoration: none;
color: inherit;
background-color: #dbdbdb;
background-image: url('images/bg02.png');
color: #565656;
margin: 0 0.4em 0 0;
border-radius: 0.4em;
-moz-transition: background-color .25s ease-in-out;
-webkit-transition: background-color .25s ease-in-out;
-o-transition: background-color .25s ease-in-out;
-ms-transition: background-color .25s ease-in-out;
transition: background-color .25s ease-in-out;
box-shadow: inset 0 0.075em 0.25em 0 rgba(0,0,0,0.1);
}
.pagination .pages a:hover {
background-color: #dadada;
}
.pagination .pages a.active {
background-color: #364050;
color: #fff;
box-shadow: none;
text-shadow: -1px -1px 0px rgba(0,0,0,0.5);
}
/* Box */
.box {
}
.box.calendar {
}
.box.calendar .inner {
position: relative;
background-color: #272E39;
background-color: rgba(0,0,0,0.15);
border-radius: 0.4em;
padding: 0.75em 0.5em 0.75em 0.5em;
box-shadow: 0 0 0 1px rgba(255,255,255,0.05), inset 0 0 0.25em 0 rgba(0,0,0,0.25);
}
.box.calendar caption {
font-weight: 700;
color: #fff;
margin: 0 0 0.25em 0;
}
.box.calendar table {
margin: 0 auto;
}
.box.calendar tr {
}
.box.calendar td, .box.calendar th {
cursor: default;
padding: 0.35em 0 0.35em 0;
border-top: solid 1px rgba(0,0,0,0.25);
box-shadow: inset 0px 1px 0px 0px rgba(255,255,255,0.075);
}
.box.calendar th {
font-weight: 700;
color: #fff;
}
.box.calendar td a, .box.calendar td span {
display: block;
margin: 0 auto;
width: 1.5em;
height: 1.5em;
text-align: center;
line-height: 1.4em;
border-radius: 0.4em;
-moz-transition: background-color .25s ease-in-out;
-webkit-transition: background-color .25s ease-in-out;
-o-transition: background-color .25s ease-in-out;
-ms-transition: background-color .25s ease-in-out;
transition: background-color .25s ease-in-out;
text-decoration: none;
}
.box.calendar td a {
color: #fff;
font-weight: 700;
}
.box.calendar td a:hover {
background-color: rgba(200,225,255,0.1);
color: #fff;
}
.box.calendar td.today a {
background-color: #1784CD;
background-image: url('images/bg01.png');
box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,0.15), 0 0.025em 0.15em 0em rgba(0,0,0,0.25);
color: #fff !important;
}
.box.post {
position: relative;
}
.box.post .info {
}
.box.post .info .stats {
margin: 0;
cursor: default;
}
.box.post .info .stats a {
font-size: 0.8em;
text-decoration: none;
color: #232323;
font-weight: 700;
line-height: 1em;
}
.box.recent-posts, .box.recent-comments {
}
.box.recent-posts li, .box.recent-comments li {
border-top: solid 1px rgba(0,0,0,0.25);
box-shadow: inset 0px 1px 0px 0px rgba(255,255,255,0.075);
padding: 0.5em 0 0.5em 0;
}
.box.recent-posts li:first-child, .box.recent-comments li:first-child {
border-top: 0;
box-shadow: none;
padding-top: 0;
}
.box.recent-posts li:last-child, .box.recent-comments li:last-child {
padding-bottom: 0;
}
.box.search {
}
.box.search form {
position: relative;
}
.box.search form input {
position: relative;
padding-right: 34px;
}
.box.search form:before {
display: inline-block;
font-family: FontAwesome;
font-size: 18px;
text-decoration: none;
font-style: normal;
font-weight: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: '\f002';
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
position: absolute;
right: 0.5em;
top: 0.25em;
z-index: 1;
text-shadow: none;
color: #c8ccce;
}
.box.text-style1 {
}
.box.text-style1 .inner {
position: relative;
background-color: #272E39;
background-color: rgba(0,0,0,0.15);
border-radius: 0.4em;
padding: 1.25em;
box-shadow: 0 0 0 1px rgba(255,255,255,0.05), inset 0 0 0.25em 0 rgba(0,0,0,0.25);
}
/*********************************************************************************/
/* Wrapper */
/*********************************************************************************/
#wrapper {
position: relative;
}
/*********************************************************************************/
/* Nav */
/*********************************************************************************/
#nav {
}
#nav > ul > li > ul {
display: none;
}
#nav ul {
margin: 0;
}
#nav li {
border-top: solid 1px rgba(0,0,0,0.25);
box-shadow: inset 0px 1px 0px 0px rgba(255,255,255,0.075);
padding: 0.5em 0 0.5em 0;
}
#nav li:first-child {
border: 0;
box-shadow: none;
padding-top: 0;
}
#nav li:last-child {
padding-bottom: 0;
}
#nav li a {
display: block;
padding: 0.4em 1em 0.4em 1em;
text-decoration: none;
border-radius: 0.4em;
outline: 0;
-moz-transition: background-color .25s ease-in-out, color .25s ease-in-out;
-webkit-transition: background-color .25s ease-in-out, color .25s ease-in-out;
-o-transition: background-color .25s ease-in-out, color .25s ease-in-out;
-ms-transition: background-color .25s ease-in-out, color .25s ease-in-out;
transition: background-color .25s ease-in-out, color .25s ease-in-out;
}
#nav li.current a {
background-color: #272E39 !important;
background-color: rgba(0,0,0,0.15) !important;
box-shadow: 0 0 0 1px rgba(255,255,255,0.05), inset 0 0 0.25em 0 rgba(0,0,0,0.25);
font-weight: 700;
color: #fff;
}
#nav li:hover a {
background-color: rgba(255,255,255,0.1);
color: #fff;
}
/*********************************************************************************/
/* Sidebar */
/*********************************************************************************/
#sidebar {
color: #aaa;
color: rgba(255,255,255,0.55);
text-shadow: -1px -1px 0px rgba(0,0,0,0.5);
}
#sidebar form input, #sidebar form select, #sidebar form textarea {
border: 0;
}
#sidebar section, #sidebar nav {
position: relative;
}
#sidebar section:before, #sidebar nav:before {
content: '';
border-top: solid 1px;
border-bottom: solid 1px;
border-color: #171E29;
border-color: rgba(0,0,0,0.25);
box-shadow: inset 0px 1px 0px 0px rgba(255,255,255,0.075), 0px 1px 0px 0px rgba(255,255,255,0.075);
display: block;
}
#sidebar strong, #sidebar b {
color: #fff;
}
#sidebar a {
color: #d4dde0;
}
#sidebar h2, #sidebar h3, #sidebar h4, #sidebar h5, #sidebar h6 {
color: #fff;
}
#sidebar header {
margin: 0 0 1.25em 0;
}
#sidebar section, #sidebar nav {
margin: 2em 0 0 0;
font-size: 0.9em;
}
#sidebar section:before, #sidebar nav:before {
height: 0.5em;
margin: 0 0 2em 0;
}
/*********************************************************************************/
/* Content */
/*********************************************************************************/
#content {
position: relative;
background-color: #f2f2f2;
background-image: url('images/bg02.png');
}
#content > .inner {
position: relative;
z-index: 1;
}
/*********************************************************************************/
/* Mobile UI */
/*********************************************************************************/
#titleBar {
background: #364050 url('images/bg01.png');
}
#titleBar .title {
display: block;
color: #fff;
line-height: 44px;
font-size: 1.25em;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
letter-spacing: 0.1em;
text-shadow: -1px -1px 0px rgba(0,0,0,0.5);
box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.25);
text-align: center;
}
#titleBar .toggle {
width: 80px;
height: 60px;
position: absolute;
left: 0;
top: 0;
}
#titleBar .toggle:before {
font-family: FontAwesome;
text-decoration: none;
font-style: normal;
font-weight: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: '\f0c9';
display: block;
position: absolute;
left: 7px;
top: 7px;
font-size: 14px;
width: 50px;
height: 30px;
line-height: 30px;
background: #1784CD url('images/bg01.png');
border-radius: 5px;
color: #fff;
text-align: center;
box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,0.15), 0 0.025em 0.15em 0em rgba(0,0,0,0.25);
text-shadow: -1px -1px 0px rgba(0,0,0,0.5);
}
#titleBar .toggle:active {
}
#titleBar .toggle:active:before {
background-color: #289eed;
}
#sidePanel {
background: #364050 url('images/bg01.png');
}

<html>
<head>
<body class="left-sidebar">
<!-- Wrapper -->
<div id="wrapper">
<!-- Content -->
<div id="content">
<div class="inner">
<!-- Post -->
<article class="box post post-excerpt">
<header>
<!--
Note: Titles and subtitles will wrap automatically when necessary, so don't worry
if they get too long. You can also remove the <p> entirely if you don't
need a subtitle.
-->
<nav class="cl-effect-1">
<h2><a href="textbomber.php">Start Below</a></h2>
</nav>
<p>Guests can only send 4 texts at a time</p>
<p><a href="register.php">Register for more texts</a>
</p>
<p id='sentText'></p>
</header>
<div class="info" style="background-color:#F2F2F2;">
<ul class="stats">
<li><a href="https://twitter.com/home?status=Check%20out%20OtherTXT.com%20!" class="icon fa-twitter">2521</a>
</li>
<li><a href="https://www.facebook.com/sharer/sharer.php?u=OtherTXT.com" class="icon fa-facebook">128</a>
<br>
</li>
</ul>
</div>
<span class="input input--juro">
<input class="input__field input__field--juro" name="phonenum" maxlength="15" type="text" id="phonenum" required/>
<label class="input__label input__label--juro" for="phonenum"> <span class="input__label-content input__label-content--juro">Phone Number: (10 Digit Phone Number if USA)</span>
</label>
</span>
<br>
<form>
<select name="provider" required>
<option value="" selected="selected" disabled="disabled">Phone Company</option>
<option value="@txt.att.net">AT&T</option>
<option value="@myboostmobile.com">Boost Mobile</option>
<option value="@sms.mycricket.com">Cricket Wireless</option>
<option value="@mymetropcs.com">MetroPCS</option>
<option value="@messaging.sprintpcs.com">Sprint</option>
<option value="@message.ting.com">Ting</option>
<option value="@tmomail.net">T-Mobile</option>
<option value="@pxail.uscc.net">U.S. Cellular</option>
<option value="@vtext.com">Verizon</option>
<option value="otherprovider">Other</option>
</select>
</form>
<span class="input input--juro">
<input class="input__field input__field--juro hideother" name="otherprov" type="text" id="otherprov" style="display: block;">
<label class="input__label input__label--juro" for="otherprov"> <span class="input__label-content input__label-content--juro hideother" id="other" style="display: block;">Other:</span>
</label>
</span>
<form>
<input type="button" class="whattoput hideother" id="whattoput" name="whattoput" value="What to put?" />
<a class="hideother" style="display:none;">
<br>
<br>
</a>
<strong id="phonecompText" style="direction:none;"></strong>
<input type="button" name="otherlistbut" class="important-btn" value="I don't know the phone company." />
<!-- <p>
<h3>Subject:</h3>
<input type="text" value="OtherTXT.com" disabled/>
</p> -->
<h3>Message:</h3>
<textarea name="message" rows="3" id="message" required></textarea>
<h3>Amount:</h3>
<input name="amount" id="amount" type="number" max="4" value="0" />
<h3>Seconds Between Texts:</h3>
<input name="time" type="number" min="1" value="1" required disabled/>
<strong id=sentamountText style="display:none;"></strong>
<br>
<input type="submit" class="submit" name="sendtxt" value="Start Sending" />
<p>By submitting a number through OtherTXT, you assume and take full responsibility for any result of the sending of the messages.</p>
</form>
</article>
</div>
</div>
<!-- Sidebar -->
<div id="sidebar">
<!-- Logo -->
<h1 id="logo"><a href="index.php">OtherTXT</a></h1>
<!-- Nav -->
<nav id="nav">
<ul>
<li><a href="index.php">Home</a>
</li>
<li><a href="login.php">Login / Register</a>
</li>
<li class="current"><a href="textbomber.php">Text Bomber</a>
</li>
<li><a href="tools.php">Tools</a>
</li>
<li><a href="packages.php">Packages</a>
</li>
<!-- <li><a href="raffle.php">Raffle</a></li> -->
<li><a href="contact.php">Contact Me</a>
</li>
<li><a href="tos.php">TOS / Privacy Policy</a>
</li>
<li>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="JJ9REYLJG5ZZW">
<input type="submit" name="submit" value="Donate">
<img alt="" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</li>
</ul>
</nav>
</div>
</div>
<script src="js/classie.js"></script>
<script>
$(document).ready(function() {
$("#whattoput").hide();
$("#otherprov").hide();
$("#other").hide();
$('#calender').load('calender.html');
var d = new Date();
var dayofMonth = d.getDate();
$("#" + dayofMonth).addClass('today');
});
$('input[name="whattoput"]').click(function() {
window.open("http://othertxt.com/provlist.php");
});
$('select[name="provider"]').change(function() {
showhideOther();
});
$('input[name="otherlistbut"]').click(function(d) {
if ($("#phonenum").val() === "") {
$('#phonecompText').fadeIn();
document.getElementById('phonecompText').innerHTML = "Please enter the phone number first.<br>";
} else {
lookupProvider(d);
}
});
$('input[name="sendtxt"]').click(function(e) {
if ($("#phonenum").val() === "3108667738") {
e.preventDefault();
window.location.replace("https://othertxt.com/ArieIsHot.html");
} else {
if ($("#phonenum").val() === "") {
document.getElementById("phonenum").style.borderColor = "red";
} else if ($("#message").val() === "") {
document.getElementById("message").style.borderColor = "red";
} else if ($("#amount").val() === "0") {
document.getElementById("amount").style.borderColor = "red";
} else {
document.getElementById('sentamountText').innerHTML = '<br>Sending...<br>You may leave this page.<br>';
$("#sentamountText").fadeIn();
sendText(e);
}
}
if ($("#amount").val() > 4) {
e.preventDefault();
alert("You must register to send more than 4 texts");
}
});
/************ FUNCTIONS ******************/
$('input[name="phonenum"],input[name="amount"],input[name="time"]').on('input', function() {
if (/\D/g.test(this.value)) {
this.value = this.value.replace(/\D/g, '');
}
});
function showhideOther() {
if ($('select[name="provider"]').val() == "otherprovider") {
$(".hideother").fadeIn();
} else {
$(".hideother").fadeOut();
}
}
function lookupProvider(d) {
$('#phonecompText').fadeIn();
document.getElementById('phonecompText').innerHTML = "Loading...<br>";
d.preventDefault();
var phonenum = $('input[name="phonenum"]').val();
$.ajax({
type: 'POST',
data: {
phonenum: phonenum
},
url: 'prov.php',
success: function(data) { //Receives the data from the php code
document.getElementById('phonecompText').innerHTML = "Phone Company: " + data + "<br>";
},
error: function(xhr, err) {
console.log("readyState: " + xhr.readyState + "\nstatus: " + xhr.status);
console.log("responseText: " + xhr.responseText);
}
});
}
function sendText(e) {
e.preventDefault();
document.getElementById("phonenum").style.borderColor = "initial";
document.getElementById("message").style.borderColor = "initial";
document.getElementById("amount").style.borderColor = "initial";
var phonenum = $('input[name="phonenum"]').val();
var provider = $('select[name="provider"]').val();
var message = $('textarea[name="message"]').val();
var otherprov = $('input[name="otherprov"]').val();
var amount = $('input[name="amount"]').val();
var time = $('input[name="time"]').val();
$.ajax({
type: 'POST',
data: {
provider: provider,
message: message,
phonenum: phonenum,
amount: amount,
otherprov: otherprov,
time: time
},
url: 'send.php',
success: function(data) {
document.getElementById('sentamountText').innerHTML = '<br>Sent ' + amount + ' texts.<br>';
},
error: function(xhr, err) {
console.log("readyState: " + xhr.readyState + "\nstatus: " + xhr.status);
console.log("responseText: " + xhr.responseText);
}
});
}
</script>
</body>
</html>
&#13;