hello , this is an outstanding module ,

unfortunately there is something wrong in my case, here is a link to my site :

http://www.onnamy.com/web/institutions

i don't know what is wrong , is it because i am using Arabic characters or what ?

don't know really appreciate your help

thanks.

Comments

salateenoo’s picture

salateenoo commented
Title: When i Click on Term , all content fade away , and nothing dade inn ?!!? » When i Click on Term , all content fade away , and nothing fade inn ?!!?
kreynen’s picture

kreynen commented
Status: Active » Closed (works as designed)

I don't think Arabic characters are the problem... or at least not the problem yet. If you look at the data-option-value in the filer block links...

<a class="filterbutton" data-option-value=".بورسعيد" href="#filter" data-bitly-type="bitly_hover_card">بورسعيد</a>

That has to match the data-category in the isotope elements...

<div class="isotope-element isotope-element-0 isotope-item" data-category="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 0px, 0px); ">

If the data-categories are empty in every isotope-element, clicking any term will hide all the elements because none match the filter.

As a few people have pointed out, you MUST remove the default CSS in addition to adding the defining the HTML wrapper of the field with a value that matches you filter to use a DIV with a CLASS of isotope-filter (http://drupal.org/files/images/isotope-filter.png).

Once you correct that problem, if Arabic characters are a problem please re-open the issue and I'll take a look at that.

salateenoo’s picture

salateenoo commented
Priority: Major » Normal
Status: Closed (works as designed) » Needs review

I did what you have recommended , i think its working a way or another But , the layout has crashed strangely after i wrapped it In a Div with class isotope-filter, once i remove this , the layout return normally , enable it , it crashed again with no clue what is happening ?

http://www.onnamy.com/web/institutions

Please have a look and Advise!

Thank you for your support.

kreynen’s picture

kreynen commented
Status: Needs review » Closed (works as designed)

Now you have a bunch of isotope element divs outside of your isotope-container div. I have no idea how you've done that, but wrapping the entire layout in isotope-filter isn't going to fix it. The isotope-filter div exists OUTSIDE of the isotope-container. The part of the structure you've screwed up is the isotope-container and isotope-elements. It should look something like...

<div class="isotope-filter">....</div>

<div class="isotope-container">
  <div class="isotope-element">...</div>
  <div class="isotope-element">...</div>
  <div class="isotope-element">...</div>
  <div class="isotope-element">...</div>
</div>

The ONLY filter that would work is القاهرة because that's the only isotope-element INSIDE the isotope-container.

<div id="isotope-container" style="position: relative; overflow: hidden; height: 170px; " class="isotope">
                    <div class="isotope-element isotope-element-0 القاهرة isotope-item" data-category="القاهرة" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 0px, 0px); ">
          
          <a href="/web/node/61" data-bitly-type="bitly_hover_card"><font><font>Muhammadiyah family in Shubra</font></font></a>    
          </div>      
</div>

But you don't even have a filter for القاهرة, so clicking any other filter makes the item go away.

PLEASE try to configure this again on a clean Drupal install following the steps in "Beardcast" #1: Using Views Isotope w/ a Full Beard. It doesn't seem like you understood the basic structure of the JQuery Isotope before trying to implement it the content of an existing site.

salateenoo’s picture

salateenoo commented

Thank you for you great help , its working now as it should be , you can check it in the link i sent before , sorry for bothering you.

mdyorke’s picture

mdyorke commented

Hey salateenoo,

I am having the same issue with the data-category showing empty. How did you solve this issue??

samerjh’s picture

samerjh commented

Please inform us how you fix this?

dexiecarla’s picture

dexiecarla commented
Issue summary: View changes

Subscribing.

Im having the same issue
in where data-category is empty

<div class="isotope-element isotope-element-0  isotope-item" data-category="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 0px, 0px);"><div><span>Title:</span>
<span><a href="/dxii/node/104">testin</a></span></div>
</div>
petertran.bit’s picture

petertran.bit commented

I followed this tutorial and ran into the same issue. (http://youtu.be/6h2NqfbWv9Q?t=9m30s)

If you jump to 9:30 of the above video, the author mentions to make sure you change the styles settings as kreynen mentioned above. What was strange to me was when I clicked on "Customize Field HTML", no additional fields popped up as the video shows. I went in circles finding it but I ended up just inspecting the element and removing the display none over those extra fields.

Hope this works for someone else too!