I'm practising with JavaScript and hiding the image and the button. The footer keeps coming to the top of the page every time I execute the command. How can I correct this? I've tried many different options and I can't seem to get it to work right like position: sticky, bottom:0; for example.
I'm extremely new to this coding thing so I'm pretty sure I have no idea what I'm doing.
jQuery(document).ready(function() {
$(".myButton").click(function(){
$(".poem").show();
$(".resize").show();
$(".main-image").hide();
});
$(".resize").click(function(){
$(".poem").hide();
$(".resize").hide();
})
})
#charset "utf-8";
/* CSS Document */
.main-image {
display: block;
width: 25%;
margin-bottom: 30px;
}
.container {
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 100%;
}
.overlay-content {
position: absolute;
bottom: 15%;
text-align: center;
width: 25%;
}
.resize {
position: absolute;
z-index: 1;
top: 0;
right: 0;
}
footer {
background-color: brown;
border: solid;
position: sticky;
bottom: 0;
}
.myButton {
margin-left: 50%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>practice_overlay</title>
<link href="Overlay.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="script_storage.js"></script>
</head>
<body>
<div class="container">
<p class="introduction">Lorem Ispum</p>
<img class="main-image" src="Devry Web Design Intro Course/Pictures/crystal-tear-3.jpg">
<div class="overlay-content">
<button class="resize">X</button>
<h1>Hello World</h1>
</div>
<p class="poem">Lorem Ispum</p>
</div>
<button class="myButton">X</button>
<footer>Lorem Ispum</footer>
</body>
</html>
You could use CSS grid - with the setup in the snippet below, you can "safely" work inside the div.outer part of the layout, without making the other parts of your page "jumping around" :)
jQuery(document).ready(function() {
$(".myButton").click(function() {
$(".poem").show();
$(".resize").show();
$(".main-image").hide();
});
$(".resize").click(function() {
$(".poem").hide();
$(".resize").hide();
})
})
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
min-height: 100%;
display: grid;
grid-template-rows: calc(100vh - 30px) 30px;
grid-template-columns: 100%;
}
.outer {
background: gray;
padding: 8px 16px;
overflow-y: scroll;
display: flex;
flex-direction: column;
}
.container {}
#image {
height: 30px;
width: 30px;
}
.myButton {
margin: 0 auto;
}
footer {
background-color: brown;
padding: 8px 16px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
<div class="outer">
<div class="container">
<p class="introduction">Introduction</p>
<img id="image" src="https://picsum.photos/30" alt="small image" />
<div class="overlay-content">
<button class="resize">X</button>
<h1>Hello World</h1>
</div>
<p class="poem">Lorem Ispum</p>
</div>
<button class="myButton">X</button>
</div>
<footer>
footer
</footer>
</div>
I have seen this page (chrome version) and I am wondering about that circle that goes down and changes color. I am trying to do something similar myself and I am stuck in the transition from pink-circle with orange background to green-circle with white background. I have tried 2 strategies.
A)
using position: sticky; + hidding one layer under another and coordinating appropriately, see code below. The problem is that this only works for one of the circles (the one "appearing") but no the "hidding" one; so the effect is not the same.
.yellowbanner {
background-color: yellow;
height: 500px;
width: 500px;
z-index: 2;
position: sticky;
top:50px;
left:0px;
border-radius: 100%;
}
.orangebanner {
background-color: orange;
height: 500px;
width: 500px;
z-index: 21;
position: sticky;
top:50px;
left:0px;
border-radius: 100%;
}
.greenbanner {
background-color: mediumspringgreen;
height: 1000px;
width: 100%;
z-index: 3;
position: relative;
top:500px;
left:0px;
}
.bluebanner {
background-color: blue;
opacity: 1;
height: 1500px;
width: 100%;
z-index: 1;
position: relative;
top:0px;
left:0px;
}
.redbanner {
background-color: white;
height: 3000px;
width: 100%;
z-index: -2;
position: absolute;
top:0;
left:0px;
}
<!DOCTYPE html>
<html>
<head>
<title>DevProject</title>
<link href="./resources/css/index.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="greenbanner"><div class="yellowbanner"></div></div>
<div class="redbanner"></div>
<div class="bluebanner">
<div class="orangebanner"></div>
</div>
</body>
</html>
B) Using position: fixed; + some JS. However all I have found would change the color (at a certain moment) of the entire circle, and not just the appropriated section of it.
Thank you
My small library has a website that was created in HTML and CSS by a previous employee. I know the the display of the site is dynamic based on screen size-- the mobile site is slightly different from the desktop site. It appears he used some libraries from JQuery, too. I have a very limited background in coding, so I make only minor content changes and NO functional changes. At some point, while I was on vacation, the footer of our website stopped displaying in the desktop version of the site, but it still shows in the mobile site.
I have audited the HTML and CSS files against the archived files to be sure I didn't inadvertently make any changes before I left. I have checked the versions of files that are rarely used and noticed they haven't been changed since 2017. I commented out the CSS and ran just the HTML locally to see if there was a stylesheet difference I was missing (though I haven't edited them), but I couldn't get anything to display in the footer. The footer has a widget that displays one iframe with a link to another website, a second iframe with a link to a calendar, and a group of icons with links to our partners. Again, everything worked fine until a month ago on the mobile and desktop sites, and I can view the footer if I resize my desktop browser to something very narrow.
Here's the relevant HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-109165971-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-109165971-1');
</script>
<meta charset="UTF-8">
<meta name="msvalidate.01" content="63DD6F645CCF71531665417F6978B20A" />
<title>Welcome to the Toccoa-Stephens County Public Library</title>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Welcome the Toccoa Stephens County Library! Celebrating 80 years of operation and still going strong!" />
<meta name="keywords" content="Toccoa-Stephens County Public Library, Northeast Georgia Public Libraries, search catalog, account, events, hours, new books, Toccoa, library, Friends of the Library, Stephens County, opac, steam, 3d printing, makerspace, state park pass" />
<meta name="robots" content="index, follow" />
<meta name="author" content="Literati Ltd" />
<link rel="stylesheet" type="text/css" href="css/tabs.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link href='css/fullcalendar.min.css' rel='stylesheet' />
<link href='css/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet">
</head>
<body>
<!--header-->
<header>
<!--insert a lot of contents organized into tabs-->
<!--End Navigation tabs,begin accordion. tabs.css media queries will cause tabs to display:none at 500px and accordion to display.
Any information added to tabs must be duplicated in the accordion-->
<div class="container">
<!--Home-->
<!--insert a lot of contents organized into accordion tabs-->
<footer>
<div class="widgets">
<div class="new-books">
<iframe id="newbooks" src="https://gapines.org/opac/extras/browse/html-full/item-age/NEG-TOCCOA/1/5"></iframe>
</div>
<div id="tscpl-calendar">
<iframe id="calendar" src="https://teamup.com/ksx6i3x71k3mbbkzbk?view=a&disableSidepanel=1&showLogo=0&showHeader=0&showTitle=0&showViewSelector=0"></iframe>
<div id="bottom-right"><strong>SEE ALL EVENTS</strong> </div>
</div>
</div>
</div>
<div id="social">
<h3>More to See!</h3>
<img class="socialpics" src="images/facebook.png" title="LIKE US ON FACEBOOK!" alt="LIKE US ON FACEBOOK!" />
<img class="socialpics" src="images/niche.png" title="TUTORIALS FOR OUR DIGITAL SERVICES" alt="TUTORIALS FOR OUR DIGITAL SERVICES" />
<img class="socialpics" src="images/tumblebook.png" title="MORE EBOOKS FOR KIDS!" alt="MORE EBOOKS FOR KIDS!" />
<img class="socialpics" src="images/novelist.png" title="FIND A GOOD RECOMMENDATION WITH NOVELIST" alt="FIND A GOOD RECOMMENDATION WITH NOVELIST" />
</div>
</footer>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<p align="right">E-Verify ID#792629</p>
<!--Javascript used-->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="js/tabs.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/fullcalendar.min.js"></script>
<script src="js/gcal.min.js"></script>
<script src="js/agenda.js"></script>
<script src="https://my.nicheacademy.com/api/widget/toccoa-stephenslibrary"></script>
</body>
</html>
Here's the primary CSS code that relates to that section:
#social {
width: 375px;
height: 250px;
float: right;
text-align: center;
margin-top: 1%;
margin-right: 1%;
background: rgba(255,255,255,0.5);
overflow: hidden;
}
.socialpics {
display: inline-flex;
margin: 15px 30px 0px 30px;
width: 95px;
height: 95px;
}
#newbooks {
float:left;
background-color: rgba(255,255,255,0.5);
margin: 1%;
height: 250px;
width: 400px;
overflow: auto;
}
#tscpl-calendar {
margin-top: 1%;
margin-left: .5%;
display: inline-flex;
float: left;
width: 415px;
height: 250px;
position: relative;
}
#calendar {
width: 415px;
height: 225px;
float: left;
margin: 1%;
background: rgba(255,255,255,0.5);
overflow: auto;
}
#bottom-right {
right: 0;
bottom: 0;
position: absolute;
}
#tscpl-calendar a:link {
background-color: #379676;
color: white;
}
#tscpl-calendar a:visited {
background-color: #379676;
color: white;
}
#media only screen and (max-width : 800px) {
.gapines {
float: left;
text-align: left;
margin-left: 10px;
}
}
#media only screen and (max-width : 500px) {
.gapines {
width: 100%;
text-align: center;
margin-left: 0;
}
.new-books {
margin-top: 10px;
position: relative;
height: 0;
-webkit-overflow-scrolling: touch !important;
overflow: scroll !important;
padding-bottom: 125%;
background-color: rgba(255,255,255,0.5);
}
.new-books iframe {
position: absolute;
top:0;
left: 0;
width: 100% !important;
height: 100% !important;
display: block;
}
#tscpl-calendar {
width: 100%;
margin: 0;
}
#calendar {
width: 100% !important;
margin: 0 !important;
}
#social {
width: 100%;
margin: 0;
}
}
.after-box {
clear: both;
}
#media only screen and (min-width: 800px) and (max-width : 1279px) {
#tscpl-calendar{
float:left;
margin-top: 5px;
overflow: scroll;
display: block;
max-width: 35%;
min-width: 25%;
}
#calendar {
float:left;
margin-top: 5px;
overflow: scroll;
display: block;
max-width: 99%;
min-width: 40%;
background-color: rgba(255,255,255,0.5);
}
.new-books{
float:left;
margin-top: 5px;
position: relative;
height: 0;
overflow: hidden;
padding-bottom: 32%;
display: block;
max-width: 50%;
min-width: 35%;
background-color: rgba(255,255,255,0.5);
}
.new-books iframe {
position: absolute;
top:0;
left: 0;
width: 100% !important;
height: 100% !important;
display: block;
}
#social {
max-width: 45%;
max-width: 25%;
margin-top: 5px;
display: block;
float: left;
}
.socialpics {
display: inline-block;
margin: 0;
margin-top: 2%;
max-width: 100%;
}
}
#media only screen and (min-width: 501px) and (max-width : 799px) {
#tscpl-calendar {
float:left;
margin-top: 5px;
overflow: auto;
display: block;
max-width: 100%;
min-width: 95%;
}
#calendar {
float:left;
margin-top: 5px;
overflow: auto;
display: block;
max-width: 100%;
min-width: 95%;
background-color: rgba(255,255,255,0.5);
}
.new-books{
float:left;
margin-top: 5px;
position: relative;
height: 0;
overflow: hidden;
padding-bottom: 30.50%;
display: block;
max-width: 100%;
min-width: 90%;
max-height:100%;
background-color: rgba(255,255,255,0.5);
}
.new-books iframe {
position: absolute;
top:0;
left: 0;
width: 100% !important;
height: 100% !important;
display: block;
}
#social {
max-width: 100%;
min-width: 90%;
display: block;
float: left;
}
.socialpics {
display: inline-block;
max-width: 100%;
}
}
There is another CSS file, but I don't think it's quite relevant. However, I'm definitely a newbie, so if something's missing, please let me know. Also, there may be something related to JavaScript that I need to include. Let me know if I'm missing that.
I expect my page to display the footer, regardless of the device accessing it. I also need specific instructions for fixing any coding errors, even if you have to point me to a "for Dummies" resource. We have no real programmers here, but we have plenty of books.
On review by a commenter, the other CSS file is important, so here is a scaled down version:
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.tabs {
margin-top: .5%;
margin-left: 1%;
margin-right: 10%;
position: relative;
box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.2);
width: 98%;
opacity: 1;
height: 485px;
margin-bottom: .5%;
}
.tabs nav {
display: flex;
flex-wrap: wrap;
align-items: center;
background: #379676;
color: #ffffff;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.2);
width: 150px;
height: inherit;
}
.tabs nav a {
padding: 15px 0px;
text-align: center;
width: 100%;
cursor: pointer;
}
.tabs .content {
padding: 15px 0px;
position: absolute;
top: 2px;
left: 150px;
color: #2b2626;
background: rgba(255,255,255,0.5);
width: 0px;
height: 100%;
overflow: scroll;
overflow-x: hidden;
opacity: 0;
transition: opacity 0.1s linear 0s;
}
.tabs .content.visible {
padding: 20px;
background-color: #ffffff;
width: calc(100% - 150px);
opacity: .87;
}
.tabs .content p { padding-bottom: 1px; }
.tabs .content p:last-of-type { padding-bottom: 0px; }
/* Beginning of Accordion nav */
.container {
width: 100%;
max-width: 500px;
}
.accordion {
position: relative;
width: 100%;
padding: 0;
margin: 0;
}
.accordion input {
position: absolute;
left: 0;
top: 0;
z-index: -999;
}
.accordion label {
display:block;
padding: 15px 20px;
background: #379676;
color: #ffffff;
text-align: center;
text-decoration: none;
font-size: 22px;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0,0,0,.1);
margin-bottom: 3px;
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: all .40s;
}
.accordion-content {
text-align: center;
background-color: #ffffff;
opacity: .87;;
margin: 1em 0;
text-decoration: none;
}
.accordion input:checked ~ .accordion-content {
max-height: 600px;
overflow: scroll;
}
#media only screen and (max-width: 500px) {
.tabs {display: none;
height: 0px;}
}
#media only screen and (min-width: 501px) {
.container {display: inline-flex;
height: 0px;}
}
Basically, if you're on a mobile site, the tabs on the side are all collapsed until you touch one of them, but the footer displays at all times.
Update: After looking at the website, I have a solution:
As another user has also pointed out, your is within a , there is a media query which sets this to 'display: none;'. This means anything within this will be hidden on those media specific screen sizes.
A solution is to take the
<footer> ... </footer>.
and place this just before the closing body tag like this...
<footer>
<div class="widgets">
<div class="new-books">
<iframe id="newbooks" src="Welcome%20to%20the%20Toccoa-Stephens%20County%20Public%20Library_files/5.html"></iframe>
</div>
<div id="tscpl-calendar">
<iframe id="calendar" src="Welcome%20to%20the%20Toccoa-Stephens%20County%20Public%20Library_files/ksx6i3x71k3mbbkzbk.html" class="fc fc-unthemed fc-ltr">
<div class="fc-toolbar fc-header-toolbar">
<div class="fc-left">
<h2> </h2>
</div>
<div class="fc-right">
<button type="button" class="fc-today-button fc-button fc-state-default fc-corner-left fc-corner-right">today</button>
<div class="fc-button-group">
<button type="button" class="fc-prev-button fc-button fc-state-default fc-corner-left">
<span class="fc-icon fc-icon-left-single-arrow"></span>
</button>
<button type="button" class="fc-next-button fc-button fc-state-default fc-corner-right">
<span class="fc-icon fc-icon-right-single-arrow"></span>
</button>
</div>
</div>
<div class="fc-center">
</div>
<div class="fc-clear">
</div>
</div>
<div class="fc-view-container">
<div class="fc-view fc-listMonth-view fc-list-view fc-widget-content">
<div class="fc-scroller" style="overflow: hidden auto;">
</div>
</div>
</div>
</iframe>
<div id="bottom-right">
<strong>SEE ALL EVENTS</strong>
</div>
</div>
</div>
</footer>
</body>
</html>
This will take the footer out of the container which is being hidden on desktop.
I'm trying to fix a button over a specific spot in an image. Is there any way to merge the button with a specific part of an image? This is what I have so far
I have the button exactly where I want it but when the browser is stretched or zoomed in, the button doesn't stay.
Here's the JSFiddle of what I have
https://jsfiddle.net/vkfLywna/1/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: absolute;
width: 100%;
max-width: 400px;
}
.container img {
width: 200%;
height: auto;
}
.container .btn {
position: relative;
top: -330px;
left: 96px;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 6px;
padding: 4px 10spx;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btn:hover {
background-color: black;
}
</style>
</head>
<body>
<div class="container">
<img src="doc.png.png" alt="img" style="width:100%">
<button class="btn">Button</button>
</div>
</body>
</html>
Wrap the img and the button with a div and position them accordingly:
.img-container {
border: solid red 1px;
display: inline-block;
position: relative;
}
.img-container button {
position: absolute;
top: 50px;
left: 50px;
}
<div class="img-container">
<img src="http://via.placeholder.com/350x150">
<button>Click here</button>
</div>
the .container has to be position:relative and .btn position:absolute. Than you can positionate the button with top and left in the container, use % instead of px to stay responsive.
you don't need transform for this.
.container {
position:relative;
width:100%;
}
.container img {
width:100%;
height:auto;
}
.container button {
position:absolute;
top:20%;
left:20%;
}
<div class="container">
<img src="https://dummyimage.com/600x400/ff00ff/fff">
<button>
Click
</button>
</div>
I am trying to add footer on a HTML page. The HTML then printed and the footer should be on the bottom of every page. But, I got a problem.
There's a table generated in the HTML. The table row may need 2 or more pages to be displayed. The footer on the page with the table is overlapped with the table rows. How to fix this? My plan is to make the footer placed below bottom:0, but then the footer is not even displayed. Are there any work around for this problem?
This is my footer:
<footer>
<div class='div_footer'>
<?php echo "This is footer"; ?>
</div>
</footer>
This is my CSS for printing:
#media print {
footer {
position: fixed;
bottom: 0;
}
}
EDIT:
this is a fiddle : http://jsfiddle.net/88mnq8xo/
First need to setup footer in bottom of the page and bottom of the content. Then wright the same code inside the #media print.
First need to work with body and html.
html{
height: 100%;
width: 100%;
}
body{
height: 100%;
padding-bottom: 100px; /* This is footer height */
position: relative;
width: 100%;
}
Second need to work with the footer.
footer{
bottom: 0;
height: 100px; /* Footer height */
left: 0;
position: absolute;
width: 100%;
z-index: 1;
}
Third need to work with #media print.
#media print{
body{
padding-bottom: 100px; /* Footer height */
position: relative;
}
footer{
bottom: 0;
height: 100px; /* Footer height */
left: 0;
position: absolute;
width: 100%;
z-index: 1;
}
}
HTML
<html>
<body>
<header></header>
<main></main>
<footer></footer>
</body>
</html>
*,
*:after,
*:before{
box-sizing: inherit;
}
html{
box-sizing: border-box;
height: 100%;
width: 100%;
}
body{
background-color: #121212;
height: 100%;
margin: 0;
padding: 0 0 100px;
position: relative;
width: 100%;
}
footer{
background-color: #009688;
bottom: 0;
color: white;
font-size: 15px;
height: 100px;
left: 0;
line-height: 100px;
position: absolute;
text-align: center;
width: 100%;
z-index: 1;
}
#media print{
body{
background-color: #121212;
height: 100%;
margin: 0;
padding: 0 0 100px;
position: relative;
width: 100%;
}
footer{
background-color: #009688;
bottom: 0;
color: white;
font-size: 15px;
height: 100px;
left: 0;
line-height: 100px;
position: absolute;
text-align: center;
width: 100%;
z-index: 1;
}
}
<body>
<header></header>
<main></main>
<footer>© StackOverflow 2017</footer>
</body>
Hope this will help!!!
Try adding margin to the table. margin should be the same height of fixed positioned footer. Or you same amount of padding to the containing div.
Try this instead :
you should give the fixed position a height and a width of 100%,
for the body or the wrapper you can give it a padding-bottom same as the footer height.
if you dont want it to be fixed, you can change it to absolute but give it height and width.
html :
<html>
<body>
<div class="wrapper">
<div class="row" style="margin:0 1cm 0cm 1cm" id="div_print">
.
.
.
</div>
<footer></footer>
</div>
</body>
</html>
css:
#media print {
footer {
position: fixed;
bottom: 0;
height:40px;
background-color:#000;
width:100%;
left:0;
padding-left:22px;
color:#fff;
}
}
body,html{
min-height: 100%;
position: relative;
}
.wrapper{
position: relative;
width:100%;
padding-bottom:80px;
}