Mixing
How to make a word change its position randomly wth mouse click using javascript?
0
I wanted to be able to make the word "HERE" change its position randomly as I click the button bellow it with a javascript code.
I have another javascript code in the same file already but for another word ("BECOME") which is working just fine; but it seems that when I put this two codes in the same javascript file the one for the word "HERE" stopped working for some reason I cannot figure out. I'm still a newbie at javascript, so I'm having trouble with it... Help would be very much appreciated!
HTML:
<link rel="stylesheet" href="css_become.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!--Helena Luz, up201506747-->
</head>
<body>
<!--HERE-->
<header>
<h4>Here is everyw<span>here</span></h4>
<h5>(it depends where you are)</h5>
</header>
<h1 class="here">Here!</h1>
<h2 id="button">reposition me!</h2>
<!--HERE-->
<!--BECOME-->
<div id="container">
<p><span>Become</span>
<br>to come into existence
<br>to come to be
<br>to undergo <span>change</span>
</p>
</div>
<div id="float">
<div class="dot">
<h4 id="become_original">Become</h4>
</div>
</div>
<h2 id="button1">Transform me!</h2>
<!--BECOME-->
<script src="javascript_become.js" type="application/javascript"> </script>
</body>
</html>
CSS:
@font-face {
font-family: BAUHS93;
src: url(fontes/BAUHS93.TTF);
}
@font-face {
font-family: Amatic;
src: url(fontes/AmaticSC-Regular.ttf);
}
@font-face {
font-family: bb-book;
src: url(fontes/bb-book.otf);
}
@font-face {
font-family: bebas;
src: url(fontes/BEBAS__.TTF);
}
@font-face {
font-family: mod;
src: url(fontes/MOD20.TTF);
}
@font-face {
font-family: monotonia;
src: url(fontes/monotonia.otf);
}
body {
margin:0;
padding:0;
border: solid 10px #000;
background-color: #EE3E4E;
border: solid 10px #000;
}
h1, h2, h4, h5, p, button {
font-family: Helvetica;
font-weight: bold;
text-transform: uppercase;
color: #000;
font-size: 35px;
line-height: 38px;
}
/*here's button*/
#button {
width:295px;
margin: auto;
margin-top: 2.5%;
border: 0px;
background-color: inherit;
}
#button:hover {text-decoration: underline;}
.here {
color: #FFF;
text-align: center;
width:500px;
margin:auto;
margin-top: 7.5%;
}
/* for become */
.class1 {
font-family: Amatic;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 25px;
}
.class2 {
font-weight: Regular;
font-family: BAUHS93;
}
.class3 {
font-family: bb-book;
}
.class4 {
font-family: bebas;
font-style:oblique;
}
.class5 {
font-family: mod;
text-transform: uppercase;
}
.class6 {
font-family: monotonia;
}
/*circle*/
.dot {
height: 465px;
width: 465px;
border-radius: 100%;
margin: 0 auto;
background-color: #F5CDFF;
animation-name: cores;
animation-duration: 4s;
animation-delay: 2s;
animation-iteration-count: infinite;
display: flex;
align-items: center;
margin-top: -5%;
overflow: hidden;
}
#container {
margin: 15% 0 6% 0;
}
#become_original {
font-size: 100px;
margin: 0 auto;
}
#float {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*become's button*/
#button1 {
background-color: inherit;
width: 300px;
margin:auto;
margin-top:2.5%;
margin-bottom:2.5%;
}
#button1:hover {text-decoration: underline;}
span{color: #FFF;}
/*animations*/
@keyframes cores {
0% {background-color: #F5CDFF;}
25% {background-color:#00ADEF;}
50% {background-color: #EE3E4E;}
100% {background-color:#F5CDFF;}
}
@keyframes floating {
from { transform: translate(0, 0px); }
65% { transform: translate(0, 15px); }
to { transform: translate(0, 0px); }
}
JAVASCRIPT:
//JAVASCRIPT FOR THE WORD BECOME - IS WORKING FINE
const classes = ["class1", "class2", "class3", "class4", "class5", "class6"];
var button1;
var selectedIndex = 0;
document.getElementById("button1").addEventListener("click", function(){
if(++selectedIndex >= classes.length) selectedIndex = 0;
document.getElementById("become_original").className = classes[selectedIndex];
});
//JAVASCRIPT FOR THE WORD "HERE" WHICH ISN'T WORKING
$(document).ready(function(){
var button;
button = document.getElementById('button');
$('button').click(function(){
$('.here').css({
top: (100 * Math.random()).toString() + "%",
left: (100 * Math.random()).toString() + "%",
})
})
});
javascript html css
asked Jan 2 at 1:58
GrayGray
114
add a comment |
0
I wanted to be able to make the word "HERE" change its position randomly as I click the button bellow it with a javascript code.
I have another javascript code in the same file already but for another word ("BECOME") which is working just fine; but it seems that when I put this two codes in the same javascript file the one for the word "HERE" stopped working for some reason I cannot figure out. I'm still a newbie at javascript, so I'm having trouble with it... Help would be very much appreciated!
HTML:
<link rel="stylesheet" href="css_become.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!--Helena Luz, up201506747-->
</head>
<body>
<!--HERE-->
<header>
<h4>Here is everyw<span>here</span></h4>
<h5>(it depends where you are)</h5>
</header>
<h1 class="here">Here!</h1>
<h2 id="button">reposition me!</h2>
<!--HERE-->
<!--BECOME-->
<div id="container">
<p><span>Become</span>
<br>to come into existence
<br>to come to be
<br>to undergo <span>change</span>
</p>
</div>
<div id="float">
<div class="dot">
<h4 id="become_original">Become</h4>
</div>
</div>
<h2 id="button1">Transform me!</h2>
<!--BECOME-->
<script src="javascript_become.js" type="application/javascript"> </script>
</body>
</html>
CSS:
@font-face {
font-family: BAUHS93;
src: url(fontes/BAUHS93.TTF);
}
@font-face {
font-family: Amatic;
src: url(fontes/AmaticSC-Regular.ttf);
}
@font-face {
font-family: bb-book;
src: url(fontes/bb-book.otf);
}
@font-face {
font-family: bebas;
src: url(fontes/BEBAS__.TTF);
}
@font-face {
font-family: mod;
src: url(fontes/MOD20.TTF);
}
@font-face {
font-family: monotonia;
src: url(fontes/monotonia.otf);
}
body {
margin:0;
padding:0;
border: solid 10px #000;
background-color: #EE3E4E;
border: solid 10px #000;
}
h1, h2, h4, h5, p, button {
font-family: Helvetica;
font-weight: bold;
text-transform: uppercase;
color: #000;
font-size: 35px;
line-height: 38px;
}
/*here's button*/
#button {
width:295px;
margin: auto;
margin-top: 2.5%;
border: 0px;
background-color: inherit;
}
#button:hover {text-decoration: underline;}
.here {
color: #FFF;
text-align: center;
width:500px;
margin:auto;
margin-top: 7.5%;
}
/* for become */
.class1 {
font-family: Amatic;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 25px;
}
.class2 {
font-weight: Regular;
font-family: BAUHS93;
}
.class3 {
font-family: bb-book;
}
.class4 {
font-family: bebas;
font-style:oblique;
}
.class5 {
font-family: mod;
text-transform: uppercase;
}
.class6 {
font-family: monotonia;
}
/*circle*/
.dot {
height: 465px;
width: 465px;
border-radius: 100%;
margin: 0 auto;
background-color: #F5CDFF;
animation-name: cores;
animation-duration: 4s;
animation-delay: 2s;
animation-iteration-count: infinite;
display: flex;
align-items: center;
margin-top: -5%;
overflow: hidden;
}
#container {
margin: 15% 0 6% 0;
}
#become_original {
font-size: 100px;
margin: 0 auto;
}
#float {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*become's button*/
#button1 {
background-color: inherit;
width: 300px;
margin:auto;
margin-top:2.5%;
margin-bottom:2.5%;
}
#button1:hover {text-decoration: underline;}
span{color: #FFF;}
/*animations*/
@keyframes cores {
0% {background-color: #F5CDFF;}
25% {background-color:#00ADEF;}
50% {background-color: #EE3E4E;}
100% {background-color:#F5CDFF;}
}
@keyframes floating {
from { transform: translate(0, 0px); }
65% { transform: translate(0, 15px); }
to { transform: translate(0, 0px); }
}
JAVASCRIPT:
//JAVASCRIPT FOR THE WORD BECOME - IS WORKING FINE
const classes = ["class1", "class2", "class3", "class4", "class5", "class6"];
var button1;
var selectedIndex = 0;
document.getElementById("button1").addEventListener("click", function(){
if(++selectedIndex >= classes.length) selectedIndex = 0;
document.getElementById("become_original").className = classes[selectedIndex];
});
//JAVASCRIPT FOR THE WORD "HERE" WHICH ISN'T WORKING
$(document).ready(function(){
var button;
button = document.getElementById('button');
$('button').click(function(){
$('.here').css({
top: (100 * Math.random()).toString() + "%",
left: (100 * Math.random()).toString() + "%",
})
})
});
javascript html css
asked Jan 2 at 1:58
GrayGray
114
add a comment |
0
0
0
I wanted to be able to make the word "HERE" change its position randomly as I click the button bellow it with a javascript code.
I have another javascript code in the same file already but for another word ("BECOME") which is working just fine; but it seems that when I put this two codes in the same javascript file the one for the word "HERE" stopped working for some reason I cannot figure out. I'm still a newbie at javascript, so I'm having trouble with it... Help would be very much appreciated!
HTML:
<link rel="stylesheet" href="css_become.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!--Helena Luz, up201506747-->
</head>
<body>
<!--HERE-->
<header>
<h4>Here is everyw<span>here</span></h4>
<h5>(it depends where you are)</h5>
</header>
<h1 class="here">Here!</h1>
<h2 id="button">reposition me!</h2>
<!--HERE-->
<!--BECOME-->
<div id="container">
<p><span>Become</span>
<br>to come into existence
<br>to come to be
<br>to undergo <span>change</span>
</p>
</div>
<div id="float">
<div class="dot">
<h4 id="become_original">Become</h4>
</div>
</div>
<h2 id="button1">Transform me!</h2>
<!--BECOME-->
<script src="javascript_become.js" type="application/javascript"> </script>
</body>
</html>
CSS:
@font-face {
font-family: BAUHS93;
src: url(fontes/BAUHS93.TTF);
}
@font-face {
font-family: Amatic;
src: url(fontes/AmaticSC-Regular.ttf);
}
@font-face {
font-family: bb-book;
src: url(fontes/bb-book.otf);
}
@font-face {
font-family: bebas;
src: url(fontes/BEBAS__.TTF);
}
@font-face {
font-family: mod;
src: url(fontes/MOD20.TTF);
}
@font-face {
font-family: monotonia;
src: url(fontes/monotonia.otf);
}
body {
margin:0;
padding:0;
border: solid 10px #000;
background-color: #EE3E4E;
border: solid 10px #000;
}
h1, h2, h4, h5, p, button {
font-family: Helvetica;
font-weight: bold;
text-transform: uppercase;
color: #000;
font-size: 35px;
line-height: 38px;
}
/*here's button*/
#button {
width:295px;
margin: auto;
margin-top: 2.5%;
border: 0px;
background-color: inherit;
}
#button:hover {text-decoration: underline;}
.here {
color: #FFF;
text-align: center;
width:500px;
margin:auto;
margin-top: 7.5%;
}
/* for become */
.class1 {
font-family: Amatic;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 25px;
}
.class2 {
font-weight: Regular;
font-family: BAUHS93;
}
.class3 {
font-family: bb-book;
}
.class4 {
font-family: bebas;
font-style:oblique;
}
.class5 {
font-family: mod;
text-transform: uppercase;
}
.class6 {
font-family: monotonia;
}
/*circle*/
.dot {
height: 465px;
width: 465px;
border-radius: 100%;
margin: 0 auto;
background-color: #F5CDFF;
animation-name: cores;
animation-duration: 4s;
animation-delay: 2s;
animation-iteration-count: infinite;
display: flex;
align-items: center;
margin-top: -5%;
overflow: hidden;
}
#container {
margin: 15% 0 6% 0;
}
#become_original {
font-size: 100px;
margin: 0 auto;
}
#float {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*become's button*/
#button1 {
background-color: inherit;
width: 300px;
margin:auto;
margin-top:2.5%;
margin-bottom:2.5%;
}
#button1:hover {text-decoration: underline;}
span{color: #FFF;}
/*animations*/
@keyframes cores {
0% {background-color: #F5CDFF;}
25% {background-color:#00ADEF;}
50% {background-color: #EE3E4E;}
100% {background-color:#F5CDFF;}
}
@keyframes floating {
from { transform: translate(0, 0px); }
65% { transform: translate(0, 15px); }
to { transform: translate(0, 0px); }
}
JAVASCRIPT:
//JAVASCRIPT FOR THE WORD BECOME - IS WORKING FINE
const classes = ["class1", "class2", "class3", "class4", "class5", "class6"];
var button1;
var selectedIndex = 0;
document.getElementById("button1").addEventListener("click", function(){
if(++selectedIndex >= classes.length) selectedIndex = 0;
document.getElementById("become_original").className = classes[selectedIndex];
});
//JAVASCRIPT FOR THE WORD "HERE" WHICH ISN'T WORKING
$(document).ready(function(){
var button;
button = document.getElementById('button');
$('button').click(function(){
$('.here').css({
top: (100 * Math.random()).toString() + "%",
left: (100 * Math.random()).toString() + "%",
})
})
});
javascript html css
asked Jan 2 at 1:58
GrayGray
114
I wanted to be able to make the word "HERE" change its position randomly as I click the button bellow it with a javascript code.
I have another javascript code in the same file already but for another word ("BECOME") which is working just fine; but it seems that when I put this two codes in the same javascript file the one for the word "HERE" stopped working for some reason I cannot figure out. I'm still a newbie at javascript, so I'm having trouble with it... Help would be very much appreciated!
HTML:
<link rel="stylesheet" href="css_become.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!--Helena Luz, up201506747-->
</head>
<body>
<!--HERE-->
<header>
<h4>Here is everyw<span>here</span></h4>
<h5>(it depends where you are)</h5>
</header>
<h1 class="here">Here!</h1>
<h2 id="button">reposition me!</h2>
<!--HERE-->
<!--BECOME-->
<div id="container">
<p><span>Become</span>
<br>to come into existence
<br>to come to be
<br>to undergo <span>change</span>
</p>
</div>
<div id="float">
<div class="dot">
<h4 id="become_original">Become</h4>
</div>
</div>
<h2 id="button1">Transform me!</h2>
<!--BECOME-->
<script src="javascript_become.js" type="application/javascript"> </script>
</body>
</html>
CSS:
@font-face {
font-family: BAUHS93;
src: url(fontes/BAUHS93.TTF);
}
@font-face {
font-family: Amatic;
src: url(fontes/AmaticSC-Regular.ttf);
}
@font-face {
font-family: bb-book;
src: url(fontes/bb-book.otf);
}
@font-face {
font-family: bebas;
src: url(fontes/BEBAS__.TTF);
}
@font-face {
font-family: mod;
src: url(fontes/MOD20.TTF);
}
@font-face {
font-family: monotonia;
src: url(fontes/monotonia.otf);
}
body {
margin:0;
padding:0;
border: solid 10px #000;
background-color: #EE3E4E;
border: solid 10px #000;
}
h1, h2, h4, h5, p, button {
font-family: Helvetica;
font-weight: bold;
text-transform: uppercase;
color: #000;
font-size: 35px;
line-height: 38px;
}
/*here's button*/
#button {
width:295px;
margin: auto;
margin-top: 2.5%;
border: 0px;
background-color: inherit;
}
#button:hover {text-decoration: underline;}
.here {
color: #FFF;
text-align: center;
width:500px;
margin:auto;
margin-top: 7.5%;
}
/* for become */
.class1 {
font-family: Amatic;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 25px;
}
.class2 {
font-weight: Regular;
font-family: BAUHS93;
}
.class3 {
font-family: bb-book;
}
.class4 {
font-family: bebas;
font-style:oblique;
}
.class5 {
font-family: mod;
text-transform: uppercase;
}
.class6 {
font-family: monotonia;
}
/*circle*/
.dot {
height: 465px;
width: 465px;
border-radius: 100%;
margin: 0 auto;
background-color: #F5CDFF;
animation-name: cores;
animation-duration: 4s;
animation-delay: 2s;
animation-iteration-count: infinite;
display: flex;
align-items: center;
margin-top: -5%;
overflow: hidden;
}
#container {
margin: 15% 0 6% 0;
}
#become_original {
font-size: 100px;
margin: 0 auto;
}
#float {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*become's button*/
#button1 {
background-color: inherit;
width: 300px;
margin:auto;
margin-top:2.5%;
margin-bottom:2.5%;
}
#button1:hover {text-decoration: underline;}
span{color: #FFF;}
/*animations*/
@keyframes cores {
0% {background-color: #F5CDFF;}
25% {background-color:#00ADEF;}
50% {background-color: #EE3E4E;}
100% {background-color:#F5CDFF;}
}
@keyframes floating {
from { transform: translate(0, 0px); }
65% { transform: translate(0, 15px); }
to { transform: translate(0, 0px); }
}
JAVASCRIPT:
//JAVASCRIPT FOR THE WORD BECOME - IS WORKING FINE
const classes = ["class1", "class2", "class3", "class4", "class5", "class6"];
var button1;
var selectedIndex = 0;
document.getElementById("button1").addEventListener("click", function(){
if(++selectedIndex >= classes.length) selectedIndex = 0;
document.getElementById("become_original").className = classes[selectedIndex];
});
//JAVASCRIPT FOR THE WORD "HERE" WHICH ISN'T WORKING
$(document).ready(function(){
var button;
button = document.getElementById('button');
$('button').click(function(){
$('.here').css({
top: (100 * Math.random()).toString() + "%",
left: (100 * Math.random()).toString() + "%",
})
})
});
javascript html css
javascript html css
asked Jan 2 at 1:58
GrayGray
114
asked Jan 2 at 1:58
GrayGray
114
asked Jan 2 at 1:58
GrayGray
114
asked Jan 2 at 1:58
GrayGray
114
asked Jan 2 at 1:58
GrayGray
114
114
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
0
Ok, corrected a few things, first of you were using a ix of Vanilla Javascript and jQuery. Converted code to run plain Vanilla for now.
You javascript now runs when the page is loaded.
Also in CSS we needed to make the .here have position: absolute otherwise your top and left commands have no effect. Remember Math.random() gives a value between 0~1 so move is not dramatic :) but I think you can tweak that yourself.
You will also need to adjust the absolute position to look right.
//JAVASCRIPT FOR THE WORD BECOME - IS WORKING FINE
const classes = ["class1", "class2", "class3", "class4", "class5", "class6"];
var button1;
var selectedIndex = 0;
document.addEventListener('DOMContentLoaded', function() {
// Set up click event for the 'become'
document.getElementById("button1").addEventListener("click", function() {
if (++selectedIndex >= classes.length) selectedIndex = 0;
document.getElementById("become_original").className = classes[selectedIndex];
});
// Set up HERE
document.getElementById('button').addEventListener('click', function() {
let here = document.querySelector('.here');
here.style.top = `${Math.random()}%`;
here.style.left = `${Math.random()}%`;
console.log('Moved here');
});
}); @font-face {
font-family: BAUHS93;
src: url(fontes/BAUHS93.TTF);
}
@font-face {
font-family: Amatic;
src: url(fontes/AmaticSC-Regular.ttf);
}
@font-face {
font-family: bb-book;
src: url(fontes/bb-book.otf);
}
@font-face {
font-family: bebas;
src: url(fontes/BEBAS__.TTF);
}
@font-face {
font-family: mod;
src: url(fontes/MOD20.TTF);
}
@font-face {
font-family: monotonia;
src: url(fontes/monotonia.otf);
}
body {
margin: 0;
padding: 0;
border: solid 10px #000;
background-color: #EE3E4E;
border: solid 10px #000;
}
h1,
h2,
h4,
h5,
p,
button {
font-family: Helvetica;
font-weight: bold;
text-transform: uppercase;
color: #000;
font-size: 35px;
line-height: 38px;
}
/*here's button*/
#button {
width: 295px;
margin: auto;
margin-top: 2.5%;
border: 0px;
background-color: inherit;
}
#button:hover {
text-decoration: underline;
}
.here {
color: #FFF;
text-align: center;
width: 500px;
margin: auto;
margin-top: 7.5%;
position: absolute;
}
/* for become */
.class1 {
font-family: Amatic;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 25px;
}
.class2 {
font-weight: Regular;
font-family: BAUHS93;
}
.class3 {
font-family: bb-book;
}
.class4 {
font-family: bebas;
font-style: oblique;
}
.class5 {
font-family: mod;
text-transform: uppercase;
}
.class6 {
font-family: monotonia;
}
/*circle*/
.dot {
height: 465px;
width: 465px;
border-radius: 100%;
margin: 0 auto;
background-color: #F5CDFF;
animation-name: cores;
animation-duration: 4s;
animation-delay: 2s;
animation-iteration-count: infinite;
display: flex;
align-items: center;
margin-top: -5%;
overflow: hidden;
}
#container {
margin: 15% 0 6% 0;
}
#become_original {
font-size: 100px;
margin: 0 auto;
}
#float {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*become's button*/
#button1 {
background-color: inherit;
width: 300px;
margin: auto;
margin-top: 2.5%;
margin-bottom: 2.5%;
}
#button1:hover {
text-decoration: underline;
}
span {
color: #FFF;
}
/*animations*/
@keyframes cores {
0% {
background-color: #F5CDFF;
}
25% {
background-color: #00ADEF;
}
50% {
background-color: #EE3E4E;
}
100% {
background-color: #F5CDFF;
}
}
@keyframes floating {
from {
transform: translate(0, 0px);
}
65% {
transform: translate(0, 15px);
}
to {
transform: translate(0, 0px);
}<!--HERE-->
<header>
<h4>Here is everyw<span>here</span></h4>
<h5>(it depends where you are)</h5>
</header>
<h1 class="here">Here!</h1>
<h2 id="button">reposition me!</h2>
<!--HERE-->
<!--BECOME-->
<div id="container">
<p><span>Become</span>
<br>to come into existence
<br>to come to be
<br>to undergo <span>change</span>
</p>
</div>
<div id="float">
<div class="dot">
<h4 id="become_original">Become</h4>
</div>
</div>
<h2 id="button1">Transform me!</h2>answered Jan 2 at 2:22
BibbertyBibberty
1,9431315
I see... Thank you very much!
– Gray
Jan 2 at 2:45
add a comment |
0
Well your first issue is that you are trying to set a click listener for element button but that isn't what you are passing here:
var button;
button = document.getElementById('button');
$('button').click(function(){
It should actually be:
$('#button').click(function(){
Because you are already using jQuery, there isn't a need to create a variable for the button by id, you can just use the ID.
Next, to make it move, why not use jQuerys offset function?
$('#button').click(function(){
$('.here').offset({
top: 100 * Math.random(),
left: 100 * Math.random(),
})
});
That will set your offset for top and left as well.
Working Solution:
//JAVASCRIPT FOR THE WORD BECOME - IS WORKING FINE
const classes = ["class1", "class2", "class3", "class4", "class5", "class6"];
var button1;
var selectedIndex = 0;
document.getElementById("button1").addEventListener("click", function(){
if(++selectedIndex >= classes.length) selectedIndex = 0;
document.getElementById("become_original").className = classes[selectedIndex];
});
//JAVASCRIPT FOR THE WORD "HERE" WHICH ISN'T WORKING
$(document).ready(function(){
//UPDATED THIS TO USE #
$('#button').click(function(){
$('.here').offset({
top: 100 * Math.random(),
left: 100 * Math.random(),
})
});
});@font-face {
font-family: BAUHS93;
src: url(fontes/BAUHS93.TTF);
}
@font-face {
font-family: Amatic;
src: url(fontes/AmaticSC-Regular.ttf);
}
@font-face {
font-family: bb-book;
src: url(fontes/bb-book.otf);
}
@font-face {
font-family: bebas;
src: url(fontes/BEBAS__.TTF);
}
@font-face {
font-family: mod;
src: url(fontes/MOD20.TTF);
}
@font-face {
font-family: monotonia;
src: url(fontes/monotonia.otf);
}
body {
margin:0;
padding:0;
border: solid 10px #000;
background-color: #EE3E4E;
border: solid 10px #000;
}
h1, h2, h4, h5, p, button {
font-family: Helvetica;
font-weight: bold;
text-transform: uppercase;
color: #000;
font-size: 35px;
line-height: 38px;
}
/*here's button*/
#button {
width:295px;
margin: auto;
margin-top: 2.5%;
border: 0px;
background-color: inherit;
}
#button:hover {text-decoration: underline;}
.here {
color: #FFF;
text-align: center;
width:500px;
margin:auto;
margin-top: 7.5%;
}
/* for become */
.class1 {
font-family: Amatic;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 25px;
}
.class2 {
font-weight: Regular;
font-family: BAUHS93;
}
.class3 {
font-family: bb-book;
}
.class4 {
font-family: bebas;
font-style:oblique;
}
.class5 {
font-family: mod;
text-transform: uppercase;
}
.class6 {
font-family: monotonia;
}
/*circle*/
.dot {
height: 465px;
width: 465px;
border-radius: 100%;
margin: 0 auto;
background-color: #F5CDFF;
animation-name: cores;
animation-duration: 4s;
animation-delay: 2s;
animation-iteration-count: infinite;
display: flex;
align-items: center;
margin-top: -5%;
overflow: hidden;
}
#container {
margin: 15% 0 6% 0;
}
#become_original {
font-size: 100px;
margin: 0 auto;
}
#float {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*become's button*/
#button1 {
background-color: inherit;
width: 300px;
margin:auto;
margin-top:2.5%;
margin-bottom:2.5%;
}
#button1:hover {text-decoration: underline;}
span{color: #FFF;}
/*animations*/
@keyframes cores {
0% {background-color: #F5CDFF;}
25% {background-color:#00ADEF;}
50% {background-color: #EE3E4E;}
100% {background-color:#F5CDFF;}
}
@keyframes floating {
from { transform: translate(0, 0px); }
65% { transform: translate(0, 15px); }
to { transform: translate(0, 0px); }
}<link rel="stylesheet" href="css_become.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!--Helena Luz, up201506747-->
</head>
<body>
<!--HERE-->
<header>
<h4>Here is everyw<span>here</span></h4>
<h5>(it depends where you are)</h5>
</header>
<h1 class="here">Here!</h1>
<h2 id="button">reposition me!</h2>
<!--HERE-->
<!--BECOME-->
<div id="container">
<p><span>Become</span>
<br>to come into existence
<br>to come to be
<br>to undergo <span>change</span>
</p>
</div>
<div id="float">
<div class="dot">
<h4 id="become_original">Become</h4>
</div>
</div>
<h2 id="button1">Transform me!</h2>
<!--BECOME-->
<script src="javascript_become.js" type="application/javascript"> </script>
</body>
</html>answered Jan 2 at 2:23
basicbasic
2,21111226
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54000412%2fhow-to-make-a-word-change-its-position-randomly-wth-mouse-click-using-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Ok, corrected a few things, first of you were using a ix of Vanilla Javascript and jQuery. Converted code to run plain Vanilla for now.
You javascript now runs when the page is loaded.
Also in CSS we needed to make the .here have position: absolute otherwise your top and left commands have no effect. Remember Math.random() gives a value between 0~1 so move is not dramatic :) but I think you can tweak that yourself.
You will also need to adjust the absolute position to look right.
//JAVASCRIPT FOR THE WORD BECOME - IS WORKING FINE
const classes = ["class1", "class2", "class3", "class4", "class5", "class6"];
var button1;
var selectedIndex = 0;
document.addEventListener('DOMContentLoaded', function() {
// Set up click event for the 'become'
document.getElementById("button1").addEventListener("click", function() {
if (++selectedIndex >= classes.length) selectedIndex = 0;
document.getElementById("become_original").className = classes[selectedIndex];
});
// Set up HERE
document.getElementById('button').addEventListener('click', function() {
let here = document.querySelector('.here');
here.style.top = `${Math.random()}%`;
here.style.left = `${Math.random()}%`;
console.log('Moved here');
});
}); @font-face {
font-family: BAUHS93;
src: url(fontes/BAUHS93.TTF);
}
@font-face {
font-family: Amatic;
src: url(fontes/AmaticSC-Regular.ttf);
}
@font-face {
font-family: bb-book;
src: url(fontes/bb-book.otf);
}
@font-face {
font-family: bebas;
src: url(fontes/BEBAS__.TTF);
}
@font-face {
font-family: mod;
src: url(fontes/MOD20.TTF);
}
@font-face {
font-family: monotonia;
src: url(fontes/monotonia.otf);
}
body {
margin: 0;
padding: 0;
border: solid 10px #000;
background-color: #EE3E4E;
border: solid 10px #000;
}
h1,
h2,
h4,
h5,
p,
button {
font-family: Helvetica;
font-weight: bold;
text-transform: uppercase;
color: #000;
font-size: 35px;
line-height: 38px;
}
/*here's button*/
#button {
width: 295px;
margin: auto;
margin-top: 2.5%;
border: 0px;
background-color: inherit;
}
#button:hover {
text-decoration: underline;
}
.here {
color: #FFF;
text-align: center;
width: 500px;
margin: auto;
margin-top: 7.5%;
position: absolute;
}
/* for become */
.class1 {
font-family: Amatic;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 25px;
}
.class2 {
font-weight: Regular;
font-family: BAUHS93;
}
.class3 {
font-family: bb-book;
}
.class4 {
font-family: bebas;
font-style: oblique;
}
.class5 {
font-family: mod;
text-transform: uppercase;
}
.class6 {
font-family: monotonia;
}
/*circle*/
.dot {
height: 465px;
width: 465px;
border-radius: 100%;
margin: 0 auto;
background-color: #F5CDFF;
animation-name: cores;
animation-duration: 4s;
animation-delay: 2s;
animation-iteration-count: infinite;
display: flex;
align-items: center;
margin-top: -5%;
overflow: hidden;
}
#container {
margin: 15% 0 6% 0;
}
#become_original {
font-size: 100px;
margin: 0 auto;
}
#float {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*become's button*/
#button1 {
background-color: inherit;
width: 300px;
margin: auto;
margin-top: 2.5%;
margin-bottom: 2.5%;
}
#button1:hover {
text-decoration: underline;
}
span {
color: #FFF;
}
/*animations*/
@keyframes cores {
0% {
background-color: #F5CDFF;
}
25% {
background-color: #00ADEF;
}
50% {
background-color: #EE3E4E;
}
100% {
background-color: #F5CDFF;
}
}
@keyframes floating {
from {
transform: translate(0, 0px);
}
65% {
transform: translate(0, 15px);
}
to {
transform: translate(0, 0px);
}<!--HERE-->
<header>
<h4>Here is everyw<span>here</span></h4>
<h5>(it depends where you are)</h5>
</header>
<h1 class="here">Here!</h1>
<h2 id="button">reposition me!</h2>
<!--HERE-->
<!--BECOME-->
<div id="container">
<p><span>Become</span>
<br>to come into existence
<br>to come to be
<br>to undergo <span>change</span>
</p>
</div>
<div id="float">
<div class="dot">
<h4 id="become_original">Become</h4>
</div>
</div>
<h2 id="button1">Transform me!</h2>answered Jan 2 at 2:22
BibbertyBibberty
1,9431315
I see... Thank you very much!
– Gray
Jan 2 at 2:45
add a comment |
0
Ok, corrected a few things, first of you were using a ix of Vanilla Javascript and jQuery. Converted code to run plain Vanilla for now.
You javascript now runs when the page is loaded.
Also in CSS we needed to make the .here have position: absolute otherwise your top and left commands have no effect. Remember Math.random() gives a value between 0~1 so move is not dramatic :) but I think you can tweak that yourself.
You will also need to adjust the absolute position to look right.
//JAVASCRIPT FOR THE WORD BECOME - IS WORKING FINE
const classes = ["class1", "class2", "class3", "class4", "class5", "class6"];
var button1;
var selectedIndex = 0;
document.addEventListener('DOMContentLoaded', function() {
// Set up click event for the 'become'
document.getElementById("button1").addEventListener("click", function() {
if (++selectedIndex >= classes.length) selectedIndex = 0;
document.getElementById("become_original").className = classes[selectedIndex];
});
// Set up HERE
document.getElementById('button').addEventListener('click', function() {
let here = document.querySelector('.here');
here.style.top = `${Math.random()}%`;
here.style.left = `${Math.random()}%`;
console.log('Moved here');
});
}); @font-face {
font-family: BAUHS93;
src: url(fontes/BAUHS93.TTF);
}
@font-face {
font-family: Amatic;
src: url(fontes/AmaticSC-Regular.ttf);
}
@font-face {
font-family: bb-book;
src: url(fontes/bb-book.otf);
}
@font-face {
font-family: bebas;
src: url(fontes/BEBAS__.TTF);
}
@font-face {
font-family: mod;
src: url(fontes/MOD20.TTF);
}
@font-face {
font-family: monotonia;
src: url(fontes/monotonia.otf);
}
body {
margin: 0;
padding: 0;
border: solid 10px #000;
background-color: #EE3E4E;
border: solid 10px #000;
}
h1,
h2,
h4,
h5,
p,
button {
font-family: Helvetica;
font-weight: bold;
text-transform: uppercase;
color: #000;
font-size: 35px;
line-height: 38px;
}
/*here's button*/
#button {
width: 295px;
margin: auto;
margin-top: 2.5%;
border: 0px;
background-color: inherit;
}
#button:hover {
text-decoration: underline;
}
.here {
color: #FFF;
text-align: center;
width: 500px;
margin: auto;
margin-top: 7.5%;
position: absolute;
}
/* for become */
.class1 {
font-family: Amatic;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 25px;
}
.class2 {
font-weight: Regular;
font-family: BAUHS93;
}
.class3 {
font-family: bb-book;
}
.class4 {
font-family: bebas;
font-style: oblique;
}
.class5 {
font-family: mod;
text-transform: uppercase;
}
.class6 {
font-family: monotonia;
}
/*circle*/
.dot {
height: 465px;
width: 465px;
border-radius: 100%;
margin: 0 auto;
background-color: #F5CDFF;
animation-name: cores;
animation-duration: 4s;
animation-delay: 2s;
animation-iteration-count: infinite;
display: flex;
align-items: center;
margin-top: -5%;
overflow: hidden;
}
#container {
margin: 15% 0 6% 0;
}
#become_original {
font-size: 100px;
margin: 0 auto;
}
#float {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*become's button*/
#button1 {
background-color: inherit;
width: 300px;
margin: auto;
margin-top: 2.5%;
margin-bottom: 2.5%;
}
#button1:hover {
text-decoration: underline;
}
span {
color: #FFF;
}
/*animations*/
@keyframes cores {
0% {
background-color: #F5CDFF;
}
25% {
background-color: #00ADEF;
}
50% {
background-color: #EE3E4E;
}
100% {
background-color: #F5CDFF;
}
}
@keyframes floating {
from {
transform: translate(0, 0px);
}
65% {
transform: translate(0, 15px);
}
to {
transform: translate(0, 0px);
}<!--HERE-->
<header>
<h4>Here is everyw<span>here</span></h4>
<h5>(it depends where you are)</h5>
</header>
<h1 class="here">Here!</h1>
<h2 id="button">reposition me!</h2>
<!--HERE-->
<!--BECOME-->
<div id="container">
<p><span>Become</span>
<br>to come into existence
<br>to come to be
<br>to undergo <span>change</span>
</p>
</div>
<div id="float">
<div class="dot">
<h4 id="become_original">Become</h4>
</div>
</div>
<h2 id="button1">Transform me!</h2>answered Jan 2 at 2:22
BibbertyBibberty
1,9431315
I see... Thank you very much!
– Gray
Jan 2 at 2:45
add a comment |
0
0
0
Ok, corrected a few things, first of you were using a ix of Vanilla Javascript and jQuery. Converted code to run plain Vanilla for now.
You javascript now runs when the page is loaded.
Also in CSS we needed to make the .here have position: absolute otherwise your top and left commands have no effect. Remember Math.random() gives a value between 0~1 so move is not dramatic :) but I think you can tweak that yourself.
You will also need to adjust the absolute position to look right.
//JAVASCRIPT FOR THE WORD BECOME - IS WORKING FINE
const classes = ["class1", "class2", "class3", "class4", "class5", "class6"];
var button1;
var selectedIndex = 0;
document.addEventListener('DOMContentLoaded', function() {
// Set up click event for the 'become'
document.getElementById("button1").addEventListener("click", function() {
if (++selectedIndex >= classes.length) selectedIndex = 0;
document.getElementById("become_original").className = classes[selectedIndex];
});
// Set up HERE
document.getElementById('button').addEventListener('click', function() {
let here = document.querySelector('.here');
here.style.top = `${Math.random()}%`;
here.style.left = `${Math.random()}%`;
console.log('Moved here');
});
}); @font-face {
font-family: BAUHS93;
src: url(fontes/BAUHS93.TTF);
}
@font-face {
font-family: Amatic;
src: url(fontes/AmaticSC-Regular.ttf);
}
@font-face {
font-family: bb-book;
src: url(fontes/bb-book.otf);
}
@font-face {
font-family: bebas;
src: url(fontes/BEBAS__.TTF);
}
@font-face {
font-family: mod;
src: url(fontes/MOD20.TTF);
}
@font-face {
font-family: monotonia;
src: url(fontes/monotonia.otf);
}
body {
margin: 0;
padding: 0;
border: solid 10px #000;
background-color: #EE3E4E;
border: solid 10px #000;
}
h1,
h2,
h4,
h5,
p,
button {
font-family: Helvetica;
font-weight: bold;
text-transform: uppercase;
color: #000;
font-size: 35px;
line-height: 38px;
}
/*here's button*/
#button {
width: 295px;
margin: auto;
margin-top: 2.5%;
border: 0px;
background-color: inherit;
}
#button:hover {
text-decoration: underline;
}
.here {
color: #FFF;
text-align: center;
width: 500px;
margin: auto;
margin-top: 7.5%;
position: absolute;
}
/* for become */
.class1 {
font-family: Amatic;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 25px;
}
.class2 {
font-weight: Regular;
font-family: BAUHS93;
}
.class3 {
font-family: bb-book;
}
.class4 {
font-family: bebas;
font-style: oblique;
}
.class5 {
font-family: mod;
text-transform: uppercase;
}
.class6 {
font-family: monotonia;
}
/*circle*/
.dot {
height: 465px;
width: 465px;
border-radius: 100%;
margin: 0 auto;
background-color: #F5CDFF;
animation-name: cores;
animation-duration: 4s;
animation-delay: 2s;
animation-iteration-count: infinite;
display: flex;
align-items: center;
margin-top: -5%;
overflow: hidden;
}
#container {
margin: 15% 0 6% 0;
}
#become_original {
font-size: 100px;
margin: 0 auto;
}
#float {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*become's button*/
#button1 {
background-color: inherit;
width: 300px;
margin: auto;
margin-top: 2.5%;
margin-bottom: 2.5%;
}
#button1:hover {
text-decoration: underline;
}
span {
color: #FFF;
}
/*animations*/
@keyframes cores {
0% {
background-color: #F5CDFF;
}
25% {
background-color: #00ADEF;
}
50% {
background-color: #EE3E4E;
}
100% {
background-color: #F5CDFF;
}
}
@keyframes floating {
from {
transform: translate(0, 0px);
}
65% {
transform: translate(0, 15px);
}
to {
transform: translate(0, 0px);
}<!--HERE-->
<header>
<h4>Here is everyw<span>here</span></h4>
<h5>(it depends where you are)</h5>
</header>
<h1 class="here">Here!</h1>
<h2 id="button">reposition me!</h2>
<!--HERE-->
<!--BECOME-->
<div id="container">
<p><span>Become</span>
<br>to come into existence
<br>to come to be
<br>to undergo <span>change</span>
</p>
</div>
<div id="float">
<div class="dot">
<h4 id="become_original">Become</h4>
</div>
</div>
<h2 id="button1">Transform me!</h2>answered Jan 2 at 2:22
BibbertyBibberty
1,9431315
Ok, corrected a few things, first of you were using a ix of Vanilla Javascript and jQuery. Converted code to run plain Vanilla for now.
You javascript now runs when the page is loaded.
Also in CSS we needed to make the .here have position: absolute otherwise your top and left commands have no effect. Remember Math.random() gives a value between 0~1 so move is not dramatic :) but I think you can tweak that yourself.
You will also need to adjust the absolute position to look right.
//JAVASCRIPT FOR THE WORD BECOME - IS WORKING FINE
const classes = ["class1", "class2", "class3", "class4", "class5", "class6"];
var button1;
var selectedIndex = 0;
document.addEventListener('DOMContentLoaded', function() {
// Set up click event for the 'become'
document.getElementById("button1").addEventListener("click", function() {
if (++selectedIndex >= classes.length) selectedIndex = 0;
document.getElementById("become_original").className = classes[selectedIndex];
});
// Set up HERE
document.getElementById('button').addEventListener('click', function() {
let here = document.querySelector('.here');
here.style.top = `${Math.random()}%`;
here.style.left = `${Math.random()}%`;
console.log('Moved here');
});
}); @font-face {
font-family: BAUHS93;
src: url(fontes/BAUHS93.TTF);
}
@font-face {
font-family: Amatic;
src: url(fontes/AmaticSC-Regular.ttf);
}
@font-face {
font-family: bb-book;
src: url(fontes/bb-book.otf);
}
@font-face {
font-family: bebas;
src: url(fontes/BEBAS__.TTF);
}
@font-face {
font-family: mod;
src: url(fontes/MOD20.TTF);
}
@font-face {
font-family: monotonia;
src: url(fontes/monotonia.otf);
}
body {
margin: 0;
padding: 0;
border: solid 10px #000;
background-color: #EE3E4E;
border: solid 10px #000;
}
h1,
h2,
h4,
h5,
p,
button {
font-family: Helvetica;
font-weight: bold;
text-transform: uppercase;
color: #000;
font-size: 35px;
line-height: 38px;
}
/*here's button*/
#button {
width: 295px;
margin: auto;
margin-top: 2.5%;
border: 0px;
background-color: inherit;
}
#button:hover {
text-decoration: underline;
}
.here {
color: #FFF;
text-align: center;
width: 500px;
margin: auto;
margin-top: 7.5%;
position: absolute;
}
/* for become */
.class1 {
font-family: Amatic;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 25px;
}
.class2 {
font-weight: Regular;
font-family: BAUHS93;
}
.class3 {
font-family: bb-book;
}
.class4 {
font-family: bebas;
font-style: oblique;
}
.class5 {
font-family: mod;
text-transform: uppercase;
}
.class6 {
font-family: monotonia;
}
/*circle*/
.dot {
height: 465px;
width: 465px;
border-radius: 100%;
margin: 0 auto;
background-color: #F5CDFF;
animation-name: cores;
animation-duration: 4s;
animation-delay: 2s;
animation-iteration-count: infinite;
display: flex;
align-items: center;
margin-top: -5%;
overflow: hidden;
}
#container {
margin: 15% 0 6% 0;
}
#become_original {
font-size: 100px;
margin: 0 auto;
}
#float {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*become's button*/
#button1 {
background-color: inherit;
width: 300px;
margin: auto;
margin-top: 2.5%;
margin-bottom: 2.5%;
}
#button1:hover {
text-decoration: underline;
}
span {
color: #FFF;
}
/*animations*/
@keyframes cores {
0% {
background-color: #F5CDFF;
}
25% {
background-color: #00ADEF;
}
50% {
background-color: #EE3E4E;
}
100% {
background-color: #F5CDFF;
}
}
@keyframes floating {
from {
transform: translate(0, 0px);
}
65% {
transform: translate(0, 15px);
}
to {
transform: translate(0, 0px);
}<!--HERE-->
<header>
<h4>Here is everyw<span>here</span></h4>
<h5>(it depends where you are)</h5>
</header>
<h1 class="here">Here!</h1>
<h2 id="button">reposition me!</h2>
<!--HERE-->
<!--BECOME-->
<div id="container">
<p><span>Become</span>
<br>to come into existence
<br>to come to be
<br>to undergo <span>change</span>
</p>
</div>
<div id="float">
<div class="dot">
<h4 id="become_original">Become</h4>
</div>
</div>
<h2 id="button1">Transform me!</h2>//JAVASCRIPT FOR THE WORD BECOME - IS WORKING FINE
const classes = ["class1", "class2", "class3", "class4", "class5", "class6"];
var button1;
var selectedIndex = 0;
document.addEventListener('DOMContentLoaded', function() {
// Set up click event for the 'become'
document.getElementById("button1").addEventListener("click", function() {
if (++selectedIndex >= classes.length) selectedIndex = 0;
document.getElementById("become_original").className = classes[selectedIndex];
});
// Set up HERE
document.getElementById('button').addEventListener('click', function() {
let here = document.querySelector('.here');
here.style.top = `${Math.random()}%`;
here.style.left = `${Math.random()}%`;
console.log('Moved here');
});
}); @font-face {
font-family: BAUHS93;
src: url(fontes/BAUHS93.TTF);
}
@font-face {
font-family: Amatic;
src: url(fontes/AmaticSC-Regular.ttf);
}
@font-face {
font-family: bb-book;
src: url(fontes/bb-book.otf);
}
@font-face {
font-family: bebas;
src: url(fontes/BEBAS__.TTF);
}
@font-face {
font-family: mod;
src: url(fontes/MOD20.TTF);
}
@font-face {
font-family: monotonia;
src: url(fontes/monotonia.otf);
}
body {
margin: 0;
padding: 0;
border: solid 10px #000;
background-color: #EE3E4E;
border: solid 10px #000;
}
h1,
h2,
h4,
h5,
p,
button {
font-family: Helvetica;
font-weight: bold;
text-transform: uppercase;
color: #000;
font-size: 35px;
line-height: 38px;
}
/*here's button*/
#button {
width: 295px;
margin: auto;
margin-top: 2.5%;
border: 0px;
background-color: inherit;
}
#button:hover {
text-decoration: underline;
}
.here {
color: #FFF;
text-align: center;
width: 500px;
margin: auto;
margin-top: 7.5%;
position: absolute;
}
/* for become */
.class1 {
font-family: Amatic;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 25px;
}
.class2 {
font-weight: Regular;
font-family: BAUHS93;
}
.class3 {
font-family: bb-book;
}
.class4 {
font-family: bebas;
font-style: oblique;
}
.class5 {
font-family: mod;
text-transform: uppercase;
}
.class6 {
font-family: monotonia;
}
/*circle*/
.dot {
height: 465px;
width: 465px;
border-radius: 100%;
margin: 0 auto;
background-color: #F5CDFF;
animation-name: cores;
animation-duration: 4s;
animation-delay: 2s;
animation-iteration-count: infinite;
display: flex;
align-items: center;
margin-top: -5%;
overflow: hidden;
}
#container {
margin: 15% 0 6% 0;
}
#become_original {
font-size: 100px;
margin: 0 auto;
}
#float {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*become's button*/
#button1 {
background-color: inherit;
width: 300px;
margin: auto;
margin-top: 2.5%;
margin-bottom: 2.5%;
}
#button1:hover {
text-decoration: underline;
}
span {
color: #FFF;
}
/*animations*/
@keyframes cores {
0% {
background-color: #F5CDFF;
}
25% {
background-color: #00ADEF;
}
50% {
background-color: #EE3E4E;
}
100% {
background-color: #F5CDFF;
}
}
@keyframes floating {
from {
transform: translate(0, 0px);
}
65% {
transform: translate(0, 15px);
}
to {
transform: translate(0, 0px);
}<!--HERE-->
<header>
<h4>Here is everyw<span>here</span></h4>
<h5>(it depends where you are)</h5>
</header>
<h1 class="here">Here!</h1>
<h2 id="button">reposition me!</h2>
<!--HERE-->
<!--BECOME-->
<div id="container">
<p><span>Become</span>
<br>to come into existence
<br>to come to be
<br>to undergo <span>change</span>
</p>
</div>
<div id="float">
<div class="dot">
<h4 id="become_original">Become</h4>
</div>
</div>
<h2 id="button1">Transform me!</h2>//JAVASCRIPT FOR THE WORD BECOME - IS WORKING FINE
const classes = ["class1", "class2", "class3", "class4", "class5", "class6"];
var button1;
var selectedIndex = 0;
document.addEventListener('DOMContentLoaded', function() {
// Set up click event for the 'become'
document.getElementById("button1").addEventListener("click", function() {
if (++selectedIndex >= classes.length) selectedIndex = 0;
document.getElementById("become_original").className = classes[selectedIndex];
});
// Set up HERE
document.getElementById('button').addEventListener('click', function() {
let here = document.querySelector('.here');
here.style.top = `${Math.random()}%`;
here.style.left = `${Math.random()}%`;
console.log('Moved here');
});
}); @font-face {
font-family: BAUHS93;
src: url(fontes/BAUHS93.TTF);
}
@font-face {
font-family: Amatic;
src: url(fontes/AmaticSC-Regular.ttf);
}
@font-face {
font-family: bb-book;
src: url(fontes/bb-book.otf);
}
@font-face {
font-family: bebas;
src: url(fontes/BEBAS__.TTF);
}
@font-face {
font-family: mod;
src: url(fontes/MOD20.TTF);
}
@font-face {
font-family: monotonia;
src: url(fontes/monotonia.otf);
}
body {
margin: 0;
padding: 0;
border: solid 10px #000;
background-color: #EE3E4E;
border: solid 10px #000;
}
h1,
h2,
h4,
h5,
p,
button {
font-family: Helvetica;
font-weight: bold;
text-transform: uppercase;
color: #000;
font-size: 35px;
line-height: 38px;
}
/*here's button*/
#button {
width: 295px;
margin: auto;
margin-top: 2.5%;
border: 0px;
background-color: inherit;
}
#button:hover {
text-decoration: underline;
}
.here {
color: #FFF;
text-align: center;
width: 500px;
margin: auto;
margin-top: 7.5%;
position: absolute;
}
/* for become */
.class1 {
font-family: Amatic;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 25px;
}
.class2 {
font-weight: Regular;
font-family: BAUHS93;
}
.class3 {
font-family: bb-book;
}
.class4 {
font-family: bebas;
font-style: oblique;
}
.class5 {
font-family: mod;
text-transform: uppercase;
}
.class6 {
font-family: monotonia;
}
/*circle*/
.dot {
height: 465px;
width: 465px;
border-radius: 100%;
margin: 0 auto;
background-color: #F5CDFF;
animation-name: cores;
animation-duration: 4s;
animation-delay: 2s;
animation-iteration-count: infinite;
display: flex;
align-items: center;
margin-top: -5%;
overflow: hidden;
}
#container {
margin: 15% 0 6% 0;
}
#become_original {
font-size: 100px;
margin: 0 auto;
}
#float {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*become's button*/
#button1 {
background-color: inherit;
width: 300px;
margin: auto;
margin-top: 2.5%;
margin-bottom: 2.5%;
}
#button1:hover {
text-decoration: underline;
}
span {
color: #FFF;
}
/*animations*/
@keyframes cores {
0% {
background-color: #F5CDFF;
}
25% {
background-color: #00ADEF;
}
50% {
background-color: #EE3E4E;
}
100% {
background-color: #F5CDFF;
}
}
@keyframes floating {
from {
transform: translate(0, 0px);
}
65% {
transform: translate(0, 15px);
}
to {
transform: translate(0, 0px);
}<!--HERE-->
<header>
<h4>Here is everyw<span>here</span></h4>
<h5>(it depends where you are)</h5>
</header>
<h1 class="here">Here!</h1>
<h2 id="button">reposition me!</h2>
<!--HERE-->
<!--BECOME-->
<div id="container">
<p><span>Become</span>
<br>to come into existence
<br>to come to be
<br>to undergo <span>change</span>
</p>
</div>
<div id="float">
<div class="dot">
<h4 id="become_original">Become</h4>
</div>
</div>
<h2 id="button1">Transform me!</h2>answered Jan 2 at 2:22
BibbertyBibberty
1,9431315
answered Jan 2 at 2:22
BibbertyBibberty
1,9431315
answered Jan 2 at 2:22
BibbertyBibberty
1,9431315
answered Jan 2 at 2:22
BibbertyBibberty
1,9431315
1,9431315
I see... Thank you very much!
– Gray
Jan 2 at 2:45
add a comment |
I see... Thank you very much!
– Gray
Jan 2 at 2:45
I see... Thank you very much!
– Gray
Jan 2 at 2:45
I see... Thank you very much!
– Gray
Jan 2 at 2:45
add a comment |
0
Well your first issue is that you are trying to set a click listener for element button but that isn't what you are passing here:
var button;
button = document.getElementById('button');
$('button').click(function(){
It should actually be:
$('#button').click(function(){
Because you are already using jQuery, there isn't a need to create a variable for the button by id, you can just use the ID.
Next, to make it move, why not use jQuerys offset function?
$('#button').click(function(){
$('.here').offset({
top: 100 * Math.random(),
left: 100 * Math.random(),
})
});
That will set your offset for top and left as well.
Working Solution:
//JAVASCRIPT FOR THE WORD BECOME - IS WORKING FINE
const classes = ["class1", "class2", "class3", "class4", "class5", "class6"];
var button1;
var selectedIndex = 0;
document.getElementById("button1").addEventListener("click", function(){
if(++selectedIndex >= classes.length) selectedIndex = 0;
document.getElementById("become_original").className = classes[selectedIndex];
});
//JAVASCRIPT FOR THE WORD "HERE" WHICH ISN'T WORKING
$(document).ready(function(){
//UPDATED THIS TO USE #
$('#button').click(function(){
$('.here').offset({
top: 100 * Math.random(),
left: 100 * Math.random(),
})
});
});@font-face {
font-family: BAUHS93;
src: url(fontes/BAUHS93.TTF);
}
@font-face {
font-family: Amatic;
src: url(fontes/AmaticSC-Regular.ttf);
}
@font-face {
font-family: bb-book;
src: url(fontes/bb-book.otf);
}
@font-face {
font-family: bebas;
src: url(fontes/BEBAS__.TTF);
}
@font-face {
font-family: mod;
src: url(fontes/MOD20.TTF);
}
@font-face {
font-family: monotonia;
src: url(fontes/monotonia.otf);
}
body {
margin:0;
padding:0;
border: solid 10px #000;
background-color: #EE3E4E;
border: solid 10px #000;
}
h1, h2, h4, h5, p, button {
font-family: Helvetica;
font-weight: bold;
text-transform: uppercase;
color: #000;
font-size: 35px;
line-height: 38px;
}
/*here's button*/
#button {
width:295px;
margin: auto;
margin-top: 2.5%;
border: 0px;
background-color: inherit;
}
#button:hover {text-decoration: underline;}
.here {
color: #FFF;
text-align: center;
width:500px;
margin:auto;
margin-top: 7.5%;
}
/* for become */
.class1 {
font-family: Amatic;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 25px;
}
.class2 {
font-weight: Regular;
font-family: BAUHS93;
}
.class3 {
font-family: bb-book;
}
.class4 {
font-family: bebas;
font-style:oblique;
}
.class5 {
font-family: mod;
text-transform: uppercase;
}
.class6 {
font-family: monotonia;
}
/*circle*/
.dot {
height: 465px;
width: 465px;
border-radius: 100%;
margin: 0 auto;
background-color: #F5CDFF;
animation-name: cores;
animation-duration: 4s;
animation-delay: 2s;
animation-iteration-count: infinite;
display: flex;
align-items: center;
margin-top: -5%;
overflow: hidden;
}
#container {
margin: 15% 0 6% 0;
}
#become_original {
font-size: 100px;
margin: 0 auto;
}
#float {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*become's button*/
#button1 {
background-color: inherit;
width: 300px;
margin:auto;
margin-top:2.5%;
margin-bottom:2.5%;
}
#button1:hover {text-decoration: underline;}
span{color: #FFF;}
/*animations*/
@keyframes cores {
0% {background-color: #F5CDFF;}
25% {background-color:#00ADEF;}
50% {background-color: #EE3E4E;}
100% {background-color:#F5CDFF;}
}
@keyframes floating {
from { transform: translate(0, 0px); }
65% { transform: translate(0, 15px); }
to { transform: translate(0, 0px); }
}<link rel="stylesheet" href="css_become.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!--Helena Luz, up201506747-->
</head>
<body>
<!--HERE-->
<header>
<h4>Here is everyw<span>here</span></h4>
<h5>(it depends where you are)</h5>
</header>
<h1 class="here">Here!</h1>
<h2 id="button">reposition me!</h2>
<!--HERE-->
<!--BECOME-->
<div id="container">
<p><span>Become</span>
<br>to come into existence
<br>to come to be
<br>to undergo <span>change</span>
</p>
</div>
<div id="float">
<div class="dot">
<h4 id="become_original">Become</h4>
</div>
</div>
<h2 id="button1">Transform me!</h2>
<!--BECOME-->
<script src="javascript_become.js" type="application/javascript"> </script>
</body>
</html>answered Jan 2 at 2:23
basicbasic
2,21111226
add a comment |
0
Well your first issue is that you are trying to set a click listener for element button but that isn't what you are passing here:
var button;
button = document.getElementById('button');
$('button').click(function(){
It should actually be:
$('#button').click(function(){
Because you are already using jQuery, there isn't a need to create a variable for the button by id, you can just use the ID.
Next, to make it move, why not use jQuerys offset function?
$('#button').click(function(){
$('.here').offset({
top: 100 * Math.random(),
left: 100 * Math.random(),
})
});
That will set your offset for top and left as well.
Working Solution:
//JAVASCRIPT FOR THE WORD BECOME - IS WORKING FINE
const classes = ["class1", "class2", "class3", "class4", "class5", "class6"];
var button1;
var selectedIndex = 0;
document.getElementById("button1").addEventListener("click", function(){
if(++selectedIndex >= classes.length) selectedIndex = 0;
document.getElementById("become_original").className = classes[selectedIndex];
});
//JAVASCRIPT FOR THE WORD "HERE" WHICH ISN'T WORKING
$(document).ready(function(){
//UPDATED THIS TO USE #
$('#button').click(function(){
$('.here').offset({
top: 100 * Math.random(),
left: 100 * Math.random(),
})
});
});@font-face {
font-family: BAUHS93;
src: url(fontes/BAUHS93.TTF);
}
@font-face {
font-family: Amatic;
src: url(fontes/AmaticSC-Regular.ttf);
}
@font-face {
font-family: bb-book;
src: url(fontes/bb-book.otf);
}
@font-face {
font-family: bebas;
src: url(fontes/BEBAS__.TTF);
}
@font-face {
font-family: mod;
src: url(fontes/MOD20.TTF);
}
@font-face {
font-family: monotonia;
src: url(fontes/monotonia.otf);
}
body {
margin:0;
padding:0;
border: solid 10px #000;
background-color: #EE3E4E;
border: solid 10px #000;
}
h1, h2, h4, h5, p, button {
font-family: Helvetica;
font-weight: bold;
text-transform: uppercase;
color: #000;
font-size: 35px;
line-height: 38px;
}
/*here's button*/
#button {
width:295px;
margin: auto;
margin-top: 2.5%;
border: 0px;
background-color: inherit;
}
#button:hover {text-decoration: underline;}
.here {
color: #FFF;
text-align: center;
width:500px;
margin:auto;
margin-top: 7.5%;
}
/* for become */
.class1 {
font-family: Amatic;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 25px;
}
.class2 {
font-weight: Regular;
font-family: BAUHS93;
}
.class3 {
font-family: bb-book;
}
.class4 {
font-family: bebas;
font-style:oblique;
}
.class5 {
font-family: mod;
text-transform: uppercase;
}
.class6 {
font-family: monotonia;
}
/*circle*/
.dot {
height: 465px;
width: 465px;
border-radius: 100%;
margin: 0 auto;
background-color: #F5CDFF;
animation-name: cores;
animation-duration: 4s;
animation-delay: 2s;
animation-iteration-count: infinite;
display: flex;
align-items: center;
margin-top: -5%;
overflow: hidden;
}
#container {
margin: 15% 0 6% 0;
}
#become_original {
font-size: 100px;
margin: 0 auto;
}
#float {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*become's button*/
#button1 {
background-color: inherit;
width: 300px;
margin:auto;
margin-top:2.5%;
margin-bottom:2.5%;
}
#button1:hover {text-decoration: underline;}
span{color: #FFF;}
/*animations*/
@keyframes cores {
0% {background-color: #F5CDFF;}
25% {background-color:#00ADEF;}
50% {background-color: #EE3E4E;}
100% {background-color:#F5CDFF;}
}
@keyframes floating {
from { transform: translate(0, 0px); }
65% { transform: translate(0, 15px); }
to { transform: translate(0, 0px); }
}<link rel="stylesheet" href="css_become.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!--Helena Luz, up201506747-->
</head>
<body>
<!--HERE-->
<header>
<h4>Here is everyw<span>here</span></h4>
<h5>(it depends where you are)</h5>
</header>
<h1 class="here">Here!</h1>
<h2 id="button">reposition me!</h2>
<!--HERE-->
<!--BECOME-->
<div id="container">
<p><span>Become</span>
<br>to come into existence
<br>to come to be
<br>to undergo <span>change</span>
</p>
</div>
<div id="float">
<div class="dot">
<h4 id="become_original">Become</h4>
</div>
</div>
<h2 id="button1">Transform me!</h2>
<!--BECOME-->
<script src="javascript_become.js" type="application/javascript"> </script>
</body>
</html>answered Jan 2 at 2:23
basicbasic
2,21111226
add a comment |
0
0
0
Well your first issue is that you are trying to set a click listener for element button but that isn't what you are passing here:
var button;
button = document.getElementById('button');
$('button').click(function(){
It should actually be:
$('#button').click(function(){
Because you are already using jQuery, there isn't a need to create a variable for the button by id, you can just use the ID.
Next, to make it move, why not use jQuerys offset function?
$('#button').click(function(){
$('.here').offset({
top: 100 * Math.random(),
left: 100 * Math.random(),
})
});
That will set your offset for top and left as well.
Working Solution:
//JAVASCRIPT FOR THE WORD BECOME - IS WORKING FINE
const classes = ["class1", "class2", "class3", "class4", "class5", "class6"];
var button1;
var selectedIndex = 0;
document.getElementById("button1").addEventListener("click", function(){
if(++selectedIndex >= classes.length) selectedIndex = 0;
document.getElementById("become_original").className = classes[selectedIndex];
});
//JAVASCRIPT FOR THE WORD "HERE" WHICH ISN'T WORKING
$(document).ready(function(){
//UPDATED THIS TO USE #
$('#button').click(function(){
$('.here').offset({
top: 100 * Math.random(),
left: 100 * Math.random(),
})
});
});@font-face {
font-family: BAUHS93;
src: url(fontes/BAUHS93.TTF);
}
@font-face {
font-family: Amatic;
src: url(fontes/AmaticSC-Regular.ttf);
}
@font-face {
font-family: bb-book;
src: url(fontes/bb-book.otf);
}
@font-face {
font-family: bebas;
src: url(fontes/BEBAS__.TTF);
}
@font-face {
font-family: mod;
src: url(fontes/MOD20.TTF);
}
@font-face {
font-family: monotonia;
src: url(fontes/monotonia.otf);
}
body {
margin:0;
padding:0;
border: solid 10px #000;
background-color: #EE3E4E;
border: solid 10px #000;
}
h1, h2, h4, h5, p, button {
font-family: Helvetica;
font-weight: bold;
text-transform: uppercase;
color: #000;
font-size: 35px;
line-height: 38px;
}
/*here's button*/
#button {
width:295px;
margin: auto;
margin-top: 2.5%;
border: 0px;
background-color: inherit;
}
#button:hover {text-decoration: underline;}
.here {
color: #FFF;
text-align: center;
width:500px;
margin:auto;
margin-top: 7.5%;
}
/* for become */
.class1 {
font-family: Amatic;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 25px;
}
.class2 {
font-weight: Regular;
font-family: BAUHS93;
}
.class3 {
font-family: bb-book;
}
.class4 {
font-family: bebas;
font-style:oblique;
}
.class5 {
font-family: mod;
text-transform: uppercase;
}
.class6 {
font-family: monotonia;
}
/*circle*/
.dot {
height: 465px;
width: 465px;
border-radius: 100%;
margin: 0 auto;
background-color: #F5CDFF;
animation-name: cores;
animation-duration: 4s;
animation-delay: 2s;
animation-iteration-count: infinite;
display: flex;
align-items: center;
margin-top: -5%;
overflow: hidden;
}
#container {
margin: 15% 0 6% 0;
}
#become_original {
font-size: 100px;
margin: 0 auto;
}
#float {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*become's button*/
#button1 {
background-color: inherit;
width: 300px;
margin:auto;
margin-top:2.5%;
margin-bottom:2.5%;
}
#button1:hover {text-decoration: underline;}
span{color: #FFF;}
/*animations*/
@keyframes cores {
0% {background-color: #F5CDFF;}
25% {background-color:#00ADEF;}
50% {background-color: #EE3E4E;}
100% {background-color:#F5CDFF;}
}
@keyframes floating {
from { transform: translate(0, 0px); }
65% { transform: translate(0, 15px); }
to { transform: translate(0, 0px); }
}<link rel="stylesheet" href="css_become.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!--Helena Luz, up201506747-->
</head>
<body>
<!--HERE-->
<header>
<h4>Here is everyw<span>here</span></h4>
<h5>(it depends where you are)</h5>
</header>
<h1 class="here">Here!</h1>
<h2 id="button">reposition me!</h2>
<!--HERE-->
<!--BECOME-->
<div id="container">
<p><span>Become</span>
<br>to come into existence
<br>to come to be
<br>to undergo <span>change</span>
</p>
</div>
<div id="float">
<div class="dot">
<h4 id="become_original">Become</h4>
</div>
</div>
<h2 id="button1">Transform me!</h2>
<!--BECOME-->
<script src="javascript_become.js" type="application/javascript"> </script>
</body>
</html>answered Jan 2 at 2:23
basicbasic
2,21111226
Well your first issue is that you are trying to set a click listener for element button but that isn't what you are passing here:
var button;
button = document.getElementById('button');
$('button').click(function(){
It should actually be:
$('#button').click(function(){
Because you are already using jQuery, there isn't a need to create a variable for the button by id, you can just use the ID.
Next, to make it move, why not use jQuerys offset function?
$('#button').click(function(){
$('.here').offset({
top: 100 * Math.random(),
left: 100 * Math.random(),
})
});
That will set your offset for top and left as well.
Working Solution:
//JAVASCRIPT FOR THE WORD BECOME - IS WORKING FINE
const classes = ["class1", "class2", "class3", "class4", "class5", "class6"];
var button1;
var selectedIndex = 0;
document.getElementById("button1").addEventListener("click", function(){
if(++selectedIndex >= classes.length) selectedIndex = 0;
document.getElementById("become_original").className = classes[selectedIndex];
});
//JAVASCRIPT FOR THE WORD "HERE" WHICH ISN'T WORKING
$(document).ready(function(){
//UPDATED THIS TO USE #
$('#button').click(function(){
$('.here').offset({
top: 100 * Math.random(),
left: 100 * Math.random(),
})
});
});@font-face {
font-family: BAUHS93;
src: url(fontes/BAUHS93.TTF);
}
@font-face {
font-family: Amatic;
src: url(fontes/AmaticSC-Regular.ttf);
}
@font-face {
font-family: bb-book;
src: url(fontes/bb-book.otf);
}
@font-face {
font-family: bebas;
src: url(fontes/BEBAS__.TTF);
}
@font-face {
font-family: mod;
src: url(fontes/MOD20.TTF);
}
@font-face {
font-family: monotonia;
src: url(fontes/monotonia.otf);
}
body {
margin:0;
padding:0;
border: solid 10px #000;
background-color: #EE3E4E;
border: solid 10px #000;
}
h1, h2, h4, h5, p, button {
font-family: Helvetica;
font-weight: bold;
text-transform: uppercase;
color: #000;
font-size: 35px;
line-height: 38px;
}
/*here's button*/
#button {
width:295px;
margin: auto;
margin-top: 2.5%;
border: 0px;
background-color: inherit;
}
#button:hover {text-decoration: underline;}
.here {
color: #FFF;
text-align: center;
width:500px;
margin:auto;
margin-top: 7.5%;
}
/* for become */
.class1 {
font-family: Amatic;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 25px;
}
.class2 {
font-weight: Regular;
font-family: BAUHS93;
}
.class3 {
font-family: bb-book;
}
.class4 {
font-family: bebas;
font-style:oblique;
}
.class5 {
font-family: mod;
text-transform: uppercase;
}
.class6 {
font-family: monotonia;
}
/*circle*/
.dot {
height: 465px;
width: 465px;
border-radius: 100%;
margin: 0 auto;
background-color: #F5CDFF;
animation-name: cores;
animation-duration: 4s;
animation-delay: 2s;
animation-iteration-count: infinite;
display: flex;
align-items: center;
margin-top: -5%;
overflow: hidden;
}
#container {
margin: 15% 0 6% 0;
}
#become_original {
font-size: 100px;
margin: 0 auto;
}
#float {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*become's button*/
#button1 {
background-color: inherit;
width: 300px;
margin:auto;
margin-top:2.5%;
margin-bottom:2.5%;
}
#button1:hover {text-decoration: underline;}
span{color: #FFF;}
/*animations*/
@keyframes cores {
0% {background-color: #F5CDFF;}
25% {background-color:#00ADEF;}
50% {background-color: #EE3E4E;}
100% {background-color:#F5CDFF;}
}
@keyframes floating {
from { transform: translate(0, 0px); }
65% { transform: translate(0, 15px); }
to { transform: translate(0, 0px); }
}<link rel="stylesheet" href="css_become.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!--Helena Luz, up201506747-->
</head>
<body>
<!--HERE-->
<header>
<h4>Here is everyw<span>here</span></h4>
<h5>(it depends where you are)</h5>
</header>
<h1 class="here">Here!</h1>
<h2 id="button">reposition me!</h2>
<!--HERE-->
<!--BECOME-->
<div id="container">
<p><span>Become</span>
<br>to come into existence
<br>to come to be
<br>to undergo <span>change</span>
</p>
</div>
<div id="float">
<div class="dot">
<h4 id="become_original">Become</h4>
</div>
</div>
<h2 id="button1">Transform me!</h2>
<!--BECOME-->
<script src="javascript_become.js" type="application/javascript"> </script>
</body>
</html>//JAVASCRIPT FOR THE WORD BECOME - IS WORKING FINE
const classes = ["class1", "class2", "class3", "class4", "class5", "class6"];
var button1;
var selectedIndex = 0;
document.getElementById("button1").addEventListener("click", function(){
if(++selectedIndex >= classes.length) selectedIndex = 0;
document.getElementById("become_original").className = classes[selectedIndex];
});
//JAVASCRIPT FOR THE WORD "HERE" WHICH ISN'T WORKING
$(document).ready(function(){
//UPDATED THIS TO USE #
$('#button').click(function(){
$('.here').offset({
top: 100 * Math.random(),
left: 100 * Math.random(),
})
});
});@font-face {
font-family: BAUHS93;
src: url(fontes/BAUHS93.TTF);
}
@font-face {
font-family: Amatic;
src: url(fontes/AmaticSC-Regular.ttf);
}
@font-face {
font-family: bb-book;
src: url(fontes/bb-book.otf);
}
@font-face {
font-family: bebas;
src: url(fontes/BEBAS__.TTF);
}
@font-face {
font-family: mod;
src: url(fontes/MOD20.TTF);
}
@font-face {
font-family: monotonia;
src: url(fontes/monotonia.otf);
}
body {
margin:0;
padding:0;
border: solid 10px #000;
background-color: #EE3E4E;
border: solid 10px #000;
}
h1, h2, h4, h5, p, button {
font-family: Helvetica;
font-weight: bold;
text-transform: uppercase;
color: #000;
font-size: 35px;
line-height: 38px;
}
/*here's button*/
#button {
width:295px;
margin: auto;
margin-top: 2.5%;
border: 0px;
background-color: inherit;
}
#button:hover {text-decoration: underline;}
.here {
color: #FFF;
text-align: center;
width:500px;
margin:auto;
margin-top: 7.5%;
}
/* for become */
.class1 {
font-family: Amatic;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 25px;
}
.class2 {
font-weight: Regular;
font-family: BAUHS93;
}
.class3 {
font-family: bb-book;
}
.class4 {
font-family: bebas;
font-style:oblique;
}
.class5 {
font-family: mod;
text-transform: uppercase;
}
.class6 {
font-family: monotonia;
}
/*circle*/
.dot {
height: 465px;
width: 465px;
border-radius: 100%;
margin: 0 auto;
background-color: #F5CDFF;
animation-name: cores;
animation-duration: 4s;
animation-delay: 2s;
animation-iteration-count: infinite;
display: flex;
align-items: center;
margin-top: -5%;
overflow: hidden;
}
#container {
margin: 15% 0 6% 0;
}
#become_original {
font-size: 100px;
margin: 0 auto;
}
#float {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*become's button*/
#button1 {
background-color: inherit;
width: 300px;
margin:auto;
margin-top:2.5%;
margin-bottom:2.5%;
}
#button1:hover {text-decoration: underline;}
span{color: #FFF;}
/*animations*/
@keyframes cores {
0% {background-color: #F5CDFF;}
25% {background-color:#00ADEF;}
50% {background-color: #EE3E4E;}
100% {background-color:#F5CDFF;}
}
@keyframes floating {
from { transform: translate(0, 0px); }
65% { transform: translate(0, 15px); }
to { transform: translate(0, 0px); }
}<link rel="stylesheet" href="css_become.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!--Helena Luz, up201506747-->
</head>
<body>
<!--HERE-->
<header>
<h4>Here is everyw<span>here</span></h4>
<h5>(it depends where you are)</h5>
</header>
<h1 class="here">Here!</h1>
<h2 id="button">reposition me!</h2>
<!--HERE-->
<!--BECOME-->
<div id="container">
<p><span>Become</span>
<br>to come into existence
<br>to come to be
<br>to undergo <span>change</span>
</p>
</div>
<div id="float">
<div class="dot">
<h4 id="become_original">Become</h4>
</div>
</div>
<h2 id="button1">Transform me!</h2>
<!--BECOME-->
<script src="javascript_become.js" type="application/javascript"> </script>
</body>
</html>//JAVASCRIPT FOR THE WORD BECOME - IS WORKING FINE
const classes = ["class1", "class2", "class3", "class4", "class5", "class6"];
var button1;
var selectedIndex = 0;
document.getElementById("button1").addEventListener("click", function(){
if(++selectedIndex >= classes.length) selectedIndex = 0;
document.getElementById("become_original").className = classes[selectedIndex];
});
//JAVASCRIPT FOR THE WORD "HERE" WHICH ISN'T WORKING
$(document).ready(function(){
//UPDATED THIS TO USE #
$('#button').click(function(){
$('.here').offset({
top: 100 * Math.random(),
left: 100 * Math.random(),
})
});
});@font-face {
font-family: BAUHS93;
src: url(fontes/BAUHS93.TTF);
}
@font-face {
font-family: Amatic;
src: url(fontes/AmaticSC-Regular.ttf);
}
@font-face {
font-family: bb-book;
src: url(fontes/bb-book.otf);
}
@font-face {
font-family: bebas;
src: url(fontes/BEBAS__.TTF);
}
@font-face {
font-family: mod;
src: url(fontes/MOD20.TTF);
}
@font-face {
font-family: monotonia;
src: url(fontes/monotonia.otf);
}
body {
margin:0;
padding:0;
border: solid 10px #000;
background-color: #EE3E4E;
border: solid 10px #000;
}
h1, h2, h4, h5, p, button {
font-family: Helvetica;
font-weight: bold;
text-transform: uppercase;
color: #000;
font-size: 35px;
line-height: 38px;
}
/*here's button*/
#button {
width:295px;
margin: auto;
margin-top: 2.5%;
border: 0px;
background-color: inherit;
}
#button:hover {text-decoration: underline;}
.here {
color: #FFF;
text-align: center;
width:500px;
margin:auto;
margin-top: 7.5%;
}
/* for become */
.class1 {
font-family: Amatic;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 25px;
}
.class2 {
font-weight: Regular;
font-family: BAUHS93;
}
.class3 {
font-family: bb-book;
}
.class4 {
font-family: bebas;
font-style:oblique;
}
.class5 {
font-family: mod;
text-transform: uppercase;
}
.class6 {
font-family: monotonia;
}
/*circle*/
.dot {
height: 465px;
width: 465px;
border-radius: 100%;
margin: 0 auto;
background-color: #F5CDFF;
animation-name: cores;
animation-duration: 4s;
animation-delay: 2s;
animation-iteration-count: infinite;
display: flex;
align-items: center;
margin-top: -5%;
overflow: hidden;
}
#container {
margin: 15% 0 6% 0;
}
#become_original {
font-size: 100px;
margin: 0 auto;
}
#float {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*become's button*/
#button1 {
background-color: inherit;
width: 300px;
margin:auto;
margin-top:2.5%;
margin-bottom:2.5%;
}
#button1:hover {text-decoration: underline;}
span{color: #FFF;}
/*animations*/
@keyframes cores {
0% {background-color: #F5CDFF;}
25% {background-color:#00ADEF;}
50% {background-color: #EE3E4E;}
100% {background-color:#F5CDFF;}
}
@keyframes floating {
from { transform: translate(0, 0px); }
65% { transform: translate(0, 15px); }
to { transform: translate(0, 0px); }
}<link rel="stylesheet" href="css_become.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!--Helena Luz, up201506747-->
</head>
<body>
<!--HERE-->
<header>
<h4>Here is everyw<span>here</span></h4>
<h5>(it depends where you are)</h5>
</header>
<h1 class="here">Here!</h1>
<h2 id="button">reposition me!</h2>
<!--HERE-->
<!--BECOME-->
<div id="container">
<p><span>Become</span>
<br>to come into existence
<br>to come to be
<br>to undergo <span>change</span>
</p>
</div>
<div id="float">
<div class="dot">
<h4 id="become_original">Become</h4>
</div>
</div>
<h2 id="button1">Transform me!</h2>
<!--BECOME-->
<script src="javascript_become.js" type="application/javascript"> </script>
</body>
</html>answered Jan 2 at 2:23
basicbasic
2,21111226
answered Jan 2 at 2:23
basicbasic
2,21111226
answered Jan 2 at 2:23
basicbasic
2,21111226
answered Jan 2 at 2:23
basicbasic
2,21111226
2,21111226
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54000412%2fhow-to-make-a-word-change-its-position-randomly-wth-mouse-click-using-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
