[RESOLVED] Debugging and Optimizing a Short JQuery Code

[Mr. Baggins]

Since frames will not be allowed in HTML 5, I'm working on creating a frame-like interface with CSS and JQuery. However, I'm a noob to Javascript and JQuery, and I'm having some trouble debugging a piece of code that I built. Here it is in JSFiddle with a minimalistic HTML/CSS framework - please take a look:

http://jsfiddle.net/gaRV2/2/

It almost works for me; the only problem is that if the browser window is not maximized, I can drag .dragbar all the way past the right edge of the browser window until my cursor hits my right monitor edge. I want .dragbar to stop when there are 100px left for #main, however. I can't figure out why my code doesn't do this. Any ideas?

(when I posted it in JSFiddle, the bug doesn't occur, probably because of the website constraints. In a standard browser window, the bug occurs.)

Also, any suggestions for optimizing and improving this code would be appreciated. I don't know if I have a bunch of dead wood in there or what - just that it works.

Thanks,

Mr. Baggins

[Mr. Baggins]

Update: Here's a live working demo of the page. You can experience the bug on this demo - just drag .dragbar to the right past the edge of the browser.

http://thesiteguru.com/demo.html

Mr. Baggins

[ReFreezed]

Use $(window).width() instead of $(document).width() in the mousemove handler. The problem is that $(document).width() increases as the width of the webpage content (or more specifically, #navwrapper) increases past the window size. $(window).width() is always constant until the window is resized.

[Mr. Baggins]

@refreezed, what a quick reply - and thanks a bunch! That was exactly the problem. Here are the updated jsfiddle and live demo links:

http://jsfiddle.net/Underhill/hUd56/3/

http://thesiteguru.com/demo.html

However, now when I pull .dragbar all the way to the right side of the browser window, it goes ever so slightly past the edge of the window, expanding the document slightly and generating a scroll bar on the bottom of the document. I've tried to debug this to no avail. Is there something in my code I could make more precise to eliminate this problem?

Mr. Baggins

[ReFreezed]

Increase the limit of 100 to something larger. For example change if (event.pageX > $(window).width() - 100) to if (event.pageX > $(window).width() - 150) etc.

Or you could add overflow: hidden; to the body element. Not perfect, but it's another solution.

[Mr. Baggins]

Thanks, refreezed.

I figured out the bug that I mentioned in my last post. The problem lay in how I calculated the new element widths when close to the right side of the browser. Rather than basing my '100px away from the right edge of the browser' on the actual width of the right column, I was basing it on how far away from the right edge of the window I clicked .dragbar. Consequently, there was a slight derivation from 100px depending on where on .dragbar I clicked. Following is a jsfiddle containing the revised code and a few other improvements, including a window resize function.

http://jsfiddle.net/Underhill/hUd56/6/

Mr. Baggins