I'm trying to centre an absolute positioned drop down menu below the parent div which is of unknown width. I've attempted to use margin-left, left, and transform with no luck.
How it looks versus how I want it to look
JSFiddle
HTML
<div id="heads">
<div class="contain">
<div id="heads-menu">
<div id="heads-menu-name">
<img src="../resources/profile-icon.svg" />
<div>John Smith</div>
</div>
<div id="heads-menu-nav">
<div></div>
View Profile
Options
Help
Close Session
</div>
</div>
</div>
</div>
CSS
#heads-menu {
float: left;
}
#heads-menu-name {
border-bottom: 2px solid transparent;
cursor: pointer;
padding: 22px 0 20px 0;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
#heads-menu-name img {
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
float: left;
height: 26px;
margin-right: 10px;
width: 26px;
}
#heads-menu-name div {
color: #666;
float: left;
font: 600 normal normal 12px/16px Source Sans Pro, Arial, Helvetica, sans-serif;
margin: 5px 0;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
#heads-menu-name:hover {
border-bottom: 2px solid #5098BB;
}
#heads-menu-name:hover div {
color: #5098BB;
}
#heads-menu-nav {
background: rgba(0,0,0,.8);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
display: none;
overflow: visible;
padding: 5px 0;
position: absolute;
width: 140px;
}
#heads-menu-nav div {
border-bottom: 8px solid rgba(0,0,0,.8);
border-left: 8px solid transparent;
border-right: 8px solid transparent;
height: 0;
margin: 0 62px;
position: absolute;
top: -8px;
width: 0;
}
#heads-menu-nav a {
color: #CCC;
font: 600 normal normal 12px/16px Source Sans Pro, Arial, Helvetica, sans-serif;
padding: 10px 20px;
text-decoration: none;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
#heads-menu-nav a:hover {
background: rgba(255,255,255,.2);
color: #FFF;
}
You can try this :
$("#heads-menu-name").click(function(e) {
var linkWidth = $(this).width();
$("#heads-menu-nav").css('marginLeft', function() {
return '-' + (($(this).width()/2)-(linkWidth/2)) + 'px';
}).toggle();
e.stopPropagation();
});
Demo: https://jsfiddle.net/iRbouh/ataamc72/
Related
I have the following code:
$(document).scroll(function() {
var scroll = $(this).scrollTop();
if (scroll >= 150) {
$("#popUp").css("margin-left", "-425px");
$("#plus").css("margin-left", "0px");
}
});
$("#plus").click(function() {
$("#popUp").css("margin-left", "0px");
$("#plus").css("margin-left", "-425px");
});
$("#close").click(function() {
$("#popUp").css("margin-left", "-425px");
$("#plus").css("margin-left", "0px");
});
* {
margin: 0;
font-family: 'Source Sans Pro', sans-serif;
}
#darkBack {
width: 100%;
height: 100vh;
background: rgba(76, 56, 75, .15);
}
#popUp {
position: fixed;
max-width: 350px;
height: 225px;
background: rgba(236, 240, 241, 1);
border: 7px solid #fff;
bottom: 0;
margin-left: 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#new span {
background: #fff;
position: absolute;
color: #1c8dc4;
padding: 4px 10px;
font-size: 16px;
font-weight: 600;
letter-spacing: 1px;
margin-top: -5px;
}
#popUp .close {
color: #464646;
right: 8px;
top: 0px;
position: absolute;
font-size: 20px;
cursor: pointer;
}
#popUp h2 {
font-size: 17px;
color: #464646;
line-height: 24px;
font-weight: 400;
text-align: center;
margin-top: 40px;
padding: 0 20px;
}
#body {
height: 1200px;
background: #eee;
}
a.button {
margin: 0 auto;
text-align: center;
right: 0;
left: 0;
position: absolute;
width: 120px;
font-size: 15px;
color: #fff;
border-bottom: 2px solid #18729f;
background: #1c8dc4;
border-radius: 4px;
padding: 8px 0;
}
#plus {
position: fixed;
color: #fff;
bottom: 15%;
font-size: 15px;
margin-left: -425px;
-webkit-transition: all 1.25s ease;
-moz-transition: all 1.25s ease;
-o-transition: all 1.25s ease;
transition: all 1.25s ease;
cursor: pointer;
text-align: left;
letter-spacing: 1px;
}
#plus span {
position: absolute;
margin-top: 38px;
left: 4px;
}
#plus::after {
content: '';
display: block;
display: relative;
border-top: 55px solid transparent;
border-bottom: 55px solid transparent;
border-left: 55px solid #1c8dc4;
}
#media all and (max-width: 900px) {
#popUp {
margin-left: -425px;
}
#plus {
margin-left: 0px;
}
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<div id="popUp">
<div id="close" class="close"><i class="fa fa-times"></i></div>
<div id="new"><span>NEW!</span></div>
<h2>I'm a notification popup that isn't too distracting or in your face. Scroll down or close me and I will go away. You'll still be able to open me later on don't worry.</h2>
<br>
Visit Page
</div>
<div id="plus"><span>NEW<br> <i class="fa fa-plus"></i></span></div>
<div id="body"></div>
How would I move the to the opposite side of the page? Instead of it appearing at the far left of the page, how would I make it appear at the far right? I have tried changing the margin-left in the js but I am not quite getting it right, as it does not output the expected output. Any suggestions?
When using fixed positioning of elements, I advise you to use the right / left rule for offset.
In jquery I changed all margin-left to right. I did the same in css. It was with those rules that dealt with displacement. Also, to rotate the triangle, I adopted rule border-right: 55px solid #1c8dc4 for #plus::after.
$(document).scroll(function() {
var scroll = $(this).scrollTop();
if (scroll >= 150) {
$("#popUp").css("right", "-425px");
$("#plus").css("right", "0px");
}
});
$("#plus").click(function() {
$("#popUp").css("right", "0px");
$("#plus").css("right", "-425px");
});
$("#close").click(function() {
$("#popUp").css("right", "-425px");
$("#plus").css("right", "0px");
});
* {
margin: 0;
font-family: 'Source Sans Pro', sans-serif;
}
#darkBack {
width: 100%;
height: 100vh;
background: rgba(76, 56, 75, .15);
}
#popUp {
position: fixed;
max-width: 350px;
height: 225px;
background: rgba(236, 240, 241, 1);
border: 7px solid #fff;
bottom: 0;
right: -425px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#new span {
background: #fff;
position: absolute;
color: #1c8dc4;
padding: 4px 10px;
font-size: 16px;
font-weight: 600;
letter-spacing: 1px;
margin-top: -5px;
}
#popUp .close {
color: #464646;
right: 8px;
top: 0px;
position: absolute;
font-size: 20px;
cursor: pointer;
}
#popUp h2 {
font-size: 17px;
color: #464646;
line-height: 24px;
font-weight: 400;
text-align: center;
margin-top: 40px;
padding: 0 20px;
}
#body {
height: 1200px;
background: #eee;
}
a.button {
margin: 0 auto;
text-align: center;
right: 0;
left: 0;
position: absolute;
width: 120px;
font-size: 15px;
color: #fff;
border-bottom: 2px solid #18729f;
background: #1c8dc4;
border-radius: 4px;
padding: 8px 0;
}
#plus {
position: fixed;
color: #fff;
bottom: 15%;
font-size: 15px;
right: 0px;
-webkit-transition: all 1.25s ease;
-moz-transition: all 1.25s ease;
-o-transition: all 1.25s ease;
transition: all 1.25s ease;
cursor: pointer;
text-align: left;
letter-spacing: 1px;
}
#plus span {
position: absolute;
margin-top: 38px;
right: 2px;
}
#plus::after {
content: '';
display: block;
display: relative;
border-top: 55px solid transparent;
border-bottom: 55px solid transparent;
border-right: 55px solid #1c8dc4;
}
#media all and (max-width: 900px) {
#popUp {
right: -425px;
}
#plus {
right: 0px;
}
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<div id="popUp">
<div id="close" class="close"><i class="fa fa-times"></i></div>
<div id="new"><span>NEW!</span></div>
<h2>I'm a notification popup that isn't too distracting or in your face. Scroll down or close me and I will go away. You'll still be able to open me later on don't worry.</h2>
<br>
Visit Page
</div>
<div id="plus"><span>NEW<br> <i class="fa fa-plus"></i></span></div>
<div id="body"></div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
How do I create a hover effect as shown in the gif? All I could do now is zoom it on hover. How do I add the buttons and other details too, on hover?
I've done this so far:
.Row_poster:hover {
transform: scale(1.3);
overflow: visible;
cursor: pointer;
z-index: 98;
}
Pure CSS Methods
Although the effect can be obtained using JavaScript, here are some pure CSS methods.
Method 1: Use ::after and ::before.
Read:
::after on MDN
::before on MDN
body,
html {
height: 100%;
width: 100%;
background: #141414;
margin: 0;
padding: 25px;
box-sizing: border-box;
font-family: Lato, 'Segoe UI', Roboto, sans-serif;
}
.square {
background-size: cover!important;
background-position: center!important;
display: inline-block;
width: 150px;
height: 100px;
transition: transform 100ms ease-out, border-radius 200ms ease-out;
}
.square:hover {
background: url(https://media.giphy.com/media/lgcUUCXgC8mEo/giphy.gif), url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
border-radius: 10px 10px 0 0;
transform: scale(1.5);
box-shadow: 0 0 2px #000a;
}
.square::after {
position: relative;
top: 100px;
display: block;
background: #18181818;
box-shadow: 0 0 2px #000a;
color: #fff;
width: 150px;
height: fit-content;
padding: 5px;
box-sizing: border-box;
opacity: 0;
border-radius: 0 0 10px 10px;
transition: opacity 300ms ease-out, border-radius 200ms ease-out;
}
.square:hover::after {
opacity: 1;
}
.square.one {
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
}
.square.one:hover {
background: url(https://media.giphy.com/media/lgcUUCXgC8mEo/giphy.gif), url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
}
.square.one::after {
content: 'Never Gonna Give You Up!';
}
<div class="square one"></div>
You should prefer using this method if your caption-thing is not very customized.
Method 2: Use separate elements
This method is best no matter how customized is your caption-thing.
body,
html {
height: 100%;
width: 100%;
background: #111;
margin: 0;
padding: 25px;
box-sizing: border-box;
font-family: Lato, 'Segoe UI', Roboto, sans-serif;
}
.square {
width: 150px;
height: 100px;
transition: transform 100ms ease-out, border-radius 200ms ease-out;
}
.square .cover {
width: 100%;
height: 100px;
border-radius: 10px 10px 0 0;
background-size: cover!important;
background-position: center!important;
}
.square .text {
display: none;
background: #181818;
color: #fff;
width: 100%;
height: fit-content;
padding: 5px;
box-sizing: border-box;
transition: opacity 300ms ease-out, border-radius 200ms ease-out;
border-radius: 0 0 10px 10px;
}
.square:hover {
border-radius: 10px;
transform: scale(1.5);
box-shadow: 0 0 2px #000a;
}
.square:hover .text {
display: block;
}
.square.one .cover {
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
}
.square.one:hover .cover {
background: url(https://media.giphy.com/media/lgcUUCXgC8mEo/giphy.gif), url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
}
<div class="square one">
<div class="cover"></div>
<div class="text">
Never Gonna Give You Up!
</div>
</div>
The Result
Use Method 2. This looks very similar to the gif.
body,
html {
height: 100%;
width: 100%;
background: #141414;
margin: 0;
padding: 25px;
box-sizing: border-box;
font-family: 'Segoe UI', Roboto, sans-serif;
}
.square {
width: 150px;
height: 100px;
transition: transform 100ms ease-out, border-radius 200ms ease-out;
}
.square .cover {
width: 100%;
height: 100px;
border-radius: 10px 10px 0 0;
background-size: cover!important;
background-position: center!important;
}
.square .text {
display: none;
background: #181818;
color: #fff;
width: 100%;
height: fit-content;
padding: 5px;
box-sizing: border-box;
transition: opacity 300ms ease-out, border-radius 200ms ease-out;
border-radius: 0 0 10px 10px;
}
.square:hover {
border-radius: 10px;
transform: scale(1.5);
box-shadow: 0 0 2px #000a;
}
.square:hover .text {
display: block;
}
.square.one .cover {
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
}
.square.one:hover .cover {
background: url(https://media.giphy.com/media/lgcUUCXgC8mEo/giphy.gif), url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
}
.square .text .info {
font-size: 8px;
}
.icons {
display: flex;
align-items: center;
justify-content: space-between;
}
.icons :nth-child(3) {
margin-left: auto;
}
.icons span{
border-radius: 50%;
border: 1px solid #777;
width: 18px;
height: 18px;
margin-right: 2px;
font-size: 12px;
text-align: center;
line-height: 18px;
font-weight: 1000;
overflow: hidden;
}
.rating {
border: 0.1px solid white;
padding: 1px 2px;
}
.match {
color: green;
font-weight: bold;
}
<div class="square one">
<div class="cover"></div>
<div class="text">
<div class="icons">
<span>:)</span>
<span>O</span>
<span>V</span>
</div>
<div class="info">
<span class="match">98% Match</span>
<span class="rating">18+</span>
<span class="seasons">5 Seasons</span>
</div>
</div>
</div>
Hi Harsh,
Please have a look at the below code I put together to see if this is what you are trying to achieve, pal.
$(document).ready(function () {
$(document).on('mouseenter', '.transformar', function () {
$(this).find(".playButtons").show('slow');
}).on('mouseleave', '.transformar', function () {
$(this).find(".playButtons").hide();
});
});
.transformar {
display:block;
height:150px;
transition: transform 2s;
}
.playButtons{display: none}
.transformar:hover{
transform: scale(2);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='transformar' align="center">
<img src="https://i.pinimg.com/originals/e1/d0/1b/e1d01b1b7f602d223afc747fcbced364.jpg" height="150" alt="Netflix Example">
<h2>Filme do Netflix</h2>
<div id="#botones" class="playButtons">
<button type="button">PLAY EPISODE</button>
</div>
</div>
I have a dropdown menu. It consists of 3 buttons ontop of eachother so only the main button is visible. When you hover over the main button saying Raffles it will make the button move upwards. Then 1 of the other 3 buttons moves down and the last one stays still. This creates a compact dropdown menu. It works perfectly except for 1 problem. I have it set to that when you hover each one it will shift them into the positions the need to be. The problem is that when I start to hover over a different button (after they have shifted) they all start to shift again because I stop hovering over 1 button and start hovering over the next button. How can I prevent this from happening?
var dropdown = function() {
$('.inbutton, .dr1button, dr2button').hover(function() {
$('.inbutton').animate({
top: '-183px'
}, 200);
$('.dr2button').animate({
top: '0px'
}, 200);
}, function() {
$('.inbutton').animate({
top: '-122px'
}, 200);
$('.dr2button').animate({
top: '-61px'
}, 200);
});
};
$(document).ready(dropdown);
p.button {
padding: 0px 13px 0px 13px;
background-color: #333333;
float: left;
font-family: default_font;
font-size: 30;
color: white;
text-align: center;
line-height: 61px;
border-bottom: 1px solid #1C1C1C;
box-sizing: border-box;
height: 100%;
transition: height 0.2s ease;
}
p.button:hover {
height: 110%;
border-bottom: 0px;
cursor: pointer;
}
p.dbutton {
padding: 0px 13px 0px 13px;
background-color: #333333;
float: left;
font-family: default_font;
font-size: 30;
color: white;
vertical-align: middle;
line-height: 30.5px;
text-align: center;
border-bottom: 1px solid #1C1C1C;
box-sizing: border-box;
height: 100%;
transition: height 0.2s ease;
}
p.dbutton:hover {
height: 110%;
border-bottom: 0px;
cursor: pointer;
}
p.inbutton {
padding: 0px 13px 0px 13px;
background-color: #333333;
float: left;
font-family: default_font;
font-size: 30;
color: white;
text-align: center;
line-height: 61px;
border-bottom: 1px solid #1C1C1C;
box-sizing: border-box;
height: 100%;
position: relative;
top: -122px;
z-index: 98;
}
p.inbutton:hover {
border-bottom: 0px;
cursor: pointer;
}
p.dr1button {
background-color: #333333;
float: left;
font-family: default_font;
font-size: 30;
color: white;
text-align: center;
line-height: 61px;
height: 100%;
width: 144px;
position: relative;
z-index: 97;
transition: background-color 0.2s ease;
}
p.dr1button:hover {
background-color: #585858;
cursor: pointer;
}
p.dr2button {
background-color: #333333;
float: left;
font-family: default_font;
font-size: 30;
color: white;
text-align: center;
line-height: 61px;
height: 100%;
width: 144px;
position: relative;
top: -61px;
z-index: 98;
transition: background-color 0.2s ease;
}
p.dr2button:hover {
background-color: #585858;
cursor: pointer;
}
div.navbardivider {
height: 61px;
width: 1px;
background-color: #424242;
border-bottom: 1px solid #1C1C1C;
box-sizing: border-box;
float: left;
}
div.dropdown {
width: 144px;
float: left;
}
div.divider:hover {
cursor: pointer;
<div id="buttons">
<!--Home button-->
<p class="button">- Home</p>
<!--Divider-->
<div class="navbardivider"></div>
<!--Raffles Button-->
<div class="dropdown">
<a href="/raffles.php">
<p class="dr1button">Open</p>
</a>
<a href="/clraffles.php">
<p class="dr2button">Closed</p>
</a>
<p class="inbutton">Raffles</p>
</div>
<!--Divider-->
<div class="navbardivider"></div>
<!--Get tokens Button-->
<p class="dbutton">Get<br>Tokens</p>
<!--Divider-->
<div class="navbardivider"></div>
<!--Token lotto Button-->
<p class="dbutton">Token<br>Lotto</p>
</div>
Your problem is here:
$('.inbutton, .dr1button, dr2button').hover
You have a couple of problems. By triggering on the button individually you mouse out of one, before mousing over the other. It triggers the close before the reopen. This causes the bouncing effect. Also you are missing the "." in front of dr2button so it's not triggering the hover effect at all.
I'd use the wrapper instead:
$('.dropdown').hover
This way once you mouse over the dropdown it stays open until you mouse out. check out this fiddle: http://jsfiddle.net/r5Lyga84/
Here's the jsfiddle for the rest of the code but I attached my style css below
In Chrome they look like this
In Internet Explorer they look like this
And in Firefox they look like this
Not exactly sure what the issue is and how to fix it
And here is my style css
html {
height: 100%;
}
* {
margin: 0;
padding: 5;
}
body {
font: normal .80em'trebuchet ms', arial, sans-serif;
background: #F5F5EE;
color: #555;
}
p {
padding: 0 0 20px 0;
line-height: 1.7em;
}
img {
border: 0;
}
h1, h2, h3, h4, h5, h6 {
color: #362C20;
letter-spacing: 0em;
padding: 0 0 5px 0;
}
h1, h2, h3 {
font: normal 170%'century gothic', arial;
margin: 0 0 15px 0;
padding: 15px 0 5px 0;
color: #000;
}
h2 {
font-size: 160%;
padding: 9px 0 5px 0;
color: #009FBC;
}
h3 {
font-size: 140%;
padding: 5px 0 0 0;
}
h4, h6 {
color: #009FBC;
padding: 0 0 5px 0;
font: normal 110% arial;
text-transform: uppercase;
}
h5, h6 {
color: #888;
font: normal 95% arial;
letter-spacing: normal;
padding: 0 0 15px 0;
}
a, a:hover {
outline: none;
text-decoration: underline;
color: #AEB002;
}
a:hover {
text-decoration: none;
}
blockquote {
margin: 20px 0;
padding: 10px 20px 0 20px;
border: 1px solid #E5E5DB;
background: #FFF;
}
ul {
margin: 2px 0 22px 17px;
}
ul li {
list-style-type: circle;
margin: 0 0 6px 0;
padding: 0 0 4px 5px;
line-height: 1.5em;
}
ol {
margin: 8px 0 22px 20px;
}
ol li {
margin: 0 0 11px 0;
}
.left {
float: left;
width: auto;
margin-right: 10px;
}
.right {
float: right;
width: auto;
margin-left: 10px;
}
.center {
display: block;
text-align: center;
margin: 20px auto;
}
#main, #logo, #menubar, #site_content, #footer {
margin-left: auto;
margin-right: auto;
}
#header {
background: #323534 url(back.png) repeat-x;
height: 177px;
}
#logo {
width: 880px;
position: relative;
height: 140px;
background: transparent;
}
#logo #logo_text {
position: absolute;
top: 10px;
left: 0;
}
#logo h1, #logo h2 {
font: normal 300%'century gothic', arial, sans-serif;
border-bottom: 0;
text-transform: none;
margin: 0 0 0 9px;
}
#logo_text h1, #logo_text h1 a, #logo_text h1 a:hover {
padding: 22px 0 0 0;
color: #FFF;
letter-spacing: 0.1em;
text-decoration: none;
}
#logo_text h1 a .logo_colour {
color: #E4EC04;
}
#logo_text a:hover .logo_colour {
color: #FFF;
}
#logo_text h2 {
font-size: 120%;
padding: 4px 0 0 0;
color: #999;
}
#menubar {
width: 880px;
height: 46px;
}
ul#menu {
float: right;
margin: 0;
}
ul#menu li {
float: left;
padding: 0 0 0 9px;
list-style: none;
margin: 1px 2px 0 0;
background: #5A5A5A url(tab.png) no-repeat 0 0;
}
ul#menu li a {
font: normal 100%'trebuchet ms', sans-serif;
display: block;
float: left;
height: 20px;
padding: 6px 35px 5px 28px;
text-align: center;
color: #FFF;
text-decoration: none;
background: #5A5A5A url(tab.png) no-repeat 100% 0;
}
ul#menu li.selected a {
height: 20px;
padding: 6px 35px 5px 28px;
}
ul#menu li.selected {
margin: 1px 2px 0 0;
background: #00C6F0 url(tab_selected.png) no-repeat 0 0;
}
ul#menu li.selected a, ul#menu li.selected a:hover {
background: #00C6F0 url(tab_selected.png) no-repeat 100% 0;
color: #FFF;
}
ul#menu li a:hover {
color: #E4EC04;
}
#site_content {
width: 880px;
overflow: hidden;
margin: 20px auto 0 auto;
padding: 0 0 10px 0;
}
#sidebar_container {
float: right;
width: 224px;
}
.sidebar_top {
width: 222px;
height: 14px;
background: transparent url(side_top.png) no-repeat;
}
.sidebar_base {
width: 222px;
height: 14px;
background: url(side_base.png) no-repeat;
}
.sidebar {
float: right;
width: 222px;
padding: 0;
margin: 0 0 16px 0;
}
.sidebar_item {
background: url(side_back.png) repeat-y;
padding: 0 15px;
width: 192px;
}
.sidebar li a.selected {
color: #444;
}
.sidebar ul {
margin: 0;
}
#content {
text-align: left;
width: 620px;
padding: 0 0 0 5px;
float: left;
}
#content ul {
margin: 2px 0 22px 0px;
}
#content ul li, .sidebar ul li {
list-style-type: none;
background: url(bullet.png) no-repeat;
margin: 0 0 0 0;
padding: 0 0 4px 25px;
line-height: 1.5em;
}
#footer {
width: 100%;
font-family:'trebuchet ms', sans-serif;
font-size: 100%;
height: 80px;
padding: 28px 0 5px 0;
text-align: center;
background: #3B3939 url(footer.png) repeat-x;
color: #A8AA94;
}
#footer p {
line-height: 1.7em;
padding: 0 0 10px 0;
}
#footer a {
color: #A8AA94;
text-decoration: none;
}
#footer a:hover {
color: #FFF;
text-decoration: none;
}
.search {
color: #5D5D5D;
border: 1px solid #BBB;
width: 134px;
padding: 4px;
font: 100% arial, sans-serif;
}
.form_settings {
margin: 15px 0 0 0;
}
.form_settings p {
padding: 0 0 4px 0;
}
.form_settings span {
float: left;
width: 200px;
text-align: left;
}
.form_settings input {
padding: 5px;
width: 225px;
font: 100% arial;
border: 1px solid #E5E5DB;
background: #FFF;
color: #47433F;
}
.form_settings .submit:hover {
background: #00CAEE;
color: #E4EC04;
}
.form_settings .submit {
font: 100% arial;
border: 0;
width: 99px;
margin: 0 0 0 212px;
height: 33px;
padding: 2px 0 3px 0;
cursor: pointer;
background: #3B3B3B;
color: #FFF;
-o-transition:color .2s ease-out, background .5s ease-in;
-ms-transition:color .2s ease-out, background .5s ease-in;
-moz-transition:color .2s ease-out, background .5s ease-in;
-webkit-transition:color .2s ease-out, background .5s ease-in;
/* ...and now for the proper property */
transition:color .2s ease-out, background .5s ease-in;
}
.important-btn:hover {
background: #8C1717;
}
.important-btn {
font: 100% arial;
border: 0;
width: 200px;
margin: 5px 0px 5px 215px;
height: 25px;
padding: 2px 0 3px 0;
cursor: pointer;
background: #52514F;
color: #FFF;
-o-transition:color .2s ease-out, background .5s ease-in;
-ms-transition:color .2s ease-out, background .5s ease-in;
-moz-transition:color .2s ease-out, background .5s ease-in;
-webkit-transition:color .2s ease-out, background .5s ease-in;
/* ...and now for the proper property */
transition:color .2s ease-out, background .5s ease-in;
}
.regularbutton:hover {
background: #00CAEE;
color: #E4EC04;
}
.regularbutton {
font: 100% arial;
border: 0;
width: 200px;
margin: 0px 0px 0px 212px;
height: 25px;
padding: 2px 0 3px 0;
cursor: pointer;
background: #52514F;
color: #FFF;
-o-transition:color .2s ease-out, background .5s ease-in;
-ms-transition:color .2s ease-out, background .5s ease-in;
-moz-transition:color .2s ease-out, background .5s ease-in;
-webkit-transition:color .2s ease-out, background .5s ease-in;
/* ...and now for the proper property */
transition:color .2s ease-out, background .5s ease-in;
}
.whattoput:hover {
background: #00CAEE;
color: #E4EC04;
}
.whattoput {
font: 100% arial;
border: 0;
width: 100px;
margin: 0px 0px 0px 5px;
height: 25px;
padding: 0px 0 0px 0px;
cursor: pointer;
background: #52514F;
color: #FFF;
-o-transition:color .2s ease-out, background .5s ease-in;
-ms-transition:color .2s ease-out, background .5s ease-in;
-moz-transition:color .2s ease-out, background .5s ease-in;
-webkit-transition:color .2s ease-out, background .5s ease-in;
/* ...and now for the proper property */
transition:color .2s ease-out, background .5s ease-in;
}
.form_settings option {
font: 100% arial;
border: 0;
width: 10px;
margin: 5px 0 0 212px;
height: 33px;
padding: 2px 0 3px 0;
cursor: pointer;
background: #52514F;
color: #FFF;
}
.form_settings select {
font: 100% arial;
margin: 0px 0px 0px 5px;
width: 140px;
}
.form_settings textarea {
font: 100% arial;
width: 225px;
}
.form_settings .checkbox {
margin: 4px 0;
padding: 0;
width: 14px;
border: 0;
background: none;
}
.separator {
width: 100%;
height: 0;
border-top: 1px solid #D9D5CF;
border-bottom: 1px solid #FFF;
margin: 0 0 20px 0;
}
table {
margin: 10px 0 30px 0;
}
table tr th, table tr td {
background: #3B3B3B;
color: #FFF;
padding: 7px 4px;
text-align: left;
}
table tr td {
background: #E5E5DB;
color: #47433F;
border-top: 1px solid #FFF;
}
.hideother {
display: none;
}
#banner {
width: 100%;
background: orange;
height: 25px;
position: fixed;
top: 0;
display: none;
left: 0;
text-align: center;
line-height: 25px;
font-weight: bold;
color:#4F0002;
}
.form_settings option {
...
width: 10px;
...
}
is your culprit.
Chrome and IE don't honor most option styling (dag blast them), so it renders as the browser intends it to, but Firefox (it would seem) lets you mess it up all you want. And you have definitely messed it up with the width: 10px;. I would just recommend losing all of your option styles, but that's just my opinion.
I have a modal dialog that I'd like to close by clicking outside of it, pressing escape, or pressing the closing X in the corner.
I already have the pressing X in the corner part working. Just need the others.
I'm using Bootstrap 2.3.2, and jQuery 1.9.1
My JsFiddle is at:
http://jsfiddle.net/HUD8V/
Since I have to post some code with a fiddle (makes no sense, the fiddle has the code...)
CSS is:
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.closeModal {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.closeModal:hover {background:#00d9ff;}