Okay I successfully created a basic slideshow but I wanted to add more effects and such to make it look more realistic. I am doing some coding but I don't know what is wrong. I end up crashing my MOZILLA everytime I run the script. Can anyone help me do this correctly? And not to mention I don't want any kind of jQuery modification to my code
JavaScript
var img = new Array("a.jpg","b.jpg","c.jpg");
var len = img.length - 1;
var pos = 0;
function slid(e){
pos = pos + e;
if(pos < 0)
{
pos = len;
}
if(pos > len)
{
pos = 0;
}
var a = 1;
var i = 1;
while(i<=50)
{
function op(a) {
a -= 0.02;
if(a < 0)
{
a = 1;
}
document.getElementById("slide").style.opacity = a;
}
i++;
}
document.getElementById("slide").src = img[pos];
return false;
};
and yeah it's not fading(in this case changing opacity) help me on that too?
Take a look here:
while(i<=50)
{
function op(a) {
a -= 0.02;
if(a < 0)
{
a = 1;
}
document.getElementById("slide").style.opacity = a;
}
}
You are not incrementing your 'i' counter variable, resulting in an infinite loop, and hence browser crashing. Replace with this:
while(i<=50)
{
function op(a) {
a -= 0.02;
if(a < 0)
{
a = 1;
}
document.getElementById("slide").style.opacity = a;
}
i++; //increment the counter variable to prevent an infinite loop
}
Related
I have very little to no knowledge when it comes to using JavaScript. I have 24 of the same image given an id from q1 - q24. my code allows for the 24 images to be changed to image2 one at a time, but I need for it to stop and display a text/alert when image2 is clicked.
<script>
{
let num = 1;
function sequence()
{
let back = 1;
while (back < 25)
{
if(back == 1)
{
document.getElementById("q24").src = "question.jpg";
}
else
{
document.getElementById("q" + (back-1)).src = "question.jpg";
}
back++
}
document.getElementById("q" + num).src = "question2.png";
num = num + 1;
if(num > 24){num = 1;}
}
setInterval(sequence, 500);
}
</script>
Save the interval timer to a variable. Then add a click listener to all the images that stops the timer if the current image is the one showing question2.jpg.
{
let num = 1;
for (let i = 1; i <= 24; i++) {
document.getElementById(`q${i}`).addEventListener("click", function() {
if (i == num) {
clearInterval(interval);
}
});
}
let interval = setInterval(sequence, 500);
function sequence() {
for (let i = 1; i <= 24; i++) {
if (i == num) {
document.getElementById(`q${i}`).src = "question2.jpg";
} else {
document.getElementById(`q${i}`).src = "question.jpg";
}
num = num + 1;
if (num > 24) {
num = 1;
}
}
}
}
While I don't fully understand your use case, you could create a click event listener on the document and check the target's src in it.
document.addEventListener('click', function(e) {
if (e.target.src === 'question2.png') {
alert('Clicked question 2');
}
});
I'm using a number of boxes that are floating around the screen, I want for them to bounce away from each other when they collide and I am testing this by just changing their colours instead when they collide, for some reason their colour changes at the start(their starting colour is white and if they collide it should change to red but they start and stays red). Is there something I am doing wrong? I would also like for everything to be done within the constructor function. I am sorry for not commenting my code as yet.
function BoxSplash()
{
this.sample = [];
var test = false;
this.col = color(129)
this.changeColour = function()
{
this.col = color(random(0,255),random(0,128),random(0,255))
}
this.intersect = function(other)
{
for(var i = 0; i < numberss; i++)
{ var currentBox = this.sample[i]
var d = dist(currentBox.x,currentBox.y,other.x,other.y)
if(d < currentBox.width + other.width)
{
return true;
}
else
{
return false
}
}
noLoop()
}
this.draw = function()
{
stroke(255)
line(0,windowHeight/2,windowWidth,windowHeight/2)
stroke(0)
for(var i = 0; i < numberss; i++)
{
var box = {
x:random(0,windowWidth - 50),
y:random(windowHeight/2 ,windowHeight - 50),
width:50,
height:50,
speedX:random(1,5),
speedY:random(1,5)
}
this.sample.push(box)
}
//use numberss variable to work with gui
for(var i = 0; i < numberss; i++)
{
fill(this.col)
rect(this.sample[i].x,this.sample[i].y,50,50)
}
this.move()
}
this.move = function()
{
for(var i = 0; i < numberss; i++)
{
var shape = this.sample[i]
shape.x += shape.speedX
shape.y += shape.speedY
if(shape.x + shape.width >= windowWidth || shape.x <= 0 )
{
shape.speedX = -shape.speedX
}
if(shape.y + shape.height >= windowHeight || shape.y <= windowHeight/2)
{
shape.speedY = -shape.speedY;
}
for(var j = 0; j < numberss; j++)
{
var others = this.sample[j]
var d = dist(shape.x,shape.y,others.x,others.y)
if( i != j && d < shape.width + others.width)
{
test = true;
}
else
{
test = false
}
if(test)
{
this.col = color(255,0,0)
}
}
}
}
}
You should visit this link and transform their circles into your boxes.
1st: Calculate dist(object1.x, object.y, object2.x, object2.y) and save into a variable called d
2nd:
if (d < object1.h + object2.h) {
// Enter your code here
}
See this code:
function handleTouchStart(event) {
event.preventDefault();
cnvs.removeEventListener("touchstart", handleTouchStart);
var x1 = event.touches[0].clientX-cnvs.offsetLeft;
callerOfCNVSTouchStart = setInterval(function () {
if (x1 > cnvs.width/2 && whiteShip.x2 < cnvs.width) {
whiteShip.x1+= 3;
} else if (x1 < cnvs.width/2 && whiteShip.x1 > 0) {
whiteShip.x1-= 3;
}
}, 20);
nBMC = setInterval(makeNewBullets,200);
setInterval(sendEnemies,2000);//I want to run this line only once
}
I want the other functions to run every time the event occurs, but set the interval for sendEnemies only once. How can I do that?
Use a variable like var sentEnemies = false; outside function handleTouchStart and update it in the function to true the first time and use if(!sentEnemies) for the line to execute only once.
var sentEnemies = false;
function handleTouchStart(event) {
event.preventDefault();
cnvs.removeEventListener("touchstart", handleTouchStart);
var x1 = event.touches[0].clientX-cnvs.offsetLeft;
callerOfCNVSTouchStart = setInterval(function () {
if (x1 > cnvs.width/2 && whiteShip.x2 < cnvs.width) {
whiteShip.x1+= 3;
} else if (x1 < cnvs.width/2 && whiteShip.x1 > 0) {
whiteShip.x1-= 3;
}
}, 20);
nBMC = setInterval(makeNewBullets,200);
if (!sentEnemies) {
setInterval(sendEnemies,2000); // Will execute only once
sentEnemies = true;
}
}
The concept is simliar to a slider. Here is the JsFiddle
Each section is set to:
visibility: hidden;
until assigned the "anim-in" class. The issue is with var $currSection and $nextSection that need the var $rightCounter to correctly evaluate.
var $currSection = $rightCounter;
var $nextSection = $rightCounter + 1;
$rightCounter is updated in the counter function:
function counter (event){
var $counterSelect = $(this).attr('id');
if ( $counterSelect == "right") {
if ( $rightCounter >= 0 && $rightCounter <= 4){
$rightCounter += 1;
console.log($rightCounter);
if ($leftCounter <= 0) {
$leftCounter = 0;
console.log($leftCounter);
}
else {
$leftCounter -= 1;
console.log($leftCounter);
}
}
}
else {
if ($leftCounter >= 0 && $leftCounter <= 4){
$leftCounter += 1;
console.log($leftCounter);
if ($rightCounter <= 0) {
$rightCounter = 0;
console.log($rightCounter);
}
else {
$rightCounter -= 1;
console.log($rightCounter);
}
}
}
animOut();
return $rightCounter;
};
The animOut function uses $currSection and $nextSection to redistribute classes, but they are not updating with the $rightCounter?
Note: the console logs are there to show what the vars are evaluating to
So Basicly if i click the burtton, it should change the variables to 1.
However, it dosen't print out "It's happening now" as it should.
Could someone please explain what's wrong with this??
Best regards daniel.
var reg_uname_done = 0;
var reg_pword1_done = 0;
var reg_pword2_done = 0;
var reg_email_done = 0;
$("#first_nav_bar li:first").click(function(event) {
reg_uname_done = 1;
reg_pword1_done = 1;
reg_pword2_done = 1;
reg_email_done = 1;
});
if(reg_pword1_done === 1 && reg_pword2_done === 1 && reg_email_done === 1 && reg_uname_done === 1) {
console.log('its happening now');
}
The reason why this is not happening is b/c the js file is going down, and you haven't "clicked" the <li> element yet, therefore your variables are still equal to 0. You have to set a function inside of that event.
See fiddle
var reg_uname_done = 0;
var reg_pword1_done = 0;
var reg_pword2_done = 0;
var reg_email_done = 0;
$("#first_nav_bar li:first").click(function (event) {
reg_uname_done = 1;
reg_pword1_done = 1;
reg_pword2_done = 1;
reg_email_done = 1;
check();
})
function check() {
if (reg_pword1_done === 1 && reg_pword2_done === 1 && reg_email_done && reg_uname_done) {
console.log('its happening now');
}
}