I am using the WordPress File Upload Plugin and is working fine, but on hover the button to select a file to upload, the button moves to the right.
I think the following CSS is the important part.
input[type="button"].file_input_button{
width:100px;
height:27px;
position:absolute;
top:0;
margin:0;
padding:0;
background-color:#EEE;
color:#555;
background-image:url(white-grad-active.png);
background-position:left top;
background-repeat:repeat-x;
border-style:solid;
border-width:1px;
border-color:#BBB;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-khtml-border-radius:2px;
border-radius:2px
}
input[type="button"].file_input_button_hover{
width:100px;
height:27px;
position:absolute;
top:0;
margin:0;
padding:0;
background-color:#EEE;
color:#111;
background-image:url(white-grad-active.png);
background-position:left top;
background-repeat:repeat-x;
border-style:solid;
border-width:1px;
border-color:#333;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-khtml-border-radius:2px;
border-radius:2px
}
input[type="button"].file_input_button:disabled,input[type="button"].file_input_button_hover:disabled{
width:100px;
height:27px;
position:absolute;
top:0;
margin:0;
padding:0;
background-color:#EEE;
color:silver;
background-image:url(white-grad-active.png);
background-position:left top;
background-repeat:repeat-x;
border-style:solid;
border-width:1px;
border-color:#BBB;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-khtml-border-radius:2px;
border-radius:2px
}
What is the CSS code that is causing this?
How can I remove this behavior?
Can I disable the .file_input_button_hover CSS?
This CSS it came with the plugin and I can't get rid from it.
UPDATE:
Playing with Chrome's Developer Tools I saw that on hover the class of the button changed from file_input_button to file_input_button_hover and position changed from nothing to "position: absolute;"
I don't know why but adding the following to the custom CSS solved the issue:
input[type="button"].file_input_button_hover{
position: relative !important;
}
input[type="button"].file_input_button_hover{
position: relative !important;
}
Your problem is with the file_input_button_hover class, set the left value to 0
Related
I'm trying to dynamically stretch my divs based on the length of the string within it. How can this be done?
<div width=magic_function();>
pickle
</div>
I'm currently using php's strlen in a clever way to achieve this, but I feel it is process-intense.
<style>
.tag {
padding-bottom:2px;
position:relative;
background:#BFC9D9;
margin-right:auto;
margin-left:auto;
width:???;
text-align:center;
border-top-right-radius:2px;
border-bottom-right-radius:2px;
margin-top:3px;
margin-bottom:3px;
}
.tag:after {
right:100%;
top:50%;
border:solid transparent;
content: " ";
height:0;
width:0;
position:absolute;
border-right-color:#BFC9D9;
border-width:10px;
margin-top:-10px;
}
</style>
Try this
.tag {
display:inline;
width:auto;
}
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>
Is it possible to center an absolute position div within a relative dive with margin 0 auto?
HTML:
<div class="outer">
<div class="inner"></div>
</div>
CSS:
.outer{
background: red;
margin: 0 auto;
width:100px;
height:100px;
}
.inner{
position:absolute;
width:20px;
height:20px;
background:blue;
top:10px;
left:10px;
}
I was hoping that the absolute positioning would work within the outer one ok but I guess the margin. The above code can be seen here: http://jsfiddle.net/g4y4czff/
Ideally I'd like to use css to solve this but I reckon there's more likely to be a js solution.
Any ideas greatly appreciated.
C
New fiddle: http://jsfiddle.net/g4y4czff/1/
Just add position: relative to .outer
Reason is because the default position property is static
since you wanted it centered, here you have it centered horizontally and vertically too. Placing position:absolute; inside position:relative; allows it to be inside of it.
http://jsfiddle.net/g4y4czff/3/
.outer{
background: red;
margin: 0 auto;
width:100px;
height:100px;
position:relative;
}
.inner{
position:absolute;
width:20px;
height:20px;
background:blue;
top:0;
margin: auto;
left:0;
right:0px;
bottom:0;
}
I am new to front end development and I have to create with a special apparence.
I am french and I don't really know what am I looking for to create the shape I need.
So there is a part of the mock-up :
So I was wondering how to make the border of my div in diagonale?
I think about using canvas, or just simply put a div with a image-background corresponding. But what are the other options I have to do it? And in your opinion, what is the best?
Something like this perhaps?:
HTML:
<div id="header">LE BON REFLEXE</div>
CSS:
div#header
{
display:inline-block;
width:auto;
height:20px;
padding:5px 20px 5px 10px;
background:none #3476A9;
color:#fff;
font-weight:bold;
font-family:arial;
position:relative;
overflow:visible;
}
div#header:after
{
content:'';
display:block;
width:20px;
height:30px;
position:absolute;
top:0;
right:-5px;
background:none #3476A9;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
}
JSFiddle: http://jsfiddle.net/b4TGG/3/
You have a few option to create shapes.
The most known one is to draw borders with different colors.
Css3 offers today some transform possibilities,
pseudo-elements, shadows and borders mixed together can offer lots possibilities as well,
border-radius too.
position, display, float can be used to place element wherever you wish like any content.
Here something quiet similar to your screen : DEMO
Basicly from :
<div class="shapes">
<h1>Shapes ?</h1>
</div>
and some CSS
shapes {
margin:0 4em;
overflow:hidden;
position:relative;
}
.shapes:before {
content:'';
width:4em;
height:30em;
float:left;
background:gray;
transform:rotate(10deg);
transform-origin:top right;
position:relative;
z-index:1;
}
h1 {
border-top:1em solid #2C3744;
margin:0;
color:white;
background:#3476A9;
}
h1:after {
content:'';
padding:0.61em;
background:white;
position:absolute;
width:100%;
margin-left:1em;
margin-right:-100%;
transform:skew(-15deg);
}
and here plenty more ideas
So I've been playing around with web development and I've noticed that in Firefox, my elements are getting pushed to the right versus down, which is what it should be (which happens in Chrome).
I am by no means a Guru. Is there any way to prioritize wrapping versus pushing? I have tried inserting line breaks and setting both to display:block. That does not seem to be the problem.
This is the CSS for the bar:
.tiq-editor-bar
{
z-index:1;
overflow:hidden;
float:left;
width:100%;
border-top: solid 1px #AAA;
text-align:center;
display:none;
position:relative;
color:#AAA;
font-weight:normal;
font-size:14px;
}
This is the CSS for the gallery wrapper (the white out-lined thing)
#tiq-ui-gallery-wrapper
{
min-height: 500px;
background:url(../img/portfolio/empty.png) center no-repeat;
overflow:hidden;
}
And for the gallery itself:
.tiq-theme-gallery
{
width:600px;
height:400px;
resize:vertical;
border:solid 1px #eee;
overflow:auto;
}
Thanks!
EDIT: The gallery is positioned relatively, BTW. I am using Galleria and that gives the container:
.galleria-container {
position: relative;
overflow: hidden;
background: #000;
display:block;
}
EDIT EDIT:
Here is a JSFiddle:
http://jsfiddle.net/RyBz9/2/
Change
.tiq-editor-bar
{
float:left;
}
to
.tiq-editor-bar
{
float:none;
}