Is this possible? I have tried setting z-index: 999; on the one I want to overlap on on, but then but no luck.
basically i am trying to overlap #cgdiv on #cDiv
Style:
#cgDiv {
z-index:999;
display: inline-block;
height: 100%;
vertical-align: top;
width: 30%;
}
#contentGenerator, #content {
height: 100%;
width: 100%;
}
#cDiv {
z-index:998;
display: inline-block;
height: 100%;
vertical-align: top;
width: 69.5%;
}
body { margin: 0}
Html
<HTML>
<HEAD>
</HEAD>
<BODY >
<DIV id="cgDiv">
<IFRAME id="contentGenerator" src="content.html">
</IFRAME>
</DIV>
<DIV id="cDiv">
<IFRAME id="content" src="startNSM.html">
</IFRAME>
</DIV>
</BODY>
</HTML>
yes. you can set position:absolute and top:0 to overlap them
position: absolute;
top: 0;
see this fiddle example
https://jsfiddle.net/qvct1tnm/2/
Related
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've been playing around with changing an images color overlay, through the use of a div:after pseudo element, with matching border-radius.
https://jsbin.com/konopak/1/edit?html,output
You will notice on first load the background color is a solid square, but if you shift the frame, or change any element on the page it renders it properly. Is there a way to make it render properly on first load? Why is this happening?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
img {
max-width: 100%;
height: auto;
border-radius: 90px;
}
.hero-image {
position: relative;
max-width: 200px;
display: flex;
background-color: #ff000050;
/* border-radius: 90px; */
}
.hero-image:after {
position: absolute;
height: 100%;
width: 100%;
background-color: inherit;
top: 0;
left: 0;
display: block;
content: "";
border-radius: 90px;
}
</style>
</head>
<body>
<label id="color-label" style="background-color: #ff0000; height: 18px; width: 18px; border-radius: 10px; cursor: crosshair;">
<input id="color-tag" type="color" value="#ff0000" style="visibility: hidden;">
</label>
<div class="hero-image">
<img src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=400&w=400" id="cat" alt=""/>
</div>
<script>
const label = document.getElementById('color-label');
document.getElementById('color-tag').addEventListener('change', function () {
label.style.backgroundColor = this.value;
let imgDom = document.querySelector('.hero-image');
imgDom.style.backgroundColor = this.value + '40';
// imgDom[0].style.backgroundColor = this.value;
});
</script>
</body>
</html>
You can simply add overflow: hidden; to the parent and remove the additional border-radius properties and display: flex which is causing the display issue in safari.
I suggest making a few updates as per below to help with image scaling too:
img {
width: 100%;
height: auto;
}
.hero-image {
position: relative;
max-width: 200px;
max-height: 200px;
background-color: #ff000050;
border-radius: 90px;
overflow: hidden;
}
.hero-image:after {
position: absolute;
height: 100%;
width: 100%;
background-color: inherit;
top: 0;
left: 0;
display: block;
content: "";
}
The container parent's radius + overflow should be all that's needed and the additional child properties are superfluous.
JSbin update
I'm writing an html page that should have the following behavior:
When loaded it contains an empty <div> with a link inside it.
Once pressed the link runs the script StartTrial.js which is supposed to load an image from a directory, visualize it, and give some instructions on what to do.
However, as you can see, once the image is loaded it covers the instructions. This is cause the instructions are written in a <div> that has a margin of 30px from the container <div> with its size before loading the image. How can I fix my code so that the text is always shown with a 30px margin from the bottom of the image?
Here are my code snippets:
Html
<div id="container">
Start Trial
<img class="displays" id="t1_img" src="./images/immi.jpg">
</div>
<div class="instruction" id="instr_1">
<p><b>Instruction:</b><p>
<p>Some text here.</p>
</div>
CSS
#container {
position: relative;
background: gray;
width: 300px;
height: 300px;
margin: 30px;
}
.displays {
position: absolute;
display: none;
top: 0px;
left: 0px;
}
JavaScript
function StartTrial() {
$('#startTrial').hide();
$('#t1_img').show();
$('#instr_1').show();
}
Change your css to use min-height and min-width
#container {
position: relative;
background: gray;
min-width: 300px;
min-height: 300px;
margin: 30px;
}
and remove the absolute positioning, as there is no real need for it.
.displays {
display: none;
top: 0px;
left: 0px;
}
Your image is larger than the container and hence it is overlapping the instructions.
No need to over-engineer it, you can have a css only solution or a simple JS one as follows:
CSS only solution
HTML:
<input type="checkbox" id="startCheckbox" class="start-checkbox"/>
<div id="container" class="container">
<label for="startCheckbox" class="start-trial center">Start Trial</label>
<div class="instruction center" id="instr_1">
<p><b>Instruction:</b></p>
<p>Some text here.</p>
</div>
</div>
CSS:
.center {
position: absolute;
top:0; right:0; bottom:0; left:0;
margin: auto;
}
.container {
border: 1px solid #ccc;
width: 400px;
height: 400px;
position: relative;
}
.container .instruction {
border: 1px dashed #333;
background: rgba(255,238,221,.9);
width: 250px;
height: 250px;
padding: 25px;
text-align: center;
display: none;
}
.container .start-trial {
position: absolute;
height: 20px;
width: 80px;
text-decoration: underline;
cursor: pointer;
}
.container .start-checkbox {
display: none;
}
.start-checkbox {
display: none;
}
.start-checkbox:checked ~ .container .start-trial {
display: none;
}
.start-checkbox:checked ~ .container .instruction {
display: block;
}
.start-checkbox:checked ~ .container {
background: url(http://www.ceritaspros.com/dev/images/dogs/FunnyPuppies/funny-puppies-sleeping-400x400.jpg);
}
Fiddle: http://jsfiddle.net/qobbkh6f/5/
CSS+JS Solution
HTML:
<div id="container" class="container">
Start Trial
<div class="instruction center" id="instr_1">
<p><b>Instruction:</b></p>
<p>Some text here.</p>
</div>
</div>
CSS:
.center {
position: absolute;
top:0; right:0; bottom:0; left:0;
margin: auto;
}
.container {
border: 1px solid #ccc;
width: 400px;
height: 400px;
position: relative;
}
.container .instruction {
border: 1px dashed #333;
background: rgba(255,238,221,.9);
width: 250px;
height: 250px;
padding: 25px;
text-align: center;
display: none;
}
.container.clicked {
background: url(http://www.ceritaspros.com/dev/images/dogs/FunnyPuppies/funny-puppies-sleeping-400x400.jpg);
}
.container.clicked .start-trial {
display: none;
}
.container.clicked .instruction {
display: block;
}
.copntainer.clicked .instruction {
display: block;
}
.container .start-trial {
position: absolute;
height: 20px;
width: 80px;
}
JS:
$("#container").on("click", "#startTrial", function(e) {
e.preventDefault();
$("#container").addClass("clicked");
});
Fiddle: http://jsfiddle.net/qobbkh6f/3/
Try this and let me know if it helps
HTML
<div id="container">
Start Trial
<img class="displays" id="t1_img" src="./images/immi.jpg">
</div>
<div class="instruction" id="instr_1">
<p><b>Instruction:</b><p>
<p>Some text here.</p>
</div>
CSS
#container {
position: relative;
background: grey;
width: 300px;
height: 300px;
margin: 30px;
overflow:hidden
}
.displays {
position: absolute;
top: 0px;
left: 0px;
max-height:100%;
}
Javascript
function StartTrial() {
$('#startTrial').hide();
$('#t1_img').show();
$('#instr_1').show();
}
http://jsfiddle.net/5jx3dn44/
Don't use absolute positioning on your image.
The whole concept of absolute positioning is to make an element overlap the other elements on the page. If you don't want something to overlap other elements then don't use it.
Also don't give a size to your container. It's not the container that's 300x300 and grey - it's your start trial block. If the container is invisible and flexible then it will look good with the image in it when you remove the start trial block. I forget how hide() works but just change to display:none if it doesn't actually remove the element from the layout.
I want to achieve the following layout with 100% height to browser.
Only the content area should be scrollable, when required and footer should be display at the bottom of browser.
But after tried many times i got this one
by using following code.
html { height:100%; }
body { position:absolute; height: 100%; overflow: hidden; top:0; bottom:0; right:0; left:0; padding: 0px; margin: 0px;}
#header, #footer {
float: left;
width: 100%;
/*height: 100px;*/
background-color: #808080;
}
#wrapper {
overflow: scroll;
height: 100%;
width: 999px;
margin: auto;
}
//HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Satkar Travels</title>
<meta name="keywords" content="ltc, travel, Satkar Travels, lfc, Satkar Parivar, Satkar Holidays, Satkar Travels Gurgaon">
<meta name="description" content="A Leader in LTC Travel.">
<meta name="author" content="Satkar Travels">
<link rel="stylesheet" href="StyleSheet.css" type="text/css">
</head>
<body>
<div id="header">
<br><br>
</div>
<div id="wrapper">
<div id="content">
<section>
<p>
</p>
</section>
<section>
<p>
</p>
</section>
<p>
</p>
</div>
</div>
<div id="footer">
<br><br>
</div>
</body>
</html>
please help
Thank you.
Try this example:
.header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50px;
background-color:red;
}
.container {
position: absolute;
top: 51px;
bottom: 51px;
left: 50%;
width: 900px;
margin-left: -450px;
overflow: auto;
background-color: blue;
}
.footer {
position: absolute;
bottom: 50px;
left: 0;
right: 0;
height: 50px;
background-color:red;
}
And then this:
<div class="header"> </div>
<div class="container"> </div>
<div class="footer"> </div>
Here is a fiddle: http://jsfiddle.net/dxL7s/
Is this what you need?
Just need to change in CSS.
Example: demo
or
Apply this css:
html { height:100%; }
body { position:absolute; height: 100%; overflow-x: hidden; top:0; bottom:0; right:0; left:0; padding: 0px; margin: 0px;}
#header{
float: left;
width: 100%;
/*height: 100px;*/
background-color: #808080;
}
#footer {
width:100%;
position:fixed;
bottom:0;
left:0;
background:#808080;
}
#wrapper {
overflow: scroll;
height: 100%;
width: 999px;
margin: auto;
}
I would use fixed position, to align the header and footer at the top and bottom. Then just leave the content with a margin-top to keep it below the header.
HTML:
<header></header>
<div id="mainContent">
Lorem ipsum
</div>
<footer></footer>
CSS:
header {
height: 50px;
width: 100%;
background-color: #f00;
position: fixed;
top: 0;
}
footer {
height: 50px;
width: 100%;
background-color: #ff0;
position: fixed;
bottom: 0;
}
div#mainContent {
margin-top: 60px;
}
Fiddle demo: http://jsfiddle.net/w22dr/1/
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
$('body').click(function(e){
$('div').html(e.pageX +', '+ e.pageY);
$('div').animate({
left: e.pageX,
top: e.pageY
});
});
})
</script>
<style>
html, body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body:after {
content: ".";
display: block;
clear: both;
height: 0;
overflow: hidden;
}
div {
display: block;
float: left;
height: 60px;
left: 262px;
position: relative;
top: 48px;
width: 60px;
z-index: 24;
background: red;
}
span {
width: 150px;
height: 400px;
display: block;
background: green;
position: absolute;
z-index: 92;
top: 40px;
left: 120px;
}
</style>
</head>
<body>
<span> </span>
<div> </div>
</body>
</html>
JsBIN: http://jsbin.com/aqiwiz/2/edit
Hello again stackoverflow!
I have a div and sort of like a wall (the span). Now the div moves around the page wherever you click it. But the problem is I don't want to get the div to move through the wall. I want it to animate around it and do nothing if clicked on the wall.
How do I get this result using javascript/jquery?
You need to apply a pathfinding algorithm.