Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Javascript does my work on my site


Royster1994

Question

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 post
  • Answers 0
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...