+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Coding (https://hackforums.net/forumdisplay.php?fid=151)
+---- Forum: Web Development (https://hackforums.net/forumdisplay.php?fid=183)
+---- Thread: [Javascript] [help] paragraph random positioning (/showthread.php?tid=4301557)
[help] paragraph random positioning - Melkor333 - Jun 23, 2014
okay, i recently started with javascript, and I'm messing a little around to learn how i can use it for webdev.
Now i wanted to make a script which adds a text somewhere on the page whenever the user presses enter.
Spoiler (Click to View)
The problem is, the distance to the top becomes more, thus the page becomes longer. And sometimes the text doesn't appear on the screen (I'm pretty sure it's inserted outside of the window..)
The code is this atm:
PHP Code
<?php
<html>
<head>
<script>
var idName = 0 //paragraph's id.
function createp() {
var text = '<p id="'+ idName +'";>TEST</p>';
var left = Math.floor(Math.random() * 90) + 5;
var top = Math.floor(Math.random() * 90) + 5;
document.getElementById('field').innerHTML += text;
var paragraph = document.getElementById(idName);
paragraph.style.webkitTransform = "rotate(" +(Math.floor(Math.random() * 360))+"deg)";
paragraph.position = 'relative';
paragraph.style.top = top+'%'; // tried with px, with bottom instead of top
paragraph.style.left = left+'%'; // this works just fine..
};
var test = function(event) {
if (event.keyCode == 13 || event.which == 13){
idName += 1;
createp() };
};
</script>
</head>
<body id='field'; onkeypress='test(event)'; style='background-color:green';>
</body>
</html>
Oh and if you see some outdated or stupid methods, please tell me!!!
Thhx alot in advance! 🤝
* - JumpWar - Jun 23, 2014
Look at what I made
Code
<html >
<head>
<style>
p {
display: inline-block;
position: absolute;
}
</style>
<script>
var idName = 0 //paragraph's id.
function createp() {
var text = document.createElement("p");
text.innerHTML = "TEST";
var left = Math.floor(Math.random() * 90) + 5;
var top = Math.floor(Math.random() * 90) + 5;
document.getElementById('field').appendChild(text); //Work on the DOM
var paragraph = text;
paragraph.style.webkitTransform = "rotate(" +(Math.floor(Math.random() * 360))+"deg)";
paragraph.style.top = top+'%';
paragraph.style.left = left+'%';
}
var test = function(event) {
if (event.keyCode == 13 || event.which == 13){
createp() }
}
</script>
</head>
<body id='field' onkeypress='test(event)' style='background-color:green;'>
</body>
</html>What helped: actually positioning the p tags absolute by using a <style> tag. Also setting display to inline-block because that was what made the display bigger.
I also created an object to use and inserted that into the DOM using appendChild this also allows to just refer to it later instead of setting and getting it using and ID.
Hope this helps you out
JumpWar
* - Melkor333 - Jun 23, 2014
thhx alot man! This is what I was searchin for! 🤝 🙂