Javascript object required error

Hi!

I am trying to incorporate this post-it note javascript from this page:
http://www.adwords-marketing-tool.com/toolbox/PostIt.aspx

Into the below listed test page:
http://www.topsecurityinc.com/testpage8.html

I keep getting the following error:
Webpage error details

Message: Object required
Line: 123
Char: 2
Code: 0
URI: http://www.topsecurityinc.com/PostIt.js

Any specific corrections would be greatly appreciated.

TIA

TrueBlueAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

SSupremeCommented:
You should place basic code inside <body> "basic code" </body>. You can leave <script type="text/javascript" src="PostIt.js"></script> inside head if you want.
numberkruncherCommented:
I think your problem is occurring because your script is attempting to access the document object before it is ready. Try the following instead:
<script type="text/javascript">
function onPageLoaded() {
    var objPostIt1 = new fpuObject();
    objPostIt1.left = -300;
    objPostIt1.backgroundImage = "web/images/PostItYellow.gif";
    objPostIt1.html = "<br/><br/><span style='color: #ff0000; font: bold 16pt comic sans ms;'>PostIt Note Popup<br/>example code</span><br/><br/>You can drag this Popup, simply click and hold the left mouse button and drag the mouse.";


// Call original function that was in body.onload
	breakout_of_frame();
}
</script>

...

<!-- Use our new loaded function -->
<body onload="onPageLoaded()">

...

Open in new window

TrueBlueAuthor Commented:
numberkruncher,

it works fine in IE8 now :)
Any idea why it will not run in the current version of FF?
TIA
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

numberkruncherCommented:
It isn't working in Chrome, IE9 or FireFox.

I have thrown you together something which behaves very similar. You may want to move the 'initPopup' function into a reusable .js file (and the same for the .css).

My version uses jQuery which is available from (http://jquery.com) but I have attached it anyway.

I have also created a simple PNG image for the background which uses alpha transparency for a cleaner effect. I hope that this is of help for you!
template.html
post-note-yellow.png
post-note-yellow.psd
jquery.min.js
numberkruncherCommented:
If you want to make the note draggable then you can use the jQuery UI Draggable script and then just add to initPopup:
function initPopup(popup) {
	(popup = $(popup))
		.animate({
				'left': '50%'
			}, 200)
// ADD THIS LINE FOR DRAGGABLE, BUT REQUIRES ADDITIONAL
// jQuery UI "Draggable" script.
		.draggable();
	$('<div class="popup-close">X</div>')
		.prependTo(popup)
		.click(function() {
			$(this).parent().remove();
		});
}

Open in new window

TrueBlueAuthor Commented:
numberkruncher,

I uploaded the changes you suggested except for the Draggable script, because I wanted to see if it worked before I added another script.
I added the jquery script you attached to my functions.js file.
And incorporated the CSS changes into my main stylesheet.
It is not displaying for some reason.
No error in IE8 just does not display.
Any ideas?
TIA
numberkruncherCommented:
Did the template.html file appear to work correctly in IE8?

It ran fine in IE8 on my machine.
TrueBlueAuthor Commented:
numberkruncher,

I figured it out. :)
I needed to move the division statements closer to the body statement.
I can not figure out where to download the draggable script.
I looked at this page: http://jqueryui.com/demos/draggable/
Any ideas would be appreciated.

P.S.Does the "200" value in the initpopup set the distance down from the top of the page?
TrueBlueAuthor Commented:
numberkruncher.

Ok, I found it.
I tried the the minimum javascripts of core, mouse, widget and draggable.
The post-it note just sits on the far left side.
It no longer goes to the center like it did before I added the draggable feature.
Do I need to use the full scripts for core, mouse, widget and draggable?
Will these interfere with the jquery library you already sent me?
TIA
TrueBlueAuthor Commented:
numberkruncher,
Now the testpage has your original jquery script and the full versions scripts for the core, widget, mouse and draggable.

The post-it note sits on the left side of the page.
It no longer moves to the center like it did without the draggable script and it does not allow it to be dragged.

Any ideas?
numberkruncherCommented:
I am not sure why this isn't working for you. Please try the attached file. Note: I have added sub-directories for img and js as there are now multiple scripts involved:
post-note.zip
TrueBlueAuthor Commented:
numberkruncher,
I incorporated the javascripts into my functions.js page.
I uploaded it, the test page and images files.
If I do not include the draggable function call it works as normal.
When I include the draggable function call I get the following error:

Message: Syntax error
Line: 511
Char: 3
Code: 0
URI: http://www.topsecurityinc.com/functions.js

Message: Object expected
Line: 13
Char: 1
Code: 0
URI: http://www.topsecurityinc.com/testpage8.html

Any ideas would be appreciated.
numberkruncherCommented:
It is a syntax error in your code:
// SNAPSHOT OF FRAGMENT

// REMOVE SEMI-COLON FROM FOLLOWING LINE!
        }, 200)  //;

// ADD THIS LINE FOR DRAGGABLE, BUT REQUIRES ADDITIONAL

// jQuery UI "Draggable" script.

        .draggable();

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
numberkruncherCommented:
Regarding the line #13 error,

breakout_of_frame is an undefined function...what is this supposed to do?
TrueBlueAuthor Commented:
you are correct...
TrueBlueAuthor Commented:
break_of_frame is defined.
It is supposed to remove a frame from another site if it displays our site.
TrueBlueAuthor Commented:
meant breakout
numberkruncherCommented:
It isn't defined within the scope of that particular page.

The function can't have been included.
numberkruncherCommented:
Unless the previous semi-colon error was preventing the function from being defined and thus triggering the second error.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.