I would like to show an animated gif after a form button is clicked.
UPDATE: I found a solution here: http://www.corelangs.com/css/box/fulloverlay.html
I combined that with an animated gif (instead of the login form) to get the effect I wanted.
I used the .show() method in my script like this:
$(document).ready(function () {
$("#my_submit").click(function(e) {
console.log("please wait...");
$( "#processing_gif" ).show();
$( "#cover" ).show();
In my form I used these divs:
<div id="processing_gif"></div>
<div id="cover"></div>
And I used this CSS:
#processing_gif {
position:fixed;
top:0;
left:0;
z-index:999;
width:100%;
height:100%;
opacity:0.8;
background: url('/files/animation_processing.gif') center center no-repeat;
display:none;
}
#cover{
position:fixed;
top:0; left:0;
background:rgba(256,256,256,0.9);
z-index:1;
width:100%;
height:100%;
display:none;
}
Here is the full original tutorial:
<!DOCTYPE html> <html > <head> <style type="text/css"> .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: url(login.png) 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:30px; width:35px; font-size:30px; text-decoration:none; text-align:center; font-weight:bold; } </style> </head> <body> <div align="center"> <br><br><br><br> Click here to Log In </div> <div id="loginScreen"> × </div> <div id="cover" > </div> </body> </html>
You can just add $("my_image_selector").show() before $.ajax(params) and hide it when "success" or "error" occurs by adding there $("my_image_selector").hide()
Or you can use .ajaxStart and .ajaxStop. see jquery docs
ah jquery - sigh.
You're going to have to tweak this to get the styling/presentation you want, but I'm going to point you in the general direction using plain old JavaScript.
Add an image tag with the gif you want to use on the page where you want it
< img src='loading.gif'/>
Add an id and "display:none" to the image style to hide it
<img id='loadingImg' style='display:none;' src='loading.gif'/>
get rid of the onclick handler in your submit button tag and instead put code like this below your form
<script>
//listen for click on your button
document.getElementById('add-all-to-cart').addEventListener('click',
function(event){
//this is the code that runs when the button is clicked
//get the button we clicked on
var target=event.target||event.srcTarget;
//set that button to disabled
target.disabled=true;
//display the loading image
document.getElementById('loadingImg').style.display='block';
}
</script>
Related
I've been trying to create a simple menu.php for my web server with two buttons
b1=Log in and b2=Register. Each of those will call its separate function which will then scan for the id='main' block and change its internal html to something along the lines of <?php include('testLogIN.php') ?> and <?php include('testRegister.php') ?>. The buttons erase the internal html of the block with id='main', BUT on my server the buttons when clicked do nothing. I am led to believe this might be a problem with how nested strings work, thus echo "He said 'haha' and left." wouldn't print He said 'haha' and left. correctly. I understand i might be all over the place with my description but please bear with me.
#charset "UTF-8";
.right{
margin:1%;
position:relative;
clear:right;
float:right;
right:15px;
}
.left{
margin:1%;
position:relative;
clear:left;
float:left;
left:10px;
}
.bleft{
margin:1%;
position:relative;
float:left;
width=15px;
}
.fleft{
float:left;
}
.mainbox{
margin:2%;
width:450px;
height:auto;
}
.box{
clear:left;
float:left;
margin:1%;
width:280px;
height:33px;
}
img{
max-width: 100%;
max-height: 100%;
width: auto;
}
.stat{
float:right;
position:fixed;
right:10px;
}
.bolded{
border-width: 5px;
size:5px;
}
h2{
margin-left:2px;
}
.white{
color:#DDD;
}
.black{
background-color:#333;
}
hr{
clear:left;
}
<!DOCTYPE html>
<html>
<head>
<title>Main</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
.abs{
position: absolute;
top: 0;
left: 0;
}
.rel{
position: relative;
}
a:visited{
color: green;
}
body{
margin: 0;
padding: 0;
border: 0;
background--image: url("images/dragon.jpg");
background-size: cover;
}
</style>
</head>
<body>
<div class="rel">
<img src="images/dragon.jpg">
<div id='main' class="mainbox black abs">
<button onclick='tologin()'>Log in</button>
<button onclick='toregister()'>Register</button>
</div>
</div>
</body>
</html>
<script>
function tologin(){
document.getElementById("main").innerHTML ="<?php include('unistuff/LogIN/login.php');?>";
}
function toregister(){
document.getElementById("main").innerHTML ="<?php include('unistuff/LogIN/toregister.php');?>";
}
</script>
Since php ignore scripts (it will include both file without yielding to javascript), i will suggest you look into Loading file with javascript
Or you can use jQuery load method(dont load PHP file):
<script>
function tologin(){
$("#main").load('login.html');
}
function toregister(){
$("#main").load('register.html');
}
</script>
IF necessarily PHP then you can use Ajax
Issue #1
Trying to make 2 divs align with eachother,
the fist div doesnt have a scrollbar, but the second has one. The scrollbar cause the second div to be offset from the first one.
Is there a way to align those 2 divs?
Issue #2
Why is the second div not scrolling when it has the overflow-y:scroll; ?
body, html {
margin: 0;
padding: 0;
border: 0;
outline: 0;
overflow:hidden;
}
.fixed-top-container {
text-align:center;
top:0px;
height:100px;
min-height:100px;
max-height:100px;
width:100%;
display:inline-block;
margin:0 auto;
padding:0;
background-color:rgba(0, 0, 0, 0.5);
}
.container {
width:100%;
height:100%;
background-color:#F0F0F0;
overflow-y:scroll;
}
.content {
width: 800px;
height:100%;
margin:0 auto;
background-color:#FFFFFF;
}
View JSFiddle for issue: http://jsfiddle.net/Aaeijh/qAh9g/1/
How can we get the bottom div to scroll?
Use the user friendly <textarea> instead of old <div> technique
<textarea rows="10" cols="50" class="container">
//your text here
</textarea>
JSFiddle
remove overflow:hidden; and overflow-y:scroll; ..
I have a div and I want to be both inline-block and display none, but I have to choose one of them.
My HTML:
.like_user_wrapper{
margin-top:20px;
padding:5px;
height:55px;
box-shadow:1px 1px 10px #f0f0f0;
background:white;
display:inline-block;
display:none;
}
It's not a good idea to have the div just hide using JavaScript
Just use visibility: hidden;
#like_user_wrapper{
margin-top:20px;
padding:5px;
height:55px;
box-shadow:1px 1px 10px #f0f0f0;
background:white;
display:inline-block;
visibility: hidden;
}
Note this is using a custom ID (#...) , not a class (....)
If you want is to become visible at some point, you can use this JavaScript property with that ID:
document.getElementById('like_user_wrapper').style.visibility='visible';
This can be included in a onmouseover="", or a javascript function etc, so it appears when you want it to. This can be implemented in html like this:
<!DOCTYPE HTML>
<html>
<head>
<style>
#like_user_wrapper {
margin-top:20px;
padding:5px;
height:55px;
box-shadow:1px 1px 10px #f0f0f0;
background:white;
display:inline-block;
visibility: hidden;
}
#hover {
width: 80px;
height: 50px;
background-color: red;
}
</style>
</head>
<body style="background-color:blue;">
<div id="like_user_wrapper">Like User Wrapper</div>
<br><br>
<div id="hover" onmouseover="document.getElementById('like_user_wrapper').style.visibility='visible';" onmouseout="document.getElementById('like_user_wrapper').style.visibility='hidden';">Hover over me</div>
</body>
</html>
Help page on the visibility CSS property here
N.B. In most browsers, by default a DIV has the display property block, so you might not need inline-block - you could just wrap it in a <div> with that property anyway.
If you are trying to hide and show the element using jQuery, to display it back avoid using jQuery.show().
Instead do $('.like_user_wrapper').css({'display': 'inline-block'}); to display the element.
On the other hand, to hide it is ok to just do $('.like_user_wrapper').hide();
And remove the display: inline-block from your css.
the following code i have tried in fiddle but when i actually get it on my desktop it seems not even working.
the images are tried to be overlayed on main image using javascript.
i guess i am going somewhere wrong in referencing.
a little help will be appreciated.
code:
<html>
<head>
<style>
div {
position:absolute;
}
#main {
width:256px;
height:256px;
}
#overlay {
position:absolute;
height:100px;
width:100px;
top:0;
left:0;
display:none;
}
.overly {
position:absolute;
height:100px;
width:100px;
bottom:0;
right:0;
display:none;
}
</style>
<script>
$(document).ready(function() {
$("#main").mouseenter(function() {
$("#overlay").show();
});
$("#main").mouseleave(function() {
$("#overlay").hide();
});
});
$(document).ready(function() {
$("#main").mouseenter(function() {
$("#overly").show();
});
$("#main").mouseleave(function() {
$("#overly").hide();
});
});
</script>
</head>
<body style="margin:0px; padding-top:0px">
<div>
<a href="">
<img id="main" src="image/productold.JPG" />
<img id="overlay" src="image/over1.jpg"/>
<img class="overly" src="image/over2.jpg"/>
</a>
</div>
</body>
</html>
Try adding z-index properties to the styling of the two divs. That should allow you to put one on top of the other. For example:
#main {
width:256px;
height:256px;
z-index: 0;
}
#overlay {
position:absolute;
height:100px;
width:100px;
top:0;
left:0;
display:none;
z-index: 1;
}
.overly {
position:absolute;
height:100px;
width:100px;
bottom:0;
right:0;
display:none;
z-index: 2;
}
For more information on this property, see the W3Schools page on the Z-Index property here.
first fo all, sorry for my english. I am trying to do dragable and resizible table columns in pure Javascript. I inserted inside a cell 2 areas, one for draging (div) and 2nd for resizing (span) like you can see in example bellow. Everything works fine in Chrome and Firefox but not in IE8.
Problem is during resizing when div doesn't fit in cell and jump under cell as you can see "Column1" in image. I would suggest property "overflow:hidden" should fix it, but no luck.
CSS:
.ui-column-resizable
{
float:right;
height:20px !important;
display:inline;
cursor:w-resize;
position:relative;
overflow:hidden;
text-align:center;
white-space:nowrap;
background-color:blue;
margin: -2px -2px -2px 0;
}
.ui-column-draggable
{
height:17px;
cursor:move;
position:relative;
overflow:hidden;
background-color:yellow;
white-space:nowrap;
text-align:center;
}
JavaScript:
column.innerHTML = "<span class='ui-column-resizable'> </span>" +
"<div class='ui-column-draggable'>" +
column.innerHTML +
"</div>";
http://jsfiddle.net/A5kVs/2/
This should do it...
HTML:
<td>
<div class="drag">
Column 1
<div class="resize"></div>
</div>
</td>
CSS:
.drag {
position:relative;
background-color:yellow;
padding:1px 10px 1px 5px;
cursor:move;
}
.resize {
position:absolute;
background-color:blue;
right:0;
width:5px;
top:0;
height:100%;
cursor:w-resize;
}
Live demo: http://jsfiddle.net/simevidas/5mzgP/3/