worked in one file, not in the other???

Question

k2k 5 Posting Whiz

16 Years Ago

i downloaded a js code and it works with its own html index file. However, if i paste the <script>............everything </script> to my index, it doens't work. I tried to put it inside <head> </head> and i also tried inside <body> </body> ... they both don't work. Any suggestion? i am pertty new to js, please be specified. thank you.

code as below:

<html>
<head>

<link rel="stylesheet" type="text/css" href="/css/text.css"/>

<style type="text/css">

body{background-image: url('/image/grasswindows.jpg');
background-position: 50% 100%;
background-attachment: fixed;
background-repeat: no-repeat;
}

#container{
position: absolute;
width: 800px;
height: 150px;
left: 50px;
top:200px;
}
</style>
<title>learning</title>
</head>
<body>

<div id="img" style="position:absolute;">

<img src="/icon/computer.png" onMouseDown="pauseResume();">

</div>

<SCRIPT LANGUAGE="JavaScript">
<!-- Original:  Justin Arruda (JArruda@mindspring.com) -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! [url]http://javascript.internet.com[/url] -->

<!-- Begin
var step = 1;
var delay = 30;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
var name = navigator.appName;
//if(name == "Microsoft Internet Explorer") name = true;
//else name = false;
var xPos = 20;
if(name) var yPos = document.body.clientHeight;
else var yPos = window.innerHeight;
function changePos() {
if(name) {
height = 140;
Hoffset = img.offsetHeight;
Woffset = img.offsetWidth;
img.style.top = yPos + document.body.scrollTop;
}
else {
height = 140;

Hoffset = document.img.clip.height;
Woffset = document.img.clip.width;
document.img.pageY = yPos + window.pageYOffset;
document.img.pageX = xPos + window.pageXOffset;
}
if (yon) {
yPos = yPos + step;
}
else {
yPos = yPos - step;
}
if (yPos < 0) {
yon = 1;
yPos = 0;
}
if (yPos >= (height - Hoffset)) {
yon = 0;
yPos = (height - Hoffset);
}
}
function start() {
if(name) img.visibility = "visible";
else document.img.visibility = "visible";
interval = setInterval('changePos()',delay);
}
function pauseResume() {
if(onmouseover) {
clearInterval(interval);
pause = false;
}
else {
interval = setInterval('changePos()',delay);
pause = true;
   }
}
start();
//  End -->
</script>

</body>
</html>

javascript

2 Contributors
6 Replies
155 Views
1 Day Discussion Span
Latest Post 16 Years Ago Latest Post by k2k

essential 84 Posting Shark

16 Years Ago

Try to bring it up inside the <head> tags!

<html>
<head>
<title>Some Title</title>
<!-- Your script goes here! -->

<script type="text/javascript">
<!--
//Some codes' to run
//-->
</script>
</head>

And with external script! Simply link it in to your page by doing this...

<script type="text/javascript" src="yourScript.js">
<!-- // --> 
</script>

Well that's all for now!
Hope it helps you...

essential 84 Posting Shark

16 Years Ago

There's nothing fancy about an external Javascript file. All it is, is a text file where you've put all your Javascript. Basically everything that would ordinarily go between the <script> tags can go in your external file. Note that between was stressed, you can not have the <script> </script> tags themselves in your external file or you will get errors.
Ok now let's start workin!
1st we create an external JavaScript using notePad or any text editor. Then save the file with a ( .js ) file extention.

Lets say i will name this "imageScroller.js" be sure that it's on the same directory with your page -->

/* This is now an external script named as "imageScroller.js" */

var step = 1;
var delay = 30;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
var name = navigator.appName;
//if(name == "Microsoft Internet Explorer") name = true;
//else name = false;
var xPos = 20;
if(name) var yPos = document.body.clientHeight;
else var yPos = window.innerHeight;
function changePos() {
if(name) {
height = 140;
Hoffset = img.offsetHeight;
Woffset = img.offsetWidth;
img.style.top = yPos + document.body.scrollTop;
}
else {
height = 140;

Hoffset = document.img.clip.height;
Woffset = document.img.clip.width;
document.img.pageY = yPos + window.pageYOffset;
document.img.pageX = xPos + window.pageXOffset;
}
if (yon) {
yPos = yPos + step;
}
else {
yPos = yPos - step;
}
if (yPos < 0) {
yon = 1;
yPos = 0;
}
if (yPos >= (height - Hoffset)) {
yon = 0;
yPos = (height - Hoffset);
}
}
function start() {
if(name) img.visibility = "visible";
else document.img.visibility = "visible";
interval = setInterval('changePos()',delay);
}
function pauseResume() {
if(onmouseover) {
clearInterval(interval);
pause = false;
}
else {
interval = setInterval('changePos()',delay);
pause = true;
}
}
start();

Now in your page we will simply embed it inside your body tags.

<html>
<head>
<title>learning</title>
<link rel="stylesheet" type="text/css" href="/css/text.css"/>

<style type="text/css">
body{background-image: url('/image/grasswindows.jpg');
background-position: 50% 100%;
background-attachment: fixed;
background-repeat: no-repeat;
}

#container{
position: absolute;
width: 800px;
height: 150px;
left: 50px;
top:200px;
}
</style>

</head>
<body>

<div id="img" style="position:absolute;">

<img src="/icon/computer.png"onMouseDown="pauseResume();">

</div>
<!-- It goes here -->
<script type="text/javascript" src="imageScroller.js">
<!-- // -->
</script>
<!-- And now we're done! 
Enjoy... -->

</body>
</html>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

k2k 5 Posting Whiz · Answer 1 · 2008-09-17T08:37:29+00:00

For this forum, I put my codes inside <code> </code> that used to work and it doesn't now, can anyone tell me why?

For my problem:
There are too many doubts. Let me ask one thing at a time: This below is a working version with <script> ......all the codes </script> inside the <body></body> and it works. (you may test it) p.s. it is IE friendly

My first question is.. how do i make the script external? I already tried every possible way i could think of. (src inside <head>, inside <body> ) Please help if have some idea. thanks
<code>

<html>
<head>
<title>moving object</title>

</head>

<BODY>

</script>

</body>
</html>

</code>

k2k 5 Posting Whiz · Answer 2 · 2008-09-17T21:36:06+00:00

essential,
thanks so much but you know what I had an extra "}" somewhere up there my index (too much changing around i guess) and that was the whole issue of the external js.
i prefer external is just personally i think it is easier to manage the files.

Okay, my first doubt was solved! thanks for all the effort.

Now it is a very tricky question for me. the code below will work. however, if you change the line 9 , to src="computer.png" a local image. and it won't work. I am really scratching my head for this bug...

<html>
<head>
<title>bouncing image</title>
</head>
<BODY>

<div id="img" style="position:absolute;">
<img src="http://javascript.internet.com/img/logo.gif" onMouseDown="pauseResume();">
// change to local img like : src="computer.png" .... >  and it won't work  ????? 

</div>

<SCRIPT LANGUAGE="JavaScript">
<!-- Original:  Justin Arruda (JArruda@mindspring.com) -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var step = 1;
var delay = 30;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
var name = navigator.appName;
//if(name == "Microsoft Internet Explorer") name = true;
//else name = false;
var xPos = 20;
if(name) var yPos = document.body.clientHeight;
else var yPos = window.innerHeight;
function changePos() {
if(name) {
height = 140;
Hoffset = img.offsetHeight;
Woffset = img.offsetWidth;
img.style.top = yPos + document.body.scrollTop;
}
else {
height = 140;

Hoffset = document.img.clip.height;
Woffset = document.img.clip.width;
document.img.pageY = yPos + window.pageYOffset;
document.img.pageX = xPos + window.pageXOffset;
}
if (yon) {
yPos = yPos + step;
}
else {
yPos = yPos - step;
}
if (yPos < 0) {
yon = 1;
yPos = 0;
}
if (yPos >= (height - Hoffset)) {
yon = 0;
yPos = (height - Hoffset);
}
}
function start() {
if(name) img.visibility = "visible";
else document.img.visibility = "visible";
interval = setInterval('changePos()',delay);
}
function pauseResume() {
if(onmouseover) {
clearInterval(interval);
pause = false;
}
else {
interval = setInterval('changePos()',delay);
pause = true;
   }
}
start();
//  End -->
</script>






<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center>
</body>
</html>

essential 84 Posting Shark Featured Poster · Answer 3 · 2008-09-17T22:01:10+00:00

I undestand how you relate to this issue!
That's part of learning!

<!-- MisCoded -->
<div id="img" style="position:absolute;"> 

<!-- Embeding two images in single [b]<img>[/b] tag and improper closure. This is where the problem goes -->
<img src="http://javascript.internet.com/img/logo.gif" onMouseDown="pauseResume();"[b]>[/b] src="computer.png" > and it won't work ????? </div>

It should go this way.

<div id="img" style="position:absolute;"> 
<img src="computer.png" onMouseDown="pauseResume();" /> <!-- You can hunt me down if this wont work! 
Goodluck! --> 

</div>

k2k 5 Posting Whiz · Answer 4 · 2008-09-18T03:25:58+00:00

essential,
Sorry i think i should have made that clearer, i did exactly what you gave me for correction ( i have book and internet sources for syntax)
i was trying to say if i substituted "http://javascript.internet.com/img/logo.gif" to a local file "computer.png" and it wouldn't work. After trying another gif file i figure it out js (or this piece of js) probably doesn't take png file. If i tried with another gif image and it worked.

I guess it is all about file compatibility. I used photoshop to change computer.png to computer.gif but it wouldn't allow me either. I'll look into the problem more and thanks for all the replies.

==* And i won't hunt u down for anything. : ) Have a nice day.