About design and nearby

Using location.search to locate a parameter’s value

Posted: February 9th, 2016 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , , | No Comments »

Once I worked on jQuery isotope and the task was to link to a specific category, so that users can come from other pages to the filtered category. So if I had a page with services list (services.html) and wanted to filter the services by design it would look like (services.html/?mode=design) and show the design proposition only.

I decided to use the value parameter:
1. ‘location.search’ property returns the querystring part of a URL; for http://www.swd.com/services.htm/?mode=design

  1. var x = location.search;

the result of ‘x’ is

  1. ?mode=design


2. split() method split a string into an array of substrings – .split(“&”)[0] splits it into two strings and takes the first one;
3. and I simply add my parameter’s value to the URL.

My solution:

  1. var mode = window.location.search.split('?')[1];
  2. if(mode)
  3. {
  4.     mode = mode.split('=')[1];
  5.    if(mode)
  6.    {
  7.       mode = mode.split('&')[0];
  8.       var $portfolio = $('.portfolio-items');
  9.       $portfolio.isotope({ filter: '.' +  mode});
  10.    }    
  11. console.log('mode = ' + mode);
  12. }

To know which filter is opened, I print ‘mode’ definition into console.

My HTML:

  1. <ul class="center inline portfolio-filter">
  2.  <li><a href="#" class="active" data-filter="*">All</a></li>
  3.  <li><a href="#" data-filter=".design">Design</a></li>
  4. </ul>
  5. <div class="row">
  6.     <div class="portfolio-items isotope">
  7.  <div class="portfolio-item design col-lg-4 col-md-6 col-sm-6 col-xs-12 isotope-item">  
  8.     <img src="./images/design.jpg" alt="Design service">
  9.         </div>
  10.     </div>
  11.  </div>
  12. <div class="row">
  13.     <div class="portfolio-items isotope">
  14.  <div class="portfolio-item col-lg-4 col-md-6 col-sm-6 col-xs-12 isotope-item">  
  15.     <img src="./images/swd.jpg" alt="SWD">
  16.         </div>
  17.     </div>
  18.  </div>

Final code:

  1. $(window).load(function(){
  2.   var $portfolio_selectors = $('.portfolio-filter >li>a');
  3.   var $portfolio = $('.portfolio-items');
  4.   $portfolio.isotope({
  5.    itemSelector : '.portfolio-item'    
  6.   });
  7.  
  8.   $portfolio_selectors.on('click', function(){
  9.    $portfolio_selectors.removeClass('active');
  10.    $(this).addClass('active');
  11.    var selector = $(this).attr('data-filter');
  12.    $portfolio.isotope({ filter: selector });
  13.    return false;
  14.   });
  15.  });
  16.  
  17.  $(document).ready(function()
  18.  {
  19.   setTimeout(function()
  20.   {
  21.    var mode = window.location.search.split('?')[1];
  22.    if(mode)
  23. {
  24.     mode = mode.split('=')[1];
  25.    if(mode)
  26.    {
  27.       mode = mode.split('&')[0];
  28.       var $portfolio = $('.portfolio-items');
  29.       $portfolio.isotope({ filter: '.' +  mode});
  30.    }    
  31. console.log('mode = ' + mode);
  32. }
  33.   }, 1000);
  34.  
  35.  });

*I had to set timeout, because there was not enough time for isotope gallery elements to load correctly.

Share Button

Check Related Posts:


Leave a Reply


  • 2 × six =

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now