Final Macalester New Title page HTML http://www.macalester.edu/library/new/index.html

Final_Macalester_NewTitle.html

<script src="list.min.js"></script>
<script src="list.pagination.min.js"></script>
<style>
.pagination li {
  display:inline-block;
  padding:5px;
}
.active a {
  font-weight: bold;
  text-decoration: none;
  pointer-events: none;
  cursor: default;
  color: #EA6506;
}
</style>

<div id="new-arrival-list">
<p> 

  <form class="inline-form"> 
 
    <!-- label class="control-label" for="select_element_h">Search for a Title or Author:</label> 
   <input type="text" onfocus="clearForm();" style="width:50%;" placeholder="Search for a Title, Author, or Department..." class="search" />
    <br / -->
  
        <label class="control-label" for="select_element_h">Select a department:</label>
    
<select name="fund" class="fund" id="fund" onfocus="clearForm();" onchange="listObj.search(this.value, ['dept']);">
        <option name="all" value="all">Select a department...</option>
        <option name="bame" value="American Studies">American Studies</option>
        <option name="bant" value="Anthropology">Anthropology</option>
        <option name="bart" value="Art">Art</option>
        <option name="balc" value="Asian Languages and Cultures">Asian Languages and Cultures</option>
        <!-- option name="bbio" value="Biology">Biology</option -->
        <option name="bche" value="Chemistry">Chemistry</option>
        <option name="bcla" value="Classics">Classics</option>
        <option name="bdan" value="Dance">Dance</option>
        <!-- option name="beco" value="Economics">Economics</option -->
        <option name="bedu" value="Education">Education</option>
        <option name="beng" value="English">English</option>
        <option name="benv" value="Environmental Studies">Environmental Studies</option>
        <option name="bfre" value="French">French</option>
        <option name="bgeg" value="Geography">Geography</option>
        <!-- option name="bgel" value="Geology">Geology</option -->
        <option name="bger" value="German">German</option>
        <option name="bspa" value="Hispanic Studies">Hispanic Studies</option>
        <option name="bhis" value="History">History</option>
        <option name="bint" value="International Studies">International Studies</option>
        <!-- option name="blat" value="Latin American Studies">Latin American Studies</option -->
        <option name="blin" value="Linguistics">Linguistics</option>
        <option name="bmat" value="Mathematics and Computer Science">Mathematics and Computer Science</option>
        <option name="bhum" value="Media and Cultural Studies">Media and Cultural Studies</option>
        <option name="bmus" value="Music">Music</option>
        <!-- option name="bneu" value="Neuroscience">Neuroscience</option -->
        <option name="bphi" value="Philosophy">Philosophy</option>
        <option name="bphy" value="Physics">Physics</option>
        <option name="bpol" value="Political Science">Political Science</option>
        <!-- option name="bpsy" value="Psychology">Psychology</option -->
        <option name="brel" value="Religious Studies">Religious Studies</option>
        <option name="brus" value="Russian">Russian</option>
        <option name="bsoc" value="Sociology">Sociology</option>
        <option name="bthe" value="Theater">Theater</option>
        <option name="bwom" value="Woman/Gender Studies">Woman/Gender Studies</option>
  </select> 
  
  <br/><label class="control-label" for="select_element_h">or Select a Format:</label>
  <button class="button" type="reset" onClick="formatSearch('Video_DVD');">DVD</button>&nbsp;&nbsp;<button class="button" type="reset" onClick="formatSearch('Book');">Book</button>&nbsp;&nbsp;<button class="button" type="reset" onClick="formatSearch('Book_Digital');">eBook</button>&nbsp;&nbsp;<button class="button" type="reset" onClick="formatSearch('Music_CD');">CD</button>
  &nbsp;&nbsp;&nbsp;&nbsp;
  <button class="button orange-button icon-to-right icon-refresh" type="reset" onClick="clearForm();">Reset</button>
</form>
  </p>
    <hr>

<ul class="newsListing list clearfix">
#dotParse("/library/new/new_arrival_list.vtl")
</ul>

    <h3><ul class="pagination"></ul></h3>
  </div>

<script>
  var paginationOptions = {
    name: "pagination",
    paginationClass: "pagination",
    innerWindow: 2,
    outerWindow: 2,
    left: 1,
    right: 1
  };
  var listOptions = {
    valueNames: [ 'name', 'dept', 'type' ],
    page: 8,
    plugins: [
         ListPagination(paginationOptions)
    ]
  };

  var listObj = new List('new-arrival-list', listOptions);
  
  //added for URL parm passing of department
  //ex: http://www.macalester.edu/library/new/index.html?dept=American%20Studies
  //ex: http://www.macalester.edu/library/new/index.html?dept=Chemistry
  var urlDept = getQueryVariable("dept")
  if (urlDept != "") {
    listObj.search(urlDept, ['dept']);
    $('select').val(urlDept);
  }
    
  function clearForm() {
    listObj.search();
    $('select').val('all');
    $('input:text').val('');    
  }
  
  function formatSearch(p1) {
    clearForm(); 
    listObj.search(p1, ['type']);   
  }
  
  function getQueryVariable(variable) {
    var query = window.location.search.substring(1)
    var vars = query.split("?");
    for (var i=0;i<vars.length;i++) {
      var pair = vars[i].split("=")
      if(pair[0] == variable){
        if(pair[1].indexOf('%20') != -1){
            console.log(pair[1].indexOf('%20'))
            var fullName = pair[1].split('%20')
            console.log(fullName)
            return fullName[0] + ' ' + fullName[1]
        }
        else {
            return pair[1];
        }
    }
  }
  return(false)
  }

</script>

<p style="font-size:small;">The New Arrival page displays the new items from <a href="http://www.macalester.edu/">Macalester’s</a> <a href="http://www.macalester.edu/library/">DeWitt Wallace Library</a> for the 2016-17 academic year. Powered by <a href="http://www.listjs.com/">List.js</a> with images provided by <a href="https://www.oclc.org">OCLC</a>.
</p>