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.
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>
I'm trying to get all the divs within a div with document.querySelectorAll. Interestingly, when I set in the JS the height to 1000, the explorer's scroller enlarges accordingly (only the balloon doesn't get bigger). What am I doing wrong?
'use strict';
var gElBalloons;
function init() {
gElBalloons = document.querySelectorAll('.balloons');
setInterval(moveBalloons, 1000);
}
function moveBalloons() {
for (var i = 0; i < gElBalloons.length; i++) {
gElBalloons[i].style.height = 1000 + 'px';
}
}
body {
margin: 10%;
}
.balloon-1 {
display: block;
width: 120px;
height: 145px;
background-color: red;
border-radius: 80%;
position: absolute;
}
.balloon-2 {
display: block;
width: 120px;
height: 145px;
background-color: blue;
border-radius: 80%;
left: 40%;
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.0" />
<title>Balloons</title>
<link rel="stylesheet" href="./css/main.css" />
</head>
<body onload="init()">
<div class="balloons">
<div class="balloon-1"></div>
<div class="balloon-2"></div>
</div>
<script src="./js/main.js"></script>
</body>
</html>
For now, I just want to test and make sure it works correctly.
It seems that your selector selected the wrong div. If you want to make the ball bigger, you should select balloon-1 and balloon-2 instead of their container balloons.
'use strict';
var gElBalloons;
function init() {
gElBalloons = document.querySelectorAll('.balloons > div');
setInterval(moveBalloons, 1000);
}
function moveBalloons() {
for (var i = 0; i < gElBalloons.length; i++) {
gElBalloons[i].style.height = 1000 + 'px';
}
}
body {
margin: 10%;
}
.balloon-1 {
display: block;
width: 120px;
height: 145px;
background-color: red;
border-radius: 80%;
position: absolute;
}
.balloon-2 {
display: block;
width: 120px;
height: 145px;
background-color: blue;
border-radius: 80%;
left: 40%;
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.0" />
<title>Balloons</title>
</head>
<body onload="init()">
<div class="balloons">
<div class="balloon-1"></div>
<div class="balloon-2"></div>
</div>
</body>
</html>
I have done this far but the code isn't working. It's working in fiddle but here it isn't. I am attaching a solution which I want and the code as far as I have done. I have somehow figured out that with jQuery it's working but I don't want to use jQuery or tell me how to use jQuery in sublime text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Catch Me</title>
<style>
button {
background-color: rgb(228, 6, 248);
border: none;
color: white;
padding: 20px 20px;
text-align: center;
position: relative;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="main">
<button name="button">Catch Me</button>
</div>
</body>
</html>
<script type="text/javascript">
$(function(){
$("button").on({
mouseover:function(){
$(this).css({
left:(Math.random()*200)+"px",
top:(Math.random()*200)+"px",
});
}
});
});
</script>
The solution I want is this:
https://ninjasfiles.s3.amazonaws.com/0000000000001878.gif
Please try this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Catch Me</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
button {
background-color: rgb(228, 6, 248);
border: none;
color: white;
padding: 20px 20px;
text-align: center;
position: relative;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="main">
<button name="button">Catch Me</button>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("button").mouseover(function() {
$(this).css("left", "" + (Math.random()*200) + "px");
$(this).css("top", "" + (Math.random()*200) + "px");
});
});
</script>
</body>
</html>
This is my code here:
I want to hide the image when the mouse rolls over and only display text.Then again, when the mouse moves away, the image should be visible.
The text property is working just fine but image is having issues.
It completely disappears after clicking.
function updated1(element){
document.getElementById("d1").innerHTML = "web deveopment and designing, html css js and bootstrap";
document.getElementById("d1").style.borderRadius = "4.5%";
document.getElementById("imgd1").style.visibility = 'hidden';
}
function undod1(){
document.getElementById("d1").innerHTML = "WEB DEVELOPMENT";
document.getElementById("d1").style.borderRadius = "0%";
document.getElementById("imgd1").style.visibility = 'visible';
}
#d1 {
border: 1px solid;
padding-top: 7px;
text-align: center;
box-shadow: 5px 10px #DBE0E3;
margin-top: 3%;
color: #FFFFFF;
width: 350px;
height: 350px;
font-size: 40px;
font-weight: bold;
line-height: 70px;
background-color: #DC3D3D;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title> js</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<section id="d1" class="col-md-4 col-md-push-4 col-xs-12" onmouseover="updated1(this)" onmouseleave="undod1()">
<p>WEB DEVELOPMENT
<p>
<img id="imgd1" src="https://miro.medium.com/max/1200/1*pE2fOVDikEUwiQJlh4ggzg.jpeg" height="90%" width="90%">
</section>
</div>
</div>
</body>
</html>
LINK TO MY CODE ON CODEPEN IS HERE
when you set innerHTML you are wiping out your image
function updated1(element){
document.getElementById("d1").innerHTML = "web deveopment and designing, html css js and bootstrap";
document.getElementById("d1").style.borderRadius = "4.5%";
document.getElementById("imgd1").style.visibility = 'hidden';
}
function undod1(){
document.getElementById("d1").innerHTML = "WEB DEVELOPMENT";
document.getElementById("d1").style.borderRadius = "0%";
document.getElementById("imgd1").style.visibility = 'visible';
}
.d1{
border: 1px solid;
padding-top: 7px;
text-align: center;
box-shadow: 5px 10px #DBE0E3;
margin-top: 3%;
color: #FFFFFF;
width: 350px;
height: 350px;
font-size: 40px;
font-weight: bold;
line-height: 70px;
background-color: #DC3D3D;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title> js</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<section class="d1" class="col-md-4 col-md-push-4 col-xs-12" onmouseover="updated1(this)" onmouseleave="undod1()">
<p id='d1'>WEB DEVELOPMENT</p>
<img id="imgd1" src="https://miro.medium.com/max/1200/1*pE2fOVDikEUwiQJlh4ggzg.jpeg" width="90%">
</section>
</div>
</div>
</body>
</html>
Your problem is this part
document.getElementById("d1").innerHTML = "...";
Because this code removes all the children from the parent and inserts the text. So basically, when your mouse leaves, there is no image there to make it visible. You don't need that much Javasctipt to create the effect you desire. Better HML, more CSS and less JS:
<section
id="d1"
class="col-md-4 col-md-push-4 col-xs-12"
onmouseover="updated1(this)"
onmouseleave="undod1()"
>
<p class="message">WEB DEVELOPMENT<p>
<img id="imgd1" src="https://miro.medium.com/max/1200/1*pE2fOVDikEUwiQJlh4ggzg.jpeg" height="90%" width="90%">
</section>
#d1:hover {
border-radius: 4.5%;
}
img {
opacity: 1
}
#d1:hover img {
opacity: 0
}
let message = "WEB DEVELOPMENT";
let parent = document.querySelector("#d1");
let item = document.querySelector(".message");
function updated1(element){
item.innerText = "web deveopment and designing, html css js and bootstrap";
}
function undod1(){
item.innerText = message;
}
If you try doing something more complex than you asked, try to add/remove classes to change style instead of adding styles in Javascript. This is an easier and cleaner way to change styles.
When I add data to an array in $scope by using addEventListener function, the new data can be logged in console,but the DOM repeated by ng-repeat doesn't change
angular.module('module', [])
.controller('controller', function ($scope) {
$scope.init = function () {
$scope.list = [1,2,3,4,5,6,7,8,9,10]
document.addEventListener('scroll', function (e) {
// the bottom of window
var windowBottom = e.target.documentElement.scrollTop + e.target.documentElement.clientHeight
// top of loading div
var loadingTop = document.getElementById('loading').offsetTop
if (windowBottom >= loadingTop) {
$scope.list.push($scope.list.length + 1)
console.log($scope.list)
}
})
}
<!DOCTYPE html>
<html lang="en" ng-app="module">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div style="height: 100%" ng-controller="controller" ng-init="init()">
<div id="wrapper">
<div id="scroller">
<div class="card" ng-repeat="i in list">{{i}}</div>
<div id="loading" class="loading">Loading...</div>
</div>
</div>
</div>
</body>
<script src="angular.min.js"></script>
<script src="main.js"></script>
</html>
html, body{
margin: 0;
padding: 0;
height: 100%;
}
body{
background-color: #eee;
}
#wrapper{
height:calc(100% - 1px);
}
.card{
background-color: #fff;
height: 80px;
line-height: 80px;
text-align: center;
margin-bottom: 15px;
}
.loading{
height: 80px;
background-color: #e6e6e6;
line-height: 80px;
text-align: center;
}
What I expected is, when I scroll to the loading div at bottom of document the new data will be pushed in the array of $scope, and the DOM repeat by ng-repeat will change by the same time, but it doesn't work.
The list data could be logged in console.log, but the DOM didn't change
Run Demo:JS Bin
Hello Friend $scope is not updated when we call an event handler in angular code. For that, you have to use $scope.apply after the event handler
angular.module('module', [])
.controller('controller', function ($scope) {
$scope.init = function () {
$scope.list = [1,2,3,4,5,6,7,8,9,10]
document.addEventListener('scroll', function (e) {
// 窗口底部
var windowBottom = e.target.documentElement.scrollTop + e.target.documentElement.clientHeight
// 加载div顶部
var loadingTop = document.getElementById('loading').offsetTop
if (windowBottom >= loadingTop) {
// if ($scope.flag) {
$scope.list.push($scope.list.length + 1)
console.log($scope.list)
// }
}
$scope.$apply()
})
}
})
html, body{
margin: 0;
padding: 0;
height: 100%;
}
body{
background-color: #eee;
}
#wrapper{
height:calc(100% - 1px);
}
.card{
background-color: #fff;
height: 80px;
line-height: 80px;
text-align: center;
margin-bottom: 15px;
}
.loading{
height: 80px;
background-color: #e6e6e6;
line-height: 80px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en" ng-app="module">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div style="height: 100%" ng-controller="controller" ng-init="init()">
<div id="wrapper">
<div id="scroller">
<div class="card" ng-repeat="i in list track by $index">{{i}}</div>
<div id="loading" class="loading">加载中</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
</body>
</html>
`