mischiefbec mischiefbec - 1 year ago 43
HTML Question

How would I order the brand divs depending on laguage selected?

Really hoping someone can help me here. I need to achieve the following:
On change of language at the top of the page, brand divs (strips with paper aeroplanes in) change order to show sites that are in that language first. This will be on a wordpress site and utilising a translation plugin. I am a little unsure where to start, I know a little about onclick events but my knowledge is really limited. Any help will be very much appreciated. The current dev site can be found here: http://atsreisen.eighty3.co.uk/de/

Answer Source

If I'm understanding perfectly, you need to attach the language at the top to the brand divs. You can do that by adding data-lang attribute in your html and ids to your links. (data-something) is a way for you to create your custom attributes to use in jQuery.

<a class="lang" href="#0" id="german">German</a>
<a class="lang" href="#0" id="english">English</a>
<div id="container">
  <div data-lang="german">This is a brand div</div>
  <div data-lang="english">This is another brand div</div>
  <div data-lang="english">This is an English brand div</div>

Then in jQuery you can do this:

//variables (caching)
var langLink = $('.lang');
var langId;
var dataLang;

langLink.on('click', function(event) {
  // this part to prevent the page from refreshing when the link is clicked
  // get the clicked links Ids, hence $(this)
  langId = $(this).attr('id');
  // go up to a parent the links and divs share here it's the body
  // then finding the divs that has data-lang matching the links id
  dataLang = $(this).parent('body').find('div[data-lang="' + langId + '"]');
  // a temporary storage to store all the divs that match the language clicked
  var temp = [];
  // pushing the found divs to the temp storage
  // removing them from the dom
  // and finally looping through the temp storage array and prepending it to the container
  for (var i = 0; i < temp.length; i++) {

This is how I would go about it but I'm sure there are other ways to do this. If you want to see it in action try this JSFiddle