Javascript does my work on my site

Royster1994 · January 30, 2020

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>

Javascript does my work on my site

Recommended Posts

Royster1994

Link to comment

Archived

News

Events

Circle Day

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources