Solved

Using javascript in head tag does not work

Posted on 2008-06-25
12
476 Views
Last Modified: 2012-08-13
Hello experts.
I'm using a script for popupwindow.
When i use the script in the body it is working but only in firefox.Explorer don't open the page.
If i put the script in the head tag then it does not work.
The script is:
<script type="text/javascript">
win1 = new Window('1', {className: "alphacube", title: "", width:150, height:40, top:150, left:300}); win1.getContent().innerHTML = "Please select";
</script>
And the image i click on:
<a href="#" onClick="win1.show();"><img src="img/pop.gif"  border="0"/></a>
(I'm using coldfusion 8)
0
Comment
Question by:Panos
  • 6
  • 6
12 Comments
 
LVL 82

Expert Comment

by:hielo
ID: 21866501
What is Window doing? I ask because in this:
win1.getContent().innerHTML = "Please select";

I would expect win1.getContent() to return a string, not a DOM object, in which case the .innerHTML will have no effect.
0
 
LVL 2

Author Comment

by:Panos
ID: 21866950
hello hielo again.
I have downloaded the files from here:http://prototype-window.xilinus.com/
I send you all the files so you can see better what is going on.
download the js. files from here :
http://prototype-window.xilinus.com/download.html
I can't upload them
<!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>
<link href="Stylesheet/themes/default.css" rel="stylesheet" type="text/css"> 
<!-- Add this to have a specific theme--> 
<link href="Stylesheet/themes/alphacube.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/TOOLTIP.js"> </script>
<script type="text/javascript" src="js/prototype.js"> </script> 
<script type="text/javascript" src="js/effects.js"> </script> 
<script type="text/javascript" src="js/window.js"> </script> 
<script type="text/javascript" src="js/window_ext.js"> </script> 
<script type="text/javascript" src="js/debug.js"> </script>
<script type="text/javascript">
win1 = new Window('1', {className: "alphacube", title: "", width:150, height:40, top:150, left:300}); win1.getContent().innerHTML = "Please select";
</script>
</head>
 
<body><table cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
    <td><a href="#" onClick="win1.show();"><img src="img/hinweis.gif"  border="0"/></a></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
 
 
</body>
</html>

Open in new window

0
 
LVL 82

Expert Comment

by:hielo
ID: 21867063
The example on that page shows the following syntax:
win1.getContent().update("Please select");

0
NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

 
LVL 2

Author Comment

by:Panos
ID: 21867115
Is this wrong?
0
 
LVL 82

Accepted Solution

by:
hielo earned 500 total points
ID: 21867285
The attached code worked for me in IE. Make sure you are providing the right path to the css. Notice that I used http://prototype-window.xilinus.com/themes/alphacube.css, but you will need to make a copy of that css to your server as well as the images that the css references.
<!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>
<link href="Stylesheet/themes/default.css" rel="stylesheet" type="text/css"> 
<!-- Add this to have a specific theme--> 
http://prototype-window.xilinus.com/javascripts/prototype.js
<link href="http://prototype-window.xilinus.com/themes/alphacube.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://prototype-window.xilinus.com/javascripts/TOOLTIP.js"> </script>
<script type="text/javascript" src="http://prototype-window.xilinus.com/javascripts/prototype.js"> </script> 
<script type="text/javascript" src="http://prototype-window.xilinus.com/javascripts/effects.js"> </script> 
<script type="text/javascript" src="http://prototype-window.xilinus.com/javascripts/window.js"> </script> 
<script type="text/javascript" src="http://prototype-window.xilinus.com/javascripts/window_ext.js"> </script> 
<script type="text/javascript" src="http://prototype-window.xilinus.com/javascripts/debug.js"> </script>
<script type="text/javascript">
win1 = new Window({className: "alphacube", width:350, height:400, zIndex: 100, resizable: true, title: "Sample window", showEffect:Effect.BlindDown, hideEffect: Effect.SwitchOff, draggable:true, wiredDrag: true}); 
win1.getContent().update("Please select");
</script>
</head>
 
<body><table cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
    <td><a href="#" onClick="win1.show();"><img src="http://prototype-window.xilinus.com/img/hinweis.gif"  border="0"/></a></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
 
 
</body>
</html>

Open in new window

0
 
LVL 2

Author Comment

by:Panos
ID: 21867574
When i delete the :
http://prototype-window.xilinus.com/javascripts/prototype.js on line 8 than it is not working.Is this normal?
0
 
LVL 82

Expert Comment

by:hielo
ID: 21867657
That "tool" is depending on the prototype library, so if you delete it then it shoud NOT work. You don't HAVE to link your page to the one on xilinus.com - you can save a copy of the needed file to your server and have you page link to your copy instead.
0
 
LVL 2

Author Comment

by:Panos
ID: 21867762
Do you mean to save the file as prototype.js as i already have in my folder js and than link there?
0
 
LVL 82

Expert Comment

by:hielo
ID: 21868375
>>Do you mean to save the file as prototype.js
Yes. It's possible that your version and the version on that site are different.
0
 
LVL 2

Author Comment

by:Panos
ID: 21872528
Hi hielo again.
You believe it or not :I'm going to this site:
http://prototype-window.xilinus.com/javascripts/prototype.js
I copy the code prototype code  there.
Then i put this code in my prototype.js file (i have deleted the old one).
I make a link like :<script type="text/javascript" src="js/prototype.js"> </script> (js is the folder with the other javascript codes and they are working!) and it is not working.
I checked also the sample files i downloaded with all the code.
For example the code from the example:window_store.html
 is working in firefox and explorer,but when i cut the script files in the body and put them in the head i get the errors in the firefox error-check:
this.options.parent is null (from windows.js line 629)
<html>
 
<head>
<title>WindowStore example</title>
<script type="text/javascript" src="../javascripts/prototype.js"> </script> 
<script type="text/javascript" src="../javascripts/effects.js"> </script> 
<script type="text/javascript" src="../javascripts/window.js"> </script> 
<script type="text/javascript" src="../javascripts/window_ext.js"> </script> 
<script type="text/javascript" src="../javascripts/debug.js"> </script> 
 
<link href="../themes/default.css" rel="stylesheet" type="text/css"> 
<!-- Add this to have a specific theme--> 
<link href="../themes/alphacube.css" rel="stylesheet" type="text/css"> 
 
 
</head>
 
<body>
<b>My personal configuration of the windows:</b><br>
<br>
<br>
<br>
<br>
<br>
<br>
<center><a href="#" onClick="win1.show();">open window1</a></center>
<center><a href="#" onClick="win2.show();">open window2</a></center>
<center><a href="#" onClick="win3.show();">open window3</a></center>
<center><a href="#" onClick="win4.show();">open window4</a></center>
 
<script type="text/javascript">
win1 = new Window('1', {className: "alphacube", title: "Sample1", width:200, height:150, top:70, left:100}); win1.getContent().innerHTML = "<h1>1</h1>";
</script>
 
<script type="text/javascript">
win2 = new Window('2', {className: "alphacube", title: "Sample2", width:200, height:150, top:270, left:100}); win2.getContent().innerHTML = "<h1>2</h1>";
</script>
 
<script type="text/javascript">
win3 = new Window('3', {className: "alphacube", title: "Sample3", width:200, height:150, top:270, left:400}); win3.getContent().innerHTML = "<h1>3</h1>";
</script>
 
<script type="text/javascript">
win4 = new Window('4', {className: "alphacube", title: "Sample4", width:200, height:150, top:70, left:800}); win4.getContent().innerHTML = "<h1>4</h1>"; 
WindowStore.show(win4);
WindowStore.init();
</script>
</body>
 
</html>

Open in new window

0
 
LVL 82

Expert Comment

by:hielo
ID: 21879225
Try providing the full url to your files. Intead of:
src="..."

use:
src="http://www.yoursite.com/yourfolder/file.js"
0
 
LVL 2

Author Closing Comment

by:Panos
ID: 31470569
Hi hielo.
I made what you said.I did use exactly the the same folders and files in my site like the examples.For a simple page it did work.I had problems with pages from templates.The problem was not the links.After testing and testing i found out that i had to put the scripts: <script type="text/javascript">
win1 = new Window('1', {className: "alphacube", title: "Sample1", width:200, height:150, top:70, left:100}); win1.getContent().innerHTML = "

1

";
</script> in the bottom of the page just before the .Now it is working.
That what i was saying with the link, i have really recorded it and if you want you can see it.
Thank you for your help again.
Regards panos.
0

Featured Post

Three Reasons Why Backup is Strategic

Backup is strategic to your business because your data is strategic to your business. Without backup, your business will fail. This white paper explains why it is vital for you to design and immediately execute a backup strategy to protect 100 percent of your data.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question