I am trying to position my image of a butterfly on to the image of flowers
I am able to do it if there is no container elements with margins or padding in %, however if the images is in a responsive website position: absolute; does not produce the right results.
below is the code I'm working with
i have changed the images to online hosted ones and added the css from the external file in the html
please click on step 4 and see that the butterfly is not linked to image of the daisies.
how can I make it so that no matter what the size of the window is, the image of the butterfly stays related to the daisies.
thank you
i have also made a https://jsfiddle.net/aLq8j6r1/ for it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Week 3 Classwork</title>
<link rel="stylesheet" href="week3style.css">
<style>
body{
margin: 0;
padding: 0;
background-color: beige;
}
#topNavBar ul{
list-style-type: none;
padding: 0 15%;
margin: 0;
background-color: black;
overflow: hidden;
}
#topNavBar a{
text-decoration: none;
color: white;
padding: 16px;
display: block;
}
#topNavBar li{
float: left;
background-color: black;
}
#topNavBar li:hover{
background-color: red;
}
.block{
margin: 3% 15%;
padding: 10px;
background-color: white;
}
.displayNone{
display: none;
}
</style>
</head>
<body>
<div id="topNavBar">
<ul>
<li>Classwork Week 3</li>
<li>Homework Week 3</li>
<li>Homepage</li>
</ul>
</div>
<div id="mainSection">
<!-- in block there is everything -->
<div class="block">
<h1 style="text-align: center;">ClassWork week 3</h1>
<div id="firstExercise">
<h2>Animation With HTML 5</h2>
<div id="buttons">
<button onclick="showStep1()">step1</button>
<button onclick="showStep2()">step2</button>
<button onclick="showStep3()">step3</button>
<button onclick="showStep4()">step4</button>
<button onclick="showStep5()">step5</button>
<button onclick="showStep6()">step6</button>
</div>
<div id="step1Div" style="width: 580px;height: 50px; border: solid 4px black;">
<div id="elem" style="position: relative; width: 20px; height: 50px;background-color: aquamarine;"></div>
<script>
//onclick the elem it move right
var elem = document.getElementById("elem");
var left = 0;
var move;
elem.onclick=function myfunction(){
move =setInterval(movElem, 10);
}
function movElem(){
if(left>400){
clearInterval(move);
}
elem.style.left= left++ +"px";
}
</script>
</div>
<!-- box -->
<div id="step2Div" class="displayNone" style="width: 580px;height: 580px; border: solid 4px black;">
<!-- blue move element -->
<div id="elemStep2" style="position: relative; width: 20px; height: 50px;background-color: aquamarine;"></div>
<script>
//on click - move right and down till 400px right then move left
//how to move ? -setInterval
//use long names
//pseudo code:
//var nameofelement = get elemebt by id elemstep2;
var elemStep2 = document.getElementById("elemStep2");
//nameofelement.onclick: do following slowly:
elemStep2.onclick=function myOnclickFunctionStep2(){
// (left increase to 400
var iStep2=0;
//the following line will start to move the element to right and down
var vstep2Move1=setInterval(Step2Move1,10);
function Step2Move1(){
elemStep2.style.left= iStep2++ +"px";
elemStep2.style.top= iStep2/2 +"px";
//following will check if 400 is reached and if reached will stop movement and start movement 2
//stop and start move left till left is 20px
if(iStep2>400){
clearInterval(vstep2Move1); vstep2Move2=setInterval(fStep2Move2,10);
}
};
var gStep2=400;
var vstep2Move2;
function fStep2Move2(){
elemStep2.style.left= gStep2-- +"px";
if(gStep2<20){
clearInterval(vstep2Move2);
}
}
//
};
</script>
</div>
<!-- box -->
<div id="step3Div" class="displayNone" style="width: 580px;height: 580px; border: solid 4px black;">
<!-- blue element -->
<div id="elemStep3" style="position: relative; width: 20px; height: 50px;background-color: aquamarine;"></div>
<script>
var elemStep3= document.getElementById("elemStep3");
var iStep3=0;
var gStep3 =400;
var hStep3 =20;
var vStep3Move1;
var vStep3Move2;
var vStep3Move3;
elemStep3.onclick=function onclickFunctionStep3(){
vStep3Move1= setInterval(fStep3Move1,10);
function fStep3Move1(){
//move it
elemStep3.style.left= iStep3++ +"px";
elemStep3.style.top= iStep3/2 +"px";
//if statement for stopping vStep3Move1
if(iStep3>400){
clearInterval(vStep3Move1);
vStep3Move2 = setInterval(fStep3Move2,10);
}
}
function fStep3Move2(){
elemStep3.style.left= gStep3-- +"px";
if(gStep3<20){
clearInterval(vStep3Move2);
vStep3Move3= setInterval(fStep3Move3,10);
}
}
function fStep3Move3(){
elemStep3.style.left= hStep3++ +"px";
elemStep3.style.top= (hStep3/2)+200 +"px";
if(hStep3> 400){
clearInterval(vStep3Move3);
}
}
};
</script>
</div>
<div class="displayNone" id="step4Div">
<img src="https://i.imgur.com/XoZr6dM.jpg" alt="" style="position: relative;width: 580px;" >
<img src="https://i.imgur.com/2s1zwDb.gif
1. List item
" alt="" style="position:absolute; top: 0; left: 0;">
</div>
<div class="displayNone" id="step5Div">step5</div>
<div class="displayNone" id="step6Div">step6</div>
<style>
.displayNone{
display: none;
}
</style>
<script>
var step1Div = document.getElementById("step1Div");
var step2Div = document.getElementById("step2Div");
var step3Div = document.getElementById("step3Div");
var step4Div = document.getElementById("step4Div");
var step5Div = document.getElementById("step5Div");
var step6Div = document.getElementById("step6Div");
function showStep1(){
step1Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep2(){
step2Div.classList.remove("displayNone");
step1Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep3(){
step3Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step1Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep4(){
step4Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step1Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep5(){
step5Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step1Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep6(){
step6Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step1Div.classList.add("displayNone");
}
</script>
</div>
<div id="secondExercise">
<h2>OOP Exercise/Demo</h2>
</div>
<div id="thirdExercise">
<h2>Javascript slideshow</h2>
</div>
<div id="fourthExercise">
<h2>Menu</h2>
</div>
</div><!-- block ends -->
</div><!-- main sedction ends -->
</body>
</html>
Well, an absolute positioned element stays relative to its first positioned (not static) ancestor element
MDN w3schools
So you should add position:relative to it's parent. In your case #step4Div . Then position it how you want. Using top and left and other styles.
My suggestion is you don't use inline styles but write them in the css.
I won't get into the javascript code which definitely needs some refactoring. Too many lines of code that are overkill.
var step1Div = document.getElementById("step1Div");
var step2Div = document.getElementById("step2Div");
var step3Div = document.getElementById("step3Div");
var step4Div = document.getElementById("step4Div");
var step5Div = document.getElementById("step5Div");
var step6Div = document.getElementById("step6Div");
function showStep1() {
step1Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep2() {
step2Div.classList.remove("displayNone");
step1Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep3() {
step3Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step1Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep4() {
step4Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step1Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep5() {
step5Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step1Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep6() {
step6Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step1Div.classList.add("displayNone");
}
body {
margin: 0;
padding: 0;
background-color: beige;
}
#topNavBar ul {
list-style-type: none;
padding: 0 15%;
margin: 0;
background-color: black;
overflow: hidden;
}
#topNavBar a {
text-decoration: none;
color: white;
padding: 16px;
display: block;
}
#topNavBar li {
float: left;
background-color: black;
}
#topNavBar li:hover {
background-color: red;
}
.block {
margin: 3% 15%;
padding: 10px;
background-color: white;
}
.displayNone {
display: none;
}
#step4Div {
position: relative;
}
<div id="topNavBar">
<ul>
<li>Classwork Week 3</li>
<li>Homework Week 3</li>
<li>Homepage</li>
</ul>
</div>
<div id="mainSection">
<!-- in block there is everything -->
<div class="block">
<h1 style="text-align: center;">ClassWork week 3</h1>
<div id="firstExercise">
<h2>Animation With HTML 5</h2>
<div id="buttons">
<button onclick="showStep1()">step1</button>
<button onclick="showStep2()">step2</button>
<button onclick="showStep3()">step3</button>
<button onclick="showStep4()">step4</button>
<button onclick="showStep5()">step5</button>
<button onclick="showStep6()">step6</button>
</div>
<div id="step1Div" style="width: 580px;height: 50px; border: solid 4px black;">
<div id="elem" style="position: relative; width: 20px; height: 50px;background-color: aquamarine;"></div>
<script>
//onclick the elem it move right
var elem = document.getElementById("elem");
var left = 0;
var move;
elem.onclick = function myfunction() {
move = setInterval(movElem, 10);
}
function movElem() {
if (left > 400) {
clearInterval(move);
}
elem.style.left = left++ + "px";
}
</script>
</div>
<!-- box -->
<div id="step2Div" class="displayNone" style="width: 580px;height: 580px; border: solid 4px black;">
<!-- blue move element -->
<div id="elemStep2" style="position: relative; width: 20px; height: 50px;background-color: aquamarine;"></div>
<script>
//on click - move right and down till 400px right then move left
//how to move ? -setInterval
//use long names
//pseudo code:
//var nameofelement = get elemebt by id elemstep2;
var elemStep2 = document.getElementById("elemStep2");
//nameofelement.onclick: do following slowly:
elemStep2.onclick = function myOnclickFunctionStep2() {
// (left increase to 400
var iStep2 = 0;
//the following line will start to move the element to right and down
var vstep2Move1 = setInterval(Step2Move1, 10);
function Step2Move1() {
elemStep2.style.left = iStep2++ + "px";
elemStep2.style.top = iStep2 / 2 + "px";
//following will check if 400 is reached and if reached will stop movement and start movement 2
//stop and start move left till left is 20px
if (iStep2 > 400) {
clearInterval(vstep2Move1);
vstep2Move2 = setInterval(fStep2Move2, 10);
}
};
var gStep2 = 400;
var vstep2Move2;
function fStep2Move2() {
elemStep2.style.left = gStep2-- + "px";
if (gStep2 < 20) {
clearInterval(vstep2Move2);
}
}
//
};
</script>
</div>
<!-- box -->
<div id="step3Div" class="displayNone" style="width: 580px;height: 580px; border: solid 4px black;">
<!-- blue element -->
<div id="elemStep3" style="position: relative; width: 20px; height: 50px;background-color: aquamarine;"></div>
<script>
var elemStep3 = document.getElementById("elemStep3");
var iStep3 = 0;
var gStep3 = 400;
var hStep3 = 20;
var vStep3Move1;
var vStep3Move2;
var vStep3Move3;
elemStep3.onclick = function onclickFunctionStep3() {
vStep3Move1 = setInterval(fStep3Move1, 10);
function fStep3Move1() {
//move it
elemStep3.style.left = iStep3++ + "px";
elemStep3.style.top = iStep3 / 2 + "px";
//if statement for stopping vStep3Move1
if (iStep3 > 400) {
clearInterval(vStep3Move1);
vStep3Move2 = setInterval(fStep3Move2, 10);
}
}
function fStep3Move2() {
elemStep3.style.left = gStep3-- + "px";
if (gStep3 < 20) {
clearInterval(vStep3Move2);
vStep3Move3 = setInterval(fStep3Move3, 10);
}
}
function fStep3Move3() {
elemStep3.style.left = hStep3++ + "px";
elemStep3.style.top = (hStep3 / 2) + 200 + "px";
if (hStep3 > 400) {
clearInterval(vStep3Move3);
}
}
};
</script>
</div>
<div class="displayNone" id="step4Div">
<img src="https://i.imgur.com/XoZr6dM.jpg" alt="" style="position: relative;width: 580px;">
<img src="https://i.imgur.com/2s1zwDb.gif
1. List item
" alt="" style="position:absolute; top: 0; left: 0;">
</div>
<div class="displayNone" id="step5Div">step5</div>
<div class="displayNone" id="step6Div">step6</div>
</div>
<div id="secondExercise">
<h2>OOP Exercise/Demo</h2>
</div>
<div id="thirdExercise">
<h2>Javascript slideshow</h2>
</div>
<div id="fourthExercise">
<h2>Menu</h2>
</div>
</div>
<!-- block ends -->
</div>
<!-- main sedction ends -->
To explain a bit:
absolute explicitly makes the styled element positioned absolutely compared to the closest parent that is also explicitly positioned.
The butterfly you have correctly positioned absolute because it needs to be positioned on top of the flowers. However it was absolute compared to the closest parent ie the body (it looks like).
Adding relative makes the styled element stay where it would have been without styling relative, however the relative element now forms the closest explicitly positioned parent.
<div class="displayNone" id="step4Div" style="position:relative">
Related
Investigating and, putting together my code little by little, I have achieved a carousel with the mouseup function that allows me to move the products by pressing the left button of the mouse without releasing it, so far it goes very well, well sometimes it remains as stalled, that is, without having pressed if I move the pointer moves the products.
What I want to achieve in my code is to be able to integrate two buttons, one right and one left, to also be able to move the products of the carousel in that way. How can I achieve it, can you explain to me?
var direction_slider = "up";
var current_step = 0;
var scroll_product = false;
var scroll = -1;
$(function(){
// vars for clients list carousel
var $product_carousel = $('.slider');
var products = $product_carousel.children().length;
var product_width = (products * 140); // 140px width for each client item
$product_carousel.css('width',product_width);
var rotating = true;
//var product_speed = 1800;
//var see_products = setInterval(rotateClients, product_speed);
$(document).on({
mouseenter: function(){
rotating = false; // turn off rotation when hovering
},
mouseleave: function(){
rotating = true;
}
}, '#carousel');
$product_carousel.on("mousedown", function(e) {
scroll_product = true;
scroll = e.pageX;
event.preventDefault();
}).on("mouseup", function(e) {
scroll_product = false;
var num = Math.floor(Math.abs(scroll - e.pageX) / 140);
var dir = scroll - e.pageX < 0 ? "up" : "down";
for (var x = 0; x < num; x++) {
var $first = $('.slider .item:first');
var $last = $('.slider .item:last');
if (dir == "up") {
$last.prependTo(".slider");
} else {
$first.appendTo(".slider");
}
}
$(".slider").css("transform", "translate(0, 0)")
}).on("mousemove", function(e) {
if (scroll_product) {
$(".slider").css("transform", "translate(" + ( e.pageX - scroll ) +"px, 0)")
}
});
});
.carousel {
margin: 0 auto;
padding: 1em;
width: 100%;
max-width: 1170px;
margin-left: auto;
overflow: hidden;
}
.slider {
width: 100% !important;
display: flex;
}
.item {
display: inline-table;
width: 280px;
height: 325px;
margin: 0.5em;
border: 1px solid #ccc;
}
a {
color: #8563CF;
text-decoration: none;
font-weight: 100;
}
.thumbnail {
height: 150px;
position: relative;
}
.thumbnail img {
height: 100%;
width: 100%;
object-fit: cover;
object-position: 50% 15%;
}
img {
border: 0;
height: auto;
max-width: 100%;
vertical-align: middle;
}
.p1em {
padding: 1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="carousel">
<div id="carousel">
<div class="slider" style="width: 280px; transform: translate(0px, 0px);">
<div class="item product">
<a href="#">
<div class="thumbnail image">
<img src="https://i.ytimg.com/vi/ZxrUVuOqsy0/maxresdefault.jpg">
</div>
<div class="box p1em">
<div class="heading ellipsis">
<h3>Prueba 1</h3>
</div>
<div class="author">
<span></span>
</div>
<div class="price right">
<p>
<label></label>
<em class="item-price">$40.130,00</em>
</p>
</div>
</div>
</a>
</div> <div class="item product">
<a href="#">
<div class="thumbnail image">
<img src="https://i.ytimg.com/vi/ZxrUVuOqsy0/maxresdefault.jpg">
</div>
<div class="box p1em">
<div class="heading ellipsis">
<h3>Curso de PHP 8 básico, intermedio y, avanzado. </h3>
</div>
<div class="author">
<span>Acaded</span>
</div>
<div class="purchased items-center">
<button>Ir al curso</button>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
The goal here is to shift the order of elements to the left or right. With jQuery this is exceptionally easy.
The logic is as so:
To shift the order to the right, select the last item, delete it, then insert before the first item
To shift the order to the left, select the first item, delete it, then insert after the last item
To achieve this, we attach a click event listener to each respective button. We select all the slider items with the selector $('.item.product'), use last() and first() to get the first and last items, and the remove() function to delete the element. Then, to reorder, we use jQuery's insertBefore() and insertAfter().
This is the result:
$('#right').click(function() {
$('.item.product').last().remove().insertBefore($('.item.product').first());
})
$('#left').click(function() {
$('.item.product').first().remove().insertAfter($('.item.product').last());
})
And the rest is just a matter of styling (note: uses Material Icons for the arrow icons). Define two button elements;
<button id="left" class="nav-btn"><i class="material-icons">chevron_left</i></button>
<button id="right" class="nav-btn"><i class="material-icons">chevron_right</i></button>
The "chevron_right" and "chevron_left" are icon names | List of Icons
Set their position to fixed so that their position isn't lost when the user scrolls. Set the top attribute to calc(50vh - 50px), where 50vh is half the height of the viewport and 50px is the height of the button (to make it exactly in the "center").
A full example (best viewed in full page mode):
var direction_slider = "up";
var current_step = 0;
var scroll_product = false;
var scroll = -1;
$(function() {
$('#right').click(function() {
$('.item.product').last().remove().insertBefore($('.item.product').first());
})
$('#left').click(function() {
$('.item.product').first().remove().insertAfter($('.item.product').last());
})
var $product_carousel = $('.slider');
var products = $product_carousel.children().length;
var product_width = (products * 140);
$product_carousel.css('width', product_width);
var rotating = true;
$(document).on({
mouseenter: function() {
rotating = false;
},
mouseleave: function() {
rotating = true;
}
}, '#carousel');
$product_carousel.on("mousedown", function(e) {
scroll_product = true;
scroll = e.pageX;
event.preventDefault();
}).on("mouseup", function(e) {
scroll_product = false;
var num = Math.floor(Math.abs(scroll - e.pageX) / 140);
var dir = scroll - e.pageX < 0 ? "up" : "down";
for (var x = 0; x < num; x++) {
var $first = $('.slider .item:first');
var $last = $('.slider .item:last');
if (dir == "up") {
$last.prependTo(".slider");
} else {
$first.appendTo(".slider");
}
}
$(".slider").css("transform", "translate(0, 0)")
}).on("mousemove", function(e) {
if (scroll_product) {
$(".slider").css("transform", "translate(" + (e.pageX - scroll) + "px, 0)")
}
});
});
/* button integration styling (start) */
#left {
left: 10px;
}
#right {
right: 10px;
}
.nav-btn {
position: fixed;
top: calc(50vh - 50px);
z-index: 100;
z-index: 100;
height: 50px;
width: 50px;
border-radius: 50%;
cursor: pointer;
background-color: white;
box-shadow: 0 0 1px black;
transition: 0.2s;
}
.nav-btn:hover {
background-color: #d1d1d1;
}
/* button integration styling (end) */
.carousel {
margin: 0 auto;
padding: 1em;
width: 100%;
max-width: 1170px;
margin-left: auto;
overflow: hidden;
}
.slider {
width: 100% !important;
display: flex;
}
.item {
display: inline-table;
width: 280px;
height: 325px;
margin: 0.5em;
border: 1px solid #ccc;
}
a {
color: #8563CF;
text-decoration: none;
font-weight: 100;
}
.thumbnail {
height: 150px;
position: relative;
}
.thumbnail img {
height: 100%;
width: 100%;
object-fit: cover;
object-position: 50% 15%;
}
img {
border: 0;
height: auto;
max-width: 100%;
vertical-align: middle;
}
.p1em {
padding: 1em;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="carousel">
<button id="left" class="nav-btn"><i class="material-icons">chevron_left</i></button>
<button id="right" class="nav-btn"><i class="material-icons">chevron_right</i></button>
<div id="carousel">
<div class="slider" style="width: 280px; transform: translate(0px, 0px);">
<div class="item product">
<a href="#">
<div class="thumbnail image">
<img src="https://i.ytimg.com/vi/ZxrUVuOqsy0/maxresdefault.jpg">
</div>
<div class="box p1em">
<div class="heading ellipsis">
<h3>Prueba 1</h3>
</div>
<div class="author">
<span></span>
</div>
<div class="price right">
<p>
<label></label>
<em class="item-price">$40.130,00</em>
</p>
</div>
</div>
</a>
</div>
<div class="item product">
<a href="#">
<div class="thumbnail image">
<img src="https://i.ytimg.com/vi/ZxrUVuOqsy0/maxresdefault.jpg">
</div>
<div class="box p1em">
<div class="heading ellipsis">
<h3>Curso de PHP 8 básico, intermedio y, avanzado. </h3>
</div>
<div class="author">
<span>Acaded</span>
</div>
<div class="purchased items-center">
<button>Ir al curso</button>
</div>
</div>
</a>
</div>
<div class="item product">
<a href="#">
<div class="thumbnail image">
<img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=96&d=identicon&r=PG&f=1">
</div>
<div class="box p1em">
<div class="heading ellipsis">
<h3>Spectric</h3>
</div>
<div class="author">
<span>Spectric</span>
</div>
<div class="purchased items-center">
<button>Check out</button>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
Looking for a good JavaScript to help me hide/show multiple divs with a button click not an a href click so I can use it in blogger.
I've been looking for an answer for a while now and have been unable to find a good one that uses JavaScript and/or CSS. I am a bit of a novice so bear with me.
Following is my code that works but I would like to simplify it and make it work so that it will close the div when I click the appropriate button again.
css
<head>
<style>
#myDIV1 {
width: 150px;
height: 150px;
background-color: lightblue;
display: none;
}
#myDIV2 {
width: 150px;
height: 150px;
background-color: lightblue;
display: none;
}
#myDIV3 {
width: 150px;
height: 150px;
background-color: lightblue;
display: none;
}
#myDIV4 {
width: 150px;
height: 150px;
background-color: lightblue;
display: none;
}
</style>
</head>
I know there is an easier way but this is the only way that I can find that works for what I want it to do for the most part
html
<body>
<p>Click button to see div.</p>
<button onclick="myFunction1()">One</button>
<button onclick="myFunction2()">Two</button>
<button onclick="myFunction3()">Three</button>
<button onclick="myFunction4()">Four</button>
<div id="myDIV1">
This is the div1 element.
</div>
<div id="myDIV2">
This is the div2 element.
</div>
<div id="myDIV3">
This is the div3 element.
</div>
<div id="myDIV4">
This is the div4 element.
</div>
Javascript
<script>
function myFunction1() {
document.getElementById("myDIV1").style.display = "block";
document.getElementById("myDIV2").style.display = "none";
document.getElementById("myDIV3").style.display = "none";
document.getElementById("myDIV4").style.display = "none";
}
function myFunction2() {
document.getElementById("myDIV1").style.display = "none";
document.getElementById("myDIV2").style.display = "block";
document.getElementById("myDIV3").style.display = "none";
document.getElementById("myDIV4").style.display = "none";
}
function myFunction3() {
document.getElementById("myDIV1").style.display = "none";
document.getElementById("myDIV2").style.display = "none";
document.getElementById("myDIV3").style.display = "block";
document.getElementById("myDIV4").style.display = "none";
}
function myFunction4() {
document.getElementById("myDIV1").style.display = "none";
document.getElementById("myDIV2").style.display = "none";
document.getElementById("myDIV3").style.display = "none";
document.getElementById("myDIV4").style.display = "block";
}
</script>
Any help would be appreciated thanks in advance.
I would suggest to separate your code first - it would be then more clean and reusable - like myStyle.css, myScript.js, index.html
Add the css and js file in the html file like -
<link rel="stylesheet" type="text/css" href="myStyle.css">
<script type="text/javascript" src="myScript.js"></script>
src -> indicates the source path of the file. Here I assume that all our css, js, 'html' file in same place.
var divs = ["Div1", "Div2", "Div3", "Div4"];
var visibleDivId = null;
function divVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
}
function hideNonVisibleDivs() {
var i, divId, div;
for(i = 0; i < divs.length; i++) {
divId = divs[i];
div = document.getElementById(divId);
if(visibleDivId === divId) {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
}
.buttons a {
font-size: 16px;
}
.buttons a:hover {
cursor:pointer;
font-size: 16px;
}
<div class="main_div">
<div class="buttons">
Div1 |
Div2 |
Div3 |
Div4
</div>
<div class="inner_div">
<div id="Div1">I'm Div One</div>
<div id="Div2" style="display: none;">I'm Div Two</div>
<div id="Div3" style="display: none;">I'm Div Three</div>
<div id="Div4" style="display: none;">I'm Div Four</div>
</div>
</div>
if you want to hide/show all divs simultaneously than you have to give all divs same class for ex: .toggle and than you can do this:
function myFunction1(){
$(".toggle").slideToggle();
}
if you want to hide/show one div at a time than you can do this with id :
function myFunction1(){
$("#myDIV1").slideToggle();
}
with different buttons :
function myFunction1(id){
$("#"+id).slideToggle();
}
pass id here :
<button onclick="myFunction1('myDIV1')">One</button>
<button onclick="myFunction1('myDIV2')">Two</button>
<button onclick="myFunction1('myDIV3')">Three</button>
<button onclick="myFunction1('myDIV4')">Four</button>
I found the answer to what I wanted with the .toggle function thanks for the help. The answer I found here: radomsnippets.com
We can easily add an unlimited amount of buttons using reusable code.
here is a full example! Enjoy
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.generalclass {
width: 100%;
color: #ffffff;
text-align: center;
background-color: #000000;
margin: 10px;
padding: 10px;
display: none;
}
.button{
background: red;
padding: 10px;
border-radius: 5px;
color: #FFFFFF;
font-size: 16px;
border: none;
}
.button:hover{
background: black;
}
</style>
</head>
<body>
<button class="button" onclick="myFunction('button1')">Button 1</button>
<button class="button" onclick="myFunction('button2')">Button 2</button>
<div id="button1" class="generalclass">
<p>I can show anything here</p>
</div>
<div id="button2" class="generalclass">
<p>I can show anything here too and different from button 1</p>
</div>
<script>
function myFunction(divid) {
var x = document.getElementById(divid);
if (x.style.display == "none")
{
x.style.display = "block";
}
else {
x.style.display = "none";
}
}
</script>
</body>
</html>
I'm new and learning to code a website!
I'm trying to do this hover header that when the user scroll down, it will remain on the screen and when the user reaches Sub-Header 1, it will hover it too and changes if the user reaches Sub-Header 2(Sub-Header 1 will then disappear)
This is what I'm working on http://goo.gl/KqAM2R
Thanks in advance!
http://i.imgur.com/flT3oJ1.jpg
You need to use JavaScript to achieve this effect. SSCCE:
NewFile.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="NewFile.js"></script>
<link rel="stylesheet" type="text/css" href="NewFile.css"></head>
<body>
<header class="fixed-top">Europe</header>
<div class="much-text">doge</div>
<header class="whatever1 doge">Heatwave</header>
<div class="much-text">doge</div>
<header class="whatever2 doge">2k15</header>
<div class="much-text">doge</div>
</body>
</html>
NewFile.js:
function isElementInViewport (el, topOrBottom) {
//special bonus for those using jQuery
if (typeof jQuery === "function" && el instanceof jQuery) {
el = el[0];
}
var rect = el.getBoundingClientRect();
if(topOrBottom == "top"){
return rect.top >= 0;
}else{
return rect.bottom <= $(window).height();
}
}
function onVisibilityChange () {
var headers = document.getElementsByClassName("doge");
var headerAbove = null;
for(i = 0; i<headers.length; i++){
$( headers[i]).css("position","");
$( headers[i]).css("top","");
if(!isElementInViewport(headers[i], "top")){
headerAbove = headers[i];
}
}
if(headerAbove != null){
$( headerAbove).css("position","fixed");
$( headerAbove).css("top","30px");
}
}
$(window).on('DOMContentLoaded load resize scroll', onVisibilityChange);
And NewFile.css
#CHARSET "UTF-8";
.fixed-top{
width:100%;
position:fixed;
top:0px;
background-color: red;
}
.whatever1{
width:100%;
background-color: green;
}
.whatever2{
width:100%;
background-color: blue;
}
.much-text{
height: 2000px;
}
.doge {
}
Thanks to authors of answers in How to tell if a DOM element is visible in the current viewport? for an inspiration. Also, I am aware that this code doesn't meet all good practices writing in js & css but OP clearly can find the idea from this one. Notice that you may need to sort headers (from the top header to the bottom header) in your own way before iterating on them in function onVisibilityChange
Try this...
HTML
<div id="page" class="page">
<div class="container">
<div class="contentheadercontainer">
<div class="fsh"><div class="firstheader">Sub header 1</div></div>
<div class="fsh"><div class="secondheader" id='secondheader'><p style='margin-left: 15px;'>Sub header 2</p></div></div>
</div>
</div>
</div>
</div>
CSS
body{
padding: 0px; margin: 0px;
}
.container{
height: 1000px;
}
.fsh{
position: absolute; width: 100%;
}
.firstheader{
height: 30px;width: 100%; position:fixed; background: #B14345; padding: 15px; color: #fff;
}
.secondheader{
border-top: 1px solid #bbb; padding: 5px 0px 5px 0px; margin-top: 300px; width: 100%; background: #B14345;color: #fff;
}
Javascript
document.addEventListener("scroll", function(){
scrollDetect();
});
function scrollDetect(){
var html = document.documentElement;
var top = (window.pageYOffset || html.scrollTop) - (html.clientTop || 0);
if(top > 235){
document.getElementById('secondheader').style.position = 'fixed';
document.getElementById('secondheader').style.marginTop = '60px';
document.getElementById('secondheader').style.width='100%';
}else{
document.getElementById('secondheader').style.position = 'inherit';
document.getElementById('secondheader').style.marginTop = '300px';
}
}
Check out this JSFiddle
I want to design the dialog in html5. This dialog should accept the freetext and image as parameters. I tried to open dialog as below.. Now I want to pass the parameters so that I can use that dialog everywhere..
<!DOCTYPE html>
<html>
<head>
<style>
#overlay
{
visibility: hidden;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align: center;
z-index: 200;
background-image: url(maskBG.png);
}
#overlay div
{
width: 300px;
margin: 100px auto;
background-color: #fff;
border: 1px solid #400;
padding: 15px;
text-align: center;
}
.close
{
text-decoration: underline;
}
</style>
<script>
function overlay() {
var el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
function overlayTest(arg) {
//alert(arg);
var el = document.getElementById("overlay").click(moveImages('Testing123'));
//alert(arg);
// el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
function close() {
document.getElementById("overlay").style.visibility = 'hidden';
}
function moveImages(arg) {
alert('in Move Images');
}
</script>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<p align="center">
<button type="button" onclick="overlay()" id="btnEffluentTreatment">EFFLUENT TREATMENT</button>
<button type="button" onclick="overlayTest('My MyTesting')" id="btnTry">Try1</button>
</p>
<div id="overlay" >
<div>
<p>
<img src="010.png" />
Content/Images whatever we want the user to see goes here.
</p>
<button type="button" onclick="overlay()" id="btnEffluentTreatment">Close</button>
</div>
</div>
</body>
</html>
I have an iframe in my HTML document and I'm having a bit of trouble.
I also have a URL bar (fixed position element) at the top of the page that should stay with the user as they scroll. That works fine. I'd like the iframe to fill the remaining space but not be covered up by the URL bar.
This is what I'm talking about. http://s75582.gridserver.com/Ls
How can I fix this so that the URL bar doesn't cover up part of the page? When I try setting padding in the body, it just creates an extra, annoying scroll bar.
Whilst you can't say ‘height: 100% minus some pixels’ in CSS, you can make the iframe 100% high, then push its top down using padding. Then you can take advantage of the CSS3 box-sizing property to make the padding get subtracted from the height.
This:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<title>test</title>
<style type="text/css">
html, body { margin: 0; padding: 0; height: 100%; }
#bar { height: 32px; background: red; }
iframe {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
border: none; padding-top: 32px;
box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
</style>
</head><body>
<iframe src="http://www.google.com/"></iframe>
<div id="bar">foo</div>
<body></html>
Works on IE8, Moz, Op, Saf, Chrome. You'd have to carry on using a JavaScript fallback to make the extra scrollbar disappear for browsers that don't support box-sizing though (in particular IE up to 7).
It can be done without any Javascript, works in IE7
CSS:
body {
overflow-y: hidden;
}
#imagepgframe {
width: 100%;
height: 100%;
position: absolute;
}
#wrap {
width: 100%;
position: absolute;
top: 100px;
left: 0;
bottom: 0;
}
HTML:
<div id="wrap">
<iframe id="imagepgframe" frameBorder="0" src="http://en.wikipedia.org/wiki/Internet_Explorer_7"></iframe>
</div>
To build on top of bobince's answer:
Erik Arvidsson came up with a way to (kinda, sorta) add box-sizing support to IE6/IE7. However, his solution doesn't support units other than px. Like you, I needed a percentage height, so I added support for percents.
Once you've downloaded and unzipped the zip file, open boxsizing.htc and replace the following border/padding functions:
/* border width getters */
function getBorderWidth(el, sSide) {
if (el.currentStyle["border" + sSide + "Style"] == "none")
return 0;
var n = parseInt(el.currentStyle["border" + sSide + "Width"]);
return n || 0;
}
function getBorderLeftWidth() { return getBorderWidth((arguments.length > 0 ? arguments[0] : element), "Left"); }
function getBorderRightWidth() { return getBorderWidth((arguments.length > 0 ? arguments[0] : element), "Right"); }
function getBorderTopWidth() { return getBorderWidth((arguments.length > 0 ? arguments[0] : element), "Top"); }
function getBorderBottomWidth() { return getBorderWidth((arguments.length > 0 ? arguments[0] : element), "Bottom"); }
/* end border width getters */
/* padding getters */
function getPadding(el, sSide) {
var n = parseInt(el.currentStyle["padding" + sSide]);
return n || 0;
}
function getPaddingLeft() { return getPadding((arguments.length > 0 ? arguments[0] : element), "Left"); }
function getPaddingRight() { return getPadding((arguments.length > 0 ? arguments[0] : element), "Right"); }
function getPaddingTop() { return getPadding((arguments.length > 0 ? arguments[0] : element), "Top"); }
function getPaddingBottom() { return getPadding((arguments.length > 0 ? arguments[0] : element), "Bottom"); }
/* end padding getters */
Then replace updateBorderBoxWidth and updateBorderBoxHeight with the following:
function updateBorderBoxWidth() {
element.runtimeStyle.width = "";
if (getDocumentBoxSizing() == getBoxSizing())
return;
var csw = element.currentStyle.width;
var w = null;
if (csw != "auto" && csw.indexOf("px") != -1) {
w = parseInt(csw);
} else if (csw != "auto" && csw.indexOf("%") != -1) {
var origDisplay = element.runtimeStyle.display;
element.runtimeStyle.display = "none";
w = Math.max(0, (parseInt(element.parentNode.clientWidth) - (
getBorderLeftWidth(element.parentNode)
+ getPaddingLeft(element.parentNode)
+ getPaddingRight(element.parentNode)
+ getBorderRightWidth(element.parentNode)
)) * (parseInt(csw) / 100));
element.runtimeStyle.display = origDisplay;
}
if (w !== null) {
if (getBoxSizing() == "border-box") {
setBorderBoxWidth(w);
} else {
setContentBoxWidth(w);
}
}
}
function updateBorderBoxHeight() {
element.runtimeStyle.height = "";
if (getDocumentBoxSizing() == getBoxSizing())
return;
var csh = element.currentStyle.height;
var h = null;
if (csh != "auto" && csh.indexOf("px") != -1) {
h = parseInt(csh);
} else if (csh != "auto" && csh.indexOf("%") != -1) {
var origDisplay = element.runtimeStyle.display;
element.runtimeStyle.display = "none";
h = Math.max(0, (parseInt(element.parentNode.clientHeight) - (
getBorderTopWidth(element.parentNode)
+ getPaddingTop(element.parentNode)
+ getPaddingBottom(element.parentNode)
+ getBorderBottomWidth(element.parentNode)
)) * (parseInt(csh) / 100));
element.runtimeStyle.display = origDisplay;
}
if (h !== null) {
if (getBoxSizing() == "border-box") {
setBorderBoxHeight(h);
} else {
setContentBoxHeight(h);
}
}
}
Then just use the file as you would otherwise:
.border-box {
behavior: url("boxsizing.htc");
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
Here's a pretty thorough test I put together while developing my modifications:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>box-sizing: border-box;</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: yellow;
}
body {
padding-top: 50px;
padding-bottom: 50px;
}
p {
margin: 0;
}
#header, #footer {
height: 50px;
position: absolute;
width: 100%;
overflow: hidden;
}
#header {
background: red;
top: 0;
}
#footer {
background: blue;
bottom: 0;
}
#content {
width: 100%;
height: 100%;
border: none;
margin: 0;
padding: 0;
background: black;
color: white;
overflow: auto;
position: relative;
padding-top: 40px;
padding-bottom: 40px;
}
#nested-header, #nested-footer {
position: absolute;
height: 40px;
width: 100%;
background: #CCC;
}
#nested-header {
top: 0;
}
#nested-footer {
bottom: 0;
}
#nested-content-wrap {
height: 100%;
}
#nested-floater {
height: 100%;
float: left;
width: 100px;
}
#nested-content {
height: 100%;
background: green;
color: black;
overflow: auto;
position: relative;
}
#inner-nest {
height: 100%;
position: relative;
}
#inner-head {
height: 30px;
width: 100%;
background: #AAA;
position: absolute;
top: 0;
}
#inner-content {
padding-top: 30px;
height: 100%;
overflow: auto;
}
.border-box {
behavior: url("boxsizing.htc");
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.content-box {
behavior: url("boxsizing.htc");
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
}
legend {
color: black;
}
form {
margin: 1em 0;
}
.wrap {
height: 100px;
background: #000;
overflow: hidden;
}
.test {
width: 100px;
height: 100%;
background: #AAA;
border-color: #EEE;
padding-left: 20px;
padding-top: 20px;
padding-bottom: 5px;
float: left;
}
.fill {
width: 100%;
height: 100%;
background: #CCC;
}
.gauge {
width: 99px;
background: white;
border-right: 1px solid green;
height: 100%;
float: left;
}
.notes {
background: #8FC561;
}
.clear {
clear: both;
}
/* 120px x 120px square; this will create a black 20px frame on the inside */
.boxtest-wrapper {
width: 100px;
height: 100px;
float: left;
background: black;
color: white;
margin: 1em;
padding: 20px;
}
#boxtest-4-container {
width: 100%;
height: 100%;
}
.boxtest {
width: 100%;
height: 100%;
background: white;
color: black;
border: 5px solid green;
overflow: hidden;
}
</style>
<script type="text/javascript">
function addBorderBox() {
var wrap1 = document.getElementById("wrap-1");
var wrap2 = document.getElementById("wrap-2");
var borderBox = document.createElement("div");
borderBox.className = "test border-box";
var borderBoxFill = document.createElement("div");
borderBoxFill.className = "fill";
var borderBoxContent = document.createTextNode("Generated border box fill");
borderBoxFill.appendChild(borderBoxContent);
borderBox.appendChild(borderBoxFill);
var gauge = document.createElement("div");
gauge.className = "gauge";
var gaugeText1 = "width: 100px";
var gaugeText2 = "height: 100%";
var gaugeText3 = "bottom should be visible";
gauge.appendChild(document.createTextNode(gaugeText1));
gauge.appendChild(document.createElement("br"));
gauge.appendChild(document.createTextNode(gaugeText2));
gauge.appendChild(document.createElement("br"));
gauge.appendChild(document.createTextNode(gaugeText3));
wrap1.appendChild(borderBox);
wrap2.appendChild(gauge);
}
</script>
</head>
<body id="body" class="border-box">
<div id="header">
<p>Header - 50px;</p>
</div>
<div id="content" class="border-box">
<div id="nested-header">
<p>Nested Header - 40px;</p>
</div>
<div id="nested-content-wrap">
<div id="nested-floater">
<p>Float - 100px;</p>
<ul>
<li>This element should never scroll.</li>
</ul>
</div>
<div id="nested-content">
<div id="inner-nest">
<div id="inner-head">
<p>Inner Head - 30px;</p>
</div>
<div id="inner-content" class="border-box">
<div style="float: right; ">
<p>The fourth square should look just like the other three:</p>
<div id="boxtest-wrapper-1" class="boxtest-wrapper">
<div id="boxtest-1" class="boxtest border-box"></div>
</div>
<div id="boxtest-wrapper-2" class="boxtest-wrapper">
<div id="boxtest-2" class="boxtest border-box"></div>
</div>
<br class="clear" />
<div id="boxtest-wrapper-3" class="boxtest-wrapper">
<div id="boxtest-3" class="boxtest border-box"></div>
</div>
<div id="boxtest-wrapper-4" class="boxtest-wrapper">
<div id="boxtest-4-container">
<!-- boxtest-4-container isn't special in any way. it just has width and height set to 100%. -->
<div id="boxtest-4" class="boxtest border-box"></div>
</div>
</div>
</div>
<p>Inner Content - fluid</p>
<ul>
<li>The top of the scrollbar should be covered by the “Inner Head” element.</li>
<li>The bottom of the scrollbar should be visible without having to scroll “Inner Head” out of view.</li>
</ul>
<p>Document Compat Mode:
<strong id="compatMode">
<script type="text/javascript">
var compatMode = document.compatMode;
if (compatMode != "CSS1Compat") {
document.getElementById("compatMode").style.color = "red";
}
document.write(compatMode);
</script>
</strong>
</p><br />
<div class="notes">
<h2>Notes</h2>
<ul>
<li>In IE6 and IE7 (and possibly IE8; untested), you'll notice a slight shift of contents that have <code>box-sizing</code> set to <code>border-box</code>. This is the amount of time it takes for box-sizing.htc to finish downloading.</li>
<li>This workaround is not live. Anything that causes a reflow or repaint will not currently trigger an update to widths and heights of <code>border-box</code> elements.</li>
<li>See http://webfx.eae.net/dhtml/boxsizing/boxsizing.html for the original solution to the IE6/IE7 <code>border-box</code> problem. box-sizing.htc has been modified to allow for percentage widths and heights.</li>
<li>To see what this example should look like without the use of box-sizing.htc, view it in Firefox or IE8.</li>
</ul>
</div>
<br class="clear" />
<form>
<fieldset>
<legend>DOM Update Test</legend>
<input type="button" value="Click to add border-box" onclick="addBorderBox(); " />
</fieldset>
</form>
<div id="wrap-1" class="wrap">
<div class="test content-box" id="content-box-1" style="border-width: 5px; border-style: solid;">
<div class="fill">Content box fill</div>
</div>
<div class="test content-box" id="content-box-2" style="border-width: 5px; border-style: solid; padding: 5px;">
<div class="fill">Content box fill</div>
</div>
<div class="test border-box" id="border-box-1" style="border-width: 5px; border-style: solid;">
<div class="fill">Border box fill</div>
</div>
<div class="test border-box" id="border-box-2" style="border-width: 5px; border-style: solid; padding: 5px;">
<div class="fill">Border box fill</div>
</div>
<div class="test" id="default-box-1" style="border-width: 5px; border-style: solid;">
<div class="fill">Default box fill</div>
</div>
<div class="test" id="default-box-2" style="border-width: 5px; border-style: solid; padding: 5px;">
<div class="fill">Default box fill</div>
</div>
</div>
<div id="wrap-2" class="wrap">
<!-- subtract 1 from width for 1px right border -->
<div class="gauge" style="width: 129px;">width: 130px<br />height: 100%<br />bottom should be cut off</div>
<div class="gauge" style="width: 119px;">width: 120px<br />height: 100%<br />bottom should be cut off</div>
<div class="gauge">width: 100px<br />height: 100%<br />bottom should be visible</div>
<div class="gauge">width: 100px<br />height: 100%<br />bottom should be visible</div>
<div class="gauge" style="width: 129px;">width: 130px<br />height: 100%<br />bottom should be cut off</div>
<div class="gauge" style="width: 119px;">width: 120px<br />height: 100%<br />bottom should be cut off</div>
</div>
<br class="clear" />
<script type="text/javascript">
var lipsum = "<p>Lorem ipsum dolor sit amet.</p>";
for (var i = 0; i < 100; i++) {
document.write(lipsum);
}
</script>
</div>
</div>
</div>
</div>
<div id="nested-footer">
<p>Nested Footer - 40px;</p>
</div>
</div>
<div id="footer">
<p>Footer - 50px;</p>
</div>
</body>
</html>
If by covering up part of the page, you mean the page displayed in the iframe, one thought might be to add a top margin to your iframe, using the margin-top: property in CSS. This would eliminate the scroll bar given that you properly constrained the height of the iframe.
Android Kotlin Answer
For example, I am using padding for iFrame of WebView in this way:
val url = "www.stackoverflow.com"
val iframeExample = "<html><body style=\"margin: 0; padding: 0\"><iframe width=\"100%\" src=\"$url\" frameborder=\"0\" allowfullscreen></iframe></body></html>"
webView.loadData(iframeExample, "text/html", "utf-8")