I created a modal dialog using CSS3, it works perfectly. But my site is responsive and the modal has to appear on several items inside an iframe (see here: http://labs.tageswoche.ch/interaktives/filmPortraits/ and here: http://master.tw.felix.sourcefabric.net/de/2014_11/international/652865/Drei-Jahre-B%C3%BCrgerkrieg-und-kein-Ende-in-Sicht.htm). In the iframe it doesnt work, but it works as expected on the real site.
The modal dialog is implemented on the first two pictures.
And here the code:
.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);
}
.close {
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;
}
.close:hover {
background: #00d9ff;
}
Here is a jsfiddle I used to implement the modal dialog:
http://jsfiddle.net/kumarmuthaliar/GG9Sa/1/
What i want to achieve is that the modal appears where the mouse click was (or more or less) so that also on mobile devices on the last images of the wall. Right now the modal appears on top. How can I implement this? I have no clue.
One thing I'd like to say about your design is, do not make separate modal window htmls for each person's modal, use one modal and change its innerhtml as you click on different people so you write less code, easier to maintain (if you add changes to your modal, you do one change in one location etc)
Also, the nature of modal windows is, it has a semi transparency background, with the modal window floating (not in css context) in the middle of it.
If you see this css bit below you'll understand better:
.modalDialog > div {
width: 600px;
position: relative;
margin: 5% auto;
padding: 5px 20px 13px 20px;
background: #fff;
}
The bit that says "margin: 5% auto;" causes this behaviour, what you need to do is change this to the same notation the padding is set and for each position of the image, give it certain values, ie margin: 10px 10px for a modal window that just shows at the top left corner of the window etc if you're not too fussy about exact mouse location.
If you are, than use "onclick" event of your outermost background div with width/height equal to the overall size of every person's image included, than use the event object to get mouse location values (read this link http://www.w3schools.com/jsref/event_clientx.asp)
I didn't write it for you so that you can do it yourself and learn, hope this helps!
Related
The backstory is that I want to create a Google Chrome extension, and when it is active it creates a button on top of a website the user is currently on. I have looked at iframe, but Google Chrome does not allow iframe to load an html file. Any new ideas or alternate ways shared would be greatly appreciated!
Add in index.html file google chrome extension.
After adding, It will automatically activate and appear on the webpage.
HTML
<div class="ext-toggle-btn">
<span>Extension name</span>
</div>
CSS
.ext-toggle-btn {
background-color: rgb(242, 245, 247);
box-shadow: rgba(118, 118, 118, 0.11) 2px 0px 5px 0px;
opacity: 1;
height: 94px;
line-height: 1;
position: absolute;
left:-5px;
text-align: center;
top: 50%;
margin-top: -50px;
width: 30px;
z-index: 1000000001;
cursor: pointer;
border-radius: 0px 4px 4px 0px;
border-width: 1px 1px 1px;
border-style: solid solid solid none;
border-color: rgb(224, 228, 231) rgb(224, 228, 231) rgb(224, 228, 231);
border-image: initial;
border-left: none;
padding: 6px;
transition: right 0.25s ease-in 0.2s, opacity 0.35s ease-in 0.2s;
}
.ext-toggle-btn > span {
display: inline-block;
font-size: 12px;
left: -1px;
line-height: 14px;
position: relative;
top: 10px;
transform: rotate(-180deg);
writing-mode: tb-rl;
}
Github example link: https://github.com/vaibhavbhuva/simple-youtube-google-extension.git
With appropriate extension permissions, you should be able to insert HTML and CSS into the active tab. You can insert a div in the beginning of the document and position it in CSS with position:fixed|absolute, and that should have the div overlaying the webpage content.
You essentially want to insert your modal HTML and CSS into the active tab.
Please let me know if I understood your question. I would have left this as a comment but I don't have those account permissions yet lol.
The idea is to enable those users that browse through on a website with their keyboard, using tab to get some really meaningful feedback of where their focus is currently at, beyond the default blue outline which usually is missed and or break visual design.
You can in fact create an ::after pseudo-element to appear only on focus state, and you can preview the snippet below that it works fantastic (probably not on old browsers).
The problem is, is it possible to hide the arrow so the user doesn't see it when he clicks on the button (which triggers :active state while click is pressed but also :focus from the moment it has been pressed), but still have it there if someone is using tab to browse through the website.
I cannot think of any way of using CSS for achieving this. Would it only be possible through JavaScript? Google is doing it, if you search for something and press tab and browse with your keyboard, you'll see where your focus is with an arrow on the left.
EDIT: I've seen the other question. And it's helpful for a JavaScript approach. But my question is about whether is possible to do it purely with CSS. For example I've just updated chaining :active:focus in the selector and the arrow now appears only once you release the click.
.row{
text-align: center;
margin: 1rem 0;
}
button{
position: relative;
text-shadow: 0 0 0;
box-shadow: 0 0 0;
background: #eee;
border: 0;
margin: 0;
padding: 1rem 2rem;
transition: all 0.2s ease;
}
button:hover{
background: dodgerblue;
color: #fff;
}
button:active{
top: 2px;
background: #eee;
color: #888;
}
button:focus{
outline: none;
}
button:focus::after{
content: "▲";
position: absolute;
bottom: -1.5rem;
font-size: 1.5rem;
font-weight: bold;
color: dodgerblue;
left: 0; right: 0;
margin: auto;
animation: pulsing 1s ease infinite;
}
button:active:focus::after{
content: "";
}
#keyframes pulsing{
0%,
100%{
bottom: -1.5rem;
}
50%{
bottom: -1.75rem;
}
}
<div class="row">
<button>First</button>
<button>Second</button>
<button>Third</button>
<button>Fourth</button>
</div>
I don't think there is a pure CSS solution for this problem. You can try to differ between mouse and keyboard with using the :hover pseudo class, but the result is only fine as long you are not leaving the focused button...
Edit: I added a body:hover workaround, maybe its sufficient for you?
.row{
text-align: center;
margin: 1rem 0;
}
button{
position: relative;
text-shadow: 0 0 0;
box-shadow: 0 0 0;
background: #eee;
border: 0;
margin: 0;
padding: 1rem 2rem;
transition: all 0.2s ease;
}
button:hover{
background: dodgerblue;
color: #fff;
}
button:active{
top: 2px;
background: #eee;
color: #888;
}
button:focus{
outline: none;
}
button:focus::after{
content: "▲";
position: absolute;
bottom: -1.5rem;
font-size: 1.5rem;
font-weight: bold;
color: dodgerblue;
left: 0; right: 0;
margin: auto;
animation: pulsing 1s ease infinite;
}
button:active:focus::after,
button:hover::after,
body:hover button::after{
content: "" !important;
}
body {
height: 100vh;
width: 100vw;
}
#keyframes pulsing{
0%,
100%{
bottom: -1.5rem;
}
50%{
bottom: -1.75rem;
}
}
<div class="row">
<button>First</button>
<button>Second</button>
<button>Third</button>
<button>Fourth</button>
</div>
I followed a tutorial online that helped me to replace browsers' default dropdown selection arrow with my own image. This has worked fine and you can see the example here.
.headerDropdown {
border-radius: 6px;
border: 2px solid #d4d4d4;
height: 34px;
}
.headerDropdown select {
height: 34px;
line-height: 34px;
padding-left: 10px;
padding-right: 5px;
margin-right: 20px;
font-size: 16px;
border: 0 !important; /*Removes border*/
-webkit-appearance: none; /*Removes default chrome and safari style*/
-moz-appearance: none; /*Removes default style Firefox*/
background: url("http://enyojs.com/enyo-2.5.1/lib/moonstone/images/caret-black-small-up-icon.png") right no-repeat;
width: 100%;
background-position: 98% 50%;
background-color: white;
text-indent: 0.01px;
text-overflow: "";
transition: 0.2s;
}
.headerDropdown select::-ms-expand {
display: none;
}
.headerDropdown select::-moz-focus-inner {
border: 0;
padding: 0;
}
.rotateCaret {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
It looks a bit stiff so I want to rotate my image when the dropdown is being opened. I found a lot of examples online dealing with the problem but they all solve it when it is actually a separate object (image, for instance, not a background attribute like in my case).
$("#mainnavigation").on("click", function() {
$(this).toggleClass("rotateCaret");
});
My question is - how can I rotate my dropdown selection image without affecting the entire dropdown? I need only the image next to the content, so to say.
Thanks in advance!
PS. Ignore my poor choice of image, I used it only as an example.
Add another element for the caret and rotate it separately. You can create a custom CSS animation and manipulate it as you wish.
https://jsfiddle.net/johnniebenson/xajzuxn4/
Functionality:
The Button should have the following effect when user hover above the button:
The Button should have a pop-up effect.
The Button border should have white shadow effect.
What has been done:
I have made use of
img:hover{
border-color: white;
}
to try to get the effect of the a border shadow of white.
Issue:
I can't really seem to get the said effect. However, I was able to get the effect such as this :
img:hover{
background-color: white;
}
when user hover above the button.
Hence, how am I able to create the css such that when user hover above the button, it will create the said effect.
Thanks.
img:hover {
border-color: white;
}
#Button1 {
position: absolute;
top: 310px;
left: 1550px;
outline: 0px;
z-index: 2;
border: 0;
background: transparent;
}
<button id="Button1" onclick="GreatLoveInSingapore()">
<img src="lib/img/GreatLoveButton.png">
</button>
If you want just to grow up your button you should use transfrom it allow you to scale your button
div{
margin: 50px 200px;
}
button{
border: 0;
padding: 0;
cursor: pointer
}
img {
height: 100px;
width: 100px;
display: block;
transition: 0.7s;
}
img:hover{
transform: scale(1.2);
}
<div>
<button class="container">
<img src="http://i.imgur.com/IMiabf0.jpg">
</button>
</div>
EDIT: another way if you have img not text
div.container {
text-align: center;
margin: 100px auto 0;
}
a {
display: inline-block;
background-color: #1984c3;
color: #fff;
font-size: 1.5em;
font-family: 'Calibri', sans-serif;
font-weight: lighter;
padding: 1em 2em;
text-decoration: none;
text-transform: uppercase;
-moz-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.1s;
}
a:hover{
transform: scale(1.2);
}
<div class="container">
Hi Im a Button
</div>
Here's a link that can help you.
http://ianlunn.github.io/Hover/
this page has a collection of over effects.
Example of padding....
button{
transition: padding 1s;
}
button:hover {
box-shadow: 0px 5px 5px #888888;
padding:15px;
}
<button><img src="#"/></button>
Transition is used to give the button an animated stretch and box-shadow for the pop-out effect. This is just a quick example mainly to focus on the padding.
I'm sure you can expand on this applying more styles to fit your needs.
Any questions please leave a comment below and I will get back to you as soon as possible.
I hope this helps. Happy coding!
My problem is base on this image:
As you see in the image above, some of my helper number(span) are getting cropped(big green arrow).
So I've tried using z-index: 100000; to bring all of them up, but the result is not as I expect.
Every link tag must have one helper number(span), but that number should be visible to every user. I'm using javascript to do that, but I'm having the problem with CSS.
My code block is:
.breadcumb li a {
font-size: 16px;
color: #00c0c5;
text-transform: uppercase;
}[data-talktochrome] {
position: relative !important;
}.bstalktochrome {
border-radius: 50%;
font-size: 9px;
padding: 2px;
font-weight: bold;
max-width: 40px;
position: absolute !important;
top: -10px !important;
left: 0px !important;
line-height: normal;
z-index: 100000;
background-color: rgba(255, 0, 0, 0.24);
}
<ul class="breadcumb">
<li><span class="bstalktochrome">153</span>Nhịp sống số</li>
<li><span class="bstalktochrome">154</span>Thị trường</li>
</ul>
Please help.
Update 1:
The testing page is: http://nhipsongso.tuoitre.vn/tin/thi-truong/20150924/iphone-6s-va-6s-plus-ve-vn-som-gia-cao/974668.html
But there are no helper number(span) yet
To show the helper number(span), you should open console panel of the browser and run these codes:
sohientai = 1
$("body").append("<style>.bstalktochrome_btn {display:none}.bstalktochrome {border-radius:50%; font-size: 9px;padding: 2px;font-weight: bold;max-width: 40px;position: absolute !important;top: -10px !important;left: 0px !important;line-height: normal;z-index:100000;background-color: rgba(255, 0, 0, 0.24);} [data-talktochrome]{position:relative !important;} </style>")
$("a").each(function(){
$(this).prepend('<span class="bstalktochrome">'+sohientai+'</span>')
$(this).attr("data-talktochrome", sohientai)
sohientai++
})
Change CSS like below
.breadcumb li
{ padding-top:15px
}
.breadcumb li a {
font-size: 16px;
color: #00c0c5;
text-transform: uppercase;
}[data-talktochrome] {
position: relative !important;
}.bstalktochrome {
border-radius: 50%;
font-size: 9px;
padding: 2px;
font-weight: bold;
max-width: 40px;
position: absolute !important;
top: -12px !important;
left: 0px !important;
line-height: normal;
z-index: 100000;
background-color: rgba(255, 0, 0, 0.24);
}
Its possibly not a case of layering (z-index) but a case of cropping. The parent container might have overflow:hidden on it, and therefore crops the part that you cant see. Its just a guess but worth taking a look at. If the page is public, sharing a link would be very helpful to determine the actual problem
EDIT: As expected, on you topmost issue the breadcrumb class has overflow:hidden, you can change it to:
.breadcumb {
display: inline-block;
}
And your right-column problem can be solved with the same method (remove overflow attribute, add display attribute):
.bl-ar {
display: inline-block;
line-height: 16px;
padding-bottom: 7px;
}