Question

I’m making a website that uses a Javascript sorter. In addition to the sorter, I also put in some custom javascript, to make certain div’s clickable. My reasoning was that using the property just couldn’t do all that we wanted it to do, so I stuck with divs, and used javascript to make them function.

Take a look here —
http://www.opohills.com/taipei-rentals.php

You can scroll down to where you see the search bar, and click on one of the apartments. When you go back click (1 bedroom), you’ll see that clicking on the apartments doesn’t work anymore.

I’m not quite sure what to make of this at all. The javascript for the clickability is at the bottom of the page.

What are your thoughts on this?

Here’s my javasscript

    <script type='text/javascript'>
    $(".box_1").click(function(){
         window.location=$(this).find("a").attr("href"); 
         return false;
    });
     $(".box_2").click(function(){
         window.location=$(this).find("a").attr("href"); 
         return false;
    });
         $(".box_3").click(function(){
         window.location=$(this).find("a").attr("href"); 
         return false;
    }); 
    $(".apt2").click(function(){
         window.location=$(this).find("a").attr("href"); 
         return false;
    });   
  </script>

Thoughts?

UPDATE

In accordance to the suggestions, I’ve updated the code by moving the javascript for clickability above jquery.quicksand, and initiated it only after the document was ready.

Even with these changes, I’m still having trouble getting it to work.

The latest version of the site can be seen here—

http://www.opohills.com/taipei-rentals.php

Your thoughts greatly appreciated

Answer 1

So you can try to edit our file sorter-settings.js and replace by this code (based on the documentation available here (http://razorjack.net/quicksand/docs-and-demos.html) :

  $(document).ready(function() {



  // get the action filter option item on page load
  var $filterType = $('#filterOptions li.active a').attr('class');

  // get and assign the ourHolder element to the
    // $holder varible for use later
  var $holder = $('ul#ourHolder');

  // clone all items within the pre-assigned $holder element
  var $data = $holder.clone();

  // attempt to call Quicksand when a filter option
    // item is clicked
    $('#filterOptions li a').click(function(e) {
        // reset the active class on all the buttons
        $('#filterOptions li').removeClass('active');

        // assign the class of the clicked filter option
        // element to our $filterType variable
        var $filterType = $(this).attr('class');
        $(this).parent().addClass('active');

        if ($filterType == 'all') {
            // assign all li items to the $filteredData var when
            // the 'All' filter option is clicked
            var $filteredData = $data.find('li');
        } 
        else {
            // find all li elements that have our required $filterType
            // values for the data-type element
            var $filteredData = $data.find('li[data-type=' + $filterType + ']');
        }

        // call quicksand and assign transition parameters
        $holder.quicksand($filteredData, {
            duration: 800,
            easing: 'easeInOutQuad',
                    enhancement: function() {
                        $("#ourHolder li").click(function() { window.location.href=$(this).find('a').attr('href')});
                        }
        }
            );
        return false;
    });
});

Additinaly, I think that this code is useless on your html content.

  <!--Begin Sorter-->
    <script type='text/javascript'>
    $(document).ready(function() {
          $('#source').quicksand( $('#destination li') );
     });
  </script>