I was working on this code and could place the button to where I want with a complex code, but I just want to make it more simple. I can now place the button on the image and change its margin-top position but I cannot change its margin-left position. I want each button for the planet but as I said I cannot place it to where the planets are in the picture with a simple code.
Any ideas about where the issue is?
.upfront {
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-left: 155px;
margin-right: 23px;
}
.menu {}
.spaceBoard {
position: relative;
}
.previews {
left: 173px;
position: releative;
}
.button {
position: absolute;
margin-left: 215;
margin-top: 315px;
z-index: 2;
border-radius: 50%;
border: none;
}
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Başlıksız Belge</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body background="https://i.hizliresim.com/DyZ49m.png">
<script>
function bgClicked() {
var id = document.getElementById("bgClicked");
id.style.visibility = "visible";
document.getElementById("bgMAIN").style.display = "none";
}
</script>
<center>
<div class="upper"><img src="https://i.hizliresim.com/vJ9n5m.png" width="75%" height="75%" /></div>
<!--//<div><img src="Pics/2_.png" style="right:9px; top:12 position:relative;" /></div>-->
<div class="spaceBoard">
<input type="button" class="button" />
<img src="https://i.hizliresim.com/Eyo5pB.png" id="bgMAIN" onclick="bgClicked()">
<img src="https://i.hizliresim.com/mJB15Z.png" style="visibility:hidden;" class="previews;" id="bgClicked;">
</div>
</center>
</body>
</html>
you missed px in margin-left below, now it is move as you want
.upfront{
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-left: 155px;
margin-right: 23px;
}
.menu{
}
.spaceBoard{
position:relative;
}
.previews{
left:173px;
position:releative;
}
.button{
position:absolute;
margin-left:215px;
margin-top:315px;
z-index:2;
border-radius:50%;
border:none;
}
s
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Başlıksız Belge</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body background="https://i.hizliresim.com/DyZ49m.png">
<script>
function bgClicked(){
var id = document.getElementById("bgClicked");
id.style.visibility="visible";
document.getElementById("bgMAIN").style.display="none";
}
</script>
<center>
<div class="upper"><img src="https://i.hizliresim.com/vJ9n5m.png" width="75%" height="75%"/></div>
<!--//<div><img src="Pics/2_.png" style="right:9px; top:12 position:relative;" /></div>-->
<div class="spaceBoard">
<input type="button" class="button" />
<img src="https://i.hizliresim.com/Eyo5pB.png" id="bgMAIN" onclick="bgClicked()">
<img src="https://i.hizliresim.com/mJB15Z.png" style="visibility:hidden;"class="previews;" id="bgClicked;">
</div>
</body>
</html>
Related
The blue block collapses and unfolds, and I need it to appear and perform an animation where it slides down
It's all about slideToggle(300) - this is the very animation of folding and unfolding. I don't want to change the code too much, what can I do about it?
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JS</title>
<link rel="stylesheet" href="stylet.css">
<script src="javat.js"></script>
<script src="jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="button" class="content_toggles"\>
<input type="button" class="content_blocks"\>
</body>
</html>
css
body {
background-color: gray;
}
.content_toggles {
position: absolute;
z-index: 1;
width: 100px;
height: 100px;
background-color: yellow;
border: none;
border-radius: 10px;
background-image: url("img/builderhall1.png");
background-size: 100px;
background-repeat: no-repeat;
}
.content_blocks {
display: none;
position: absolute;
z-index: 2;
margin-top: 100px;
width: 100px;
height: 100px;
background-color: blue;
border: none;
border-radius: 10px;
}
jquery
$(document).ready(function(){
$('.content_toggles').click(function(){
$('.content_blocks').slideToggle(300);
document.getElementById("content_blocks").style.display = "block";
return false;
});
});
I'm not really sure what you're asking here - you should clarify by writing what the issue you're facing is, and what the expected result should be. However, I did notice that you're including your JS file before you load the jQuery library. Simply swap the order of these two lines, or else your javascript code won't work. This is because your javascript code uses jQuery, but you are loading your code before you initialize the jQuery library. Change your HTML to look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JS</title>
<link rel="stylesheet" href="stylet.css">
<script src="jquery-3.6.0.min.js"></script>
<script src="javat.js"></script>
</head>
<body>
<input type="button" class="content_toggles"\>
<input type="button" class="content_blocks"\>
</body>
</html>
I also noticed you are trying to access the content_blocks element by its ID, but you define it by class. Instead of document.getElementById("content_blocks").style.display = "block"; do
// vanilla JS
document.querySelector(".content_blocks").style.display = "block";
// jQuery
$('.content_blocks').style.display = "block";
Or you can do
<input type="button" id="content_toggles"\>
<input type="button" id="content_blocks"\>
Do you mean something like this?
$(document).ready(function(){
$('.content_toggles').click(function(){
$('.content_blocks').slideToggle(300);
});
});
body {
background-color: gray;
}
.content_toggles {
position: absolute;
width: 100px;
height: 100px;
background-color: yellow;
border: none;
border-radius: 10px;
background-image: url("img/builderhall1.png");
background-size: 100px;
background-repeat: no-repeat;
}
.content_blocks {
display: none;
position: absolute;
margin-top: 100px;
width: 100px;
height: 100px;
background-color: blue;
border: none;
border-radius: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JS</title>
<link rel="stylesheet" href="stylet.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="javat.js"></script>
</head>
<body>
<input type="button" class="content_toggles"\>
<input type="button" class="content_blocks"\>
</body>
</html>
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 4 months ago.
Whenever I print any text to the console that is being printed successfully. But when I try to print the HTML line to the console even with ID or class name. That is not working and giving me the output null.
I have this HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Number Game</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<main>
<header>
<h1>Guess the number between 1 and 100</h1>
<button class="play-again">Play Again</button>
<h2 class="result">Result</h2>
</header>
<hr />
<section class="left-content">
<input type="number" class="input-value" />
<button class="check-result">Check</button>
</section>
<section class="right-content">
<p class="message" id="message">Start guessing the number...</p>
<p class="label-score">Score: <span class="score">20</span></p>
<p class="label-highscore">
Highscore: <span class="highscore">0</span>
</p>
</section>
</main>
</body>
</html>
The CSS code is:
* {
font-family: Raleway, sans-serif;
box-sizing: border-box;
}
h1 {
margin-top: 30px;
font-size: 150%;
margin-left: auto;
margin-right: auto;
display: block;
text-align: center;
}
.play-again {
padding: 5px;
margin-left: auto;
margin-right: auto;
text-align: center;
width: fit-content;
display: block;
border: none;
background-color: rgb(38, 194, 64);
border-radius: 3px;
}
.result {
text-align: center;
}
.left-content {
margin-left: auto;
margin-right: auto;
float: left;
width: 50%;
}
input {
width: 50px;
height: 50px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 10px;
padding: 8px;
border-radius: 50%;
display: block;
}
.right-content {
margin-left: auto;
margin-right: auto;
float: left;
width: 50%;
}
.check-result {
padding: 5px;
margin-left: auto;
margin-right: auto;
display: block;
background-color: rgb(38, 194, 64);
border-radius: 3px;
border: none;
}
.check-result:hover,
.play-again:hover {
box-shadow: 0px 0px 10px black;
}
And the JavaScript code is:
"use strict";
console.log(document.querySelector("#message"));
console.log("hi");
The "hi" text printed successfully to the console, but the second line gives me "null" in Chrome. I have also reinstalled Chrome.
image link= "https://drive.google.com/file/d/1Iq2kHr6YFFAWl0pHLnpI9uiWY2WyBwno/view?usp=sharing"
Your Javascript code is running before the HTML finishes loading, to prevent this, add the defer attribute to your <script> tag as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Number Game</title>
<link rel="stylesheet" href="style.css" />
<!-- Adding the defer attribute -->
<script src="script.js" defer></script>
</head>
<body>
<main>
<header>
<h1>Guess the number between 1 and 100</h1>
<button class="play-again">Play Again</button>
<h2 class="result">Result</h2>
</header>
<hr />
<section class="left-content">
<input type="number" class="input-value" />
<button class="check-result">Check</button>
</section>
<section class="right-content">
<p class="message" id="message">Start guessing the number...</p>
<p class="label-score">Score: <span class="score">20</span></p>
<p class="label-highscore">
Highscore: <span class="highscore">0</span>
</p>
</section>
</main>
</body>
</html>
You have added <script> tag in the head section that means your javascript load before the <p id="message"> tag which you want to get and log in console.
Solution - add you script file just before </body> tag closing.
You have to remove the -script- tag to the -head- and put it to the end of the -body-
I'm simply trying to display a grid of boxes with each box having information about a dog breed. My problem is this: There appears to be a difference in behavior when I declare a style in-line vs the same style in a class. I'm confused why there is a difference, when there shouldn't be any as far as I know.
Here is the code behaving properly: http://imgur.com/a/z2b5c
This occurs with the code below. The code to note are the dogDisplay class declared in style, and the div of class dogDisplay in the body. The div has an in-line style="position:absolute".
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.dogDisplay {
display: inline-block;
width: 300px;
height: 300px;
margin: 10px;
background-color: grey;
}
.dogName {
font-size: 20px;
text-align: center;
}
.img {
width: 200px;
height: 200px;
display: block;
margin-left: auto;
margin-right: auto;
}
.content {
background-color: red;
}
</style>
</head>
<script>
//This just loads the dog information from a JSON file
var dogInfo = [];
function displayInfo(dogBreeds) {
$("#container").append("<div class='dogDisplay'></div>");
}
window.onload = function() {
$.getJSON("breeds.json", function(json) {
var i;
console.log(typeof(json.dogBreeds));
dogInfo = json.dogBreeds;
displayInfo(json.dogBreeds);
})
}
</script>
<body>
<div class="well" style="height:300px"></div>
<div id="container" class="container" style="width:100%;background-color:lightblue;border:black 2px solid;">
<div class="dogDisplay" style="position:absolute">
<div class="content">
<p class="dogName">Dog Name</p>
<img class="img" src="images/place-holder.jpg" alt="Place-holder">
</div>
</div>
</div>
</body>
HOWEVER. When moving style="position:absolute" into the dogDisplay class, this is the new behavior: http://imgur.com/a/sv3Oh
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.dogDisplay {
display: inline-block;
width: 300px;
height: 300px;
margin: 10px;
background-color: grey;
position: absolute;
}
.dogName {
font-size: 20px;
text-align: center;
}
.img {
width: 200px;
height: 200px;
display: block;
margin-left: auto;
margin-right: auto;
}
.content {
background-color: red;
}
</style>
</head>
<script>
var dogInfo = [];
function displayInfo(dogBreeds) {
$("#container").append("<div class='dogDisplay'></div>");
}
window.onload = function() {
$.getJSON("breeds.json", function(json) {
var i;
console.log(typeof(json.dogBreeds));
dogInfo = json.dogBreeds;
displayInfo(json.dogBreeds);
})
}
</script>
<body>
<div class="well" style="height:300px"></div>
<div id="container" class="container" style="width:100%;background-color:lightblue;border:black 2px solid;">
<div class="dogDisplay">
<div class="content">
<p class="dogName">Dog Name</p>
<img class="img" src="images/place-holder.jpg" alt="Place-holder">
</div>
</div>
</div>
</body>
Why is there a difference? Thank you!
In your first example, this line:
$("#container").append("<div class='dogDisplay'></div>");
Conflicts with the starting layout:
<div class="dogDisplay" style="position:absolute">
Meaning only the initial .dogDisplay will have the absolute positioning. In the second example, all of them will have the absolute positioning.
Any tips on how I can make it possible to drag the div .handle across the div .slider and get a value when doing so? Thanks in advance.
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Drag to see price</title>
<meta name="description" content="En interaktiv genomgång av Brackets.">
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="slider"></div>
<div class="handle"></div>
</body>
</html>
CSS
.slider{
background-color: black;
width: 500px;
height: 15px;
}
.handle{
background-color: red;
position:absolute;
left: 12px;
top: -0px;
width: 56px;
margin-left: -10px;
height: 32px;
z-index: 3;
cursor: pointer;
}
If you're only catering to IE9 and earlier, consider simply using the HTML5 input:
$("#test").on("input change",function(){
$("#bleh").text($(this).val())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="test" type="range"/>
<p id="bleh"></p>
Else, you probably have to implement your own solution or use something like Modernizr
Can someone point me in the right direction? I don't see why I can't get the achtergrond_homepage.png as background in rounded corners.
Edit: It looks like the grey color is allways on top of everything. Can it be that it's controlled in the javascript part?
This is the css:
#charset "utf-8";
/* CSS Document */
html, body {
color: #444141;
font-family: 'trebuchet ms' !important;
font-size: 12px;
margin: 0px;
padding: 0px;
height: 100%;
background: #eaeade;}
.justyParagraph {
text-align: justify;}
a img {
border: 0;}
.clearer {
clear: both;}
.rounded_corners{
background: url(../images/achtergrond_homepage.png) no-repeat left bottom;
color:#FFF;
padding: 8px;
width: 380px;
border: 2px solid #4e4b4b;
height: 450px;
}
div#blockdark {
height: 517px;
left: 450px;
position: absolute;
top: 130px;
z-index: 1000000;
width: 360px;
visibility: visible;
}
This is the HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<link rel="bookmark" href="/favicon.ico" />
<link rel="shortcut icon" href="/favicon.ico" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/excanvas.js" type="text/javascript"></script>
<script src="js/jQuery.min.js" type="text/javascript"></script>
<script src="js/roundCorners.jQuery.js" type="text/javascript" ></script>
<script type="text/javascript">
$(window).load(function(){
$('.rounded_corners').bg(['20px', '20px', '20', '20']);
});
</script>
</head>
<body>
<div id="blockdark">
<div class="rounded_corners">
<div> <h1> Title </h1> </div>
<div> Content </div>
</div>
</div>
</body>
</html>
This is a example, maybe it has something to do with the javascript for rounded corners?
http://www.coldcharlie.nl/test/
Try adding display: block to the .rounded_corners. Also it looks like you're missing a ; from the background line of .rounded_corners