jQuery Help

I need some help or some guidence, I can't figure this one out...

Basically I need to turn:

<div class="a">

  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>

  <div class="c">
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
  </div>

  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>

  <div class="c">
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
  </div>

</div>

Code (markup):

into:

<div class="a">

  <div class="b"></div>
  <div class="b"></div>

  <div class="c">
    <div class="d"></div>
    <div class="d"></div>
  </div>

  <div class="b"></div>
  <div class="b"></div>

  <div class="c">
    <div class="d"></div>
    <div class="d"></div>
  </div>

  <div class="b"></div>
  <div class="b"></div>

  <div class="c">
    <div class="d"></div>
    <div class="d"></div>
  </div>

  <div class="b"></div>
  <div class="b"></div>

  <div class="c">
    <div class="d"></div>
    <div class="d"></div>
  </div>

</div>

Code (markup):

With the ability to revert. There can be an infinite number of B, C, D's, but it will always be 4-4 or 2-2.

Any ideas? The project uses jQuery so I have all those functions at my disposal.

 

How do you determine how many iterations you want? Input? DB-call?
What is this even for? Basically, what you can do is just rewrite the entire innards of <div class="a"> - that would be very simple - however, it will also be excruciatingly slow if you have huge amounts of data.

 

Database sort would handle this on the backend and wouldn't that be more reliable anyway? User workstations have all sorts of different issues. Asking the front end to handle the sort could cause all types of issues. Even if there was a front end way to reliably do it, you would never be able to support all the issues with connectivity, user CPU, memory use, cache issues, browser types, timing out or running into some conflict that would show up, more and more, for very large lists.

At some point even asking the back-end dbase to sort with a query can make the page loads get slower, depending on use and size of the sort. Is waiting for multiple seconds in heavy use, OK with the site owner? Do they get a few hits or thousands in an hour? The standard for social media page load, according to Akamai studies, is something like 90% user loss rate for a 5 second load time wait. Of course, if you are working on a government site, then going slow is expected. Ha!

 

Having the backend handle it isn't an option, this is needed in order to make the page responsive. I can't post the actual project I'm working on but basically trying to mimic this effect:

http://grovemade.com/ (Scroll down to the team member section).

Mine only needs one breakpoint, from four to two per row. So the way my markup is structured I have

memberphoto
memberphoto
memberphoto
memberphoto

memberbios
- member bio
- member bio
- member bio
- member bio

I can't imagine it holding more then 20 members, but the script needs to support infinite. I've got mine working perfect at 4 wide, now im trying to basically reorder everything so it will work at 2 wide. A friend helped me out with this script:

http://jsfiddle.net/b1au6Lkf/1/ (still a little buggy adds extra divs at the top).

Maybe I'm going about this the completely wrong way, what do you guys thing?

 

Uhm, yes, you are. This is in no way js-related, this is purely CSS-related (the styling of the page). Without even looking at the page you linked, you create a HTML/CSS-based grid (how you do this is a littlebit up to you - you can for instance use a floated list, or divs styled with flex-box)
Then you create @media-rules in CSS to adjust this based on screen-width (browser-width, more precisely) and/or other criteria. There isn't really even the need to use js for the info-boxes for each member (although the size of the page itself will increase if you add all that content at the same time - still possible, though).
My suggestion, rewrite the whole thing. Proper HTML (including all the content, say at least 8 members, with info), then you style that to work how you want it to work. I'm pretty sure that there's next to no need for js for that project to work as intended.

 

Yeah but there needs to be a bio's section under each row of members. I'm not aware of a way to move them when the row count changes uses css.

<div class="member"></div>
<div class="member"></div>
<div class="member"></div>
<div class="member"></div>

<div class="bios">
  <div class="bio"></div>
  <div class="bio"></div>
  <div class="bio"></div>
  <div class="bio"></div>
</div>

<div class="member"></div>
<div class="member"></div>
<div class="member"></div>
<div class="member"></div>

<div class="bios">
  <div class="bio"></div>
  <div class="bio"></div>
  <div class="bio"></div>
  <div class="bio"></div>
</div>

Code (markup):

each member photo is 25% width of the container. After each row there's a bio's section in-between that slideToggles. Now at 700px wide the member photo is 50% of the container. How are you going to have the bios section slideToggle between rows 1-2? I don't believe you can because it's placed after row 2. If you have a solution for that I'd love to use pure html/css, in the mean time i don't see it. I did get a script going that reorders it. If your curious:

function currentSize() {
  if ($(".size-check").css("float") == "left" ){    
    return 2
  } else {
    return 4
  }
}

$(document).ready(function() {
    number_of_cols = currentSize()
    teamSort();
})

$(window).resize(function(){
  if (currentSize() != number_of_cols) {
    number_of_cols = currentSize()
    teamSort();
  }
});

function teamSort() {
  member_queue = [];
  bio_queue = [];

  // Add all member elements to the member-queue, and remove them from the DOM
  $(".team .member").each(function(index) {
    member_queue.push(this); // Add the member to the queue
    $(this).remove(); // Remove the member from the DOM
  });

  // Add all bio elements to the bio-queue, and remove them from the DOM
  $(".team .bio").each(function(index) {
    bio_queue.push(this); // Add the bio to the queue
    $(this).remove(); // Remove the bio from the DOM
  });

  // Remove empty C elements
  $(".team .bios").remove();

  while(member_queue.length > 0) {
    for(var i = 0; i < number_of_cols; i++) {
      $(".team").append(member_queue.shift());
    }

    $(".team").append($("<div>").addClass("bios"));

    for(var i = 0; i < number_of_cols; i++) {
      $(".team .bios").last().append(bio_queue.shift());
    }
  } 
}

Code (markup):

 

You rewrite the actual listing, of course? Just write it so that the image and the bio is contained, and style it accordingly. display: none, and display: block - I don't really feel like doing the code right now - maybe @deathshadow has an idea or two to make this happen with (almost) pure html/css.

 

You rang?

I'm still trying to figure out what the devil this even is, or WHY you'd be messing with it with scripttardery; but again I'm a content based developer, so until I actually SEE the content so I can put SEMANTIC markup (again that sick euphemism for using HTML PROPERLY) in there before even THINKING about the code bloat DIV, there's not a lot I can do here.

I don't see how this would result in something useful on a page, why it would have so many div, why scripting would be used in the first place... much less why you'd be dicking around with pixel widths on anything other than the images.

Basically, what's the CONTENT?!? ... and no, simply saying "member" and "bio" isn't going to cut it... are these headings? are they paragraphs? What's their semantic relationship as if I'm following those vague classes properly nothing lines up or is grouped properly...

I think you should be concentrating more on logical document order and using HTML properly than this dicking around with scripttardery and a bunch of pointless/meaningless DIV since you should have that LONG before DIV or layout is added to the page.

I mean, are you saying that for these:

<div class="member"></div>
<div class="member"></div>
<div class="member"></div>
<div class="member"></div>

<div class="bios">
  <div class="bio"></div>
  <div class="bio"></div>
  <div class="bio"></div>
  <div class="bio"></div>
</div>

Code (markup):

each of the "bio" are for the corresponding "member" above? If so, why in blazes isn't it:

<div class="member"></div>
<div class="bio"></div>

<div class="member"></div>
<div class="bio"></div>

<div class="member"></div>
<div class="bio"></div>

<div class="member"></div>
<div class="bio"></div>

Code (markup):

So you have a useful/logical document structure when all the fancy crap like CSS and JS aren't working/present. (you know, for screen readers, search engines, users who don't trust JS, users who disable that stuff to save bandwidth thanks to bandwidth caps and metered plans being shoved down their throats by corrupt socialist governments)

I mean, if you were using a table then your order might make sense as you could have the semantic relationships established by THEAD, TBODY, TH and SCOPE... but as DIV? Just what are you trying to accomplish with this?!?

 

ok here's what it has to look like:

http://codepen.io/robbyk/pen/eNYqRQ

My codes still buggy, but clicking a photo has to toggle a corresponding bio below the row it's placed on. There also has to be previous/next buttons.

 

Team member section? What "team member" section.

Though honestly that illegible train wreck of how not to build a website is something I'd be tossing in the trash in it's entirety. White text over light images so I can't even SEE your links, massive images too big to have any blasted business on a 'normal' website page in the first place, some annoying "register" popup crap, something akin to that parallax scrolling asshattery making the page painful to use (either that or it's just too much whitespace), illegible fixed metric fonts, (12px in a goofy undersized webfont? REALLY?), and to be brutally frank, design concepts that have ZERO business on a website if you care in the LEAST about accessibility, speed, functionalality or usability.

... Ah, oh, I THINK I see the 'team' section you are referring to... maybe. You have ZERO semantic relationships between the images, there's no real way to have any of that gracefully degrade -- it's EXACTLY what I'm talking about when I rant on and on about "pointless scripttardery" and more importantly layout concepts that "have no damned business on a website in the first place!".

STUNNING example of a website I'd throw in the trash and start over clean; as evidenced by the 4 megabytes in 41 files, ridiculous number of separate images on a single page, stuff that should be multiple pages crammed together any old way, and a general feeling of some artsy fartsy type who doesn't know enough about accessibility and usability to have been designing a website in the first place! Further evidenced by the ridiculous 72k of markup for 4k of plaintext and maybe 18 actual content images... anywhere from five to seven times the markup needed for the page -- alongside a complete and utter lack of logical document structure, lack of logical heading orders (pretty sure "OUR TEAM" and "OUR STORY" are NOT subsections of "WOOD iPHONE CASE", much less no h1 for any of those H2 to even be subsections of)...

You'd almost think it was knee deep in framework BS like jQuery, was throwing endless pointless DIV and endless pointless classes at things in a "Semantic markup, what's that?" methodology, relying on idiotic nonsense like Paul Irish's dipshit "let's wrap the HTML tag in IE CC's to cover up developer ineptitude", those stupid malfing data- attributes showing an inability to write JS properly much less grasp that if it's data it should be in the content as CDATA, if it's not data it has no damned business in the markup, AJAXtardery and/or one-page scripttardery pissing away functionality out of the typical "pageloads are evil" paranoia, and a general feeling of flash over function mentality.

Do yourself a HUGE favor and swing an axe at that -- ALL OF IT! As I often say there is NOTHING in that disaster I'd even try to salvage, and to be brutally frank adding this show/hide scripttardery to it is just throwing more pointless inaccessible trash at an already inaccessible broken and useless site. It is a poster child for everything wrong with web development today. You've got one of the most bloated inaccessible messes filled with "gee ain't it neat' crap that no matter how pretty the result is on the screen you happen to be seated in front of, it is effectively USELESS to actual users.

Sorry if that seems harsh, but as a great wrestler once said...

 

Did you checkout the my edited post? I posted a codepen thing with what I have so far. I'm going to clean up the markup/styles once I get the actual functionality solid. I can't just trash everything, this isn't for myself.

All that stuff aside, do you see a better way to accomplish the effect if you absolutely had too?

Edit:
I guess it really doesn't matter now I pretty much have it working.

So the script organizes everything on load and reorganizes when the break point is hit.

Here's another question I need help with...

When the page is resorted all my click functions stop working. A friend told me I need to bind or rebind them or something. I've never done that before and really don't understand the concept behind it. Can someone show me how to do that?

 

If you were working with normal JavaScript I wouldn't think that would be an issue, but jQuery LOVES to force a reparse and/or reflow of the page, which can often make any scripting hooks added with "addEventListener" or the like just up and disappear.

SHOULDN'T be happening since it looks like you are just doing class addition and removal, but again, jQuery. Just another of the reasons I wouldn't be using it in the first place. In addition to all the other things I wouldn't be doing in the first place on that site.

Though... where's your code for re-arranging them? Are you building them on the DOM, are you pulling their parent nodes for re-arrangement, or are you blindly inserting markup innerHTML style? (the last of those being something jQuery teaches people do to that should have been stamped out over a decade ago!)

IF I really were in a situation forced to do that (which again wouldn't happen EVER) I'd probably axe the scripting entirely and try to use target and maybe flex-box to make it work. Float raise/drop for ALL the different items MIGHT make the concept viable, though really again this is something I would REALLY suggest you NOT do on a website... at all.... EVER.

Though at the very least lose the DIV for nothing around the images; I would at the very least be trying to force the code for that to be:

<div class="member" id="user_robbyKlein">
	<a
		href="#user_robbyKlein"
		title="View Robby Klein's Bio"
		class="showHide"
	>
		<img
			src="http://s17.postimg.org/gfb4pqjqn/robby.png"
			alt="Robby Klein"
		>
	</a>
	<div class="bio">
		<img
			src="http://s17.postimg.org/gfb4pqjqn/robby.png"
			alt="Robby Klein"
			class="leadingPlate"
		>
		<div>
			<h3>Robby Klein</h3>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nulla mauris, pretium ac pellentesque quis, lacinia feugiat tortor. Nulla luctus, orci at hendrerit luctus, sapien risus ornare lectus, non iaculis ante magna quis lacus.
			</p>
		</div>
	<!-- .bio --></div>
<!-- #user_robbyKlein.member --></div>

Code (markup):

The trick (on top of using :target instead of all that scripting to do the show/hide) would be to somehow keep those clickable images displaying ordered like that -- which is again why I wouldn't be doing it that way in the first place as it's just pointless scripttardery, nonsensical document order, and an accessibility disaster. The moment you have the click links and bio's interspersed like that, you're just pissing all over the markup and the scripttardery is just making that worse; which is why the page would be gibberish scripting off.

 

POp, thanks for mentioning @media CSS. I have completely overlooked using this.

 

Actually, I was just thinking about it, and it hit me that the solution may be to build and flush the links in realtime without having them in the starting markup, with a class swap off the parent to adjust as need be. Leave all the DIV with the member info / bio in place, and just flush all the links and intersperse them where/as needed at page-load and on-resize. If you maintained a nodeList containing the anchors being added/removed from the markup you'd be able to cut them out of the dom and plug them in without having to re-attach your events since the events would be preserved.

Usually I say if you have to resort to JS for layout you are doing something criminally wrong, but crafted properly it should be able to be done with graceful degradation and without getting TOO painful in terms of performance. It would also let you put them in automatically depending on the parent element's width so you aren't limited to just two or four across, but however-many will fit. Since the anchors would be added by the scripting you could have it so scripting off all the bio's are open and the sub-links for hiding/showing them don't even exist.

Would also make for a smaller markup... Probably end up around 6 to 8k of JS without jQ, maybe 10k at the max... but would save you as much code on the HTML side.

No guarantees when, but I might take a stab at implementing something like that just to show you what I mean. Depends on when I'm well enough to get on the workstation again. (on the craptop right now borderline bedridden, and I can't do dick on a single tiny little 19" display and these low-travel keyboards.)