Jump to content

Javascript does my work on my site

Recommended Posts

Site URL: https://www.fresherlife.co.uk/student-jobs

Hello guys, 
I have some code that uses Javascript, this code works on ever other platform but for some reason does not work with squarespace?

AJAX is already disabled and other parts of my site have working javascript.

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>sort</title>

	<style>
		* { box-sizing: border-box; }
		/* ---- isotope ---- */
		.grid {
			margin:0;
			padding:0;
		}
		/* clear fix */
		.grid:after {
		  content: '';
		  display: block;
		  clear: both;
		}
		/* ---- .element-item ---- */
		.element-item {
		  position: relative;
		  width: 49%;
		  height: auto;
		  margin: 5px;
		  padding: 10px;
		  background: #ddd;
		  color: #262524;
		}
		.element-item p{
			color:#000;
			font-weight: 700;
		}
		.element-item span{
			color:#333;
			font-weight: 400;
		}
		@media only screen and (max-width: 1020px) { 
			.element-item {
			  width: 48%;
			}
		}
		@media only screen and (max-width: 620px) { 
			.element-item {
			  width: 99%;
			  margin: 2px;
			  padding: 10px;
			}
		}
		.control-bar{
			display: flex;
			justify-content: space-around;
			padding: 20px 0;
			background-color: #bbb;
			flex-wrap: wrap;
		}
		.control-bar input,.control-bar select,.control-bar option{
			padding: 10px;
			margin:5px;
			border-radius: 5px;
			outline: none;
		}
	</style>
	<script
	  src="https://code.jquery.com/jquery-3.4.1.min.js"
	  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
	  crossorigin="anonymous"></script>

	<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
</head>
<body>
<h1>Our Jobs</h1>
<div class="control-bar">
	<div class="search">
		<input class="quicksearch" type="text" id="search" placeholder="Search...">
	</div>	
	<div class="filters">
		<select name="jobType" id="jobType">
			<option value="*">All</option>
			<option value=".retail">Retail</option>
			<option value=".barWork">Bar Work</option>
		</select>
	</div>
	<div class="filters">
		<select name="location" id="location">
			<option value="*">All</option>
			<option value=".manchester">Manchester</option>
			<option value=".leeds">Leeds</option>
		</select>
	</div>
	<div class="sort-by">
		<select name="sort-by" id="sort-by">
			<option value="*">Original Order</option>
			<option value="low_to_high">Low to High</option>
			<option value="high_to_low">High to Low</option>
		</select>
	</div>
</div>

<div class="grid">
  <div class="element-item leeds retail">
    <h3 class="name">Content Manager</h3>
    <p>Job Type: <span class="jobType">Retail</span></p>
    <p>Location: <span class="location">Leeds</span></p>
    <p>Salary: <span class="salary">5000</span></p>
  </div>
  <div class="element-item leeds barWork">
    <h3 class="name">Marketing Director</h3>
    <p>Job Type: <span class="jobType">Bar Work</span></p>
    <p>Location: <span class="location">Leeds</span></p>
    <p>Salary: <span class="salary">8000</span></p>
  </div>
  <div class="element-item manchester retail">
    <h3 class="name">Web Developer</h3>
    <p>Job Type: <span class="jobType">Retail</span></p>
    <p>Location: <span class="location">Manchester</span></p>
    <p>Salary: <span class="salary">3000</span></p>
  </div>
</div>

<script>
	var filters = ['',''];
	var newFilters = '';
	var qsRegex;
	// init Isotope
	var $grid = $('.grid').isotope({
	  itemSelector: '.element-item',
	  layoutMode: 'fitRows',
	  getSortData: {
	    salary: '.salary parseInt'
	  },
	  filter: function() {
	    var searchResult = qsRegex ? $(this).find('.name').text().match( qsRegex ) : true;
	    var buttonResult = newFilters ? $(this).is(newFilters) : true;
	    return searchResult && buttonResult;
	  }
	});
	
	// flatten object by concatting values
	function concatValues( obj ) {
	  var value = '';
	  for ( var prop in obj ) {
	    value += obj[ prop ];
	  }
	  return value;
	}
	
	// FILTERING (jobtype/location)
	$('.filters select').on( 'change', function() {
		var value = $(this).val();
		var id = this.id;
		if(id === "jobType"){
			filters[0] = value;
		}else if(id === "location"){
			filters[1] = value;
		}
		newFilters = concatValues(filters.filter(function(f){
			return f !== '*';
		}));
		$grid.isotope();
	});

	// SORTING
	$('.sort-by select').on( 'change', function() {
	  var sortByValue = $(this).val();
	  if(sortByValue === "high_to_low"){
	  	// sort highest number first
		$grid.isotope({
		  sortBy: 'salary',
		  sortAscending: false
		});
	  }else if(sortByValue === "low_to_high"){
		// sort lowest number first
		$grid.isotope({
		  sortBy: 'salary',
		  sortAscending: true
		});
	  }else{
	  	return;
	  }
	  $grid.isotope({ sortBy: 'salary' });
	});

	//SEARCH
	var $quicksearch = $('.quicksearch').keyup( 
		debounce( function() {
			  qsRegex = new RegExp( $quicksearch.val(), 'gi' );
			  $grid.isotope();
			}, 200 )
	 );

	// debounce so filtering doesn't happen every millisecond
	function debounce( fn, threshold ) {
	  var timeout;
	  threshold = threshold || 100;
	  return function debounced() {
	    clearTimeout( timeout );
	    var args = arguments;
	    var _this = this;
	    function delayed() {
	      fn.apply( _this, args );
	    }
	    timeout = setTimeout( delayed, threshold );
	  };
	}

</script>
</body>
</html>

 

Link to comment
  • Replies 0
  • Views 412
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.