changing webpage randomly without getting the same page twice - javascript

I am trying to link 35 webpages with math.random. However I dont want it to go to each site more then once. So I have this:
function myFunction() {
var pages = ['sang1.html', 'sang2.html', 'sang3.html', 'sang4.html', 'sang5.html', 'sang6.html', 'sang7.html', 'sang8.html', 'sang9.html', 'sang10.html', 'sang11.html', 'sang12.html', 'sang13.html', 'sang14.html', 'sang15.html', 'sang17.html', 'sang18.html', 'sang19.html', 'sang20.html', 'sang21.html'];
var page, visitedPages = JSON.parse(localStorage.getItem("visitedPages"));
if (visitedPages === null) {
visitedPages = [];
}
if (pages.length !== visitedPages.length) {
for (var i = 0; i < pages.length; i++) {
page = pages[Math.floor((Math.random() * pages.length) + 1)];
if (visitedPages.indexOf(page) === -1) { //unvisited yet
localStorage.setItem("visitedPages", JSON.stringify(visitedPages.push(page)));
window.location.href = page;
break;
}
}
} else {window.location.href = score.html //All pages visited at once
}
}
a random page:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Gæt en sang</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="Test.js"></script>
</head>
<body>
<audio class="hidden" controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="Original GhostBusters Theme Song.mp3" type="audio/mpeg">
</audio>
<div id="header">
<h2> Gæt sangen og hejs flagstangen!</h2>
</div>
<div id="left">
<ul> Hvilken sang er dette?
</br>
<button type="button" onclick="myFunction()">
<li> Ghost busters</li>
</button>
</br>
<button type="button" onclick="myFunction()">
<li> Poltergeist</li>
</button>
</br>
<button type="button" onclick="myFunction()">
<li> Something strange<li>
</button>
</br>
<button type="button" onclick="myFunction()">
<li> Who are you gonna call<li>
</button>
</ul>
</div>
</div>
<p id="Test"></p>
</body>
</html>
so I have a button you press and then it starts myfunction. This goes for all my sites. However when i press my button it always goes to page 2. And only from page 1. Any suggestions to what is wrong?

Instead of having a list of visited pages, have a list of all pages which you splice a random one out of on every click. An example without the finishing page:
var pages = JSON.parse(localStorage.getItem("pages"));
if (pages === null) {
pages = ['sang1.html', 'sang2.html', 'sang3.html', 'sang4.html', 'sang5.html', 'sang6.html', 'sang7.html', 'sang8.html', 'sang9.html', 'sang10.html', 'sang11.html', 'sang12.html', 'sang13.html', 'sang14.html', 'sang15.html', 'sang17.html', 'sang18.html', 'sang19.html', 'sang20.html', 'sang21.html'];
}
function onClick () {
var randomIdx = Math.floor(Math.random() * pages.length),
page = pages[randomIdx];
pages.splice(randomIdx, 0);
localStorage.setItem("pages", JSON.stringify(pages));
window.location.href = page;
}

Related

parameter is coming out undefined

I am in the process of building a hangman game. In my checkLetter function is where i am going to write code to check if a letter matches a chosen word. However I have noticed that when i passed in letter to onclick for function checkLetter, the console log will come out undefined but it will also display collection of html tags from the button that is pressed. In the function checkLetter i passed in pickLetter as a parameter. This is where buttons work but it also comes out undefined. I am very certain that I wrote this correctly but i know something is missing. Any help? I hope i made myself clear.
document.body.onload = createButtons;
//keyboard added dynamically
function createButtons() {
const buttons = alphabet.map(letter =>
`<button id = "${letter}"
class="btn btn-primary letterKey"
button type="button"
value="${letter}"
onclick = "checkLetter(${letter})"
>
${letter}
</button>`).join('');
keyboardBtn.innerHTML = buttons;
//prints letters to answer input/screen
Array.from(document.getElementsByClassName("letterKey"))
.forEach((e) =>
e.addEventListener("click", () => placeLetters.innerHTML += e.value))
}
//check letter of chosen word, if its there or not
function checkLetter(pickLetter) {
console.log(pickLetter)
}
checkLetter();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<title>Hangman 2021</title>
</head>
<body>
<!--header-->
<header class="container-fluid bg-success text-dark">
<div>
<span>
<h1 class="text-center">Hang that man</h1>
</span>
</div>
</header>
<div class="container">
<br>
<h3>Please choose a letter on your keyboard to reaveal the secret word</h3>
<br>
<!--each letter will display after all lives are gone-->
<div id="keyboard"></div>
<br>
<br>
<!--choices will be inserted here-->
<div id="answer-input">
<p id="letter-input">_ _ _ _ _ _ _ _ _ _ _ </p>
</div>
<!--number of lives will be tracked here-->
<p id="lives">You have 8 lives left</p>
<!--everytime a guess is wrong, a limb is added to animation-->
<section class="animation">
<div class="justify-content-center">
<canvas id="gallows" width="300" height="150" style="border:1px solid #d3d3d3"></canvas>
</div>
<button id="reset">Play Again</button>
</section>
<br>
</div>
<!--footer-->
<footer class="container-fluid bg-success text-dark">
<div class="justify-content-center">Hang that man © 2021</div>
<div class="social justify-content-center">
<i class="fab fa-linkedin"></i>
|
<i class="fab fa-github"></i>
</div>
<div class="github">
<a>Andres Ramirez</a>
</div>
</footer>
<script type="text/javascript"src="index.js" defer></script>
</body>
</html>
have you tried using :
Array.from(document.getElementsByClassName("letterKey"))
.forEach((e) =>
e.addEventListener("click", () => placeLetters.innerText+= e.value))
(note that innerHtml returns everything from html) you could try:
placeLetters.textContent
placeLetters.innerText
placeLetters.value
I created an example with comments. You can use it to see how to handle the clicks. I would advise to use event delegation to handle click events instead of 26 separate handlers. See this blog for more info. I added comments to the code below so it's pretty clear but let me know if you have any questions. The game obviously isn't 100% finished, but should be enough so you can take it from there.
//Your HTML elements that will be used for the game UI
const btnContainerEl = document.querySelector("#btn-container");
const guessTrackerEl = document.querySelector("#guess-tracker");
const winningWordEl = document.querySelector("#winning-word");
//Some const variables to avoid magic numbers in the code
const CHAR_CODE_a = 97;
const STRIKES_TIL_HANGED = 5;
//A variable to keep track of the remaining letters the player needs to win
let lettersNeededToWin;
//A variable to keep track of unsuccessful guesses
let strikes = 0;
initGame();
function initGame() {
getWinningWord();
createLetterButtons();
}
function getWinningWord() {
//Get the winning word from a prompt and create an array of it's letters
lettersNeededToWin = window.prompt("Enter winning word").toLowerCase().split('').sort();
}
function createLetterButtons() {
//Loop 26 times to create a button for each letter in the English alphabet
for (let i = 0; i < 26; i++) {
const char = String.fromCharCode(CHAR_CODE_a + i);
const btnText = document.createTextNode(char);
const buttonEl = document.createElement("BUTTON");
buttonEl.appendChild(btnText);
//Append the button the UI
btnContainerEl.appendChild(buttonEl);
}
//Add a click event to the parent container instead of each individual button.
btnContainerEl.addEventListener('click', handleLetterButtonClick);
//1 event handler is more efficient than 26 seperate handlers.
}
function handleLetterButtonClick(e) {
if (e.target.tagName != "BUTTON") {
return;
}
e.target.disabled = true;
updateGuessTracker(e.target.textContent);
if (lettersNeededToWin.includes(e.target.textContent)) {
while (lettersNeededToWin.includes(e.target.textContent)) {
//Remove these letters from the array (in-place operation)
lettersNeededToWin.splice(lettersNeededToWin.indexOf(e.target.textContent), 1);
}
} else {
//Add another strike since players guess was incorrect
strikes++;
}
//Check the number of letters left and number of strikes to determine win/lose outcome
if (lettersNeededToWin.length == 0) {
console.log("YOU WIN!");
} else if (strikes == STRIKES_TIL_HANGED) {
console.log("YOU LOSE!");
}
}
function updateGuessTracker(guessLetter) {
guessTrackerEl.innerHTML += `<font color="${lettersNeededToWin.includes(guessLetter) ? 'green' : 'red'}">${guessLetter}</font> `;
}
<div id="winning-word">Winning word:</div>
<br/>
<div id="btn-container"></div>
<div id="guess-tracker">Guessed letters:</div>

Javascript play/pause button for video only pauses

I've setup a play/pause video button in javascript, that was working, but now doesn't and I don't know why. It now only fires once, pausing but not playing.
Basically, the "if" part of my playButton function works correctly, but the "else" part doesn't seem to function correctly. It did previously, so I imagine there's just a missing element somewhere. I have even checked it in a code validator and it passes. What to do?
Please, see my code below...
window.onload = function() {
const video = document.getElementById('intro-video');
const playPause = document.getElementById('play-button');
const enlarge = document.getElementById('full-screen');
const progressBar = document.getElementById('progress-bar');
playPause.addEventListener('click', function playButton() {
if (video.play) {
video.pause()
playPause.innerHTML = 'Play Video'
playPause.style.backgroundImage = 'url(https://alcove.bensmiles.com/wp-content/uploads/Alcove-Icon_Play.svg)'
} else {
video.play()
playPause.innerHTML = 'Pause Video'
playPause.style.backgroundImage = 'url(https://alcove.bensmiles.com/wp-content/uploads/Alcove-Icon_Pause.svg)'
}
});
enlarge.addEventListener('click', function enlarge() {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen(); // Firefox
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen(); // Chrome and Safari
}
});
progressBar.addEventListener('change', function progressBar() {
const time = video.duration * (progressBar.value / 100);
video.currentTime = time;
});
video.addEventListener('timeupdate', function progressTime() {
const value = (100 / video.duration) * video.currentTime;
progressBar.value = value;
});
progressBar.addEventListener('mousedown', function progressPause() {
video.pause();
});
progressBar.addEventListener('mouseup', function progressPlay() {
video.play();
});
};
<!doctype html>
<html lang='en-ZA'>
<head>
<meta charset='UTF-8'>
<title>Alcôve – Discover Opulence</title>
<link rel='dns-prefetch' href='//fonts.googleapis.com'>
<link rel='fonts' href='https://fonts.googleapis.com/css2?family=Work+Sans:wght#400;500;600;700&display=swap'>
<link rel='stylesheet' href='Style.css'>
<script rel='javascript' src='Controls.js'></script>
</head>
<body>
<div id='container'>
<div id='top' class='section dark'>
<div id='row1' class='row'>
<div id='main-menu'>
<ul>
<li><a href='https://alcove.bensmiles.com'>About Us</a></li>
<li><a href='https://alcove.bensmiles.com/committee'>Executive Committee</a></li>
<li><a href='https://alcove.bensmiles.com/news'>The Opulent News</a></li>
<li><a href='https://alcove.bensmiles.com/foundation'>Foundation</a></li>
<li><a href='https://alcove.bensmiles.com/contact'>Contact</a></li>
</ul>
</div>
<div class='column left'>
<div id='logo'>
<img src='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Logo.svg'>
</div>
<div id='header-headline'>
<p>Alcôve Holdings</p>
<h1>Discover<br>Opulence</h1>
</div>
</div>
<div class='column right'>
<div id='menu-block'>
<img id='header-image' src='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Header.png'>
<div id='header-copy'>
<p>Alcôve finds satisfaction in establishing an atmosphere where excellence is celebrated, and confidence is originated. We inspire the youth to lead with precision and passion by igniting their desire to discover opulence through Alcôve.</p>
</div>
<div id='video-console'>
<div id='video-player'>
<video autoplay muted id='intro-video'poster='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Video_Poster.png' width='214px' height='120px'>
<source src='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Video_Intro.mp4' type='video/mp4'>
<source src='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Video_Intro.ogv' type='video/ogv'>
<source src='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Video_Intro.webm' type='video/webm'>
</video>
<div id='video-details'>
<button id='full-screen' type='button'><img src='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Icon_Enlarge.svg'></button>
<div id='video-headline'>
<p>Headline of the video playing</p>
</div>
</div>
</div>
<div id='video-controls'>
<button id='play-button' type='button'>Pause Video</button>
<input id='progress-bar' type='range' value='0'>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
video.play references the play method of video. In Javascript, every non-null (non-zero, etc respectively) counts as true. Because the play method exists, it will never go to the else part. Instead, use if (!video.paused).
Just one more thing: decide whether to use semicolons or to not. If you use both styles, it makes the code a bit weird.
Try this:
playPause.addEventListener('click', function playButton() {
if (video.paused || video.ended) {
video.play()
playPause.innerHTML = 'Pause Video'
playPause.style.backgroundImage = 'url(https://alcove.bensmiles.com/wp-content/uploads/Alcove-Icon_Pause.svg)'
} else {
video.pause()
playPause.innerHTML = 'Play Video'
playPause.style.backgroundImage = 'url(https://alcove.bensmiles.com/wp-content/uploads/Alcove-Icon_Play.svg)'
}
});

Why is text in between bold tags not rendered bold?

I am building a web tool for authors that follows a format we need for our backend. I didn't like a number of pre-made solutions for rich text editors as they were having way more features than I would need so I decided to parse my text through a function to detect bold using ** in the text.
I came across a regex solution here and when I used it, it detected the bold text and substituted * for <b> but displayed the tags instead of making the text between <b> and </b> bold.
I am new to HTML, CSS and JS so probably this is a simple error, but I couldn't find out how to deal with it myself...
// Tracks number of current textareas i.e. paragraphs
var element_counter = 0;
// Add Paragraph on button press
document.getElementById("addParagraph").addEventListener("click", function() {
var textarea = document.createElement("textarea");
var text = "Here goes your new paragraph.";
var node = document.createTextNode(text);
textarea.setAttribute("id", element_counter);
//textarea.setAttribute("class", "flow-text");
//textarea.setAttribute("oninput", "this.style.height = '';this.style.height = this.scrollHeight + 'px'");
textarea.append(node);
var section = document.getElementById("editor");
section.appendChild(textarea);
element_counter++;
reloadPreview();
});
// Add Image on button press
document.getElementById("addImage").addEventListener("click", function() {
var image = document.createElement("input");
image.setAttribute("type", "file");
image.setAttribute("id", element_counter);
image.setAttribute("accept", "image/*");
image.setAttribute("class", "file-field input-field");
var section = document.getElementById("editor");
section.appendChild(image);
element_counter++;
});
// Remove paragraph with confirmation step on button press
var confirm = false;
document.getElementById("removeLastItem").addEventListener("click", function() {
// Ensure there is an object to remove and wait for confirmation
if (document.getElementById(element_counter-1) != null) {
if (confirm === false) {
confirm = true;
document.getElementById("removeLastItem").innerHTML = "Confirm";
} else {
document.getElementById("removeLastItem").innerHTML = "Remove last item";
var element = document.getElementById(element_counter-1);
element.parentNode.removeChild(element);
confirm = false;
element_counter--;
reloadPreview();
}
}
});
// Remove all with confirmation step on button press
var confirmRemoveAll = false;
document.getElementById("removeAll").addEventListener("click", function() {
// Ensure there is an object to remove and wait for confirmation
if (document.getElementById(element_counter-1) != null) {
if (confirmRemoveAll === false) {
confirmRemoveAll = true;
document.getElementById("removeAll").innerHTML = "Confirm";
} else {
document.getElementById("removeAll").innerHTML = "Remove all";
var element = document.getElementById("editor").innerHTML = ""
confirmRemoveAll = false;
element_counter = 0;
reloadPreview();
}
}
});
// Preview on button press
document.getElementById("previewButton").addEventListener("click", reloadPreview);
// Preview current document status
function reloadPreview() {
// Clear previous preview
document.getElementById("preview").innerHTML = "";
// Add elements iteratively
var section = document.getElementById("preview");
const id = "preview";
for (var counter = 0; counter < element_counter; counter++) {
var type = document.getElementById(counter).nodeName;
// If text element
if (type === "TEXTAREA") {
var paragraph = document.createElement("p");
var text = document.getElementById(counter).value;
var richtext = boldText(text);
paragraph.setAttribute("id", id + counter);
paragraph.setAttribute("class", "flow-text");
paragraph.innerHTML = richtext;
section.appendChild(paragraph);
}
// If image element
if (type === "INPUT") {
// This weird structure allows to render item by item into preview and not mix up the order as onload is otherwise too slow
(function() {
var file = document.getElementById(counter).files[0];
var reader = new FileReader();
var image = document.createElement("img");
image.setAttribute("id", id + counter);
image.setAttribute("class", "materialboxed responsive-img");
section.appendChild(image);
reader.onload = function(e) {
image.setAttribute("src", e.target.result);
}
reader.readAsDataURL(file);
}())
}
}
}
function boldText(text){
var bold = /\*\*(\S(.*?\S)?)\*\*/gm;
var richtext = text.replace(bold, '<b>$1</b>');
return richtext;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Climate Science</title>
<!--Used to unify web page appearance and this preview appearance-->
<link type="text/css" href="/css/materialize.css" rel="stylesheet">
<link type="text/css" href="/css/styles.css" rel="stylesheet">
<link type="text/css" href="/css/mystyles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=swap" rel="stylesheet">
<script href="text/javascript" src="/js/materialize.js"></script>
<link rel="manifest" href="/manifest.json">
<!-- IOS Support -->
<link rel="apple-touch-icon" href="/img/icons/icon-96x96.png">
<link rel="apple-touch-icon" href="/img/icons/icon-152x152.png">
<meta name="apple-mobile-web-app-status-bar" content="#5368ff">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="theme-color" content="#5368ff">
</head>
<body class="grey lighten-5">
<header>
<!-- top nav -->
<div class="navbar-fixed">
<nav class="z-depth-2">
<div class="nav-wrapper">
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Log out</li> <!--TODO needed?-->
</ul>
</div>
</nav>
</div>
</header>
<div class="container">
<h3>Editor Area</h3>
<p><b>Linebreaks</b> within paragraphs are currently <b>ignored</b> to follow our internal database format.</p> <!--TODO check if accurate, \n possible integratable?-->
<!--
<h6>Safety switch</h6>
<div id="safetyswitch" class="switch">
<label>
Off
<input type="checkbox">
<span class="lever"></span>
On
</label>
</div>
<p>You can only remove paragraphs while the switch is deactivated!</p>
<h6>Auto-preview</h6>
<div id="safetyswitch" class="switch">
<label>
Off
<input type="checkbox">
<span class="lever"></span>
On
</label>
</div>
<p>The preview will load automatically while you edit your text</p>
<br>
-->
<button id="addParagraph" class="waves-effect waves-light btn">Add new paragraph</button>
<button id="addImage" class="waves-effect waves-light btn">Add new image</button>
<button id="removeLastItem" class="waves-effect waves-light btn">Remove last item</button>
<button id="removeAll" class="waves-effect waves-light btn">Remove all</button>
<div id="editor">
<!-- Here go all the content the author creates-->
</div>
<button id="previewButton" class="waves-effect waves-light btn">Update Preview</button>
<h3>Preview</h3>
<div id="preview">
<!-- Here will be the preview elements when clicking the button -->
<!--
<form action="#">
<p class="flow-text">What changes do you think we're already experiencing? Tap as many that apply</p>
<p>
<label>
<input type="checkbox" />
<span>Raising Sea Levels</span>
</label>
</p>
<p>
<label>
<input type="checkbox" />
<span>Fewer Heat Waves</span>
</label>
</p>
<p>
<label>
<input type="checkbox" />
<span>Worse Droughts</span>
</label>
</p>
<p>
<label>
<input type="checkbox" />
<span>Hotter heat waves</span>
</label>
</p>
<button class="btn waves-effect waves-light btn-large" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>
</form>
-->
</div>
</div>
<script href="text/javascript" src="js/preview.js"></script>
<script href="text/javascript" src="js/ui.js"></script>
</body>
</html>
Hi so perhaps use innerHTML to insert HTML into the tag body? So instead of paragraph.append:
paragraph.innerHTML = richtext;

save text value to listview & start count the time

I have TWO main questions that I really would have help with.
I have googled and searched for some day now without any help, but if you know any links that I maybe haven't watched or any site with help, then give me.
I would appreciated it, OR if you already have the code/sample code, would help :-)
I work with PhoneGap & JQuery Mobile right now, and the thing is this.
I have a 'textarea' there you write something, then a save button, what I want it to do is that when I press the save-button, the textvalue I wrote in the textarea would get saved in a listview in another page of the app. I have looked at "localstorage" but nothing works correctly.
(Also, if you write something in textarea and you press the cancel button, the text in the textarea should be deleted next time you go in to that page.)
The second question is:
When I press the save button, it should begin to count, in seconds, minutes, hours, days.
Think of it like this. I write "toothbrush" in the textarea and press save, now when I go to the listview-page, I can see it says toothbrush in the listview, beside the text it says 1m, 5m, 1h, it just update when it was last time I bought or changed the toothbrush, so next time I open the app, I can see "TOOTHBRUSH: 4Days, 16HRS, 52MINS AGO". In that way I can check when I bought something, or changed something.
This is my codes, both html & .js, what should I do so this mission will work.
Any suggestions, sites, or code you guys have that would help?
Thank you so much.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Last Time I Did It!</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="lib/jquery-1.6.4.js"></script>
<script src="lib/jquery.mobile-1.1.0.js"></script>
<link href="src/css/jquery.mobile.structure-1.1.0.css" rel="stylesheet">
<link href="src/css/jquery.mobile.theme-1.1.0.css" rel="stylesheet">
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Last time I did it</h1>
</div>
<div data-role="content"></div>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li>
<a data-role="button" href="#page2" data-transition="slide" id="add" data-rel="page">ADD</a>
</li>
<li>
<a data-role="button" href="#page2" data-transition="slide" id="show" data-rel="page">SHOW</a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Add event</h1>
</div>
<div data-role="content">
<textarea></textarea>
</div>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li>
<a data-role="button" href="#page3" data-transition="slide" id="save">SAVE</a>
</li>
<li>
<a data-role="button" href="#page1" id="cancel" data-transition="slide" data-direction="reverse" data-rel="page">CANCEL</a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header">
Back
<h1>Events</h1>
</div>
<div data-role="content">
<ol data-role="listview" id="orderedList" data-inset="true"></ol>
</div>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li>
<a data-role="button" id="edit">EDIT</a>
</li>
<li>
<a data-role="button" id="delete">DELETE</a>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
and my almost empty -js code.
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#add', function(){
$.mobile.navigate( "#page2", { transition : "slide", info: "info about the #bar hash" });
});
});
function save ()
{
var fieldValue = document.getElementById('textarea').value;
localStorage.setItem('content', orderedList);
}
EDIT:
Here is my new html & js file, after looked at your awesome code-example, but when I run it on my phone with phonegap, still, the save, cancel, the time and even the saved text will not show up.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Last Time I Did It!</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="lib/jquery-1.6.4.js"></script>
<script src="lib/jquery.mobile-1.1.0.js"></script>
<link href="src/css/jquery.mobile.structure-1.1.0.css" rel="stylesheet">
<link href="src/css/jquery.mobile.theme-1.1.0.css" rel="stylesheet">
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Last time I did it</h1>
</div>
<div data-role="content"></div>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li>
<a data-role="button" href="#page2" data-transition="slide" id="add" data-rel="page">ADD</a>
</li>
<li>
<a data-role="button" href="#page3" data-transition="slide" id="show" data-rel="page">SHOW</a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Add event</h1>
</div>
<div data-role="content">
<textarea id="newItemText"></textarea>
</div>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li>
<a data-role="button" href="#" data-transition="slide" id="btnSave">SAVE</a>
</li>
<li>
<a data-role="button" href="#page1" id="btnCancel" data-transition="slide" data-direction="reverse" data-rel="page">CANCEL</a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header">
Back
<h1>Events</h1>
</div>
<div data-role="content">
<ul data-role="listview" id="orderedList" data-inset="true">
</ul>
</div>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li>
<a data-role="button" id="edit">EDIT</a>
</li>
<li>
<a data-role="button" id="delete">DELETE</a>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
And the JS file.
$(document).on('pagebeforeshow', '#page3', function(){
//setup the current list
if(localStorage.getItem('TaskList')){
var TheList = [];
TheList = JSON.parse(localStorage.getItem('TaskList'));
var items = '';
for (var i = 0; i < TheList.length; i++) {
items += '<li><h3>' + TheList[i].text + '</h3><p>' + timeAgo( (new Date(TheList[i].time).getTime())/1000) + ' ago<p></li>';
}
$('#orderedList').empty().append($(items)).listview('refresh');
}
});
$(document).on('pageinit', '#page2', function(){
$('#btnCancel').on("click", function(){
$('#newItemText').val(''); //CLEAR TEXT AREA
});
$('#btnSave').on("click", function(){
var TheList = [];
if(localStorage.getItem('TaskList')){
TheList = JSON.parse(localStorage.getItem('TaskList'));
}
var newitem = $('#newItemText').val();
var task = {text: newitem, time: new Date() };
TheList.push(task);
localStorage.setItem('TaskList', JSON.stringify(TheList));
$('#newItemText').val(''); //CLEAR TEXT AREA
$.mobile.navigate( "#page3", { transition : "slide" });
});
});
function timeAgo(time){
var units = [
{ name: "second", limit: 60, in_seconds: 1 },
{ name: "minute", limit: 3600, in_seconds: 60 },
{ name: "hour", limit: 86400, in_seconds: 3600 },
{ name: "day", limit: 604800, in_seconds: 86400 },
{ name: "week", limit: 2629743, in_seconds: 604800 },
{ name: "month", limit: 31556926, in_seconds: 2629743 },
{ name: "year", limit: null, in_seconds: 31556926 }
];
var diff = (new Date() - new Date(time*1000)) / 1000;
if (diff < 5) return "now";
var i = 0;
while (unit = units[i++]) {
if (diff < unit.limit || !unit.limit){
var diff = Math.floor(diff / unit.in_seconds);
return diff + " " + unit.name + (diff>1 ? "s" : "");
}
};
}
SOLUTION:
The JSFiddler code-example, the demo is perfect and are based on jQuery 1.9.1 & jQuery Mobile 1.3.0b1, I used 1.6.4 & 1.1.0.
After updating this two .js files, everything worked on PhoneGap!
Here is a DEMO
There are many questions within your problem, so I will probably not manage to answer all of them. To use localStorage with an array of 'tasks' you use JSON.stringify when saving and JSON.parse when retrieving.
So, each time page3 is displayed, you retrieve the current list of items from localStorage, create list items, empty the list and then append the created items :
$(document).on('pagebeforeshow', '#page3', function(){
//setup the current list
if(localStorage.getItem('TaskList')){
var TheList = [];
TheList = JSON.parse(localStorage.getItem('TaskList'));
var items = '';
for (var i = 0; i < TheList.length; i++) {
items += '<li><h3>' + TheList[i].text + '</h3><p>' + TheList[i].time + '<p></li>';
}
$('#orderedList').empty().append($(items)).listview('refresh');
}
});
When entering a new item, you want to store the text and the current time, so use an object. First get the current list from localStorage, then create the new item and add it to the list, finally save back to localStorage clear the textarea and navigate to page3. The cancel button just clears the textarea:
$(document).on('pageinit', '#page2', function(){
$('#btnCancel').on("click", function(){
$('#newItemText').val(''); //CLEAR TEXT AREA
});
$('#btnSave').on("click", function(){
var TheList = [];
if(localStorage.getItem('TaskList')){
TheList = JSON.parse(localStorage.getItem('TaskList'));
}
var newitem = $('#newItemText').val();
var task = {text: newitem, time: new Date() };
TheList.push(task);
localStorage.setItem('TaskList', JSON.stringify(TheList));
$('#newItemText').val(''); //CLEAR TEXT AREA
$.mobile.navigate( "#page3", { transition : "slide" });
});
});

Win8 Metro (JS/HTML5) - Video not visible after page navigation

I'm working on a media playback app that has two navigatable pages. I would like to store the video object so that if the user navigates away from the video page and then returns, the same object is loaded into the div and the user can simply pick up where they left off.
My problem: When the user returns to the video page, the video element reloads from scratch and I can't load it with the pre-existing video data. As a result, there is no video visible on the screen. My player controls, however, are tied to the original video object and continue to work as expected.
I'm new to these languages so any advice would be a great help. I can't figure it out for the life of me.
Here's the code. I initialize mediaSession and the flags in another script so they persist during page navigation.
The player page HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>homepage</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<link href="/css/default.css" rel="stylesheet" />
<link href="/pages/mediacontent/mediacontent.css" rel="stylesheet" />
<!-- <script src="/js/appData.js"></script> -->
<script src="/pages/mediacontent/mediacontent.js"></script>
</head>
<body>
<div class="body_div">
<header id="header_titlearea">
<h1 class="win-type-ellipsis">
<img src="/images/logo.png" /><span> Decoder Sample App</span>
</h1>
</header>
<div id="article_maintext">
<video id="playbackVideo" height="100%" preload="auto">
<!--<video id="Video1" height="100%" preload="auto" >-->
<!--<source src="/media/demo.mp4" />-->
</video>
</div>
<footer id="footer">
<br />
<input type="range" class="s_Class" id="s_Seek" value="0"><br />
<button class="action secondary" id="b_playFromFile">File Picker</button>
<button class="action secondary" id="b_playbackPause">Play</button>
<button class="action secondary" id="b_playbackStop">Stop</button>
<button class="action secondary" id="b_playbackRewind">Rewind</button>
<button class="action secondary" id="b_playbackForward">Forward</button>
<button class="action secondary" id="b_playbackMute">Mute</button>
<button id="navButton" class="navButton" title="Nav" >About</button><br />
<p id="outputtext">debug monitor</p>
</footer>
</div>
</body>
</html>
The player page JS (excerpt):
(function f() {
"use strict";
WinJS.UI.Pages.define("/pages/mediacontent/mediacontent.html", {
ready: function(element, options) {
if (mediaSession.navflag === false) {
mediaSession.vid = WinJS.Utilities.query("#playbackVideo")[0];
mediaSession.vid.src = "/media/demo.mp4";
document.getElementById('outputtext').innerHTML = "new mediaSession set!"
} else if (mediaSession.navflag === true) {
if (mediaSession.pauseflag === false) {
//mediaSession.vid.play();
}
document.getElementById('outputtext').innerHTML = "existing mediaSession!"
*-Here is where I need help-*
mediaSession.navflag = false;
}
...
}
}
}
After a few false leads, I figured out how to swap out the reloaded video element with my video data, using the replaceChild() method.
the new javascript looks like this:
(function f() {
"use strict";
WinJS.UI.Pages.define("/pages/mediacontent/mediacontent.html", {
ready: function(element, options) {
if (mediaSession.navflag === false) {
mediaSession.vid = WinJS.Utilities.query("#playbackVideo")[0];
mediaSession.vid.src = "/media/demo.mp4";
document.getElementById('outputtext').innerHTML = "new mediaSession set!"
} else if (mediaSession.navflag === true) {
if (mediaSession.pauseflag === false) {
//mediaSession.vid.play();
}
document.getElementById('outputtext').innerHTML = "existing mediaSession!"
var mediaParent = document.getElementById("article_maintext");
mediaParent.replaceChild(mediaSession.vid, mediaParent.firstElementChild);
mediaSession.navflag = false;
}
...
}
}
}

Categories