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


  • Content Count

  • Joined

  • Last visited

Everything posted by Royster1994

  1. 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>
  2. Hello, Can anyone explain how i could change the css for the middle item that's displayed on screen in a carousel ? For example i have 10 items but only 3 show on screen but i want to make the middle item bigger, but when i press next to view the other items i still want the middle item in view to be bigger.
  3. Would you happen to know how i can target css for all images in just 1 page?
  4. Hello guys, i'm really struggling to find away to change the color of the placeholder text within my form fields. I can change the background color of the form fields but not the color of the text. The placeholder text does not stand out enough when the background color is anything but white. Does anyone have any suggestions?
  • Create New...