On my webpage, I have a footer which has a textarea box. When the user clicks in the textarea, I want the rest of the page to darken by 60%, kindof like they are in a modal. I am a noob when it comes to advanced css so I am unsure of the properties to apply.
I am using bootstrap 3, javascript and knockout. I know how to detect when the user is in the text area I just want to change the background so everything else is opaque.
A jsFiddle would be wonderful as well :)
We use a combination of CSS and JQuery JavaScript for that. You'd basically use some Overlay method first to overlay the whole page (e.g. See Technique #1 from the Link).
With the help of JavaScript, We attach to events of the forms to:
Show the Overlay
Make the required form elements, e.g. the first Div inside the form, appear above the Overlay ("z-index" CSS attribute)
CSS:
Overlay has Z-Index 10, so give the relevant element the Z-Index 11 to appear on top:
form > div { z-index: 11; }
this JQuery JavaScript can look like this:
$(document).on("focus", "textarea", function() {
$(".overlay").show();
});
Beware, this is not only a "background" topic, if you want to prevent users to do any interaction with the page, you need an overlay which actually blocks clicks. Also, in our case, we also had to prevent any links to be triggered which are below the overlay. Users were still able to go through the links using the TAB key on they keyboard to navigate to a button and click it using the Space key, so we also added JavaScript code to prevent that when in editing mode.
EDIT: a very basic Fiddle
Here is how I would do this - When the user clicks in the text area, set a class on body, and style the class.
with jQuery (you can use vanilla js too)
$('.my-textarea').on('focus', function() {
$('body').addClass('dark');
});
$('.my-textarea').on('blur', function() {
$('body').removeClass('dark');
});
body.dark {
background-color: #333;
opacity: 0.6;
}
A good solution is to make a modal appear behind the input and not just making the background darker, this can be accomplished with css alone
...
<style>
textarea:focus{
z-index: 901;
position: relative;
}
textarea ~ .textarea-modal{
position: fixed;
background-color: transparent;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 900;
pointer-events: none;
transition: background-color .5s ease;
}
textarea:focus ~ .textarea-modal{
pointer-events: auto;
background-color: rgba(0,0,0,0.3);
}
</style>
...
<div>
<textarea></textarea>
<div class="textarea-modal"></div>
</div>
...
feel free to change the selectors to target specific elements, however at the moment when you focus on the textarea a modal would appear below it with other elements behind.
Related
Is there any way to get rid of the border around the close (x) button on google maps info windows?
Screenshot.
I have tried everything I can find on stack overflow.
This doesn't work:
.gm-style .gm-style-iw + div {
display: none; /* <-- this will generally work on the fly. */
visibility: hidden; /* this 2 lines below are just for hard hiding. :) */
opacity: 0;}
Nor does this:
.gm-style-iw + div {display: none;}
Maybe replacing the image in the info window would be an alternate solution? Is there any way to do that?
In my case was the button focus, solved like this:
.gm-style-iw button:focus {
outline: 0;
}
Based on the Infowindow documentation:
The InfoWindow class does not offer customization.
I would suggest that you use the customized popup as this doesn't contain the close button in the creation of the popup.
function Popup(position, content) {
this.position = position;
content.classList.add('popup-bubble');
// This zero-height div is positioned at the bottom of the bubble.
var bubbleAnchor = document.createElement('div');
bubbleAnchor.classList.add('popup-bubble-anchor');
bubbleAnchor.appendChild(content);
// This zero-height div is positioned at the bottom of the tip.
this.containerDiv = document.createElement('div');
this.containerDiv.classList.add('popup-container');
this.containerDiv.appendChild(bubbleAnchor);
// Optionally stop clicks, etc., from bubbling up to the map.
google.maps.OverlayView.preventMapHitsAndGesturesFrom(this.containerDiv);
}
You may see the example here
Note: Please don't forget to add your API key in the sample.
Right now there looks to be quite a bit of padding around the x in the screenshot. I'd inspect the element and see if there are any styles from parent elements or related classes overriding changes you make on its border or outline. If not, have you tried the following selectors?
outline: none
border-radius: 0
Try this, in side of InfoWindow.
<div style="position: absolute; top: 0px; right: 0px; width: 20px; height: 20px; background-color: white; z-index: 2;"></div>
Before I say anything, I looked at about a dozen SO threads including this one which you'll see the code suggested in there in my JSBin as well: Why does this CSS transition event not fire when two classes are added?
The issue is that adding two classes back to back too fast results in no transition animation whatsoever.
I'm implementing this into a legacy JS custom right click menu and making it mobile friendly with just CSS by first applying the mobile styles with .mobile-menu then an animation class of .mobile-menu-show when they long press (since there's no right click mouse button).
The transitions don't work this way though. If I add .mobile-menu on page load it's fine, but I can't because I'm adding the mobile-menu class based on how the right click menu is triggered (long press == mobile styles, right click == normal styles)
Demo code: http://jsbin.com/maxuku/edit?html,css,output
==Edit==
Hopefully to clarify, I want the menu you see at the default to go hidden (translateY(100%)) then slide up from the bottom. If you use Slack, long press on a message. Or iPhone's had this same concept here where it would slide up:
please change css class as below
.context-menu {
position: fixed;
bottom: -100%;
left: 0;
right: 0;
z-index: 100;
-webkit-transition: all 0.25s; /* Safari */
transition: all 0.25s;
}
.mobile-menu {
background: #fff;
width: 100%;
box-sizing: border-box;
box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.mobile-menu-show {
bottom: 0;
}
You can refer to animation over here
https://plnkr.co/edit/t0EB5CiuwtbWHqWXvlvz?p=preview
I'm beginner and trying to display details of a card/tile from the sliding bottom of the page over click action. I already found one of the template with my requirements and trying to customize. I found few code samples on how can I do sliding effect from the bottom. I was able to findout solution but it works with hover action where as I am trying to do is as below.
Scenario:
As shown in the mockup screenshot >> Cards will be displayed in the home screen >> users clicks on one of the Card >> background should be transparent 50% and movie details should get displayed in sliding button panel >> PLAY NOW should be active
Like the left menu loading in the given template below - playdo template
one of the similar example I found is this but as I mentioned this is hover feature - Sliding bottom panel through HTML, CSS and JS
An other from the top sliding - http://hoveralls.design-way.ro/
Template in the screenshot that i am using is - https://github.com/tomclaus/playdo
Hi and welcome to the front-end world.
What you need to do is to create two different css classes that contain the things you want to change (in this case the top and the transparency). One for when your card/tile is "minimized" and one for when is "maximized".
.minimized{
background-color: rgba(255,255,255, 0.5);
top: 90%;
}
.maximized{
background-color: rgba(255,255,255, 1);
top: 75%;
}
and then apply a click event to your card/title using jQuery or Javascript and swap those classes to give the proper behavior.
$("#card").click(function(){
if($(this).hasClass('minimized')){
$(this).removeClass('minimized');
$(this).addClass('maximized');
}
else{
$(this).removeClass('maximized');
$(this).addClass('minimized');
}
});
Make sure that the CSS for your card/tile includes this:
-webkit-transition: all ease 1s;
That line will give a smooth transition when you swap the minimized and maximized classes.
Please check this jsfiddle to see the code in action.
ps. Since I'm using the "-webkit-" prefix for the transition this example only will work with webkit browsers (safari and chrome)
Ok I finally understood what you want to do with the mockup.
Well the idea is the same, and I'm sure it can be implemented in many other ways but I hope this one helps you to understand what is going on.
Pretty much you need two states (classes) for the actions you want to achieve.
A Minimized and Maximized for the div that holds the movie details.
#details{
z-index: 4;
position: absolute;
-webkit-transition: all ease 1s;
background-color: #2980b9;
color: white;
padding: 30px;
width: 100%;
height: 300px;
}
.minimized{
top: 100%;
}
.maximized{
top: 40%;
}
And other two for the "gray courtain" that sits on top of the cards when the details are show.
#courtain{
position:absolute;
background-color: rgba(100,100,100, 0.5);
width: 100%;
height: 100%;
}
.active{
z-index: 2;
}
.deactive{
z-index: -1;
}
All these must be controlled or toggled using Javascript with a click event for the Card.
function hideAndShow(){
var details = $('#details');
var courtain = $('#courtain');
if(details.hasClass('minimized')){
courtain.removeClass('deactive');
courtain.addClass('active');
details.removeClass('minimized');
details.addClass('maximized');
}
else{
courtain.removeClass('active');
courtain.addClass('deactive');
details.removeClass('maximized');
details.addClass('minimized');
}
}
It is important to check the "z-index" values on the states to place them correctly above the other, the one with the highest z-index value is the one that remains on top.
I've updated the JSFiddle, check it out and hopefully all this makes sence.
I am working on this site http://www.group---me.my/national/
Please remove --- in the url.
For certain deals, there is options, and when you click on the BuyNow button, a popup comes up. I would like to dim (darken) the background, while the popup is shown.
To do this, on my local test site, I added the following div class:
.overlay{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 333%;
background-color: black;
z-index: 20;
opacity: 0.8;
filter: alpha(opacity=80);
}
Then on the Buy Now button, I added
onclick="javascript:document.getElementById('fade').style.display='block';"
I also have this in the site
<div id="fade" class="overlay"></div>
But the problem is, the overlay always hides all the layers, including the popup, regardless how high I set the popup div's z-index.
Any help is much appreciated. Thanks.
Which browser? Which version. I am getting it right here. It should hide right?
And it is prominent. What is that you wanna do here?
If you doesn't specify some parent element to be relative positioned, your overlay div will be positioned relative to body so it can be above all other content.
Take this site for example where the main title: Working with Sessions and Cookies in PHP and MYSQL is with cufon.
http://blog.themeforest.net/tutorials/working-with-sessions-and-cookies-in-php-and-mysql/
I need a way with Javascript (placed in a bookmarklet) to get that title as user selected, like if you would do an inspect. So the operation would be that user highlights the text and hits a button. But selection doesn't happen, and there is no text in DOM for that, only some cufon injected canvas stuff.
How would be possible?
Cufon replaces the text with an image, but there's text hidden behind it for screen readers and accessibility. You'll see it if you inspect element, so it is in the DOM. You might want to try changing its CSS so that it's positioned above or below the cufon text, maybe with opacity set to 0.01, so that it's not visible but it is selectable.
I haven't tried this myself but it's the first thing I'd attempt in that situation :)
Something like:
cufon cufontext {
display: inline-block !important;
height: 16px;
overflow: visible;
text-indent: 0;
width: auto;
font-size: 16px;
opacity: 0.1;
position: relative;
top: -16px;
}