I have a modal in which I am showing a form, on submitting the form i want to hide the content of form and instead want to show some ajax indicator of fixed size 100px x 100px. The issue is how to reduce the width/height of the modal to 100x100 with some animation and remaining that modal within center of screen?
<div class="modal">
<form>
....
</form>
<div class="ajax-indicator hidden"></div>
</div>
after click of submit button
<div class="modal">
<form class="hidden">
....
</form>
<div class="ajax-indicator"></div>
</div>
Create multiple stages (CSS classes) & activate them with js events.
You can achieve your animation with just some eventhandlers such as:
click,transitionend,submit...
and then just change the correspondent class.
Css
#box{
position:fixed;
width:0px;
height:0px;
top:0%;
left:0%;
background-color:black;
margin-left:0px;
margin-top:0px;
-webkit-transition:all 700ms ease;
overflow:hidden;
border-radius:0px;
}
#box.active{
width:300px;
height:300px;
top:50%;
left:50%;
margin-top:-150px;
margin-left:-150px;
border-radius:0px;
}
#box.loading{
width:100px;
height:100px;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
border-radius:100px;
}
js
in this example i'm using a fake loading time with setTimeout that lasts 2sec after clicking the submit btn
function clk(e){
box.classList.add('active');
}
function frm(e){
e.preventDefault();
box.classList.remove('active');
box.classList.add('loading');
setTimeout(function(){box.classList.remove('loading')},2000);
}
var btn=document.getElementById('btn'),
box=document.getElementById('box');
btn.addEventListener('click',clk,false);
box.firstChild.addEventListener('submit',frm,false);
//box.addEventListener('webkittransitionend',dosomethingelse,false);
Demo
http://jsfiddle.net/hHD87/
this example uses modern technologies .. that work on all up to date browsers... chrom,firefox ie10 opera ios android...
maybe you need to add custom prefixexs like -webkit -moz -o ...
here is another example that uses also the delay witch is very important to completely hide the window at the end.
http://jsfiddle.net/RAu8Q/
After click submit button change the css of the model box.
var myElement = document.getElementByClass("model");
myElement.style.width = "100px";
myElement.style.height = "100px";
and set the ajax-indicator div position to center to get the model at center.
var modeElement = document.getElementByClass("ajax-indicator");
modelElement.style.align="center";
Create a css class that you can add to your modal which sets its size to 100x100. If you're centering your modal with margin: 0 auto it should automatically adjust itself. Then remove the class when the loading is done.
Regarding animation you can add transition: all .5s to your .modal-class
Example: http://jsfiddle.net/eSsM5/1/
css:
.modal {
margin: 0 auto;
width: 200px;
height: 200px;
transition: all .3s;
background-color: red;
text-align: center;
padding-top: 30px;
}
.loading {
width: 100px;
height: 100px;
}
.loading > form {
display: none;
}
.loading > .spinner {
display: block;
}
.spinner {
display: none;
}
html
<div class="modal">
<form>
your form
</form>
<div class="spinner">
Now loading!
</div>
</div>
<button type="button">toggle loading</button>
js
document.querySelector("button").addEventListener("click", function() {
var modal = document.querySelector(".modal")
modal.classList.toggle("loading")
})
Related
This question already has answers here:
Custom Cursor using CSS styling - html/css - javascript
(2 answers)
Closed 3 years ago.
I want to add a image as my cursor inside a div, But i want it to hide and have a normal pointer cursor, when the mouse hovers over any of the link inside that div.
I wrote :
var $box = $(".box");
var $myCursor = $("#myCursor");
var button1 = $("#link1");
var button2 = $("#link2");
$box.on("mouseleave",function(){
$myCursor.hide();
})
$box.mousemove(function(e){
$myCursor.css('top',e.pageY);
$myCursor.css('left',e.pageX);
if (!button1.is(":hover") && (!button2.is(":hover"))){
$myCursor.show();
}
else if(button1.is(":hover") || (button2).is(":hover")){
$myCursor.hide();
}
if(e.clientX<$box.width()*0.5){
$myCursor.css('transition','transform 1s');
$myCursor.css('transform','rotate(-270deg)');
}
else if(e.clientX>$box.width()*0.5){
$myCursor.css('transition','transform 1s');
$myCursor.css('transform','none');
}
});
.box{
height:100vh;
background:#ccc;
padding-top:50px;
cursor:none;
}
button{
display:block;
margin:15px auto;
width:20%;
padding:10px;
cursor:pointer;
}
#myCursor{
position:absolute;
height:50px;
width:50px;
top:0;
left:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "box">
<button id = "link1">Some link</button>
<button id = "link2">Another Link</button>
<img id = "myCursor" src = "https://cdn3.iconfinder.com/data/icons/ahasoft-war/512/sniper_rifle-512.png">
</div>
How do i implement this properly?
Thanks
Much easier to achieve using CSS only. You will have to resize the cursor image beforehand, in this example I resized one to 50x50 pixels (the other in the white box is 64x64).
The , auto is mandatory and defines a fallback.
.box{
height:100vh;
background:#ccc;
padding-top:50px;
cursor: url(//codestylers.de/rifle.png), auto;
}
button{
display:block;
margin:15px auto;
width:20%;
padding:10px;
cursor: pointer;
}
.another-cursor {
background-color: white;
width: 300px;
height: 200px;
cursor: url(//codestylers.de/cursor.png), auto;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "box">
<button id = "link1">Some link</button>
<button id = "link2">Another Link</button>
<div class="another-cursor"></div>
</div>
The simple solution is just to adjust the scoping of your selectors:
var $box = $(".box:not(button)"); so the image switch is called whenever the cursor is not over a button. However in your case you should consider reducing the image size so it's closer to the mouse size - as there's a large overlap of image and button before the mouse pointer itself covers the button.
a more complex solution would involve using arrays to register the button coordinates and dimensions, then using mousemove and each to constantly check the image coordinate widths against the stored buttons dimensions but depending on what else you've got going on there could be a performance hit.
If you add pointer-events: none to the #myCursor css you prevent the occasional momentary obscuration of the cursor from the button by the image itself - hence better performance.
var $box = $(".box:not(button)");
var $myCursor = $("#myCursor");
var button1 = $("#link1");
var button2 = $("#link2");
$box.on({
mouseleave:function(){
$myCursor.hide();
},
mousemove: function(e){
$myCursor.css({ 'left':e.pageX, 'top':e.pageY });
if (!button1.is(":hover") && !button2.is(":hover")){
$myCursor.show();
} else if(button1.is(":hover") || (button2).is(":hover")){
$myCursor.hide();
}
}
});
.box{
height:100vh;
background:#ccc;
padding-top:50px;
cursor:none;
}
button{
display:block;
margin:15px auto;
width:20%;
padding:10px;
cursor:pointer;
}
#myCursor{
position:absolute;
height:50px;
width:50px;
top:0;
left:0;
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "box">
<button id = "link1">Some link</button>
<button id = "link2">Another Link</button>
<img id = "myCursor" src = "https://cdn3.iconfinder.com/data/icons/ahasoft-war/512/sniper_rifle-512.png">
</div>
You can solve this using CSS, there is no need for javascript.
Have a look here:
http://www.w3schools.com/cssref/pr_class_cursor.asp
You might set CSS classes with help of javascript to enable some sort of dependency to other elements.
DROP MENU LINK
jsfiddle.net/a3MKG/83/
Refer to link above. Does anyone know how to get the navicon image to change upon click? I want it to become a different image (a picture of an X) once I click it.
Note: When you click the navicon, the drop menu comes down, and you can click anywhere OUTSIDE the drop menu to bring the drop menu back up, so you don't have to click the X image to remove the drop down and bring back the initial image. So I need the new navicon image only to be an X when the dropdown menu is actively displayed.
Any help will be much appreciated! Thank you all.
Ok so I saw your comment re. 'how do I close it just on closing the image' before i made my fiddle.
I changed your div dropTitle to an a and added another class to it menu-open
.menu-open{ background:url('http://webservices.lib.harvard.edu/hlportal/images/threeline.png');
background-size:100% 100%;
}
and added a function that toggled it with 'close'
$('a').click(function(){
$(this).toggleClass('close')
});
.close{background:url('https://cdn0.iconfinder.com/data/icons/basic-ui-elements-plain/385/010_x-128.png');
background-size:100% 100%;
}
I tweaked your dropTitle class slightly to
.dropTitle{
display:block;
width:50px;
height:50px;
cursor:pointer;
}
but the functionality remains the same
Do not use javascript where you can use css!
input, input:before, input:after {
display: block;
content:'';
appearance: none;
-webkit-appearance: none;
position: relative;
width:20px;
background:black;
height:4px;
border-radius:2px;
transition: all linear 0.1s;
}
input:after{
top:3px;
}
input:before{
top:-7px;
}
input:focus:after{
transform: rotate(45deg);
top:-4px;
}
input:focus{
background:transparent;
}
input:focus:before{
transform: rotate(-45deg);
top:0px;
}
input:not(:focus) + div{
display:none;
}
<input type="checkbox" />
<div>
<img class="dropPillow" src="https://image.freepik.com/free-icon/square-outlined-shape_318-75498.png">
</div>
I want this widget code without jQuery. I checked all posts, but they do not help. its like SUmoME widget.
http://www.appsumo.com/clickminded-2016/
see the top right blue tab. i want that replace to pic in my blog.
I want from the left corner to right slider when mouse hover like this.pls see demo.
Sorry for my bad english :(
HTML
<div id="css">
<img src="https://pbs.twimg.com/profile_images/531885101043302400/4fDwYFQb.png" alt="" />
</div>
CSS
img {
position: relative;
margin: -500px;
left: 0;
transition: left .5s;
}
#css:hover img {
left: 400px;
}
DEMO
If you only care for browsers supporting html5 and css3, use css animations. The syntax's a bit like your existing code when it comes to the key frames.
If you wanna support all browsers, use jQuery's animate funcion, which changes the styles every 100ms or so, thus doesn't require css3 support. The css3 animation solution has a better performance but everyone can afford to run jQuery's animation, you won't really feel any difference.
i hope understand your question correctly...
i made it for you :)
img {
border: 1px solid black;
width:50px;
height:50px;
}
.parent{
top:100px;
padding:3px;
background-repeat:no-repeat;
cursor:pointer;
border: 5px solid black;
}
.parent span{
position:absolute;
top:50px;
transition: left .5s;
left: 0;
margin-left:-100px;
width:50px;
height:50px;
}
.parent:hover span{
left:100px;
}
<a class="parent"> >
<span>
<img src="http://www.mail-signatures.com/articles/wp-content/uploads/2014/08/facebook.png" alt=""><br>
<img src="http://www.mail-signatures.com/articles/wp-content/uploads/2014/08/twitter.png" alt="" />
</span>
</a>
hope its good!
if you have span tag on your code it will effect this tag too... i suggest you to give this specific span an id and probably it will work.
here is an example:
.parent #mySpan{
position:absolute;
top:150px;
transition: left .5s;
left: 0;
margin-left:-50px;
width:50px;
height:50px;
}
.parent:hover #mySpan{
left:50px;
}
<a class="parent">
<span id='mySpan'>
<img src="http://www.mail-signatures.com/articles/wp-content/uploads/2014/08/facebook.png" alt=""><br>
</span>
</a>
I found this Javasript code without (HTML,CSS) working in widget.. but how to do like this mouse hover? DEMO
<script type="text/javascript">
<!--
var imgObj = null;
var animate ;
function init(){
imgObj = document.getElementById('myImage');
imgObj.style.position= 'absolute';
imgObj.style.top = '240px';
imgObj.style.left = '-300px';
imgObj.style.visibility='hidden';
moveRight();
}
function moveRight(){
if (parseInt(imgObj.style.left)<=10)
{
imgObj.style.left = parseInt(imgObj.style.left) + 5 + 'px';
imgObj.style.visibility='visible';
animate = setTimeout(moveRight,20); // call moveRight in 20msec
//stopanimate = setTimeout(moveRight,20);
}
else
stop();
f();
}
function stop(){
clearTimeout(animate);
}
window.onload =init;
//-->
</script>
<img id="myImage" src="https://lh4.googleusercontent.com/proxy/LxuD_Ceq6NrRGBW2mF_6Cy9zeO_vqkV8ZTRMdzjc_LxE0InnXBLp1_BkWuyhlg0EMJPt-Njzzp5_4cuR562m6dh8QNTW_1kzsf9pXcXiKI2ZK6wEMJH2TAAiQqpQUewNMKI=s0-d" style="margin-left:170px;" />
Here i found it easy steps .... just copy this to HTML widget ...works perfect
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".gplusbox").hover(function() {$(this).stop().animate({right: "-80"}, "medium");}, function() {$(this).stop().animate({right: "-330"}, "medium");}, 100);});
//-->
</script>
<style type="text/css">
.gplusbox{
background: url("https://lh3.googleusercontent.com/-iOMr0KnDFkY/V17Zm0bj49I/AAAAAAAABGw/Ag_ig7sBwYE5qXn6evvNTFSg9KvhQT7lACLcB/h250/Untitled-1.jpg") no-repeat scroll left center transparent !important;
display: block;
float: right;
height: 320px;
padding: 0 0px 0 40.5px;
width: 325px;
z-index: 99999;
position:fixed;
right:-330px;
top:20%;
}
</style>
<div class="gplusbox"><div>
<img src="https://pbs.twimg.com/profile_images/531885101043302400/4fDwYFQb.png" />
</div></div>
http://jsfiddle.net/bryank/YPxb5/
#spacer{
position:fixed;
top:11px;
left:200px;
height:79px;
width:155px;
background-color:#fff;
}
#spacer:active{
-webkit-animation: click .1s 1;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes click{
0%{-webkit-transform:scale(1,1);}
100%{-webkit-transform:scale(0.9,0.9);}
}
/*------begin nav------*/
#toggler { display: none; }
#nav{
padding:0;
position:fixed;
top:11px;
left:26px;
font-family:helvetica;
font-size:14px;
background-image:url(logo_back.png);
/*-- background-color:red; --*/
width:11.1em;
height:5.7em;
overflow:hidden;
transition: height .4s;
-webkit-transition: height .4s;
}
input:checked + #nav{
height:33em;
}
/*-- #nav a.bg:hover{
background-color: rgba(0,0,0,0.0);
} --*/
#nav a{
text-decoration:none;
color:#000;
}
#nav a:hover{
background-color:#858585;
}
#nav div{
text-indent:0.5em;
line-height: 1.2em;
}
<!--img button-->
<div id="spacer"><img src="http://liveoilfree.com/wtrclrr/b&w_logo_m.jpeg" height="79" width="155" /></div>
<!--drop down nav-->
<label for="toggler">
<input id="toggler" type="checkbox">
<div id="nav">
<!--logo_image-->
<img src="http://liveoilfree.com/wtrclrr/b&w_logo_m.jpeg" height="79" width="155" />
<!---->
<div style="height:1em;"></div>
<div style="font-size:1.1em;"><b>Artists</b></div>
<div style="height:1em;"></div>
<div>Ahnnu</div>
<div>Cex</div>
<div>Co La</div>
<div>Delicate Steve</div>
<div>Dope Body</div>
<div>Dustin Wong</div>
<div>Eachothers</div>
<div>En Passant</div>
<div>Gem Vision</div>
<div>Holy Ghost Party</div>
<div>Jimmy Joe Roche</div>
<div>Jason Urick</div>
<div>Ken Seeno</div>
<div>Kid Krusher</div>
<div>Lil Jabba</div>
<div>Rick Rab</div>
<div>Teeth Mountain</div>
<div>Teenage Souls</div>
<div style="height:1em;"></div>
<div style="font-size:1.1em;">INFO</div>
</div>
</label>
In my fiddle here: http://jsfiddle.net/bryank/YPxb5/ I have two buttons,
button on the left is a drop down menu using a transition (thanks to user:'squint' for showing me the hidden checkbox solution in a previous question.) the button itself does nothing but trigger the menu.
and next to that on the right I have a button that appears to click down using scale in an animation
I want the button on the right to drop the menu directly underneath of the button.
I am certain the only way to do this is with javascript (though I am constantly surprised by the CSS cleverness out there) I have recently bitten the bullet and decided to learn javascript from the ground up...love the eloquent javascript hyperbook so far
any ideas?
thx
Finally got this to work how I wanted.(not without help from stackoverflow users, thanks again.) Im sure the jQuery is a little dirty but...it works.
http://jsfiddle.net/bryank/YPxb5/1/
$(document).ready(function(){
$('#spacer').mousedown(function(){
var val=.9
$(this).css({'-webkit-transform':'scale('+val+')','-moz- transform':'scale('+val+')'})
.mouseup(function(){
var val2=1
$(this).css({'-webkit-transform':'scale('+val2+')','-moz-transform':'scale('+val2+')'})
});
});
});
$(document).ready(function(){
$('#spacer').mouseup(dropDown2)
});
function dropDown2(){
$('#nav').toggleClass('navDrop');
}
I have a div that expands as the user add images on it. And under the div I have a button. I need this button to go down as the div expands down.
The button position depends on the div position.
I want that the divUpload goes down as the user add photos to the panel: files.
HTML:
<form id="form1" runat="server" enctype="multipart/form-data">
<div id="divListFiles">
<asp:FileUpload ID="files" name="files[]" accept='image/*' runat="server" multiple />
<asp:Panel ID="list" name="list" runat="server" Height="107px">
</asp:Panel>
</div>
<div id="divListDel">
<output id="listdel" name="listdel"></output>
</div>
<div id="divCarregando">
<img id="carregando" src="http://bps.saude.gov.br/visao/img/carregando.gif" alt="Carregando..">
</div>
<div id="divNumImages">
<asp:TextBox ID="txbNumImages" runat="server"></asp:TextBox>
</div>
<div id="divUpload">
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClientClick="ShowCarregando()" OnClick="btnUpload_Click" />
</div>
CSS:
divListFiles {
position:absolute;
left:9px;
top:99px;
width:653px;
height:105px;
z-index:1;
}
#divListDel {
position:absolute;
left:81px;
top:73px;
width:627px;
height:33px;
z-index:1;
text-align: left;
}
#divCarregando {
position:absolute;
left:7px;
top:113px;
width:423px;
height:231px;
z-index:-1;
text-align: left;
}
#divNumImages {
position:absolute;
left:9px;
top:100px;
width:123px;
height:27px;
z-index:5;
text-align: left;
}
#divUpload {
position:relative;
left:19px;
top:241px;
width:65px;
height:27px;
z-index:1;
text-align: left;
}
#form1{
height: 303px;
}
#carregando{
visibility:hidden;
}
.thumb {
height:65px;
width:90px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
.thumbdel {
height: 17px;
width: 17px;
margin: 60px 81px 0 0;
}
What you've described would be the normal behavior for:
<div><!-- ...the images here ... --></div>
<button>The Button</button>
...as by default a div is as wide as it can be and as tall as it needs to be, with content following it being rendered underneath.
Live Example | Source
The problem is these lines in your CSS:
#divCarregando {
position:absolute;
"Absolutely positioned boxes are taken out of the normal flow", which creates (in my opinion) absolute MAYHEM on your page.
My #1 recommendation would be to use a nicely flowed HTML document without resorting to absolute positioning.
If you can't or won't do that, your only option will be to recalculate the bottom position of the image container and apply it to the top of the button container.
Using jQuery (for ease of example, only, as this is certainly possible without it):
When you add an image:
var images = $( "#divCarregando" ),
position = images.offset();
$( "#divUpload" ).css({
"top": position.top + images.outerHeight( true )
});
For what it's worth, I highly recommend not using absolute.
HTML
<div class="wrap">
<div class="innner">nfdj</div>
<button>Click</button>
</div>
CSS
.wrap{
width:250px;
background:green;
height:auto;
}
div{
width:100%;
height:150px;
background:grey
}
DEMO
Whenever I wonder about CSS I go and visit Peter-Paul Koch -
http://www.quirksmode.org/css/display.html
but if you don't want to discover that site, then in most cases I would use display: block; for the button, which will ensure that it below the one above it.
If I had a set of buttons arranged horizontally I would enclose them all inside a div which was display: block; and make each button display: inline;. That way the entire group gets pushed below the div above, but each button is inline inside the div.
I'll leave you to work out what to do with a vertical set of buttons to one side or the other of the main div.