HTML5 Notepad Script

I have been pulling my hair out with a script - it is this one here:

http://www.dynamicdrive.com/dynamici...ml5notepad.htm

There are issues with it on all browsers from what I am finding....

1st Issue (Chrome, FF, etc):

As you drag it along it highlights other elements on the page and makes them all get highlighted as you move the sticky note.

2nd Issue (Chrome, IE8, IE7, FF, etc):

if you drag the sticky note over to the right it makes the design look bad since it creates a horizontal scrollbar since it has extended the viewport.

You can see both of these issues on the Dynamic Drive website if you try to drag the sticky note around and use the different browsers as mentioned above.

Any advice would be very much appreciated...

Try the below modified .js file. It addresses the 2 issues in the following way:

#1- Should be mitigated
#2- Since you don't want to actually disable the horizontal scrollbar from ever occurring in the event that there may be content to the right of the visible horizontal viewpoint, the modified .js file simply restricts the notepad from crossing over to beyond the right edge of the viewpoint.

Let me know if this helps,

I did not get any response from Forum to say there was a reply - so I am glad i checked back today :)

I will check this out now. Thank you so much for taking a look into this.

This works very well now.

The only thing is how to get it to stay within the other 3 "walls" of the viewport.

ie dragging down does the same - makes the scrollbar occur - even though everything was fitting to the page.

Exactly same thing as was happening on the right hand side.

Hopefully this would be similarly fixable in the JS.

=======

FYI - EDIT

If this above is somehow not possible - the only one that is obviously critical is the DOWN direction.

ie blocking moving outside of viewport on all 4 sides would be great.
blocking down and RIGHT (Right is already done) is the one that causes design issues - so if just these two could be done that that would be helpful too although not as good as the scenario above

any ideas?

I looked at the edits that admin did to the .js file but despite trying to get it do do this for motions down - cant get it to work.

The way it works now with the modified .js file is better in that it stays within the viewport on the right hand side - but I 'd like to similarly stop it from going out on the bottom too.

ie not being able to be dragged below the fold so that it stays all visible within the confines of the window,

Hi:
Sorry for the delay in response- try the below modified .js file then. It also restricts dragging the pad vertically below the viewport.