Solved

Using javascript in head tag does not work

Posted on 2008-06-25
12
471 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
Comment Utility
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
Comment Utility
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
Comment Utility
The example on that page shows the following syntax:
win1.getContent().update("Please select");

0
 
LVL 2

Author Comment

by:Panos
Comment Utility
Is this wrong?
0
 
LVL 82

Accepted Solution

by:
hielo earned 500 total points
Comment Utility
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
Comment Utility
When i delete the :
http://prototype-window.xilinus.com/javascripts/prototype.js on line 8 than it is not working.Is this normal?
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 82

Expert Comment

by:hielo
Comment Utility
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
Comment Utility
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
Comment Utility
>>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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
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…

763 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now