<!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.
Related
I'm just practicing some html/css/js and thought about creating a small program that acts like a light switch that turns an image on and off.
Everything is fine except for my 'ON' button and 'OFF' button has the same heading 'H2' so when I go into CSS it has no idea which one is for what which is understandable. I tried renaming the 'H2' to 'H2.left_switch' and 'H2.right_switch respectively <-- saw it somewhere, but it didn't work/ it wasn't displaying the correct heading.
HTML
h1 {
position: absolute;
left: 65px;
top: 150px;
}
h2 {
position: absolute;
left: 40px;
top: 150px;
}
h2 {
position: absolute;
left: 100px;
top: 150px;
}
.leftButton {
position: absolute;
top: 300px;
left: 60px;
width: 40px;
height: 30px;
background-color: gray;
}
.rightButton {
position: absolute;
top: 300px;
left: 130px;
width: 40px;
height: 30px;
background-color: gray;
}
.backBoard {
position: absolute;
top: 210px;
left: 40px;
width: 150px;
height: 150px;
background-color: rgb(218, 216, 216);
}
<!DOCTYPE html>
<html>
<link rel = "stylesheet" type = "text/css" href = "gayle.css">
<head>
<h1>FESTA</h1>
<h2> ON </h2>
<h2> OFF </h2>
</head>
<body>
<div class="center">
<div class="backBoard"></div>
<!--on-->
<div class="leftButton"></div>
<!--off-->
<div class="rightButton"></div>
<img id = "btsArmyBomb" src = "btsArmyBomb.png"/>
</body>
</html>
Thank you!
H2.left_switch refers to an h2 element with a class name of left_switch. The same goes with the h2.right_switch element.
Just add a class name to your h2 elements as follows:
<h1>FESTA</h1>
<h2 class="left_switch"> ON </h2>
<h2 class="right_switch"> OFF </h2>
And then target the h2 elements in your CSS like this:
h2 {
exampleStyle: exampleProperty; /* This would apply to both h2 */
}
h2.left_switch { /* This would apply to the h2 with ON */
position: absolute;
left: 40px;
top: 150px;
}
h2.right_switch { /* This would apply to the h2 with OFF */
position: absolute;
left: 100px;
top: 150px;
}
N.B. The first h2 in the css is just an example. You don't have to add that.
<h2 class="on"> ON </h2>
<h2 class="off> OFF </h2>
.on{
position: absolute;
left: 40px;
top: 150px;
}
.off{
position: absolute;
left: 100px;
top: 150px;
}
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
So lets say that I have some document
#a{width: 10px; height: 10px; background: red; z-index: 10;}
#b{width: 100%; height: 100%; background: black; z-index: 5; position: absolute;}
<body>
<div id="a">foo</div>
<div id="b">bar</div>
<body>
The #b div covers the #a, because #b has absolute position.
How can I force #b be behind #a without changing #a position?
You can add position: relative to #a element.
You have to set a position other than static to your first div to apply styles like z-index
#a {
width: 100px;
height: 100px;
background: red;
z-index: 10;
position: relative;
}
#b {
width: 100%;
height: 100%;
background: black;
z-index: 5;
position: absolute;
left:0;
top:0;
}
<div id="a">foo</div>
<div id="b">bar</div>
You should add a relative position to your first div :
<body>
<div id="a">foo</div>
<div id="b">bar</div>
<body>
<style>
#a{width: 10px; height: 10px; background: red; z-index: 10; position:relative}
#b{width: 100%; height: 100%; background: black; z-index: 5; position: absolute;}
</style>
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/
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>