I'm working with a piece of code I'm designing in my free time, which is a bit unorthodox so bear with me here. The page is set to run a variety of pages based on which "" tag the html is being read from. I was just looking for a way to condense a number of pages into a single one, and this seemed like it might be interesting to mess with. If you guys know of better ways to do that, any information would be appreciated.
So far I'd managed to get everything working until I hit a part where I was trying to obtain a form value, assign it to a global variable, and then use a script to print the global variable in the text. In this case, it is asking the user's name, the goal being to reproduce the name in various places throughout the website for a more user-friendly feel. I figure understanding this will be useful in the future. Eventually I'll want to figure out how to create a database of usernames and passwords and all that good stuff, but for now, I'm just looking for a simple fix. I'm probably missing something elementary. Here's the code:
<head>
<style>
body {
margin: 0 auto;
background-image: URL('http://fc04.deviantart.net/fs9/i/2006/033/2/c/Matrix_code_by_phi_AU.jpg');
background-attachment: fixed;
background-repeat: repeat-y;
}
</style>
<meta charset="utf-8">
<title>MasterCode</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
var name = "";
//user is "finished typing," collect input
function doneTyping() {
name = document.getElementById('nameid').value;
closeElement('welcomepage');
closeElement('namepage');
showElement('homepage');
}
function closeElement(myelement) {
document.getElementById(myelement).style.display = "none";
}
function showElement(myelement) {
document.getElementById(myelement).style.display = 'block';
}
function enterWebsite() {
closeElement('namepage');
closeElement('homepage');
$("#dialog").dialog({
autoOpen: false
}, {
title: "Change"
}, {
resizable: false
});
$("#opener").click(function () {
$("#dialog").dialog("open");
closeElement('welcomepage');
showElement('namepage');
})
}
function writeName() {
document.write(name);
}
</script>
</head>
<body onload="enterWebsite()">
<div id="welcomepage">
<button id="opener" style='background: url("http://4.bp.blogspot.com/-fDgJmT5rzlM/Tq8SpW3ZcbI/AAAAAAAAA1I/l02iiclqKkA/s1600/tracking%2Bclub%2Bmeet%2B%2526%2BMisty%2BAlgonquin%2Bshots%2B106.jpg") no-repeat top left; color: #FFFFFF; height: 685px; width: 1350px; font: 75px helvetica, cursive'>Enter MasterCode</button>
</div>
<div id="namepage">
<form id='name_input'>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<center>
<input style="background-image:URL('https://waypointprod.blob.core.windows.net/blogfilestore/storage/blogs/headlines/2013/12/5/image.jpg');background-repeat:no-repeat;background-position: ; border: 50px solid black ; height:50px; width:350px; color: #FFFFFF; font: 45px helvetica, cursive;"
id='nameid' type="text" value="Enter your name.">
<br/>
<button id='submit_name' onclick='doneTyping(); return false;'>I Accept The Risks</button>
</form>
</div>
<div id="homepage">
<font size="25" color="white">
Welcome, <script> writeName(); </script>
</font>
</div>
</body>
</html>
Thoughts?
(Edit: Resolved using localStorage as suggested by tewathia)
Not sure if you're using any sort of RESTful API or even nodejs.
If you are, something I do to prevent storing this data in cookie or in sessionStorage is that I utilize server-side to store. Then you wouldn't need to add as much logic on client-side. This user data could be
{
"name": "Don Jon",
"favorite_color": "blue"
}
you could even display different parts of the page in blue to be super user friendly
Related
I am attending an entry level HTML/CSS/JS course and our first assignment is to make a simple website about ourselves. We need to have a horizontal menu that when clicked displays certain information. For example, clicking "description" should display a short paragraph describing ourselves. From what I've researched it seems that my answer lies with using JQuery but I don't believe he expects us to know that nor utilize it this early. Is there another option that I may not be seeing?
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>Jeremy Ortiz</title>
<div id="header">
<h1>A Little About Jeremy Ortiz</h1>
</div>
</head>
<body>
<img src="hwpic.jpg" alt="Me">
<div id="content">
<div id="nav">
<h2>Navigation</h2>
<ul>
<li><a class="selected" href="">Description</a></li>
<li>A form</li>
<li>Course List</li>
<li>Table</li>
<li>Contact Information</li>
</ul>
</div>
</body>
</html>
#header {
padding: 10px;
background-color: #6CF;
color: white;
text-align: center;
}
img {
position: absolute;
right: 7px;
bottom: 148px;
z-index: -1;
}
#content {
padding: 10px;
}
#nav {
width: 180px;
float: left;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
My answer will assume your goal is to accomplish this task using basic Javascript instead of changing pages by navigating the user using the <a> elements. I understand that there are more efficient methods of performing this but I chose to present the information in a hopefully simple easily readable manner.
The way I would accomplish this is by changing your <a> elements:
<a class="selected" href="">Description</a>
To button elements and add the 'onclick' property with the function to call when the button is clicked:
<button onclick="displayDescription()">Click Me</button>
Now we need to create the elements that will be displayed upon clicking the button. For this we create some <div> other container that we can hide until the corresponding button is clicked.
<div id="description" style="display: none;">
Displayed when the description button is clicked.
</div>
Note** For every button we will need to create a <div style="display: none;"> to hide the information until its corresponding button is clicked.
Now we can create our Javascript function:
function displayDescription() {
var x = document.getElementById('description');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
Note once again that in this method each Javascript function will map to a button in the same way each hidden will map to the same button.
If you need more help I recommend checking out w3schools and specifically for this problem here is a link to what you need to accomplish with your assignment.
http://www.w3schools.com/howto/howto_js_toggle_hide_show.asp
I hope this was helpful as I just wrote this during one of my college classes I will probably formalize my answer more at a later time today.
I am learning Javascript by my own using CodeAcademy.
I would like to know how I could maintain the user interaction. Attached is my To DO list. It works well when the site is up, but if I refresh the browser, the user interaction is lost and the whole code starts over without the data that the user input. I would like to show what the interaction the user left.
Will I need another thing I need to learn, such as database or another program?
$(document).ready(function () {
$('#button').click(function () {
var toAdd = $('input[name=checkListItem]').val();
$('.list').append('<div class="item">' + toAdd + '</div>');
});
$(document).on('click', '.item', function () {
if ($(this).parent().attr('class') == 'list') {
$(this).detach().appendTo('.done');
} else {
$(this).detach().appendTo('.list');
}
});
});
h2 {
font-family:arial;
}
form {
display: inline-block;
}
#button {
display: inline-block;
height:20px;
width:70px;
background-color:#cc0000;
font-family:arial;
font-weight:bold;
color:#ffffff;
border-radius: 5px;
text-align:center;
margin-top:2px;
}
.list {
font-family:garamond;
color:#cc0000;
}
.done {
font-family:garamond;
color:#cc0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>To Do</h2>
<form name="checkListForm">
<input type="text" name="checkListItem" />
</form>
<div id="button">Add!</div>
<br/>
<div class="list"></div>
<h2>Done:</h2>
<div class="done"></div>
query and javaScript that I need to learn to do that? Like database?
You could use localStorage.
Each time you append to list, update localStorage with its HTML contents:
localStorage.setItem('list', JSON.stringify($('.list').html()));
When you load the program, fill list with what's in localStorage:
$('.list').html(JSON.parse(localStorage.getItem('list')));
See this Fiddle.
Each time you reload it, it remembers what you last added.
Note that this works on a single computer only. You'll need a server database solution if you want to access your to-do list on different computers.
I have made a custom prompt box for Javascript so I don't have to use the stock ones, however I cannot figure out how to return the value from the directly from the cPrompt() function. I want to be able to use it like a normal prompt and be able to do stuff like var name = cPrompt("Whats your name") however to close the custom prompt I must use an event to trigger a function called ok() when a button is clicked. This inhibits me from returning the value directly from the cPrompt function. Can anyone figure out how I can do this? Here is my code:
HTML:
<html>
<head>
<title>Custom Prompt</title>
</head>
<body>
<p>content</p>
<button onclick="cPrompt('Message goes here')">Click me</button>
<div id="overlay"></div>
<div id="pBox">
<div id="cPromptOut" onclick="ok()"></div>
<input type="text" id="cPromptIn"/>
</div>
<link rel='stylesheet' href='customPrompt.css'/>
<script src='customPrompt.js'></script>
</body>
</html>
CSS:
#overlay{
width:100%;
height:100%;
position:fixed;
background-color:grey;
opacity:0.5;
z-index: 10;
display: none;
left:0;
top:0;
}
#pBox{
width:50%;
height:30%;
position:fixed;
background-color:red;
left:25%;
top:20%;
z-index: 11;
display:none;
}
#cPromptOut{
width:100%;
height:50%;
background-color: green;
z-index: 12;
text-align: center;
font-size: 1.5em
}
#cPromptIn{
width:100%;
height:50%;
border:1px solid black;
text-align: center;
font-size: 1.5em
}
JS:
var overlay = document.getElementById("overlay")
var pBox = document.getElementById("pBox")
var cPromptOut = document.getElementById("cPromptOut")
var In = document.getElementById("cPromptIn").value
function cPrompt(msg){
overlay.style.display = "block";
pBox.style.display = "block";
cPromptOut.innerHTML = msg;
}
function ok(){
overlay.style.display = "none";
pBox.style.display = "none";
}
console.log(cPrompt("enter you name"))
So right now I'm not able to collect the value in the box. Can anyone figure out how I can do this? Remember I want to be able to call it just like a prompt without having to use any other calls like console.log(cPrompt("say something")). I might be trying to over-think this or maybe its impossible, any ideas are welcome.
EDIT - ok so it won't be as simple as console.log(cPrompt('message')), but there is a kinda way to go about doing what you want. See this fiddle adapted from toby Ho's trampolines. I can't make it work in chrome for some reason, but firefox does the trick. the cool part is in main() (it will have to be inside a run(main()) call
function main(){
log('start listening');
log(yield prompt('hello'));//the code "seems" to halt here.
log('end script');
}
Again you're asking something quite hard so it won't be as easy as you would like it to be, but here it is. Also, it would've been cool to tell us what you had tried so far.
BEFORE EDIT :
At first glance I would say it is impossible. if your cPrompt() function holds the interpreter so it can return the user's input, I think th page will freeze. have you tried something like this?
//This will probably freeze the page
function cPrompt(_msg){
...//init the prompt
while( input == null){}//your prompt sets input in an event
return input;
}
The usual way to go about it is to pass a closure like this
function whenInput(_input){console.log(_input);}
cPrompt('message', whenInput);
Now, I'm thinking that there may be a way with the new generators in js 1.7.
So, what have you tried?
First off, hello! I'm new to this website so I apologize for any errors that I make posting-wise.
I am in a web technology class where we are learning JavaScript. In a previous class we learned HTML5 and CSS. Our current assignment is to make a webpage that will either display 1 of 3 images or no images when the user enters the corresponding word in the prompt window.
I was wondering if there was a way to account for user-entered typos? For example, I have in the code "Spn" but was wondering if there was a way to easily make it so that if a user were to enter "Son" by mistake, they would still be shown the image.
Is there a way to do this without having to add a separate if statement?
Below is the code I have so far, which includes my little "test" to see if I could do this. I thought it had worked when I only had two items (ex: "Spn, "spn"), but when I added a third it stopped working, and now it isn't working again. I may have very well been mistaken that there was ever a success, though.
Oh, also, we are only allowed to use JavaScript, HTML, and CSS. So if you have a solution that is jquery (I have no idea what that is), then thank-you, but I'm afraid I can't use it.
Please let me know if there is any other information that you need and I will gladly supply it to you. Thank-you very much for your help, I very much appreciate it!
-Carly
JavaScript Code (file name is switch.js):
var temp = "None";
function choose()
{
temp = prompt("Spn, DW, SH, or None?");
if (temp == "Spn","spn")
{
document.getElementById("picture").src="first.jpg";
document.getElementById("sub").innerHTML="Supernatural";
document.getElementById("picture").style.visibility="visible";
};
if (temp == "DW","dw","Dw")
{
document.getElementById("picture").src="second.jpg";
document.getElementById("sub").innerHTML="Doctor Who";
document.getElementById("picture").style.visibility="visible";
};
if (temp == "SH","sh","Sh")
{
document.getElementById("picture").src="third.jpg";
document.getElementById("sub").innerHTML="Sherlock";
document.getElementById("picture").style.visibility="visible";
};
if (temp == "None","none")
{
document.getElementById("picture").src="blank.jpg";
document.getElementById("sub").innerHTML="Click button to reveal image";
document.getElementById("picture").style.visibility="hidden";
};
}
HTML Code (file name is userchoice.html):
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="switch.js"></script>
<title>What is this not working I'm going to cry</title>
</head>
<body>
<h1>SuperWhoLock</h1>
<h2 id="sub">Click button to reveal image</h2>
<div id="picblock">
<img src="blank.jpg" id="picture">
</div>
<div id="buttons">
<button onclick="choose()">Choose Picture</button>
</div>
</body>
</html>
CSS code (the file name is style.css):
body
{ background-image:url('background.jpg');
}
h1
{ width: 25%;
text-align: center;
margin-left: auto;
margin-right: auto;
background: black;
color: white;
}
h2
{ width: 25%;
text-align: center;
margin-left: auto;
margin-right: auto;
background: white;
color: black;
}
#picblock
{ width: 25%;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#picture
{visibility:hidden;
}
#buttons
{ text-align: center;
margin-left: auto;
margin-right: auto;
}
Barring the foray into putting intelligence in the code, I will give a rather simplistic approach, detailed below:
Since you are the one who is deciding that "Son" should pull up the image ideally meant for "Spn", we should use a mapping that is created by you yourself. We can have something like this:
`
var spn = "Spn", dw ="DW",sh="SH";
//creating a custom mapping
var dict = {
"Son":spn,
"Sln":spn,
"Spn":spn,
"DW":dw,
"DE":dw,
"SH":sh
}
//Your if would look like:
temp = (dict && dict[temp])?dict[temp]:null;
if (temp && temp.toLower() == "spn")
`
2. For creating that dictionary, you will just have to consider the characters around the letter that you are typing.
Note: This approach assumes you have only these three things to compare. If you want a more generic solution that should work beyond Spn,DW,SH, None, please let me know.
The question might not be clear, so i will explain further.
I saw some page like wordpress new post tag, they have something like
[input]
x tag | x tag | x tag
or Facebook Notes when you post a image...
the when you input a tag and press enter, a new tag is insert in to element in the page...
I don't quite understand how can you parse that out and then submit to the form.
if anyone know please give me an idea.
Thanks
If I am getting it right, you are talking about sending AJAX-based post requests "under the hood" and get "dynamic reflections" back on the same page.
Well, if this is the case, there are actually more than just submitting data to the server.
Here is the big picture:
You need a javascript which is loaded in the page that has the form to submit.
Inside that script, you need to define the event which will trigger the AJAX-based post request. Basically you would love trigger such an event when the content in that particular field has been just changed (an onChange event, that is).
Then you can use script like the following:
$.ajax
({
type: 'POST',
cache: false,
async: false,
timeout: 10000,
url : '/path/to/your/serverside/function',
dataType : 'json',
data:
{
'tag' : //whatever you want to be used as the tag
},
success : function(message)
{
//this will be called when this post was successfully been carried out.
//you should update the view (the same page) here using some jQuery script.
//such as : $('#tag').html(message.tag);
},
error : function(message)
{
//this is for displaying error messages (perhaps due to networking problems?)
}
});
Since there are really a lot to write about. I suggest you post whatever you have finished up here so we can give it a check.
At least from my consideration, this scenario require the following knowledge to get everything right(though you can always choose to use less tech):
onChange event triggered
|
|
jQuery =====sending JSON formatted tag info ======> serverside function
|
|
decode JSON tag info
|
|
process(saving it into database?)
|
|
encode feedback info
|
jQuery callback function <===== JSON info==================
|
|
update the view(the same page)
.
.
.
.
.
aforementioned process is before form is submitted via normal POST/GET.
One way is to keep track of the tags you add in a hidden form field, but actually display using divs or spans or whatever UI you want. In the case of facebook, I'd imagine they're doing something somewhat similar, though I guess they could actually be adding form elements dynamically. Forgive the nasty code/css - just tossed it together. If you add tags and then hit submit, you'll see the querystring that all the values are there.
<!doctype html>
<html lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btnSuggest").click(function(){
var $tagSuggest = $("#tagSuggest");
if($tagSuggest.val() != "")
AddTag($tagSuggest.val());
});
$("#tagSuggest").keyup(function(e){
if(e.keyCode == 13 && $(this).val() != "")
AddTag($(this).val());
});
});
function AddTag(tag){
$("<div>").text(tag).appendTo("#tags").click(function(){
$(this).remove();
UpdateTags();
}).hover(function(){
$(this).addClass("over");
},function(){
$(this).removeClass("over");
});
UpdateTags();
}
function UpdateTags(){
var allTags = "";
$("#tags div").each(function(){
allTags += "," + $(this).text();
});
$("#hidTags").val(allTags.substring(1));
$("#tagSuggest").val("");
}
</script>
<style type="text/css">
.main
{
width: 400px;
padding: 10px;
margin: auto;
border: 1px solid black;
background-color: #e6e6e6;
height: 600px;
}
#tags div
{
padding: 3px;
border: 1px solid black;
background-color: #e6e6e6;
margin: 3px;
height: 15px;
width: auto;
float: left;
cursor: pointer;
}
#tags div.over
{
background-color: red;
}
</style>
</head>
<body>
<div class="main">
<form action="" method="get">
<input type="hidden" name="hidTags" id="hidTags">
<textarea name="Wallpost" style="width: 390px; height: 100px;"></textarea>
<br />
<input type="text" id="tagSuggest" style="width: 280px;" />
<input type="button" id="btnSuggest" value="Add Tag" style="float: right;"/>
<br />
<input type="Submit" name="cmdSubmit" value="Share" style="float: right;"/>
</form>
<div id="tags">
</div>
</div>
</body>
</html>