How can I hide a modal if I clicked outside the modal?
Is it like this?
.show_player {
opacity: 0;
display: none;
position: absolute;
top: 0;
left: 0;
width: 530px;
visibility: visible;
}
.show_player:target {
opacity: 1;
display: block;
top: 0;
visibility: visible;
}
The click event is managed with JavaScript, not CSS.
This should be already the default behavior of your modal if you have the .modal-backdrop class on the outside element.
See this for more details : http://getbootstrap.com/javascript/#modals-usage
Alternatively you can manage this behavior with the backdrop option :
data-backdrop="true"
http://getbootstrap.com/javascript/#modals-options
If it's not working, check that you've correctly added the bootstrap javascript to your page :
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
or show your code
Related
I'm working on this (still ongoing) project and I'm noting some bad performance on low end device, of course at the moment there are a lot of animations going on at the same time (mostly created with green sock application platform) that i can removo with the matchmedia api with javascript, but i would keep the main animation of the main four section, this is the css:
.section{
position: absolute;
z-index: 0;
width: 50%;
height: 50%;
overflow: hidden;
transform: scale(1);
will-change: transform;
transition: all $speed;
transition-timing-function: cubic-bezier(.4,.2,0,1);
&:first-child {
top: 0;
left: 0;
background-image: $color-orange;
}
&:nth-child(2) {
top: 0;
left: 50%;
background-image: $color-blue;
}
&:nth-child(3) {
top: 50%;
left: 0;
background-image: $color-yellow;
}
&:nth-child(4) {
top: 50%;
left: 50%;
background-image:$color-violet;
}
&.is-expanded{
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 100%;
}
.has-expanded-item &:not(.is-expanded){
transform: scale(0);
opacity: 0;
}
}
basically, when a title is clicked, its container receives the is-expanded class, the body also receives the ha-expanded-item.
I'm using will change here and also i enabled the caching for the images (not yet for css and javascript), i enable the gzip compression on cloudfront but i still note some poor performance on mobile
Can someone give me an hint? maybe i have to use will change in a different way?
thanks
I have a blog subsite on a SharePoint Online (2013) site that by default has 3 web part zones: BlogNavigator, Left and Right (ordered from left to right).
The layout of the zones is frustrating, because the Left zone, which houses the actual content for the site, is relatively narrow considering the amount of available space to the right of the Right zone.
When I move all the Web Parts from the Right zone into BlogNavigator, the Left zone maintains its size, even though there is room to expand rightward.
I have tried manually declaring the Left zone ContainerWidth on the page file in SP Designer, I have tried applying a CSS file to the page to set the width, but nothing seems to work.
I have even removed all references to the Right zone on the page file, removing it completely, but the Left zone still remains its original width.
Is there some way I can alter this zone?
The out-of-the-box SharePoint page layouts use a peculiar grid framework to layout the different webpart zones.
This framework, which is defined in the layout css, uses display: table and display: table-cell to position the zones in the horizontal layout.
Table layouts usually result in odd sizing issues similar to how you have described.
In a project that I have worked on recently, I needed to fix the table layout to be more rigid so that there were no sizing issues. The site I was working on was a Publishing site so I am not sure if the classes are the same on you blog but here is the CSS I used to tweak the grid framework.
#DeltaPlaceHolderMain .ms-table {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
width: auto; }
#DeltaPlaceHolderMain .ms-table > div[class*="tableCol"] {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box; }
#DeltaPlaceHolderMain .tableCol-75,
#DeltaPlaceHolderMain .tableCol-33,
#DeltaPlaceHolderMain .tableCol-25,
#DeltaPlaceHolderMain .tableCol-50 {
width: 100%;
display: block;
min-width: 0; }
#contentBox {
padding-left: 15px;
padding-right: 15px; }
#titleAreaRow {
display: table; }
#contentRow {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
#sideNavBox {
margin-right: 5px; }
#contentBox {
min-width: 0;
margin: 0;
-webkit-box-flex: 1;
-ms-flex: 1 0;
flex: 1 0; }
#s4-titlerow,
#contentRow {
max-width: 1450px;
margin: 0 auto; }
#media screen and (min-width: 1020px) {
#DeltaPlaceHolderMain .tableCol-75 {
width: 66.666%; }
#DeltaPlaceHolderMain .tableCol-33 {
width: 33.333%;
}
#DeltaPlaceHolderMain .tableCol-25 {
width: 33.333%; }
#DeltaPlaceHolderMain .tableCol-50 {
width: 50%; } }
#media screen and (min-width: 1340px) {
#DeltaPlaceHolderMain .tableCol-75 {
width: 75%; }
#DeltaPlaceHolderMain .tableCol-25 {
width: 25%; } }
* {
outline: none; }
html {
-webkit-text-size-adjust: 100%; }
/* Sidenav */
#sideNavBox {
min-width: 180px;
max-width: 300px;
width: auto; }
I'm trying to get equal height columns on my responsive grid using the gallery mixin for SUSY. To do that, I set the container "display: table" and the column "display: table-cell". This works for me if I do not use the mixin, but fails as soon as I turn on the mixin. The mixin works if I have set the height in pixels, but not if I set the height using 100%;
I'm using:
susy (2.1.3) and
sass (~> 3.3)
This works with or without SUSY:
.ttable {
#include container;
padding: gutter();
#include clearfix;
.ttd {
#include gallery(3 of 12);
}
}
.ttable {
display: table;
height: 500px;
border: 1px solid #BF0D3E;;
}
.ttd {
display: table-cell;
background-color: #eee;
height: 500px;
}
This doesn't work with SUSY, but works with the mixin turned off:
.ttable {
display: table;
height: 100%;
border: 1px solid $fuschia;
}
.ttd {
display: table-cell;
background-color: #eee;
height: 100%;
}
The gallery mixin uses floats and margins to position elements, which won't work with table display. The first one works because the table styles are ignored, and the items are floated with a set height. If you want to use table styles to get equal-heights, you should leave out the gallery mixin, and use individual mixins/functions to set width/gutters instead (I think only inside and inside-static gutters will work with table display).
.ttd {
#include gutters;
display: table-cell;
background-color: #eee;
width: span(3 of 12);
}
I am using a stlyesheet to style my qt pushbutton when the mouse moves over it. However, the hover event only fires when I CLICK on the button, nothing happens when I hover my mouse over it
Trackbox { background: #FFFFFF;}
QPushButton {
position: fixed;
top: 2px;
right: 2px;
width: 20px;
height: 20px;
}
QPushButton:hover { background: #c0ffff}
Any help is appreciated. Thanks
This was a very simple fix. I needed to add a boarder, o px, for hover to work correctly. Thanks for all the help.
I am trying to position the bullets to the top right corner of the image but when I do and resize the screen the bullets move position.
Here is my code
.orbit-bullets
{
margin: 0 auto 30px auto;
overflow: hidden;
position: absolute;
float:right;
bottom:500px;
}
The bottom:500px can be dangerous depending on where you will put Orbit. What I'm saying there is that bullets might not be visible because they are way past the page. That could be the same reason why they are moving. You should have this instead:
.orbit-bullets {
position: absolute;
right: 25px;
top: 5px;
}
If you are not providing Foundation your own class for the orbit, it's best that you override only those three styles.
Maybe will help to anybody else having the same problem. This solution worked for me..
$(function(){
var bullets = $('ol.orbit-bullets');
bullets.insertBefore($(".orbit-container"));
});
And if you want to align to the right:
.orbit-bullets { text-align: right; }
Apply it on this element, and don't use float…
.orbit-bullets-container {
position: absolute;
right: 25px;
top: 5px;
}