The problem I have is as the title says. It works on all divs but one!
$(".complete-wrapper-1").hide();
var panelHH = $(".file-select-wrapper").innerHeight;
$(".files-button").hover(function(){
$(".complete-wrapper-1").show();
});
$(".complete-wrapper-1").hover(function(){
$(".file-select-wrapper").stop(1).show().height(0).animate({height: panelHH},500);
}, function(){
$(".file-select-wrapper").stop(1).animate({height: 0},500, function(){
$(this).hide();
});
});
Edit: html.
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel = "stylesheet" href="osframe.css">
<link type="text/css" rel = "stylesheet" href="appframe.class.css">
<link type="text/css" rel = "stylesheet" href="icons.css">
<link type="text/css" rel = "stylesheet" href="start-menu.css">
<link type="text/css" rel = "stylesheet" href="menus.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="anos_api_buttons.js"></script>
<script type="text/javascript" src="applications.js"></script>
<script type="text/javascript" src="game_api.js"></script>
<script type="text/javascript" src="ApplicationLoader.js"></script>
<script type="text/javascript" src="MultiPane.js"></script>
<script type="text/javascript" src="front-end.js"></script>
<script type="text/javascript" src="search.js"></script>
<script type="text/javascript" src="jquery.easing.js"></script>
<script type="text/javascript" src="jqueryFileTree.js"></script>
<noscript>You browser does not support javascript of it may disabled.</noscript>
</head>
<body oncontextmenu="return false;">
<div id = "frameAsWhole">
<div class ="item-frame">
<div class = "box1">
<div class = "infoPane">
</div>
<div class = "area-frame">
<div class = "desktop-box">
<div class = 'info-dropdown'></div>
<table class = "table">
</table>
<div class ="search-r-wrapper">
<div class = "search-part">
Search
</div>
<div class = "recent-part">
Recent Apps
</div>
<div class = "search-results">
</div>
<div class = "recent-results">
</div>
<div class = "downard-arrow"></div>
</div>
<div class = "file-select-wrapper">
<div class = "file-select">
<div class = "folder-select-wrapper">
<div class = "desktop-folder" class = "folder-icon fisize">
<div class="folder-text-side folder-text-side-1">Desktop</div>
</div>
</div>
<div class = "folder-select-wrapper">
<div class = "documents-folder" class = "folder-icon fisize">
<div class="folder-text-side folder-text-side-2">Documents</div>
</div>
</div>
<div class = "folder-select-wrapper">
<div class = "images-folder" class = "folder-icon fisize">
<div class="folder-text-side folder-text-side-3">Images/Videos</div>
</div>
</div>
<div class = "folder-select-wrapper">
<div class = "music-folder" class = "folder-icon fisize">
<div class="folder-text-side folder-text-side-4">Music</div>
</div>
</div>
<div class = "folder-select-wrapper">
<div class = "applications-folder" class = "folder-icon fisize">
</div>
</div>
</div>
<div class = "downard-arrow"></div>
</div>
<div class = "complete-wrapper-1"></div>
</div>
</div>
<div class = "taskbar-wrap">
<div class = "taskbar">
<div class = "files-button">
</div>
<table>
<tr class = "taskbar-items">
</tr>
</table>
<div class = "search-wrapper">
<input type="textarea" class ="search-bar">
</input>
<div class = "computer-search">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS not included
Lines 1 to 5 work but nothing after that does. The rest works if .complete-wrapper-1 is not the div I want .hover(); to work on. Any ideas?
The code nearly works but not 100%. The problem was to do with z-index in my css code and was blocking the element from the mouse so that it would not have anything to run the event. Kind of like if I had x-ray google and tried to crab someones heart with my hand, it obviously wouldn't work.
Related
A few days ago, I started studying DOM and I tried to clone the code the Instagram for practicing. At this moment, I got this error message "Uncaught TypeError: Cannot read properties of null (reading 'vlaue')" This is my DOM(JS file)
const id = document.getElementById('text')
const password = document.getElementById('password')
document.addEventListener('keyup', function(e) {
if(!id.value && !password.value){
let color = document.querySelector('login-btn');
color.style.backgroundColor = "#FF0000";
}
});
and this is my index.html code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Westagram!
</title>
<link rel="stylesheet" href="style/login.css" type="text/css">
<link rel="stylesheet" href="style/common.css" type="text/css">
<!-- <link rel="stylesheet" href="js/login.js"> -->
</head>
<body>
<!-- 아래 모든 div들을 포함하는 제일 상위 Container -->
<div class="wrapper">
<div class="logo">
<p class="westagram">Westagram</p>
</div>
<!-- 로그인 섹션 -->
<div class="login-container">
<div class="id">
<input type="text" id="text" placeholder="Phone number, username, or email" />
</div>
<div class="pw">
<input type="password" id="password" placeholder="Password">
</div>
<div class="bt">
<button class="login-btn">Log in
</button>
</div>
</div>
<!-- 비밀번호 찾는 섹션 -->
<div class="click">
<a class="find-password">Forgot Password</a>
</div>
</div>
<script src="js/login.js"></script>
</html>
I tried const id = blabla.value
password = blabla.value
Also, I tried using "querySelctor" all of them but still have same issue. Could you help me out this error? I really appreciate it! I struggling with this whole day...
Thank you for helping me out in advance.
I've added an else block, hope you won't mind, it's meant to make the difference. If you are using querySelector you must add the . class symbol, before login-btn like that .login-btn Additionally - you do not close the body tag.
If you set JavaScript in the head tag, you need to use the script tag for that, not link tag. For example, like <script src = "script.js" defer> </script>
Now It's should works fine, Best regards !
const id = document.getElementById("text");
const password = document.getElementById("password");
document.addEventListener("keydown", function (e) {
if (!id.value && !password.value) {
let color = document.querySelector(".login-btn");
color.style.backgroundColor = "#FF0000";
} else {
let color = document.querySelector(".login-btn");
color.style.backgroundColor = "#008000";
}
});
<body>
<div class="wrapper">
<div class="logo">
<p class="westagram">Westagram</p>
</div>
<div class="login-container">
<div class="id">
<input
type="text"
id="text"
placeholder="Phone number, username, or email"
/>
</div>
<div class="pw">
<input type="password" id="password" placeholder="Password" />
</div>
<div class="bt">
<button class="login-btn">Log in</button>
</div>
</div>
<div class="click">
<a class="find-password">Forgot Password</a>
</div>
</div>
<script src="js/login.js"></script>
</body>
you should use identifiers when querySelector is in your code so:
let color = document.querySelector('.login-btn');
I need to change the href of the a tag with id="cont".
The code I've got so far.(I was told to post the whole code here)
HTML:
<html>
<head>
<title>Adventure Game</title>
<link rel="stylesheet" href="../../styles/main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="../../js/main.js"></script>
<script src="../../js/knightClass.js"></script>
<script src="../../js/choices.js"></script>
</head>
<body>
<div id="mySidenav" class="sidenav">
×
<i class="fa fa-fw fa-home"></i>Home
How 2 Play
<div>
<button onclick="goBack()">Back</button>
</div>
</div>
<!-- Use any element to open the sidenav -->
<span onclick="openNav()"><div class="menu">
<div></div>
<div></div>
<div></div>
</div>
</span>
<div id="main">
<h1 class="header"><b>Stage 2 - Knight1</b></h1>
<div id="options" class="option hide">
<a id="cont" href="#">Continue</a>
<!--Hero
Paladin
Holy Knight
Assassin-->
</div>
</div>
</body>
</html>
JavaScript
window.onload=function(){
setTimeout(knight,1);
}
function knight(){
let rand=Math.floor(Math.random() * 10) + 1;
var cont=document.getElementById("cont");
if (rand==10){
cont.href("hero/hero1.html");
} else if (rand>=7){
cont.href("paladin/paladin1.html");
} else if (rand>=3){
cont.href("holyKnight/holyKnight1.html");
} else if (rand<3){
cont.href("assassin/assassin.html");
}
}
1.Change 2.Go
<script>
function ChangeHref(){
document.getElementById("a").setAttribute("onclick", "location.href='http://religiasatanista.ro'");
}
</script>
Ref Link
I am currently learning D3, following a tutorial.
I have an error "d3.timeParse is not a function" on the first line in the main.js file. Also when I remove the variables parseTime and formatTime, I get the error ".then(function(data) is not a function"
Any help would be appreciated, thank you.
Here is the main.js file -
var parseTime = d3.timeParse("%d/%m/%Y");
var formatTime = d3.timeFormat("%d/%m/%Y");
d3.json("data/calls.json").then(function(data){
data.map(function(d){
d.call_revenue = +d.call_revenue
d.units_sold = +d.units_sold
d.call_duration = +d.call_duration
d.date = parseTime(d.date)
return d
})
allCalls = data;
calls = data;
nestedCalls = d3.nest()
.key(function(d){
return d.category;
})
.entries(calls)
donut = new DonutChart("#company-size")
revenueBar = new BarChart("#revenue", "call_revenue", "Average call revenue (USD)")
durationBar = new BarChart("#call-duration", "call_duration", "Average call duration (seconds)")
unitBar = new BarChart("#units-sold", "units_sold", "Units sold per call")
stackedArea = new StackedAreaChart("#stacked-area")
timeline = new Timeline("#timeline")
$("#var-select").on("change", function(){
stackedArea.wrangleData();
})
})
function brushed() {
var selection = d3.event.selection || timeline.x.range();
var newValues = selection.map(timeline.x.invert)
changeDates(newValues)
}
function changeDates(values) {
calls = allCalls.filter(function(d){
return ((d.date > values[0]) && (d.date < values[1]))
})
nestedCalls = d3.nest()
.key(function(d){
return d.category;
})
.entries(calls)
$("#dateLabel1").text(formatTime(values[0]))
$("#dateLabel2").text(formatTime(values[1]))
donut.wrangleData();
revenueBar.wrangleData();
unitBar.wrangleData();
durationBar.wrangleData();
stackedArea.wrangleData();
}
This is the index.html file -
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<title>Corporate Dashboard</title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="static/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="static/css/dc.min.css" type="text/css" />
<!-- jQuery UI CSS -->
<link rel="stylesheet" href="static/css/jquery-ui.min.css">
<link rel="stylesheet" href="static/css/jquery-ui.structure.min.css">
<link rel="stylesheet" href="static/css/jquery-ui.theme.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="static/css/style.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<a class="navbar-brand" href="#"><img id="logo" src=""></a>
</div>
</nav>
<div class="container">
<div class="row">
<div id="left-charts" class="col-sm-12 col-md-8">
<div class="row">
<div class="col-md-4">
<label>Dates: <span id="dateLabel1">01/01/2017</span> - <span id="dateLabel2">10/12/2017</span></label>
</div>
</div>
<div class="row">
<div class="col-md-4">
<select id="var-select" class="form-control">
<option selected value="call_revenue">Revenue (USD)</option>
<option value="call_duration">Call Time (seconds)</option>
<option value="units_sold">Units Sold</option>
</select>
</div>
</div>
<div id="stacked-area"></div>
<div id="timeline"></div>
</div>
<div id="right-charts" class="col-md-4 col-sm-12">
<div class="row">
<div class="col-sm-6 col-md-12" id="company-size"></div>
<div class="col-sm-6 col-md-12" id="units-sold"></div>
<div class="col-sm-6 col-md-12" id="revenue"></div>
<div class="col-sm-6 col-md-12" id="call-duration"></div>
</div>
</div>
</div>
</div>
<!-- External JS Libraries -->
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="static/js/d3.min.js"></script>
<script type="text/javascript" src="static/js/crossfilter.min.js"></script>
<script type="text/javascript" src="static/js/dc.min.js"></script>
<script type="text/javascript" src="static/js/queue.min.js"></script>
<!-- Custom JS -->
<script type="text/javascript" src="static/js/barChart.js"></script>
<script type="text/javascript" src="static/js/main.js"></script>
</body>
</html
You should probably include the d3 library. Add this to the beginning.
<script src="https://d3js.org/d3.v5.js"></script>
Here is the whole documentation to the library, check it out: https://github.com/d3/d3/wiki
<html>
<body>
<div class = "container">
<audio id="music" src="/music/orgmusic.mp3"type="audio/mpeg"></audio>
<img id="titleimg"src = "images/titleimage.png">
<div class = "gameContainer">
</div>
<div id ="play">Press Spacebar To Return To Main Menu!</div>
</div>
<link rel="stylesheet" type="text/css" href="/css/setup.css">
<link rel="stylesheet" type="text/css" href="/css/global.css">
<script src="/JS/setup.js" type="text/javascript"></script>
<script src="/JS/global.js" type="text/javascript"></script>
</body>
</html>
JS FILE:
document.getElementById("gameContainer").innerHTML = "hi this is words";
As you can see i have the in-line script set to insert text into my div called "gameContainer" but for some reason it doesn't work.
I know I can just type it in, but I wan't to get it to work through my JS file.
Any ideas on why the text won't insert?
You are do stuff based on Id and you set class in HTML.
<div class = "gameContainer"> // Hear you used class
</div>
In Js you used document.getElementById("gameContainer").innerHTML
<div id="gameContainer"> // Hear you have to used id instead of class
</div>
document.getElementById("gameContainer").innerHTML = "hi this is words";
<html>
<body>
<div class = "container">
<audio id="music" src="/music/orgmusic.mp3"type="audio/mpeg"></audio>
<img id="titleimg"src = "images/titleimage.png">
<div id = "gameContainer"class = "gameContainer">
</div>
<div id ="play">Press Spacebar To Return To Main Menu!</div>
</div>
<link rel="stylesheet" type="text/css" href="/css/setup.css">
<link rel="stylesheet" type="text/css" href="/css/global.css">
<script src="/JS/setup.js" type="text/javascript"></script>
<script src="/JS/global.js" type="text/javascript"></script>
</body>
</html>
I am making a basic blackjack game with angularjs and using bootstrap for the layout however I cannot seem to make it work.
What I want is a heading across the top, the content of the game in the middle and left and a list of current players on the right but isn't everything is running down the page.
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blackjack</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="./angular.js"></script>
<script src="./angular-animate.js"></script>
<script src="./angular-touch.js"></script>
<script src="./ui-bootstrap.js"></script>
<script src="./app.js"></script>
</head>
<body ng-app="myApp">
<div class="container-fluid" ng-controller="main">
<div class = "row">
<div class="col-sm-12">
<h1>Black Jack</h1>
</div>
</div>
<div class="row">
<div class = "col-sm-10">
<div ng-include="'play.html'" my-replace>
</div>
<div ng-include="'next.html'" my-replace>
</div>
<div ng-include="'start.html'" my-replace> </div>
</div>
<div class="col-sm-2">
<ul class = "row">
<li class="col-sm-12">
<h2>Players</h2>
</li>
<li class = "col-sm-12" ng-repeat="player in players">
<span>{{player.name}}: <button ng-if="!started" ng-click='removePlayer(player)'>Remove</button></span>
</li>
</ul>
</div>
</div>
</div>
<!--
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"> </script>
<script>
div = $("div");
(function add(div){
div.each(function(i, val){
this.innerHTML=this.nodeName+" open "+this.className+" "+this.innerHTML+" "+this . nodeName+" close"
add($(this).children());
})})(div);
</script>
-->
</body>
</html>
The my-replace directive strips away the wrapping div of the ng-includes once their content loads.
The js code at the bottom is a quick debugger so I can see how the html was being interpreted as firebug light doesn't work with angularjs.
I've tried with multiple versions of bootstrap too
Why isn't the bootstrap working?