Scrollable content with fixed and aligned header and sidebar - javascript

I'm trying to create a simple calendar component with a variable amount of rows and columns. Each row and column has a minimal height/width though, so it should be possible for scrollbars to appear when it won't fit the screen.
I would like the header (which shows days and resources) and sidebar (which shows the hours) to always be visible.
I got it working perfectly in the following example in Chrome:
http://plnkr.co/2zCEiY9ssLCWLXY3teBN
HTML:
<body onload="init()">
<div id="grid">
<div id="corner"></div>
<div id="head"></div>
<div id="side"></div>
<div id="content"></div>
</div>
</body>
Javascript:
function init() {
var grid = document.getElementById("grid");
var corner = document.getElementById("corner");
var head = document.getElementById("head");
var side = document.getElementById("side");
grid.addEventListener("scroll", function(event) {
corner.style.top = grid.scrollTop+'px';
corner.style.left = grid.scrollLeft+'px';
head.style.top = grid.scrollTop+'px';
side.style.left = grid.scrollLeft+'px';
});
}
CSS:
* {
box-sizing: border-box;
}
body {
width: 700px;
height: 700px;
border: 1px solid black;
}
#grid {
position: relative;
width: 100%;
height: 100%;
background: purple;
overflow: auto;
}
#corner {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background: white;
border: 1px solid black;
z-index: 200;
}
#head {
position: absolute;
top: 0;
left: 100px;
height: 100px;
width: 1000px;
background: linear-gradient(135deg, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%);
border: 1px solid black;
z-index: 100;
}
#side {
position: absolute;
top: 100px;
left: 0;
height: 1000px;
width: 100px;
background: linear-gradient(135deg, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%);
border: 1px solid black;
z-index: 100;
}
#content {
width: 1000px;
height: 1000px;
margin-left: 100px;
margin-top: 100px;
background: linear-gradient(135deg, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%);
border: 1px solid black;
}
However, when i open this example in IE11 or firefox, the header jitters when scrolling with the mousewheel. (dragging scrollbars seems fine) This appears to be an issue with the smooth scrolling functionality of the browsers.
I could listen to a scroll event and prevent the default behavior and manually scroll the content. This would basically prevent smooth scrolling in all browsers. However it would be nice to have a solution that doesn't do that.
So in short, i want the example in the link above to work correctly in IE. Without the jittering header when scrolling with the mousewheel.

Related

Resize two halves of a browser screen

How to make that hovering the mouse over the boundary between two elements (here on the vertical line which separates the blue and red)
makes it possible to resize the width of each element?
I'm looking for the behaviour of https://stackedit.io/editor
Is this possible directly with <textarea> resizing possibilities ?
* { margin: 0; border: 0; padding: 0; }
textarea { background-color: red; width: 50%; position: absolute; top:0; left:0; height: 100%; }
#separator { cursor: ew-resize; position: absolute; top:0; width:1%; left:50%; height: 100%; }
#right { background-color: blue; width: 49%; position: absolute; top:0; right:0; height: 100%;}
<textarea>hello</textarea>
<div id="separator"></div>
<div id="right">yo</div>
Sort of like this:
* { margin: 0; border: 0; padding: 0; }
html,body { height: 100% }
textarea { background-color: red; width: 50%; height: 100%; resize: horizontal; min-width: 1px; max-width: 99%; float: left; }
div { background-color: blue; height: 100%}
textarea:active {width: 1px;}
<textarea>hello</textarea>
<div>yo</div>
Note that the textarea:active style is necessary because of an issue with chrome that won't allow an element to be resized less than it's initial width. It's a bad hack to work around it until chrome fixes it.

iframe gets displaced on iOS when dragged

I have an iframe on my website that is populated when you click the Make an Appointment button. The iframe contains a contact form with several input fields.
Everything works fine, but for some reason on iOS (iPad and iPhone 5/6 - I tested Safari and Chrome) the form is draggable beyond its container's width and height. It should only be scrollable in the y-axis; like it is on Android devices. See screenshot below.
I've looked at numerous posts on S/O, but have yet to find any Q/A that pertains to this particular nuance of iOS devices/browsers.
Here is the code:
HTML:
<div id='button'><button id='contact'>MAKE AN APPOINTMENT</button></div>
<div id="block"></div>
<div id="iframecontainer">
<a id='close' href='#'>X</a>
<div id="loader"></div>
<iframe></iframe>
</div>
JQuery:
$('document').ready(function() {
$('#contact').click(function () {
$('#block').fadeIn();
$('#iframecontainer').fadeIn();
$('#header-wrapper').css("visibility", "hidden");
var width = $(window).width();
$('#iframecontainer iframe').attr('src', 'http://a-link-to-my-iframe.html');
if (width > 850) {
$('#iframecontainer').css('width', '790px');
$('#iframecontainer').css('margin-left', '-395px');
}
else {
$('#iframecontainer').css('width', '310px');
$('#iframecontainer').css('margin-left', '-155px');
}
$('#iframecontainer iframe').load(function() {
$('#loader').fadeOut(function() {
$('iframe').fadeIn();
});
});
});
And, the CSS:
#contact {
color: #c2c2c2;
background: #151515;
border: 1px solid #c2c2c2;
padding: 13px 26px;
text-decoration: underline;
font-family: inherit;
letter-spacing: 2px;
font-size: 18px;
margin: 0 auto;
}
#iframecontainer {
width:75%;
height: auto;
display: none;
position: fixed;
-webkit-overflow-scrolling:touch;
overflow-y: auto;
height:600px;
top: 10%;
background:#FFF;
border: 1px solid #666;
border: 1px solid #555;
box-shadow: 2px 2px 40px #222;
z-index: 999999;
left: 50%;
margin-left: -395px;
}
#iframecontainer iframe {
width: 100%;
height: 600px;
position: absolute;
border: none;
}
#loader {
width: 250px;
height: 250px;
margin:auto;
}
#block {
background: #000;
opacity:0.6;
position: fixed;
width: 100%;
height: 100%;
top:0;
left:0;
display:none;
}​
And here is a screen shot of what I am referring to:
Is there a specific way to disable this on iOS devices?
Try to add scrolling="no" on the iframe and change some iframe CSS like,
#iframecontainer iframe {
width: 1px;/* Make it a very small for your viewport */
min-width:100%;/* Overwrite width. Let it decides the actual width of iframe */
height: 600px;
position: absolute;
border: none;
}

jQuery Image Slider Cover Image Positioning Issue

I'm currently making a jquery image slider of 2 images where you can slide left or right to see the before and after photos. I have everything i want set except for the position of the cover image. About 40% of the cover image seems to shift off to the right of the border but the 2nd image is position perfected inside the border. Please advise on how I can put my cover image inside the border perfectly like my 2nd image.
HTML:
<div class="con">
<img src="warming1.jpg" class="imageOne">
<div class="coverImage"></div>
<div class="handle"></div>
<script type="text/javascript">
$(".handle").draggable({
axis: "x",
containment: "parent",
drag: function () {
var position = $(this).position();
var positionExtra = position.left + 6;
$(".coverImage").width(positionExtra + "px");
}
});
</script>
</div>
CSS:
.con {
top:2140px;
left:10px;
width: 280px;
height: 230px;
border: 2px solid;
position: absolute;
z-index:1
}
.con img {
height: 100%;
position: absolute;
}
.coverImage {
position: absolute;
background: url("warming2.jpg");
background-size: auto 100%;
width: 100%;
height: 100%;
}
.handle {
width: 0px;
height: 100%;
border-left: 12px solid #fff;
position: absolute;
left: 50%;
}
.handle:after {
content: "DRAG";
display: block;
width: 60px;
height: 60px;
border: 2px solid #eee;
border-radius: 50%;
color: #999;
line-height: 60px;
font-weight: 300;
text-align: center;
background: #fff;
position: absolute;
left: -36px; top: 0; bottom: 0;
margin: auto;
}
Positioning Picture 1 within the Element containing the border:
Obtain width of element with the border
Obtain width of 2nd picture
Set pic1.width = borderElement.width - pic2.width
Position pic1 at borderElement.right - pic1.width

CSS: Make two column layout with left column fluid (fill all remaining space) and right column fixed (200px)

I want to make it so that Online Users div stays always at size of 200px while the chat window to the left of it resize to the max size it can taking all available space.
So when window is resized for example - the chat window will shrink but Online Users window stays at 200px, kind of like liquid layout.
left div (chat window) is: entry_window
right div (online users) is: online_window
#entry_window{
border: 2px solid #D4D4D4;
float: left;
width: 75%;
height: 100%;
margin: 1%;
overflow: scroll;
overflow-x: hidden;
}
#online_window{
border: 2px solid #D4D4D4;
margin: 1%;
margin-left: 0%;
display: inline-block; float: left;
background-color: white;
width: 21.5%;
height: 100%;
}
oh and by the way: for vertical size I made this function to make it in height as big as possible without disturbing bottom part.
function autoscale(){
var v = window.innerHeight - 170;
document.getElementById("entry_window").style.height= v+"px";
document.getElementById("online_window").style.height= v+"px";
}
This can be done entirely without javascript. You can use absolute positioning along with defining top/left/bottom/right and width.
example:
<div id="lefty">this is left content</div>
<div id="righty">this is right content</div>
and
#lefty {
position: absolute;
background-color: blue;
top: 0;
bottom: 0;
left: 0;
right: 200px;
}
#righty {
position: absolute;
background-color: red;
top: 0;
bottom: 0;
width: 200px;
right: 0;
}
See this jsfiddle:
http://jsfiddle.net/Lyp96yqq/
With display:table and table-cell you can do it this way:
*{margin:0;padding:0}
.parent {
width:100%;
display:table;
}
.parent > div {
height:200px;
line-height:200px;
background:orange;
display:table-cell;
}
.parent .fixed {
width:200px;
}
.parent .flexible {
background:red;
}
<div class="parent">
<div class="fixed">Fixed Width</div>
<div class="flexible">Chat Room</div>
</div>
Here The Example on Jsfiddle too.
This could be easily done with the css calc function. However, it depends on what browsers you want to support. check out this link so see what it is compatible with.
Essentially, just do this:
#entry_window{
border: 2px solid #D4D4D4;
float: left;
width: calc(100% - 208px);
height: 100%;
overflow: scroll;
overflow-x: hidden;
background-color:red;
}
#online_window{
border: 2px solid #D4D4D4;
margin-left: 0%;
display: inline-block;
float: left;
background-color: white;
width: 200px;
height: 100%;
}
note: you need to -208 to take the border into account. Also, check out the jsfiddle

Not able to set overflow: hidden; on a div

I am not able to set overflow: hidden; on div wrapper for this script.
Please look at this js fiddle.
http://jsfiddle.net/CwzAD/1/
My aim is to display 10 cells (200 px in height) on the page and showing only animation within this limit, so to act as a mask.
Any idea what I am doing wrong? Any alternative approach even using JavaScript if with only CSS is not possible?
*{
margin: 0;
padding: 0;
}
#pageset {
position: fixed;
top: 0px;
left: 0px;
width: 500px;
height: 200px;
border: 1px solid rgba(0,255,255,1);
-webkit-box-sizing:border-box;
}
#wrapper {
position: fixed;
top: 0px;
left: 0px;
width: 500px;
background-color: green;
/*overflow: scroll;*/ /* PROBLEM HERE----------------*/
/*height: 200px;*/ /* PROBLEM HERE----------------*/
}
#navigator {
position: absolute;
left: 600px;
}
ul {
list-style: none;
/* margin:0px;
padding:0px;*/
}
li:nth-child(even) {
background: #d80000;
}
li {
width: 100px;
height: 100px;
background-color: red;
float: left;
margin: 0px;
}
.focus {
background-color: yellow !important;
}
.btn {
float: left;
width: 50px;
height: 50px;
border: 2px gray solid;
margin: 10px;
background-color: #f0f0f0 ;
}
.icon {
width: 60px;
height: 60px;
border: 2px gray solid;
margin: 10px;
background-color: #99ff66;
}
Solution here
http://jsfiddle.net/Uz5a9/
Basically, what you need to do is use the #wrapper div as a container, which is only 200px high.
The .content div you generate should then scroll inside that wrapper.
To accomplish this you need to position the wrapper relatively, and then position the content div absolutely inside the wrapper. The wrapper should never move around.
The content can be as high as you want, the wrapper should always stay 200px high.
Check the following fiddle, which demonstrates exactly this: http://jsfiddle.net/Uz5a9/
Try this css it will work fine DEMO HERE
.content {
height:200px;
overflow:hidden
}
Just apply these additional rules to #wrapper:
#wrapper { max-height: 200px; overflow: hidden; }
and it seems to work just as described.

Categories