What's the cleanest way to make a resizable three-column layout? - javascript

Sorry if the title isn't descriptive, but I'm working on a web-based application in javascript using the HTML5 canvas. I want the page to adjust to the window size, but I also want the columns to be resizable - that is, you can drag the vertical lines to change their width. The thing is, the canvas width and height attributes must be in pixels (setting the CSS properties stretches the image instead of widening the drawing surface). I need to change the canvas attributes through javascript. I have trouble working with all of these constraints together.
I tried Making the templates-panel float left and the properties-panel float right, but it ends up below the canvas and above the status-bar everytime. I've also got the status bar set to position:fixed but it tends to go above the canvas a bit. How would you do it? Keep in mind I have to be able to resize the window or the panels individually (except the menubar and status bar which never change size).
EDIT: quick edit to add that I can't use JQuery / JQuery-UI. The application is quite computer-intensive, so I had to get rid of it. My compatibility target is IE9 anyway.

I did a quick google search on how to do this and found a stack overflow post with a similar answer, here is the fiddle that was provided, here is the javascript portion:
var i = 0;
$('#dragbar').mousedown(function(e){
e.preventDefault();
$('#mousestatus').html("mousedown" + i++);
$(document).mousemove(function(e){
$('#position').html(e.pageX +', '+ e.pageY);
$('#sidebar').css("width",e.pageX+2);
$('#main').css("left",e.pageX+2);
})
console.log("leaving mouseDown");
});
$(document).mouseup(function(e){
$('#clickevent').html('in another mouseUp event' + i++);
$(document).unbind('mousemove');
});
http://jsfiddle.net/gaby/Bek9L/
And here is the post:
Emulating frame-resize behavior with divs using jQuery without using jQuery UI?
The fiddle uses jQuery but not jQuery UI,
You will need to use percentages for width, look into responsive design.
http://learn.shayhowe.com/advanced-html-css/responsive-web-design/
I hope this helps

it's this are you looking for?
fiddle link
<style>
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 */
}
/* GRID OF THREE */
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 66.1%;
}
.span_1_of_3 {
width: 32.2%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.col { margin: 1% 0 1% 0%;}
.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}
</style>
<div class="section group">
<div class="col span_1_of_3" style="background-color:red;color:white;text-align:center;">
template
</div>
<div class="col span_1_of_3" style="background-color:blue;color:white;text-align:center;">
canvas
</div>
<div class="col span_1_of_3" style="background-color:gray;color:white;text-align:center;">
properties
</div>
</div>

Related

Horizontally and vertically centered iframe with aspect ratio 16:9 that uses as much screen estate as possible without being cropped anywhere

Requirements:
The HTML: The iframe HAS to be inside of a containing div. See code down below.
The CSS: The container should be able to have ANY valid width and height using the vw and vh viewport units. Se code down below.
Yes, the width and height HAS to be in vw and vh.
The static video preview image should NEVER be cropped.
The static video preview image should NOT have any black bars above and below (letterboxing).
The static video preview image should NOT have any black bars to the left or to the right (pillarboxing).
The static video preview image should use as much space estate as possible inside the div that contains it.
The static video preview image should ALWAYS keep its aspect ratio of 16:9.
Scrollbars should NEVER appear.
The static video preview image should be centered vertically as well as horizontally inside the div that contains it.
Responsive Web Design.
When resizing the browser or viewport all of the above requirements should be fulfilled.
HTML:
<div class="container">
<iframe></iframe>
</div>
CSS:
.container {
width:90vw;
height:50vh;
}
Same solution, but no extra markup for keeping the ratio.
JsFiddle with same comments totally not needed.
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<title>Fully Container Centred Iframe</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style>
.container {
display:table-cell; /* (specs: omitted table parts, the browser will insert mandatory elements in the dom tree) */
position:relative;
padding:; /* optional, margins ignored */
width:100vw; /* any value */
height:1vh; /* will expand by the :before element */
overflow:hidden; /* hide eventual black bars */
background:tan; /* bg-colors just for demo testing */
vertical-align:middle;
text-align:center;
}
.container:before {
display:block;
padding-top:56%; /* keeps the 16/9 ratio for the AP */
height:0;
background:red;
content:"\a0";
}
.container iframe {
position:absolute; /* to be ratio consistent */
top:-.5%;
left:-.5%; /* overflow eventual black bars */
border:0;
width:101%; /* grow some to avoid thinner black bars */
height:101%;
overflow:hidden; /* for html5 browsers the html attribute is depreciated */
background:gold;
}
</style>
</head><body>
<div class="container">
<iframe scrolling="no" src=""></iframe>
</div>
</body></html>
Using JavaScript, you can listen for the resize event, which fires whenever the browser's window changes shape. Then, with some simple algebra you can calculate the dimensions of the iframe based on the dimensions of the container. Here is a demo that shows all of the requirements.
"use strict";
var container = document.querySelector('.container');
var frame = container.querySelector('iframe');
function resizeVideo() {
frame.width = frame.height = 0;
var width = container.offsetWidth;
var height = container.offsetHeight;
if (height * (16 / 9) <= width) {
frame.height = height;
frame.width = height * (16 / 9);
} else {
frame.width = width;
frame.height = width * (9 / 16);
}
}
window.addEventListener('load', resizeVideo);
window.addEventListener('resize', resizeVideo);
.container {
width: 90vw;
height: 50vh;
display: table-cell;
text-align: center;
vertical-align: middle;
}
<div class="container">
<iframe src="https://www.youtube.com/embed/BKhZvubRYy8" frameborder="0" allowfullscreen></iframe>
</div>
if you want Responsive use
.container, iframe {
width:100%;
height:auto;
}
.container {
width:90vw;
height:50vh;
}
.container iframe {
width: 100%;
height: 100%;
}
Seems to work quite nicely in this fiddle https://jsfiddle.net/1q10L7hj/
why don't you just use the calc method to get the aspect ratio width you are wanting?
HTML
<div class="container">
<iframe src="" frameborder="0"></iframe>
</div>
SCSS
<style>
$width = 80vw;
.container {
width: $width;
height: calc(($width/16) * 9);
position: relative;
}
iframe {
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
-webkit-transform: translate(+50%, -50%);
transform: translate(+50%, -50%);
}
</style>
then you can change the width of it anywhere and apply whatever positioning you want on the container div and the iframe with follow suit
I think the table-cell display could solve this. Just apply it on the container so the iframe is the content
According to specs the browser will insert dummy elements where it needs to render the cell correctly and fully centre and to contain its content and if it need, grow with it.
The requirements: I think some of them is beyond the scope of your question, they will also depend on what is loaded in the iframe, out of control of this container document. My suggested code is simple, but I believe it meets all requirements possible for the iframe parent and still be crossbrowser friendly.
The forbidden black bars and the mandatory aspect ratio could still be at fault in the loaded document. If you can't control whats loaded, the last option might be the "srcdoc" and "seamless" attributes, but that would exclude e.g. all IE versions.
JsFiddle with some comments totally not needed. Hope the edit below solves the case.
Anyway, I had fun! Thanks! :)
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<title>Fully Container Centred Iframe</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style>
.container {
display:table-cell;
padding:;
width:100vw;
height:20vh;
background:tan;
vertical-align:middle;
text-align:center;
}
.container .ratio{
display:inline-block;
position:relative;
padding-bottom:56%;
width:100%;
height:0;
overflow:hidden;
vertical-align:middle;
}
.container iframe {
position:absolute;
top:-1%;
left:-1%;
border:0;
width:102%;
height:102%;
overflow:hidden;
vertical-align:middle;
}
</style>
</head><body>
<div class="container">
<div class="ratio">
<iframe scrolling="no" src=""></iframe>
</div>
</div>
</body></html>
I have gotten the result you wanted, I however had to add an extra div as the parent of the .container class. This JSFiddle should work for users on chrome (Windows desktop version) however when I tried to use the same fiddle on Edge and IE11 I found that it would create the undesired letter-box effect due to the image cover zooming too far out.
HTML
<div id="wrapper">
<div class="container">
<iframe scrolling="no" src="https://www.youtube.com/embed/YL9RetC0ook" frameborder="0" allowfullscreen>
</iframe>
</div>
</div>
CSS
body {
margin: 0;
}
#wrapper {
width: 90vw;
height: 50vh;
}
.container,iframe {
width: 100%;
height: 100%;
}
I am not sure if this works for Firefox, so perhaps if you have Firefox you can try it on my JSFiddle. However for Chrome (at the very least) this should be the solution you where looking for as stated by the requirements you listed.
I would recommend using a JavaScript window.resize listener to solve this kind of an issue. Cannot write code today cause I have a pretty tight schedule, but I'll try writing an algo:
On window resize, compute window width (wW) and window height (wH);
Determine container width (cW) as per wW (say cW = wW-10 to get almost all the width available - you can omit the -10 if you want);
Determine container height (cH) as per cW computed above: cH = cW * 9 / 16;
Now, if cH > wH (i.e. the container is not fitting into the screen vertically because it is too wide), we should revise cW as per available window height. In this case, cH = wH-10 (to get almost all the vertical space available - again, you can omit the -10 if you want) and then cW = wH * 16 / 9;
You should have a valid cW and cH now to make you container fit into the window without going out of the screen and you can apply it to the container.
To center the container to the screen, use position: absolute, left: 50%; top: 50%; in your CSS. When you update the cW and cH, also update margin-left: -(cW/2); margin-top: -(cH/2);
This is the concept - you can improvise as per your needs. I hope it helps.

Disable CSS transformation-based centering with Jquery depending on content height

For a website I'm designing directly with CSS and Foundation 5, I am centering all content vertically in the middle of the viewport when the content area is taller than the browser window.
I found an excellent pure CSS solution that works perfectly. I'm very happy with the current behavior when the content area is small enough to fit entirely within the viewport without a scroll fold. I fairly sure that I don't need or want any kind of vertical centering when the content is long enough for scrolling.
The problem is that when there is too much content to fit on the screen, the CSS crops off the header and makes it impossible to scroll up to see the top of the content.
The CSS I adapted from davidwalsh.name uses a transformation to raise the container by half its height after its top was placed 50% down from the top.
#non-framework-container {
height: 100%;
width: 100%;
}
#non-framework-wrapper {
height: auto;
width: auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
This is applied to these two nested containers around the Foundation classes.
<div id="non-framework-container">
<div id="non-framework-wrapper">
<header class="row">
[...]
</header>
[...]
</div>
</div>
I want to disable the CSS when the content (specifically #non-framework-container) is taller than the viewport. I was hoping it would be as simple as this bit of JQuery:
$(document).ready(function) {
if ( $("#non-framework-container").height() > $(window).height() ) {
$("#non-framework-wrapper").css("position":"static", "top":"0", "transform":"none");
}
});
Unfortunately, my script doesn't do anything, no matter the amount of content or the browser size (and regardless of whether I load it in the head tag or at the bottom of the body tag).
I love how the CSS transformation method works, so I'm reluctant to try a pure JavaScript solution.
Try this (not tested, cannot currently test where I am):
HTML:
<div id="non-framework-container">
<div id="non-framework-wrapper">
<header class="row">
<h1>Your mom makes the best pizza</h1>
</header>
</div>
</div>
CSS:
#non-framework-container {
height: 100%;
width: 100%;
}
.transform {
height: auto;
width: auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
JAVASCRIPT:
var div = $("#non-framework-wrapper").height();
var winSize = $(window).height();
$(document).ready(function() {
if (div < winSize) {
$("#non-framework-wrapper").addClass('transform');
} else {
$("#non-framework-wrapper").removeClass('transform');
}
});

How to make SpriteSpin responsive?

Site i am working on is made with twitter bootstrap and is fully responsive. I have successfully made SpriteSpin to work with my site but there is a problem, i can't make it responsive as rest of my site because it adds inline css to div where the image is.
JS looks like this:
First it calls images:
$(function(){
var frames = [
"folder/image.jpg",
(other images)
];
Then this:
$("#mali").spritespin({
width : 960,
height : 540,
(other code)
});
How can i change this fixed width and height and put there css class or w/h to 100% so that is responsive.
I already tried to add css class to container with this but no success:
$( "div" ).addClass( "myClass" );
I believe the problem here is that the script somehow adds inline css
<div class="spritespin spritespin-instance" unselectable="on" style="overflow: hidden; position: relative; width: 480px; height: 327px;">
You can see it on official SpriteSpin website (link below) when using inspect element on Bicycle image.
Help me fix this issue or suggest me other 360 image sprite spin solution that is responsive and works on mobile touch.
SpriteSpin: http://spritespin.ginie.eu/
You can override CSS by adding !important after your own CSS directives.
In it's simplest form:
background: red !important;
If you have inline style attributes in HTML:
<div style="background: red;">
The inline styles for this div should make it red.
</div>
you can try this CSS:
div[style] {
background: yellow !important;
}
But it's not really good practice to rely on it in production code. More info:
http://css-tricks.com/when-using-important-is-the-right-choice/,
http://css-tricks.com/override-inline-styles-with-css/
I know this is an old post but I ran into this same problem today. Basically all you need to do is set a media query at each screen size in your css to resize the container and the images will respond since their widths and heights are already set at 100%.
#media only screen and (min-width: 100px) and (max-width: 767px) {
.spritespin, .spritespin-instance {
width:383px !important;
height:300px !important;
}
}
It's great to use it with bootstrap solution for responsive embed objects
var $container = $(".images3d-container")
if ($container.length && $.fn.spritespin != undefined) {
var source = []
$container.find(".images").find('img').each(function () {
source.push($(this).attr('src'))
})
$container.find(".view").spritespin({
source: source,
animate: false,
renderer: "image",
width : 450, // width in pixels of the window/frame
height : 450 // height in pixels of the window/frame,
})
}
.images3d-container .images {
display: none;
}
.images3d-container .view {
width: 100%!important; /* here it is */
height: 0 !important;
padding-bottom: 100%;
position: relative;
overflow: hidden;
border-bottom: 1px solid #ccc;
margin-bottom: 20px;
}
<section class="images3d-container">
<div class="view"></div>
<ol class="images">
<li><img src="/img/1.jpg"></li>
<li><img src="/img/2.jpg"></li>
<li><img src="/img/3.jpg"></li>
<li><img src="/img/4.jpg"></li>
</ol>
</section>
I know this question is old, but for people that happen to look for an answer: the plugin now has a setting for this. Just add responsive: true, and set the width of the SpriteSpin. See the official demo.

How do I detect the browser viewport to display desired content above the fold?

My problem is that I want specific content of my website to display above the fold on different viewport or screen resolutions. Is this done with Javascript/jQuery (is there a script that automatically does this?) that detects the browser viewport width and height or is it done through media queries?
I have an example of a website that does this:
http://www.themeskingdom.com/
No matter what screen size or viewport the user has, their desired content always appears above the fold. I want to accomplish the same sort of thing. Any help would be much appreciated.
Here is a pure css solution.
By using :
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
Allows you to assign a height: 100%; to elements because they can base it off of the parent.
Strong recommendations, make sure to look into css calc() and box-sizing to make life a lot easier when working with percents.
box-sizing allows the padding, margin, border to all be calced inside of the tag and not outside of it.
CSS calc() like so, height: calc(100% - 70px);, is also a great tool to use but does not have the best mobile support. (calc should really only be used when you are mixing percents with pixel sizes)
This is the html:
<div class="mainCont">
<div class="mainHeader">
</div>
<div class="control">
</div>
</div>
Here is the css:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.mainCont {
position: relative;
width: 100%;
height: 100%;
}
.mainHeader {
width: 100%;
height: 75%;
background-image: url("http://www2.ca.uky.edu/forestry/maehrbearky/Forest%20trail.jpg");
background-size: cover;
background-position: center center;
}
.control {
position: relative;
height: 25%;
width: 100%;
background: tan;
}
Finally, a fiddle: Demo
I would go the media-queries way, and focus firstly on width. But if you must take height in consideration, you could use either media-queries or JavaScript to detect height, though JavaScript might be preferable in some cases (considering browser support, like IE7 and IE8).
#media (min-height: 640px) { ... }
#media (max-height: 640px) { ... }
I created this little snippet to load JS conditionally, but it might prove useful in other applications:
// calculate viewport width so that we can load js conditionally
function responsive(){
var scaffolding = 'desktop';
var w = parseInt($(window).innerWidth(), 10);
if (w > 0 && w < 768) { scaffolding = 'phone'; }
if (w >= 768 && w <= 980) { scaffolding = 'tablet'; }
if (w > 980) { scaffolding = 'desktop'; }
return scaffolding;
}
if ( responsive() == phone) {
// do stuff only on phones
}
if ( responsive() != phone) {
// do stuff everywhere else but phones
}
An important concept behind keeping stuff on screen regardless of resolution, is that one may do it with positioning (which might involve positioned parents) or by taking away elements that are not prioritized on small viewports - letting the important elements stay. This can be done with simple media-queries, that either show or hide certain elements depending on resolution.
Simply use a div that is has background-color: transparent, and "border-bottom: 1px solid gray" and put your content in it.

IE11 style.maxHeight not set from css

Objective: Add a scroll bar when internal content exceeds maximum height, otherwise set to hidden overflow (as scroll bar shows up if setting overflow-y: scroll)
Context: This is in a win8.1 app (so ie11 trident)
Problem: the style.maxHeight on the #table-wrapper div is set to ''
My css
#threads table {
width: 100%;
}
#table-wrapper {
max-height: 600px;
}
My Js
var threadTable = document.getElementById('thread-table');
var tableWrapper = document.getElementById('table-wrapper');
if (threadTable.clientHeight > tableWrapper.style.maxHeight) {
tableWrapper.style.overflowY = 'scroll';
} else {
tableWrapper.style.overflowY = 'hidden';
}
My html
<div id="threads" class="info">
<h3>IE Build Info</h3>
<div id="table-wrapper">
<table id="thread-table"></table>
</div>
</div>
Suggestions would be helpful. There is probably a better way to do what I'm doing, but I don't want a scroll bar (even if it disappears after a while) to be there when it doesn't need to be.
If you are doing just a vertical scroll it is very simple. Here is the markup I use:
<div class="y-scroller-wrapper movie-showtimes-scroller">
<div class="movie-showtimes-wrapper">
<!-- Items go here -->
</div>
</div>
The y-scroller wrapper is the container where the overflow is set. The width has to be the 100%, the height is also 100% of its container. So this needs to be inside something with set dimensions. A lot of times in my modern layouts the main element is absolutely positioned so I can do a fluid layout.
This is the CSS:
.x-scroller-wrapper, .xy-scroller-wrapper, .y-scroller-wrapper {
-webkit-overflow-style: none;
-ms-overflow-style: none;
-moz-overflow-scrolling: touch;
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
overflow-style: none;
-ms-scroll-chaining: none;
-ms-scroll-snap-type: proximity;
-ms-scroll-translation: vertical-to-horizontal;
overflow: auto;
overflow-x: hidden;
overflow-y: scroll;
padding-right: 0;
width: 100%;
height: 100%;
}
.x-scroller-wrapper {
-ms-touch-action: pan-x;
touch-action: pan-x;
}
.y-scroller-wrapper {
-ms-touch-action: pan-y;
touch-action: pan-y;
overflow: hidden;
overflow-x: hidden;
overflow-y: scroll;
}
I have a sort of working demo up right now, you will need to reduce the browser width to < 600 pixels for the vertical scroll. If it is wider it adjust to a horizontal scroll. It looks like there is a bug where it is not resizing properly if you manually shrink so just refresh at small width if it does not reset. http://pentonmovies.love2dev.com/
If you are curious the vertical to horizontal is managed through media queries for a responsive effect. I need to change from the resize event to a media query listener to make it better right now ;)
Also IE has some great touch and native scroll support the other platforms do not have at this time. I hope this helps you out.

Categories