Sunday 15 August 2010

jquery - update margin on resize -


I am working on a simple slider and it's running well, (still learning jquery) . At the moment, my slider calculates the size of the window and changes my (full screen) divide width so that the content stays on the screen. Clearly on a slider you want to move the content, and here's the problem.

I use it to get the width of my window

  var lastWidth = $ (window) .width (); $ (Window). Reset (function () {if ($ (window). Width ()! = LastWidth) {// execute code. LastWidth = $ (window) .width ();}});   

Then stores the width of the last width variable window. I use this variable in this way

It updates the width of all the divs within my slider (# PageSlider)

  $ ("# pageslider div" ). CSS ({"minimum-width": (last wide)});   

It calculates the width of #pageslider so that all devices fit there.

  $ ("# PageLider"). CSS ({"minimum-width": (lastwid * 4)});   

And now we get the problem. If a visitor clicks on the portfolio square then the #pageslider is animated on the left due to the margin-left. The given value is the current width of the screen. It works fine

But if the visitor changes the width of the window, then the value is not updated because it puts it in the CSS.

  $ ('nav li a.portfolio'). (Function (event) {$ ('# pejldder'). Amimate ({"margin-left": - last Wikith}, "slow");});   

So if the width of the window is 1920 px and any person. Clicks on the portfolio, the link # PageSlider will move from 1920 to the left. But when the size of the screen is changed then it remains on the left side of 190 pixels, although it should change to the current screen size.

There is a small JSfield with this problem:

I added the variables active which is what records keep records, and you have to make changes in the context of the multiplier of previous wide . Click on Home on its 0 . Click on its portfolio , its 1 , and so on.

jQuery

  Var lastWidth = $ (window). With (); Var active = 0; $ (Window). Reset (if ($ (window). Width ()! = LastWidth) {lastWidth = $ (window). Width (); $ ("# pageslider div"). CSS ({"$ (" # Pageslider $ ("# Pageslider"). CSS ({"Min-Width": (Last Wide * 4)} $ ('# PageLider'). CSS ({"margin-left": -lastWidth * active $ {"Minimum-width": (Last Wide)}; $ ("# PageSlider"). CSS ({"minimum-width": ($ ("minimum-width": ( Last quarter * 4)}; $ ('navy li li a portfolio, h1a'). Click (function (event) {event.preventDefault (); var href = this.href;}); $ ( By clicking 'nav li a.portfolio'). (Function (event) {$ ('margin-left': -lastWidth}, "slow"); active = 1;}); atimet ({"margin-left": '0 Pixel '}, "Slow"); Active = 0;}) Click (Function (Event) {$ (' # Pagerder ').    

No comments:

Post a Comment