jQuery dynamically wrap elements

Asked May 21 '15 at 07:00

Active May 21 '15 at 07:00

Viewed 67 times

I'd like to wrap staff members in a wrapper that adjusts dynamically based on the size of the viewport and my function for that looks like so:

function wrapStaff () {
  ww = viewport().width
  wh = viewport().height

  var divs = $(".right_content > .staff_member")
  var c

  if(ww >= 1074){
    c = 3
  } else if (ww <= 1073 && ww >= 901) {
    c = 2
  } else if (ww <= 900 && ww >= 830) {
    c = 3
  } else if (ww <= 829 && ww >= 499) {
    c = 2
  } else if (ww < 499) {
    c = 1
  }

  divs.unwrap()

  for(var i = 0; i < divs.length; i+=c) {
    divs.slice(i, i+c).wrapAll("<div class='staff_list'></div>")
  }
}

This works if I don't want it to be dynamical, so it returns the amount of elements in a wrapper there were on page load, but not on browser resize. What am I doing wrong here?

asked May 21 '15 at 07:00

Xeen

6,955
16
60
111

Did you attach your function to the resize event? – connexo May 21 '15 at 07:02
Have you tried executing this function on window resize event? – Brijesh Bhatt May 21 '15 at 07:02
@BrijeshBhatt yes I have. – Xeen May 21 '15 at 07:03
What exactly are you trying to achieve visually? – connexo May 21 '15 at 07:05
`.width()` and `height()` you have a typo I think. Check this http://api.jquery.com/width/ – Brijesh Bhatt May 21 '15 at 07:07
@BrijeshBhatt that's not a typo, it's this function http://stackoverflow.com/questions/18546067/why-is-the-window-width-smaller-than-the-viewport-width-set-in-media-queries – Xeen May 21 '15 at 07:08
@connexo I'm trying to wrap those elements so that I can style them as necessarry based on any given size of the browser. – Xeen May 21 '15 at 07:09
So why are you not using media queries? – connexo May 21 '15 at 07:11
@connexo if I can use css for that, can you please show me a way I can wrap elements based on count with media queries? – Xeen May 21 '15 at 07:11
Depending on what you want to achieve, you probably don't need a wrapper. So please explain explicitly which problem you are trying to solve. – connexo May 21 '15 at 07:12
Why don't you use css to set `height` and `width` according to view port width and height. e.g. `width:50vw`. See http://demosthenes.info/blog/660/Using-vw-and-vh-Measurements-In-Modern-Site-Design – wonderbell May 21 '15 at 07:17

jQuery dynamically wrap elements

0 Answers0