Hello Stack Overflow Community! I haven't really utilized this resource and basically learned how to work Google Apps Script from the ground up (with my very limited knowledge of scripting languages). I am having trouble with embedding jQuery into my Web App and I turn to the experts for help.
This is just a quick example I came up with to illustrate what I am trying to achieve. What I want is for the "container" div to have a dynamic height. That way, the whole screen is filled up, no matter what size it is (well, not a phone most likely). Here is the code:
Code.gs
function doGet(request) {
return HtmlService.createTemplateFromFile('app').evaluate();
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
stylesheet.html
<style>
#main {
height: 100%;
width: 100%;
background-color: #DDD;
}
#header {
height: 100px;
width: 100%;
background-color: blue;
position: top;
}
#menu {
height: 50px;
width: 100%;
background-color: black;
position: top;
}
#container {
height: auto;
background-color: red;
margin-left: 15%;
margin-right: 15%;
}
#footer {
height: 50px;
width: 100%;
background-color: blue;
}
</style>
javascript.html
<script>
function adjust(){
var maxH = $("#main").height();
var afterHeight = maxH - ($("#header").height() - $("#menu").height() - $("#footer").height());
$(".kamil_test").css({height:afterHeight});
}
$(document).ready(adjust);
$(window).resize(adjust);
</script>
app.html
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js">
</script>
</head>
<body>
<?!= include('stylesheet.html'); ?>
<?!= include('javascript.html'); ?>
<div id="main">
<div id="header">
</div>
<div id="menu">
</div>
<div id="container">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
I think my post is too long, but I wanted to show what is going on from all four parts. Wanted to make sure I wasn't overlooking anything.
Just use this and adapt it to what you are trying to do.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Layout - 100% height</title>
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:gray;
}
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:750px;
background:#f0f0f0;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#header {
padding:1em;
background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
border-bottom:6px double gray;
}
div#header p {
font-style:italic;
font-size:1.1em;
margin:0;
}
div#content {
padding:1em 1em 5em; /* bottom padding for footer */
}
div#content p {
text-align:justify;
padding:0 1em;
}
div#footer {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
background:#ddd;
border-top:6px double gray;
}
div#footer p {
padding:1em;
margin:0;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>CSS layout: 100% height with header and footer</h1>
</div>
<div id="content">
<h2>Min-height</h2>
</div>
<div id="footer">
<p>
This footer is absolutely positioned to bottom:0; of #container. The padding-bottom of #content keeps me from overlapping it when the page is longer than the viewport.
</p>
</div>
</div>
</body>
This is a simple one; it's fortunate that CSS has the ability to set a ceiling and a floor for the sizes of objects.
In your case, you want to set the floor (meaning the lowest possible value) of the height of your div to the height of the screen.
Answer:
min-height: 100%;
The div should already try to resize to allow it's contents to completely fit inside of it's volume. By adding this tag, the div will still resize OR if it's contents have a total height less than the height of the screen, the div will still remain the height of the screen.
Related
I want to make my page scroll normally and stop and fix on a certain point, then scroll div, and after div is completely scrolled continue scrolling body as usual.
I've tried to disable scrolling of the page and work with the wheel event, adding margin top to my content, but it doesn't seem to be a good solution.
Example of what i want https://aimbulance.com/ilayaregeneration
Thanks!
Your example is not locking the scroll to the div, but masking the entire page and using position: sticky in order to achieve that.
SOLUTION
A possible solution is to make the div you want to be scrolled a container with position: relative that holds a masking element with position: absolute that covers the entire div and contains a mask that will be position: sticky with top: 0.
check out this example:
https://codesandbox.io/s/scrolled-div-jqw7z
Use overflow-y
<!DOCTYPE html>
<html>
<head>
<style>
html {
scroll-behavior: smooth;
}
#section1 {
height: 600px;
background-color: pink;
}
#section2 {
height: 600px;
background-color: yellow;
display: flex;
justify-content: center;
/* this is the usage */
overflow-y: auto;
}
#inner {
/* this height is larger than the parent */
height: 1200px;
width: 33%;
background: radial-gradient(circle, black, white);
overflow-y: auto;
}
#section3 {
height: 600px;
background-color: blue;
}
</style>
</head>
<body>
<div class="main" id="section1">
</div>
<div class="main" id="section2">
<div id="inner"></div>
</div>
<div class="main" id="section3">
</div>
</body>
</html>
I used the following
<body topmargin="0" leftmargin="0" rightmargin="0">
which works only on IE6. I want it to work with firefox and opera.
I attempted the following:
<style type="text/css">
.header {
width: 100%;
background-color: #3B5998;
height: 35px;
margin-top:0;
}
.style1 {
margin-right: 38px;
}
.style2 {
width: 100%;
background-color: #3B5998;
height: 35px;
}
</style>
<div dir="rtl" class="style2" style="width: 100%">
<p align="center"style="width: 92px; height: 32px; font-family: Arial, Helvetica, sans-serif; font-size: 20px; color: #EFF1F6;" class="style1"></p>
</div>
</body>
For start you can use:
<body style="margin:0;padding:0">
Once you study a bit about css, you can change it to:
body {margin:0;padding:0}
in your stylesheet.
Html for content, CSS for style
<body style='margin-top:0;margin-left:0;margin-right:0;'>
Yeah a CSS primer will not hurt here so you can do two things:
1 - within the tags of your html you can open a style tag like this:
<style type="text/css">
body {
margin: 0px;
}
/*
* this is the same as writing
* body { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;}
* I'm adding px here for clarity sake but the unit is not really needed if you have 0
* look into em, pt and % for other unit types
* the rules are always clockwise: top, right, bottom, left
*/
</style>
2- the above though will only work on the page you have this code embeded, so if if you wanted to reuse this in 10 files, then you will have to copy it over on all 10 files, and if you wanted to make a change let's say have a margin of 5px instead, you would have to open all those files and make the edit. That's why using an external style sheet is a golden rule in front end coding.
So save the body declaration in a separate file named style.css for example and from your add this to your html instead:
<link rel="stylesheet" type="text/css" href="style.css"/>
Now you can put this in the of all pages that will benefit from these styles and whenever needed to change them you will only need to do so in one place. Hope it helps. Cheers
I hope this will be helpful.. If I understood the problem
html{
background-color:green;
}
body {
position:relative;
left:200px;
background-color:red;
}
div{
position:relative;
left:100px;
width:100px;
height:100px;
background-color:blue;
}
http://jsfiddle.net/6M6ZQ/
<body topmargin="0" leftmargin="0" rightmargin="0">
I'm not sure where you read this, but this is the accepted way of setting CSS styles inline is:
<body style="margin-top: 0px; margin-left: 0px; margin-right: 0px;">
And with a stylesheet:
body
{
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
You need to use css. It's how modern web design gets things done.
This is a basic css walk through.
Your html file would be like:
(really simple html)
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<body>
</body>
<html>
Your css file (mystyle.css) would look like:
body
{
margin-top:0px;
margin-left:0px;
margin-right:0px;
}
Try using CSS.
body {
margin: 0 0 auto 0;
}
The order is clockwise from the top, so top right bottom left.
I would say: (simple zero will work, 0px is a zero ;))
<body style="margin: 0;">
but maybe something overwrites your css. (assigns different style after you ;))
If you use Firefox - check out firebug plugin.
And in Chrome - just right-click on the page and chose "inspect element" in the menu. Find BODY in elements tree and check its properties.
the body element have below styles by default
body {
display: block;
margin: 8px;
}
body: focus {
outline: none;
}
we can override this using
1. inline styles
<body style="margin: 0;">
2. internal styling
<style>
body {
margin: 0;
}
</style>
So I have a html page and a fixed image as my header but i want to also have a fixed navbar right underneath where i can have buttons that link to another page on my server
here is my code
<!DOCTYPE HTML PUBLIC>
<title>Equinox Web Chatroom Server</title>
<style type="text/css">
body{
margin:0;
padding:header-<length> 0 0;
}
div#header{
position:absolute;
top:0;
left:0;
width:500%;
height:header-<length>;
}
#media screen{
body>div#header{
position:fixed;
}
}
* html body{
overflow:hidden;
}
* html div#content{
height:100%;
overflow:auto;
}
</style>
<div
id="header"><img src="http://192.168.0.143/images/header.png" width="1700" height="46" alt="logo"<br>
<p>
<table>
<tr>
<td bgcolor= "black">Server Index Chat Room</td>
</tr>
</table>
</p><br>
</div>
If you want to fix elements in place in relation to the viewport, then the CSS position: fixed property is the right way to go.
This might be what you're trying to do: http://jsfiddle.net/hh1kuxyh/
As you scroll up and down you'll notice the header and navigation bar stay in place.
HTML
<div id="container">
<div id="header"><h2>HEADER IMAGE</h2></div>
<div id="navbar"><span>NAVIGATION MENU</span></div>
</div>
<div id="main-content">
<p>lots of text here</p>
</div><!-- end #main-content -->
CSS
* {
margin: 0;
padding: 0;
}
#container {
width: 98%;
height: 230px;
position: fixed;
top: 0;
}
#header {
height: 150px;
background-color: chartreuse;
text-align: center;
}
#header h2 {
padding-top: 25px;
}
#navbar {
height: 75px;
background-color: #aaa;
text-align: center;
border: 2px solid black;
}
#navbar span {
line-height: 75px;
font-weight: bold;
}
#main-content {
margin-top: 235px;
}
If you want to fix an element in place in relation to another element, then you may need to use a bit of jQuery. http://jsfiddle.net/8086p69z/8/
Also see my two answers here:
Position fixed within container element instead of the browser / viewport
Lastly, I tried to work with your code but it contained many errors. For example, your code block is missing the <html>, <body> and <head> elements.
Always run your code through the W3C Mark-Up Validation Service to check for errors and standards compliance.
Hope this helps. Good luck!
I've been trying like crazy to make this happen but I just can't figure it out ( beginner ).
As you can see, when you scroll down, the top head part will stick to the top of the page but also overflow a bit. This is done with stickyjs. I want to do the same thing with the bottom of the head as well, after scrolling a bit for it to "sink" a few pixels while sticking to the bottom of the page, so there's more visibility, but no matter what I try, it just won't work.
If anyone could help, I'd be thankful.
Here's the code on the top part:
#head {
z-index:101;
display: block;
position: absolute;
bottom: 20%;
width:100%;
margin:0 auto;
right:0;
left:0;
height:85px;
background: url(../float.png) #fff 50% 50% no-repeat;
text-indent:-9999px;
overflow:hidden;
}
Here's the code for the bottom part:
#footerhead {
z-index:100;
position:fixed;
left:0px;
bottom:0px;
margin:0 auto;
height:20%;
width:100%;
background:url(../footer.png) #fff 50% 0 no-repeat;
}
And here's the stickyjs that makes it stick:
<script>
$(document).ready(function(){
$("#head").sticky({topSpacing:-70});
});
</script>
Please help me out. :(
You can use the jQuery .scroll() function to achieve what you're trying to do. Here's a little code that I've created which would work perfectly for you:
$(window).scroll(function() {
if ($(this).scrollTop() > 500) {
$("#footerhead").css("height","5%");
} else if ($(this).scrollTop() < 500) {
$("#footerhead").css("height","20%");
}
});
What happens is that if the user scrolls down 500px on your website, the height of the #footerhead div reduces to 5% thus hiding a larger part of the face and making the content area more visible. Next when the user scrolls back up, the height of the #footerhead div increases back to 20%. You can also set the value of scroll from 500px to any other value of your choice.
This may work for you:
<!doctype html>
<html>
<head>
<title>Sticky Bottom</title>
<style type="text/css">
#head {
z-index:101;
position: relative;
height:85px;
width: 100%;
background: none green;
}
#footerhead {
z-index:100;
position:relative;
height:85px;
width: 100%;
background: none red;
}
.is-sticky #footerhead {
position: fixed;
top: auto !important;
bottom: -10px;
left: 0;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://path_to/jquery.sticky.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#head").sticky({topSpacing:-10});
$('#footerhead').sticky();
});
</script>
</head>
<body>
<div id="head">
HEAD
</div>
<div id="footerhead">
FOOTERHEAD
</div>
<div id="content">
<p>Content here..</p>
</div>
</body>
</html>
Could be jsticky error, but I see it adds top: -10px to each sticky element. Please note, the element becomes sticky and gets class is_sticky only after you scroll down the element (it cannot stay in footer).
The page I have got is like this: .
I wanted to make it centralized but I couldnot do that.
The problems are:
I want to give black div full page.
I want to centralize other two divs without using left property in css.
While hovering the value of z should increase by any value so that the whole div can come up.
I learned about margin: 0 auto o auto; property that it centralizes the element with respect to page.
I want to get the same for yellow and green divs using margin property w.r.t. black divs.
Can I get these results using CSS or i will have to use Javascript etc?
My html code is here:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styling.css"/>
</head>
<body>
<div class="first">
<center> The first link </center>
</div>
<div class="second">
<center> The second link </center>
</div>
<div class="third">
<center> The third link </center>
</div>
</body>
<html>
My css document is:-
.first
{
position: absolute;
width:500px;
color:#fff;
height:200px;
background-color:#000;
z-index: 0;
margin:0 auto 0 auto;
}
.second
{
width:400px;
position: absolute;
height:200px;
background-color: green;
left:60px;
z-index: 1;
margin:50px auto 0 auto;
}
.third
{
position: absolute;
width:300px;
height: 200px;
left:100px;
background-color:yellow;
z-index: 2;
margin:100px auto 0 auto;
}
body div:first-child a:hover
{
font-size:30px;
color:yellow;
z-index:5;
}
body div +div a:hover
{
font-size:40px;
color:red;
z-index: 5;
}
body div+div+div a:hover
{
font-size:50px;
color:#fff;
z-index:5;
}
I apologize for my English.And hope you will get my problems.
I still believe that using left is the best way to solve your problem — not sure why OP wants to avoid it.
Here is the proof-of-concept fiddle: http://jsfiddle.net/teddyrised/YqDL5/
Instead, use the following trick: set their position from the left by 50% of the container's/parent's width. That's half correct. However, we also need to take into account the width of the element itself, which means we have to offset it backwards by half of its own width.
Use this:
.second, .third {
left: 50%;
transform: translateX(-50%);
}
There are also some changes you have to make to your HTML code:
I would suggest wrapping everything around a parent container that is relatively positioned, and instead of using margins to offset the second and third div from the top, use top instead.
Remove <center>. Delegate layout to CSS, and this HTML tag has been deprecated long time ago.
Here is the revised HTML:
<section>
<div class="first">The first link </div>
<div class="second"> The second link </div>
<div class="third"> The third link </div>
</section>
Also, I suggest setting the first div to relative positioning, so it will not cause the parent element's height to collapse. Otherwise, you will have to set an explicit height since absolute positioning takes elements out of the flow, and the parent will not take it into account when calculating its own dimensions.
section {
position: relative;
}
.first {
width:100%;
color:#fff;
height:200px;
background-color:#000;
}
.second, .third {
left: 50%;
transform: translateX(-50%);
}
.second
{
width:400px;
position: absolute;
height:200px;
background-color: green;
top: 50px;
z-index: 1;
}
.third {
position: absolute;
width:300px;
height: 200px;
top: 100px;
background-color:yellow;
z-index: 2;
}
See fiddle at: http://jsfiddle.net/teddyrised/YqDL5/