I'm trying to make a html button send certain string to my localhost socket server.(or even console.logging) and then another when i release it. the sending itself seems to be going fine but the mousedown event only happens when i release the button.
Ask away if you want, since i know it seems like a pretty trivial thing, but i just can't seem to get it to work. onclick also only works when mouse is released. And the only thing i can find that's vaguely related when i look it up is w****ing3schools, where the example works, but if i implement it as test in my code it doesnt.
Here is the html with js code, don't worry about asking for more source codes ^^
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initialscale=1, minimum-scale=1">
<link rel="stylesheet" href="css/reset.css" type="text/css">
<link rel="stylesheet" href="css/stylesheet.css" type="text/css">
<title>Project pong game</title>
<!-- SCRIPTS -->
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="js/script.js" type="text/javascript"></script>
<script>
var socket = io();
function doorClicked(){
socket.emit('door', function(data){
socket.send("Door");
});
}
function blueUpPressed() {
socket.emit('blueMov', function(data){
socket.send("1:0");
});
}
function redUpPressed() {
socket.emit('redMov', function(data){
socket.send("1:0");
});
}
function blueDownPressed() {
socket.emit('blueMov', function(data){
socket.send("0:1");
});
}
function redDownPressed() {
socket.emit('redMov', function(data){
socket.send("0:1");
});
}
function blueUpReleased() {
socket.emit('blueMov', function(data){
socket.send("0:0");
});
}
function redUpReleased() {
socket.emit('redMov', function(data){
socket.send("0:0");
});
}
function blueDownReleased() {
socket.emit('blueMov', function(data){
socket.send("0:0");
});
}
function redDownReleased() {
socket.emit('redMov', function(data){
socket.send("0:0");
});
}
</script>
</head>
<body>
<!-- BEGINSCHERM -->
<img src="img/red&blueglitch.gif" id="e-pong-logo" alt="logo e-pong"/>
<button id="startBtn">Start</button>
<div id="opacityLayer" class="team"></div>
<!-- Tutorial RED -->
<section id="tutorialRed1" class="team">
<button id="nextRed2" class="nextBtnStyle red"></button>
</section>
<section id="tutorialRed2" class="team">
<button id="nextRed3" class="nextBtnStyle red"></button>
</section>
<section id="tutorialRed3" class="team">
<button id="nextRedStart" class="nextBtnStyle red"></button>
</section>
<!-- Tutorial BLUE -->
<section id="tutorialBlue1" class="team">
<button id="nextBlue2" class="nextBtnStyle blue"></button>
</section>
<section id="tutorialBlue2" class="team">
<button id="nextBlue3" class="nextBtnStyle blue"></button>
</section>
<section id="tutorialBlue3" class="team">
<button id="nextBlueStart" class="nextBtnStyle blue"></button>
</section>
<!-- BLUE TEAM -->
<section id="blueteam" class="team">
<img class="glitchEffect" src="img/blueteamglitch.gif"/>
<section id="booster">locked</section>
<button id="blueUp" class="buttonStyle" onmousedown="blueUpPressed()" onmouseup = "blueUpReleased()"></button>
<button id="blueDown" class="buttonStyle" onmousedown="blueDownPressed()" onmouseup = "blueDownReleased()"></button>
<img id="startBlueTutorial" class="infoBtn" src="img/infoBtn.png"/>
</section>
<!-- RED TEAM -->
<section id="redteam" class="team">
<img class="glitchEffect" src="img/redteamglitch.gif"/>
<section id="booster">locked</section>
<button id="redUp" class="buttonStyle" onmousedown="redUpPressed()" onmouseup = "redUpReleased()"></button>
<button id="redDown" class="buttonStyle" onmousedown="redDownPressed()" onmouseup = "redDownReleased()"></button>
<img id="startRedTutorial" class="infoBtn" src="img/infoBtn.png"/>
</section>
<!-- Tutorial 1/2 INFO -->
<section id="tutorialRedInfo" class="team"></section>
<!-- Tutorial 2/2 INFO -->
<section id="tutorialBlueInfo" class="team"></section>
</body>
Related
onDragEnter and onDragLeave are called, but not onDrop.
evreything works when run in firefox and chrome but not electron
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/upload.css">
<link rel="stylesheet" href="css/popups.css">
<script src="https://kit.fontawesome.com/8edc1bc1b3.js" crossorigin="anonymous"></script>
<title>popup test</title>
</head>
<body>
<!-- popups sit here -->
<div class="uploadTestPopup">
<!-- upload / folder popup -->
<div class="uploadSelector" data-showing="content">
<i class="uploadSelectorItem" onclick="">content</i>
<i class="uploadSelectorItem" onclick="">folder</i>
</div>
<div id="uploadContentArea" class="uploadContentArea" ondrop="FileDrop(event)" ondragenter="allowDrop(event)" ondragleave="dropLeave(event)" ondragend="dragEnd(event)">
<!-- <i id="uploadIcon" class="fa-solid fa-circle-plus uploadIcon"></i>
<i class="uploadText">well upload something</i> -->
</div>
<div class="tagArea">
<div class="tagAreaDevider">
<input type="text">
</div>
<div class="tagAreaDevider">
<i class="tag">tag</i>
<i class="tag">hello</i>
<i class="tag">hello</i>
</div>
<div class="tagAreaDevider">
<i class="tag">hello</i>
<i class="tag">hello</i>
</div>
</div>
<div class="uploadArea">
<i class="uploadButtonCancel">exit</i>
<i class="uploadButtonAccept">done</i>
</div>
</div>
<script src="./js/upload.js"></script>
</body>
</html>
upload.js
function FileDrop(e) {
e.preventDefault();
e.stopPropagation();
console.log('drop call')
}
function allowDrop(e) {
e.preventDefault();
e.stopPropagation();
document.getElementById('uploadContentArea').style = 'background-color: blue;'
console.log('allow event')
}
function dropLeave(e){
e.preventDefault();
e.stopPropagation();
document.getElementById('uploadContentArea').style = ''
console.log('drag leave event')
}
i've tied adding event listeners, document.body.onDrop and doing it within the html doc.
but each attempt it never logged the drop call to the console.
only works in the browser.
is there some sort of electon setting or package i need to install???
I am making a basic online editing interface for coursework and i want to use keyboard events. The tab key should insert text, this works, but it should also reduce the size of the text on that line. When I use the getElementById, an error displays saying: Cannot read property 'style' of null. How do I go about this?
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="shortcut icon" href="">
</head>
<body>
<aside class="bar">
<div id="heading-container"></div>
</aside>
<div id="inputArea">
<div id="bulletPoints" contenteditable="true">
<div id="divList" contenteditable="true">
<ul class="inputList">
<li id="outlineList"></li>
</ul>
</div>
</div>
</div>
<script>
window.onload = () => {
window.addEventListener("keydown", checkKeyPress);
function checkKeyPress(key){
if (key.keyCode === 9){
key.preventDefault();
document.execCommand("insertText", true, " ");
document.getElementById("inputList").style.fontSize = "smaller";
}
}
};
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="shortcut icon" href="">
</head>
<body>
<aside class="bar">
<div id="heading-container"></div>
</aside>
<div id="inputArea">
<div id="bulletPoints" contenteditable="true">
<div id="divList" contenteditable="true">
<ul class="inputList" id="inputList">
<li id="outlineList"></li>
</ul>
</div>
</div>
</div>
<script>
window.onload = () => {
window.addEventListener("keydown", checkKeyPress);
function checkKeyPress(key){
if (key.keyCode === 9){
key.preventDefault();
document.execCommand("insertText", true, " ");
document.getElementById("inputList").style.fontSize = "smaller";
}
}
};
</script>
</body>
</html>
You are missing you id as an attribute to your ul.
I am following this codepen which works perfectly. I took the code from it and put it in my local HTML file and added the JS. However when I run it locally it doesn't work. The console prints out the following message:
Uncaught TypeError: dialogLogin.show is not a function at HTMLButtonElement.<anonymous>
My HTML & JS code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Auth.X</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css">
</head>
<body>
<h1>How can I use several dialogs on the same website?</h1>
<h2>https://material.io/components/web/catalog/dialogs/</h2>
<!-- Trigger Dialogs -->
<button id="dialog-login">Open Login Dialog</button><br><br>
<button id="dialog-delivery">Open Delivery Dialog</button>
<!-- Dialogs: Login -->
<aside id="mdc-dialog-login"
class="mdc-dialog"
role="alertdialog"
aria-labelledby="mdc-dialog-login-label"
aria-describedby="mdc-dialog-login-description">
<div class="mdc-dialog__surface">
<header class="mdc-dialog__header">
<h2 id="mdc-dialog-login-label" class="mdc-dialog__header__title">
Login
</h2>
</header>
<section id="mdc-dialog-login-description" class="mdc-dialog__body">
[LOGIN FORM]
</section>
<footer class="mdc-dialog__footer">
<button type="button" class="mdc-button mdc-dialog__footer__button--cancel">Close</button>
<button type="button" class="mdc-button mdc-button--raised mdc-dialog__footer__button mdc-dialog__footer__button--accept">RegisteR</button>
</footer>
</div>
<div class="mdc-dialog__backdrop"></div>
</aside>
<!-- Dialogs: Delivery -->
<aside id="mdc-dialog-delivery-condition"
class="mdc-dialog js--mdc-delivery-condition"
role="alertdialog"
aria-labelledby="mdc-delivery-condition-label"
aria-describedby="mdc-delivery-condition-description">
<div class="mdc-dialog__surface">
<header class="mdc-dialog__header">
<h2 id="mdc-delivery-condition-label" class="mdc-dialog__header__title">
[Delivery]
</h2>
</header>
<section id="mdc-delivery-condition-description" class="mdc-dialog__body">
[TEXT]
</section>
<footer class="mdc-dialog__footer">
<button type="button" class="mdc-button mdc-dialog__footer__button--cancel">Close</button>
</footer>
</div>
<div class="mdc-dialog__backdrop"></div>
</aside>
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<script>
// Find all the dialogs on the page
const dialogLoginEle = document.getElementById('mdc-dialog-login');
const dialogLogin = new mdc.dialog.MDCDialog(dialogLoginEle);
dialogLogin.listen('MDCDialog:accept', function() {
console.log('accepted login');
});
dialogLogin.listen('MDCDialog:cancel', function() {
console.log('canceled login');
});
const dialogDeliveryEle = document.getElementById('mdc-dialog-delivery-condition');
const dialogDelivery = new mdc.dialog.MDCDialog(dialogDeliveryEle);
dialogDelivery.listen('MDCDialog:accept', function() {
console.log('accepted delivery');
});
dialogDelivery.listen('MDCDialog:cancel', function() {
console.log('canceled delivery');
});
document.querySelector('#dialog-login').addEventListener('click', function (evt) {
dialogLogin.show();
});
document.querySelector('#dialog-delivery').addEventListener('click', function (evt) {
dialogDelivery.show();
});
</script>
</body>
Why does this not work locally?
UPDATE
As per my comment, version 0.28 of the MDC Javascript works with this code. The dialog boxes appear. So the question now is, in the latest version of the MDC Javascript how is this supposed to work?
After talking to the guys on the MDC Discord channel, it appears that .show() was replaced with .open().
In the codepan you have used the version 0.28.
Here is the example with the latest version.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Auth.X</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css">
</head>
<body>
<h1>How can I use several dialogs on the same website?</h1>
<h2>https://material.io/components/web/catalog/dialogs/</h2>
<!-- Trigger Dialogs -->
<button id="dialog-login">Open Login Dialog</button><br><br>
<button id="dialog-delivery">Open Delivery Dialog</button>
<!-- Dialogs: Login -->
<aside id="mdc-dialog-login"
class="mdc-dialog"
role="alertdialog"
aria-labelledby="mdc-dialog-login-label"
aria-describedby="mdc-dialog-login-description">
<div class="mdc-dialog__surface">
<header class="mdc-dialog__header">
<h2 id="mdc-dialog-login-label" class="mdc-dialog__header__title">
Login
</h2>
</header>
<section id="mdc-dialog-login-description" class="mdc-dialog__body">
[LOGIN FORM]
</section>
<footer class="mdc-dialog__footer">
<button type="button" class="mdc-button mdc-dialog__footer__button--cancel">Close</button>
<button type="button" class="mdc-button mdc-button--raised mdc-dialog__footer__button mdc-dialog__footer__button--accept">RegisteR</button>
</footer>
</div>
<div class="mdc-dialog__backdrop"></div>
</aside>
<!-- Dialogs: Delivery -->
<aside id="mdc-dialog-delivery-condition"
class="mdc-dialog js--mdc-delivery-condition"
role="alertdialog"
aria-labelledby="mdc-delivery-condition-label"
aria-describedby="mdc-delivery-condition-description">
<div class="mdc-dialog__surface">
<header class="mdc-dialog__header">
<h2 id="mdc-delivery-condition-label" class="mdc-dialog__header__title">
[Delivery]
</h2>
</header>
<section id="mdc-delivery-condition-description" class="mdc-dialog__body">
[TEXT]
</section>
<footer class="mdc-dialog__footer">
<button type="button" class="mdc-button mdc-dialog__footer__button--cancel">Close</button>
</footer>
</div>
<div class="mdc-dialog__backdrop"></div>
</aside>
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<script>
// Find all the dialogs on the page
const dialogLoginEle = document.getElementById('mdc-dialog-login');
const dialogLogin = new mdc.dialog.MDCDialog(dialogLoginEle);
dialogLogin.listen('MDCDialog:accept', function() {
console.log('accepted login');
});
dialogLogin.listen('MDCDialog:cancel', function() {
console.log('canceled login');
});
const dialogDeliveryEle = document.getElementById('mdc-dialog-delivery-condition');
const dialogDelivery = new mdc.dialog.MDCDialog(dialogDeliveryEle);
dialogDelivery.listen('MDCDialog:accept', function() {
console.log('accepted delivery');
});
dialogDelivery.listen('MDCDialog:cancel', function() {
console.log('canceled delivery');
});
document.querySelector('#dialog-login').addEventListener('click', function (evt) {
dialogLogin.open();
});
document.querySelector('#dialog-delivery').addEventListener('click', function (evt) {
dialogDelivery.open();
});
</script>
</body>
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?
I have two issues:
Having a problem with Jquery's animate() not working smoothly on Chrome, Safari and Opera. The Jquery animate()function works fine in Firefox but does not run smoothly using the other browsers(Just pops up as opposed to raising smoothly)
When I click the button to activate the div it moves up but when I click to return the div to its normal state to slide back down, it does not work.
Any suggestions with rewriting my code/logic? Thank You!
Html:
<link rel="stylesheet" type="text/css" href="icons-portfolio/foundation-icons/foundation-icons.css">
<!-- CSS for resets -->
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<!-- CSS for other styles -->
<link rel="stylesheet" type="text/css" href="css/components.css">
<!--*****Need JS Libraries in head ************ -->
<!--<script src="js/modernizr.custom.38675.js"></script>-->
<script src="js/modernizr.custom.79941.js"></script>
<!--
This script enables structural HTML5 elements in old IE.
http://code.google.com/p/html5shim/ -->
<!--[if lt IE 9]>
<script src = "//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- Part 1: Wrap all page content here -->
<div class="wrap">
<header>
<div>
<h1 class="mainHeadNav">CSS3 Effects 'N Stuff</h1>
</div>
<img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png" alt="Fork me on GitHub">
</header>
<!-- grid -->
<main class="grid_main">
<section class="userBox">
<div>
<figure class="user_photo_container">
<figcaption class="user_name">
<span>Menu</span>
</figcaption>
</figure>
<ul class="user_inner" id="main-dash">
<li>Back to Portfolio<i class="fi-photo"></i></li>
<li>Facebook<i class="fi-social-facebook"></i></li>
<li>Twitter<i class="fi-social-twitter"></i></li>
<li>Instagram<i class="fi-social-instagram"></i></li>
<li><a id="dashClick" href="#">Dashboard<i class="fi-page"></i></a></li>
</ul>
</div>
</section>
<section class="boxFeatures box1">
<div class="inspire">
<h2>Transition</h2>
</div>
</section>
<section class="boxFeatures box2">
<div class="inspire">
<h2>Hover & Scale</h2>
</div>
</section>
<section class="boxFeatures box3">
<div class="inspire">
<h2>Sideways Flip</h2>
</div>
</section>
<section class="boxFeatures box4">
<div class="inspire">
<h2>3D</h2>
</div>
</section>
<!-- Dashboard start -->
<div id="Dashboard">
<h2 class="dashTitle">Project Information</h2>
<div class="dashInnerAdd">
<p>
Welcome to my project CSS3 Effects N' Stuff! I started this project to develop different cool effects using the new CSS3 Properties. Feel free to fork over the repository and contribute! If you like the project and want to chat email me: amechiegbe#gmail.com
</p>
</div>
</div>
</main> <!-- end grid main-->
</div> <!--end wrap -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/application.js"></script>
Javascript:
$(function() {
//Modernizer Test
Modernizr.addTest("keyframe", Modernizr.testAllProps('animationName'));
Modernizr.prefixed('requestAnimationFrame', window, true);
// global functions
var dash = $('#Dashboard');
var dashBtn = $('#dashClick');
var clicked = false;
dashBtn.on('click',function (e) {
e.preventDefault();
if(clicked === true || clicked === false) {
dash.animate({"top":0}, 400, function () {
console.log('Up');
});
} else {
clicked = true;
dash.animate({"top":600}, 400, function () {
console.log('Down');
});
}
});
//make it height of document
dash.document.height();
});
Without your code it is hard to see which effect you are using or how you are easing it. You can use the properties of .animate to change the way it runs smoothly.
https://api.jquery.com/animate/
.animate( properties [, duration ] [, easing ] [, complete ] )
The default easing is Swing.
I would say to try linear... to me that is more "smooth".
http://api.jqueryui.com/easings/