. .I have a button at the middle of the page. . .on click a pop up dialog box appears but. . it is centered to the top of the page but not center to the current screen at the middle of the page.. each time i have to scroll up and close the dialog box.The function which i need is where ever in the page i click the button the pop up should appear center to the current screen.Please help me out guys
#blanket {background-color:#111;opacity: 0.65;position:absolute;z-index: 9001; /*above nine thousand*/top:0px;left:0px;width:100%;}
#popUpDiv {
position:absolute;
background-color:#eeeeee;
border:5px solid #68ad0e;
width:300px;
height:130px;
margin-top:-250px;
margin-left:-23px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
-moz-box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
-webkit-box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
z-index: 9002; /*above nine thousand*/}
And the html code is
<div id="blanket""></div>
<div id="popUpDiv">
<div align="right"><font color="green">close[X]</font> </div>
<div align="center">Please Enter Your Area Pincode</div>
</div>
<input type="button" value="pincode" onclick="popup('popUpDiv')";>
Is There any .js function that can be added to solve this problem
You need to set the top and left to 50%, then the margin to negative half height/width for the corresponding margin. Also, if you are looking to flow the element when you scroll, you need to use position: fixed; instead of using position: absolute;
#popUpDiv {
position:fixed;
top: 50%;
left: 50%;
background-color:#eeeeee;
border:5px solid #68ad0e;
width:300px;
height:130px;
margin-left:-150px;
margin-top:-65px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
-moz-box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
-webkit-box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
z-index: 9002; /*above nine thousand*/}
Just add margin-left:auto; and margin-right:auto; to #popupDiv.
Related
Stack:
Next.js
React-Bootstrap
styled-components
Problem
I've got this Bootstrap Button:
After clicking the button and minding my business it looks like this and I have no idea why, or how to change it. Any help is appreciated.
When overriding the :focus state with my default specs the button will look as its supposed to, but now the hover transition does not change.
Button Styling:
The button is styled like this:
import styled from 'styled-components';
import { Button } from 'react-bootstrap';
import { device } from '#/Components/styles';
export const LoginButton = styled(Button)`
border-radius: 5px;
border: solid 2px;
background: #e28215;
color: white;
border-color: white;
font-weight: 900;
font-size: 14px;
padding: 5px 10px;
${device.sm} {
font-size: 16px;
padding: 10px 20px;
}
${device.md} {
font-size: 18px;
padding: 10px 30px;
}
transition: all 0.2s ease-in-out;
-webkit-box-shadow: 0 24px 38px 3px #f7f7f72e, 0 9px 46px 8px #ffffff2b, 0 11px 15px -7px #000;
box-shadow: 0 24px 38px 3px #f7f7f72e, 0 9px 46px 8px #ffffff2b, 0 11px 15px -7px #000;
&:hover {
background: #ffffff;
color: #e28215;
border-color: #e28215;
-webkit-box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12),
0 11px 15px -7px rgba(0, 0, 0, 0.2);
box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12),
0 11px 15px -7px rgba(0, 0, 0, 0.2);
font-size: 16px;
padding: 5px 10px;
${device.sm} {
margin-top: -6px;
font-size: 18px;
padding: 12px 22px;
}
${device.md} {
margin-top: -6px;
font-size: 20px;
padding: 12px 34px;
}
}
`;
I've also put a bit of color customization into my bootstrap via theming like this in my custom.bootstrap.scss:
$theme-colors: (
'primary': #e28215,
'secondary': #83b8f3,
'tertiary': #1575e2,
...
);
Additional Info:
I've also looked into the states and when the button is in the stage state it seems like it is not active or anything:
I have iframe inside div element:
<div id="toolbarArea" class="toolbarArea" data-Date="11/2016">
<img id="toolbarTitle" width="15px" height="15px" src="../stdicons/derem/threePoints.png">
<iframe id="frTools" style="width:94%%;height:90%%;top:0px; position: absolute;" name="tbFrame" src="/container/serol/chegsorc.aspx?LOCALE=en" frameBorder="0"></iframe>
</div>
.toolbarArea{
background-color:#ffffff;
width:450px;
position:relative;
z-index:100;
height:30px;
border: solid 1px #333;
-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
}
I get scroll on the div,
how to make parent element to be the size of the child element to prevent the sccroll appereance.
You can prevent the scroll appearance with this:
width: auto;
height: auto;
overflow: hidden;
You need to use one of float: left/right or display: inline/inline-block for parent to be same width as it's content
#toolbarArea {
background-color: #aaa;
position: relative;
display: inline-block;
border: solid 1px #333;
-webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
}
#toolbarTitle {
width: 15px;
height: 15px;
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
#frTools {
width:94%;
height:90%;
}
<div id="toolbarArea" class="toolbarArea" data-Date="11/2016">
<img id="toolbarTitle" src="../stdicons/derem/threePoints.png">
<iframe id="frTools" name="tbFrame" src="/container/serol/chegsorc.aspx?LOCALE=en"></iframe>
</div>
Please note that your iFrame css is not valid, as 94%% must be 94% and so on.
Removing the width and height from the class toolbarArea should do the trick :
.toolbarArea {
background-color: #ffffff;
position: relative;
z-index: 100;
border: solid 1px #333;
-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
}
I have the current CSS box shadow code which I'm trying to imitate the effects of this website http://danielladraper.com/
-webkit-box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5);
box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5);
http://jsfiddle.net/GCwBT/
If you scroll down to the bottom of that site and hover over one of their products, you'll see that a box shadow appears over one of the products. However when I apply this to my div's, which are floated next to each other, only part of the the box shadow is visible, the other portion seems to get blocked.
I have no idea why this is happening, even though both of our divs appear to be floating left.
Anyone able to tell me what sort of js/css combo that site is using to achieve that CSS shadow effect?
Thanks
You have to consider that box-shadow only appears when the user hovers the box.
In your jsfiddle, all the boxes have shadow. You have to change it to:
.boxes {
width: 200px;
height: 200px;
float: left;
background-color: #ccc;
border-style: solid;
border-width: 1px;
border-color: #fff;
position: relative;
}
.boxes:hover {
-webkit-box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5);
box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5);
z-index: 999;
}
The z-index property brings the box to front. And it works with position:relative (or any others, you need position:relative)
Regards.
Your shadow must be blocking because you are not using z-index, along with this css you also need to specify the z-index when you hover.
.boxes:hover{
-webkit-box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5);
box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5);
z-index:10;
}
JSFIDDLE
P.S. For your case position:relative property is required to bring z-index in effect
I've made a navigation bar/menu for my website, and I have customised the colors in the CSS. It works fine on IE, Chrome and Firefox. But when it comes to Safari, the navigation bar shows in its default colors! If anyone can help me with this, I would appreciate it greatly.
Internet Explorer, Firefox, Chrome:
http://tinypic.com/view.php?pic=2gtygrc&s=5
Safari:
http://i39.tinypic.com/2eltloi.png
The HTML:
<li>Hjem</li>
<li>Portfolio</li>
<li>Om</li>
<li>Andet</li>
<li>Kontakt</li>
The CSS:
nav ul {
margin: 80px 0 20px 0;
padding: 0em;
float: left;
list-style: none;
background: #1A1A1A;
background: rgba(26,26,26,.2);
-moz-border-radius: .5em;
-webkit-border-radius: .5em;
border-radius: .5em;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;
-webkit-box-shadow: 0 1px 0 rgba(26,26,26,.2), 0 2px 1px rgba(0,0,0,.8) inset;
box-shadow: 0 1px 0 rgba(26,26,26,.2), 0 2px 1px rgba(0,0,0,.8) inset;
}
nav li {
float:left;
}
nav a {
float:left;
padding: .8em 1.5em;
text-decoration: none;
color: #ffffff;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
font: bold 1.1em/1 'trebuchet MS', Arial, Helvetica;
letter-spacing: 1px;
text-transform: uppercase;
border-width: 1px;
border-style: solid;
border-color: #d6d6d6 #d6d6d6 #d6d6d6 #d6d6d6;
background: #000000;
background: -moz-linear-gradient(#f5f5f5, #c1c1c1);
background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#c1c1c1));
background: -webkit-linear-gradient(#f5f5f5, #c1c1c1);
background: -o-linear-gradient(#f5f5f5, #c1c1c1);
background: -ms-linear-gradient(#f5f5f5, #c1c1c1);
background: linear-gradient(#484747, #2c2c2c);
}
nav a:hover, nav a:focus {
outline: 0;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.2);
background: #000000;
background: -moz-linear-gradient(#fac754, #f8ac00);
background: -webkit-gradient(linear, left top, left bottom, from(#fac754), to(#f8ac00));
background: -webkit-linear-gradient(#fac754, #f8ac00);
background: -o-linear-gradient(#f5f5f5, #f5f5f5);
background: -ms-linear-gradient(#f5f5f5, #ff0000);
background: linear-gradient(#e20000, #720000);
}
nav a:active {
-moz-box-shadow: 0 0 5px 5px rgba(0,0,0,.3) inset;
-webkit-box-shadow: 0 0 5px 5px rgba(0,0,0,.3) inset;
box-shadow: 0 0 5px 5px rgba(0,0,0,.3) inset;
}
nav li:first-child a {
border-left: 0;
-moz-border-radius: 4px 0 0 4px;
-webkit-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}
nav li:last-child a {
border-right: 0;
-moz-border-radius: 0 4px 4px 0;
-webkit-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}
}
nav ul {
margin: 80px 0 20px 0;
padding: 0em;
float: left;
list-style: none;
background: #1A1A1A;
background: rgba(26,26,26,.2);
-moz-border-radius: .5em;
-webkit-border-radius: .5em;
border-radius: .5em;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;
-webkit-box-shadow: 0 1px 0 rgba(26,26,26,.2), 0 2px 1px rgba(0,0,0,.8) inset;
box-shadow: 0 1px 0 rgba(26,26,26,.2), 0 2px 1px rgba(0,0,0,.8) inset;
}
You've got background twice once as hex the other as rgba, I think you only need one.
I think the title is misleading..as i couldnt think of an appropiate title.
I have 4 webpages which i want to demo..
[page1] [page2] [page3] [page4]
What I want is.. on top of all my pages.. have like 4 of these "buttons" (or something else)
When I am on page 1..page 1 button is bold and rest of the three are light..
When I am on page 2.. page 2 button is bold and so on..
And that each of them link to each other.
Any suggestions
<style>
button {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #123d54;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#afd9fa 0%,
#588fad);
background: -webkit-gradient(
linear, left top, left bottom,
from(#afd9fa),
to(#588fad));
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #003366;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,1);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,1);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.7),
0px 1px 0px rgba(255,255,255,0.3);
}
button.current {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#faafaf 0%,
#d11919);
background: -webkit-gradient(
linear, left top, left bottom,
from(#faafaf),
to(#d11919));
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #003366;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,1);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,1);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.7),
0px 1px 0px rgba(255,255,255,0.3);
}
</style>
<a href="/page1.html">
<button class="current">Demo Page 1</button>
</a>
<a href="/page1.html">
<button class="">Demo Page 2</button>
</a>
<a href="/page1.html">
<button class="">Demo Page 3</button>
</a>
<a href="/page1.html">
<button class="">Demo Page 4</button>
</a>
copy the above at the top of each page you have, for the first page, the button class should be current, for the second one the second button should be current and so forth.
The buttons were generated CSS3 buttons for illustration purposes