|
JavaScript - External .js File With Array Of Menu Links
Hi,
I have an external JS file with an array of menu links called (menu.js). The code is shown below: Code: <script>
var menuItem = new Array();
menuItem[0]="index.html";
menuItem[1]="welcome_home/index.html";
menuItem[2]="key_resources/index.html";
menuItem[3]="deployment_assistance/index.html";
menuItem[4]="benefits/index.html";
menuItem[5]="services/index.html";
menuItem[6]="counties/index.html";
menuItem[7]="transitional_help/index.html";
menuItem[8]="women_vets/index.html";
menuItem[9]="iowa_heroes/index.html";
menuItem[10]="http://www.iowava.org/vetcemetery/";
menuItem[11]="http://ivh.iowa.gov";
menuItem[12]="../forms/index.html";
menuItem[13]="https://va.iowa.gov/reselig/";
menuItem[14]="links2/index.html";
menuItem[15]="Whats_New/index.html";
menuItem[16]="contact_us/index.html";
function Page(which){
location.href = menuItem[which];
}
</script>
I have called the javascript in my websites main page (index.html), but it does not work. The html code is shown below: Code: <script type ="text/javascript" src="menu.js"></script> <a href="javascript:void(0);" onclick="Page(0);">Home</a> <a href="javascript:void(0);" onclick="Page(1);">Welcome Home</a> <a href="javascript:void(0);" onclick="Page(2);">Key Resources</a> The javascript for the array of menu links works when it is inserted directly within the html file, but when it remains external and is called in index.html it does not work. I am not sure why this is the case. Could anyone give some pointers? Thanks, -Mike Similar TutorialsOkay, I'll try to give as much detail on what I'm trying to do here and please correct me if this is not possible to do using javascript. Let's say you have 3 files: document.html = the page where all this is displayed menu.js = the script that will read the menufile.txt and parse it into a navigation menu menufile.txt = content of the menu that will be parsed The idea here is that when the website grows, I want a simple way of updating the menu for all the pages without going and doing it page by page. The content of menufile.txt will look like this: +Menu Item1 "Link1" -SubMenu Item1 "Link2" -SubMenu Item2 "Link3" +Menu Item2 "Link4" Each link corresponds to the item before it as you can see, and I'm using + to signify a main menu item while - signifies a submenu item. The logic I can see for doing this is reading the whole file into an array, then going through the array searching for + or - and breaking the line into pieces. Take the first line for example: +Menu Item1 "Link1" This is broken into 3 variables: + -> is the what tells me if it's a main menu item or a sub menu item Menu Item1 -> is the name i want put into a variable "Link1" -> This is the link variable for the page associated with the item, this could be left blank if there is no link available to the corresponding item. So to sum it up, I'm reading the file link by line, breaking it into 3 variables. But I am not that experienced with javascript and don't know how I can go about doing that or if it's even possible. Thank you in advance for taking the time to read this. If you need more clarification on anything I mentioned please let me know, I'll be glad to elaborate. I have a Java Script that displays a Daily Affirmation on a webpage from an array of 365 Affirmations within the same html webpage file. This makes the html file size way too large. So I would like for the java script to read the array from an external text file on the same website server. Please provide me the Code to insert within my script which will read the array from an external text file - and also the format that the array of 365 lines must be typed into the external text file. I am not a Javascript Programmer - and know nothing about Javascript, so please write your reply at my (lack of) knowledge Level. Thank you in advance! Here is the code I am using. <script language=javascript> <!-- Date.prototype.getDOY = function() {var onejan = new Date(this.getFullYear(),0,1); return Math.ceil((this - onejan) / 86400000);} var today = new Date(); var DOY = today.getDOY(); var HL=new Array() //Configure the following array to hold the 365 HLs for each day of the year HL[1]='HL 1 goes here' HL[2]='HL 2 goes here' HL[3]='HL 3 goes here' // Jump to Day 224 of the year for this example only HL[224]='I am surrounding myself with positive and supportive people. When I nurture relationships that give me energy and enjoyment, I mirror my beliefs that I deserve such gifts.' HL[225]='Today I affirm my own worth and value, and discover that the world agrees with me.' HL[226]='I am sowing seeds based on a healthy belief in my own self-worth. My life is flourishing with growing love, contentment, and exciting possibilities.' HL[227]='HL 227 goes here' HL[228]='HL 228 goes here' // Jump to last HL for Day 365 of year - for this example only HL[365]='HL 365 goes here' document.write(HL[DOY]) //--> </script> hello everyone im coding a website at the moment using aspx and i have came to a snag. im trying to make a dropdown list which is populated by an array call my chaletDetails.aspx page - each item in the array will be directed to this page. ive diffled abit, but the more i do the more im afraid of breaking something lol. if someone could maybe look at the code and show me how this could be achieved id appriciate it very much. The code i have for my dropdown list is as follows... this is in divResorts.js var resorts = new Array("Adelboden", "Auron", "Oppdal", "Las Lenas", "La Pierre St Martin", "Val Ceneis", "Les Menuires", "Champex-Lac", "Puy St Vincent"); function populateSelectList() { var mystring = document.getElementById('divResort').innerHTML mystring += "<h4>Our Resorts</h4><select name='resorts'>" mystring += "<option>Choose a Resort</option>" for (i = 0; i < resorts.length; i++) { mystring += "<option value='" + resorts[i] + "'>" mystring += resorts[i] + "</option>" } mystring += "</select>" mystring += "<h4>Our Chalets</h4>" document.getElementById('divResort').innerHTML = mystring } within the body i have this called as: <div id="divResort"> <script type="text/javascript">populateSelectList();</script> </div> I need help turning the following inline code: Code: <a href="http://www.bing.com/" name="bing" onclick="return !window.open(this.href)">Bing</a><br> <a href="http://www.lycos.com/" name="lycos" onclick="return !window.open(this.href)">Lycos</a><br> <a href="http://www.dogpile.com/" name="dogpile" onclick="return !window.open(this.href)">DogPile</a><br> into an external javascript function that will do the same thing (open all links in a new window individually if javascript is enabled, without destroying links in html for if javascript is not enabled). Any smarties out there have any good suggestions? Disclaimer 1: I am not a programmer, just a curious designer, so please take that into consideration in your replies. Disclaimer 2: Despite all advices against it, I couldn't find a better solution to my website than using iFrame Disclaimer 3: Before asking for help, I researched *several* forums and although I found people discussing similar issues, I was not successful at adapting their solutions to my needs. Gentlemen, I need your help implementing a method to intercept and redirect external links to a dynamic iframe. By "dynamic" iframe I mean an iframe whose SRC would be filled up in accordance to the external URL being intercepted and that it would resize its HEIGHT accordingly in order to avoid scroll bars. The function for resizing the iframe id="child" is already correctly implemented like so: Code: <script language="JavaScript">
<!--
function calcHeight()
{
//find the height of the internal page
var the_height=
document.getElementById('child').contentWindow.
document.body.scrollHeight;
//change the height of the iframe
document.getElementById('child').height=
the_height;
}
//-->
</script>
and the call Code: <iframe src="/main/index.php" width="100%" onLoad="calcHeight();" height="1" marginheight="0" marginwidth="0" scrolling="no" frameborder="0" id="child"> This what I have going on: - index.html => contains some content and the iframe id="child" - childpage1[...N].php => several PHP pages which I do not want to show up outside of the parent "index.html". These pages use clean URLs from CMS such as "http://mydomain.com/pages/this-is-a-child-page/" Users might click on external links from search engines, for instance, about an specific page such as "http://mydomain.com/pages/this-is-child-page-7/" which obviously would load the page "orphaned", outside "index.html" and that is exactly what I am trying to avoid. Based on what I have researched so far, the best way (please, correct me if I'm wrong) to deal with this would be implementing a test condition on the header of the PHP child pages to verify if they are on "top" or not (if they are already inside the "parent" object "index.html"). If FALSE, the page would load normally, if TRUE, a variable should be created to store the URL of the requested page and passed through the link to the page "index.html" which would be immediately called. In "index.html" there would be a script to collect the variable sent through the link (something like "http://mydomain.com/?var=http://mydomain.com/pages/this-is-child-page-7/") and break the text string apart, store a portion of PATHNAME (in this case, "/pages/this-is-child-page-7/) and use it to replace the current SRC of iframe id="child". Probably, there would have to be another testing function in this script to compare the variable passed from the "orphaned" PHP page against the current value of SRC in iframe id="child" to determine if any action is actually required. This "replacement" function would be called onLoad and if tested true would run and refresh the page with the proper value in the iframe SRC. All this should be accomplished while still making the iframe HEIGHT dynamically adjustable and show a "clean" URL in the browser, such as "http://mydomain.com". The potential issues I foresee is an infinite loop due to two onLoad queries (one for SRC, another for HEIGHT) in the parent and child objects, which might required a merge into a single script. As you can tell, I have an idea of what needs to be done but not a clue on how to get it done. Any help would be greatly appreciated. Thanks, Hey all, I'm fairly new to JavaScript. I learned PHP and now I'm creating a user registration and login system for an application I'm making and I decided I wanted to give JS a try. I'm trying to make a form validation function that will be called when I press the submit button on the form but I want to use an external js file to store all my custom functions. I have the OnClick event in the button with the call to my function inside of that. But where and how on the page to I reference my external file so that the button can call the function? Thanks guys! Hi, I'm new to JavaScript and I'm having a bit of trouble understanding something that seems relatively simple. When I make changes to CSS in JavaScript using '.style' I'm changing the attribute values of inline CSS. Can I use JavaScript to change the attribute values of rules in an external CSS file? I have no CSS in my html and would like to know if I can grab the values of attributes in an external CSS file using JavaScript. Thank you. Hi, I need some help with a bit of a challenge. I need to allow users to spesify a file stored on their hard drive, read the file and populate a table and eventually a database. I can probably upload the file using <input type='file'> but what then? How do I access the file after this, or is there a better way? Using XMLHTTP gives 'access denied.....' I can not use PHP as the site does not support PHP. For those who know the environment - it's a QuickBase application I need to upload to....... Thanks Nic Hi guys. I've made a html file with three lists to populate different pages of my site. Then i've called the html with SSI. let me show the code the HTML with the list's Code: <div id="list_box"> <ul class="list"> <li><a href="#">item01</a></li> <li><a href="#">item02</a></li> <li><a href="#">item03</a></li> <li><a href="#">item04</a></li> <li><a href="#">item05</a></li> </ul> </div> <div id="list_box"> <ul class="list"> <li><a href="#">item06</a></li> <li><a href="#">item07</a></li> <li><a href="#">item08</a></li> <li><a href="#">item09</a></li> <li><a href="#">item10</a></li> </ul> </div> <div id="list_box"> <ul class="list"> <li><a href="#">item11</a></li> <li><a href="#">item12</a></li> <li><a href="#">item13</a></li> <li><a href="#">item14</a></li> <li><a href="#">item15</a></li> </ul> </div> the HTML with the list loaded Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#list_box {
height:100%;
width: 100%;
padding-top: 15px;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 20px;
background-color: #cccccc;
overflow: hidden;
}
ul.list li {
list-style-type: none;
text-align: left;
text-decoration: none;
}
.list a:link,
.list a:visited {
font-family: "Courier New", Courier, monospace;
font-size: 12px;
line-height: 15px;
color: #036;
text-decoration: none;
text-align: left;
font-weight: bold;
font-style: normal;
}
.list a:hover{
font-family: "Courier New", Courier, monospace;
font-size: 12px;
line-height: 15px;
color: #ffffff;
text-decoration: none;
text-align: left;
font-weight: bold;
font-style: normal;
}
-->
</style>
</head>
<body>
<div id="list_box">
<!--#include file="list.html" -->
</div>
</body>
</html>
the zip with the sample I've made load_external.zip I wanted to ask how can I make an item from the list's to have a different css in the html with the loaded list's. because in each page one of the items (that are all buttons) will be up or should I say active. can someone tell me how can I do this please. Maybe with javascript? thanks in advance Hello everybody, I am currently working on displaying KML-values of ElementTags within my KML File. I already integrated the KML file as an overlay to my Google Map. But how am I able to parse the GGeoXml-object or how am I able to parse external ("http://www.myexample.org/polygons.kml" instead of just "polygons.kml") XML-files? At the moment my code for loading the geoxml file looks like this: Code: function initialize(kmlFile) {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setUIToDefault();
map.setCenter(new GLatLng(53.763325,-2.579041), 9);
// ==== Create a KML Overlay ====
if(!(kmlFile==null)){
//check if it doesnt start with "http://"
if(!(kmlFile.startsWith("http://"))){
kmlFile = "http://" + kmlFile;
$('kmllink').value = kmlFile;
}
var kml = new GGeoXml(kmlFile);
//add Overlay to the googlemaps window
map.addOverlay(kml);
//$('subject').value = "SUBJECT";
//$('content').value = "CONTENT";
kml.gotoDefaultViewport(map);
// Store center and zoom as properties of the object kml
var centerKML= kml.getDefaultCenter();
var zoomKML = map.getZoom();
map.panTo(centerKML);
map.setZoom(zoomKML);
}
}
}
And for parsing local XML-files this code works already: Code: function loadXML()
{
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
}
else // Internet Explorer 5/6
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET","test.kml",false);
xhttp.send("");
//xmlDoc=xhttp.responseXML;
xmlDoc = xhttp.responseXML;
var placemark=xmlDoc.getElementsByTagName("Placemark");
alert(placemark[0].getElementsByTagName("name")[0].childNodes[0].nodeValue);
ajaxLoader("http://www.zki.dlr.de/mod/ext/fireModis/yesterday_en.kml","Placemark");
}
My question: Is there any way to integrate parsing external xml files in any of these two functions? Best regards, TsEMaNN I have an issue with my javascript files loading (i.e. checking the source code of the page after having loaded yields working links to my external files and the JQuery loading for sure after running some test), but calling a function from my javascript file works in no way shape or form. For example, one test I was running was: From my .js file Code: $("p").click( function() { $(this).hide(); } )
This will work on a standalone page when I test it (not loading from external .js file), but not in the page I need to get my scripts running on. Code: <!-- Add-in device.js files are placed here --> <div id="deviceScript"></div> What I have been doing is clearing this out when I select a new (add-in) device and append a script tag with its .src file. I have some vague idea that unhooking an external js file might remove its code from memory. If not is there a way to do so? Functions in different script files have the same name - for example, I use start() to set up each device. It seems that the latest device start() overwrites the one in memory - but I am not sure if overwrite means delete last one or whether there is some horrendous build up of dross going on. Any clarification appreciated. relatively new coder here definitely new to js and I can't figure out how to get this script linked into an external file every time I try nothing shows up. Code: <html>
<head>
<script language="JavaScript1.1">
<!--
var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}
function slideshowlinks(){
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks[i]=slideshowlinks.arguments[i]
}
function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
}
//-->
</script>
<title></title>
</head>
<body>
<a href="javascript:gotoshow()"><img src="img1.jpg" name="slide" border=0 width=250 height=250></a>
<script>
<!--
//configure the paths of the images, plus corresponding target links
slideshowimages("img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg")
slideshowlinks("#","#","#","#","#")
//configure the speed of the slideshow, in miliseconds
var slideshowspeed=3000
var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()
//-->
</script>
</body>
</html>
obviously get rid of html tags and <script></script> tags save it as file.js and then <script type="text/javascript" src="file.js"> </script> do i need to break this up into 2 files or something I can't get it to work Hello Guys, I have a question here.. I have a scroller on my pages that basically reads a text file and displays.. The problem that I am having is it doesn't update until I reload the page(even though the .txt file updates about every 3 minutes).. I would like it to update when the file has been changed.. Here is my page. PHP Code: <link rel="stylesheet" href="../../css/li-scroller.css" type="text/css"> <script src="../../js/jquery.li-scroller.1.0.js" type="text/javascript"></script> <script type="text/javascript" src="../../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function(){ $("ul#ticker01").liScroll(); }); </script> <?php $file = file_get_contents ('playingnow.txt'); ?> <div class="scrollpos"> <ul id="ticker01"> <li><a href="#"><?php Echo $file;?></a></li> <!-- eccetera --> </ul> </div> What can I add to make it go out and reload just the div not the entire page? Please advise.. I'm trying to execute an php file (which is present on an other host) by javascript. I've got three files for this: The javascript that calls the main program (launch.htm): Quote: <html> <script type="text/javascript"> document.write(unescape("%3Cscript src='http://www.mysite.com/reservetest.js' type='text/javascript'%3E%3C/script%3E")); </script> </html> The main program: (reservetest.js) Quote: function goer() { var url = 'test.php'; var pars="x=4&y=3"; makeHttpRequest(url+"?"+pars, thanks); } function thanks(text) { document.write(text); //$("divname").innerHTML=text; } function $() { if (arguments.length == 1) return get$(arguments[0]); var elements = []; $c(arguments).each(function(el){ elements.push(get$(el)); }); return elements; function get$(el){ if (typeof el == 'string') el = document.getElementById(el); return el; } }; function makeHttpRequest(url, callback_function, return_xml) { var http_request, response, i; var activex_ids = [ 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP' ]; if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+... http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { http_request.overrideMimeType('text/xml'); } } else if (window.ActiveXObject) { // IE6 and older for (i = 0; i < activex_ids.length; i++) { try { http_request = new ActiveXObject(activex_ids[i]); } catch (e) {} } } if (!http_request) { alert('Unfortunately your browser doesnt support this feature.'); return false; } http_request.onreadystatechange = function() { if (http_request.readyState !== 4) { // not ready yet return; } if (http_request.status !== 200) { // ready, but not OK alert('There was a problem with the request.(Code: ' + http_request.status + ')'); return; } if (return_xml) { response = http_request.responseXML; } else { response = http_request.responseText; } // invoke the callback callback_function(response); }; http_request.open('GET', url, true); http_request.send(null); } goer(); And finally the test file (test.php): Quote: <html><body>just a test</body></html> It works fine when I use all three files on the same host. However when I use launch.htm on an other host (which is the idea behind it) it gives me 'There was a problem with the request (code 0)'. When I change the url variable within reservetest.js to a relative/absolute path it gives me a 'access denied' on http_request.open line. Main idea is to show the user (who puts the code from launch.htm) on his/her website the contents of my test.php file (which retrieves mysql data). I think it's a security issue with the http_request.open line. Is there a way to work around this? Or am I missing something here? I don't want to use an iframe to retrieve information from my other host. Hi I'm trying to call a external .js file that contains a function from a webpage, but haven't been able to discover how to reference the function. First, the function: Code: function biggestOfTwo(valueOne, valueTwo)
{
var big;
if(valueOne > valueTwo)
{
big = valueOne;
}
else
{
big = valueTwo;
}
return big;
}
... and the xhtml calling it... Code: <!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>
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<script src="compare.js" type="text/javascript" />
</head>
<body>
<script type = "text/javascript">
var dataInput1;
var dataInput2;
dataInput1 = prompt("Enter the first number to be compared");
dataInput2 = prompt("Enter the second number to be compared");
alert("The biggest value is " + biggestOfTwo(dataInput1, dataInput2));
</script>
</body>
</html>
According to the book Beginning JavaScript 4th Edn, this should work - why isn't it? Jenny I have this file: IPToned.js Code: // ==UserScript==
// @name IPToned
// @namespace http://users9.jabry.com/chatleague
// @description IPTorrents Filter Enhancements
// ==/UserScript==
alert("hello world");
I drag and drop it into Firefox (Ubuntu) and it opens it as if it were a txt file. I want it to make the alert so I can get to coding. Any suggestions? Hi, i have a question, is JavaScript can read an external file? i have an ear file, can it read external file without the external file compile together in the ear file? can we do so? Hey guys, I'm writing a script and I've encountered a problem.. I have a txt file with many words, each word in a different line. For example: the file words.txt contains: word1 word2 word3 word4 word5 I need to load the content of the file into a variable in my script. I prefer that all the words will be in the same variable with line breaks, but if you'll figure out a way to put it in an array, it's ok too. I really don't know how to do it, and I tried to google but didn't understand.. By the way, I don't want to change the txt file to js file, I need it to remain txt.. Can anybody help me with that? Thanks Alot, Ran Here is a .js file to hack ie6,but it doesn't work when i put it out of the .html file.It can woking only in the .html file. It's fine in the .html file. Below: Code: <html>
<head>
<script type="text/javascript">
sfHover =function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
</head>
<body>
......
......
</body>
</html>
It's not working if external .js file.below: Code: <script type="text/javascript" src="suckerfish.js"></script> note：I haven't added the <script type="text/javascript">...<script> code to the .js file. any help will be good. |
|||||||