Is there a way to change the background of select menus with uniform.js? I changed my body background to a dark color and now all the select menus have that color in the background.
I found the style in uniform.css, so fixed now.
div.selector select {
opacity: 0;
filter: alpha(opacity=0);
-moz-opacity: 0;
border: none;
background: #fafaee;
position: absolute;
height: 22px;
top: 2px;
left: 0px;
width: 100%; }
Related
I found an excellent solution here to add a spinning GIF during a long (8-12sec) Ajax call, but I can't figure out how to vertically centre some text just above the GIF that will remain in the same relative position no matter the screen size.
Here's what I have so far:
<style>
/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modalLoading {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
text-align: center;
background: rgba( 255, 255, 255, .8 )
/*url('http://i.stack.imgur.com/FhHRx.gif') */
url('<?php echo BASE_HDR_TAG . "contest/common/img/ajax-loader-red.gif"; ?>')
50% 50%
no-repeat;
}
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading .modalLoading {
overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modalLoading {
display: block;
}
.modalFont {
color:#8B0000;
font-size: 20px;
font-weight:900;
font-family: 'Roboto', sans-serif;
}
</style>
This DIV is at the bottom of my body section:
<div class="modalLoading">
<div style="margin-top:25px">
<span class="modalFont">Please wait while we generate your entry form, including the PDF copy.<br />
Do not click the back button or close this browser tab.</span>
</div>
</div>
What it looks like now:
What I want it to look like:
EDIT
Trying the code from doesn't yield the desired results.
/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modalLoading {
display: none; /* if this is set to 'Flex' then the modal blocking appears on page refresh */
position: fixed;
/*z-index: 1000;*/
top: 0;
right: 0;
bottom: 0;
left: 0;
/*height: 100%;
width: 100%;*/
align-items: center;
justify-content: center;
background: rgba( 255, 255, 255, .8 )
/*url('http://i.stack.imgur.com/FhHRx.gif') */
url('<?php echo BASE_HDR_TAG . "contest/common/img/ajax-loader-red.gif"; ?>')
50% 50%
no-repeat;
}
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading .modalLoading {
overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modalLoading {
display: block;
}
.modalFont {
color:#8B0000;
font-size: 20px;
font-weight:900;
font-family: 'Roboto', sans-serif;
text-align: center;
margin-top: 100px;
}
<div class="modalLoading">
<span class="modalFont">Please wait while we generate your entry form, including the PDF copy.<br />
Do not click the back button or close this browser tab.</span>
</div>
EDIT 2
/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modalLoading {
display: flex;
position: fixed;
/z-index: 1000;/
top: 0;
right: 0;
bottom: 0;
left: 0;
/height: 100%;
width: 100%;/
align-items: center;
justify-content: center;
background: rgba( 255, 255, 255, .8 )
/*url('http://i.stack.imgur.com/FhHRx.gif') */
url('')
50% 50%
no-repeat;
}
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading .modalLoading {
overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modalLoading {
display: flex;
}
.modalFont {
color:#8B0000;
font-size: 20px;
font-weight:900;
font-family: 'Roboto', sans-serif;
text-align: center;
margin-top: 100px;
}
To center vertically a text, a possible solution is to use flexbox.
With this HTML:
<div class="modalLoading">
<span class="modalFont">Please wait while we generate your entry form, including the PDF copy.<br />
Do not click the back button or close this browser tab.</span>
</div>
You can write this CSS:
.modalLoading{
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba( 255, 255, 255, .8 ) url('http://i.stack.imgur.com/FhHRx.gif') 50% 50% no-repeat;
}
.modalFont{
margin-top: 100px; /* margin to move the text a little lower than gif loader. Change this margin with -100px if you want it to appear above the gif */
text-align: center;
}
EDIT 1
To work only after AJAX call, I only edited CSS the previous HTML I wrote doesn't change:
.modalLoading {
display: none; /* hidden when refresh the page */
position: fixed;
z-index: 1000;
top: 0;
right: 0;
bottom: 0;
left: 0;
/*height: 100%;
width: 100%;*/
align-items: center;
justify-content: center;
background: rgba( 255, 255, 255, .8 )
url('http://i.stack.imgur.com/FhHRx.gif')
50% 50%
no-repeat;
}
body.loading .modalLoading {
overflow: hidden;
}
body.loading .modalLoading {
display: flex; /*display using Flexbox */
}
.modalFont{
margin-top: 100px; /* margin to move the text a little lower than gif loader. Change this margin with -100px if you want it to appear above the gif */
text-align: center;
}
I would like to achieve what i wrote in the title, simultaneously.
What i have is a div that is width:100% (container) and contains 4 images inside of a div, 25% each (grid), with a description layer inside (on) it - called desc, for the overall dimensions, and span, for the mere text.
Here is the CSS:
.grid-container {
width: 85%;
margin-left: auto;
margin-right: auto;
}
.grid {
width: 25%;
float: left;
position: relative;
}
.grid img {
border-radius: 50%;
transition: .4s -webkit-filter linear;
-webkit-transition: background .5s ease 50ms;
transition: background .5s ease 50ms;
}
.grid img:hover {
filter: url(filters.svg#grayscale);
/* Firefox 3.5+ */
filter: gray;
/* IE6-9 */
-webkit-filter: grayscale(1);
/* Google Chrome & Safari 6+ */
background: rgba(168, 202, 217, .6)
}
.desc {
display: block;
position: absolute;
left: 26%;
width: 87%;
height: 100%;
top: 0%;
left: 0%;
border-radius: 50%;
}
.desc:hover {
background: rgba(168, 202, 217, .6)
}
.desc span {
width: 100%;
height: 100%;
text-align: center;
margin-top: 37%;
position: absolute;
left: 0;
top: 0;
font-size: 16px;
opacity: 0;
-webkit-transition: opacity .5s ease 50ms;
transition: opacity .5s ease 50ms;
color: #fff !important;
}
.desc span:hover {
opacity: 1;
}
So, what i want to achieve is to make the image go grayscale when hovered, while making the description visible. Description has a background color aswell (can i apply that to the image instead, along with the greyscale filter?)
The problem is that the description this way occupies the whole image, so the hover would be considered by the description only and not the image.
Any clues on how i can achieve what i want? Thanks for your attentio
Best regards
Simple, put both elements in the same container. For example,
.grid:hover img {
filter: url(filters.svg#grayscale);
}
.grid:hover .desc span {
opacity: 1;
}
If your description is an immediate following sibling of the image, you can use the immediate following-sibling selector:
.grid img:hover + .descr{display: block; background: whatever;}
(selects the element with the class="descr" once the mouse hovers over the image)
HTML structure for this to work:
<div>
<img>
<p class="descr">
</div>
I have to resize the buttons on the screen initial size of button 157*70px and required size on screen is 100*50px. It has to be compatible with IE8 where the background-size property is not working although this property works fine in FF.
HTML:
<div id="return_button">
<a class="new_return_button" name="PREVIOUS">Previous</a>
</div>
CSS:(Firfox)
.new_return_button{
background: url("images/previous.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
backgound-size: 100px 50px;
color: #FFFFFF;
cursor: pointer;
display: block;
height: 70px;
line-height: 70px;
width: 157px;
}
#return_button{
color: #FFFFFF;
font-weight: bold;
height: 70px;
left: 10px;
line-height: 70px;
margin: 0;
position: absolute;
text-align: center;
width: 157px;
}
This css works fine in Firefox with background-size property and shrinks the image of 157*70px to area of 100*50px but doesn't work in IE8.
Please suggest a solution to this issue
One way to solve this is to use another element. You probably need to tweak the margins of the <span> to have it working as desired. Also note that this does not guarantee a specific height, instead it will give you the correct aspect ratio for the scaled graphic.
<style>
#return_button {
position: relative;
width: 100px;
}
#return_button img {
max-width: 100%;
height: auto;
}
#return_button span {
position: absolute;
top: 50%;
margin-top: -5px;
left: 10px;
right: 10px;
text-align: center;
}
</style>
<div id="return_button">
<img src="images/previous.png" alt="Button graphic">
<span>Button label</span>
</div>
Example site
I have a site divided into your usual vertical sections. Header and footer both contain backgrounds with background-attachment: fixed. I have a slide-out nav, which you can see is activated on the first link. Everything works dandy except...
Issue:
Safari 6 (I'm not sure about 5.1, but it seems to be on Mac as my Windows Safari doesn't have the issue) has a nasty flicker upon animation. This can be resolved with the usual -webkit-backface hack HOWEVER upon using this, a new problem arises. The fixed background images start behaving very badly, and if you scroll/resize the browser enough, the images get distorted or content overlays improperly. Is there an alternative method I can use for this technique, or an actual fix?
HTML
<section>Hi CLICKME</section>
<section>hi</section>
<section>hi</section>
<section>hi</section>
<footer><p>I am some text</p></footer>
<aside class="menu">
I'm a menu.
</aside>
CSS
body {
background: #222;
transition: all 0.3s;
-webkit-backface-visibility: hidden;
}
body.bump {
transform: translate(-258px, 0);
}
section {
background: #CBA;
color: white;
line-height: 450px;
font-size: 32px;
height: 500px;
position: relative;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
z-index: 1;
}
section:nth-child(2) {
background: #FAFAFA;
}
section:nth-child(3) {
background: #CCC;
}
section:nth-child(4) {
background: #ABC;
}
section:first-child {
background: url(http://placekitten.com/1600/500) center top;
background-attachment: fixed;
-webkit-backface-visibility: hidden;
}
#media all and (min-width: 73.75em) {
section:first-child {
background-size: cover;
}
}
footer {
background: url(http://placekitten.com/1400/500) center top;
background-attachment: fixed;
color: white;
font-size: 32px;
height: 500px;
}
#media all and (min-width: 73.75em) {
footer {
background-size: cover;
}
}
footer p {
position: fixed;
bottom: 200px;
left: 0;
text-align: center;
width: 100%;
}
aside.menu {
background: #222;
color: #FFF;
height: 100%;
padding-top: 30px;
position: fixed;
top: 0;
right: 0;
text-align: left;
transform: translate(516px, 0);
transition: all 0.3s;
width: 258px;
-webkit-backface-visibility: hidden;
}
.bump aside.menu {
transform: translate(258px, 0);
}
JS (using Jquery)
$('section a').click( function(e) {
$('body').toggleClass('bump');
});
I did a workaround, by applying the fixed background to the body, wrapping everything in body in another div (animating that instead, so it wasn't affecting the body background) and the footer stayed the same, since having scrolled that far there is no way to pop the sidebar out anyway (so no animation flicker to worry about).
So i have a popup window with a scroller. For scroller i used basic css element overflow: scroll. But the problem is scroller appears on the side and on the bottom. Now i want to know if there is anyway to remove the bottom scroller, because even though its locked its useless to me and it would look better without it. Ive googled it and havent found anything so if you have a solution please share it. If you need any of the code tell me and i will post it.
This is "my" css for popup (i got the code from http://www.zurb.com/playground/reveal-modal-plugin):
.reveal-modal-bg {
position: fixed;
height: 100%;
width: 100%;
background: #000;
background: rgba(0,0,0,.8);
z-index: 100;
display: none;
top: 0;
left: 0;
}
.reveal-modal {
visibility: hidden;
top: 100px;
left: 50%;
margin-left: -300px;
width: 520px;
height: 400px;
background: #eee url(modal-gloss.png) no-repeat -200px -80px;
position: absolute;
z-index: 101;
padding: 30px 40px 34px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
-box-shadow: 0 0 10px rgba(0,0,0,.4);
overflow:scroll;
}
.reveal-modal h1{
color: green;
font-size: 40px;
}
.reveal-modal strong{
font-style: inherit;
}
.reveal-modal.small { width: 200px; margin-left: -140px;}
.reveal-modal.medium { width: 400px; margin-left: -240px;}
.reveal-modal.large { width: 600px; margin-left: -340px;}
.reveal-modal.xlarge { width: 800px; margin-left: -440px;}
.reveal-modal .close-reveal-modal {
font-size: 22px;
line-height: .5;
position: absolute;
top: 8px;
right: 11px;
color: #aaa;
text-shadow: 0 -1px 1px rbga(0,0,0,.6);
font-weight: bold;
cursor: pointer;
}
a better way of doing it would be
overflow-x:hidden;
overflow-y:auto;
That way it means that if a page gets bigger with jquery and then you need to scroll the view won't get smaller and affect your measurements
This should work:
overflow-x:hidden;
overflow-y:auto;