How to show custom animation after uploading a document/image using Bootstrap - javascript

I want the animation to look similar to
what's shown in this Pinterest post.
I am unable to replicate as shown using the below starter script!
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
<form>
<p> file:</p>
<div class="custom-file mb-3">
<input type="file" class="custom-file-input" id="customFile" name="filename">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
</form>
</div>
</body>
</html>

Related

Typed.JS JavaScript typing animation library not working?

I am trying to get typed.js working on a test page
As per the documentation I added the script, I have tried also add jQuery but it still doesn't work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
<script src="https://cdn.jsdelivr.net/npm/typed.js#2.0.12"></script>
<title>Document</title>
</head>
<body>
<div id="typed-strings">
<p>Typed.js is a <strong>JavaScript</strong> library.</p>
<p>It <em>types</em> out sentences.</p>
</div>
<div id="typed-strings">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<span class="typed-cursor"></span>
</body>
</html>

Bootstrap column doesn't show properly

I want to create a row and 3 columns in that row. This is my code and the column doesn't work properly. It shows as row.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class='row'>
<div class=' col-md-4'>
<p><small>Abc</small></p>
<p class='font-weight-bold'>Example</p>
</div>
<div class=' col-md-4'>
<p><small>Xyz</small></p>
<p class=' font-weight-bold'>New York</p>
</div>
<div class=' col-md-4'>
<a class=' btn btn-primary' style='margin-top: 15px;' role='button'>button</a>
</div>
</div>
</body>
</html>
Your code is correct! I just changed the Bootstrap version that you have been used to see 'col-4' style and see this works perfectly!
I guess maybe the screen that you are working with, is below '575px' resolution . this causes the responsive style.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class='row'>
<div class='col-4'>
<p><small>Abc</small></p>
<p class='font-weight-bold'>Example</p>
</div>
<div class='col-4'>
<p><small>Xyz</small></p>
<p class=' font-weight-bold'>New York</p>
</div>
<div class='col-4'>
<a class='btn btn-primary' style='margin-top: 15px;' role='button'>button</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
</html>
It works fine, actually, but you are setting your columns to respect only in a screen of medium size or larger.
col-md-4
If that was not your intention, you can either:
reduce the screen size you are working with: col-sm-4 (small), col-xs-4 (extra-small)
Or scrap the sizing and make your columns respect whatever screen size: col-4
More info on Bootstrap's grid system

I can't reach an element from HTML by using Javascript

I want to create a project with using colors.
All of my files are in the same folder.
I can't reach the my color input that is in the index.html by:
const firstColor = document.getElementById("color1").value;
I can just reach elements which is in the game.js.
Also my canvas is in the game.html.
I have added tags into all of my HTML files.
My index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Cyber Bird</title>
<link rel="stylesheet" href="main.css">
</head>
<body align="center">
<div id="title">Cyber Bird</div>
<div id="mainMenu">
<div id="selectColors">
<div id="colorsTitle">SELECT <span>2</span> COLORS FOR YOUR <span id="cb">CYBER BIRD</span></div> <br> <hr> <br>
<span id="first"> First: <input type="color" name="color1" id="color1" value="#f1aabc"></span>
<span id="second"> Second: <input type="color" name="color2" id="color2" value="#2d96b9"></span>
</div>
START
</div>
<script src="src/game.js"></script>
</body>
</html>
My game.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Cyber Bird</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="container" align="center">
<div id="scoreBoard">
<div id="header">SCOREBOARD</div>
<div id="description">Score: </div>
<div id="score">0</div>
</div>
<canvas id="myCanvas" height="500" width="900"></canvas>
<div class="helper" id="toJump">press <span>SPACE</span> to jump</div>
<div class="helper" id="toStart">click <span onclick="startGame()">HERE</span> to start</div>
<div class="helper" id="toSelect">select new <span>COLORS</span></div>
</div>
<div id="darken"></div>
<div id="gameOver" align="center">
<div id="message">GAME OVER</div>
<div id="yourScore">Your score is: <span id="finalScore"></span></div>
<div id="tryAgain" class="button" onclick="startGame()">Try Again</div>
</div>
<script src="game.js"></script>
</body>
</html>
You're not passing the data from your index.html to game.html. So when you call this:
START
You're loading a new page, which removes all of your existing variables - including 'color1'.
I see 2 options here:
Make this a single-page web app. So when you click your START button, it hides the index div and loads a game div
Save your values from index.html somewhere (browser storage?) and then call that after you load your new game.html page.

Basic Full Page setup is not working?

I am using fullPage.js for my website. I went to test it and it isn't functioning like it is supposed to and creating a full height page. I tried changing the scripts and links around, as well as using different jQuery Libraries. All the sources are 100% correct. Any leads or suggestions? Thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap / CSS -->
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.js"></script>
</head>
<body>
<div id="fullpage"> <!-- Contains all content that uses FullPage-->
<div class="section">
<h1>hello</h1>
</div>
<div class="section">
<h1>hello</h1>
</div>
<div class="section">
<h1>hello</h1>
</div>
</div>
<script>
$(document).ready(function() {
$('#wrapper').fullpage();
});
</script>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
</body>
</html>
library :: https://cdnjs.com/libraries/fullPage.js
so you have to change the src attribute of script file .
since you are using src of full page is jquery.fullPage.js but that is not valid .
use https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.js in src attribute .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.css" />
</head>
<body>
<div id="wrapper"> <!-- Contains all content that uses FullPage-->
<div class="section">
<h1>hello</h1>
</div>
<div class="section">
<h1>hello</h1>
</div>
<div class="section">
<h1>hello</h1>
</div>
</div>
<script>
$(document).ready(function() {
$('#wrapper').fullpage();
});
</script>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
</body>
</html>
Change id="wrapper" to id="fullpage"
Default structure looks like below:
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">
<div class="slide"> Slide 1 </div>
<div class="slide"> Slide 2 </div>
<div class="slide"> Slide 3 </div>
</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>

Submit form with javascript external file

i have this login page:
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" media="screen" />
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="js/loader.js"></script>
</head>
<body>
<div id ="header_login"></div>
<div id ="fdm_intro"></div>
<div id="footer"></div>
</body>
</html>
and the fallowing header:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" media="screen" />
<script type="text/javascript" src="login.js"></script>
<script src="login.js"></script>
</head>
<body>
<div id ="header">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#"> Flight Data Monitor</a>
<form name="login" action="" method="GET" class="navbar-form pull-right">
<input type="text" class="span2" placeholder="Username" name="username">
<input type="text" class="span2" placeholder="Password" name="password">
<button type="submit" class="btn" onclick="login(this.form);" >Entrar</button>
</form>
</div>
</div>
</div>
</body>
</html>
PROBLEM: i cannot make an alert in login.js. it seems like my form does not call the javascript.... any help??
You forget to add the Jquery reference in your html page. Try this code.
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" media="screen" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="login.js"></script>
</head>
<body>
<div id ="header">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#"> Flight Data Monitor</a>
<form name="login" action="" method="GET" class="navbar-form pull-right">
<input type="text" class="span2" placeholder="Username" name="username">
<input type="text" class="span2" placeholder="Password" name="password">
<button type="submit" class="btn" onclick="login(this.form);" >Entrar</button>
</form>
</div>
</div>
</div>
</body>
</html>
Login.js:
$(document).ready(function() {
alert();
});

Categories