www.webdeveloper.com
Results 1 to 6 of 6

Thread: [RESOLVED] Debugging and Optimizing a Short JQuery Code

  1. #1
    Join Date
    Jul 2010
    Posts
    35

    resolved [RESOLVED] Debugging and Optimizing a Short JQuery Code

    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

  2. #2
    Join Date
    Jul 2010
    Posts
    35
    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

  3. #3
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    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.

  4. #4
    Join Date
    Jul 2010
    Posts
    35
    @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

  5. #5
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    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.

  6. #6
    Join Date
    Jul 2010
    Posts
    35
    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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles