dynamic part of the page breaks the layout - html

Good day! The following layout which I will post almost works. Almost. A part of the page is being dynamically loaded. If it loads few elements (0/1/2/3) It is alright. If it is more, the footer of the page isn't pushed back. (which basically is the error). I am posting the entire source code. It is configured to work nicely. To see the error itself simply change the value of the
CHANGEME variable to something larger than 3.
The source:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>LayoutTest</title>
<style>
body {
margin: 0;
padding: 0;
}
.webbody {
margin: 0 auto;
padding:0;
width:900px;
height:200px;
max-height:2000px;
}
.topHeader {
width:900px;
height:50px;
margin: 0 auto;
padding:0;
background:purple;
}
.dynamic {
width:650px;
height:400px;
float:left;
}
.sidebar {
margin-left:50px;
width:150px;
height:400px;
float:left;
background:red;
}
.footer1 {
float:left;
margin: 0 auto;
padding:0;
width:900px;
height:20px;
background:lime;
}
</style>
</head>
<body>
<div class="webbody">
<div class="topHeader"></div>
<div id="main1" class="dynamic"></div>
<div class="sidebar"></div>
<div class="footer1"></div>
</div>
</body>
</html>
<script>
//this function only loads the dynamic part of the page
function load() {
var main = document.getElementById("main1");
var CHANGEME = 2;
for (var i = 0; i < CHANGEME; i++) {
var slot = document.createElement("div");
slot.className = "slot";
main.appendChild(slot);
}
}
load();
</script>

A working example is in this jsfiddle. Basically I have added the following CSS:
#main1 { height: auto; }
I have also added a border around the slot class so you can see what is happening. height: auto is described here

Related

how to position a scroll_to_top button

in the example below how to keep gotop inside story - i.e. bottom right of the middle div
and keep its show/hide functionality
the three divs - top, story and footer - are not of predictive width and height
I tried various position and margin params - without success
$(document).on('scroll', function(){
let x = $(this).scrollTop();
if(x > 25){$('.gotop').show();}
else{$('.gotop').hide()}
});
$('.gotop').on('click', function(){
$(document).scrollTop(0);
});
.container{
width:50%;
margin:0 auto;
background:silver;
text-align:center;
}
.top{padding:25px; background:gold;}
.story{
position:relative;
padding:25px;
min-height:100vh;
}
.footer{padding:25px; background:gold;}
.gotop{
display:none;
position:fixed;
z-index:99;
right:14px;
bottom:0;
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
<div class='top'>TOP</div>
<div class='story'><br><br><br><br>STORY<br><br><br>
<div class='gotop'>gotop</div>
</div>
<div class='footer'>FOOTER</div>
</div>
Use sticky position:
$(document).on('scroll', function() {
let x = $(this).scrollTop();
if (x > 25) {
$('.gotop').show();
} else {
$('.gotop').hide()
}
});
$('.gotop').on('click', function() {
$(document).scrollTop(0);
});
.container {
width: 50%;
margin: 0 auto;
background: silver;
text-align: center;
}
.top {
padding: 25px;
background: gold;
}
.story {
position: relative;
padding: 25px;
min-height: 150vh;
/* I need flexbox to push the button to bottom*/
display:flex;
flex-direction:column;
}
.footer {
padding: 25px;
background: gold;
}
.gotop {
display: none;
position: sticky;
margin-top:auto; /* push to bottom */
text-align:right; /* right align */
z-index: 99;
right: 14px;
bottom: 14px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
<div class='top'>TOP</div>
<div class='story'><br><br><br><br>STORY<br><br><br>
<div class='gotop'>gotop</div>
</div>
<div class='footer'>FOOTER</div>
</div>
In the following implementation, I have taken some liberty to change minor css , replace jquery with js by introducing Intersection Observer which will only make the gotop element visible when our footer starts getting visible. Ofcourse you can use both jquery and js simultaneously but since I don't have experience with former, I used js only.
The benefit is that it's not dependent on any hardcoded values to control gotop visibility.
let footer = document.querySelector('.footer');
let gotop = document.querySelector('.gotop');
let observer = new IntersectionObserver((entries)=>{
entries.forEach(entry=>{
if(entry.isIntersecting){
gotop.style.opacity = '1';
gotop.style.pointerEvents = 'auto';
}
else{
gotop.style.opacity = '0';
gotop.style.pointerEvents = 'none';
}
})
})
observer.observe(footer);
gotop.addEventListener('click',()=>window.scrollTo({top:true}));
.container{
width:50%;
margin:0 auto;
background:silver;
text-align:center;
}
.top{padding:25px; background:gold;}
.story{
position:relative;
padding:25px;
min-height:100vh;
}
.footer{padding:25px; background:gold;}
.gotop{
opacity:0;
pointer-events:none;
position:absolute;
z-index:99;
right:14px;
bottom:0;
cursor:pointer;
transition:all 0.2s ease-in;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
<div class='top'>TOP</div>
<div class='story'><br><br><br><br>STORY<br><br><br>
<div class='gotop'>gotop</div>
</div>
<div class='footer'>FOOTER</div>
</div>
You only need to change position:fixed; to position:absolute; for your .gotop div. Since it is positioned inside a position: relative div then it will be inside of it.
$(document).on('scroll', function(){
let x = $(this).scrollTop();
if(x > 25){$('.gotop').show();}
else{$('.gotop').hide()}
});
$('.gotop').on('click', function(){
$(document).scrollTop(0);
});
.container{
width:50%;
margin:0 auto;
background:silver;
text-align:center;
}
.top{padding:25px; background:gold;}
.story{
position:relative;
padding:25px;
min-height:100vh;
}
.footer{padding:25px; background:gold;}
.gotop{
display:none;
position:absolute;
z-index:99;
right:14px;
bottom:0;
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
<div class='top'>TOP</div>
<div class='story'><br><br><br><br>STORY<br><br><br>
<div class='gotop'>gotop</div>
</div>
<div class='footer'>FOOTER</div>
</div>

How to scale a DIV to 100% of browser size?

I've a webforms ASP.NET application with a master page and a child page.
Inside child page i've some div like:
<html>
<div>
....
<div id="MYDIV">
<textarea> .... </textarea>
</div>
</div>
I want to add a function to make my div containing textarea full browser size .
I've tried adding an image with an onClick function:
<img src="images/full-screen.png" height="16px" onclick="document.getElementById('divEditorReferto').style.height = '100vh'; document.getElementById('divEditorReferto').style.width = '100vh';" />
But it not works.
Second question: how to reverse the full screen function and make div with the old parameters (normal size) ?
Thanks
Add a on click event that toggles a class .e.g. class="example". Then style elements accordingly.
#MYDIV.example {
display: block;
position: absolute;
height: 100%;
width: 100%;
}
Simple vanilljs to toggle class
var el = document.querySelector('.toggleFull');
var content = document.querySelector('.textAreaWrapper');
el.onclick = function() {
content.classList.toggle('full');
}
css with the normal and the fullscreen version of the textarea and the positioning of the toggle button (.toggleFull)
.textAreaWrapper {
width:200px;
border:1px solid red;
position:relative;
}
.textAreaWrapper.full {
position:absolute;
height:100vh;
width:100%;
top:0;
left:0;
display:flex;
}
.textAreaWrapper .textAreaInner {
flex-grow:1;
}
.textAreaWrapper.full .textAreaInner {
height:100vh!important;
border:1px solid blue;
}
.toggleFull{
position:absolute;
bottom:0;
right:0;
}
Here a working fiddle:
https://codepen.io/anon/pen/pMEXLR?editors=1111

Stick header after scrolling

I made a header navigation and it's halfway down the page. When you scroll, and it's on the top of the page I want it to stick, if you know what I mean.
I hope someone can tell me how I get this done. Demo JsFiddle
HTML
<header>menu</header>
CSS
body, html {
height: 2000px;
}
header {
position: absolute;
top: 300px;
background-color: black;
color: white;
width: 100%;
}
You are going to need some JavaScript.
Demo JsFiddle
HTML
<header>
<div class="logo">AWESOME HEADER!</div>
<div class="menu">Menu goes here - home - links - blah blah</div>
</header>
<div class="content">
<!-- your stuff -->
</div>
CSS
* { margin:0; padding:0; }
.logo {
font-size:40px;
font-weight:bold;
color:#a00;
font-style:italic;
}
.menu {
background:#a00;
color:#fff;
height:30px;
line-height:30px;
letter-spacing:1px;
width:100%;
}
.content { margin-top:10px; }
/* the trick */
.menu-padding { padding-top:40px; }
.sticky {
position:fixed;
top:0;
}
Javascript (JQuery)
$(document).ready(function () {
var menu = document.querySelector('.menu');
var origOffsetY = menu.offsetTop;
function scroll() {
if ($(window).scrollTop() >= origOffsetY) {
$('.menu').addClass('sticky');
$('.content').addClass('menu-padding');
} else {
$('.menu').removeClass('sticky');
$('.content').removeClass('menu-padding');
}
}
document.onscroll = scroll;
});
Take a look at this tutorial. It explains how to do it using either CSS or jQuery depending on what you want.
http://www.hongkiat.com/blog/css-sticky-position/

Two Vertical ScrollBars in IE

Hi my code works correctly in Firefox, but in IE I'm getting the default vertical scrollbar. When I minimize the page I get the vertical and horizontal scrollbars I want, but in IE I get an additional vertical scrollbar. How can I get rid of it just in IE? I am using a CSS Reset. Here is my CSS:
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{
margin:0;
padding:0;
border:0;
outline:0;
/*font:inherit;*/
font-size:100%;
vertical-align:baseline;
text-decoration:none;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
display:block;
}
body{
line-height:1;
}
ol,ul{
/*list-style:none;*/
}
blockquote,q{
quotes:none;
}
blockquote:before,blockquote:after,
q:before,q:after{
content:’’;
content:none;
}
/* remember to define visible focus styles!
:focus{
outline:?????;
} */
/* remember to highlight inserts somehow! */
ins{
text-decoration:none;
}
del{
text-decoration:line-through;
}
table{
border-collapse:collapse;
border-spacing:0;
}
/*CUSTOM*/
a {
/*color:#365C8C;*/
}
a:hover {
text-decoration:underline;
/*color:#365C8C;*/
}
p {
font:.85em arial,regular;
}
ul {
font:.85em arial,regular;
}
.bar {
background-color:#365C8C;
height:30px;
width:100%;
position:relative;
padding:0 0 0 0;
margin:0 0 0 0;
/*overflow-x:hidden;*/
min-width:1225px;
}
body {
position:relative;
padding:0 0 0 0;
margin:0 0 0 0;
overflow:auto;
height:100%;
width:100%;
background-color:#ADCCEB;
/*background-color:black;*/
/*background: url(background.png);*
/*background-size:100%;*/
}
.bold {
font-weight:bold;
}
.contentcontainer {
width:825px;
height:910px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
padding-top:0px;
/*background-color:red;*/
}
.extcontentcontainer {
width:825px;
height:645px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
padding-top:0px;
/*background-color:red;*/
}
img.fullbackground {
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%;
min-width:1225px;
height:100%;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
img.extfullbackground {
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%;
min-width:1225px;
height:100%;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
And here is some of the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pathfinder Outage Page</title>
<link rel="stylesheet" href="boilerplate.css">
</head>
<body class="fullbackground">
<img class="fullbackground" src="background.png" />
<div class="topbackground">
<div class="top">
<div class="topleft">
<img class="pf_logo" src="pathfinder_logo.png"/>
</div>
<div class="topmiddle">
<h1 class="title">Pathfinder is Temporarily Unavailable</h1>
</div>
<div class="topright" ></div>
</div>
</div>
<div class="bar"></div>
<div style="width:1225px; height:910px; padding-top:0px; margin-top:0px; margin-left:auto; margin-right:auto;">
<div class="contentcontainer">
Remove:
overflow: auto;
From the body in the CSS.
That should fix it.
It looks like both your body and your div are producing scrollbars because you set the height to 100%, the div inside the body is larger than the body, and the body itself is larger than your window, so you have two overflowing elements inside each other. Just get rid of height: 100% in your div nad you should be fine.
Use the "if IE" built in HTML to put in custom css files to fix the issue in IE like:
<!--[if IE]>
<link rel="stylesheet" href="ie-specific.css">
<![endif]-->
Check to see if Compatibility Mode for Intranet Sites is on. I had this issue and when I disable Compatibility Mode the second scroll bar went away.
I think there is another way to fix this without getting rid of the overflow: auto style.
My understanding of the issue and the workaround suggested is based on this nice article you could check for more details: https://remysharp.com/2008/01/21/fixing-ie-overflow-problem
The way I understood the problem is that in Chrome and Firefox, the scroll-bars are drawn outside the containers, so they don't affect the container width when shown.
While in IE the scroll-bars are drawn inside the containers and their width/height is what's causing the container to overflow and display a second scroll-bar.
A typical use case where this would happen is on tables with vertical scroll (too many rows) and horizontal scroll (too many columns):
the table body which already has a horizontal scroll because of the long list of columns, will add a second horizontal scroll because of the x-overflow that the vertical scroll width will add will add when drawn inside the table body (for the long list of rows).
One of the tricks I tried and that seemed to work is to add a padding to the container to allow it to draw the scroll bar without overflowing:
To fix a double horizontal scroll-bar:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.container-overflowing-vertically-class {
padding-right: 20px;
}
}
To fix a double vertical scroll-bar:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.container-overflowing-horizontally-class {
padding-bottom: 20px;
}
}

html element background makes link un-clickable

I have three link <a> elements with a background but half the link isn't clickable because the background overlaps the text. Does anyone know a solution?
Here is an example of what i've done
<html>
<head>
<style>
li
{ list-style-type:none;
list-style:none;
position:relative;
height:100px;
}
#middle
{ width:350px;
background:url("images/middle.png");
left:405px;
height:250px;
padding-top:50px;
background-size:100%;
}
#left
{ left:275px;
width:240px;
height:150px;
padding:150px 60px 0 0;
background:url("images/left.png");
background-size:100%;
}
#right
{ left:580px;
width:235px;
height:150px;
padding:150px 0 0 70px;
background:url("images/right.png");
background-size:100%;
}
#test
{ height:325px;
}
.Item
{ position:absolute;
font-size:33px;
float:left;
margin:15px;
font-family: Georgia, Times, "Times New Roman", serif;
text-align:center;
}
</style>
</head>
<body>
<ul id="test">
<li id="left" class="Item">I want to<br>have some<br>text here</strong></li>
<li id="middle" class="Item">I want to<br>have some<br>text here</strong></li>
<li id="right" class="Item">I want to<br>have some<br>text here</strong></li>
</ul>
</body>
</html>
Add a Z-Index like that :
#middle
{ width: 350px;
background: url("images/middle.png");
left: 405px;
height: 250px;
padding-top: 50px;
background-size: 100%;
z-index: 2;
}
Maybe you could merge the three pictures into one as shown in the page.Then start your layout using the new merged picture as background-image.When I want to build my website,I always draw a sketch of my website.I will treat the test div as a whole and set a background-image attribute for it.Feel sorry for my pool expression.Hope to solve your question.