I have an input field and I want that the background of the input field fill every time when some type something in. So the background shows the progress of the input field.
<input class="controlinput" id="title" maxlength="156" data-class=".title" type="text">
156 characters are the 100%;
$("#title").on('keyup', function(){
var maxlength = $(this).attr("maxlength");
var percentage = Math.floor($(this).val().length / maxlength * 100) + '%';
$("#percentage").text(percentage);
$("#bg").css({width: percentage});
})
.container {
position:relative;
display:inline-block;
}
#bg {
position: absolute;
left:0px;
background-color:lightblue;
width:0%;
height:16px;
top:1px;
z-index:0;
}
#title {
padding-right:30px;
position:relative;
z-index:1;
background:transparent;
}
#percentage {
font-size:10px;
color:#777;
position:absolute;
right: 5px;
top:3px;
z-index:2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<input class="controlinput" id="title" maxlength="156" data-class=".title" type="text">
<span id="percentage"></span>
<div id="bg"></div>
</div>
Related
If you write text, a textarea increases in size, but when you delete this text then nothing happens. Is it possible to dynamically decrease the height of a textarea if you are deleting text?
$('textarea').on('input', function() {
var scrollHeight = parseInt($(this).prop('scrollHeight'));
$(this).height(scrollHeight);
});
.OuterDiv
{
width:200px;
height:300px;
border:1px solid #000;
position:relative;
bottom:0;
}
.text
{
resize:none;
width:198px;
height:45px;
max-height:145px;
background-color:rgba(90,90,180,1);
font-size:16px;
font-family:Arial;
overflow-y:auto;
padding:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="OuterDiv">
<textarea class="text" placeholder="Write some text..."></textarea>
</div>
Set the height style instead of the property, and use an initial height so as to always start at 45px.
$('textarea').on('input', function() {
$(this).css('height', "45px");
$(this).css('height', this.scrollHeight+"px");
});
.OuterDiv
{
width:200px;
height:300px;
border:1px solid #000;
position:relative;
bottom:0;
}
.text
{
resize:none;
width:198px;
height:45px;
max-height:145px;
background-color:rgba(90,90,180,1);
font-size:16px;
font-family:Arial;
overflow-y:auto;
padding:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="OuterDiv">
<textarea class="text" placeholder="Write some text..."></textarea>
</div>
You could use a div with contentEditable instead it will auto-resize depending on the contentno need for any script :
.OuterDiv
{
width:200px;
height:300px;
border:1px solid #000;
position:relative;
bottom:0;
}
.text
{
resize:none;
width:198px;
min-height:45px;
height:auto;
max-height:145px;
background-color:rgba(90,90,180,1);
font-size:16px;
font-family:Arial;
overflow-y:auto;
padding:0;
}
[contenteditable=true]:empty:before{
content: attr(placeholder);
display: block; /* For Firefox */
color: grey;
}
<div class="OuterDiv">
<div class="text" contentEditable="true" placeholder="Write some text..."></div>
</div>
Am trying to scroll my webpage to a div which would get visible once I click on a label, it doesn't work.
jsfiddle :
Demo.html
http://jsfiddle.net/sathish_panduga/8w8gughf/
I followed a tutorial to animate HTML, Body but it doesn't work somehow. Below is the script and demo html.
<script src="http://localhost/app/static/jquery-1.10.2.min.js"></script>
<style type="text/css">
.addDiv{
font-size: 20px;
display:block;
margin-top:40%;
border:solid;
width:16%;
border-color:#808080;
}
.addDiv + input{
display:none;
}
.addDiv + input + *{
display:none;
}
.addDiv+ input:checked + *{
display:block;
}
.inner {
border: 1px solid green;
width: 100%;
height: 600px;
}
.inner1 {
position:relative;
width:50%;
height:500px;
float:left;
background:#808080;
background-color:#808080;
overflow:hidden;
}
.inner2 {
position:relative;
width:50%;
height:500px;
float:left;
background:green;
background-color:green;
overflow:hidden;
}
</style>
<body>
<script type="text/javascript">
$("#button").click(function () {
$('html, body').animate({
scrollTop: $("#moredetails1").offset().top
}, 2000);
});
</script>
<label class="addDiv" for="_1" id="button">Add more details?</label>
<input id="_1" type="checkbox">
<div class="inner" style="margin-top:20px;" id="moredetails1">
<div class="inner1">
<section>
Enter Name:<input type="text" /><br /><br />
</section>
</div>
<div class="inner2">
<section>
Enter Name:<input type="text" /><br /><br />
</section>
</div>
</div>
what am I missing in above jquery?
I've edited yout css and script
jsfiddle : https://jsfiddle.net/ArtyukhAlex/63wy2g0r/1/
To make your script capture div's top offset you need it to be visible at the moment when animate function executing, so the best solution is to show and hide it with script instead of css.
I have been making some changes to my website except suddenly (this is a new problem) I am unable to click the buttons or anything on the website except for the header part (the grey part at the top of the screen.) This happens quite frequently to other pages of my site and typically after looking at it for a while I figure it out but this time I just cannot get it. The code for this page will be shown below. Any help will be appreciated. Just a little note, I believe it is in the header because I was editing the search. The code is shown below.
<!DOCTYPE html
<html>
<head>
<title>Your Pages</title>
<meta name="viewport" content="initial-scale=1.0">
<style>
div.wrapper{
margin:auto;
text-align:center;
width:100%;
transition:background 2s ease-in-out;
}
div.pages{
text-align:center;
background-color:#FFFFE8;
margin:auto;
width:95%;
padding:5px;
}
button{
margin:5px;
width:95%;
padding:4px;
background-color:skyblue;
border:2px solid skyblue;
}
a.opt{
margin:5px;
}
input[type="text"], input[type="submit"], textarea{
width:50%;
border-radius:10px;
border:1px solid lightblue;
height:30px;
padding:2px;
margin:4px;
text-align:center;
background-color:white;
}
div.newp{
position:relative;
z-index:0;
width:75%;
margin:auto;
padding:10px;
border-radius:10px;
box-shadow:10px 5px 5px black;
background-color:white;
display:none;
}
</style>
</head>
<body>
<style>
span.posts{
font-family:sans-serif;
font-weight:bold;
font-size:28px;
float:left;
}
div.wrapper{
position:absolute;
top:30%;
width:100%;
font-family:sans-serif;
z-index:-1;
}
h3.num{
font-family:sans-serif;
font-weight:normal;
font-size:28px;
}
div.main{
position:fixed;
border:1px solid black;
box-shadow:10px 10px 10px #000000;
background-color:rgba(000, 000, 000, 0.7);
width:100%;
padding:5px;
}
body{
padding:0px;
margin:0px;
}
a.hea{
text-decoration:none;
color:white;
float:left;
font-size:28px;
}
a.mlinks{
float:none;
}
a.menu{
margin:28px;
color:white;
}
div.mmenu{
display:none;
position:absolute;
z-index:0;
transition:all 2s ease-in-out;
}
input[type="text"].se{
margin-top:7%;
visibility:hidden;
width:0%;
transition:all 2s ease-in-out;
float:left;
}
#media (max-width:480px){
a.menu{
display:none;
}
a.menbs{
float:left;
}
div.mmenu{
display:block;
position:absolute;
left:-100%;
width:100%;
top:30%;
height:70%;
text-align:center;
background-color:black;
color:white;
transition:left 2s ease-in-out;
}
}
#media (min-width:481px){
a.menb{
display:none;
}
}
a.menb{
float:right;
margin-right:8px;
}
a.menbs{
float:right;
margin-right:8px;
}
img.menuimage{
width:3em;
height:3em;
}
div.searchField{
width: 100%;
background-color:black;
display:none;
opacity:0;
position:absolute;
top:0%;
left:0%;
color:white;
text-align:center;
padding-top:10%;
transition:all 1s ease-in-out;
}
input[type="text"].headerSearch{
background-color:transparent;
border:2px solid white;
color:white;
text-align:center;
width:75%;
font-size:28px;
padding:4px;
}
</style>
<div class="main" id="main">
<h3 class="num"><span class="posts">Posts</span>101</h3>
<a class="menu hea" href="http://www.wilsonfamily5.org/posts101/pages" target="frame">Pages</a>
<a class="menu hea" href="http://www.wilsonfamily5.org/posts101/accounts" target="frame">My Account</a>
<input type="text" onclick="submitForm()" placeholder="search" class="se" id="se">
<a class="menb hea" onclick="mmenu()"><img class="menuimage" src="http://www.wilsonfamily5.org/posts101/menu.png" alt="menu"></a>
<a class="menbs hea" onclick="search()"><img class="menuimage" src="http://www.wilsonfamily5.org/posts101/search.png" alt="search" onclick="search()"></a>
</div>
<div class="mmenu" id="mmenu">
<a class="hea mlinks" href="http://www.wilsonfamily5.org/posts101/pages" target="frame">Pages</a><br>
<a class="hea mlinks" href="http://www.wilsonfamily5.org/posts101/account" target="frame">My Account</a>
</div>
<div class="searchField" id="searchField" style="height: 100%;">
<form action="results.php" method="GET">
<h1>search anything, then click enter</h1>
<input type="text" name="q" placeholder="search" class="headerSearch"><br><br>
<a onclick="cancelSearch()" style="color:white;">cancel search</a>
</form>
</div>
<script>
var mmop = false;
function mmenu(){
if(mmop == false){
document.getElementById("mmenu").style.display="block";
document.getElementById("mmenu").style.left="0%";
mmop = true;
}else{
document.getElementById("mmenu").style.left="-100%";
mmop = false;
setTimeout(function(){
document.getElementById("mmenu").style.display="none";
}, 2000);
}
}
var sea = false;
function search(){
document.getElementById("searchField").style.display="block";
document.getElementById("searchField").style.opacity="0.7";
}
function cancelSearch(){
document.getElementById("searchField").style.display="none";
}
function submitForm(){
var se = document.getElementById("se").value;
window.location="http://www.wilsonfamily5.org/posts101/results.php?q=" + se;
}
</script>
<div id="wrapper" class="wrapper">
<h1>Your Pages</h1>
<p>Click on "Create page" to create a page. Click on a page, and then select whether you want to open it, edit it, or unsubscribe.</p>
<p style="color:green;"></p>
<p style="color:red;"></p>
<button id="cbutton" onclick="newf()">Create page</button>
<div id="newp" class="newp">
<form id="newpageform" name="newp" action="newPage.php" method="POST">
<h1>New Page</h1>
<input type="text" name="title" placeholder="Title"><br>
<textarea form="newpageform" name="description" placeholder="Description"></textarea><br>
<textarea form="newpageform" name="keywords" placeholder="Keywords (separated by space)"></textarea><br>
<input type="text" onkeyup="ajaxRefresh()" style="display:none; margin:auto;" name="rCode" id="rcode" placeholder="rewards code">
<p id="info"></p>
<input type="submit" value="Create Page"><br>
<a onclick="redeemCode()">Redeem rewards code</a>
</form>
<button onclick="closeNewPage()">Close</button>
</div>
<div id="newep" class="newp">
<form id="editpageform" name="newp" action="editPage.php" method="POST">
<h1>Edit Page</h1>
<input type="text" id="title" name="title" placeholder="Title"><br>
<textarea form="editpageform" id="description" name="description" placeholder="Description"></textarea><br>
<textarea form="editpageform" id="keywords" name="keywords" placeholder="Keywords (separated by space)"></textarea><br>
<input type="hidden" name="ident" id="ident">
<input type="submit" value="Edit Page">
</form>
<button onclick="closeEditPage()">Close</button>
</div>
<div id="pages" class="pages">
Helicopter<a class='opt' href='page.php?p=45'>Open</a><a class='opt' onclick='edit(45)'>Edit</a><a class='opt' onclick='unsubscribe(45)'>Unsubscribe</a><br>Test page<a class='opt' href='page.php?p=43'>Open</a><a class='opt' onclick='unsubscribe(43)'>Unsubscribe</a><br>Test page<a class='opt' href='page.php?p=42'>Open</a><a class='opt' onclick='unsubscribe(42)'>Unsubscribe</a><br> <p>To get new pages on this list, create or search for a page!</p>
</div>
</div>
<script>
function newf(){
document.getElementById("wrapper").style.background="black";
document.getElementById("newp").style.display="block";
document.getElementById("cbutton").style.display="none";
document.getElementById("pages").style.display="none";
}
function unsubscribe(id){
window.location="../substatus/unsubscribe.php?i=" + id + "&t=1";
}
function edit(id){
document.getElementById("wrapper").style.background="black";
document.getElementById("newep").style.display="block";
document.getElementById("cbutton").style.display="none";
document.getElementById("pages").style.display="none";
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
var text = xhttp.responseText;
var parts = text.split("?(105|SpLiTtEr)!");
document.getElementById("title").value = parts[0];
document.getElementById("description").value = parts[1];
document.getElementById("keywords").value = parts[2];
document.getElementById("ident").value = id;
}
xhttp.open("GET", "http://www.wilsonfamily5.org/posts101/pageInfo.php?i=" + id, true);
xhttp.send();
}
function closeEditPage(){
document.getElementById("wrapper").style.background="white";
document.getElementById("newep").style.display="none";
document.getElementById("cbutton").style.display="block";
document.getElementById("pages").style.display="block";
}
function closeNewPage(){
document.getElementById("wrapper").style.background="white";
document.getElementById("newp").style.display="none";
document.getElementById("cbutton").style.display="block";
document.getElementById("pages").style.display="block";
}
function redeemCode(){
document.getElementById("rcode").style.display="block";
}
function ajaxRefresh(){
var input = document.getElementById("rcode").value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange=function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
if(xhttp.responseText == ""){
document.getElementById("rcode").style.border="2px solid red";
document.getElementById("info").innerHTML = xhttp.responseText;
}else{
document.getElementById("rcode").style.border="2px solid green";
document.getElementById("info").innerHTML = xhttp.responseText + " points are available on this card.";
}
}
}
xhttp.open("GET", "../rewards/ajaxCheck.php?c=" + input, true);
xhttp.send();
}
</script>
</body>
</html>
Short answer:
Your links and such aren't clickable because they have a negative z-index, and are falling underneath the body. Line 91:
div.wrapper {
z-index: -1;
}
I want to make text animation like this slide in from left. There are three text fields
Sports Cargo Bag
$14
Sale $25
I want these text to be set from jquery and slide in from the left like this link
. This is my code JsFiddle, i have set these headtext but i want to use jquery method to set these texts
html
<div id="mainContainer">
<div id="logdo">
<img src="http://i.share.pho.to/7346a9ca_o.gif"/>
</div>
<div id="images">
<img id="introImg" src="http://i.share.pho.to/9064dfe4_o.jpeg"/></div>
<div id="headlineText">
<p id="headline1Txt" ></p>
<p id="headline2Txt" ></p>
<p id="headline3Txt" ></p>
</div>
<button class="btn btn-primary" id="ctaBtn" type="button">SHOP NOW</button>
</div>
css
* {
margin:0;
padding:0;
}
#mainContainer{ text-align: center;
width:160px;
height:600px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:5px solid #BACAE4;
overflow: hidden;
position: fixed;
}
#images{
position:absolute;
top:200px;
left:3px;
right:1286px;
Width:130px;
height:152px;
}
#introImg{
position:absolute;
top:40px;
left:7px;
right:11px;
}
#headlineText p
{
text-align: center;
position: absolute;
top:60px;
left:-120px;
Width:120px;
height:269px;
line-height:1.0;
overflow:hidden;
}
#ctaBtn{
position:absolute;
top:540px;
left:26px;
right:0px;
Width:106px;
height:28px;
}
Here is the simplest method:
Replace all our current javascript in your fiddle with $("#mainContainer").hide().show('slide');.
If you want you can use .delay(500) to make it wait a bit before the animation: $("#mainContainer").hide().delay(500).show('slide');
I am starting up on jquery and was tryin to create a simple div hide and show effect. The effects seem to work fine but i need that when user clicks on any other part of the document(i. except the hide/show box), the box should hide back. This is the jsfiddle :
http://jsfiddle.net/39DzJ/. I have not styled it properly. I wanted the effects to work first.
Can anyone help me out ?
Here's the HTML code :
<style>
#mail_floater
{
background:#fce8bd;
height:88px;
width:342px;
border:1px solid #b7ad02;
border-radius:5px;
position:absolute;
left:200px;
top:50px;
border-top:none;
z-index:100;
padding:0;
}
#subscribe_user
{
width:248px;
height:16px;
border:1px solid #b7ad02;
}
#cust_care_floater
{
background:#fce8bd;
height:12px;
width:108px;
border:1px solid #b7ad02;
border-radius:2px;
border-bottom-left-radius:2px;
position:absolute;
left:450px;
top:30px;
border-top:none;
z-index:100;
clear:both;
font-family:Tahoma, Geneva, sans-serif;
font-size:10px;
font-weight:bold;
color:#036f05;
box-shadow:1px 1px 3px #ccc inset;
}
#closer
{
float:right;
margin-right:5px;
margin-top:2px;
width:19px;
height:19px;
background:url(../images/close.png) no-repeat;
}
</style>
</head>
<body>
Subscribe
Customer care
<div id="mail_floater">
<h5>Email</h5>
<div id="closer"></div>
<div id="email_input"><form><label>Enter E-mail : </label><span><input type="text" id="subscribe_user" /></span>
<input type="submit" id="subscribe_me" value="Done" /></form></div>
</div>
<div id="cust_care_floater">
<span style="padding:0px 10px 0 10px;">033-993-99920</span>
</div>
</body>
The javascript code :
$(document).ready (
function()
{
var disp_box=$('#mail_floater');
var sub_link=$('#subscribe');
var disp_box_2=$('#cust_care_floater');
var sub_link_2=$('#customer_care');
disp_box.hide();
disp_box_2.hide();
sub_link.click
(
function()
{
disp_box.show();
});
disp_box.find('#closer').click
(
function()
{
disp_box.hide();
});
sub_link_2.click
(
function()
{
disp_box_2.show();
});
});
$(document).on('click', ':not(.hideDiv)', function(e){
if($(e.target).is(':not(.hideDiv)')) { //extra check for good measure
$('.hideDiv').hide();
}
});
Demo: http://jsfiddle.net/maniator/S9fDy/