Background using .html (content) - javascript

How can I change the background in this code to change dynamically? I tried incorporating the entire code in the dynamicCodeContainer1 but did not succeed.
<div style="background-color:#000000;height:200px;width:500px;float:left;"
id="consumed1">
<div id="dynamicCodeContainer1">no dynamic code loaded.</div>
</div>
Here is the full code:
<html>
<head>
<meta content="text/html;charset=UTF-8" http-equiv="Content-Type">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.0.1.css">
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.mobile-1.0.min.js"></script>
<style type="text/css">
<script type="text/javascript">
var refresh = 500;
function init()
{
loop(refresh);
}
function loop(x)
{
if (MW1002==false)
{
var content = '<input type="submit" id="Button1" value="Button1" data-corners="true" data-theme="a" />';
$('#dynamicCodeContainer1').html(content).trigger("create");
}
if (MW1002==true)
{
var content = '<input type="submit" id="Button1" value="Button1" data-corners="true" data-theme="b" />';
$('#dynamicCodeContainer1').html(content).trigger("create");
}
}
</script> </head>
<body onload="init()">
<script type="text/javascript"></script>
<section id="page1" data-role="page">
<div style="background-color:#000000;height:200px;width:500px;float:left;"
id="consumed1">
<div id="dynamicCodeContainer1">no dynamic code loaded.</div>
</div>
</section>
</body>
</html>

Related

How to copy the input text on button click?

I am looking to copy the text written in an input when the user click on a button. How can I do it ?
Here is my HTML structure :
<!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>2b2tyoung.tk</title>
<link rel="stylesheet" href="style.css">
<script src="main.js"></script>
</head>
<body>
<div class="container">
<div label>
Join server
</div>
<div class="copy-text">
<input type="text" class="text" value="2b2tyoung.tk">
<button>
<i class="fa fa-clone"></i>
</button>
</div>
</div>
</body>
</html>
Here I selected the fa-clone icon, added a listener on click, then I copied the value of the input.
document.querySelector(".fa-clone").addEventListener("click", () => {
let input = document.querySelector(".copy-text input");
navigator.clipboard.writeText(input.value);
console.log("copied "+input.value)
})
<div class="copy-text">
<input type="text" class="text" value="2b2tyoung.tk">
<button>
<i class="fa fa-clone">Clone</i>
</button>
</div>
<!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>2b2tyoung.tk</title>
<link rel="stylesheet" href="style.css" />
<script src="main.js"></script>
</head>
<body>
<div class="container">
<div label>Join server</div>
<div class="copy-text">
<input type="text" class="text" value="2b2tyoung.tk" />
<button onclick="copyInputValue()">
<i class="fa fa-clone"></i>
</button>
</div>
</div>
</body>
</html>
<script>
function copyInputValue() {
const ipt = document.querySelector("#app input");
ipt.select();
const copyed = document.execCommand("copy");
if (copyed) {
alert("copy success!");
} else {
alert("copy failed!");
}
}
</script>

Javascript Input value returns undefined (To do list program)

For the past day ive been banging my head to the wall i just cant get this to work
every time i try to create a to do list it returns undefined and i cant seem to detect what went wrong with the code
Im still in the learning process so please go easy
function addToList() {
var item = document.getElementById("candidate").Value;
var text = document.createTextNode(item);
var li = document.createElement("li");
li.appendChild(text);
document.getElementById("toDoList").appendChild(li);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/style.css" />
<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>Document</title>
</head>
<body>
<section>
<div class="container">
<div class="userToDoList">
<input id="candidate" class="userInput" type="text" placeholder="New List..." />
<button onclick="addToList()">Add</button>
</div>
<div class="addedLists">
<ul id="toDoList"></ul>
</div>
</div>
</section>
</body>
<script src="JS/Script.js"></script>
</html>
This must have been frustrating. You used a capital V for value.
.Value is an invalid property. You're looking for .value
function addToList() {
var item = document.getElementById("candidate").value;
var text = document.createTextNode(item);
var li = document.createElement("li");
li.appendChild(text);
document.getElementById("toDoList").appendChild(li);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/style.css" />
<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>Document</title>
</head>
<body>
<section>
<div class="container">
<div class="userToDoList">
<input id="candidate" class="userInput" type="text" placeholder="New List..." />
<button onclick="addToList()">Add</button>
</div>
<div class="addedLists">
<ul id="toDoList"></ul>
</div>
</div>
</section>
</body>
<script src="JS/Script.js"></script>
</html>

Button text change before appearing in the new html page

I have a problem: I am changing the text of a button depending on a click from the previous page, so I tried using JavaScript to update the innerHTML of the button in the new page using the onload() event for the body of the new page. But, it appears for the user when it changes its text. I just want it to appear directly without the change being noticeable to the user. Has anyone got the answer for this?
function myFunction(){
var x=document.getElementById("GymName");
x.innerHTML="hesham";
}
<!DOCTYPE html>
<html>
<head>
<link rel= 'stylesheet' href='css/bootstrap.css' />
<link rel= 'stylesheet' href='css/font-awesome.min.css' />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
</head>
<body onload="myFunction()" >
<button class="btn btn-danger" id="GymName">Omar</button>
<script src="js/jquery-2.1.4.min.js"> </script>
<script src="js/jquery.mobile-1.4.5.min.js"> </script>
<script src="js/bootstrap.min.js"> </script>
<script src="js/login.js"></script>
</body>
</html>
Start the button hidden with display: none, and only show it after the value is changed. Or, if you're looking for a smoother transition you could fade it in with jQuery.
function myFunction(){
var x = document.getElementById("GymName");
x.innerHTML = "hesham";
x.style.display = "inline";
}
#GymName {
display: none;
}
<body onload="myFunction()" >
<button class="btn btn-danger" id="GymName">Omar</button>
</body>
Make the function invoke immediately as it's defined:
(function () {
document.getElementById("GymName").innerHTML = 'hesham';
}());
As in:
<!DOCTYPE html>
<html>
<head>
<link rel= 'stylesheet' href='css/bootstrap.css' />
<link rel= 'stylesheet' href='css/font-awesome.min.css' />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<button class="btn btn-danger" id="GymName">Omar</button>
<script>
(function () { document.getElementById("GymName").innerHTML = 'hesham'; }());
</script>
<script src="js/jquery-2.1.4.min.js"> </script>
<script src="js/jquery.mobile-1.4.5.min.js"> </script>
<script src="js/bootstrap.min.js"> </script>
<script src="js/login.js"></script>
</body>
</html>

JQuery Mobile Duplicate Js / Js not work in other page

I have problem in implementing Javascript on Jquery mobile, everytime I back from a page, the javascript would be duplicated.
Here is the example code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JS duplicated page1</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<link rel="stylesheet" href="css/style-mobile.css">
<script src="js/tes.js"></script>
</head>
<body>
<div class="demo-wrapper" data-role="page" data-theme="a" id="page1">
<div class="header" data-role="header" style="position:fixed; background-color:#004165;">
<div id="div1">
<span class="right">Click me</span>
<div id="option"><span style="color:white;">A B C</span></div>
</div>
</div>
<div id="separator" style="height:100px;"></div>
Go to page2
</div>
</body>
and here is the another page:
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JS duplicated page2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<link rel="stylesheet" href="css/style-mobile.css">
</head>
<body>
<div class="demo-wrapper" data-role="page" data-theme="a" id="page2">
<div class="header" data-role="header" style="position:fixed; background-color:#004165;">
<div id="div1">
<span class="right">Click me</span>
<div id="option"><span style="color:white;">A B C</span></div>
</div>
</div>
<div id="separator" style="height:100px;"></div>
Go to page1
</div>
</body>
</html>
And here is the custom JS:
$( document ).on( "pageshow", function() {
$(".header #option").toggle('inactive');
$(".header #option").hide();
$(".right").click(function(){
$(".header #option").toggle('inactive');
$(".header #option").show();
});
});
Everytime I back from page 2, the toggle run 2 times when I clicked it.
If I initialize the JS only in page1, when navigate to page2, the js didn't work.
Please help ..
Page 2 does not have the script tag, so it was not being loaded. Just add it in.
<head>
<script src="js/tes.js"></script>
</head>
Demo is working for me.

Phonegap Jquery Mobile Saving Data to Phone

Im trying something simple below. I want to accept user input for their name click a button save it and when the app loads a second time it displays the name.
Where am I going wrong below?
Do i need to put this code block somewhere else?
<script type="text/javascript">
$(function(){
$('#saveButton').click(function() {
window.localStorage.setItem("name", $('#name').val());
});
$('#newpage').live('pageshow', function() {
var personName = window.localStorage.getItem("name");
if(personName.length>0){
$('#name').val(personName);
}
});
});
</script>
Full html file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.2.0.css" />
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript" src="jquery.mobile-1.2.0.js"></script>
<script type="text/javascript">
$(function(){
$('#saveButton').click(function() {
window.localStorage.setItem("name", $('#name').val());
});
$('#newpage').live('pageshow', function() {
var personName = window.localStorage.getItem("name");
if(personName.length>0){
$('#name').val(personName);
}
});
});
</script>
<title>Hello World</title>
</head>
<body>
<div id="home" data-role="page">
<div data-role="header">
<h1>
Home Page</h1>
</div>
<div data-role="content">
hello Phone Gap and JQuery Mobile! new page
</div>
<div data-role="footer" data-position="fixed">
<h4>
footer</h4>
</div>
</div>
<div id="newpage" data-role="page">
<div data-role="header">
<h1>
new Page</h1>
</div>
<div data-role="content">
<label for="name">what is your name?</label>
<input id="name" type="text" name="name" value="" />
<a id="saveButton" href="" data-role="button">Save</a>
</div>
<div data-role="footer" data-position="fixed">
<h4>
footer</h4>
</div>
</div>
<script type="text/javascript" src="cordova-2.1.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
Yes, you need to place the button click event hookup in the pageinit event - they even specify this in the docs
$(document).on("pageinit","#newpage",function(){
$('#saveButton').click(function() {
localStorage.setItem("name", $('#name').val());
});
});
$(document).on('pageshow','#newpage', function() {
var personName = localStorage.getItem("name");
if(personName.length>0){
$('#name').val(personName);
}
});
For iOS device testing: In case your changes do not reflect on your device, make sure to touch your files before you deploy. Phonegap's default project template already does this, but their command does not work for me. See my answer: https://stackoverflow.com/a/12707386/561545
Small correction! .val should be .html. Please see the below code.
$('#my_name').html(personName);
add:
div id="my_name"

Categories