|
JavaScript - Pull Variable From Cookie Filename
I'm working on an internal website at work and employees have a cookie created when they login to the customer support tool. The filename is cookie:username@domain.com/ and I'd like to use javascript to pull a variable for their username to plug into a URL for a unique link when they're viewing one of our intranet pages.
I'm a Javascript newbie so any help is appreciated. @domain.com/ will always be the same but I don't know how to pull the unique username from the filename of the cookie. I don't need to actually read the cookie. Thanks! Similar TutorialsI've avoided cookies for 12 years. I made my first cookie today: Code: <p><a href="projects.html" onclick="document.cookie='whichPic=8'">Set Cookie</a></p> I have an external javascript sheet with an array of images w/text and the following code: Code: var current = 0;
function update() {
var pic = slides[current];
document.getElementById('proj_title').innerHTML = pic.title;
document.getElementById('proj_image').src = "images/slides/" + pic.image;
document.getElementById('proj_location').innerHTML = "<span>Location:</span> " + pic.location;
document.getElementById('proj_operation').innerHTML = "<span>Commercial Operation:</span> " + pic.commercial_operation;
document.getElementById('counter').innerHTML = (current + 1) + " of " + slides.length;
if(pic.link) {
document.getElementById('proj_link').style.display = "block";
document.getElementById('proj_href').href = pic.link;
} else {
document.getElementById('proj_link').style.display = "none";
}
}
When the user clicks the link, it should open the page to the slideshow and it should start on slide[8]. I think what I need to do is pass the value of the cookie to the variable "current", but I don't know how to do that. Also, I only need the cookie to last long enough for the new page to load (about 20 seconds), but all of the cookie scripts I've found set expiration in days. Any guidance would be appreciated. Hi everyone, I am using a jQuery cookie script to set the cookie of some elements on my website. One of the problems is that I need the cookie to not expire after one day, I need it to expire after a while (I'm going to start off with a year). Here's my script, the red part is what I've been editing. Code: /**
* Cookie plugin
*
* Copyright (c) 2006 Klaus Hartl (stilbuero.de)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
/**
* Create a cookie with the given name and value and other optional parameters.
*
* @example $.cookie('the_cookie', 'the_value');
* @desc Set the value of a cookie.
* @example $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secu true });
* @desc Create a cookie with all available options.
* @example $.cookie('the_cookie', 'the_value');
* @desc Create a session cookie.
* @example $.cookie('the_cookie', null);
* @desc Delete a cookie by passing null as value. Keep in mind that you have to use the same path and domain
* used when the cookie was set.
*
* @param String name The name of the cookie.
* @param String value The value of the cookie.
* @param Object options An object literal containing key/value pairs to provide optional cookie attributes.
* @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object.
* If a negative value is specified (e.g. a date in the past), the cookie will be deleted.
* If set to null or omitted, the cookie will be a session cookie and will not be retained
* when the the browser exits.
* @option String path The value of the path atribute of the cookie (default: path of page that created the cookie).
* @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie).
* @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will
* require a secure protocol (like HTTPS).
* @type undefined
*
* @name $.cookie
* @cat Plugins/Cookie
* @author Klaus Hartl/klaus.hartl@stilbuero.de
*/
/**
* Get the value of a cookie with the given name.
*
* @example $.cookie('the_cookie');
* @desc Get the value of a cookie.
*
* @param String name The name of the cookie.
* @return The value of the cookie.
* @type String
*
* @name $.cookie
* @cat Plugins/Cookie
* @author Klaus Hartl/klaus.hartl@stilbuero.de
*/
jQuery.cookie = function(name, value, options) {
if (typeof value != 'undefined') { // name and value given, set cookie
options = options || {};
if (value === null) {
value = '';
options.expires = -1;
}
var expires = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000 * 365));
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
}
// CAUTION: Needed to parenthesize options.path and options.domain
// in the following expressions, otherwise they evaluate to undefined
// in the packed version for some reason...
var path = options.path ? '; path=' + (options.path) : '';
var domain = options.domain ? '; domain=' + (options.domain) : '';
var secure = options.secure ? '; secure' : '';
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
} else { // only name given, get cookie
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
};
I'm trying to figure out a way to pass the filename before submission... I think I have to make an onChange command on the file field, but not sure how... This is what I have done so far: Code: <script type="text/javascript">
function theimage(){
var imgURL = document.getElementById('myfile').value;
ste.execCommand("insertimage", imgURL);
}
</script>
<input name="myfile" type="file" size="30" onchange="theimage();">
I'm trying to pass the value to theimage as sson the filename changes, but I'm doing something wrong... Any help is apreciated... Hello. I am new to the forums (I just started my Javascript journey last week), and was hoping to get help with something. I am currently developing a page which allows access to music on a server. This music is being streamed, but users are also able to download this music (assuming they have the license to do so). All of the music uploaded is of the .mp3 format, however they have no filetype extensions, and were not named using any particular naming convention. Because of this, I was hoping to change the filename (when a downloaded is initiated) to variables I have stored based on the current song. I am currently simply opening a new page, in Chrome is looks like this: Code: chrome.tabs.create({ "url": song.url })
Hit presents the user with a prompt to save the file, however, its default name is a random alphanumeric string with no extension, as per their file name on my server. Is there an easy way to do this without renaming all the music server side? I do have the variables song.title and song.artist setup! All help is appreciated! Edit: Since this page is only for Chrome users, I listed the code I am using. I understand window.open and was originally using this. It functions the same, and if I need to revert back to using is instead, I shall. Hi all, I have a webform that creates a word document as it's ouput (yes I know it only works on IE). Code:
function createWordDoc(){
Doctxt = "some text here"
var w=new ActiveXObject("Word.Application");
w.Visible=true;
w.Documents.Add();
w.Selection.Font.Name="Times New Roman";
w.Selection.ParagraphFormat.Alignment = 1;
w.Selection.TypeText(Doctxt);
w.Documents.Save();
}
My issue is with saving the file. At the moment, in the above code, it opens the save dialogue box, and populates the filename field with the first line of text in the document. What I want to be able to do is populate the filename field with a variable filename created by the function. Anyone know how to do this? I've tried the snippet below, which works with the dynamic filename, but it autosaves the file to "My Documents" folder without prompting. I need to be able to allow the location to be changed. Code:
var FileName = "Myfile.doc"
w.ActiveDocument.SaveAs(FileName);
Any ideas? Hello all, I have in my application input type file for uploading files. How can i do javascript validation to check if filename has special characters in it?? Thanks Is there a way to pull a text off a certain div on a page, and put it into a javascript string? I'm certain that the field has a particular name and id that I can use, if need be.
I am developing a web application based on a Java servlet. The servlet outputs html and javascript codes and receives some result from a thread, which works behind the servlet. Thus, html and javascript codes dynamically varies. While result equals null (a thread is not completed), it shows "Currently processing," and refreshes Code: <div id="load"> - </div> every second automatically. After receiving some results, it should stop automatic refreshing and show "Done." I wrote source codes described below. It shows "Done" after getting some results, but does not stop refreshing. However, when I manually refresh the page (Ctrl-R), the script is loaded and reloading is stopped. How can I pull javascript codes automatically? Code: <head>
<script type=\"text/javascript\">
var auto_refresh = setInterval(
function start()
{
$('#load').load('./Page' + ' #load');
}, 1000);
</script>
</head>
<div id="load">
if (result == null) {
// the variable result is received from a behind thread every second.
// while a thread is processed
<p>Currently processing. <p>
} else {
// a thread is completed
// try to stop reloading
<script type=\"text/javascript\">
clearInterval(auto_refresh);
</script>
<p>Done. <p>
}
</div>
So I have been stuck for a couple days now on this problem. I am trying to create a form to edit existing data in my database. I have 2 drop down boxes( category then item) they do not work correctly. I am using php to populate the drop down boxes but there is nothing dynamic about doing this. I think I need to totally rewrite the page using java script or Ajax but I don't know what parts. So I want the user to select a category from a drop down list populated by database then have it populate the item list(so I think both of these need to be java script in case they change the category it will re populate the item list). Then I just want the selection of the item to pull the information to my form so they can update it and save the update(which I am pretty sure I can save the update as a php function but need to populate the item editable information in java script). I am really looking for help on how to setup the page with java script to make database queries and use the results to update parts of the page. In case you confused here is my flow: page loads -User selects catagory query database for item list (on change event it think) -User selects item Item information is pulled and displayed from database(cost, serial number, quantity) (another on change event) -User is able to edit information and save updated results(run an update.php...) Here is a quick rundown of my code: ----I want this query to select the item based on the selected category (itemcat) <? $result = mysql_query("SELECT itemnum, itemname FROM item where itemcat = 'Item1' ", $con); //yes this is hard coded right now mysql_close($con); ?> ----end of head start of body---- ---This category list is hard coded since the categories will almost never change--- <td>Select Item</td> <td width="142"><select name="itemcatsearch" size="1"> <option value="1" selected="selected">Item1</option> <option value="2">Item2</option> <option value="3">Item3</option> <option value="4" >Item4</option> <option value="5">Item5</option> <option value="6">Item6</option> <option value="6">Item7</option> </select></td> <td width="268"> <!-- Dynamic item list -- this is just the result of the query run at the top and placed into a second drop down box> <select name="itemcat" size="1"> <? while($row = mysql_fetch_array($result)){ ?> <option value="<? echo $row['itemnum']?>" > <? echo $row['itemname']?> </option> <? } ?> I know its ugly sorry I am a noob. Any help or direction would be greatly appreciated. Hello, I am trying to use select options to get birthdate and calculate the age. I got the birthday with "birthDay = document.form1.selDate;" However i'm lost on the birthMonth and birthYear. I've looked at lots of examples. The birthMonth probably needs to be converted to integer, or use 1 thru 12 rather than Jan thru Dec. But birthYear i'd think would come back as a valid number. Is anyone familiar with this? Thanks. Code: <html>
<head>
<title>Main</title>
<script language="javascript">
<!--
function Age()
{
var birthDay;
var birthMonth;
var birthYear;
var userAge;
var currentDay = new Date();
var dayNow = currentDay.getDate();
var monthNow = (currentDay.getMonth());
var yearNow = (currentDay.getFullYear());
birthDay = document.form1.selDate;
// Don't know how to get birthmonth????
// birthMonth = (parseInt(document.form1.selMonth.value)-1);
birthYear = document.form1.selYear;
// alert("birthyear " + birthYear); ( gives "birthYear [object HTMLSelectElement]")
if((monthNow > birthMonth)||(monthNow == birthMonth & dayNow >= birthDay))
{ userAge = birthYear; }
else { userAge=birthYear+1;}
alert("As of today, " + currentDay +' \n'+", you a " + (yearNow - userAge) + " years old");
}
//-->
</script>
</head>
<body>
<form name="form1" id="startOfForm">
<table><tbody>
<tr>
<td class="question"><label for="birthdate">Enter Birthdate</label></td>
<td>
<select name=selMonth>
<option value=0 selected>Month</option> <option selected value="Jan">Jan</option>
<option selected value="Feb">Feb</option> <option selected value="Mar">Mar</option>
<option selected value="Apr">Apr</option> <option selected value="May">May</option>
<option selected value="Jun">Jun</option> <option selected value="Jul">Jul</option>
<option selected value="Aug">Aug</option> <option selected value="Sept">Sept</option>
<option selected value="Oct">Oct</option> <option selected value="Nov">Nov</option>
<option selected value="Dec">Dec</option>
</select>
<select name=selDate>
<option value=0 selected>Date</option> <option selected value="1">1</option>
<option selected value="2">2</option> <option selected value="3">3</option>
<option selected value="4">4</option> <option selected value="5">5</option>
<option selected value="6">6</option> <option selected value="7">7</option>
<option selected value="8">8</option> <option selected value="9">9</option>
</select>
<select name=selYear>
<option value=0 selected>Year</option> <option value="2001">2001</option>
<option value="2000">2000</option> <option value="1999">1999</option>
<option value="1998">1998</option> <option value="1997">1997</option>
<option value="1996">1996</option> <option value="1995">1995</option>
</select>
</td>
</tr>
<tr>
<td>
<input name="cmd" type=button value="Age"
onclick="Age()" style="width:150px; height:30px;">
</td>
</tr>
</tbody></table>
</form>
</body>
</html>
I have an function that shoud be activated when the pull down menu in triggerd, the if functions is corresponding to the same menu overig_eenh[] PHP Code: function overig_tot_abs(selectVeld, nr) { // Prijs totaal if (document.getElementsByName('overig_eenh[]')[nr].value == 'totaal') { document.getElementsByName('overig_totaal[]')[nr].value = (document.getElementsByName('overig_prijs[]')[nr].value).toFixed( 2 ) } // Prijs kg if (document.getElementsByName('overig_eenh[]')[nr].value == 'kg') { document.getElementsByName('overig_totaal[]')[nr].value = (document.getElementsByName('overig_prijs[]')[nr].value * (document.getElementsByName('materiaal_tot_gew[]')[nr].value + document.getElementsByName('plaat_tot_gew[]')[nr].value)).toFixed( 2 ) } // Prijs verf opp. if (document.getElementsByName('overig_eenh[]')[nr].value == 'verf_opp') { document.getElementsByName('overig_totaal[]')[nr].value = (document.getElementsByName('overig_prijs[]')[nr].value * (document.getElementsByName('materiaal_tot_verf_opp[]')[nr].value + document.getElementsByName('plaat_tot_verf_opp[]')[nr].value)).toFixed( 2 ) } } Form (in loop): PHP Code: <tr> <td><select name="overig_omsch[]" > <option></option> <option value=Engineering>Engineering</option> <option value=Inkoop bev.middelen>Inkoop bev.middelen</option> <option value=Inkoop snijwerk>Inkoop snijwerk</option> <option value=Spuiten>Spuiten</option> <option value=Stralen>Stralen</option> <option value=Transport>Transport</option> </select> </td> <td><select name="overig_eenh[]" onChange="overig_tot_abs(this, 0)" > <option></option> <option value="totaal">Totaal</option> <option value="kg">Per Kg</option> <option value="verf_opp">Per 1m2</option> </td> <td><input type="text" name="overig_prijs[]" size="10" value="" /></td> <td><input type="text" name="overig_totaal[]" size="10" style="text-align:right;background-color: #f1f1f1" value="" readonly="readonly" /></td> <td><input type="text" name="overig_opmerkingen[]" size="75" value="" /></td> </tr> Hey all, Objective: - when you select other the pull down menu is replaced by the text field. Currently: - Gotten it to the level of when you select the other the text field appears. Question: - HOw can I modify the code so when I select the other menu option from the pull down menu and it replaced by the text field? Quote: <script type="text/javascript"> function togglefield(val) { var o = document.getElementById('other'); (val == 'Other')? o.style.display = 'block' : o.style.display = 'none'; } </script> and the form: <form action="" method="post"> <select name="sel" id="sel" onChange="togglefield(this.value);"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="Other">Other</option> </select> <input type="text" name="other" id="other" style="display: none;"> </form> Hi all I have relatively easy task I need to accomplish but as per usual I have very little idea of how to do it. I have done a google search to no avail. Basically I need to: 1. Pull a value from inside a div Code: <div id="number">(invoice #1017)</span> 2. Populate a form input field with that value. Does this make sense? If not let me know if you need any more info. Thanks Hi, I'm new to these forums so if anything is out of the ordinary let me know for next time or so I can correct it - please. I am also not very good with javascript but I am trying to learn the whole concept. Anyways, I am supposed to create pull down menus when I open this page: Code: <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
New Perspectives on JavaScript, 2nd Edition
Tutorial 4
Tutorial Case
The 221B Blog
Author:
Date:
Filename: holmes.htm
Supporting files: menus.js, logo.jpg, sh.jpg, shblog.css
-->
<title>The 221B Blog</title>
<link href="shblog.css" rel="stylesheet" type="text/css" />
<script type="text/javascirpt" src="menus.js"></script>
</head>
<body>
<div id="page">
<form id="searchForm" action="">
<div id="logo">
<img src="logo.jpg" alt="The 221B Blog" />
<input id="searchTxt" type="text" size="20" />
<label for="searchTxt">Search</label>
</div>
<div id="menu1" class="menu">
<a href="#">The Adventures of Sherlock Holmes</a>
</div>
<div id="menu1List" class="menuList">
<ul>
<li><a href="#">A Scandal in Bohemia</a></li>
<li><a href="#">The Red-headed League</a></li>
<li><a href="#">A Case of Identity</a></li>
<li><a href="#">The Boscombe Valley Mystery</a></li>
<li><a href="#">The Five Orange Pips</a></li>
<li><a href="#">The Man with the Twisted Lip</a></li>
<li><a href="#">The Blue Carbuncle</a></li>
<li><a href="#">The Speckled Band</a></li>
<li><a href="#">The Engineer's Thumb</a></li>
<li><a href="#">The Noble Bachelor</a></li>
<li><a href="#">The Beryl Coronet</a></li>
<li><a href="#">The Copper Beeches</a></li>
</ul>
</div>
<div id="menu2" class="menu">
<a href="#">The Memoirs of Sherlock Holmes</a>
</div>
<div id="menu2List" class="menuList">
<ul>
<li><a href="#">Silver Blaze</a></li>
<li><a href="#">The Yellow Face</a></li>
<li><a href="#">The Stock-broker's Clerk</a></li>
<li><a href="#">The "Gloria Scott"</a></li>
<li><a href="#">The Musgrave Ritual</a></li>
<li><a href="#">The Reigate Puzzle</a></li>
<li><a href="#">The Crooked Man</a></li>
<li><a href="#">The Resident Patient</a></li>
<li><a href="#">The Greek Interpreter</a></li>
<li><a href="#">The Naval Treaty</a></li>
<li><a href="#">The Final Problem</a></li>
</ul>
</div>
<div id="menu3" class="menu">
<a href="#">The Return of Sherlock Holmes</a>
</div>
<div id="menu3List" class="menuList">
<ul>
<li><a href="#">The Empty House</a></li>
<li><a href="#">The Norwood Builder</a></li>
<li><a href="#">The Dancing Men</a></li>
<li><a href="#">The Solitary Cyclist</a></li>
<li><a href="#">The Priory School</a></li>
<li><a href="#">Black Peter</a></li>
<li><a href="#">Charles Augustus Milverton</a></li>
<li><a href="#">The Six Napoleons</a></li>
<li><a href="#">The Three Students</a></li>
<li><a href="#">The Golden Pince-Nez</a></li>
<li><a href="#">The Missing Three-Quarter</a></li>
<li><a href="#">The Abbey Grange</a></li>
<li><a href="#">The Second Stain</a></li>
</ul>
</div>
<div id="menu4" class="menu">
<a href="#">The Case Book of Sherlock Holmes</a>
</div>
<div id="menu4List" class="menuList">
<ul>
<li><a href="#">The Illustrious Client</a></li>
<li><a href="#">The Blanched Soldier</a></li>
<li><a href="#">The Mazarin Stone</a></li>
<li><a href="#">The Three Gables</a></li>
<li><a href="#">The Sussex Vampire</a></li>
<li><a href="#">The Three Garridebs</a></li>
<li><a href="#">Thor Bridge</a></li>
<li><a href="#">The Creeping Man</a></li>
<li><a href="#">The Lion's Mane</a></li>
<li><a href="#">The Veiled Lodger</a></li>
<li><a href="#">Shoscombe Old Place</a></li>
<li><a href="#">The Retired Colourman</a></li>
</ul>
</div>
<div id="menu5" class="menu">
<a href="#">His Last Bow</a>
</div>
<div id="menu5List" class="menuList">
<ul>
<li><a href="#">Wisteria Lodge</a></li>
<li><a href="#">The Cardboard Box</a></li>
<li><a href="#">The Red Circle</a></li>
<li><a href="#">The Bruce-Partington Plans</a></li>
<li><a href="#">The Dying Detective</a></li>
<li><a href="#">The Disappearance of Lady Frances Carfax</a></li>
<li><a href="#">The Devil's Foot</a></li>
<li><a href="#">His Last Bow</a></li>
</ul>
</div>
<div id="menu6" class="menu">
<a href="#">The Novels</a>
</div>
<div id="menu6List" class="menuList">
<ul>
<li><a href="#">A Study in Scarlet</a></li>
<li><a href="#">The Sign of the Four</a></li>
<li><a href="#">The Hound of the Baskervilles</a></li>
<li><a href="#">The Valley of Fear</a></li>
</ul>
</div>
<ul id="linkList">
<li><a href="#">Home</a></li>
<li class="newGroup"><a href="#">Essays</a></li>
<li><a href="#">Fan Fiction</a></li>
<li><a href="#">Art</a></li>
<li class="newGroup"><a href="#">Discussion Forum</a></li>
<li class="newGroup"><a href="#">Holmes on the Web</a></li>
<li><a href="#">The 221B Museum</a></li>
<li><a href="#">Jeremy Brett Page</a></li>
<li><a href="#">Basil Rathbone Page</a></li>
<li><a href="#">The Baker Street Irregulars</a></li>
<li class="newGroup"><a href="#">Holmes Radio Podcast</a></li>
<li><a href="#">Holmes Audiobooks</a></li>
<li class="newGroup"><a href="#">About Arthur Conan Doyle</a></li>
<li><a href="#">Victorian England</a></li>
<li><a href="#">Strand Magazine</a></li>
<li><a href="#">The Holmes Atlas</a></li>
<li class="newGroup"><a href="#">Other Fictional Detectives</a></li>
<li class="newGroup"><a href="#">About the WebMaster</a></li>
<li><a href="#">Issues Archive</a></li>
</ul>
<div id="main">
<img src="sh.jpg" alt="" style="float: right; margin: 0px 0px 5px 5px" />
<p id="firstp">
The most famous of fictional detectives, Sherlock Holmes
first appeared in print in 1887, in stories written by the Scottish author
and physician, Sir Arthur Conan Doyle. Holmes is famous for his use
of deductive reasoning to solve difficult and complex cases. Almost
all Holmes stories are told in the first-person narration of
Dr. John Watson, Holmes' closest friend and confidant.</p>
<p>Doyle wrote four novels and 56 short stories in the Sherlock Holmes
canon. The first Holmes tale was the novel, <i>A Study in Scarlet</i>,
which chronicled the meeting of Holmes and Watson and covered their
first case together. As Doyle wrote additional tales, the Sherlock Holmes
stories grew in popularity, becoming a regular feature of <i>The
Strand Magazine</i>. Desiring to explore other literary pursuits, Doyle
grew tired of the detective and killed off Holmes in the short story
<i>The Final Problem</i>. However, public acclaim and a desire for more
Holmes stories eventually persuaded Doyle to resurrect the popular
detective, bringing him back in <i>The Adventure of the Empty House</i>.</p>
<p>Doyle's final Holmes story, <i>His Last Bow</i>, appeared in 1914, but
that did not end the public's fascination with Holmes and Watson. Basil
Rathbone brought the character to the silver screen in 14 movies
loosely based on Doyle's original stories. In more recent years,
Jeremy Brett played Holmes to great critical acclaim over four seasons of
the BBC series, <i>The Adventures of Sherlock Holmes</i>. In all, Holmes
has been played by over 70 actors appearing in over 200 films.</p>
<p>To enjoy online versions of the Sherlock Holmes short stories and novels,
select entries from the menu at the top of this page.</p>
</div>
</form>
</div>
</body>
</html>
Here is my javascript file: Code: /*
New Perspectives on JavaScript, 2nd Edition
Tutorial 4
Tutorial Case
Author:
Date:
Filename: menus.js
-------------------------------------------------------------
Function List:
init()
Initializes the contents of the holmes.htm Web page, setting
the display property of the pull-down menus and the initial
values of the global variables
moveMenu()
Moves the active menu from one pull-down menu to another
changeMenu()
Change the active menu displayed in the document
closeOldMenu()
Closes the active menu
rollDown()
Applies a roll-down effect the opening of the active menu
-------------------------------------------------------------
Global Variable List:
activeMenu
An object variable pointing to the currently active and open menu
timeID
A variable containing the id of a timed command using the setInterval method
clipHgt
The current height of the active menu as it is being rolled down
-------------------------------------------------------------
*/
window.onload = init;
var activeMenu = null;
var clipHgt = 0;
var timeID;
function init() {
var menus = new Array();
var allElems = document.getElementsByTagName("*");
for (var i = 0; i < allElems.length; i++) {
if (allElems[i].className == "menu") menus.push(allElems[i]);
}
for (var i = 0; i < menus.length; i++) {
menus[i].onclick = changeMenu;
menus[i].onmouseover = moveMenu;
}
document.getElementById("logo").onclick = closeOldMenu;
document.getElementById("linkList").onclick = closeOldMenu;
document.getElementById("main").onclick = closeOldMenu;
}
function moveMenu() {
// this function moves the pull-down menu from one title to another
if (activeMenu) {
closeOldMenu();
menuID = this.id + "List";
activeMenu = document.getElementById(menuID);
activeMenu.style.clip = "rect(0px, 150px, 0px, 0px)";
activeMenu.style.display = "block";
timeID = setInterval("rollDown()", 1);
}
}
function changeMenu() {
// this function changes the pull-down menu displayed in the document
closeOldMenu();
menuID = this.id + "List";
activeMenu = document.getElementById(menuID);
activeMenu.style.clip = "rect(0px, 150px, 0px, 0px)";
activeMenu.style.display = "block";
timeID = setInterval("rollDown()", 1);
}
function closeOldMenu() {
if (activeMenu) {
clearInterval(timeID);
activeMenu.style.display = "none";
activeMenu = null;
}
}
function rollDown() {
clipHgt = clipHgt + 10;
if (clipHgt < 400) {
activeMenu.style.clip = "rect(0px, 150px," + clipHgt + "px, 0px)";
} else {
clearInterval(timeID);
clipHgt = 0;
}
}
The book's tutorial instructed me to copy down every thing I did yet it doesn't work at all! I've tried on Safari, IE, and Firefox. Can someone tell me what I'm doing wrong? EDIT: Here is the CSS file. Code:
/*
New Perspectives on JavaScript, 2nd Edition
Tutorial 4
Tutorial Case
Author:
Date:
Filename: shblog.css
This file contains styles used in the holmes.htm file.
*/
* {padding: 0px; margin: 0px; line-height: 1.2}
body {background-color: white;
font-family: 'Trebuchet MS', Arial, Verdana, sans-serif;
font-size: 12px}
#page {position: absolute; top: 0px; left: 10px; width: 850px}
a {text-decoration: none; color: black}
p {margin: 15px 0px}
ul {list-style-type: none}
#logo {position: absolute: top: 0px; left: 0px;
width: 100%; height: 108px; background-color: white; z-index: 3}
#logo img {float: left}
#logo label {float: right; margin-top: 15px; margin-right: 10px}
#logo input {float: right; margin-top: 15px; background-color: ivory}
.menu {position:absolute; top: 110px; width: 140px; height: 35px; z-index: 3;
border: 1px solid black; color: black; background-color: rgb(212, 212, 212);
text-align: center}
.menu a {display: block; width: 140px; height: 35px; color: black}
.menu a:hover {background-color: rgb(151, 151, 151); color: white}
#menu1, #menu1List {left: 0px}
#menu2, #menu2List {left: 141px}
#menu3, #menu3List {left: 282px}
#menu4, #menu4List {left: 423px}
#menu5, #menu5List {left: 564px}
#menu6, #menu6List {left: 705px}
.menuList {position: absolute; top: 146px; width: 140px; z-index: 2;
background-color: ivory; border: 1px solid black; display: none}
.menuList li {margin: 5px}
.menuList a {display: block; width: 132px}
.menuList a:hover {background-color: rgb(151, 151, 151); color: white}
#linkList {position: absolute; top: 160px; left: 5px; width: 175px;
border-right: 1px solid black}
#linkList li {line-height: 1.5}
#linkList .newGroup {margin-top: 15px}
#linkList a:hover {text-decoration: underline overline;
color: red; background-color: ivory}
#main {position: absolute; top: 160px; left: 190px; z-index: 1}
#firstp {margin-top: 0px}
#firstp:first-line {font-variant: small-caps; font-weight: bold}
#firstp:first-letter {float: left; font-size: 400%; font-family: 'Times New Roman', serif;
line-height: 0.8; margin: 0px 5px 0px 0px}
Hello all. I have created a snippet of javascript code that will do the following: 1. read the window URL 2. depending on the window URL, a word will be placed into a hidden form field. 3. Person submits form...etc., etc. Here is what I have. Let's say that I have a single landing page with a simple form on it. I would like to reference the referred URL by pulling a part of the window URL into a hidden field of the form. Let's say the three URLs a http://www.whatever.com/index.htm?id=ref1 http://www.whatever.com/index.htm?id=ref2 http://www.whatever.com/index.htm?id=ref3 I have created a javascript that takes the exact URL and check for equality. If the URL is equal, it will place the corresponding id into the hidden form field. See my code below. Code: <script type="text/javascript">
var lead_source = window.location.href
{
if (lead_source == "http://www.whatever.com/index.htm?id=ref1")
{
document.writeln("<input type=hidden name='lead_source' id='lead_source' value='ref1'>");
}
else if (lead_source == "http://www.whatever.com/index.htm?id=ref2")
{
document.writeln("<input type=hidden name='lead_source' id='lead_source' value='ref2'>");
}
else if (lead_source == "http://www.whatever.com/index.htm?id=ref3")
{
document.writeln("<input type=hidden name='lead_source' id='lead_source' value='ref3'>");
}
}
</script>
What I am looking to do is modify the code to only look at the "id" variable, not the entire URL. That way, if I add any additional items to the URL I will not have to change the code. I guess I am looking for an extra step of parsing the URL...maybe. Thanks for your help Hi I am trying to load html stream directly into webbrowser in delphi. The html contains java script. It loads xml and xsl files and display the xml content in the web browser. I got an error, says access denied for the command xmlDoc.load(fname); If I save the html into a file, test.html, and double click it, it is fine, no problem. The code is actually copied from w3schools.com. the html code as followed: <html> <head> <script> function loadXMLDoc(fname){var xmlDoc; if (window.ActiveXObject) { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); } else { alert('Your browser cannot handle this script'); } xmlDoc.async=false; xmlDoc.load(fname); return(xmlDoc); } function displayResult() { xml=loadXMLDoc("catalog.xml"); xsl=loadXMLDoc("catalog.xsl"); if (window.ActiveXObject) { ex=xml.transformNode(xsl); document.getElementById("example").innerHTML=ex; } } </script> </head> <body id="example" onLoad="displayResult()"> </body> </html> The delphi code is procedure TForm1.WBLoadHTML(WebBrowser: TWebBrowser; HTMLCode: string) ; var v: OleVariant; HTMLDocument: IHTMLDocument2; begin memo1.Lines.LoadFromFile('d:\test\htmltxtold.html'); HTMLCode := memo1.Text; WebBrowser1.Navigate('about:blank') ; HTMLDocument := WebBrowser.Document as IHTMLDocument2; v := VarArrayCreate([0, 0], varVariant); v[0] := HTMLCode; HTMLDocument.Write(PSafeArray(TVarData(v).VArray)); HTMLDocument.Close; end; Thanks a lot Hi, I have a programing problem that have been around for ages. I have search on google using several expressions and words and after hours of digging i'm still unable to do it. I would like to get a value from a HTML page hosted remotely with an inconstant value. Then define this value and name as a javascript variable and apply or show in my page. Thanks for all the help P.S. Is there any way to make a domain lookup in javascript? I mean a user enters a domain and the script converts to an ip and shows to the user. If not thanks, probably it can only be done in the server side... Hi im new to working with cookies so would appreaciate a little help I using the w3c tuturial as a template so heres a link so you can see what im trying to do http://www.w3schools.com/JS/js_cookies.asp Code: function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function checkCookie(username)
{
var username=getCookie("username");
if (username!=null && username!="")
{
document.getElementById("feedback").innerHTML = " last time you scored " + username);
setCookie("username",username,365);
}
else
{
if (username=null || username="")
{
setCookie("username",username,365);
}
}
}
I kept the variable names the same so you can follow and I don't confuse myself and make things more complected while im trying to debug it. Some extra information. checkcookie is been given a variable it is just a simple number. Im making a questionnaire which is done but I wont the top of the page to tell the user how much they scored last or tell them this is their first time trying it. The variable being passed to check cookie is their score . at the moment when I click the submit button nothing happens. Where it should trigger a score calculating function which should then call the checkcookie function while passing the score it calculated. I would love if someone can point me in the right direction or help me correct it or atleast explain to me whats going wrong. Thanks and a lots of appreciation if anyone can spare the time Hi everyone! Got a quick (cookie) question. I looked on the internet for some cookie scripts (redirect ones), but unfortunately haven't been too lucky with these. What I want to do is the following: When the cookie is not found it goes to my main page, for example: "www.anynamehere.com" On the main page I can select where I want to go - 'Contacts', 'News', 'Forums' and so on. The main page has a drop down list with these options, each option has it's own link. When I click on 'continue' and go to the specific link (ex. www.anynamehere.com/contacts.html) it should remember my selection, so next time I log into www.anynamehere.com it's automatically will take me to contacts.html. I will not see the main page anymore. Now, if from the contacts page I select 'News' and go to www.anynamehere.com/news.html it has to remember that link as well. So if I close my browser and then reopen it, it should take me to www.anyname.com/news.html. I hope that makes sense. If anyone can give me any pointers I would greatly appreciate it. Maybe there is a script like that available online, I just wasn't lucky enough to find one. Thank you in advance! |
|||||||