My PHP/HTML/Javascript skills are 0 but I have managed to create a site using a default template which I have modified.
What I am trying to accomplish is to have the browser print out the Cookie Name and Value if it exists. This is for a lab exercise that I'm currently working on. The lab itself is not how you program but rather how you configure Cookie Persistence and as part of the lab I want the student to easily display the cookie on the webpage.
Previous examples have been with HTML/JavaScript and the following code:
<script language="javascript">
function showCookieLink() {
var ele = document.getElementById("CookieLink");
ele.style.display = "block";
}
</script>
<BODY bgColor="#0066FF" onload="javascript:if (document.cookie) showCookieLink()">
<tr>
<td colspan="2" align="center" vAlign="top">
<font face=Arial>
<div id="CookieLink" style="display: none;"><b><font color=#0000f0>Display Cookie</b></div>
</font>
</td>
</tr>
This previous example have been brilliant. It will print out the clickable link "Display Cookie" (if a cookie exists) and when clicked it will pop up a new smaller window with the Cookie Name and Value.
For some reason this does not work anymore. I have tried several different browsers but they all act the same. JavaScript is enabled on the user.
I have been trying different types of preformatted-codes to fix this but none work (or I just suck at programming/scripting).
Can you guys please help me with this? Perhaps you can print out an example code that I can copy/paste into my current php code?
Thanks in advance!
According to this post, document.cookies will only work in a web server, not in just html that is served up from the file system. Does your url look like http://localhost or file:///your/file/here.html? It should look like the http:// one.
You also have some issues with your code. you dont close the second font tag, <script> should either be in a <head> or <body> tag, your <body> tag shouldn't be capitalized. Look here for a basic template.
Related
Its as simple as it gets, i want to change the text within <td> to be whatever the user enters in the prompt, i have tried many solutions. Such as putting the script element below body. Here is the java script code however it doesnt work although i assume everything is as it should.
var yourname = prompt("Enter your name");
document.getElementById("name").innerHTML = yourname;
Here is the HTML
<html><head>Cant figure this out</head>
<body>
<table>
<tr>
<td>Name</td>
</tr>
<tr>
<td id = "Name"></td>
</tr>
</table>
</body>
</html>```
I see a couple of problems with the code:
The html doesn't have a script-tag to use the javascript. Without that it won't load. To avoid these kind of problems please make the smallest code that have the problem and use copy-paste to get the exact code in questions.
Name != name. The case of the id differs between the html and the javascript.
You have additional characters last in the html: ```
I'm not a frontend developer and don't know if this will solve your current problem. But those issues should be handled either way.
in your HTML you gave the an id of "Name", yet in the javascript script you are searching for an element with id "name". The id is case sensitive, so you would have to search for "Name", not "name".
Hello stackoverflow Community,
I am working on a Survey which uses Text-To-Speech components. Usually they look like this:
<img src="picture.jpg" border="1" input onclick="responsiveVoice.speak('spoken_Text_here', 'Deutsch Female');" class="button1"> Text_behind_Button?
Now, I have a Database with all the Elements which will be "spoken" (or: to be used in the TTS script) and insert them in my survey software with
$key = 'A1';
$tts = dbGet($key);
So far so good. Now I would like to take the first element of the array $tts und put it in the TTS script.
<img src="picture.jpg" border="1" input onclick="responsiveVoice.speak('<?php $tts[0] ?>', 'Deutsch Female');" class="button1"> Text_behind_Button?
As a result I would like, that when you click on the button, the script takes the string from the Database and inserts it the TTS code. This way above obviously doesn't work. So I guess that I have to change the array in a string which can be read. Unfortunatly, I dont have the knoledge how to do that.
Ideas, hints and criticism (more or less) are welcome!
Best wishes
I'm working on a shopping list web app in Eclipse using Java, Thymeleaf, Spring, HTML and some CSS. I used HTML to code a checkbox list into the app so when I am done with a certain list I can click the checkbox and it puts a line through the text. However, when I refresh the page the checkbox doesn't stay checked. I'd like to be able to keep the box checked with a page refresh. I've tried various different bits of code from other Stack Overflow questions like coding Javascript into the HTML page, but nothing seems to work so far. Here's my HTML code:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="layouts/basic">
<link rel="stylesheet" th:href="#{/templates.css/main.css}" />
<head>
<title>Getting Started: Serving Web Content</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 15px;
}
.strikethrough:checked+.strikeThis {
text-decoration: line-through
}
</style>
</head>
<body layout:fragment="content">
<div class="row">
<h1>Shopping Lists</h1>
<!-- a simple button for later to add shopping lists -->
<a href="/" th:href="#{|/ListsofLists/add|}"><input type="button"
value="Add list" /></a>
<table>
<thead>
<tr>
<th>Name</th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody class="list">
<tr th:each="list : ${lists}">
<td><input type="checkbox" name="check" class="strikethrough"
value="1" /> <label for="check" class="strikeThis"
th:text="${list.name}"> Name </label></td>
<!-- <td th:text="${list.name}"></td> -->
<td>Show</td>
<td><form method="POST">
<input type="hidden" name="listId" th:value="${list.id}" />
<button type="submit">Delete</button>
</form></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I will try to answer as many questions as possible in order to figure out this question. Apologies if it's something rather simple, I am new to coding and still learning.
You need to save your checkbox state to local storage. So the browser can check the boolean value true or false of your checkbox when it loaded / refresh.
Here's the tutorial for storing checkbox state on local storage :
https://www.sitepoint.com/quick-tip-persist-checkbox-checked-state-after-page-reload/
You could use local storage to store user's checkbox selection and on page refresh you can retrieve the checkbox selection from local storage and set the checkbox selection.
Simple examples of using local storage is:
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
You can view more details about local storage on w3schools here(http://www.w3schools.com/html/html5_webstorage.asp)
Relevant to your case you can use jQuery and local storage using this guide(https://www.sitepoint.com/quick-tip-persist-checkbox-checked-state-after-page-reload/) to remember user's selection when a checkbox is clicked and retrieve them when page refreshes.
You need to identify a way to store that the checkbox has been selected. Typically solutions involve localstorage/cookies, sessions, or through a database.
When the box is checked, store it somewhere. Similarly, if it's unchecked you need to store that preference as well. And then with each page load, you need to do a check to see if there is a saved preference or you should just go to the default.
There are benefits to each storage option. Local storage & cookies are very easy to implement. But they're located on the client's machine, thus they're volatile. If it's important information, don't rely solely on this method. Session Storage (php or HTML5) will last for the duration of the browser session. This is helpful if you don't need the data to persist as a permanent selection. If you need it to be permanent, you need to save things out to a database.
There are many ways to do this.
One of the more popular methods is to use JavaScript cookies. In this method you would set a cookie like checkbox=true and grab that value on page refresh.
Another method is to set a location hash parameter in JavaScript, likewise reading this parameter on page load.
Lastly, you could also use HTML5 LocalStorage.
These are all the client-side methods for doing this. You can always do this on server-side using a HTML parsing script written in PHP or your language of choice.
As I mentioned on another SO question recently, running a page refresh clears out all of the values set before in both JavaScript and HTML forms. Everything goes. For future people who read this, please do not use page refresh in JavaScript code. It makes many people very angry, and causes them to pull out their hair uncontrollably.
I am an admin on an online roleplaying game, and we recently made the transition from some sort of Frankencode to javascript. While I have the basics down, there is a problem I have encountered that I am not sure how to fix.
We have macros on the game, where you can move multiple rooms by typing the direction with a space, a semi-colon, and another space between directions. I've created an atlas that has a long list of macros to help the players of the game move around faster and more efficiently. My main problem is, everything worked with the Frankencode, but Javascript is not recognizing the iframe in my new code.
I would really like an alternative to iframes where I don't have to rely on an outside website for this script, but my journey into that hopeful line of thought just led to a bunch of bright red, angry errors and the command breaking. I substituted the iframe for a contentedtable and the game just was not having it!
Below is my code. Keep in mind that everything works except the iframe.
Thanks in advance! :)
var macaroni = "<center><img src=http://i188.photobucket.com/albums/z46/roseblossomsnapdragon/items/atlas.jpg><BR><image src= http://i188.photobucket.com/albums/z46/roseblossomsnapdragon/amazingatlas-1.jpg~original><BR/> <b><font color=blue><u><b>IF ANY OF THESE ARE BROKEN, INFORM VICTORIA.</font></u></b></b><BR> <table border=0> <tr> <td Valign=top bgcolor=white> <IFRAME name=inlineframe src=http://karchanhelp.webs.com/other%20stuff/otherotherstuff/macaroni.htm width=550 height=400 marginwidth=0 marginheight=0 frameborder=0 scrolling=auto></IFRAME></td> <td Valign=top bgcolor=white><form method=post action=> <textarea name=comments cols=80 rows=21> Copy and paste here to build longer macros. </textarea> </form></td> </tr> </table><P> </center>";
var macaroons = "<center><img src=http://i188.photobucket.com/albums/z46/roseblossomsnapdragon/items/atlas.jpg><BR><image src= http://i188.photobucket.com/albums/z46/roseblossomsnapdragon/amazingatlas-1.jpg~original><BR/> <b><font color=blue><u><b>IF ANY OF THESE ARE BROKEN, INFORM VICTORIA.</font></u></b></b><BR> <table border=0> <tr> <td Valign=top bgcolor=white> <IFRAME name=inlineframe src=http://karchanhelp.webs.com/other%20stuff/otherotherstuff/macaroni.htm width=550 height=400 marginwidth=0 marginheight=0 frameborder=0 scrolling=auto></IFRAME></td> <td Valign=top bgcolor=white><form method=post action=> <textarea name=comments cols=80 rows=21> Copy and paste here to build longer macros. </textarea> </form></td> </tr> </table><P> </center>";
function command(person, totalcommand) {
if (person.isAttribute("macaroons"))
{
person.personal(macaroons);
person.sendMessage("%SNAME begin%VERB2 studying an atlas out of nowhere.<BR>");
return;
}
person.personal(macaroni);
person.sendMessage("%SNAME begin%VERB2 studying an atlas out of nowhere.<BR>");
return;
}
The alternative to iframes is AJAX(Asynchronos Javascript and XML) which lets you load pages and data from a server and you can handle the results for that and insert the response back into your page.
The best pages for learning about Javascript are from the Mozilla Developer Network and this link especially will help you learn more about ajax.
However there are libraries you can download, such as jQuery that help simplify a lot of tasks including loading and storing html and more.
If you need to store a website you can do the following:
Include jQuery in the HEAD:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Create a div(or other container for storing) with any id you want(should be unique):
<div id="loadingArea"></div>
Include a script at either the end of the page or end of the head to ensure that jQuery has loaded
<script>
$(document).ready( //Will run the following function when the html document is ready
function() {
var url = "http://karchanhelp.webs.com/other%20stuff/otherotherstuff/macaroni.htm"; //Load the page you want.
var portion = "body >" //select the portion of the page you need to eliminate duplicate html, head, and body tags
//This is a jQuery selector similar to css meaning select all children (>) of body
//Here we tell jQuery to select the element with id(#) loadingArea and load the
//portion of the url.
$('#loadingArea').load(url+" "+portion);
}
); //End of ready call
</script>
I have a real quick question. I want to set the DOCTYPE for an HTML Page but I need to do it using Server Side Javascript. Every answer I see on this site says "I don't see why you want to do it" but never answers the question (That I could find... please point me in the direction of a post if I am wrong).
The reason it needs to be done is because this is technically being sent as an HTML email. I am using ExactTarget and they won't allow me to type anything above the starting < HTML > tag. If I try to establish the DOCTYPE after it, it gets simply removed.
Now I DO have access to server side javascript before the email renders. I need to set this DOCTYPE because I am trying to set < td > tags to "display:block" and this will not work with the default DOCTYPE. So basically I need to write some script AFTER the opening < html > tag that will set the doctype for the page (email).
I wish to use the following DOCTYPE but if this is unwise feel free to advise:
<!DOCTYPE html >
Also here is the CSS not working with the current Doctype:
#media screen and (max-width: 660px) {
td {display:block !important;}
}
Here is the HTML:
<table bgcolor="#0033CC" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Top Content</td>
</tr>
<tr>
<td>Bottom Content</td>
</tr>
</table>
When I say server side Javascript here is my syntax:
<script type="text/javascript" runat="server">
*** MY SCRIPT ***
</script>
If ExactTarget won't let you output anything prior to the starting <html> tag, then you can't do this. The doctype has to come before that.