First of all i have seen many answer in stakeoverflow but none of these helped me!!! I want to start my div from a random position and then it will move. Rather then it shows from a static position and then it comes to a random position and then it start to move. I tried to declare my top and left by javascript in
$( document ).ready(function()
but that does not help
HTML
<div class="ballarea" id="ballarea1">
<div class="circle type" id="ball"></div>
</div>
CSS
.circle{
border-radius: 50%;
border: thin;
border-color: blue;
}
.type {
width: 20px;
height: 20px;
border: 5px solid blue;
position: relative;
}
.ballarea{
width: 300px;
height: 400px;
border: solid black;
overflow: hidden;
position: relative;
}
JavaScript
var i=0;
var j=0;
function ballMove(){
var d=document.getElementById("ball");
var temp=i;
if(i<1)
{
i = Math.floor(Math.random() * (200));
j = Math.floor(Math.random() * (200));
}
for(;i<2+temp;i++,j++)
{
d.style.left=i+"px";
d.style.top=j+"px";
}
//document.getElementById('ball').style.display = 'block';
}
function timeChange()
{
setInterval( ballMove, 500);
}
Now at first it starts from a static position like the following and then it start from a random position. I want to show it from a random position not from a static position
Try hiding it at first, because your script run when your DOM is ready.
<div class="ballarea" id="ballarea1">
<div class="circle type" id="ball" style="display:none"></div>
</div>
Then when your script is running, show it
var i = 0;
var j = 0;
function randomBall(){
var d = document.getElementById("ball");
i = Math.floor(Math.random() * (200));
j = Math.floor(Math.random() * (200));
d.style.left = i+"px";
d.style.top = j+"px";
d.style.display = "block";
}
function ballMove(){
var d=document.getElementById("ball");
i += 2;
j += 2;
d.style.left = i+"px";
d.style.top = j+"px";
}
function timeChange()
{
randomBall();
setInterval( ballMove, 500);
}
Related
I am trying to create a set of elements from CMS. I have reproduced the problem here with a set of rectangles that are being generated in Javascript. How can I dynamically add a "onmouseover" method to each one of them, that changes the colour of the block hovered?
for (i = 0; i < 5; i++) {
var coloured_div = document.createElement("div");
coloured_div.className = "col_div_class";
coloured_div.id = "coloured_div" + i;
document.getElementById("body").appendChild(coloured_div);
coloured_div.addEventListener("mouseover", hoverCube);
}
function hoverCube(i) {
document.getElementById("coloured_div" + i).style.backgroundColor = "orange";
}
.col_div_class {
width: 250px;
height: 250px;
background-color: yellow;
border: solid white 5px;
}
<body id="body">
</body>
As you're passing hoverCube as a callback to your event listener, it automatically gets passed an object which has information about the event (e). From this information, you can get the element which triggered the event by doing (e.target), which you can then set the style of:
for (var i = 0; i < 5; i++) {
var coloured_div = document.createElement("div");
coloured_div.className = "col_div_class";
coloured_div.id = "coloured_div" + i;
document.getElementById("body").appendChild(coloured_div);
coloured_div.addEventListener("mouseover", hoverCube);
}
function hoverCube(e) {
e.target.style.backgroundColor = "orange";
}
.col_div_class {
width: 250px;
height: 250px;
background-color: yellow;
border: solid white 5px;
}
<body id="body">
</body>
Alternatively, to achieve what you're trying to do in your code, you need to pass i as a parameter to hoverCube, which will then be able to access the correct element:
for (var i = 0; i < 5; i++) {
var coloured_div = document.createElement("div");
coloured_div.className = "col_div_class";
coloured_div.id = "coloured_div" + i;
document.getElementById("body").appendChild(coloured_div);
coloured_div.addEventListener("mouseover", (function(i) { // ES5 closure (if using ES6 you can simply change var i to let i in the for loop)
return function() {
hoverCube(i);
};
})(i)
)}
function hoverCube(i) {
document.getElementById("coloured_div" + i).style.backgroundColor = "orange";
}
.col_div_class {
width: 250px;
height: 250px;
background-color: yellow;
border: solid white 5px;
}
<body id="body">
</body>
Append event listener to all elements. Select them with querySelectorAll. No ids needed.
for (i = 0; i < 5; i++) {
var coloured_div = document.createElement("div");
coloured_div.className = "col_div_class";
document.getElementById("body").appendChild(coloured_div);
}
document.querySelectorAll('.col_div_class').forEach(function(el) {
el.addEventListener('mouseover', function(e) {
e.currentTarget.style.backgroundColor = "orange";
});
});
.col_div_class {
width: 250px;
height: 250px;
background-color: yellow;
border: solid white 5px;
}
<body id="body"></body>
You have 2 options here. The first is to use just CSS to accomplish the task.
for (i = 0; i < 5; i++) {
var coloured_div = document.createElement("div");
coloured_div.className = "col_div_class";
coloured_div.id = "coloured_div" + i;
document.getElementById("body").appendChild(coloured_div);
}
.col_div_class {
width: 250px;
height: 250px;
background-color: yellow;
border: solid white 5px;
}
.col_div_class:hover {
background-color: orange;
}
<body id="body">
</body>
If you must use Javascript, please see below.
for (i = 0; i < 5; i++) {
var coloured_div = document.createElement("div");
coloured_div.className = "col_div_class";
coloured_div.id = "coloured_div" + i;
document.getElementById("body").appendChild(coloured_div);
coloured_div.addEventListener("mouseover", function(e){e.currentTarget.style.backgroundColor = "orange";});
coloured_div.addEventListener("mouseout", function(e){e.currentTarget.style.backgroundColor = "yellow";});
}
.col_div_class {
width: 250px;
height: 250px;
background-color: yellow;
border: solid white 5px;
}
<body id="body">
</body>
I'm trying to generate 100 random coloured boxes within the div with the existing by clicking generate button that has top and left position 0-400. Also if I hover over any coloured box it disappears until the last that will give me an alert last box with last box left.
I managed to create a box that generates different colours but im not sure how to generate a 100 let alone hover over and delete the boxes when it is, how would one go about doing that?
My HTML:
<!doctype html>
<html lang="en">
<head>
<title> Generator </title>
<meta charset="utf-8">
<script src="prototype.js"></script>
<script src="task4.js"></script>
<style>
#container {
height: 500px;
}
p {
width: 70px;
height: 70px;
background-color: rgb(100, 100, 255);
border: solid 2px black;
position: absolute;
}
</style>
</head>
<body>
<div id="container">
</div>
<button id="myButton"
onclick="createBoxes()"> Generate More
</button>
</body>
</html>
My JS
window.onload = function()
{
createBoxes();
}
function createBoxes()
{
var colors = ["red", "green", "blue", "purple", "yellow"];
var newP = document.createElement("p");
var top = 10 + "px";
var left = 10 + "px";
newP.style.top = top;
newP.style.left = left;
newP.style.backgroundColor = colors[ Math.floor( Math.random() *5 )];
$("container").appendChild(newP);
}
window.onload = function() {
createBoxes();
}
Let's get this done step by step.
While creating box element, you should not use p tag, div is the best choice here.
I have implemented as far as I understood from your question.
Let me know in the comments if I missed something.
I added comments in the code, check if you get it.
window.onload = function() {
createBoxes();
}
function createBoxes() {
var left = 0;
var top = 0;
var colors = ["red", "green", "blue", "purple", "yellow"];
// create a for loop and run 99 times;
for (var i = 1; i < 100; i++) {
var newDiv = document.createElement("div");
newDiv.classList.add('box')
newDiv.style.backgroundColor = colors[Math.floor(Math.random() * 5)];
newDiv.style.top = top + 'px';
newDiv.style.left = left + 'px';
// now add the event on this one;
newDiv.addEventListener('mouseover', removeBoxes);
$("#container").append(newDiv);
left += 70; // increase left 70px each time in the loop
if (i % 5 == 0) { // if the we have 5 boxes in one row, reset left to 0px and increase top property by 70px to get another row;
left = 0;
top += 70;
}
}
}
// function to remove the boxes on hover;
function removeBoxes() {
$(this).remove();
}
// add the mouseover event listener;
$('div.box').on('mouseover', removeBoxes);
#container {
min-height: 200px;
}
div.box {
width: 70px;
height: 70px;
background-color: rgb(100, 100, 255);
border: solid 2px black;
display: inline-block;
position: absolute;
box-sizing: border-box;
}
#myButton {
position: absolute;
right: 0;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
</div>
<button id="myButton" onclick="createBoxes()"> Generate 99 More
</button>
I am working on the Odin project's javascript/jquery project to make an etcha sketch(of sorts). Initially the webpage loads fine, but when I attempt to change the size of the "gridval" with a prompt, only the box sizes change but not how many boxes fill the given space.
Thanks for your help in advance.
HTML
<!DCOTYPE html>
<html>
<head>
<title>Java Project</title>
<link rel="icon" href="https://www.codementor.io/assets/page_img/learn-javascript.png">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<button class="clear_button">Clear screen</button>
<div id="container"></div>
<script>creategrid();</script>
<script>hovereffect();</script>
</body>
</html>
CSS
#container{
width:400px;
height:400px;
background-color: #fc6;
}
.box{
width:52px;
height:52px;
display:inline-block;
margin: 1px;
background-color: #f86;
}
.clear_button{
background-color: #fc6;
color: #ffe;
border:none;
border-radius: 2px;
padding: 10px;
margin: 10px;
}
.clear_button:hover{
background-color: #426;
}
JavaScript
gridval = 16;
function creategrid(){
$(document).ready(function(){
//make grid code
for(var x = 0; x < gridval; x++){
for(var y = 0; y < gridval; y++){
var box = $("<div class='box'></div>");
box.appendTo('#container');
}
}
var width_height = 400/gridval - 2;
var box_class = document.querySelectorAll(".box");
for(var i = 0; i < box_class.length; i++){
box_class[i].style.width = width_height;
box_class[i].style.height = width_height;
}
//clear button code
$(".clear_button").click(function(){
$(".box").css("background-color", "#f86");
var val = gridval;
gridval = prompt("Please enter a value between 2 and 100 for the grid size!", val);
if(gridval != null) {
var width_height = 400/gridval - 2;
var box_class = document.querySelectorAll(".box");
for(var i = 0; i < box_class.length; i++){
box_class[i].style.width = width_height;
box_class[i].style.height = width_height;
}
}
});
});
}
//hover effect code
function hovereffect(){
$(document).ready(function(){
$(".box").hover(function(){
$(this).css("background-color", "#0ba");
}, function(){
$(this).css("background-color", "#9dd");
});
});
}
Your code needs a total reform, see the comments:
//The ready event will only be triggred once; on your page load.
$(function() {
//Default value
var gridval = 16;
/**
* Create the grid
*/
function createGrid(gridval) {
//make grid code
for (var x = 0; x < gridval; x++) {
for (var y = 0; y < gridval; y++) {
var box = $("<div class='box'></div>");
box.appendTo('#container');
}
}
var width_height = (400 / gridval) - 2;
var box_class = document.querySelectorAll(".box");
for (var i = 0; i < box_class.length; i++) {
box_class[i].style.width = width_height+'px'; //You needed +'px' here
box_class[i].style.height = width_height+'px'; //You needed +'px' here
}
}
//Execute the function on load
createGrid(gridval);
//Event delegation on since your elements will be created dynamically
$(document).on({mouseenter: function() {
$(this).css("backgroundColor", "#0ba");//backgroundColor instead of background-color
}, mouseleave: function() {
$(this).css("backgroundColor", "#9dd");
}}, ".box");
//clear button code
$(".clear_button").click(function() {
//$(".box").css("backgroundColor", "#f86"); // you don't need this all the elements will be removed!
var val = gridval;
gridval = prompt("Please enter a value between 2 and 100 for the grid size!", val);
if (gridval != null) {
//Empty the container
$("#container").empty();
createGrid(gridval);
}
});
});
#container {
width: 400px;
height: 400px;
background-color: #fc6;
}
.box {
width: 52px;
height: 52px;
/* Remove inline block */
display: block;
/* Add float*/
float:left;
margin: 1px;
background-color: #f86;
}
.clear_button {
background-color: #fc6;
color: #ffe;
border: none;
border-radius: 2px;
padding: 10px;
margin: 10px;
}
.clear_button:hover {
background-color: #426;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="clear_button">
Clear screen</button>
<div id="container"></div>
Ok I have created a stamina container that has three stamina bars within each other, and when you click on the attack button some of the stamina is taken off the first stamina bar. However, if you keep clicking on the first stamina bar until it depletes to 0 it will then start to deplete the second stamina bar and so on. Now, that is how it was intended to happen, but I'm not able get it to function that way. Here is the jsfiddle for it, whenever I click on the attack button multiple times the stamina bar is lagging up and once the stamina bar is complete it will still deplete the stamina bar and regnerate itself again. You have to try the jsfiddle to understand what I'm talking about.
HTML
<body>
<div id="container">
<div class="hBar"> <div class="health"></div></div><!--hbar -->
<div class="sBar">
<div class="s3">
<div class="s2">
<div class="s1">
</div><!--s1 -->
</div><!--s2 -->
</div><!--s3 -->
</div><!--sBar -->
<div class="attack">attack</div>
</div><!--container -->
</body>
CSS
*{ margin:0px; padding:0px;}
.hBar{width:400px; height:40px; border:1px solid grey; margin-bottom:20px;}
.health{background:green;width:100%; height:100%;}
.sBar{ width:400px; height:40px; border:1px solid grey; margin-bottom:20px;}
.s3{ width:100%; height:100%; background:red;}
.s2{width:100%; height:100%; background:orange;}
.s1{width:100%; height:100%; background:yellow;}
#container{background:white; width:80%; padding:10px; margin:auto;}
body{background:#CCC;}
.attack{ border-radius:90px; border:black solid 1px; height:75px; width:75px; text-align:center; line-height:75px;}
.attack:hover{cursor:pointer;}
Javascript
$(document).ready(function () {
// one , two, and three variables are collecting the stamina bars
var one = $('.s1');
var two = $('.s2');
var three = $('.s3');
var oneWidth = one.width();
var twoWidth = two.width();
var threeWidth = three.width();
var stam = $('.sBar').width();
var damage;
var subtractHealth;
var num;
$('.attack').click(function () {
// timer is supposed to be the variable for a setInterval function
let timer;
// damage is supposed to take away the stamina
damage = 100;
// This function is supposed to stop the interval and the animation done on the
// stamina bars
function stopAnimate() {
clearInterval(timer);
one.stop();
two.stop();
three.stop();
}
// if the first and the second stamina bar is below 0, then add subtract the width to .s3
if (oneWidth <= 0 && twoWidth <= 0) {
subtractHealth = $('.s3').width() - damage;
three.animate({
'width': subtractHealth
}, 'fast');
// if the first stamina bar is less than 0, the subtract the width of .s2
} else if (oneWidth <= 0) {
subtractHealth = $('.s2').width() - damage;
two.animate({
'width': subtractHealth
}, 'fast');
// if the first stamina bar is not below 0 then run the content in this
} else {
subtractHealth = $('.s1').width() - damage;
one.animate({
'width': subtractHealth
}, 'fast');
}
// regenerates all the three stamina bars with the animate method
function regenerate(stam1, stam2, stam3) {
stam1.animate({
'width': stam
}, 1000, function () {
if (stam1.width() == stam) {
stam2.animate({
'width': stam
}, 1000, function () {
if (stam2.width() == stam) {
stam3.animate({
'width': stam
}, 1000)
}// if stam2
});//stam2.animate
}//if stam.width()
})//stam1.animate
setTimeout(stopAnimate(), 5000); //end function
}; //end regenerate
// run setInterval and assign the method to timer
timer = setInterval(regenerate(one, two, three), 1000);
}); //end click
}); //end ready
I'm not 100% certain that i have the effect you are after, but if not I think you should be able to modify this code to get the result you seek. If you would like additional assistance, drop a comment and I will be happy to see what I can do.
var staminaMax = 1000;
var staminaCurrent = staminaMax;
var staminaHealInterval;
var staminaTick = 100;
var staminHealPerTick = 10;
var $sBar3 = $(".sBar .sBarStatus.s3");
var $sBar2 = $(".sBar .sBarStatus.s2");
var $sBar1 = $(".sBar .sBarStatus.s1");
var healStamina = function() {
staminaCurrent = Math.min(staminaCurrent + staminHealPerTick, staminaMax);
var rawPct = staminaCurrent / staminaMax;
var s1Pct = (function() {
if (rawPct <= (2 / 3)) { return 0; }
return (rawPct - (2 / 3)) / (1 / 3);
})();
var s2Pct = (function() {
if (rawPct <= (1 / 3)) { return 0; }
if (rawPct >= (2 / 3)) { return 1; }
return (rawPct - (1 / 3)) / (1 / 3);
})();
var s3Pct = (function() {
if (rawPct >= (1 / 3)) { return 1; }
return (rawPct - (0 / 3)) / (1 / 3);
})();
$sBar3.css("width", 100 * s3Pct + "%");
$sBar2.css("width", 100 * s2Pct + "%");
$sBar1.css("width", 100 * s1Pct + "%");
if (staminaCurrent >= staminaMax) {
clearInterval(staminaHealInterval);
staminaHealInterval = null;
}
};
var dingStamina = function(amount) {
staminaCurrent = Math.max(staminaCurrent - amount, 0);
if (!staminaHealInterval) {
staminaHealInterval = setInterval(healStamina, staminaTick);
}
}
$('.attack').click(function() {
dingStamina(100);
});
* {
margin: 0px;
padding: 0px;
}
.hBar {
width: 400px;
height: 10px;
border: 1px solid grey;
margin-bottom: 20px;
}
.health {
background: green;
width: 100%;
height: 100%;
}
.sBar {
width: 400px;
height: 10px;
border: 1px solid grey;
margin-bottom: 20px;
position: relative;
}
.sBar .sBarStatus {
position: absolute;
width: 100%;
height: 100%;
}
.s3 {
background: red;
}
.s2 {
background: orange;
}
.s1 {
background: yellow;
}
#container {
background: white;
width: 80%;
padding: 10px;
margin: auto;
}
body {
background: #CCC;
}
.attack {
border-radius: 90px;
border: black solid 1px;
height: 75px;
width: 75px;
text-align: center;
line-height: 75px;
}
.attack:hover {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="hBar">
<div class="health"></div>
</div>
<div class="sBar">
<div class="sBarStatus s3"></div>
<div class="sBarStatus s2"></div>
<div class="sBarStatus s1"></div>
</div>
<div class="attack">attack</div>
</div>
I am new to web development but highly fascinated by it. So, basically I am creating a light-box where thumbnails of images will be appear on screen and they will appear bigger in size when user clicks over them. Now, I want when user hovers over the gallery images/thumbnails then some text should appear over the current image with may be some animation or basically mouser-hover should cause some event to happen but I am unable to do it. Text should be added dynamically or may be previously stored in an array or something of that sort. Please have a look at my code and tell me how to modify it in order to achieve such effect and if you know a better and easier way to do so then feel free to share. Thank you so much!!
HTML:
<div class="gallery">
<ul id="images"></ul>
<div class="lightbox">
<div class='limage'>
</div>
<div class='left'>
</div>
<div class='right'>
</div>
<div class='close'>
x
</div>
</div>
</div>
JAVASCRIPT:
var gallery_slider = new Array();
gallery_slider[0] = "im1.jpg";
gallery_slider[1] = "im2.jpg";
gallery_slider[2] = "im3.jpg";
function displayAllImages() {
var i = 0,
len = gallery_slider.length;
for (; i < gallery_slider.length; i++) {
var img = new Image();
img.src = gallery_slider[i];
img.style.width = '200px';
img.style.height = '120px';
img.style.margin = '3px';
img.style.cursor = 'pointer';
document.getElementById('images').appendChild(img);
}
};
$(function() {
displayAllImages();
});
$(function() {
$('img').click(function() {
var hell = (this).src;
display(hell);
});
});
function display(hello) {
$('header').css('display', 'none'); /*for some other purposes*/
$('.limage').html("<img src=" + hello + " >");
$('.lightbox').css("display", "block");
$('.lightbox').fadeIn();
$('.right').click(function() {
var im = new Array();
var x;
var p;
for (x = 0; x < gallery_slider.length; x++) {
im[x] = gallery_slider[x];
}
for (p = 0; p < im.length; p++) {
if (im[p] == hello) {
break;
} else {
continue;
}
}
if (p >= (im.length - 1)) {
p = -1;
}
$('.limage').fadeOut(0);
$('.limage').html("<img src= " + im[p + 1] + ">");
$('.limage').fadeIn(500);
hello = im[p + 1];
});
$('.left').click(function() {
var im = new Array();
var x;
var p;
for (x = 0; x < gallery_slider.length; x++) {
im[x] = gallery_slider[x];
}
for (p = 0; p < im.length; p++) {
if (im[p] == hello) {
break;
} else {
continue;
}
}
if (p == 0) {
p = (im.length);
}
$('.limage').fadeOut(0);
$('.limage').html("<img src= " + im[p - 1] + ">");
$('.limage').fadeIn(500);
hello = im[p - 1];
});
$('.close').click(function() {
$('.lightbox').fadeOut();
$('header').css('display', 'block'); /*for some other purposes*/
});
};
CSS:
.gallery {
width: 100%;
height: 400px;
overflow: hidden;
margin: auto;
}
.gallery ul {
list-style: none;
}
.lightbox {
background-color: rgba(0, 0, 0, 0.3);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
z-index: 106;
}
.close {
color: #fff;
border: 1px solid #fff;
border-radius: 100px;
background-color: #000;
position: absolute;
top: 10px;
right: 20px;
padding: 10px;
font-family: firstfont;
font-size: 30px;
z-index: 101;
cursor: pointer;
}
.close:hover {
background-color: #ebebeb;
color: #000;
}
.left {
width: 50%;
height: 100%;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
}
.right {
width: 50%;
height: 100%;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
.limage {
position: relative;
margin: auto;
top: 17%;
left: 15%;
max-width: 90%;
max-height: 90%;
}
There might be some bugs in coding. Watch out.
This code is working for displaying images as thumbnails as a matrix and as slider in lightbox when clicked upon them. I am not able to figure out how to add hover functionality to initial thumbnails.
Jsfiddle :
http://jsfiddle.net/psd6cbd7/1/
I'd suggest putting a div inside the image div containing the text and then using CSS to hide/show it.
HTML:
<div class="gallery">
<ul id="images"></ul>
<div class="lightbox">
<div class='limage'>
<div class=".caption">Caption here</div>
</div>
<div class='left'>
</div>
<div class='right'>
</div>
<div class='close'>
x
</div>
</div>
</div>
CSS:
.limage { position: relative; }
.caption { display: none; }
.limage:hover .caption { display: block; position: absolute;}
Why you using array to store the images? Anyways, assume that you still using array, below is some example code that you want try:
HTML:
<ul id="images">
</ul>
<!-- assume this is the place that you want to display the caption -->
<div id="caption"></div>
Javascript:
var images = new Array();
images[0] = "p1.png";
images[1] = "p2.png";
images[2] = "p3.png";
images[3] = "p4.png";
var captions = new Array();
captions[0] = "Picture 1";
captions[1] = "Picture 2";
captions[2] = "Picture 3";
captions[3] = "Picture 4";
var x = $("#images");
var y = $("#caption");
const prefix = "image-";
if you are using HTML5:
for (var i = 0; i < images.length; i++) {
x.append("<img class='roll' src='" + images[i] + "' data-caption='" + captions[i] + "'>");
}
$(".roll").mouseover(function(){
//do whatever effect here when mouse over
y.html($(this).attr("data-caption"));
});
If you want to backward compatible:
for (var i = 0; i < images.length; i++) {
x.append("<img id='" + prefix + i + "' class='roll' src='" + images[i] + "'>");
}
$(".roll").mouseover(function(){
//do whatever effect here when mouse over
var index = $(this).attr("id").substring(prefix.length);
y.html(captions[index]);
});
Hope that this will help.