I looked over this page trying to make a simple mouse over menu work (based on the user:sarfraz' answer). I'm not sure if I'm missing the JavaScript but it seems there shouldn't be any. If I load the page I get a div with "menu" written into a box and moving the mouse over it keeps it there only once. After the mouse is taken off the div box vanishes never to be seen again. I've tried messing with the visibility style in the menu id, setting it to visible or hidden and I've also tried setting the style display:none; with no luck. I also found this page but that one has a permanent list which doesn't vanish with onmouseout. Should I just color the li tag the same as the background and use that?
<html>
<head>
</head>
<style>
body
{
background-repeat:repeat;
background-color: white;
}
#container
{
position: relative;
margin: 0 auto;
height: 100%;
width: 100%;
}
#menu
{
position: absolute;
margin: 0 auto;
height: 100px;
width: 300px;
top: 70%;
left: 40%;
background-color: white;
border:2px solid;
border-color: purple;
}
</style>
<body>
<div id='menu' onMouseOver="this.style.visibility = 'visible';" onMouseOut="this.style.visibility = 'hidden';">menu</div>
</body>
</html>
When he gets visibility = hidden, do not be mouseOver, so the code does not run
Alternative: http://jsfiddle.net/V5QrZ/
Use Jquery
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<style>
body
{
background-repeat:repeat;
background-color: white;
}
#container
{
position: relative;
margin: 0 auto;
height: 100%;
width: 100%;
}
#menu
{
position: absolute;
margin: 0 auto;
height: 100px;
width: 300px;
top: 70%;
left: 40%;
background-color: white;
border:2px solid;
border-color: purple;
}
</style>
<script>
$(document).ready(function(){
$("p").mouseover(function(){
$("#menu").hide()
});
$("p").mouseout(function(){
$("#menu").show()
});
});
</script>
</head>
<body>
<p>Move the mouse pointer over this paragraph.</p>
<div id='menu' >menu</div>
</body>
</html>
Related
Say I have 3 divs grandParent, Parent, and Child. Though parent's tag is inside the grandParent, using position: absolute; the parent is rendered outside the grandParent.
Now I have a child whose height and width is 100%, it is rendered outside the grandparent.
How to force the child to render inside the grandParent only. I want the green div to be fully inside the red div. And yellow div to remain partially outside the red div.
<html>
<head>
<style>
.grandParent {
width: 600px;
height: 700px;
background-color:red;
}
.parent {
position: absolute;
left: 0px;
top: 0px;
width: 360px;
height: 275px;
background-color: yellow;
border: 2px solid yellow;
transform: translate(417px, -88px) rotate(
0deg
);
}
.child {
height: 275px;
background-color: green;
}
</style>
</head>
</head>
</head>
<body>
<div class="grandParent">
<div class="parent">
<div class="child">
</div>
</div>
</div>
</body>
</html>
You should use position: relative; for the grand parent div. Like this code:
.grandParent {
width: 600px;
height: 700px;
background-color: red;
position: relative; /* add this line */
}
.parent {
position: absolute;
left: 0px;
top: 0px;
width: 360px;
height: 275px;
background-color: yellow;
border: 2px solid yellow;
transform: translate(227px, 9px) rotate(0deg); /* modify this line */
}
Read the documentation for the div positioning.
I was able to achieve this by setting absolute positioning on the child div. Note that I have set arbitrary values to get the child div inside the grandparent div separated from the parent div. Make sure you set the desired width on the child div.
<html>
<head>
<style>
.grandParent {
width: 600px;
height: 700px;
background-color:red;
}
.parent {
position: absolute;
left: 0px;
top: 0px;
width: 360px;
height: 275px;
background-color: yellow;
border: 2px solid yellow;
transform: translate(417px, -88px) rotate(
0deg
);
}
.child {
position: absolute; /* add from here */
left: -370px;
top: 100px;
width: 360px; /* to here */
height: 275px;
background-color: green;
}
</style>
</head>
</head>
</head>
<body>
<div class="grandParent">
<div class="parent">
<div class="child">
</div>
</div>
</div>
</body>
</html>
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 want to create divs that stand side by side with and each one fill 25% of the screen in height and width. My script creates divs with 25% height and width, but they stay one below the other. My script is:
function createDiv() {
var div_created = document.createElement("div");
div_created.setAttribute("class", "div1");
document.body.appendChild(div_created);
}
.div1 {
width: 50%;
height: 50%;
background-color: #000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="estilo_segundo.css">
<body>
<button onclick="createDiv()">Click</button>
</body>
.div1 {
width: 50%;
height: 50%;
background-color: #000000;
float:left;
}
Add html,body style & inside div1 add float:left;
html,body
{
width: 100%;
height: 100%;
}
.div1 {
width: 50%;
height: 50%;
background-color: #000000;
float:left;
}
Live Demo Here
Snippet Example
function createDiv() {
var div_created = document.createElement("div");
div_created.setAttribute("class", "div1");
document.body.append(div_created);
}
html,
body {
width: 100%;
height: 100%;
}
.div1 {
width: 50%;
height: 50%;
background-color: #000000;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<button onclick="createDiv()">Click</button>
</body>
You could use the display: table; in a wrapper div and simplify your JS:
<html><head>
<script type="text/javascript">
function createDiv() {
document.getElementById('div1').innerHTML += '<div></div>';
}
</script>
<style type="text/css">
#div1 {
width: 100%;
height: 100%;
display: table;
background-color: #000000;
}
#div1 div {
display: table-cell;
border: 1px solid green; /* green for display */
}
</style>
</head><body>
<button onclick="createDiv()">Click</button>
<div id="div1" name="div1"></div>
</body></html>
This adds an inner 'cell' to the div1 wrapper div. Since the wrapper takes up the display height/width, each inner div has an 'auto' width to it (as a table <td> would).
I designed my site so that a navigation bar spans down the whole site. It is handled in a div. The rest of the site is inside divs as well, and will be placed beside the navigation div.
After placing the first div beside the navigation div, everything worked out. When I tried to add a second div beside the navigation div and under the first div, it goes outside of the body. I can I fix this?
THE ORANGE BORDER DIV IS THE ONE I AM TRYING TO FIX
Here is my site
: JSFiddle would be to large and hard to understand, so please use the console in your browser to help me out.
firstBox is the div that isn't working how I want it to. #navigationPane and #topBox are in the right position
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/stellar.js/0.6.2/jquery.stellar.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
function dBug(data) {
console.log(data);
}
dBug("document ready");
$.stellar();
});
</script>
<style type="text/css">
body {
margin-top: 0px;
margin-bottom: 0px;
margin-top: 20px;
margin-bottom: 20px;
width: 1000px;
min-height: 800px;
max-height: 1200px;
margin-left: auto;
margin-right: auto;
font-family: Verdana,Helvetica,Arial,sans-serif;
border: solid green 1px;
}
h1 {
text-align: center;
margin-top: 10px;
color: white;
margin-top: 20px;
}
p {
color: white;
text-align: center;
}
#small {
font-style: italic;
font-size: 10px;
margin-top: -12px;
}
#topBox {
height: 400px;
width: 929px;
border: solid blue 1px;
float: right;
margin-top: -1px;
margin-right: -1px;
background-image: url(image.jpg);
background-size: 1400px 600px;
background-position: -0% 60%;
cursor: default;
}
#firstBox {
height: 400px;
width: 928px;
border: solid orange 1px;
float: right;
cursor: default;
}
#navigationPane {
width: 70px;
margin-left: -1px;
border: solid red 1px;
min-height: 1200px;
max-height: 2000px;
margin-bottom: -1px;
margin-top: -1px;
background-color: purple;
}
#box {
width: 500px;
height: 150px;
border: dotted white 2px;
clear: none;
background-color: rgba(0, 0, 0, 0.85);
margin-left: 200px;
margin-top: 120px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#navigationPane img {
margin-left: 5px;
margin-top: 10px;
}
a:hover {
opacity: 0.8;
}
</style>
</head>
<body>
<div id="topBox" data-stellar-background-ratio="0.2">
<div id="box" >
<h1>WH Programming</h1>
<p>Will Houle Programming - Student Developer</p>
<p id="small">A site created to host tutorials, past lab assignments, and future endeavors.</p>
</div>
</div>
<div id="navigationPane">
<img src="twitter.png" />
<img src="humber.png" />
</div>
<div id="firstBox">
</div>
</body>
</html>
I know the coding is very unorganized, but for now this is what im working with
Have you tried to add some css property which is useful for you?
however, let me tell you. you should use position and top property for the box which is going out of thr body.
here is that code:
<div id="firstBox" style="
position: relative;
top: -800;"></div>
or
in your #firstdiv of css stylesheet add these two:
position: relative;
top: -800;
<!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.