I'm looking to add a gif loading onclick or to delete "changing text on click" with an animation with the same button characteristics and a gif overlayed (eg. Searchbox from airbnb.com) How can i do it?
Thank you!
<input onclick="change()" type="submit" class="submit-form" value="Log in" id="myButton1">
<script type="text/javascript">
function change()
document.getElementById("myButton1").value = "Logging in...";
}
</script>
try with this below code which is having loading image and text as well.
$('#myButton1').click(function(){
$('#myButton1').hide();
$('.load').addClass('loading');
setTimeout(function () {
$('.load').removeClass('loading');
$('#myButton1').show();
}, 2000);
});
.loading{
background-image : url('http://www.fotos-lienzo.es/media/aw_searchautocomplete/default/loading.gif');
background-repeat:no-repeat;
}
.loading:after {
content: "Logging in...";
text-align : right;
padding-left : 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="submit" class="submit-form" value="Log in" id="myButton1">
<div class="load"></div>
<script type="text/javascript">
function change() {
document.getElementById("myButton1").style.background='#000000';
}
</script>
As I can see from your question tags you using JQuery
function change()
$("#myButton1").css({
background-image:url('PATH/TO/LOADING/IMAGE.gif')
});
}
and after finish loading you can create a function to stop loading
function stopLoading()
$("#myButton1").css({
background-image:'none'
});
}
Sorry for the image, it's background is not transparent. I just hope atleast it will give you an idea.
https://jsfiddle.net/3pmpqpwj/
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<img src='http://www.arabianbusiness.com/skins/ab.main/gfx/loading_spinner.gif' id='overlay' style="display:none;" />
<button id="searchbtn" class="btn btn-default" type="button" onclick="change(); alert('test');">Log In</button>
CSS
#overlay{
position: absolute;
width: 30px;
height: 30px;
top: 2px;
z-index: 3;
left: 32px;
}
JS
$('#searchbtn').click(function(){
$(this).html("Logging in...").prop('disabled',true);
$("#overlay").show();
});
Related
I have implemented the following file upload which is an input-group based on this answer and its source. I need to reset the file input and its text input on the click of "Reset" button. For this I have used the wrap and unwrap methods based on this answer and this comment to reset it. The reset is not working in eclipse but works fine in JSFiddle and Bootply(Not working in IE 11). Can anyone help me find out what's wrong?
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>File Upload</title>
<script src="js/jquery-1.11.1.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="CustomStyleSheet.css">
<script src="CustomJavaScript.js"></script>
</head>
<body>
<div class="container-fluid">
<form class="form-horizontal" id="fileUploadForm">
<div class="row" style="margin-top:15px">
<div class="form-group">
<label class="control-label col-xs-4 col-sm-4 col-md-4">Select File</label>
<div class="controls col-xs-6 col-sm-6 col-md-6">
<div class="input-group" id="fileGroup">
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
Browse <input type="file" id="files" multiple>
</span>
</span>
<input type="text" id="fileName" class="form-control" readonly>
</div>
</div>
</div>
</div>
<div class="row" style="margin-right:15px">
<div class="pull-right">
<button type="button" class="btn btn-default" id="resetFileUpload">Reset</button>
<button type="button" class="btn btn-primary">Upload</button>
</div>
</div>
</form>
</div>
</body>
</html>
JavaScript
$(document).on('change', '.btn-file :file', function () {
var input = $(this),
numFiles = input.get(0).files ? input.get(0).files.length : 1,
label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
input.trigger('fileselect', [numFiles, label]);
});
$(document).ready(function () {
$('.btn-file :file').on('fileselect', function (event, numFiles, label) {
var input = $(this).parents('.input-group').find(':text'),
log = numFiles > 1 ? numFiles + ' files selected' : label;
if (input.length) {
input.val(log);
} else {
if (log) alert(log);
}
});
});
function reset_form_element(e) {
e.wrap('<form>').closest('form').get(0).reset();
e.unwrap();
}
$('#resetFileUpload').on('click', function (e) {
reset_form_element($('#files'));
reset_form_element($('#fileName'));
e.preventDefault();
});
CSS
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}
input[readonly] {
/*background-color: white !important;*/
cursor: text !important;
}
Just to confirm: are you attempting to remove an uploaded file client-side?
Try this in your reset button click event, where the variable "id" is the id of the file upload input. It simply sets the innerHTML of the element to the same element's innerHTML. This works in ie9 and google chrome, I've not had to test other browsers.
By the way, I've no idea why this works (stole it from a web site), if anyone does know please leave a comment.
document.getElementById(id).innerHTML = document.getElementById(id).innerHTML;
Try this
var $input = $('#inputId').parents('.form-group').find('input');
$input.val('').trigger('change');
$input.trigger('cleared');
I just encountered this same issue in my application. For some reason in IE 11, a .reset() on the form does not work to clear out the value. The reset works fine in IE 10, FF, and Chrome though. I was able to explicitly set value="" on the input control in IE 11 and that cleared it.
I have a number of buttons in my html. Each button referring to a particular DIV. I want an easy way to hide the previously open DIV when another button is clicked. So far I have written a code in jquery, but I have a strange feeling that am putting in a lot of code into a simply achievable task. Is there a simpler way to do this than what I have tried to accomplish?
Here is what I have done so far.
My HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TODO supply a title</title>
<meta name="viewport" content="width=device-width"/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
</head>
<body>
<div id="body">
<input type="button" name="division1" value="div1" class="buttons" id="button1"/>
<input type="button" name="division2" value="div2" class="buttons" id="button2"/>
<input type="button" name="division3" value="div3" class="buttons" id="button3"/>
<input type="button" name="division4" value="div4" class="buttons" id="button4"/>
<input type="button" name="division5" value="div5" class="buttons" id="button5"/>
<input type="button" name="division6" value="div6" class="buttons" id="button6"/>
<div id="div1" class="divs"></div>
<div id="div2" class="divs"></div>
<div id="div3" class="divs"></div>
<div id="div4" class="divs"></div>
<div id="div5" class="divs"></div>
<div id="div6" class="divs"></div>
</div>
</body>
</html>
My CSS:
#body{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000;
}
.buttons{
width: 10%;
height: 5%;
position: relative;
left: 10%;
cursor: pointer;
z-index: 500;
}
.divs{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: none;
}
#div1{
background-color: #377D9F;
}
#div2{
background-color: #02B0E6;
}
#div3{
background-color: #4b9500;
}
#div4{
background-color: #aaa;
}
#div5{
background-color:#aa0000;
}
#div6{
background-color: aquamarine;
}
My Jquery:
$(document).ready(function () {
$("#button1").click(function () {
$('#div1').toggle(100);
$("#div2,#div3,#div4,#div5,#div6").hide();
});
$("#button2").click(function () {
$("#div2").toggle(100);
$("#div1,#div3,#div4,#div5,#div6").hide();
});
$("#button3").click(function () {
$("#div3").toggle(100);
$("#div1,#div2,#div4,#div5,#div6").hide();
});
$("#button4").click(function () {
$("#div4").toggle(100);
$("#div1,#div2,#div3,#div5,#div6").hide();
});
$("#button5").click(function () {
$("#div5").toggle(100);
$("#div1,#div2,#div3,#div4,#div6").hide();
});
$("#button6").click(function () {
$("#div6").toggle(100);
$("#div1,#div2,#div3,#div4,#div5").hide();
});
});
I kind of have around 50 DIV's in my html like the above ones. And I think using the above JQUERY is a waste of coding lines. I know there will be a better way to do this. My code seems to work well, but is there any way in jquery to just hide the previous DIV, no matter which button user clicks?
$(document).ready(function(){
$(".buttons").click(function () {
var divname= this.value;
$("#"+divname).slideToggle().siblings('.divs').hide("slow");
});
});
Going with this sentence I kind of have around 50 DIV's in my html like the above ones
This would be a lot more clean as well as convenient if you use a select tag, instead of using button to show and hide each div
Demo
HTML
<select id="show_divs">
<option>Select to show a div</option>
<option value="1">Show 1</option>
<option value="2">Show 1</option>
</select>
<div class="parent">
<div id="show1">This is the first div</div>
<div id="show2">This is the second div</div>
</div>
jQuery
$('#show_divs').change(function() { //onChange execute the function
var showDiv = $(this).val(); //Store the value in the variable
$('div.parent > div').hide(); //Hide all the div nested inside .parent
$('#show' + showDiv ).show(); //Fetch the value of option tag, concatenate it with the id and show the relevant div
});
CSS
div.parent > div {
display: none; /* Hide initially */
}
If you want to avoid using id's, you can also create your custom attribute, like data-show="1" and data-show="2" so on...
Try this
$(document).ready(function() {
$(".divs").hide();
$(".buttons").click(function() {
$(".divs").hide().eq($(this).index()).show();
});
});
DEMO
<input type="button" value="div1" class="buttons" id="button1" />
<input type="button" value="div2" class="buttons" id="button2" />
<input type="button" value="div3" class="buttons" id="button3" />
<input type="button" value="div4" class="buttons" id="button4" />
<input type="button" value="div5" class="buttons" id="button5" />
<input type="button" value="div6" class="buttons" id="button6" />
<div id="div1" class="divs">div1</div>
<div id="div2" class="divs">div2</div>
<div id="div3" class="divs">div3</div>
<div id="div4" class="divs">div4</div>
<div id="div5" class="divs">div5</div>
<div id="div6" class="divs">div6</div>
<script language="javascript">
$(document).ready(function () {
$(".buttons").click(function () {
$('.divs').hide();
$('#div'+$(this).attr('id').replace('button','')).toggle(100);
})
})
</script>
I will appreciate if somebody could help me to find how to solve out one problem, probably I need very simple thing but I don't know how to put it in one, so what I need - Section which include tick box, then button submit, but if you don't tick the check box and push the button appear window which says You must do....,
I've done it but I need this
but if you tick and push button should smoothly appear pop up window with just text information! I don't know how to get that,
This is thats section with checkbox and button
<form name="form" method="post" action="#" onSubmit="return checkme();">
<input type="checkbox" name="agree" value="agree_terms" class="terms">
I´ve read terms and conditions and I´m ready to shop
<input type="submit" name="submit" value="" class="submit">
</form>
and this is javascript
function checkme() {
missinginfo = "";
if (!document.form.agree.checked) {
missinginfo += "You must agree to the Terms and Conditions";
}
if (missinginfo != "") {
missinginfo ="" +
"\n" +
missinginfo + "" +
"\n Please tick the box and try again.";
alert(missinginfo);
return false;
}
else {
return true;
}
}
I tried in Different Way
<body>
<title>LIGHTBOX EXAMPLE</title>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
<p>This is the main content. To display a lightbox click <a href = "javascript:void(0)"
onclick = "document.getElementById('light').style.display='block'; document.getElementById('fade').style.display='block'">here</a></p>
<div id="light" class="white_content">This is the lightbox content. Close</div>
<div id="fade" class="black_overlay"></div>
</body>
</html>
But when I tick check box on the background appear window with the content but I need pop up window appear only after when I tick the box and push the button
"f you tick and push button should smoothly appear pop up window with just text information" - you've almost did it. Just add alert to the second branch. Try this code:
<!DOCTYPE html>
<html>
<!-- [[[ head -->
<head>
<title>element</title>
<script type="text/javascript">
function checkme() {
if (!document.form.agree.checked) {
missinginfo = "You must agree to the Terms and Conditions\n Please tick the box and try again.";
alert(missinginfo);
return false;
}
else {
alert("Text information");
return true;
}
}
</script>
</head>
<!-- ]]] -->
<body>
<form name="form" method="post" action="#" onSubmit="return checkme();">
<input type="checkbox" name="agree" id="agree" value="agree_terms" class="terms">
<label for="agree"> I´ve read terms and conditions and I´m ready to shop</label>
<input type="submit" name="submit" value="Submit" class="submit">
</form>
</body>
</html>
On fiddle I found a simple rotator and trying to make it work in my death-simple HTML page.
The page example is here:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
img { max-height: 100px }
.rotator img { max-height: 200px; border: dashed 5px pink; }
</style>
<script>
$(document).ready(function() {
alert('aaa');
var $rotator = $(".rotator");
$rotator.find("img:gt(0)").hide();
setTimeout(Rotate, 1000);
function Rotate() {
var $current = $rotator.find("img:visible");
var $next = $current.next();
if ($next.length == 0) $next = $rotator.find("img:eq(0)");
$current.hide();
$next.show();
setTimeout(Rotate, 5000);
}
});
</script>
</head>
<body>
<img src="http://2.bp.blogspot.com/-XI9yzJrwLac/TkLKLZF_kDI/AAAAAAAACFE/PxPDRzwa4tQ/s1600/cute+cats+pictures+3.jpg"/>
<img src="http://2.bp.blogspot.com/-NOD8B0m7MEE/TrvJAVAPYWI/AAAAAAAAAuE/KoffoIdQfNk/s640/cute-kittens-in-cups-pics.jpg"/>
<img src="http://1.bp.blogspot.com/_cWcuJM9QIG4/S7rOVzM1YcI/AAAAAAAAAgQ/RJx5oR55Ekk/s640/Animal+wallpapers%252Bcat+wallpapers%252Bmobile+wallpapers%252Bpc+wallpapers%252Bmobile+themes%252Bpc+themes+15cc.jpg"/>
<div class="rotator">
<a href="http://google.com">
<img src="http://2.bp.blogspot.com/-XI9yzJrwLac/TkLKLZF_kDI/AAAAAAAACFE/PxPDRzwa4tQ/s1600/cute+cats+pictures+3.jpg"/>
</a>
<a href="http://google.com">
<img src="http://2.bp.blogspot.com/-NOD8B0m7MEE/TrvJAVAPYWI/AAAAAAAAAuE/KoffoIdQfNk/s640/cute-kittens-in-cups-pics.jpg"/>
<a>
<a href="http://google.com">
<img src="http://1.bp.blogspot.com/_cWcuJM9QIG4/S7rOVzM1YcI/AAAAAAAAAgQ/RJx5oR55Ekk/s640/Animal+wallpapers%252Bcat+wallpapers%252Bmobile+wallpapers%252Bpc+wallpapers%252Bmobile+themes%252Bpc+themes+15cc.jpg"/></a>
</div>
<label />
</body>
</html>
The simple script should regularly switch images, but instead of that are just displayed all 3 images. And the alert message is not displayed.
I've tried to debug the code and when I remove the function Rotate(), an alert message appears on the page.
Why the function Rotate() is not working?
$.next() gets the immediate element in the set. Your set only contains visible images - i.e. only one. How could there be a next element?
Working fiddle: http://jsfiddle.net/gjzd7/
All I have done is changed the $.next() call into an $.index() request and modulo-ed it by the number of images (so you'll never get a non-existent image). Let me know if you need anything else modified to it or any explanations!
You could also cache the images in a jQuery array and iterate over them like below.
var imgs = $(".slides"); // images to be rotated
var current = 0;
function rotate( ) {
// set current to next image
current = current >= imgs.length ? 0 : current + 1;
$(".rotator").prop("src", $(imgs.get(current)).prop("src") );
setTimeout( rotate, 5000 );
}
rotate();
Example here
Use this simple script to rotate image using buttons
function rotateImage(degree) {
$('#demo-image').animate({ transform: degree }, {
step: function(now,fx) {
$(this).css({
'-webkit-transform':'rotate('+now+'deg)',
'-moz-transform':'rotate('+now+'deg)',
'transform':'rotate('+now+'deg)'
});
}
});
}
<style>
#demo-image{padding:35px 15px;}
.btnRotate {padding: 15px 20px;border:1px solid #000; background-color:#999;color: #000;cursor: pointer;}
</style>
<div style="height:600px; width:800px; background-color:#CCC; border:1px solid #000; border-radius:6px; margin-left:auto; margin-right:auto;">
<div style="width:550px; margin-left:auto; margin-right:auto;">
<label>Rotate Image:</label>
<input type="button" class="btnRotate" value="30" onClick="rotateImage(this.value);" />
<input type="button" class="btnRotate" value="60" onClick="rotateImage(this.value);" />
<input type="button" class="btnRotate" value="90"onClick="rotateImage(this.value);" />
<input type="button" class="btnRotate" value="180" onClick="rotateImage(this.value);" />
<input type="button" class="btnRotate" value="-180" onClick="rotateImage(this.value);" />
<input type="button" class="btnRotate" value="360" onClick="rotateImage(this.value);" />
</div>
<div style="width:350px; margin-left:auto; margin-right:auto; margin-top:25px;"><img src="image-rotating-script-using-jquery .jpg" id="demo-image" /></div>
</div>
I am trying to change the color of a transparent image inside a div (using jQuery). I cannot get the left and top of the image fixed into the div while changing the color.
Could anyone help? I'm trying to have the image filled if a user clicks on any of the span colors.
test.css:
.iconWrapper .color span
{
width: 50px;
height: 58px;
display: block;
}
.color1
{
background-color: #f6f6f6;
}
.color2
{
background-color: #ffe25b;
}
.color3
{
background-color: #e35990;
}
.color4
{
background-color: #58c1d8;
}
step1.php
<link rel="stylesheet" type="text/css" href="test.css" media="screen" />
<script language="javascript" type="text/javascript">
$(function() {
$('.iconWrapper span').click(function(e){
var color=$(this).attr('class');
//alert(color);
$('#div1').removeClass().addClass(color);
$('#hiddencolor').val(color);
e.preventDefault();
});
});
</script>
</head>
<body>
<div class="iconWrapper">
<ul class="color">
<li>
<span class="color1"></span>
</li>
<li>
<span class="color2" ></span>
</li>
<li>
<span class="color3"></span>
</li>
<li>
<span class="color4"></span>
</li>
</ul>
</div>
<div id="div1" style="width:17%; height:28%;" ><img src="img/107.png" />
<form method="post" action="step3.php">
<input name="kleur" type="text" value="" id="hiddencolor" />
<input name="submit" type="submit" value="Submit" />
</form>
</div>
Change the width of the parent div from 17% to the width of img in other words 250px
Demo: http://jsfiddle.net/V9zEH/5/
$('#div1 img').removeClass().addClass(color);
Would this be what you wanted?
If what you want is the color to not spill out of the borders inside the image, the only solution I can find is to edit the image so that there is white where you don't want to see the colour - rather than transparent.
I have trouble understanding what it is exactly that you want to achieve. :|
Try:
$(function () {
$('.iconWrapper span').click(function (e) {
var $span = $(this),
color = $span.attr('class');
$('#div1 img').css('background-color', $span.css('background-color'));
$('#hiddencolor').val(color);
e.preventDefault();
});
});
Test the effect here »