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
Related
I have two divs, which I aligned side by side, inside a container. I want to make both of them height 100%. I do that and it works fine, but after i change the left div's border or padding it seems to alter the height so it's larger than the right div. Is there any idea how to fix this problem?
.container {
height: 200px;
width: 100px;
}
.one {
height: 100%;
width: 100px;
background-color: green;
float: left;
}
.two {
height: 100%;
width: 100px;
background-color: red;
float: right;
}
Thanks in advance.
Flex is a good solution for what you want to achieve
.container {
display: flex;
height: 200px;
width: 100px;
}
.one {
flex: 1;
min-height: 100vh;
width: 100px;
background-color: green;
float: left;
}
.two {
flex: 1;
min-height: 100vh;
width: 100px;
background-color: red;
float: right;
}
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; }
Here is the Fiddle Link
.homeFirstSection {
float: left;
width: 100%;
height: 500px;
position: relative;
}
.home_left_bar {
float: left;
background: #f67777;
width: 4%;
height: 100%;
z-index: 5;
position: fixed;
}
How I can set the height of fixed part to height of its wrap?
Found a very simple solution only setting the css height to inherit.Here is the Fiddle and Code
.homeFirstSection {
float: left;
width: 100%;
height: 200px;
position: relative;
}
.home_left_bar {
float: left;
background: #f67777;
width: 4%;
height: inherit;
z-index: 5;
position: fixed;
}
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;
}
Does anybody please have an idea how to center-align the new (i.e. svg-based) Google Charts?
When I inspect the chart elements at my web page (please scroll down to the jQuery Tabs with several Google Charts at that page), I see that the chart itself is given an absolute position:
<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; ">
<svg width="800" height="500" style="overflow: hidden; ">
I'm not sure why Google does it, but it breaks my layout (other than that the charts work well for me):
My CSS-code:
h1,h2,h3,p,div,form {
text-align: center;
}
And I've also tried adding there:
margin-left: auto;
margin-right: auto;
My JavaScript-code:
var money_data;
var money_chart;
var money_options = {
width: 800,
height: 500,
legend: {position: 'top'},
areaOpacity: 1.0,
vAxis: {format: '# $'},
hAxis: {title: 'Номер недели', titleTextStyle: {color: 'blue'}, slantedText: true, viewWindow: {min: 39, max: 52}},
colors: ['CCFFCC', '66CC66', 'FF9999'],
animation: {duration: 1000, easing: 'out'}
};
function initMoney() {
$.ajax({
url: '/money-json.php',
data: { id: 'OK408547485023' },
dataType: 'json'
}).done(function(jsonData) {
money_data = new google.visualization.DataTable(jsonData);
money_chart = new google.visualization.SteppedAreaChart(document.getElementById('money_chart'));
google.visualization.events.addListener(money_chart, 'ready', function() {
$('#money_slider').slider('enable');
});
drawMoney();
});
}
function drawMoney() {
money_chart.draw(money_data, money_options);
}
If no CSS-based solution possible here, could I maybe use JavaScript to move the SVG to the same x-position as the money_slider while enabling the latter (please see the above code)?
You could set the size of money_chart DIV to the size of the graph ( I am guessing 800px ) and use auto margins like this.
#money_chart{
margin-left: auto;
margin-right: auto;
width: 800px;
}
You will need to make the chart side another div here is my code and it works for me
.chart_outside{
position:relative;
display: inline;
border: 2px solid #FFF;
width: 500px;
height: 460px;
background: #000;
margin: 5px 5px 5px 5px;
}
.chart_inside{
position:absolute;
right:0px
;top:0px;
}