I made a clock where the format is the following.
HH:MM AM
HH:MM S
My problem is that whenever the seconds changed, the minutes and the hours get pushed around to fit the number. My font, Modern Sans, is not monospace, which is probably the main cause for this, but I would like to keep that font, of course only if possible. I would also like to keep the clock centered on the page.
Thanks for your help!
EDIT: Please view the snippet in fullscreen. It acts a little weird(er) in the regular box.
function updateClock() {
var date = new Date();
var h = (date.getHours() + 24) % 12 || 12,
m = date.getMinutes(),
s = date.getSeconds(),
dm = "AM";
if (h >= 12)
dm = "PM";
if (m < 10) m = '0' + m;
if (s < 10) s = '0' + s;
$(".mt.h").html(h);
$(".mt.m").html(m);
$(".mt.s").html(s);
$(".mt.dm").html(dm);
setTimeout(updateClock, 1000);
}
body,
html {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
display: table;
}
* {
font-family: "Modern Sans", Helvetica;
}
.main-content {
text-align: center;
display: table-cell;
vertical-align: middle;
padding: 10px;
}
.search {
vertical-align: middle;
}
.clock {
color: rgba(0, 0, 0, 0.65);
}
.clock .unflex div {
display: inline-block;
}
.clock .unflex {
display: inline;
}
.mt.h,
.mt.m,
.mt.c {
font-size: 250px;
}
.mt.s {
font-size: 125px;
color: rgba(250, 0, 0, 0.45);
}
.mt.dm {
font-size: 75px;
}
.flexclock {
position: relative;
top: -125.5px;
display: inline-flex;
justify-content: flex-start;
flex-wrap: wrap;
align-content: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.2.1.js" type="text/javascript"></script>
</head>
<body onload="updateClock()">
<div class="main-content">
<div class="clock">
<div class="unflex">
<div class="mt h"></div>
<div class="mt c">:</div>
<div class="mt m"></div>
</div>
<div class="flexclock">
<div class="mtsdm">
<div class="mt dm"></div>
<div class="mt s"></div>
</div>
</div>
</div>
</div>
</body>
</html>
As different number characters have different width, and to avoid text to move in cases like this, one can set a width wide enough on each item so they won't effect their surroundings.
An alternative is also absolute positioning, though I find the below better and more responsive.
Here I added/updated these rules
.mt.h {
width: 160px;
}
.mt.m {
width: 320px;
}
.mt.c {
width: 80px;
}
.mt.s {
font-size: 125px;
color: rgba(250, 0, 0, 0.45);
width: 160px;
}
Stack snippet
function updateClock() {
var date = new Date();
var h = (date.getHours() + 24) % 12 || 12,
m = date.getMinutes(),
s = date.getSeconds(),
dm = "AM";
if (h >= 12)
dm = "PM";
if (m < 10) m = '0' + m;
if (s < 10) s = '0' + s;
$(".mt.h").html(h);
$(".mt.m").html(m);
$(".mt.s").html(s);
$(".mt.dm").html(dm);
setTimeout(updateClock, 1000);
}
body,
html {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
display: table;
}
* {
font-family: "Modern Sans", Helvetica;
}
.main-content {
text-align: center;
display: table-cell;
vertical-align: middle;
padding: 10px;
}
.search {
vertical-align: middle;
}
.clock {
color: rgba(0, 0, 0, 0.65);
}
.clock .unflex div {
display: inline-block;
}
.clock .unflex {
display: inline;
}
.mt.h,
.mt.m,
.mt.c {
font-size: 250px;
}
.mt.h {
width: 160px;
}
.mt.m {
width: 320px;
}
.mt.c {
width: 80px;
}
.mt.s {
font-size: 125px;
color: rgba(250, 0, 0, 0.45);
width: 160px;
}
.mt.dm {
font-size: 75px;
}
.flexclock {
position: relative;
top: -125.5px;
display: inline-flex;
justify-content: flex-start;
flex-wrap: wrap;
align-content: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.2.1.js" type="text/javascript"></script>
</head>
<body onload="updateClock()">
<div class="main-content">
<div class="clock">
<div class="unflex">
<div class="mt h"></div>
<div class="mt c">:</div>
<div class="mt m"></div>
</div>
<div class="flexclock">
<div class="mtsdm">
<div class="mt dm"></div>
<div class="mt s"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
I'm starting to code this year and sorry if my english is not good enough,
I have a problem with a progress bar with JS,
I have on my console an "uncaught TypeError who charge infinitly and say to me that we can charge the properties on style...
The first step was working but when the bar is supposed to become interactive it's not working
const tll = gasp.timeline({
paused: true
});
tll.to("#percent", "#bar", {
duration: .2,
opacity: 0,
zIndex: -1
});
tll.to("#preloader", {
duration: .8,
width: "0%"
});
tll.from(".container", {
duration: 1.5,
y: "-150%"
}, "-=.2");
tll.to("container h1", {
opacity: 1,
textShadow: "12px 20px rgba(255, 255, 255,0.23)",
skewY: 10,
y: "10%",
stagger: {
amount: .4
}
});
var width = 1;
var bar = document.getElementById("barconfirm");
var id;
function move() {
id = setInterval(frame, 10);
}
function frame() {
if (width > 100) {
clearInterval(id);
tll.play();
} else {
width++;
bar.style.width = width + "%";
document.getElementById("percent").innerHTML = width + "%";
}
}
* {
margin: 0;
padding: 0;
overflow: hidden;
}
#preloader {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
z-index: 100;
background-color: #0f0f0f;
flex-direction: column;
}
#percent {
color: white;
font-family: "Neutral Face";
}
#bar {
width: 60%;
margin-top: 20%;
}
#barconfirm {
width: 1%;
padding: 1px 0px;
background-color: white;
}
.container {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
background-color: gray;
}
.container h1 {
font-family: 'Monument';
text-transform: uppercase;
font-size: 40px;
opacity: 0;
}
<body onload="move()">
<div id="preloader">
<div id="percent">1%</div>
<div id="bar">
<div id="barconfirm"></div>
</div>
</div>
<div class="container">
<h1>Leo Clemente</h1>
</div>
Thanks to you all for your help, I want if you can an explanation more than just a code because I'm here to learn too and have a great day!
The issue in passing the selector to the tll.to method, it accepts ONE selector, so choose one of yours for tll.to("#percent", "#bar", {...}).
It will work as well whether you choose percent or bar. Also, according to the document, the dependency variable name is gsap.
You can check out an online snippet from here
I am trying to develop a quiz app using JS, CSS, and HTML. Most likely, there are some errors in my JS code. I am not able to click on the buttons, go to the next question, or reveal the wrong or right answers colored in green and red. I'm suspecting there is a simple error in one of the functions.
Btw I'm using VS code 1.66.2.
//game.js
const question = document.getElementById('question');
const choices = Array.from(document.getElementsByClassName('choice-text')); //array of 4 choices
const progressText = document.getElementById("ProgressText");
const progressBarfull = document.getElementById("progressBarfull");
const questionCounterText = document.getElementById("questionCounter");
const scoreText = document.getElementById("score");
let currentQuestion = {};
let acceptingAnswers = false;
let score = 0;
let questionCounter = 0;
let availableQuestions = [];
let questions = [
{
question: "Inside which HTML element do we put the JavaScript?",
choice1: "<script>",
choice2: "<javascript>",
choice3: "<js>",
choice4: "<Scripting>",
answer: 1
},
{
question: "What is the correct syntax for referring to an external script called 'xxx.js'?",
choice1: "<script href='xxx.js'>",
choice2: "<script name='xxx.js'>",
choice3: "<script src='xxx.js'>",
choice4: "<script file='xxx.js'>",
answer: 3
},
{
question: "How do you write 'Hello World' in an alert box?" ,
choice1: "msgBox('Hello World');",
choice2: "alertBox('Hello World');",
choice3: "msg('Hello World');",
choice4: "alert('Hello World');",
answer: 4
},
];
//constants
const CORRECT_BOUNS=10;
const MAX_QUESTIONS=3;
startGame=function () {
questionCounter = 0;
score = 0;
availableQuestions = [...questions]; //spread operator in js (...) to quickly copy all or part of an array
getNewQuestion();
};
getNewQuestion = function () {
if (availableQuestions.length == 0 || questionCounter >= MAX_QUESTIONS) {
localStorage.setItem('mostRecentScore',score);
//localStorage.setItem("mostRecentScore", score);
return window.location.assign("/end.html"); //go to the end page
}
questionCounter++;
progressText.innerText = `Question${questionCounter}/${MAX_QUESTIONS}`;
progressBarfull.style.width = `Question ${(questionCounter / MAX_QUESTIONS) * 100} ;
px`;
const questionIndex = Math.floor(Math.random() * availableQuestions.length); //take the integer of the random number
currentQuestion = availableQuestions[questionIndex];
question.innerHTML = currentQuestion.question;
choices.forEach(function (choice) {
const number = choice.dataset["number"];
choice.innerHTML = currentQuestion["choice" + number];
});
availableQuestions.splice(questionIndex, 1); //take the available questions array and get rid of the used ques
acceptingAnswers = true;
};
choices.forEach(function (choice) {
choice.addEventListener("click", function (e) {
if (!acceptingAnswers)
return;
acceptingAnswers = false;
const selectedChoice = e.target;
const selectedAnswer = selectedChoice.dataset["number"];
const classToApply = selectedAnswer == currentQuestion.answer ? "correct" : "incorrect";
if (classToApply === "correct") { //call incrementScore fun
incrementScore(CORRECT_BOUNS);
} //increment score by correct bonus
selectedChoice.parentElement.classList.add(classToApply);
setTimeout(function () {
selectedChoice.parentElement.classList.remove(classToApply);
getNewQuestion();
}, 1000);
});
});
incrementScore = function (num) {
score += num;
scoreText.innerText = score;
};
//game.html
<!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>Quick Quiz - Play</title>
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="game.css" />
</head>
<body>
<div class="container">
<div id="game" class="justify-center flex-column">
<div id="hud">
<div id="hud-item">
<p id="progressText" class="hud-prefix">
Question
</p>
<div id="progressBar">
<div id="progressBarfull">
</div>
</div>
</div>
<div id="hud-item">
<p class="hud-prefix" >
Score
</p>
<h1 class="hud-main-text" id="score">
0
</h1>
</div>
</div>
<h2 id="question">What is the answer to this questions?</h2>
<div class="choice-container">
<p class="choice-prefix">A</p>
<p class="choice-text" data-number="1">Choice 1</p>
</div>
<div class="choice-container">
<p class="choice-prefix">B</p>
<p class="choice-text" data-number="2">Choice 2</p>
</div>
<div class="choice-container">
<p class="choice-prefix">C</p>
<p class="choice-text" data-number="3">Choice 3</p>
</div>
<div class="choice-container">
<p class="choice-prefix">D</p>
<p class="choice-text" data-number="4">Choice 4</p>
</div>
</div>
</div>
<script src="game.js"></script>
</body>
</html>
//game.css
.choice-container{
display: flex;
margin-bottom: 0.5rem;
width: 100%;
font-size: 1.8rem;
border: 0.1rem solid rgba(241, 69, 175, 0.25);
background-color: white;}
.choice-container:hover{
cursor: pointer;
box-shadow: 0 0.4rem 1.4rem 0 rgba(241, 69, 175, 0.25);;
transform: translateY(-0.1rem);
transition: transform 150ms;}
.choice-prefix{
padding: 1.5rem 2.5rem;
background-color:#f76b8a;
color: white;}
.choice-text{
padding: 1.5rem;
width: 100% ;}
.correct{
background-color: #28a745;
}
.incorrect{
background-color: #dc3545;
}
/* hud */
#hud {
display: flex;
justify-content: space-between;
margin-bottom: 100px;
}
.hud-prefix{
text-align:center;
font-size: 2rem;}
#questionCounter{
display: flex;
left: 3%;
top:45%;}
#score{
display: flex;
top:45%;
left: 91%;
}
#hud-item{
margin-bottom: 6%;
}
#progressBar{
width:20rem;
height: 4rem;
border: 0.3rem solid #f76b8a ;
margin-top: 1.5rem;
}
#progressBarfull{
height: 3.6rem;
width: 0%;
background-color:#f76b8a ;
}
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset+"UTS-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie-edge" />
<title> Quick Quiz </title>
<link rel="stylesheet" href="app.css" />
</head>
<body>
<div class"container">
<div id="home" class="flex-center flex-column">
<h1>Quick Quiz</h1>
<a class="btn" href="/game.html">play</a>
<a class="btn" href="/highscors.html">High Scores</a>
</div>
</div>
</body>
</html>
//app.css
:root{
background-color: #FFF0F5;
font-size: 62.5%;
}
* {
box-sizing:border-box;
font-family: Arial,Helvetica,sans-serif;
margin:0;
color: #333;
}
h1,
h2,
h3,
h4{
margin-bottom: 1rem;
}
h1{
font-size: 5.4rem;
color: #f76b8a;
margin-bottom: 5rem;
left: 0;
line-height: 5px;
margin-top: -150px;
position: absolute;
text-align: center;
top: 50%;
width: 100%;
}
h1>span {
font-size: 2.4rem;
font-weight: 500;
}
h2{
font-size: 4.2rem;
margin-bottom: 4rem;
font-weight: 700;
}
h3{
font-size: 2.8rem;
font-weight: 500;
}
/* UTILITIES */
.container {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
max-width: 80rem;
margin: 0 auto;
position:fixed;
display: grid;
padding: 2rem;
}
.container>*{
width:100%;
}
.flex-column {
display: flex;
flex-direction: column;
}
.flex-center {
justify-content: center;
align-items: center;
display: flex;
height: 650px;
}
.justify-center {
justify-content: center;
}
.text-center {
text-align: center;
}
.hidden {
display: none;
}
.btn {
font-size: 1.8rem;
padding: 1rem 0;
width: 20rem;
text-align: center;
border: 0.1rem solid #f76b8a;
margin-bottom: 1rem;
text-decoration: none;
color: #f76b8a;
background-color: white;
}
.btn:hover {
cursor: pointer;
box-shadow: 0 0.4rem 1.4rem 0 rgba(219, 135, 188, 0.5);
transform: translateY(-0.1rem);
transition: transform 150ms;
}
.btn[disabled]:hover {
cursor: not-allowed;
box-shadow: none;
transform: none;
}
/* FORMS */
form{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
input{
margin-bottom: 1rem;
width: 20rem;
padding: 1.5rem;
font-size: 1.8rem;
border:none;
box-shadow: 0 0.1rem 1.4rem 0 rgba(220, 156, 197, 0.5);
}
input::placeholder{
color: #aaa;
}
I don't really understand all of your code, but I can see a couple of issues.
In the game.js file you start by defining some DOM constants, but a couple of them happen to be undefined.
questionCounterText isn't defined because there isn't any element whose id is questionCounter or anything similar. You also have this (non-existant) element referred to in your CSS. I assume you had this HTML element but removed it at some point.
Anyway, that doesn't make your code bug. Progress text is the issue. You select it like that:
const progressText = document.getElementById("ProgressText");
The id is capitalized. But in your HTML file, it appears like that:
<p id="progressText" class="hud-prefix">...</p>
With the first letter in lowercase. So your progressText constant is undefined, and that triggers an error when calling startGame (which by the way, I've called from the console, since there's no Start Game button).
I changed that and saw that sometimes the answer choices weren't filled with the expected text. That's because when the choices are like <script href='xxx.js'>, that's actually an HTML tag, and so when you use:
choice.innerHTML = currentQuestion["choice" + number];
you're adding an script tag inside each choice. Script tags aren't dispayed by default (display: none). Poor browser will try to download the xxx.js file, with no success. You should use the innerText method to display HTML tags as text strings:
choice.innerText = currentQuestion["choice" + number];
Also, your progress bar isn't working. You set its width as a weird string:
progressBarfull.style.width = `Question ${(questionCounter / MAX_QUESTIONS) * 100} px`;
Remove Question from this last assignment.
You say your buttons don't work, but I can see any button.
I don't know if there's any other issue.
I am making a Calculator App and there I am noticing a weird glitch. When I enter "1-1111...." and the moment it overflows the display div width, the text in the div element jumps down to only "1-", whereas if I inspect the textContent for div element its still "1-1111....".
To see for yourself just enter 1 then minus sign and then keep entering 1's untill the display overflows. You will see what I am taking about. View in FullScreen
Also this happens only with minus sign try inserting plus sign instead of minus it will work fine.
//Selectors
let numbers = document.querySelectorAll(".numbers")
let operators = document.querySelectorAll(".operators")
let equalto = document.querySelector(".equalto")
let clear = document.querySelector(".clear")
let backspace = document.querySelector(".backspace")
let plusMinus = document.querySelector(".plus-minus")
let dot = document.querySelector(".dot")
let display = document.querySelector(".display")
let output = document.querySelector(".output")
let equaltoPressed = false;
//Event Listeners
for(let i=0; i<numbers.length; i++){
numbers[i].addEventListener("click", function(){
if (equaltoPressed){
display.textContent = "";
equaltoPressed = false;
}
//if condition so that if the display has "Infinity" on it, we don't append digits
if ("0123456789.+-×÷".includes(display.textContent[display.textContent.length-1]) || display.textContent == "")
display.textContent += this.textContent;
evaluate();
})
}
for(let i=0; i<operators.length; i++){
operators[i].addEventListener("click", function(){
equaltoPressed = false;
if ("+-×÷".includes(display.textContent[display.textContent.length-1]))
display.textContent = display.textContent.substring(0,display.textContent.length-1) + this.textContent;
else
display.textContent += this.textContent;
})
}
equalto.addEventListener("click", function(){
if (output.textContent !== ""){
display.textContent = output.textContent;
output.textContent = "";
equaltoPressed = true;
}
});
clear.addEventListener("click", function(){
equaltoPressed = false;
display.textContent = "";
output.textContent = "";
})
backspace.addEventListener("click", function(){
equaltoPressed = false;
display.textContent = display.textContent.substr(0,display.textContent.length-1);
evaluate();
})
plusMinus.addEventListener("click", function(){
equaltoPressed = false;
let expression = display.textContent;
let flag = true;
for (let i=expression.length-1; i>=0; i--){
if ("+-×÷".includes(expression[i])){
if (expression[i] !== "-")
expression = expression.substring(0,i+1) + "-" + expression.substring(i+1,expression.length);
else if ("+-×÷".includes(expression[i-1]) || i-1<0)
expression = expression.substring(0,i) + expression.substring(i+1,expression.length);
else
expression = expression.substring(0,i) + "+" + expression.substring(i+1,expression.length);
flag = false;
break;
}
}
if (flag)
expression = "-"+expression;
display.textContent = expression;
evaluate();
})
dot.addEventListener("click", function(){
if (equaltoPressed)
display.textContent = "";
let start = 0;
for (let i=display.textContent.length-1; i>=0; i--){
if("+-×÷".includes(display.textContent[i])){
start = i+1;
break;
}
}
if (!display.textContent.substring(start,display.textContent.length).includes("."))
display.textContent += ".";
})
//Functions
function evaluate(){
let expression = display.textContent;
for (let i=0; i<expression.length; i++){
if (expression[i] === "×")
expression = expression.substring(0,i) + "*" + expression.substring(i+1,expression.length);
if (expression[i] === "÷")
expression = expression.substring(0,i) + "/" + expression.substring(i+1,expression.length);
}
if("0123456789.".includes(expression[expression.length-1]) && eval(expression) != expression)
output.textContent = eval(expression);
else
output.textContent = "";
}
*{
border:0;
margin:0;
}
body{
height: 100vh;
background: black;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: arial;
font-size: 1.5rem;
color: #f8f8f8;
}
.row{
display: flex;
}
.light-grey{
display: flex;
align-items: center;
justify-content: center;
background-color: #a6a6a6;
height: 4.2rem;
width: 4.2rem;
border-radius: 50%;
margin: .4rem;
cursor: pointer;
color: black;
}
.dark-grey{
display: flex;
align-items: center;
justify-content: center;
background-color: #333333;
height: 4.2rem;
width: 4.2rem;
border-radius: 50%;
margin: .4rem;
cursor: pointer;
}
.yellow{
display: flex;
align-items: center;
justify-content: center;
background-color: #ff9501;
height: 4.2rem;
width: 4.2rem;
border-radius: 50%;
margin: .4rem;
cursor: pointer;
}
#zero{
width: 9.2rem;
border-radius:0 50px 50px 0;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
border-top-left-radius: 50px;
}
.display{
width: 19.2rem;
height: 3rem;
margin: 0 .4rem 1.5rem .4rem;
text-align: right;
font-size: 3rem;
padding-bottom: 0.5rem;
overflow-y: hidden;
overflow-x: scroll;
}
.output{
width: 19.2rem;
height: 2rem;
margin: 0 .4rem 1.5rem .4rem;
text-align: right;
font-size: 2rem;
padding-bottom: 0.5rem;
overflow-y: hidden;
overflow-x: scroll;
}
i{
font-size: 1.3rem;
}
::-webkit-scrollbar {
width: 19.2rem;
height: .2rem;
}
::-webkit-scrollbar-track {
background: black;
}
::-webkit-scrollbar-thumb {
background: #333333;
}
::-webkit-scrollbar-thumb:hover {
background: #a6a6a6;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" integrity="sha256-46r060N2LrChLLb5zowXQ72/iKKNiw/lAmygmHExk/o=" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="display"></div>
<div class="output"></div>
<div class="row">
<div class="light-grey clear">AC</div>
<div class="light-grey plus-minus">+/-</div>
<div class="light-grey operators">÷</div>
<div class="yellow backspace"><i class="fas fa-backspace"></i></div>
</div>
<div class="row">
<div class="dark-grey numbers">7</div>
<div class="dark-grey numbers">8</div>
<div class="dark-grey numbers">9</div>
<div class="yellow operators">×</div>
</div>
<div class="row">
<div class="dark-grey numbers">4</div>
<div class="dark-grey numbers">5</div>
<div class="dark-grey numbers">6</div>
<div class="yellow operators">-</div>
</div>
<div class="row">
<div class="dark-grey numbers">1</div>
<div class="dark-grey numbers">2</div>
<div class="dark-grey numbers">3</div>
<div class="yellow operators">+</div>
</div>
<div class="row">
<div class="dark-grey numbers" id="zero">0</div>
<div class="dark-grey dot">.</div>
<div class="yellow equalto">=</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
You should add white-space: nowrap to .display, so the text won't break with the dash.
If you change the font-size, you can see that the text is going down with the dash.
I was looking to trigger different sections with a variable font based on my mouse movement.
For the first section, everything looks great, but when I tried to trigger the second section, it does not work as I expected since is connected to the first one I guess.
I would need to make the section working independently and in the correct way (to have an idea see section one how react in debug mode)
I was wondering what I have to modify in my Javascript code to make my snippet work with all the sections I want, working independently with their respective variable font interaction. Any ideas?
$('.square').on('mousemove', function(e) {
var x = e.pageX - $(this).offset().left;
var y = e.pageY;
var $tlSquare = $('.division--top.division--left');
var $trSquare = $('.division--top.division--right');
var $blSquare = $('.division--bottom.division--left');
var $brSquare = $('.division--bottom.division--right');
var squareWidth = $(this).width(),
squareHeight = $(this).height();
$tlSquare.width(x).height(y);
$trSquare.width(squareWidth - x).height(y);
$blSquare.width(x).height(squareHeight - y);
$brSquare.width(squareWidth - x).height(squareHeight - y);
stretchLetter(false);
});
stretchLetter(false);
$('.square').on('mouseleave', function() {
$('.division').width('50%').height('50%');
$('.letter').css('transform', '');
stretchLetter(false);
});
function stretchLetter(animation) {
$('.letter').each(function() {
var parentWidth = $(this).parent().width();
var parentHeight = $(this).parent().height();
var thisWidth = $(this).width();
var thisHeight = $(this).height();
var widthPercent = parentWidth / thisWidth;
var heightPercent = parentHeight / thisHeight;
var timing = animation == true ? .5 : 0;
TweenMax.to($(this), timing, {
scaleX: widthPercent,
scaleY: heightPercent
})
//$(this).css('transform', 'scalex('+ widthPercent +') scaley('+ heightPercent +')');
});
}
body,
html {
margin: 0;
padding: 0;
font-weight: bold;
font-family: helvetica;
}
section {
height: 200px;
background: blue;
color: white;
font-size: 28px;
}
.wrapper {
display: flex;
justify-content: center;
/*justify-content: flex-end;*/
width: 100%;
height: 100vh;
//background-color: blue;
overflow: hidden;
}
.square {
display: flex;
flex-wrap: wrap;
width: 100vh;
height: 100vh;
background-color: black;
}
.square-2 {
display: flex;
flex-wrap: wrap;
width: 100vh;
height: 100vh;
background-color: yellow;
}
.division {
//display: flex;
//align-items: center;
//justify-content: center;
width: 50%;
height: 50%;
//background-color: red;
//border: 1px solid white;
box-sizing: border-box;
}
.letter {
cursor: -webkit-grab;
cursor: grab;
}
.letter {
display: inline-block;
font-size: 50vh;
margin: 0;
padding: 0;
line-height: .8;
transform-origin: top left;
color: white;
}
/* .division:nth-child(1){
background-color: blue;
}
.division:nth-child(2){
background-color: red;
}
.division:nth-child(3){
background-color: green;
}
.division:nth-child(4){
background-color: orange;
} */
.circle {
width: 100%;
height: 100%;
border-radius: 50%;
border: 1px solid white;
background-color: blue;
box-sizing: border-box;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>SECTION-01</section>
<main>
<div class="wrapper">
<div class="square">
<div class="division division--top division--left">
<div class="letter">L</div>
</div>
<div class="division division--top division--right">
<div class="letter">A</div>
</div>
<div class="division division--bottom division--left">
<div class="letter">S</div>
</div>
<div class="division division--bottom division--right">
<div class="letter">T</div>
</div>
</div>
</main>
<section>SECTION-02</section>
<div class="wrapper">
<div class="square">
<div class="division division--top division--left">
<div class="letter">F</div>
</div>
<div class="division division--top division--right">
<div class="letter">A</div>
</div>
<div class="division division--bottom division--left">
<div class="letter">S</div>
</div>
<div class="division division--bottom division--right">
<div class="letter">T</div>
</div>
</div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
https://jsfiddle.net/CAT999/ohaf61qp/5/
See working FIDDLE
You had to change the y variable because you were calculating with the offset top of the mouse position inn the document. This is always bigger than the element, so you have to extract the offset top of the element you were scrolling on, to get the right value.
var y = e.pageY - $(this).offset().top;
I need to understand how to connect peers in gun db. I have a socket.io server deployed on heroku but I don't know if it will work with gun. Can anyone with experience with gun db help me with this? I've readed the documentations but it's not clear how the peers are connected and there isn't a clear code example on the documentation.
I've tested the chat example, but it will not work on my localhost server, I will not be able to deploy it on my shared hosting because sockets are not permitted. Also on localhost messages are not delivered between two different browser windows.
UPDATE :
Here is the code with the suggested lib/webrtc added. Still not working.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Converse</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<link rel="stylesheet" type="text/css" href="../style.css">
<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<style>
.chat__heading {
position: fixed;
text-align: center;
z-index: 1;
width: 100%;
margin-top: 0;
margin-bottom: 0;
}
.chat__form-container {
display: flex;
justify-content: center;
width: 100%;
padding: 10px 20px;
position: fixed;
z-index: 1;
bottom: 0;
}
.chat__form {
display: flex;
justify-content: center;
height: 50px;
background-color: white;
border: 2px solid white;
max-width: 900px;
width: 100%;
border-radius: 5px;
}
.chat__name-input {
flex: 1;
padding: 10px;
}
.chat__message-input {
flex: 5;
padding: 10px;
}
.chat__submit {
padding: 10px;
color: white;
border-radius: 5px;
}
.chat__submit:hover::after {
background-color: rgba(0,0,0,0.2);
}
.chat__submit:focus::after {
background-color: rgba(0,0,0,0.2);
}
.chat__submit::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
border-radius: 5px;
transition: background-color 0.3s;
background-color: rgba(0,0,0,0);
}
.chat__message-list {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
overflow-y: auto;
padding: 60px 20px;
width: 100%;
background-color: rgba(0, 0, 0, 0.2);
min-height: 100vh;
}
.chat__message {
display: flex;
flex-wrap: wrap;
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
width: 100%;
position: relative;
max-width: 900px;
}
.chat__name {
margin-right: 20px;
}
.chat__when {
position: absolute;
top: 0;
right: 2em;
padding: 10px;
background: rgba(100%, 100%, 100%, 0.9);
opacity: 0;
border-radius: 5px;
}
.chat__message:hover .chat__when {
opacity: 1;
right: 0em;
}
#media (max-width: 567px) {
.chat__heading {
font-size: 30px;
}
}
</style>
</head>
<body>
<div class="chat hue2 page">
<h2 id='title' class="chat__heading hue2 whitet">Have a Conversation...</h2>
<ul class="chat__message-list">
<li class="none"></li>
</ul>
<div class="chat__form-container hue2">
<form class="chat__form">
<label for="name-input" class="visually-hidden">Name</label>
<input id="name-input" class="chat__name-input" placeholder="Name"></input>
<label for="message-input" class="visually-hidden">Message</label>
<input id="message-input" class="chat__message-input" placeholder="Write a message..."></input>
<button class="chat__submit say hue2">say</button>
</form>
</div>
<div class="model">
<li class="chat__message white huet2 box">
<b class="chat__name"></b>
<p class="chat__message-text"></p>
<span class="sort none">0</span>
<div class="chat__when"></div>
</li>
</div>
</div>
<script src="../jquery.js"></script>
<script src="../../gun.js"></script>
<script src="../../nts.js"></script>
<script src="../../lib/webrtc.js"></script>
<script>
var gun = Gun(document.location.host + ':443/gun');
var chat = gun.get('converse/' + location.hash.slice(1));
console.log(chat);
console.log(gun);
console.log(location.hash.slice(1));
$(".chat__submit").on('click', submit);
$(".chat_form").on('keydown', enter);
function enter(e) {
if (e.which !== 13) { return }
submit(e);
}
function submit(e) {
e.preventDefault();
var msg = { when: Gun.time.is() };
msg.who = $('.chat__name-input').val();
if (!msg.who) {
msg.who = 'user' + Gun.text.random(3);
$('.chat__name-input').val(msg.who);
}
msg.what = $('.chat__message-input').val();
if (!msg.what) { return }
chat.set(msg);
$('.chat__message-input').val('').focus();
}
chat.map().val(function (msg, id) {
if (!msg) { return }
var messageList = $('.chat__message-list');
var last = sort(msg.when, messageList.children('li').last());
var li = $("#msg-" + id)[0]; // grab if exists
if (!li) {
li = $('.model li').clone(true) // else create it
.attr('id', 'msg-' + id)
.insertAfter(last);
}
// bind the message data into the UI
li = $(li);
li.find('.chat__name').text(msg.who);
li.find('.chat__message-text').text(msg.what);
li.find('.sort').text(msg.when);
var time = new Date(msg.when);
li.find('.chat__when').text(time.toDateString() + ', ' + time.toLocaleTimeString());
$('html, body').stop(true, true)
.animate({ scrollTop: messageList.height() });
});
function sort(num, li) { return parseFloat(num) >= parseFloat($(li).find('.sort').text() || -Infinity) ? li : sort(num, li.prev()) }
</script>
</body>
</html>
wow #mauro-stepanoski 's comment is so good (it should be the answer)! #jihuuNI when the lib/webrtc adapter is added like in the Todo-Dapp tutorial, it attempts to automatically connect all browsers with all other browsers - in the future, AXE will automatically cut off unnecessary connections. Do note, browser's WebRTC feature is not very reliable, so you still want to also have super peer connections.