I build this looping animation with dynamic words but I need to append all the span into the div <div id"wordcloud"></div>. I can't get it done as I want so I need a bit of help here.
var interval = 100;
var width = 800;
var height = 500;
var words = [
'Liberty',
'Morality',
'Modesty',
'Curiosity',
'Imagination',
'Excitement',
'Structure',
'Intellect',
'Friendliness',
'Conversation'
];
var wordPlacementInterval = setInterval(function() {
var currentWord = words.shift();
if (currentWord) {
var word = document.createElement('span');
word.innerHTML = currentWord;
word.style.top = Math.floor((Math.random() * height) + 1) + 'px';
word.style.left = Math.floor((Math.random() * width) + 1) + 'px';
document.body.appendChild(word);
} else {
clearInterval(wordPlacementInterval);
}
}, interval);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wordcloud"></div>
You had a missing = in the id property <div id[HERE]"wordcloud"></div>
and then add the elements you create to
document.querySelector('#wordcloud').appendChild(word);
like so:
var interval = 100;
var width = 800;
var height = 500;
var words = [
'Liberty',
'Morality',
'Modesty',
'Curiosity',
'Imagination',
'Excitement',
'Structure',
'Intellect',
'Friendliness',
'Conversation'
];
var wordPlacementInterval = setInterval(function() {
var currentWord = words.shift();
if (currentWord) {
var word = document.createElement('span');
word.innerHTML = currentWord;
word.style.top = Math.floor((Math.random() * height) + 1) + 'px';
word.style.left = Math.floor((Math.random() * width) + 1) + 'px';
document.querySelector('#wordcloud').appendChild(word);
} else {
clearInterval(wordPlacementInterval);
}
}, interval);
<div id="wordcloud"></div>
If you are trying to use the positions you are setting via javascript you need to add little CSS like:
var interval = 100;
var width = 800;
var height = 500;
var words = [
'Liberty',
'Morality',
'Modesty',
'Curiosity',
'Imagination',
'Excitement',
'Structure',
'Intellect',
'Friendliness',
'Conversation'
];
var wordPlacementInterval = setInterval(function() {
var currentWord = words.shift();
if (currentWord) {
var word = document.createElement('span');
word.innerHTML = currentWord;
word.style.top = Math.floor((Math.random() * height) + 1) + 'px';
word.style.left = Math.floor((Math.random() * width) + 1) + 'px';
document.querySelector('#wordcloud').appendChild(word);
} else {
clearInterval(wordPlacementInterval);
}
}, interval);
#wordcloud {
position: relative;
}
#wordcloud span {
position: absolute;
}
<div id="wordcloud"></div>
You have to add CSS position relative to the span elements.
Code example:
var interval = 100;
var width = 200;
var height = 150;
var words = ['Liberty', 'Morality', 'Modesty', 'Curiosity', 'Imagination', 'Excitement', 'Structure', 'Intellect', 'Friendliness', 'Conversation'];
var wordPlacementInterval = setInterval(function() {
var currentWord = words.shift();
var word = document.createElement('span');
var wordcloud = document.getElementById('wordcloud');
if (!currentWord) {
clearInterval(wordPlacementInterval);
return;
}
word.innerText = currentWord;
word.style.top = Math.floor((Math.random() * height) + 1) + 'px';
word.style.left = Math.floor((Math.random() * width) + 1) + 'px';
wordcloud.appendChild(word);
}, interval);
#wordcloud {
height: 100%;
width: 100%;
}
span {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wordcloud"></div>
I think this will help
$("#wordcloud").html(word)
Do this instead of the document.body.appendChild()
Related
I have some trouble making my divs resizeable.
Im trying to make a time scheduler, but the divs should be resizeable and change width based on the resized one.
This is what I currently have now.
var stepsize = 5;
var min = 0;
var max = 1440;
var stepwidth = 100 / max;
let original_width = 0;
let original_height = 0;
let original_x = 0;
let original_y = 0;
let original_mouse_x = 0;
let original_mouse_y = 0;
console.log(stepwidth);
var timeblocks = {0: [50, 100, "red"], 1: [100, 200, "blue"], 2: [200, 400, "red"]};
calcwidth(timeblocks);
function calcwidth(timeblocks){
const values = Object.values(timeblocks)
var container = document.getElementById("container");
var int = 0;
var startmargin = 0;
for (const arrayv of values) {
console.log(arrayv);
var start = 0;
var end = 0;
if(int == 0){
start = stepwidth * arrayv[0];
console.log(start);
end = stepwidth * arrayv[1] - start;
startmargin = startmargin + (start + end);
}
else{
start = startmargin;
end = stepwidth * arrayv[1] - start;
startmargin = startmargin + (end);
}
console.log(startmargin);
var timeblock = document.createElement('div');
timeblock.className = "timeblock";
timeblock.style.background = arrayv[2];
timeblock.style.marginLeft = start + "%";
timeblock.style.width = end + "%";
var moverleft = document.createElement('div');
moverleft.style.width = "5px";
moverleft.style.height = "50px";
moverleft.style.background = "black";
moverleft.style.marginLeft = "0px";
moverleft.style.position = "absolute";
moverleft.style.opacity = "0.4";
moverleft.addEventListener('mousedown', function(e) {
e.preventDefault()
original_width = timeblock.style.marginLeft;
original_x = timeblock.getBoundingClientRect().left;
original_mouse_x = e.pageX;
console.log(original_width);
moverleft.addEventListener('mousemove', resize);
moverleft.addEventListener('mouseup', stopResize);
});
var moverright = document.createElement('div');
moverright.style.width = "5px";
moverright.style.height = "50px";
moverright.style.background = "black";
moverright.style.right = "0px";
moverright.style.position = "absolute";
moverright.style.opacity = "0.4";
timeblock.appendChild(moverleft);
timeblock.appendChild(moverright);
container.appendChild(timeblock);
int++;
}
}
function resize(e) {
const width = original_width - (e.pageX - original_mouse_x)
console.log(e.target.parentElement);
e.target.parentElement.style.marginLeft = width + 'px'
}
function stopResize() {
window.removeEventListener('mousemove', resize)
}
.timeblock{
position: absolute;
height: 50px;
}
.timeblock:hover{
background: green !important;
}
#container{
width: 100%;
height: 50px;
border: 1px solid black;
}
<div class="col-xs-12">
<div class="col-xs-12" id="container">
</div>
</div>
It seems the divs don't get resized, what am I doing wrong?
I want to make all divs resizeable by their handlers and move others based on the resize.
Does someone have an example what I can use, cuz I have no clue on how to do this.
Please help me!
Not sure if this is exactly the correct approach for this but I have an array of buttons that spawn on the screen and after a few seconds it changes location and I have to click the buttons in the order they appeared initially.
Following is the code:
let arrayButtons = [];
let goButton = document.getElementById("inputButton");
function Buttons(color, height, width, top, left, order) {
this.order = order;
this.btn = document.createElement("button");
this.btn.style.backgroundColor = color;
this.btn.style.height = height;
this.btn.style.width = width;
this.btn.style.position = "absolute";
document.body.appendChild(this.btn);
this.setLocation = function(top, left) {
this.btn.style.top = top;
this.btn.style.left = left;
};
this.setLocation(top, left);
}
function createButtons(numOfButtons) {
console.log(numOfButtons);
let color;
let heightVal;
let widthVal;
let top;
let left;
let currentButton;
for (let i = 0; i < numOfButtons; i++) {
color = "#" + genRandomColor();
heightVal = "60px";
widthVal = "120px";
let x = window.innerWidth - 100;
let y = window.innerHeight - 100;
top = 90 + "px";
left = i * 120 + "px";
currentButton = new Buttons(color, heightVal, widthVal, top, left, i);
arrayButtons.push(currentButton);
}
}
function genRandomColor() {
let randomColor = Math.floor(Math.random() * 16777215).toString(16);
return randomColor;
}
function change() {
setTimeout(function() {
let x = window.innerWidth - 100;
let y = window.innerHeight - 200;
for (let i = 0; i < arrayButtons.length; i++) {
randomX = Math.floor(Math.random() * x + 50);
randomY = Math.floor(Math.random() * y + 50);
arrayButtons[i].setLocation(
randomX + 'px',
randomY + 'px');
}
}, 5000);
}
function isValid(range) {
range = document.getElementById("textField").value;
if (range < 2 || range > 10) {
return false;
} else {
return true;
}
}
// idea.. if the user clicks on the button in the order of the array it works
// for the hint, just make the value equal to the index number + 1
function clickHandler() {
let minMax = isValid();
if (minMax == true) {
createButtons(document.getElementById("textField").value);
change();
} else {
window.alert("Must be between 2 and 10");
}
}
goButton.onclick = clickHandler;
<p>How Many Buttons To Create?</p>
<input id="textField" type="text">
<button type="button" id="inputButton">Go!</button>
<br>
<br>
HTML
<button class="buttonClass">1</button>
JS
let btns = document.querySelectorAll(".buttonClass");
let currentBtn = 0;
btns.forEach(function(btn, crtIndex){
btn.onclick = function(){
if(currentBtn === crtIndex){
currentBtn++;
console.log("correct");
}
};
});
I wanna do some effect to my background so i tought i can add some shapes flying around but i do only 1 shape i cant loop or anything
i tried call function more than a one time but it doesnt help
function animasyon(a) {
window.onload=function(){
var id = setInterval(anim,5);
$('body').append('<div class=shape></div>');
$('body').append('<div class=shape></div>');
var kutu = document.getElementsByClassName("shape");
var pos = 0;
var x = window.innerWidth;
var y = window.innerHeight;
var borderSize = Math.floor(Math.random() * 3 ) + 1;
var ySize = Math.floor(Math.random() * y ) + 1;
var Size = Math.floor(Math.random() * 30 ) + 5;
var yon = Math.floor(Math.random() *2)+1;
var dolu = Math.floor(Math.random() *2)+1;
if (ySize > 50) { ySize-=20; }
function anim(){
if (pos == x) {
clearInterval(id);
document.getElementById("shape").remove();
}else{
pos++;
kutu[a].style.position = "absolute";
kutu[a].style.border = "solid rgb(119,38,53) "+borderSize+"px";
kutu[a].style.left = pos+"px";
kutu[a].style.width = Size+"px";
kutu[a].style.height = Size+"px";
if (yon == 1) { ySize-=0.2; } else { ySize+=0.2; }
if (dolu==1) {kutu[a].style.background = "rgb(119,38,53)";}
if (kutu[a].offsetTop < 0 || kutu[a].offsetTop > y-30) {document.getElementById("shape").remove();}
kutu[a].style.top = ySize+"px";
}
}
}
}
animasyon(0);
Try Calling 'anim' function in this way
setInterval(function(){anim()},5);
Your problem is that you are assigning window.onload function a value inside the function animasyon
window.onload holds only 1 function. If you call animation function more than once, then the last one will overwrite the first one.
Edit: You need to separate your animation logic from the page load logic. They are completely separate things.
Here is an example of adding multiple objects and animating each separately.
// HTML
<div id="container">
<div id="ball"></div>
<div id="ball2"></div>
<div id="ball3"></div>
<div id="ball4"></div>
</div>
// CSS
#ball, #ball2, #ball3, #ball4 {
background: red;
border: 1px solid #FAFDFA;
display: inline-block;
width: 1em;
height: 1em;
border-radius: 2em;
position: absolute;
}
#ball2 {
background: blue;
}
#ball3 {
background: green;
}
#ball4 {
background: purple;
}
#container {
width: 512px;
height: 512px;
background: black;
position: relative;
}
// JS
const container = document.getElementById('container');
const stageWidth = 512;
const stageHeight = 512;
const makeFall = (elementId) => {
// this function makes an enlement fall in random direction
const animationSpeed = 4;
// your onload function
const ball = document.getElementById(elementId);
let directionX = (Math.random() * animationSpeed * 2) - animationSpeed;
let directionY = Math.random() * animationSpeed;
const setRandomStart = () => {
ball.style.top = '10px';
ball.style.left = (Math.random() * (stageWidth / 2)) + 'px';
directionX = (Math.random() * animationSpeed * 2) - animationSpeed;
directionY = Math.random() * animationSpeed;
}
setRandomStart();
let animationInterval = setInterval(() => {
let px = parseFloat(ball.style.left);
let py = parseFloat(ball.style.top);
px += directionX;
py += directionY;
if (px > stageWidth - 20 || py > stageHeight - 20 || px < -20) {
setRandomStart();
} else {
ball.style.left = px + 'px';
ball.style.top = py + 'px';
}
}, 48);
}
// In Your onload function you can add the elements and then animate
makeFall('ball');
makeFall('ball2');
makeFall('ball3');
makeFall('ball4');
https://jsfiddle.net/753oL8re/4/
I'm trying to make an element that shrinks as you click it more and more. Once it reaches a threshold of 1%, it should reappear in full length and not be clickable. the style.pointerEvents is not working. (This is code added in, in order to solve an issue.) This is all of the code, there must be conflicting variables or something. But the main premise is to shake the element and shrink and then regrow and disable itself and after a waiting period enable itself.
`var rotated = false;
var height = 24.6;
var width = 15
function clickedhub() {
clicked();
timeout();
}
function clicked() {
document.getElementById('box').onclick = function() {
var div = document.getElementById('box'),
deg = rotated ? 0 : 10;
div.style.webkitTransform = 'rotate('+deg+'deg)';
div.style.msTransform = 'rotate('+deg+'deg)';
div.style.oTransform = 'rotate('+deg+'deg)';
div.style.transform = 'rotate('+deg+'deg)';
}
setInterval(res, 140);
function res() {
document.getElementById('box').style = function() {
var div = document.getElementById('box'),
deg = rotated ? 0 : 0;
div.style.webkitTransform = 'rotate('+deg+'deg)';
div.style.mozTransform = 'rotate('+deg+'deg)';
div.style.msTransform = 'rotate('+deg+'deg)';
div.style.oTransform = 'rotate('+deg+'deg)';
div.style.transform = 'rotate('+deg+'deg)';
}
}
}
function timeout() {
document.getElementById('box').onclick = function() {
var div = document.getElementById('box');
width = width / 1.5;
height = height / 1.5;
}
}
setInterval(gamerule, 10);
function gamerule() {
var div = document.getElementById('box');
if (width <= 1) {
div.removeEventListener("click", gamerule);
width = 100;
height = 100;
} else {
width--;
height--;
}
div.style.width = width + '%';
div.style.height = height + '%';
div.addEventListener("click", gamerule);
}
`
This should work for you
//setInterval(gamerule, 10);
let width = 100;
let height = 100;
var div = document.getElementById('box');
function gamerule() {
if (width <= 1) {
div.removeEventListener("click", gamerule);
width = 100;
height = 100;
} else {
width--;
height--;
}
div.style.width = width + '%';
div.style.height = height + '%';
}
div.addEventListener("click", gamerule);
#box{
background-color:red;
width:100%;
height:100%;
}
#container{
width:500px;
height:500px;
}
Click on the red box
<div id="container" >
<div id="box">
</div>
</div>
I am currently trying to implement a GridView with a frozen header. I've gotten the header frozen using javascript found online. Here is the code:
var GridId = "<%=dgContacts.ClientID %>";
var ScrollHeight = 180;
var ScrollWidth = 700;
window.onload = function () {
enablePostLog();
var grid = document.getElementById(GridId);
var gridWidth = grid.offsetWidth;
var headerCellWidths = new Array();
for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) {
headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth;
}
grid.parentNode.appendChild(document.createElement("div"));
var parentDiv = grid.parentNode;
var table = document.createElement("table");
for (i = 0; i < grid.attributes.length; i++) {
if (grid.attributes[i].specified && grid.attributes[i].name != "id") {
table.setAttribute(grid.attributes[i].name, grid.attributes[i].value);
}
}
table.style.cssText = grid.style.cssText;
table.style.width = gridWidth + "px";
table.style.tableLayout = "fixed";
table.appendChild(document.createElement("tbody"));
table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]);
var headerRow = table.getElementsByTagName("TH");
var gridRow = grid.getElementsByTagName("TR")[0];
for (var i = 0; i < headerRow.length; i++) {
var width;
if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) {
width = headerCellWidths[i];
}
else {
width = gridRow.getElementsByTagName("TD")[i].offsetWidth;
}
headerRow[i].style.width = parseInt(width - 3) + "px";
gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px";
}
parentDiv.removeChild(grid);
var dummyHeader = document.createElement("div");
dummyHeader.setAttribute('id', 'divHeader');
dummyHeader.style.cssText = "margin-left: auto; margin-right: auto; overflow: hidden; width: " + ScrollWidth + "px";
dummyHeader.appendChild(table);
parentDiv.appendChild(dummyHeader);
var scrollableDiv = document.createElement("div");
gridWidth = parseInt(gridWidth) + 17;
scrollableDiv.setAttribute('id', 'divBody');
scrollableDiv.style.cssText = "margin-left: auto; margin-right: auto; overflow: auto; height: " + ScrollHeight + "px; width: " + ScrollWidth + "px";
scrollableDiv.appendChild(grid);
scrollableDiv.onscroll = scrollHeader;
parentDiv.appendChild(scrollableDiv);
}
function scrollHeader() {
var header = document.getElementById('divHeader');
var body = document.getElementById('divBody');
header.scrollLeft = body.scrollLeft;
}
The problem I'm having is that the GridView being in a fixed-width div. The width styles added to the columns is being ignored.
The final HTML looks like this:
http://i.stack.imgur.com/xDzez.png
The actual table rendered looks like this (the problem is most noticable in the "View" and "Notify" columns):
http://i.stack.imgur.com/rA35z.png
If I remove the fixed width on the outer div, the column widths correct themselves, but obviously, I lose my scrollability. It appears to be trying to shrink the whitespace in the table cells to try and fit into the div. This isn't necessary because of the overflow: auto on the outer div. Is there a style or something I can add to stop the browser from doing this?
Turns out I needed table-layout: fixed AND width: 100% to both tables. I had tried the table-layout solution, but didn't realize about the width needing to be 100% as well.
Final javascript:
var GridId = "<%=dgContacts.ClientID %>";
var ScrollHeight = 180;
var ScrollWidth = 700;
window.onload = function () {
enablePostLog();
var grid = document.getElementById(GridId);
var gridWidth = grid.offsetWidth;
var headerCellWidths = new Array();
for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) {
headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth;
}
grid.parentNode.appendChild(document.createElement("div"));
var parentDiv = grid.parentNode;
var table = document.createElement("table");
for (i = 0; i < grid.attributes.length; i++) {
if (grid.attributes[i].specified && grid.attributes[i].name != "id") {
table.setAttribute(grid.attributes[i].name, grid.attributes[i].value);
}
}
table.style.cssText = grid.style.cssText;
table.appendChild(document.createElement("tbody"));
table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]);
var headerRow = table.getElementsByTagName("TH");
var gridRow = grid.getElementsByTagName("TR")[0];
for (var i = 0; i < headerRow.length; i++) {
var width;
if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) {
width = headerCellWidths[i];
}
else {
width = gridRow.getElementsByTagName("TD")[i].offsetWidth;
}
gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px";
if (i == headerRow.length - 1) {
width = width + getScrollBarWidth();
}
headerRow[i].style.width = parseInt(width - 3) + "px";
}
parentDiv.removeChild(grid);
grid.style.tableLayout = "fixed";
table.style.tableLayout = "fixed";
grid.style.width = "100%";
table.style.width = "100%";
var dummyHeader = document.createElement("div");
dummyHeader.setAttribute('id', 'divHeader');
dummyHeader.style.cssText = "margin-left: auto; margin-right: auto; overflow: hidden; width: " + ScrollWidth + "px";
dummyHeader.appendChild(table);
parentDiv.appendChild(dummyHeader);
var scrollableDiv = document.createElement("div");
scrollableDiv.setAttribute('id', 'divBody');
scrollableDiv.style.cssText = "margin-left: auto; margin-right: auto; overflow: auto; height: " + ScrollHeight + "px; width: " + ScrollWidth + "px";
scrollableDiv.appendChild(grid);
scrollableDiv.onscroll = scrollHeader;
parentDiv.appendChild(scrollableDiv);
}
function scrollHeader() {
var header = document.getElementById('divHeader');
var body = document.getElementById('divBody');
header.scrollLeft = body.scrollLeft;
}
function getScrollBarWidth() {
var inner = document.createElement('p');
inner.style.width = "100%";
inner.style.height = "200px";
var outer = document.createElement('div');
outer.style.position = "absolute";
outer.style.top = "0px";
outer.style.left = "0px";
outer.style.visibility = "hidden";
outer.style.width = "200px";
outer.style.height = "150px";
outer.style.overflow = "hidden";
outer.appendChild(inner);
document.body.appendChild(outer);
var w1 = inner.offsetWidth;
outer.style.overflow = 'scroll';
var w2 = inner.offsetWidth;
if (w1 == w2) w2 = outer.clientWidth;
document.body.removeChild(outer);
return (w1 - w2);
}