Switch between div that will take up entire page in pure js - javascript

I am looking for a way to, with multiple <div> elements, have some functionality that can switch between the <div> as if they were pages. I want there to be an 'active' page, and when certain elements or <a> are clicked, there is a way to switch to another div that takes up the whole page. At any given time, only one such page-like <div> is visible.
I am aware this can be done in jquery, such as with their data-role="page" attribute for divs, but I am wondering how this can be done mechanically in pure javascript and css.
Here is an example I wrote, but it does not work, it only allows a transition once, then get stuck.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Divs</title>
<style>
.uipage {
top: 0;
left: 0;
width: 100%;
min-height: 100%;
position: absolute;
border: 0;
}
.lightpage {
background-color: #fcfbd1;
}
.darkpage {
background-color: red;
}
</style>
</head>
<body>
<div class="lightpage" id="pageone" name="pagetype">
<p onclick="switchPages();">Hello! This is page one!</p>
</div>
<div class="darkpage" id="pagetwo" name="pagetype">
<p onclick="switchPages();">Hello! This is page two!</p>
</div>
<script>
document.getElementById('pageone').style.top = 0;
document.getElementById('pageone').style.left = 0;
document.getElementById('pageone').style.width = '100%';
document.getElementById('pageone').style['min-height'] = '100%';
document.getElementById('pageone').style.position = 'absolute';
document.getElementById('pageone').style.border = 0;
</script>
<script type="text/javascript">
var currentPage = 1;
function switchPages() {
if(currentPage === 1) {
document.getElementById('pagetwo').style.top = 0;
document.getElementById('pagetwo').style.left = 0;
document.getElementById('pagetwo').style.width = '100%';
document.getElementById('pagetwo').style['min-height'] = '100%';
document.getElementById('pagetwo').style.position = 'absolute';
document.getElementById('pagetwo').style.border = 0;
currentPage = 2;
} else if(currentPage === 2) {
document.getElementById('pageone').style.top = 0;
document.getElementById('pageone').style.left = 0;
document.getElementById('pageone').style.width = '100%';
document.getElementById('pageone').style['min-height'] = '100%';
document.getElementById('pageone').style.position = 'absolute';
document.getElementById('pageone').style.border = 0;
currentPage = 1;
}
}
</script>
</body>
</html>
Basically there is a transition to page two, but then it will not work after that. I am not sure if dynamically changing the style object is a good approach here or not.

Seems to me that you're only applying the styles to the <div> you're trying to show but you're not actually hiding the other one.
Have you tried applying display: none; to the div you're meaning to hide?
I would apply the desired styles for the div assuming it's visible and just changing the display mode from none to block or viceversa depending on the one clicked

Several things going on.
First, you should avoid styles as much as you can. Instead, use classes, they run better and you can reuse the classes. Then you can just use
document.getElementById('pageone').addClass('selected');
document.getElementById('pagetwo').removeClass('selected');
Second, You are adding styles to the target id, but you are not removing the styles to the id/ids that you don't want in front.
I know you want pure js, but you also may want to look up jquery. It can make things like this a lot easier with simple commands like
$('#pageone').show();
$('#pagetwo').hide();

Related

global variables within functions changing across script sections in order to display a number

I am trying to use window.score within two different functions within two different scripts to make an updated score display when I click the button.
CRLF line endings
UTF-8 encoding
HTML grammar
newest version of firefox
<html>
<head>
<script type="text/javascript">
window.onload = function(){
document.getElementById("score").innerHTML = window.score
</script>
</head>
<body>
<p id="score" style="position: absolute; bottom: 200px; visibility: hidden"></p>
<button type="button" style="position: absolute; bottom:50px;" onClick="submit();">Submit</button>
<script type="text/javascript">
function setElementVisible(id) {
document.getElementById(id).style.visibility="visible";
}
function submit() {
window.score = 0
window.score += 10
setElementVisible("score")
}
</script>
</body>
Expected: Button is clicked, the score appears as 10
Result: Button is clicked, the score does not appear at all
As plalx mentioned in his comment, the innerHtml for the score element and window.score are not bound, because window.score passes by value. This means score's innerHtml is assigned to whatever window.score initially is (in this case, the actual score element as giving an element an id declares a global variable with that name), and doesn't change if window.score changes.
If you want the score element to reflect, you should assign its innerHtml to the new value of window.score once it changes (for example, on the submit function).
Btw, I think you are missing a curly brace in the first script.
I think you still have 2 or something to learn
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Score </title>
<style>
#score {
position: absolute;
bottom: 200px;
visibility: hidden
}
#bt-Submit {
position: absolute;
bottom:50px;
}
</style>
<script>
window.onload = function() {
var score = 0;
const
ElmScore = document.getElementById('score'),
btSubmit = document.getElementById('bt-Submit');
ElmScore.textContent = score;
btSubmit.onclick = function() {
score += 10;
ElmScore.textContent = score;
ElmScore.style.visibility = "visible";
}
}
</script>
</head>
<body>
<p id="score"></p>
<button type="button" id="bt-Submit">Submit</button>
</body>
</html>

I have a Div Element acting as a button but it will only work once

I am 11 years old and I started learning Javascript a couple of months ago, So I am trying to make a page where if you scroll down too much it will take you back to the top so I made a Div element that fills up a large space and onmouseover it will take you back up to the top but if you try it a second time it won't do anything. Please help. Thanks in advance !
I hope my understanding of your problem is right. You have a div and you want to go up each time you scroll too much.
As an example of how to handle the scroll in vanilla JavaScript you can have a look at the document for the onscroll event: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onscroll.
Here is an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
#container {
height: 500px;
width: 515px;
overflow: auto;
}
#foo {
height: 1000px;
width: 500px;
background-color: #777;
}
</style>
</head>
<body>
<div id="container">
<div id="foo"></div>
</div>
<script>
var container = document.getElementById('container');
container.addEventListener('scroll', function(event) {
// Get top and left value
var top = container.scrollTop
if (top > 400) {
// Go to the top
container.scrollTop = 0;
}
}, false);
</script>
</body>
</html>
In this example the contained element is bigger that the container so the container becomes scrollable with the overflow: auto; css property.
The scripts applies a onscroll event that checks the scroll value of the container and reset it to 0 when it exceed an arbitrary value (400 in the example).
I hope this has been useful to your work.

Javascript moving circle

I need to program a html-based monitoring surface.
For the surface I need to code circles which move from x to y and only if number xy is greater than xy.
Hard to explain but actually similar like they have it on
https://www.solarweb.com
click "click to try the preview now" on the top, than click "view demo" and choose the first system "Fronius AT Sattledt Hybrid 2"
and see the animation above on the left side.
I´ve still been able to get a circle running from the beginning of a div to the end. but only 1 circle! is it possible to have more circles in a row doing the same?
Maybe anyone can help me :)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Moving Bullet</title>
<meta charset="utf8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
#energieFluss {
width: 900px;
height: 500px;
border: 5px black solid;
overflow: hidden;
}
#bullet {
position: relative;
left: 50px;
top: 25px;
}
</style>
<body>
<div id="energieFluss" width="900px" height="500px" color="red">
<img id="bullet" src="ball-blau.png" height ="25" width= "25">
</div>
<script>
var Bullet = document.querySelector ("#bullet");
var currentPos = 0;
var requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
function moveBullet () {
currentPos += 8;
Bullet.style.left = currentPos + "px";
if (Math.abs(currentPos) >= 900) {
currentPos = -50;
}
requestAnimationFrame(moveBullet);
}
moveBullet ();
</script>
</body>
I think what you'll want to do here is create your image elements on the fly and then animate them. You could also do other fancy things like render on a canvas or use a JavaScript rendering library to do it more efficiently.
To create the elements on the fly, do something like this:
var balls = [];
// Run this in a loop to add each ball to the balls array.
var img = document.createElement("img");
img.src = "ball-blau.png";
img.height = 25;
img.width = 25;
document.getElementById("energieFluss").appendChild(img);
balls.push(img)
Post thought:
You could just statically define your image elements and animate multiple elements. If you already know how to animate one element, then you can apply that same knowledge to multiple.

Changing colour of a div using jQuery

I'm trying to change the colour of a singular div using jQuery. I'm 80% sure my code should work but I'm not sure why it's not working. I've tried to use loads of different methods such as mouseenter, hover, addClass, toggleClass etc. But for the life of me I can't figure out what's going on. Help please?
JAVASCRIPT
$(document).ready(function(){
blackMode();
genDivs(10);
});
/* Black mode - changes colours of cells to black */
function blackMode() {
$('.cell').hover(
function (){
$(this).css({"background-color":"black"});
},
function (){
$(this).css({"background-color":"white"});
});
}
/* creates the divs in a 10x10 grid */
function genDivs(v) {
var e = document.getElementById('container'); //This is what we want to append the rows
for (var i = 0; i < v; i++) {
var row = document.createElement("div"); // This creates each row that is selected.
row.className="row"; // This declares the class name for the created div.
for(var j = 0; j < v; j++) {
var cell = document.createElement("div");
cell.className="cell";
row.appendChild(cell);
}
e.appendChild(row);
}
}
HTML
<html>
<head>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script src="Script.js"></script>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway" />
<link rel="stylesheet" type="text/css" href="Stylesheet.css"></link>
</head>
<body>
<h1 class="title">Etch-a-Sketch</h1>
<div id="container">
</div>
</body>
UPDATE:
Sorry, I haven't notice you are in fact using .cell class on element you're inserting dynamically - but still give them some height and more important -> first insert elements and then use jQuery to bind events:
$(document).ready(function(){
genDivs(10);
blackMode();
});
another fiddle
The version you had before didn't work because by the time you called blackMode function that applied hover handlers none elements with class .cell were in DOM.
ORIGINAL ANSWER:
You are applying hover functions on elements that have cell class, but you haven't used that in your HTML. Also when your div has no contents it'll have 0px height and effect won't be visible.
Add .cell class to you div:
<div class="cell">
</div>
And give it some height via CSS (or add sth inside):
.cell {
height: 400px;
}
jsfiddle

How do I make <a> tags with a class unclickable?

I have some parent nav items with children and I don't need the parent items to be clickable.
They look like this:
Parent Item
Is there anyway to target the <a> tags with the specific class of .parent and make them unclickable?
If anyone interested in Pure CSS solution (As this question is tagged as CSS) than you can use pointer-events: none;
a[href="parent"] {
cursor: default;
pointer-events: none;
}
Demo
As far as support goes
Credits: Mozilla Developer Network
Use:
$(function () {
$('a.parent').on("click", function (e) {
e.preventDefault();
});
});
If you want to avoid using the jQuery library, it's just as easy without it:
var disabled = document.querySelector('.parent');
disabled.addEventListener('click', function(e) {e.preventDefault();}, false);
Another pure CSS option would be to overlay the link with an absolutely positioned "cover":
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
.parent {position: relative; z-index: -1;}
.parent:after {content: ""; position: absolute; top:0; right: 0; bottom: 0; left: 0;}
</style>
</head>
<body>
Disabled Link
Normal Link
</body>
</html>
Instead of a listener on every .parent, you can put a single listener on the body. The following will work in every browser in use without any library support:
function stopClickOnParentClass(evt) {
var el = evt.target || evt.srcElement;
if (/(^|\s)parent(\s|$)/.test(el.className)) {
evt.preventDefault();
return false;
}
}
then:
<body onclick="stopClickOnParent(event);" …>
You could also make the class dynamic by passing it to the function and building the regular expression from it.

Categories

Resources