Hello I am making a flash gallery website and my javascript works when I put it inside a <script></script> tag within my html but when I try to move it to an external .js file it stops from working.
HTML
<!doctype html>
<html lang="en" onLoad="flashy()">
<head>
<meta charset="utf-8">
<title>Flash Test</title>
<meta name="description" content="Flash stuff">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="styles/style.css">
<script src="js/scripts.js"></script>
</head>
<body>
<div id="siteText">
<h1>Anon Curb</h1>
</div>
<div id="flashmovie">
<object type="application/x-shockwave-flash" data="swfs/2cats.swf">'+
<param name="movie" value="swfs/2cats.swf">
</object>
</div>
<!-- end #container -->
<div id="buttoncon">
<button id="rand">Random</button>
<div id="buttons">
<button id="next">next</button>
<button id="back">Back</button>
<div id="title">2cats</div>
</div>
</div>
<!-- end #wrapper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
</body>
</html>
CSS
body {
background-color: black;
margin: 0;
font-family: verdana, arial, hevetica, sans-serif;
}
#siteText {
font-size: 24px;
text-align: center;
color: white;
width: 100%;
margin-top: -10px;
}
#flashmovie {
width: 100%;
height: 80%;
margin-top: -1%;
float: center;
position: absolute;
margin-left: auto;
margin-right: auto;
}
#flashmovie object {
width: 100%;
height: 100%;
background-color: black;
}
button {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
width: 80px;
height: 30px;
}
#buttons {
width: 50%;
height: 50px;
position: relative;
left: 25%;
text-align: center;
background-color: black;
}
#buttoncon {
top: 90%;
width: 100%;
background-color: black;
position: absolute;
}
#back,
#next {
float: left;
cursor: pointer;
border: none;
}
#next {
float: right;
}
#title {
width: 60%;
margin: auto;
font-size: 22px;
color: #600;
text-align: center;
color: white;
}
#rand {
color: black;
position: relative;
left: 48%;
background-color: white;
border: none;
cursor: pointer;
z-index: 1;
margin-bottom: .5%;
margin-top: .5%;
}
JAVASCRIPT
$(document).ready ( function(){
var links = [
'swfs/CP.swf',
'swfs/2cats.swf', /* there is no limit to the array length */
'swfs/4ChanBrightside.swf',
'swfs/4chancity.swf',
'swfs/2spooky4u.swf',
'swfs/4channer.swf',
'swfs/5_mile_walk.swf' /* no trailing comma after final item */
];
var displaytext = [
'CP',
'2cats',
'f4ChanBrightside',
'4chancity',
'2spooky4u',
'4channer',
'5_mile_walk' /* no trailing comma after final item */
];
var c = 0
var flashmovie, test, temp;
function init() {
flashmovie = document.getElementById('flashmovie');
document.getElementById('back').onclick = function () {
if (c == 0) {
c = links.length;
}
c--
displayFiles();
}
document.getElementById('next').onclick = function () {
if (c == links.length - 1) {
c = -1;
}
c++;
displayFiles();
}
document.getElementById('rand').onclick = function () {
temp = c;
while (c == temp) {
c = Math.floor(Math.random() * links.length);
}
displayFiles();
}
}
function displayFiles() {
test = links[c].substring(links[c].lastIndexOf('.') + 1, links[c].length);
document.getElementById('title').innerHTML = displaytext[c];
flashmovie.innerHTML =
'<object type="application/x-shockwave-flash" data="' + links[c] + '">' +
'<param name="movie" value="' + links[c] + '">' +
'<\/object>';
}
window.addEventListener ?
window.addEventListener('load', init, false) :
window.attachEvent('onload', init);
});
So to recap the code works I think I've just messed up the way it's triggered like the JQuery $(document).ready thing or maybe I shouldn't use that to begin with? I'm new to javascript so any suggestions you have will help
Related
I tried using redoing it but it doesn't work all I want is to redCar to move left and right when using the arrow keys
there was a error once but it got solved by moving the below the body and can you tell me why is that????
var blueCar = document.getElementById("bluecar");
var redCar = document.getElementById("redcar");
var result = document.getElementById("result");
var game = document.getElementById("game");
var score = document.getElementById("score");
var counter = 0;
blueCar.addEventListener("animationiteration",function(){
var random = ((Math.floor(Math.random()*3))*130)
blueCar.style.left = random+"px";
counter++;
})
**next code is not working like it sappose to do**
redCar.addEventListener("keydown",function(e){
if(e.keyCode=="39")
{
var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left"))
if(redCarleft<260)
{
redCar.style.left = (redCarleft+130)+"px";
}
}; *this is the command of left key*
if(e.keyCode=="37")
{
var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left"))
if(redCarleft>0){
redCar.style.left = (redCarleft-130)+"px";
}
}
})
//this is my css which is working is fine
*{
margin: 0%;
padding: 0%;
}
body{
background-color: #34adff;
background-image: -webkit-linear-gradient(45deg,#7c7e80 50%,#323333 50%);
min-height: 800px;
}
#game{
height: 500px;
width: 390px;
background-color: 1rem solid black;
background-image:url(narutoR.png) ;
background-size: contain;
margin: 1rem auto;
overflow: hidden;
}
#bluecar{
height: 100px;
width: 130px;
background-color: #34adff;
position: relative;
top: 0px;
left: 0px;
text-align: center;
animation: move 1s linear infinite;
}
#bluecar img{
height: 100px;
}
#keyframes move {
0%{
top: 0px;
}
100%
{
top: 501px;
}
}
#redcar{
height: 100px;
width: 130px;
background-color:red;
position: relative;
top: 250px;
left: 130px;
text-align: center;
}
#redcar img{
height: 100px;
}
#result{
height: 200px;
width: 400px;
background-color: darkred;
margin:5rem ;
border: 2px solid white;
border-radius:20px ;
font-size: 30px;
text-align: center;
display:none;
}
#score{
font-size: 2.2rem;
color:goldenrod;
}
#btn{
padding: 0.5rem 1rem;
border: none;
border-radius: 20px;
background-color:black;
color:cyan;
font-size: 25px;
text-transform: uppercase;
margin-top: 10px;
cursor: pointer;
}
**this is working fine as i am able to access them perfectely**
<!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">
<title>car game</title>
<link rel="stylesheet" href="cargame.css">
</head>
<body>
<div>
<div id="game">
<div id="bluecar" > <img src="rasengan.jpeg" alt="blurcar"></div>
<div id="redcar" > <img src="pain.jpeg" alt="redcar"></div>
</div>
<div id="result">
<h1>GameOver</h1>
<p id="score"></p>
<button id="btn" onclick="location.reload()">Restart</button>
</div>
</div>
</body>
<script src="cargame.js"></script>
</html>
Add the keydown eventListener to the document.
document.addEventListener("keydown",function(e){
if(e.keyCode=="39")
{
var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left"))
if(redCarleft<260)
{
redCar.style.left = (redCarleft+130)+"px";
}
};
if(e.keyCode=="37")
{
var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left"))
if(redCarleft>0){
redCar.style.left = (redCarleft-130)+"px";
}
}
})
I am making a simple wbsite that generates random quotes/facts when the user clicks a button. recently I tried to add links that will copy said quotes/facts into Facebook or Twitter, so that the user can share them. The thing is that the links do not seem to work and I have tried my best to figure out why, but am out if ideas. I would gladly apperciate some help
function clicked() {
//Her er banken med sitatene
let quotes = ["Test 1", "Test 2", "Test 3", ];
// Denne velger ut et tilfeldig sitat
let quotes_random = quotes[Math.floor(Math.random() * quotes.length)]; //let = quotes[Math.floor(Math.random() * quotes.length)];
// Denne omgjør det tilfeldige sitatet til HTML
document.getElementById("output").innerHTML = quotes_random; //document.getElementByID("output").innerHTML = quotes_random;
}
// Social media:
setShareLinks();
function socialWindow(url) {
var left = (screen.width - 570) / 2;
var top = (screen.height - 570) / 2;
var params = "menubar=no,toolbar=no,status=no,width=570,height=570,top=" + top + ",left=" + left;
window.open(url,"NewWindow",params);
}
function setShareLinks() {
var pageUrl = encodeURIComponent(document.URL);
var tweet = encodeURIComponent($("meta[property='og:description']").attr("content"));
$(".social-share.facebook").on("click", function() {
url = "https://www.facebook.com/sharer.php?u=" + pageUrl;
socialWindow(url);
});
$(".social-share.twitter").on("click", function() {
url = "https://twitter.com/intent/tweet?url=" + pageUrl + "&text=" + tweet;
socialWindow(url);
})
}
body {
background-image: url(media/90s_bakgrunn_til_nettside.jpg);
background-position: center;
}
#container {
height: 275px;
width: 750px;
margin: 0 auto;
border: 5px solid #673B90;
text-align: center;
background-color:#F5A01F;
position: relative;
top: 300px;
align-self: center;
}
#btn {
background-color: #fdfb76;
border: none;
outline: none;
margin: 50px auto;
height: 50px;
width: 250px;
font-size: 22px;
position: relative;
top: 250px;
align-self: center;
}
#btn:hover {
cursor: pointer;
cursor: hand;
background-color: #e10086;
}
#output {
margin: 25px auto;
font-size: 26px;
color: white;
text-align: center;
position: relative;
bottom: -120px;
align-self: center;
}
/* Social media*/
body {
width: 95%;
max-width: 700px;
font-family: tahoma, sans-serif;
font-size: 14px;
line-height: 1.4;
padding: 0 10px 20px 10px;
margin: 0 auto 0 auto;
}
h1 {
font-size: 24px;
text-align: center;
}
h1 span {
display: block;
font-size: 18px;
font-weight: normal;
}
.links li {
font-size: 16px;
text-align: center;
cursor: pointer;
cursor: hand;
color: yellow;
}
.links li:hover {
text-decoration: underline;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initialscale=1">
<div class="links">
<ul>
<li class="social-share facebook">Facebook</li>
<li class="social-share twitter">Twitter</li>
</ul>
</div>
</head>
<body>
<div id="container">
<button onclick="clicked()" id="btn">Trykk her for et visdomord</button>
</div>
<p id="output">Generer et visdomsord ved å trykke på knappen</p>
<script src="main.js"></script>
just add jquery by:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
just in snippet not working. here the link of jsfiddle
function clicked() {
//Her er banken med sitatene
let quotes = ["Test 1", "Test 2", "Test 3", ];
// Denne velger ut et tilfeldig sitat
let quotes_random = quotes[Math.floor(Math.random() * quotes.length)]; //let = quotes[Math.floor(Math.random() * quotes.length)];
// Denne omgjør det tilfeldige sitatet til HTML
document.getElementById("output").innerHTML = quotes_random; //document.getElementByID("output").innerHTML = quotes_random;
}
// Social media:
setShareLinks();
function socialWindow(url) {
var left = (screen.width - 570) / 2;
var top = (screen.height - 570) / 2;
var params = "menubar=no,toolbar=no,status=no,width=570,height=570,top=" + top + ",left=" + left;
window.open(url,"NewWindow",params);
}
function setShareLinks() {
var pageUrl = encodeURIComponent(document.URL);
var tweet = encodeURIComponent($("meta[property='og:description']").attr("content"));
$(".facebook").on("click", function() {
url = "https://www.facebook.com/sharer.php?u=" + pageUrl;
socialWindow(url);
});
$(".twitter").on("click", function() {
url = "https://twitter.com/intent/tweet?url=" + pageUrl + "&text=" + tweet;
socialWindow(url);
})
}
body {
background-image: url(media/90s_bakgrunn_til_nettside.jpg);
background-position: center;
}
#container {
height: 275px;
width: 750px;
margin: 0 auto;
border: 5px solid #673B90;
text-align: center;
background-color:#F5A01F;
position: relative;
top: 300px;
align-self: center;
}
#btn {
background-color: #fdfb76;
border: none;
outline: none;
margin: 50px auto;
height: 50px;
width: 250px;
font-size: 22px;
position: relative;
top: 250px;
align-self: center;
}
#btn:hover {
cursor: pointer;
cursor: hand;
background-color: #e10086;
}
#output {
margin: 25px auto;
font-size: 26px;
color: white;
text-align: center;
position: relative;
bottom: -120px;
align-self: center;
}
/* Social media*/
body {
width: 95%;
max-width: 700px;
font-family: tahoma, sans-serif;
font-size: 14px;
line-height: 1.4;
padding: 0 10px 20px 10px;
margin: 0 auto 0 auto;
}
h1 {
font-size: 24px;
text-align: center;
}
h1 span {
display: block;
font-size: 18px;
font-weight: normal;
}
.links li {
font-size: 16px;
text-align: center;
cursor: pointer;
cursor: hand;
color: yellow;
}
.links li:hover {
text-decoration: underline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initialscale=1">
<div class="links">
<ul>
<li class="social-share facebook">Facebook</li>
<li class="social-share twitter">Twitter</li>
</ul>
</div>
</head>
<body>
<div id="container">
<button onclick="clicked()" id="btn">Trykk her for et visdomord</button>
</div>
<p id="output">Generer et visdomsord ved å trykke på knappen</p>
<script src="main.js"></script>
I am working on an IFrame browser with an omnibox (id="address") and a "GO" button (id="submit"), and I would like to detect when the user presses enter and execute a JavaScript function. I have tried using the <form> tag and the W3Schools How TO - Trigger Button Click on Enter, but the form broke my application, and the button click on enter didn't do anything.
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="https://docs.google.com/drawings/d/e/2PACX-1vSqg7iNwpB8zKiJqvtbSf0-YrM_hiRkPs_aHG0RLVvXX1YnHfRfpnqSbN6DwEqpdaOWN1wZttTA3MI3/pub?w=30&h=30" type="image/x-icon" name="favicon"/>
<title>Lokean Web Browser</title>
<style type="text/css" media="all">
#import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700&display=swap');
body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.first-row {position: absolute;top: 0; left: 0; right: 0; height: 25px; padding:13px; padding-right: 0px; font-family: 'Noto Sans'; sans-serif; background-color:#202124; color:white; position:fixed; z-index: 4;}
.second-row {position: absolute; top: 46px; left: 0; right: 0; bottom: 0;}
.second-row iframe {display: block; width: 100%; height: 100%; border: none;}
.form {
float: right;
}
#logo {
}
body {
background-color: #202124;
color: white;
font-family: Noto Sans;
}
}
.noSelect {
}
#address {
border-radius: 11px;
border-style: none;
border-width: 1px;
width: 300px;
padding: 3px;
color: black;
background-color: white;
font-size: 11px;
}
#address:focus {
border-style: solid;
border-color: white;
outline: none;
}
#submit {
border-radius: 11px;
border-color: #FFC107;
border-style: solid;
border-width: 1px;
padding: 3px;
background-color: #FFC107;
color: black;
font-size: 11px;
margin-left: 6px;
margin-right: 13px;
}
input[type=submit] {
width: 2em; height: 2em;
}
#submit:hover {
cursor: pointer;
animation-name: fill-hover;
animation-duration: 0.4s;
animation-fill-mode: forwards;
}
#submit:focus {
outline: none;
}
#submit:active {
animation-name: border-active;
animation-duration: 0.25s;
animation-fill-mode: forwards;
}
#keyframes border-active {
from {}
to {border-color: #9A7E24; border-width: 3px; margin-left: 4px; margin-right: 11px;}
}
#keyframes fill-hover {
from {}
to {border-color: #E0A800; background-color: #E0A800;}
}
a {
color: white;
}
#url {
}
.title {
float: left;
font-size: 19px;
color: white;
}
.center {
text-align: center;
}
</style>
<script type="text/javascript" charset="utf-8">
var url;
function view() {
url = document.getElementById("address").value;
var checkColon = url.includes(":");
var youtube = url.includes("youtube.com/");
var youtubeShort = url.includes("youtu.be/");
var noSearch = url.includes(".") || url.includes(":");;
var newUrl;
var n;
var s;
if (noSearch !== true){
url = "https://en.wikipedia.org/w/index.php?search=" + url + "&title=Special%3ASearch";
}
if (checkColon !== true && noSearch == true){
url = "http://" + url;
}
if (youtube == true) {
n = url.indexOf('&');
if (n !== -1) {
url = url.substring(0, n);
}
newUrl = url.replace("/watch?v=", "/embed/");
url = newUrl;
}
if (youtubeShort == true) {
newUrl = url.replace("youtu.be/", "youtube.com/embed/");
url = newUrl;
}
document.getElementById("url").src = url;
document.getElementById("address").value = url;
return false;
}
function iLoad() {
url = document.getElementById("url").src;
document.getElementById("address").value = url;
}
</script>
</head>
<body>
<div class="first-row">
<span class="title" id="title">
<img src="https://docs.google.com/drawings/d/e/2PACX-1vQ6gkadBIbBAYR28QDvj8FQRnJ51SL9qIFYJQMPtkMiiyRb9ezklHjM5qTY3jCblh6wCw6hTkDJWLQl/pub?w=72&h=72" id="logo">
</span>
<span class="form">
<input onClick="this.setSelectionRange(0, this.value.length)" type="url" name="address bar" id="address" class="noSelect" value="" placeholder="Enter URL or search"/>
<input type="submit" value="+" id="submit" onclick="view();">
</span>
</div>
<div class="second-row">
<iframe id="url" title="Lokean Web" src="https://wikipedia.org" onLoad="iLoad();" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowpaymentrequest="true" allowfullscreen sandbox = "allow-forms allow-pointer-lock allow-same-origin allow-scripts allow-top-navigation" ></iframe>
<div class="center">
<br>
Lokean Web Browser unblocks Youtube and all GoGuardian-blocked websites, and uses Wikipedia for search purposes.
<br>
However, some websites refuse to connect because this is an iFrame browser.
</div>
</div>
</body>
</html>
Thank you for your time and any help! :)
you can do something like:
const inputEl = document.getElementById("enter-input");
inputEl.addEventListener("keyup", manageEnter);
function manageEnter(evt) {
evt.preventDefault();
if (evt.keyCode === 13) {
console.log("hello");
}
}
<form onsubmit="event.preventDefault();" action="">
<input id="enter-input" type="string" />
</form>
To test, do click in the input and press enter to see a console.log, if you press any other key, the console.log doesn't will be trigger.
I just finished my javascript course in somewhere in online, and tried to make my own small project 'todolist'.
when user put work into and click , list should be added, but it shows a white and clear page.. I really can't see what's the problem in here.
I tested using console.log() but It shows me what I want, but it doesn't works in tag.
Here is my Code :
input[type=text] {
width: 500px;
height: 40px;
float: left;
}
#input_table {
display: block;
margin-left: auto;
margin-right: auto;
}
#input_box {
text-align: center;
padding-bottom: 50px;
background-color: crimson;
}
.align_center {
display: inline-block;
text-align: center;
}
.submit_box {
padding: 10px;
width: 50px;
height: 25px;
background: #d9d9d9;
color: #555;
float: left;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
text-align: center;
}
body {
background-color: gold;
}
.input_text {
float: left;
}
.store_ul {
margin: 0;
padding: 0;
text-align: right;
}
.oneLine {
font-size: 30px;
width: 100%;
height: 50px;
background-color: blue;
}
.close_box {
padding: 5px;
width: 50px;
height: 25px;
color: #555;
cursor: pointer;
}
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="main.css">
<title>ToDoList</title>
</head>
<body>
<script>
var count = 50;
var i = 0;
var tag = '';
</script>
<div id="input_table">
<div id="input_box">
<h1 style="color:white">My To Do List</h1>
<div class="align_center">
<input class="text_box" type="text" value="Title...">
<span class="submit_box" onclick="write()">Add</span>
</div>
</div>
</div>
<div class="output_table">
<div class="store_box">
<ul class="store_ul">
</ul>
</div>
</div>
<script>
function write() {
var text = document.querySelector('.text_box').value;
console.log(text);
if (i < 50) {
tag += '<div class="oneLine"><li class="input_text">' + text + '</li><span class="close_box">x</span></div>';
document.querySelector('.store_ul').innerHTML = tag;
console.log(tag);
i++;
} else {
alert("lists can't be added more than 50 works");
}
}
</script>
</body>
write will refer to the global function document.write, which will completely replace the page if the page has already been loaded. Use a different function name, perhaps "addTodo":
It would also probably be better to use a placeholder rather than a hard-coded value of Title... in the input box:
var count = 50;
var i = 0;
var tag = '';
function addTodo() {
var text = document.querySelector('.text_box').value;
console.log(text);
if (i < 50) {
tag += '<div class="oneLine"><li class="input_text">' + text + '</li><span class="close_box">x</span></div>';
document.querySelector('.store_ul').innerHTML = tag;
console.log(tag);
i++;
} else {
alert("lists can't be added more than 50 works");
}
}
input[type=text] {
width: 500px;
height: 40px;
float: left;
}
#input_table {
display: block;
margin-left: auto;
margin-right: auto;
}
#input_box {
text-align: center;
padding-bottom: 50px;
background-color: crimson;
}
.align_center {
display: inline-block;
text-align: center;
}
.submit_box {
padding: 10px;
width: 50px;
height: 25px;
background: #d9d9d9;
color: #555;
float: left;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
text-align: center;
}
body {
background-color: gold;
}
.input_text {
float: left;
}
.store_ul {
margin: 0;
padding: 0;
text-align: right;
}
.oneLine {
font-size: 30px;
width: 100%;
height: 50px;
background-color: blue;
}
.close_box {
padding: 5px;
width: 50px;
height: 25px;
color: #555;
cursor: pointer;
}
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="main.css">
<title>ToDoList</title>
</head>
<body>
<script>
</script>
<div id="input_table">
<div id="input_box">
<h1 style="color:white">My To Do List</h1>
<div class="align_center">
<input class="text_box" type="text" placeholder="Title...">
<span class="submit_box" onclick="addTodo()">Add</span>
</div>
</div>
</div>
<div class="output_table">
<div class="store_box">
<ul class="store_ul">
</ul>
</div>
</div>
<script>
</script>
</body>
You have a name conflict and the native method overrides yours in the global scope. In the example below you can see it is document.write.
<button onclick="console.log(write)">console</button>
<button onclick="console.log(write('hi'))">Hi</button>
I have a page like this. Trying to set innerDiv at the lower right corner at the click of a radio button. It should not overlap the footer and work even if user resize the browser.
$(function() {
startTime();
positionDiv();
$("#innerDiv").draggable({
containment: "parent"
});
});
$(document).keyup(function(e) {
if (e.keyCode == 27) {
$("#innerDiv").hide();
} else if (e.keyCode == 13) {
$("#innerDiv").show();
}
});
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('clock').innerHTML = h + ":" + m + ":" + s;
var t = setTimeout(function() {
startTime()
}, 500);
}
function checkTime(i) {
if (i < 10) {
i = "0" + i
};
return i;
}
function positionDiv() {
console.log('Ready to position inner div');
var innerDiv = document.getElementById("innerDiv");
if (document.getElementById('centerCheckbox').checked) {
console.log('Setting the position to center');
innerDiv.className = "box";
$('#boxText').text("Center")
} else if (document.getElementById('lrCheckbox').checked) {
console.log('Setting the position to lower right corner');
innerDiv.className = "lowerRightCorner";
$('#boxText').text("Lower Right Corner")
}
}
html,
body {
height: 100%;
}
body {
margin: 0;
padding: 0;
color: #000;
background-color: #fff;
}
html {
overflow-y: hidden;
}
.head,
.foot,
.middle {
position: absolute;
width: 100%;
left: 0;
}
.middle {
top: 100px;
bottom: 50px;
height: 400px;
background-color: #ffd;
}
.head {
height: 100px;
top: 0;
background-color: #000;
color: #fff;
}
.foot {
height: 50px;
bottom: 0;
background-color: #000;
}
.middle p {
border: 1px solid #00f;
margin: 0;
}
.box {
position: fixed;
top: 50%;
left: 50%;
width: 30em;
height: 18em;
margin-top: -9em;
margin-left: -15em;
border: 2px solid #ccc;
background-color: #f3f3f3;
}
.lowerRightCorner {
position: relative;
bottom: 0;
right: 0;
width: 30em;
height: 18em;
margin-bottom: 50px;
border: 2px solid #ccc;
background-color: #f3f3f3;
}
#clock {
float: right;
margin-right: 10px;
font-size: 24px;
position: relative;
}
.position {
top: 30%;
position: relative;
}
.helpText {
color: yellow;
font-size: 20px;
margin-left: 50%;
}
<!DOCTYPE html>
<html>
<head>
<title>Vertica Web</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<body>
<div class="head">
<div class="position">
<span>Position: </span>
<input type="radio" name="position" value="center" id="centerCheckbox" onclick="positionDiv()" checked>Center
<input type="radio" name="position" value="lowerRight" id="lrCheckbox" onclick="positionDiv()">Lower Right
</div>
<div class="helpText">Press Esc key to hide the window. Enter to show it again.</div>
<div id="clock"></div>
</div>
<div class="middle">
<div id="innerDiv">
<span id="boxText"></span>
</div>
</div>
<div class="foot">footer</div>
</body>
</html>
position: relative does not work that way, it place elements relative from the top left. You have to use either absolute or fixed to accomplish this.
In the snippet I changed
.lowerRightCorner {
position: relative;
}
to
.lowerRightCorner {
position: fixed;
}
$(function() {
startTime();
positionDiv();
$("#innerDiv").draggable({
containment: "parent"
});
});
$(document).keyup(function(e) {
if (e.keyCode == 27) {
$("#innerDiv").hide();
} else if (e.keyCode == 13) {
$("#innerDiv").show();
}
});
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('clock').innerHTML = h + ":" + m + ":" + s;
var t = setTimeout(function() {
startTime()
}, 500);
}
function checkTime(i) {
if (i < 10) {
i = "0" + i
};
return i;
}
function positionDiv() {
console.log('Ready to position inner div');
var innerDiv = document.getElementById("innerDiv");
if (document.getElementById('centerCheckbox').checked) {
console.log('Setting the position to center');
innerDiv.className = "box";
$('#boxText').text("Center")
} else if (document.getElementById('lrCheckbox').checked) {
console.log('Setting the position to lower right corner');
innerDiv.className = "lowerRightCorner";
$('#boxText').text("Lower Right Corner")
}
}
html,
body {
height: 100%;
}
body {
margin: 0;
padding: 0;
color: #000;
background-color: #fff;
}
html {
overflow-y: hidden;
}
.head,
.foot,
.middle {
position: absolute;
width: 100%;
left: 0;
}
.middle {
top: 100px;
bottom: 50px;
height: 400px;
background-color: #ffd;
}
.head {
height: 100px;
top: 0;
background-color: #000;
color: #fff;
}
.foot {
height: 50px;
bottom: 0;
background-color: #000;
}
.middle p {
border: 1px solid #00f;
margin: 0;
}
.box {
position: fixed;
top: 50%;
left: 50%;
width: 30em;
height: 18em;
margin-top: -9em;
margin-left: -15em;
border: 2px solid #ccc;
background-color: #f3f3f3;
}
.lowerRightCorner {
position: fixed;
bottom: 0;
right: 0;
width: 30em;
height: 18em;
margin-bottom: 50px;
border: 2px solid #ccc;
background-color: #f3f3f3;
}
#clock {
float: right;
margin-right: 10px;
font-size: 24px;
position: relative;
}
.position {
top: 30%;
position: relative;
}
.helpText {
color: yellow;
font-size: 20px;
margin-left: 50%;
}
<!DOCTYPE html>
<html>
<head>
<title>Vertica Web</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<body>
<div class="head">
<div class="position">
<span>Position: </span>
<input type="radio" name="position" value="center" id="centerCheckbox" onclick="positionDiv()" checked>Center
<input type="radio" name="position" value="lowerRight" id="lrCheckbox" onclick="positionDiv()">Lower Right
</div>
<div class="helpText">Press Esc key to hide the window. Enter to show it again.</div>
<div id="clock"></div>
</div>
<div class="middle">
<div id="innerDiv">
<span id="boxText"></span>
</div>
</div>
<div class="foot">footer</div>
</body>
</html>