Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I am trying to build a surface with Famo.us that is shaped like a kite.
A kite is a quadrilateral whose four sides can be grouped into two pairs of equal-length sides that are adjacent to each other. I am looking to transform the rectangle of the shape of a surface into a kite shape. I can create parallelogram by skewX or skewY. A parallelogram also has two pairs of equal-length sides, but they are opposite each other rather than adjacent(like in a kite).
The surface is a div, and I want to change the shape from a surface from a square/rectangle into a kite. I trying to make a hex grid. I am surprised that a highly mathematical JavaScript Famo.us web platform does not have a Triangular surface. I like a Famo.us only solution, it possible.
Your question is valid, but there is a caveat. A surface (div) of this shape requires us to create a two part style using after. Your use case may limit the use of this solution.
Without Famo.us: Using a div and css you can create a kite shape.
<div class="kite-css"></div>
.kite-css {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 50px solid red;
top: -40px;
position: relative;
}
.kite-css:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 90px solid red;
z-index: -1
}
Using Famo.us: Use some modified css from above and adding the class to the Famo.us surface. I added some background-color of the Surface to highlight the surface area that will be used for rendering size. I added some text in the content of the surface to show how text is affected by this method.
Issues:
The true center of the surface is the center of the shaded area in the image above. This is the element created by Famo.us and the lower piece is created by the style using after.
The usable content starts at the center of the top piece, because the border squeezes out all sides of the square.
.kite-shape {
border: 50px solid transparent;
border-bottom: 50px solid red;
top: -40px;
}
.kite-shape:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 90px solid red;
z-index: -1
}
var kite = new Surface({
size: [100, 100],
classes: ['kite-shape','double-sided'],
content: 'Famo.us Kite',
properties: {
backgroundColor: 'rgba(0,0,0,0.05)',
fontSize: '0.9em'
}
});
Considerations:
You could put the kite shape inside your surface with your text content prior (example snippet #2)
You could also use the ImageSurface and make a kite image to be used by the surface.
Example code snippet below with a rotation effect, so you can play with it.
define('main', function (require, exports, module) {
var Engine = require('famous/core/Engine');
var OptionsManager = require('famous/core/OptionsManager');
var Surface = require('famous/core/Surface');
var Modifier = require('famous/core/Modifier');
var RenderNode = require('famous/core/RenderNode');
var Transform = require('famous/core/Transform');
var TransitionableTransform = require('famous/transitions/TransitionableTransform');
var mainContext = Engine.createContext();
mainContext.setPerspective(1000);
var kite = new Surface({
classes: ['kite-shape','double-sided'],
content: 'Famo.us Kite',
properties: {
backgroundColor: 'rgba(0,0,0,0.05)',
fontSize: '0.9em'
}
});
var tt = new TransitionableTransform();
mainContext.add(new Modifier({
size: [100, 100],
origin:[0.5, 0.5],
align:[0.5, 0.5],
transform: rotate
})).add(kite);
var initialTime = Date.now();
function rotate() {
var radians = 0.001 * (Date.now() - initialTime);
tt.set(Transform.rotateAxis([0,1,0.25], Math.PI * radians));
return tt.get();
}
});
require(['main']);
<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />
<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>
<div class="kite-css">CSS</div>
<style>
.double-sided {
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
.kite-css {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 50px solid red;
top: -40px;
position: relative;
}
.kite-css:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 90px solid red;
z-index: -1
}
.kite-shape {
border: 50px solid transparent;
border-bottom: 50px solid red;
top: -40px;
}
.kite-shape:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 90px solid red;
z-index: -1
}
</style>
Example code snippet #2.
Has the kite shape inside a surface.
define('main', function (require, exports, module) {
var Engine = require('famous/core/Engine');
var OptionsManager = require('famous/core/OptionsManager');
var Surface = require('famous/core/Surface');
var Modifier = require('famous/core/Modifier');
var RenderNode = require('famous/core/RenderNode');
var Transform = require('famous/core/Transform');
var TransitionableTransform = require('famous/transitions/TransitionableTransform');
var mainContext = Engine.createContext();
mainContext.setPerspective(1000);
var kite = new Surface({
size: [100, 300],
classes: ['double-sided'],
content: 'Famous Kite<div class="kite-css"></div>',
properties: {
backgroundColor: 'rgba(0,0,0,0.05)',
fontSize: '0.9em',
lineHeight: '12px'
}
});
var tt = new TransitionableTransform();
mainContext.add(new Modifier({
size: [100, 100],
origin:[0.5, 0.5],
align:[0.5, 0.5],
transform: rotate
})).add(kite);
var initialTime = Date.now();
function rotate() {
var radians = 0.001 * (Date.now() - initialTime);
tt.set(Transform.rotateAxis([0,1,0.25], Math.PI * radians));
return tt.get();
}
});
require(['main']);
<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />
<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>
<div class="kite-css">CSS</div>
<style>
.double-sided {
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
.kite-css {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 50px solid red;
top: -40px;
position: relative;
}
.kite-css:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 90px solid red;
z-index: -1
}
.kite-shape {
border: 50px solid transparent;
border-bottom: 50px solid red;
top: -40px;
}
.kite-shape:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 90px solid red;
z-index: -1
}
</style>
Related
I have created a site that has a dynamically built menu, which draws out tabs, according to some arrays in the backend. Selecting a tab fetches the whole page again, with different css classes applied, depending on the selected tab.
Basically, I am using style="position: absolute; left: xxxxpx" where the xxxx is calucated in the backend.
I want to change the site so that the gui is more independent of the backend.
I am unsure how to proceed with changing this so that all the layout calculations are made by css. I was thinking about doing it with css variables, and keeping the essential same code, but I am unsure how to determine which node and therefore how far it should be offset.
My Current Code
1st tab selected
<div class="topTabSelected tab-admin noprint" style="left: 204px;">Administration</div>
<div class="topTab tab-design noprint" style="left: 336px;"> Design ManagerProject Manager</div>
<div class="topTab tab-project noprint" style="left: 468px;">Project Manager</div>
3rd tab selected
<div class="topTab tab-admin noprint" style="left: 204px;">Administration</div>
<div class="topTab tab-design noprint" style="left: 336px;"> Design ManagerProject Manager</div>
<div class="topTabSelected tab-project noprint" style="left: 468px;">Project Manager</div>
CSS
.tab-admin{
background-color: var(--admin-tab-bg);
}
.tab-design{
background-color: var(--design-tab-bg);
}
.tab-project{
background-color: var(--project-tab-bg);
}
.topTabSelected {
position: absolute;
top: 31px;
z-index: 8;
color: white;
font-weight: bold;
border-left: 1px solid black;
border-top: 1px solid black;
border-right: 1px solid black;
border-bottom: transparent;
padding: 3px;
border-radius: 5px 5px 0 0;
width: 120px;
height: 17px;
text-align: center;
}
.topTab {
position: absolute;
top: 31px;
z-index: 2;
color: white;
font-weight: bold;
border-left: 1px solid black;
border-top: 1px solid black;
border-right: 1px solid black;
padding: 3px;
border-radius: 5px 5px 0 0;
width: 120px;
text-align: center;
}
.topTab a {
text-decoration: none;
color: white;
}
.topTab a:hover {
text-decoration: underline;
color: white;
}
Backend code to calculate positions:
$tabwidth = 132;
$widthmodifier = 200;
for ($mainpageCounter = 1; $mainpageCounter <= count($mainpage); $mainpageCounter++) {
$topTabDivStart = "\n<div class=\"topTab " . ($p == $mainpageCounter ? "topTab-Selected " : "") . $mainpage[$mainpageCounter]["cssClass"] . " noprint\" style=\"left: " . $widthmodifier . "px;\">";
$topTabDivEnd = "</div>\n";
if ($p == $mainpageCounter) {
echo $topTabDivStart . $mainpage[$mainpageCounter]["title"] . $topTabDivEnd;
} else {
echo $topTabDivStart . "" . $mainpage[$mainpageCounter]["title"] . " $topTabDivEnd";
}
$widthmodifier += $tabwidth;
}
I'm making a chrome extension, and I need to make an infinite while loop in it, but whenever the while loop starts, the browser tab crashes. Is there any solution or other method I could use?
Why do you need an infinite loop? What are you trying to achieve?
There are other options like window.requestAnimationFrame(), setInterval or setTimeout that you could use inside a page to continuously do something without blocking it. For example:
const counterElement = document.getElementById('counter');
let counterValue = 0;
setInterval(() => {
counterElement.innerText = (++counterValue / 100).toFixed(2);
}, 10);
body {
margin: 48px 8px 8px;
font-family: monospace;
}
#counter {
position: fixed;
top: 0;
left: 0;
width: 100%;
line-height: 32px;
padding: 0 8px;
background: black;
color: white;
}
hr {
border: none;
border-top: 2px solid black;
margin: 32px 0;
}
button {
border: 2px solid black;
background: transparent;
padding: 8px 12px;
font-family: monospace;
cursor: pointer;
outline: none;
}
button:hover {
background: yellow;
}
button:active {
background: black;
color: white;
}
button:focus {
border: 3px solid black;
padding: 7px 11px;
}
<div id="counter">0</div>
Click around the page. See how everything still works?
<hr />
<button>BUTTON</button>
<button>BUTTON</button>
You could also consider a Web Worker depending on your needs.
I've installed the express-minify middleware but for some reason it seems to cause an error whilst loading the attached css file.
I have tried validating the CSS with an online service and it doesn't give me any error.
I have tried to debug by removing all elements leaving one at the time and when I hit .mainmenu tr td:hover:not(.mainmenu_item_selected) it fails.
So removing everything from .mainmenu tr td:hover:not(.mainmenu_item_selected) to the end of the file will make it work (Obviously without all the other required styles).
I have even tried to recreate the file and also name it differently without any success.
The express logs are showing me: GET /stylesheets/gctl.css 200 4.954 ms - - meaning that the file should be served correctly.
Its a standard installation as per npm website:
var minify = require('express-minify');
app.use(minify());
File (saved as gctl.css)
In main page (Using PUG): link(rel='stylesheet' href='/stylesheets/gctl.css')
CSS file:
html, body, * {
font-family: 'Raleway', sans-serif;
margin: 0;
}
.centered {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
.loginform {
text-align:center;
vertical-align:middle;
width: 30%;
height: 50%;
}
.closenewitem {
cursor: pointer;
}
/* Tooltip overide settings */
div.tooltip-inner {
max-width: 500px;
}
/* Remove outlines such as in chrome */
input:focus {
outline: 0;
}
/* all input text align center*/
input, textarea, label {
text-align: center;
cursor: pointer;
font-weight: 400;
}
/* Labels for help add help class to them */
label.help:hover {
color: red;
}
/* Logo CSS */
.logo {
position: absolute;
cursor: pointer;
top: 4px;
height: 40px;
}
/* menu css */
.mainmenu {
border-right-width: 1px;
border-right-style: solid;
border-right-color: lightgray;
margin-left: -15px;
height: 100%;
width: 100%;
}
.mainmenu tr td {
padding: 10px;
}
.mainmenu tr td:hover:not(.mainmenu_item_selected) {
border-right-color: red;
border-right-style: solid;
border-right-width: 3px;
color: black;
cursor: pointer;
background-color: #f0f0f0; /*#f9eafc*/
}
/* Selected menu item */
.mainmenu_item_selected {
border-right-color: black;
border-right-style: solid;
border-right-width: 3px;
background-color: lightgray; /*#f7faff*/
font-weight: 700;
color: black;
}
.mainmenu tr td span {
padding-left: 2px;
}
/* Footer div for additions to DB*/
.footer {
overflow: scroll;
position: absolute;
bottom: 0px;
height: auto;
min-height: 50%;
padding-bottom: 20px;
background-color: #f6f6f6;
border-top-color: lightgray;
border-top-style: solid;
border-top-width: 1px;
width: 100%;
}
.fixed-button {
position: absolute;
top: 4px;
right: 4px;
}
/* Error handling CSS */
.customerror {
border-color: red;
border-width: 2px;
background-color: #ffcccf;
font-weight: bold;
}
/* Shadow only for desktop icons panel as otherwise it would appear everywhere and it's annoying! */
.dsk-panel:hover {
-webkit-box-shadow: -1px 5px 15px 0px lightgray;
-moz-box-shadow: -1px 5-webkitpx 15px 0px lightgray;
box-shadow: -1px 5px 15px 0px lightgray;
}
.desktop-icon {
width: 60px;
opacity: 0.6;
}
I'm stuck and have no clue on what is causing the problem!
If you're sure that the default behavior breaks the Bootstrap layout and there is no issue posted about it yet then you should post an issue on GitHub where this project tracks things like that.
But "breaks layout" doesn't say anything really. Does it change margins? Does it remove borders? What exactly does it break and how? So you should prepare a minimal set of CSS that this module breaks in a predictable manner instead of saying vague claims like that if you want your issue to be taken seriously.
It's entirely possible that you found a bug in this module but it's really hard to tell after an overly general claims like this.
I have an OUTER div with two inner divs:
one of them is VERTICAL SIDEBAR whose content is fairly short
second one is div with MAIN PAGE whose content varies
They are both set to float: left, so they are next to each other.
I already learned that when setting height or min-height in percentage, all the parents need to have their height specified also.
I would like them both to be stretched to the end of the page. Havent managed to do that, problems begin when MAIN PAGE div is longer than monitor height( so there needs to be scrollbar), then I usually end with that nasty scrollbar inside MAIN PAGE div or I end with the SIDEBAR div being too short.
ok you should set the Outer divs css like so
.outer{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow:auto;
}
This will set the outer div to completely fill the window, with a side bar to scroll the length of the rest of the page. You would only have one main side scrollbar.
Now if you want the sidebar to just fill the page. set its css like so:
.sideBar{
position:absolute //can be relative if necesary.
top:0;
bottom:0;
overflow:none;
}
Now this sets the sidebar to the exact height of the outer div. so it will span the entire page and the overflow is set to none to ensure no scrollbar.
Now the outer div's and sidebar div's height should be dictated by the main div, and you should only have one clean scroll bar.
You could do something like this:
jsFiddle
Setting display: table-cell on both div's inside the outer div with display: table-row will ensure they are always the same height, you'll have to set display: table on body for this to work, or you could just set it directly on the outer div instead of table-row. That will work just fine. This approach should work on anything better than IE7.
CSS:
html {
position: absolute;
bottom: 0px;
top:0px;
left: 0px;
right: 0px;
overflow: scroll-x;
}
body {
height: 100%;
padding: 0px;
margin: 0px;
display: table;
}
.outer {
display: table-row;
height: 100%;
width: 100%;
}
.sidebar, .mainpage {
display: table-cell;
height: 100%;
}
.sidebar {
width: 200px;
background-color: #EFEFEF;
}
HTML
<div class="outer">
<div class="sidebar">sidebar</div>
<div class="mainpage">mainpage</div>
</div>
After seeing your site, this is the fix:
.Page {
width: 970px;
min-height: 100%;
width: 100%;
display: table;
}
.Sidebar {
width: 257px;
background: url(img/sidebar-bg.png) repeat-y;
margin-left: 23px;
background: white;
display: table-cell;
vertical-align: top;
}
.Sidebar-Nav {
padding-left: 15px;
}
.Content {
background: url(img/content-bg.png) repeat;
margin-left: 10px;
width: 680px;
float: left;
background: white;
display: table-cell;
padding: 10px;
}
EDIT: I forgot the .Page styles, I added it.
EDIT: Also, if you want to center it, then use this:
html, body {
height: 100%;
min-height: 100%;
padding: 0px;
margin: 0px;
}
body {
padding: 0px;
margin: 0px;
line-height: 21px;
background: url(img/bg-page-01.jpg) no-repeat;
background-position: 50% 0%;
}
.Page {
height: 100%;
display: table;
margin: 0 auto;
}
.Sidebar {
width: 257px;
height: 100%;
background: url(img/sidebar-bg.png) repeat-y;
background: white;
display: table-cell;
vertical-align: top;
}
.Sidebar-Nav {
padding-left: 15px;
}
.Content {
height: 100%;
background: url(img/content-bg.png) repeat;
margin-left: 10px;
width: 680px;
float: left;
background: white;
display: table-cell;
padding: 10px;
}
If your talking about height issues here, then use this:
html, body {
height: 100%;
min-height: 100% /* for firefox */
}
#main, #sidebar {
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-khtml-box-sizing: border-box;
box-sizing: border-box; /* eliminates increased height due to padding & child margins */
}
#sidebar { background: blue; width: 200px; float:left; margin: 0; }
#main { background: green; width: 960px; margin: 0 0 0 200px; }
edit: fiddle: http://jsfiddle.net/jTwqe/
I'm not really sure what your issue is, but is an alternate solution.
.outer { display: table; }
.sidebar, .main { display: table-cell; padding: 10px; }
.sidebar { background: green; }
.main { background: blue; }
Fiddle: http://jsfiddle.net/Q5CmR/
I seem to have this problem a lot when i'm writing. I have two elements on the same line. I need them both to have margins and thus cannot set their positions to absolute. if i don't set the position of the first element, it appears fine. However, the second element will appear below the first element. This is bad; I would like them to appear on the same line. In other words I would like to set both of the elements to position: absolute; top: 0; but then i can't use margin, which i need.
HTML:
#userQuestion{
//border: 1px solid yellow;
width: 400px;
position: relative;
top: 0px;
left: 40px;
line-height: 1.28;
display: inline-block;
}
.container{
padding: 0;
margin 0;
border-top: 1px solid #ccc;
//border: 1px solid blue;
margin-top: 30px;
width: 480px;
}
HTML:
<div id='userQuestion'></div> //this is fine
<div class='container'></div> //this appears underneath userQuestion. I would like them to be on the same line.
Try the following :
.container {
border-top: 1px solid #CCCCCC;
display: inline-block;
margin-top: 30px;
padding: 0;
width: 480px;
}