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/
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>
I have a website where it is able to successfully detect whether you are using Chrome as your browser and it works perfectly.
The coding for this "element" is -
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
if(isChrome){
alert("Chrome is detected");
}
The other element is a transparent whole page pop up message. This also works perfectly when using a HTML button to activate the message. But I need the pop up to be activated in Javascript not on a button click, I want it activated, in the line alert("Chrome is detected"); up above. The coding for this element is below and you will see what I mean...
<!DOCTYPE html>
<head>
<style>
.button{ width: 150px; padding: 10px; background-color: #FF8C00; box-shadow: -8px 8px 10px 3px rgba(0,0,0,0.2); font-weight:bold; text-decoration:none;
}
#cover{ position:fixed; top:0; left:0; background:rgba(0,0,0,0.6); z-index:5; width:100%; height:100%; display:none;
}
#loginScreen{ height:380px; width:340px; margin:0 auto; position:relative; z-index:10; display:none; background-color: white; no-repeat; border:5px solid #cccccc; border-radius:10px;
}
#loginScreen:target, #loginScreen:target + #cover{ display:block; opacity:2;
}
.cancel{ display:block; position:absolute; top:3px; right:2px; background:rgb(245,245,245); color:black; height:32px; width:32px; font-size:30px; text-decoration:none; text-align:center; font-weight:bold; border-radius:36px;
}
</style>
</head>
<body>
<div id="top" align="center">
<!-- PLEASE DIRECT YOUR ATTENTION TO THE LINE BELOW -->
Click here to Log In <!-- THIS IS HOW THE POP UP IS ACTIVATED BUT I NEED TO ACHIEVE THIS LINE IN JAVASCRIPT -->
</div>
<div id="loginScreen">
<span style="font-size:30px">Attention User!</span>
×
</div>
<div id="cover" ></div>
</body>
</html>
Any help would be appreciated!
If you wants to open your popup when detected func if true, change your code like this :
if(isChrome){
// alert("Chrome is detected");
$("#exitbutton").trigger('click'); //
}
I dont think you will able to trigger click on an anchor tag with href.
You can use window.location.href
if(isChrome){
var href = $('#thebutton').attr('href');
window.location.href = href;
//alert("Chrome is detected");
}
JSFIDDLE
Hi everyone i have one question about jquery textcomplete.
I think this is easy but i don't know how can i do that.
I created this DEMO without jquery
So what is my question. I want when i write in textarea open parenthesis ( then .textBox div automatically open.
How can i do that anyone can tell me?
<div class="container">
<div class="textarea_wrap">
<textarea id="textarea" class="text"></textarea>
<div class="tagBox"></div>
</div>
</div>
CSS
.container{
width:300px;
height:300px;
margin:0px auto;
margin-top:30px;
}
.textarea_wrap{
width:100%;
box-sizing:border-box;
position:relative;
}
.text{
width:100%;
height:100px;
box-sizing:border-box;
outline:none;
border:1px solid #999999;
}
.tagBox{
width:300px;
height:100px;
background-color:red;
position:absolute;
top:100px;
display:none;
}
You can do something like this.
UPDATED
$(document).ready(function(){$('#textarea').keyup(function(){
if(($('#textarea').val() =="(" || $('#textarea').val().indexOf("(")>0) && $('#textarea').val().lastIndexOf("(") == $('#textarea').val().length-1 ){
$('.tagBox').show();
}else{
$('.tagBox').hide();
}
});
});
.container{
width:300px;
height:300px;
margin:0px auto;
margin-top:30px;
}
.textarea_wrap{
width:100%;
box-sizing:border-box;
position:relative;
}
.text{
width:100%;
height:100px;
box-sizing:border-box;
outline:none;
border:1px solid #999999;
}
.tagBox{
width:300px;
height:100px;
background-color:red;
position:absolute;
top:100px;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="textarea_wrap">
<textarea id="textarea" class="text"></textarea>
<div class="tagBox"></div>
</div>
</div>
See the Working Fiddle Using regex instead of several conditions :
JS :
$(function(){
$('#textarea').keyup(function(){
if($(this).val().match(/([(]$)/g)){
$('.tagBox').show();
}else{
$('.tagBox').hide();
}
});
})
I wish to addclass and removeclass when I click the tab, when click the tab on the first time, shopiteminfo_content_mobile_label add a class call activetab , if I click again the tab or click others tab , the class activetab will remove. Reason to do this is because i want the active tab have a special css. Any idea how to do this ? AddClass and RemoveClass ... Thanks
$(function () {
$('.shopiteminfo_content_mobile_label').click(function () {
$(this).removeClass("activetab");
$(this).addClass("activetab");
$(this).next('.shopiteminfo_content_mobile_content').slideToggle();
$(this).parent().siblings().children().next().slideUp();
return false;
});
$('.shopiteminfo_content_mobile_label').bind('touchstart', function (e) {
$(this).trigger('click');
e.preventDefault();
});
});
.shopiteminfo_content_mobile_container {
position:relative;
clear:both;
font-family:'Raleway';
margin-bottom:10px;
color:#000;
}
.shopiteminfo_content_mobile_container li{
display: block;
text-align: center;
text-decoration: none;
list-style:none;
color: #888;
border: 1px solid #ddd;
background: #fff;
cursor:pointer;
}
.shopiteminfo_content_mobile_label{
cursor:pointer;
display:block;
text-align:left;
font-size:14px;
color:#000;
padding:10px;
}
.shopiteminfo_content_mobile_content {
display:none;
font-size:15px;
text-align:justify;
background:#fff;
color:#000;
}
.shopiteminfo_content_mobile_content:last-of-type {
}
.shopiteminfo_mobile_productsdetail_inner_container{
width:95%;
border-bottom:1px dashed #ccc;
margin-bottom:10px;
margin-left:10px;
padding-bottom:10px;
}
.shopiteminfo_mobile_productsdetail_inner_container .shopiteminfo_mobile_label{
display:list-item;
list-style:none;
font-weight:bold;
font-size:13px;
padding:3px;
}
.shopiteminfo_mobile_productsdetail_gallery_container{
padding:0px 10px 10px 10px;
}
.shopiteminfo_mobile_productsdetail_gallery_container img{
width:auto;
height:auto;
display:block;
margin:0 auto;
padding-top:10px;
padding-bottom:10px;
}
.shopiteminfo_mobile_productsdetail_galleryname{
background:#09c;
color:#fff;
text-transform: uppercase;
padding:10px;
text-align:center;
margin-top:5px;
width:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="shopiteminfo_content_mobile_container">
<li class="shopiteminfo_content_mobile_tobeclick">
<label class="shopiteminfo_content_mobile_label">A</label>
<div class="shopiteminfo_content_mobile_content">
test
</div>
</li>
<li class="shopiteminfo_content_mobile_tobeclick">
<label class="shopiteminfo_content_mobile_label">B</label>
<div class="shopiteminfo_content_mobile_content">
test
</div>
</li>
<li class="shopiteminfo_content_mobile_tobeclick">
<label class="shopiteminfo_content_mobile_label">C</label>
<div class="shopiteminfo_content_mobile_content">
test
</div>
</li>
</div>
you should use toggleClass
$(this).toggleClass("activetab");
This would remove the css class if its already present or add it if its not.
Is this what you want?
http://jsfiddle.net/fh6tg75s/2/
$(function () {
$('.shopiteminfo_content_mobile_label').click(function () {
$(this).next('.shopiteminfo_content_mobile_content').slideToggle();
$(this).parent().siblings().children().next().slideUp();
$(this).toggleClass("activetab");
$('.shopiteminfo_content_mobile_label').not(this).removeClass("activetab");
return false;
});
$('.shopiteminfo_content_mobile_label').bind('touchstart', function (e) {
$(this).trigger('click');
e.preventDefault();
});
});
Replace the below
$(this).removeClass("activetab");
$(this).addClass("activetab");
to which uses $.fn.toggleClass
$(this).toggleClass("activetab");
Add or remove one or more classes from each element in the set of
matched elements, depending on either the class's presence or the
value of the state argument.
Just for a try you can use the ternary operator ?: which also may referred to as ternary if. In just a single line of code check if your element has the active class or not. If it has then on click remove it and if it doesn't have then add this. Here's the code,
HTML :
<div id="mainDiv">Click Here</div>
CSS :
.activeDiv{
background-color : green;
}
jQuery :
$("#mainDiv").on("click", function(){
$(this).hasClass("activeDiv") ? $(this).removeClass("activeDiv") : $(this).addClass("activeDiv")
});
jsFiddle
I can't seem to figure this out.
I have a modal keypad that will submit to a php form that will send an EMAIL sms with information regarding the website.
I want people to be able to click on the keypad to insert value's into the text field area. Similar to like using a phone.
My HTML:
<script src="http://www.busetopizza.com/demo/phone.js" type="text/javascript"></script>
<!-- Send To Phone -->
<form action="phpmailer.php" method="post" name="theform">
<input type="hidden" name="redirect" value="message_success.php">
<div class="send-to-phone-wrapper">
<div class="send-to-phone">
<div class="phone-top">
<input type="text" id="phone" name="10digit" class="phone-enter-number" placeholder="Mobile Number"></div>
<div class="buttons-wrapper">
<div class="phone-button"><p>1<br /><span></span></p></div>
<div class="phone-button"><p>2<br /><span>ABC</span></p></div>
<div class="phone-button"><p>3<br /><span>DEF</span></p></div>
<div class="phone-button"><p>4<br /><span>GHI</span></p></div>
<div class="phone-button"><p>5<br /><span>JKL</span></p></div>
<div class="phone-button"><p>6<br /><span>MNO</span></p></div>
<div class="phone-button"><p>7<br /><span>PQR</span></p></div>
<div class="phone-button"><p>8<br /><span>STU</span></p></div>
<div class="phone-button"><p>9<br /><span>VXZ</span></p></div>
<div class="phone-button-fix"><div class="phone-star"></div></div>
<div class="phone-button"><p>0<br /><span style="font-size:23px; font-weight:100;">+</span></p></div>
<div class="phone-button-fix"><div class="phone-pound"></div></div>
</div>
<div class="choose-carrier-wrapper">
<div class="choose-carrier">
<select name="carrier" class="choose-carrier-selections">
<option value="none" class="choose-styled"></option>
<option value="att" class="choose-styled">AT&T</option>
<option value="alltel" class="choose-styled">Alltel</option>
<option value="cingular" class="choose-styled">Cingular</option>
<option value="nextel" class="choose-styled">Nextel</option>
<option value="sprint" class="choose-styled">Sprint</option>
<option value="suncom" class="choose-styled">SunCom</option>
<option value="tmobile" class="choose-styled">T-mobile</option>
<option value="voicestream" class="choose-styled">VoiceStream</option>
<option value="verizon" class="choose-styled">Verizon</option>
</select>
</div>
<div class="phone-submit"><input type="submit" value="" name="submit" class="submit-phone"></div>
</div>
</div>
</div>
</form>
<!-- End Send To Phone -->
My CSS:
/* Send To Phone
---------------------------------------------------------------------------------*/
.send-to-phone-wrapper {
width:319px;
margin:0 auto;
}
.send-to-phone {
width:322px;
padding:15px;
background-color:#000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
box-shadow: 0px 10px 30px #000;
-webkit-box-shadow: 0px 10px 30px #000;
-moz-box-shadow: 0px 10px 30px #000;
}
.phone-top {
}
.buttons-wrapper {
width:321px;
height:268px;
background-color:#fff;
border-right:1px solid #2d3136;
}
.phone-button {
float:left;
text-align:center;
border-bottom:1px solid #000;
border-left:1px solid #2d3136;
border-right:1px solid #151b22;
position:relative;
}
.phone-button-fix {
float:left;
text-align:center;
border-bottom:1px solid #000;
border-left:1px solid #2d3136;
border-right:1px solid #151b22;
position:relative;
height:66px;
width:105px;
background:url(http://www.busetopizza.com/demo/sendtophone/bg-keypad.gif) repeat-x;
}
.phone-button p {
color:#FFF;
font-size:30px;
padding-top:14px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
line-height:23px;
}
.phone-button p span {
color:#878b90;
font-size:14px;
text-shadow:0px -1px 0px #000;
}
.phone-button a:link, .phone-button a:visited {
text-decoration:none;
display:block;
height:66px;
width:105px;
background:url(http://www.busetopizza.com/demo/sendtophone/bg-keypad.gif) repeat-x;
}
.phone-button a:hover {
background:url(http://www.busetopizza.com/demo/sendtophone/bg-keypad2.gif) repeat-x;
text-decoration:none;
}
.phone-button a:active {
background-image:none;
background-color:#3559c3;
}
.phone-button a:hover span {color:#9ac2fa;}
.phone-button a:active p {text-shadow:0px 0px 5px #000;}
.phone-star {
height:24px;
width:25px;
background:url(http://www.busetopizza.com/demo/sendtophone/phone-star.gif) no-repeat;
position:absolute;
top:15px;
left:39px;
}
.phone-pound {
height:24px;
width:25px;
background:url(http://www.busetopizza.com/demo/sendtophone/phone-pound.gif) no-repeat;
position:absolute;
top:15px;
left:40px;
}
.phone-enter-number {
border:none;
text-align:center;
font-size:35px;
font-weight:bold;
text-shadow:0px 2px 0px #fff;
font-family:Arial, Helvetica, sans-serif;
height:73px;
width:322px;
background:url(http://www.busetopizza.com/demo/sendtophone/bg-top.gif) repeat-x;
}
.choose-carrier-wrapper {
height:64px;
position:relative;
width:322px;
background:url(http://www.busetopizza.com/demo/sendtophone/bg-choose.gif) repeat-x;
}
.choose-carrier {
width:215px;
overflow:hidden;
}
.choose-carrier-selections {
background:url(http://www.busetopizza.com/demo/sendtophone/phone-carrier.gif) repeat-x;
border:none;
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
position:absolute;
top:0;
left:0;
width:230px;
height:63px;
padding-top:42px;
padding-left:27px;
cursor:pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size:14px;
font-weight:bold;
background-color:#000;
color:#fff;
}
.choose-styled {
}
.submit-phone {
height:64px;
width:107px;
background:url(http://www.busetopizza.com/demo/sendtophone/send.gif) repeat-x;
border:none;
position:absolute;
top:0;
right:0;
cursor:pointer;
}
I created a jfiddle
http://jsfiddle.net/muhupower/nkmXe/1/
I have tried many time with random online scripts. I am able to get the value inputting into the form from a link but all the scripts then replace the form with the other value I hit. So if I type 516 my end result is 6.. I need it to continue to populate the form.
Any help?
Here is the code to place the numbers inside the input:
var i = 0;
var num = [];
$(".buttons-wrapper a").click(function(e) {
e.preventDefault();
if($(this).attr("href") == "clear") {
num = [];
$("#phone").val(num);
i=0;
}
else if($(this).attr("href") == "delete") {
i--;
var str = $("#phone").val();
console.log(str);
if(num.length == 3) {
str = str.substring(0, str.length-3).substring(1, str.length);
}
else if(num.length == 6) {
str = str.substring(0, str.length-2);
}
else {
str = str.substring(0, str.length-1);
}
$("#phone").val(str);
num.splice(i, 1);
}
else {
if(num.length <= 9) {
num[i] = $(this).attr("href");
if(num.length == 3) {
$("#phone").val("("+$("#phone").val()+num[i]+")-");
}
else if(num.length == 6) {
$("#phone").val($("#phone").val()+num[i]+"-");
}
else {
$("#phone").val($("#phone").val()+num[i]);
}
i++;
}
}
});
And a fiddle demonstrating it: http://jsfiddle.net/nkmXe/11/