SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    function doesn't return value

    Hi,

    I've written this code that examines the viewport width onload and when the viewport is re-sized...if it's more than 800px an element in my layout is given a margin. It's for an element that we can't use css to position in an extremely complex layout.

    It works fine (the dollar shortcuts are just saying getElementByID) but it doesn't return the value when the browser is re-sized...i can alert the value out, so it's working fine but it doesnt get assigned to the element at the end..i think i have something simple wrong...does returning the value in the function mean that it's available to the last line when the value is assigned as a margin to my element? Or is my problem that the marginLeft variable in the function is only local to my function? If so how do i fix?

    At the moment only the onload width is calculated and assigned

    Code JavaScript:
     document.observe('dom:loaded', function() {
     
    		  	 var viewportwidth = window.innerWidth;
    		     if(viewportwidth > 800) {
                     var marginLeft = (viewportwidth - 800);
                 }
                 window.onresize = function() {
    		         var viewportwidth = window.innerWidth;
    		     	 if(viewportwidth > 800) {
                         var marginLeft = (viewportwidth - 800);
                        return marginLeft;   
                     }
     
                 }
                  $('it').style.marginLeft = marginLeft + 'px';
    		  })
    ps: i know this wont work in IE yet...i'll factor that in later

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your onresize event handler that you define in the middle of that function won't run "inside" that function. It might as well be defined outside the function. You can't return the value to the next line of your function, it doesnt work like that.
    I'd try something like:
    Code:
    document.observe('dom:loaded', function() {
               
                 var viewportwidth = window.innerWidth;
                 if(viewportwidth > 800) {
                     var marginLeft = (viewportwidth - 800);
                 }
                  $('it').style.marginLeft = marginLeft + 'px';
              })
    
    window.onresize = function() {
       var viewportwidth = window.innerWidth;
       if(viewportwidth > 800) {
           var marginLeft = (viewportwidth - 800);
          $('it').style.marginLeft = marginLeft + 'px';   
       }
    }

  3. #3
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes! thats it...thanks!


    Now it works but the div only moves to its new position (due to the new margin) when i let go of the mouse button after ive re-sized the viewport...so it kind of jumps....is there any way to do this so the box moves real time?

    I'm looking at faebook and they have a new chat feature which shows up as a grey bar alwasy at the bottom of the viewport...this moves real time with the resize...this must be javascript right?

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't do facebook so I couldn't tell ya.

    In IE onresize fires continuously throughout a resize event, I think that FF and maybe Opera only fire it at the end of the event (when the mouse button is released). Perhaps they capture the mousedown/mousemove events to handle resizing smoothly.


Bookmarks

Posting Permissions

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