Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Using javascript in head tag does not work

Posted on 2008-06-25
12
Medium Priority
?
497 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 2

Author Comment

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

Accepted Solution

by:
hielo earned 2000 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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…

783 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