Skip to main content

Links between HTML pages not working correctly

I am making a project in the p5.JS web editor. So far it has a start screen but I want to create separate HTMLs for the login and account creation using the button boundaries as links to each other; I don't know how to do that, so for now I am just using regular links. I want to use a database to store these details (I want to use a MySQL database through phpMyAdmin by using XAMPP, but if there is a better way to do it with the p5.js WEB EDITOR please let me know!)

I am testing the link between the index.html to the signup.html (Which has the sketch page.js to test) This link to the signup is where I want the users to create details for an account which will be put into the database. On click to the sign up the link appears to load the HTML correctly, but when redirecting back to the start screen (index.html) input boxes and links are mispositioned and the gif doesn't play. Is there anyway somebody could help me with this? I don't have too much experience with p5.js or HTML and I am just starting out with PHP and databases too, so any help would be greatly appreciated! Thanks.

--Code for index.html--

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.dom.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

--Code for signup.html--

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
    <script src= "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="style2.css">
    <meta charset="utf-8" />
  </head>
  <body>
    <script src="page.js"></script>
  </body>
</html>

--Code for sketch.js-- Note: You might want to ignore what I was doing with the input boxes and empty functions

let MENU=0; //Sets menu to 0
let img; //defines image    
let gif_createImg; //defines gif
var fade = 0;
var fadeSpeed = 1.0;

let url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vTKHB57FTYof4JxLnJPHb-FH5jh3wjuC1jRXWoX3ytUfENYAbMz1IqBZcmM0IQ90drNS__NOWkgSjrG/pub?gid=0&single=true&output=csv"





function preload(){
  StartImg = loadImage('Images and GIFS/Species sandbox img.png'); //takes start screen image from assests
  LoginImg = loadImage('Images and GIFS/Login img.png ')
  dnaGif = loadImage('Images and GIFS/dna2.gif') //takes start screen gif from assets
  CreateAccountImg = loadImage('Images and GIFS/Create new account img.png')
}


function setup() {
  createCanvas(1280, 720); //creates the canvas for which everything else will be drawn on
  dnaGif.delay(40)
  let a = createA('signup.html', 'this is a link');
  a.position(0, 0);

}



function draw() {
  if (MENU == 0) {
    drawStartScreen();
  } else if (MENU == 1) {
    drawLoginScreen();
  } else if (MENU == 2) {
    drawAccountCreation();
  }else if (MENU == 3) {
    drawHTU();
  }
  
}



function drawStartScreen(){
  console.log('Start')
  background(255,255,245) //creates background with 3 arguments being values of colour: R, G and B
//  print(mouseX,mouseY) //prints location of mouse in the program
  image(StartImg,0,0, width,height); //creates the image for the start screen as sets it to match the size of the canvas 
  image(dnaGif,360,200) //creates gif and sets location (X,Y) in the program

}  
  


function drawAccountCreation(){
  console.log('Account creation')
  background(255, 255, 245)
  image(CreateAccountImg,0,0, width,height)
  textSize(20)
  text('Right-Click to return to the startscreen', 455, 693)
  if (mouseButton == RIGHT) {
    MENU = 0
    currentCreateUsername.remove();
    currentCreateUsername = undefined;
    currentCreatePassword.remove();
    currentCreatePassword = undefined;
    currentConfirmUsername.remove();
    currentConfirmUsername = undefined;
    currentConfirmPassword.remove();
    currentConfirmassword = undefined;
    }
   
}  



function inputUsername() {
  let input1 = createInput();
  input1.position(474, 130);
  input1.size(500, 70);
  input1.style('font-size: 30px')
  return input1;
}
 


function inputPassword(){
  let input2 = createInput();
  input2.position(474, 250);
  input2.size(500, 70);
  input2.style('font-size: 30px')
  return input2;
}



function inputCreateUsername(){
  let inputA = createInput();
  inputA.position(474, 129);
  inputA.size(500, 70);
  inputA.style('font-size: 30px')
  return inputA;
}



function inputCreatePassword(){
  let inputB = createInput();
  inputB.position(474, 220);
  inputB.size(500, 70);
  inputB.style('font-size: 30px')
  return inputB;
}



function inputConfirmUsername(){
  let inputC = createInput();
  inputC.position(474, 312);
  inputC.size(500, 70);
  inputC.style('font-size: 30px')
  return inputC;
}




function inputConfirmPassword(){
  let inputD = createInput();
  inputD.position(474, 402);
  inputD.size(500, 70);
  inputD.style('font-size: 30px')
  return inputD;
}




let currentInputUsername;

let currentInputPassword;

let currentCreateUsername;

let currentCreatePassword;

let currentConfirmUsername;

let currentConfirmPassword;

function mouseClicked(){
  if (MENU == 0) { 
    if (mouseY < 582 && mouseY > 527) {  
      if (mouseX < 527 && mouseX > 328) { 
        MENU = 1
        currentInputUsername= inputUsername();  
        currentInputPassword = inputPassword();
      } 
      if (mouseX < 900 && mouseX > 706) { 
        MENU = 2
        currentCreateUsername = inputCreateUsername();
        currentCreatePassword = inputCreatePassword();
        currentConfirmUsername = inputConfirmUsername();
        currentConfirmPassword = inputConfirmPassword();
        
        
      }
  }
  }
}



function drawHTU(){
  console.log('How-to-use')
  background(255, 0, 255)
  textSize(20)
  text('How to use', 600, 50)
  if (mouseButton == RIGHT) {
    MENU = 2
  }
}

  

function drawLoginScreen(){
//  print(mouseX,mouseY) 
  console.log('Login')
  background(255, 255, 245)
  fill(0) //colour filled in is set to black
  image(LoginImg,0,0, width,height);
  textSize(20)
  text('Right-Click to return to the start screen', 455, 693) //text and location in program
  
  
  if (mouseButton == RIGHT ){
    MENU = 0  //changes menu back to start screen if right-click is pressed
    currentInputUsername.remove();
    currentInputUsername = undefined;
    currentInputPassword.remove();
    currentInputPassword = undefined;
    }
  if (mouseIsPressed){
    if (mouseButton === LEFT && mouseY < 601 && mouseY > 547 && mouseX < 734 && mouseX > 535){ //Checks if mouse if pressed and is within boundary
    MENU = 3
    currentInputUsername.remove();
    currentInputUsername = undefined;
    currentInputPassword.remove();
    currentInputPassword = undefined;
    }
  }
}

function login(){
  if (MENU == 1){
    
    
  }
}

--Code for page.js--

let link;

function setup() {
  createCanvas(windowWidth, windowHeight);
  link = createA('index.html', 'this is a link')
  link.position(10,20);
}

function draw() {
  background(220);
}

--Code for style.css--

html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}

--Code for style2.css--

html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}


source https://stackoverflow.com/questions/69780561/links-between-html-pages-not-working-correctly
Labels:

Comments

Post a Comment

Popular posts from this blog

How to show number of registered users in Laravel based on usertype?

i'm trying to display data from the database in the admin dashboard i used this: <?php use Illuminate\Support\Facades\DB; $users = DB::table('users')->count(); echo $users; ?> and i have successfully get the correct data from the database but what if i want to display a specific data for example in this user table there is "usertype" that specify if the user is normal user or admin i want to user the same code above but to display a specific usertype i tried this: <?php use Illuminate\Support\Facades\DB; $users = DB::table('users')->count()->WHERE usertype =admin; echo $users; ?> but it didn't work, what am i doing wrong? source https://stackoverflow.com/questions/68199726/how-to-show-number-of-registered-users-in-laravel-based-on-usertype
Post a Comment
Read more

Why is my reports service not connecting?

I am trying to pull some data from a Postgres database using Node.js and node-postures but I can't figure out why my service isn't connecting. my routes/index.js file: const express = require('express'); const router = express.Router(); const ordersCountController = require('../controllers/ordersCountController'); const ordersController = require('../controllers/ordersController'); const weeklyReportsController = require('../controllers/weeklyReportsController'); router.get('/orders_count', ordersCountController); router.get('/orders', ordersController); router.get('/weekly_reports', weeklyReportsController); module.exports = router; My controllers/weeklyReportsController.js file: const weeklyReportsService = require('../services/weeklyReportsService'); const weeklyReportsController = async (req, res) => { try { const data = await weeklyReportsService; res.json({data}) console...
Post a Comment
Read more

How to split a rinex file if I need 24 hours data

Trying to divide rinex file using the command gfzrnx but getting this error. While doing that getting this error msg 'gfzrnx' is not recognized as an internal or external command Trying to split rinex file using the command gfzrnx. also install'gfzrnx'. my doubt is I need to run this program in 'gfzrnx' or in 'cmdprompt'. I am expecting a rinex file with 24 hrs or 1 day data.I Have 48 hrs data in RINEX format. Please help me to solve this issue. source https://stackoverflow.com/questions/75385367/how-to-split-a-rinex-file-if-i-need-24-hours-data
Post a Comment
Read more