|
JavaScript - Question About External .js Files.
I'm trying to program/modify a simple countdown timer in a .js file. I was able to get it to work when I just loaded the index.html file straight from my computer to my browser but it failed once uploaded.
Here was the code for my index.html file. Code: <script type="text/javascript" src="countDown2.js"></script> <body> <b id='itgoeshere'>timer should go here</b> <script language ="Javascript"> window.onload = cd() </script> </body> and here is my code for my .js file Code:
var days
var hours
var mins
var secs;
function cd() {
var today = new Date()
var eventDate = new Date(2012,0,28,19,19,70)
difference = eventDate.getTime() - today.getTime()
days = Math.floor(difference / (1000*60*60*24))
difference = difference - days * (1000*60*60*24)
hours = Math.floor(difference / (1000*60*60))
difference = difference - hours * (1000*60*60)
mins = Math.floor(difference / (1000*60))
difference = difference - mins * (1000*60)
secs = Math.floor(difference / (1000))
redo();
}
function dis(days,hours,mins,secs) {
var disp;
disp = days + ":" + hours + ":" + mins + ":" + secs;
return(disp);
}
function redo() {
secs--;
if(secs == -1) {
secs = 59;
mins--;
if (mins == -1) {
mins = 59;
hours--;
if (hours == -1){
hours = 23;
days--;}}
}
document.getElementById('itgoeshere').innerHTML = dis(days,hours,mins,secs);
if((days == 0) && (hours == 0) && (mins == 0) && (secs == 0)) {
window.alert("Chris is running."); // change timeout message as required
} else {
cd = setTimeout("redo()",1000);
}
}
function init() {
cd();
}
window.onload = init;
If I were to just cut and paste my .js code between my <script> it works but I was hopping to use it over again on multiple pages and having only one file to update. Also I'm very new at programming in general so if you see an obvious mistake not related to my question please let me know. Similar TutorialsHi everyone, I'm a newbie and this is probably really easy but it just won't work! I've tried looking at various online sources but they are all either too technical or don't seem to work. I'm obviously doing something wrong! The code is posted below, it's not very long so hopefully someone will be able to debug it! Thanks lots! Original page: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>variables</title> </head> <body> <script src="displaydate.js" type="text/javascript"></script> <br> </body> </html> External displaydate.js file: Code: function todaydate(){
var today_date= new Date()
var myyear=today_date.getYear()
var mymonth=today_date.getMonth()+1
var mytoday=today_date.getDate()
document.write(myyear+"/"+mymonth+"/"+mytoday)
}
Opening the original page in my browser displays nothing. Just a blank page. Any help you can give would be greatly appreciated! Geoff Hey guys. So right now I'm able to execute javascript code on my website without the use of <script> tags. Example: <body onload=alert("cool");></body> What I want to be able to do is insert an external javascript file located at another website using JavaScript code (not script tags). How can this be done? Thanks I have an external Javascript file that only works when I put: Code: <script type="text/javascript" src="external.js"></script> at the end of the HTML page. Does anyone know why it won't work in the head of the page? Thanks Hi I need to develop a simple keyword search in external html files(having traversing in directories ability). Is this possible? (in this case php can be used) Please guide me Thanks I have two pages one html page and one Javascript page index.html and script.js. I want to call the javascript page 3 times to display 3 images. How would I do this from my html page. script.js Code: <script language="JavaScript">
<!--
/*
Random Image Link Script
By Website Abstraction (http://www.wsabstract.com)
and Java-scripts.net (http://www.java-scripts.net)
*/
function random_imglink(){
var myimages=new Array()
//specify random images below. You can have as many as you wish
myimages[1]="http://flashmajic.com/Google/atomica/atomicasmallicon.jpg"
myimages[2]="http://flashmajic.com/Google/atomica/atomicasmallicon.jpg"
myimages[3]="http://flashmajic.com/Google/atomica/atomicasmallicon.jpg"
//specify corresponding links below
var imagelinks=new Array()
imagelinks[1]="http://www.wsabstract.com"
imagelinks[2]="http://www.dynamicdrive.com"
imagelinks[3]="http://www.java-scripts.net"
var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=2 hspace=1></a>')
}
random_imglink()
//-->
</script>
index.html 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> </head> <body> ????? How would I call that script 3 times to display 3 random images? </body> </html> Hi, I hav linked external js (ext1.js) to my app.html page. Now in the ext1.js, I have a function like [CODE] function onwindowload(){ //Access HTML element and append external js 2 (ext2.js) here }[CODE] //Access HTML element and append external js 2 (ext2.js) here--->I donno how to add external JS here. Even if i add the external JS here, the JS uses document.write fn. which replaces entire page. Please suggest a solution 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! I've been playing with this workarouns for literally years, but I'm getting fed up with it. Can anyone here suggest a better way of dealing with the following conundrum - or at least clarify why it occurs? When I have an external stylesheet I can't access the properties assigned therein. I'll give an example - HTML/CSS/JS are all inseperate files - but everything is called into the HTML as you can see. HTML: Code: <head> <script type="text/javascript" src="js.js"></script> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="box" onclick="showWidth()"></div> <body> CSS (style.css) Code: #box {
width: 200px;
}
Javascript (js.js) Code: function showWidth(){
var box = document.getElementById('box');
alert(box.style.width);
}
Now the alert fired by showWidth() is empty - meaning that javascript can't see the width of the div element 'box' Now, if I assign width as part of the style attribute of the div javascript thus: HTML: Code: <head> <script type="text/javascript" src="js.js"></script> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="box" onclick="showWidth()" style="width: 200px;"></div> <body> javascript can see this and the alert fired by showWidth() shows '200px'. So, I have two questions: 1. Why? 2. Is there a way of accessing these external style elements without having to define styles inline all the time? Cheers! Mike <body> <script type="text/javascript" src="/khk.php?klub=khk&user=w"></script> This script works fine, but I get a error: line: 2 character: 1 error: character illegal code: 0 url .... Can anybody help?? 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. Hello, I'm sorry if this has been asked before but I've been googling and looking in reference books for the last couple of days and just haven't been able to find an answer. I'm new to javascript and have just completed my first fully working script to crossfade images and have clickable links to go to a specific image, the code works perfectly when the code is inside of the html document with the elements but when you remove the javascript and put it in a seperate file its unable to get the value of the elements from the html. Is there a way to do this, give the document a alternative src to look in for the elements or something? An example below. Javascript snipit [CODE] imageId = "mainImage"; image = window.document.getElementById(imageId); alert(image); [CODE] image returns null. what I want it to return is the value fro the HTMl document that this file is included in. [CODE] <script type="text/javascript" src="fadeFunctions.js"> </script> </head> <body> <div id="imgHolder" style="position: absolute; top: 200px;"> <div id="topImage" style="position: absolute; top: 0px; left: 0px; z-index: 100;"><img id="mainImg" src="1.png" /></div> [CODE] Thanks for any help or suggestions that you can give. Dear Forum, I have a website of quite a few pages which also has a style sheet switcher so the user can select their own customised graphics and layout (css file) these css files load in the graphics but only when the call is clicked... even if the page has already been opened for seconds or minutes when the graphics could have been loaded in for an instant switch. so i implemented the following code: Code:
<SCRIPT language="javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</SCRIPT>
<body onLoad="MM_preloadImages('/corporate/heading.png','/creative/heading.png','/earth/heading.png','/under-the-sea/heading.png','/space-and-stars/heading.png','/classical/heading.png','/corporate/document.jpg','/space-and-stars/document.png','/creative/document.jpg','/earth/background.jpg','/under-the-sea/background.jpg','/classical/document.png','/classical/background.jpg','/under-the-sea/document.png','/corporate/home-graphics.png','/earth/content.jpg','/earth/footer.jpg','/earth/home-graphics.png','/under-the-sea/home-graphics.png','/creative/home-graphics.png','/space-and-stars/background.jpg','');">
it works fantastically - you open the page and as long as it takes to notice where you can click the styles is the same amount of time it takes to have the styles cached for the styles switch immediately and effortlessly. however, the site has grown and is now quite a number of pages with the above in each html file. ive just added a "creative 2" style, which has caused the above to need updating........ the maintenance of this code is inefficient to edit each page. would someone be able to point or show me how to, in principle: Code: <body onLoad="MM_preloadImages('/styles-code.js);">
styles-code.js?? page:
'/corporate/heading.png',
'/creative/heading.png',
'/earth/heading.png',
'/sea/heading.png',
'/classical/heading.png',
'/corporate/background.jpg',
'/creative/background.jpg',
'/earth/background.jpg',
'/sea/background.jpg',
'/classical/background.jpg',
etc
and have 1 page of this code called in by all pages in an easy to see and edit list? would really appreciate guidance with this, hi , how to load external page into div without template . Example : I have external page using CSS & html : <div id="header"></div> <div id="content1"></div> <div id="content2"></div> <div id="content3"></div> <div id="sidebar"></div> <div id="sidebar1"></div> <div id="footer"></div> NOTE : all javascript code load external page with all template code into div ! how to load ONLY content2 into DIV . thanks 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 Hi There, I'd like to create a webpage which checks a few other webpages on different Words. For example my page, which automatically reloads every 30 seconds, checks if the words "fire", "tsunami","earthquake" exist on cnn.com or bbc.com. When it does, I want to see some text like "fire message on cnn.com". I already found a javascript on the codingforums, but this one only find text in it's own page, not on pages which I load in iframes. Could you please help me, I post part of the script (without the reloading part) underneath. --------------------------------------------- <script type="text/javascript" > var keywords=new Array(); keywords[0]="fire"; keywords[1]="tsunami"; keywords[2]="earthquake"; var len = keywords.length; var found = ["0","0", "0"]; </script> <body> <div id="navDiv" style="width: 99%; height: 20px; border: 1px solid #000000; text-align: center; position: absolute; padding-top: 10px;"> <script type = "text/javascript"> window.onload = function(){ var str = document.getElementsByTagName('body')[0].innerHTML; // strip all HTML tags out of that: // Thanks Old Pedant for the reminder! var zapRE = /\<[a-z][^\>]*\>/ig; str = str.replace(zapRE, ""); //str = str.toLowerCase(); // to make case insensitive for (var i = 0; i<len; i++) { str2find = keywords[i]; //str2find=str2find.toLowerCase(); // to make case insensitive var a = str.indexOf(str2find); if (a >= 0) { found [i] = 1; } } for (var i = 0; i<len; i++) { if (found[i] == 1) { alert ("There's some news about a " + keywords[i]); } } } </script> </div> <iframe id="frmMain" style="zoom:48%" frameborder="0" scrolling="no" width=25% height=48% src="http://www.bbc.com"> <iframe id="frmMain2" style="zoom:48%" frameborder="0" scrolling="no" width=25% height=48% src="http://edition.cnn.com"> </body> I have a PHP page with a number of images displayed thumbnail size. I want the image source of a clicked thumbnail to be the image source of a larger image in an image field. Javascript is he Code: <script type="text/javascript">
function getValue(VarSrc)
{
VarSrc = document.getElementById('myimage').src;
}
</script>
The image field HTML is he Code: <form action="" id="PicForm" method="post" name="FindFile"> <input name="MyImage" type="image" id="myimage" value="Image Placeholder"/></form> The thumbnails are generated dynamically by PHP, this is how they look in HTML when rendered: Code: <img src="../158/DSCN3866.JPG" width="100" id="selectpic" onclick="getValue(../158/DSCN3866.JPG)"/> This is how they look in PHP: PHP Code: $output .= "<img src=\"{$pathToImages}{$fname}\" width=\"100\" id=\"selectpic\" onclick=\"getValue({$pathToImages}{$fname})\"/>"; The script doesn't work, which puzzles me because it was a suggested solution to a similar problem, and the author of the question confirmed that it worked. My question for you is: a) Should it work? b) If it won't, can someone suggest a solution that will? Thanks for your help. Elizabeth Thank you in advance for your help with this. I have two pages. One page with thumbnails and another page with the actual gallery. On the gallery.html page I can scroll to my 5th image in the list by the following code: onclick="myScroll.scrollToPage(5,5)" I want to achieve this same effect from the index.html file into the gallery.html file. I have tried using anchored links like #image5, but that just messes up the page and the iscroll script I am working off of. Thank you again anyone who can help. I am complete newbie to this topic and i want to know how to add and external javascript file for blogger. I have heard that it decreases the load time of a page. Again please explain clearly as iam a newbie!! Any help would be appreciated!! Thanks In Advance!! I want it to hide or kill the div box with an onmouseout I've tried listeners functions and just plain vars. i can find a solution maybe here this is the code in the external file Code: ////////////////////////////////////////////////////////
////////////////////////////////////////////////////////
function move_box(an, box) {
var cleft = 0;
var ctop = 0;
var obj = an;
while (obj.offsetParent) {
cleft += obj.offsetLeft;
ctop += obj.offsetTop;
obj = obj.offsetParent;
}
box.style.left = cleft + 'px';
ctop += an.offsetHeight + 8;
if (document.body.currentStyle &&
document.body.currentStyle['marginTop']) {
ctop += parseInt(
document.body.currentStyle['marginTop']);
}
box.style.top = ctop + 'px';
}
function show_hide_box (an, width, height, borderStyle) {
var href = an.href;
var boxdiv = document.getElementById(href);
if (boxdiv != null) {
if (boxdiv.style.display=='none') {
move_box(an, boxdiv);
boxdiv.style.display='block';
} else
boxdiv.style.display='none';
return false;
}
boxdiv = document.createElement('div');
boxdiv.setAttribute('id', href);
boxdiv.style.display = 'block';
boxdiv.style.position = 'absolute';
boxdiv.style.width = width + 'px';
boxdiv.style.height = height + 'px';
boxdiv.style.border = borderStyle;
boxdiv.style.backgroundColor = '#fff';
var contents = document.createElement('iframe');
contents.scrolling = 'no';
contents.frameBorder = '0';
contents.style.width = width + 'px';
contents.style.height = height + 'px';
contents.src = href;
boxdiv.appendChild(contents);
document.body.appendChild(boxdiv);
move_box(an, boxdiv);
boxdiv.addEventListener('mouseout', show_hide_box(boxdiv),false);
return false;
}
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
And you put this code in the body to call it. Code: /////////////////////////////////////////////////////////////////// <a href="../Menus/cleaners.html" onMouseOver="return show_hide_box(this,416,124,'2px')" >Cleaners</a> /////////////////////////////////////////////////////////////////// |
|||||||