If url hash does not contain any string, execute function

Question

I am writing a script to change which element is visible based on string in hash. The script will go on a blog page where the user can filter blog posts by category. When the user filters to a certain category, that category is appended to the url in the form of a hash link.

example.com/#categoryA

At that point, I want a text box corresponding to each set of filtered posts to appear alongside the portfolio. However, if the user has not filtered the posts, or goes from filtering posts to viewing all posts, there is a single hash in the url like this:

example.com/#

In this case, I want a default text box to be shown.

My script (below) does everything except show the default text box when the url ends in just a hash.

var frag = window.location.href.split("#");
var hashClassChange = function() {
  if (window.location.hash) {
    //If the url hash contains commercial, show the commercial box, hide the last active box
    if (window.location.hash.indexOf('commercial') == 1) {
      $('#box1').addClass("active");
      $('#default').removeClass("active");
      $('#box2').removeClass("active");
      $('#box3').removeClass("active");
      $('#box4').removeClass("active");
    } 
    //If the url hash contains hospitality, show the hospitality box, hide the last active box
    else if (window.location.hash.indexOf('hospitality') == 1) {
      $('#box2').addClass("active");
      $('#default').removeClass("active");;
      $('#box1').removeClass("active");
      $('#box3').removeClass("active");
      $('#box4').removeClass("active");
    } 
    //If the url hash contains municipal-institutional, show the municipal / institutional box, hide the last active box
    else if (window.location.hash.indexOf('municipal-institutional') == 1) {
      $('#box3').addClass("active");
      $('#default').removeClass("active");
      $('#box1').removeClass("active");
      $('#box2').removeClass("active");
      $('#box4').removeClass("active");
    } 
    //If the url hash contains residential, show the residential box, hide the last active box
    else if (window.location.hash.indexOf('residential') == 1) {
      $('#box4').addClass("active");
      $('#default').removeClass("active");
      $('#box1').removeClass("active");
      $('#box2').removeClass("active");
      $('#box3').removeClass("active");
    } 
    //If the url hash does not contain any string, show the default box
    else if (!frag[1].length) {
      $('#default').addClass("active");
      $('#box1').removeClass("active");
      $('#box2').removeClass("active");
      $('#box3').removeClass("active");
      $('#box3').removeClass("active");
    }
  }
};
// repeats function every 500 milliseconds to check if the url hash has been changed
setInterval(hashClassChange, 500);

How do I fix this script so that the default text box shows when the url ends in a single hash?

I have a codepen set up (http://codepen.io/ben393/pen/GNVqRX) to show this in action.

Answer 1

The issue is because when you click on default window.location.hash will be an empty string so it will not go inside first if in result the last clicked one will be visible.

remove if (window.location.hash) {} part and it will work as you are expecting.

var frag;
frag = window.location.href.split("#");
var hashClassChange = function() {
	
    if (window.location.hash.indexOf('commercial') == 1) {
      $('#box1').addClass("active");
      $('#default').removeClass("active");
      $('#box2').removeClass("active");
      $('#box3').removeClass("active");
      $('#box4').removeClass("active");
    } 
    else if (window.location.hash.indexOf('hospitality') == 1) {
      $('#box2').addClass("active");
      $('#default').removeClass("active");;
      $('#box1').removeClass("active");
      $('#box3').removeClass("active");
      $('#box4').removeClass("active");
    } 

    else if (window.location.hash.indexOf('municipal-institutional') == 1) {
      $('#box3').addClass("active");
      $('#default').removeClass("active");
      $('#box1').removeClass("active");
      $('#box2').removeClass("active");
      $('#box4').removeClass("active");
    } 
    else if (window.location.hash.indexOf('residential') == 1) {
      $('#box4').addClass("active");
      $('#default').removeClass("active");
      $('#box1').removeClass("active");
      $('#box2').removeClass("active");
      $('#box3').removeClass("active");
    } 
    else if (typeof frag[1] == 'undefined' || !frag[1].length) {
      $('#default').addClass("active");
      $('#box1').removeClass("active");
      $('#box2').removeClass("active");
      $('#box3').removeClass("active");
      $('#box3').removeClass("active");
    }
};

setInterval(hashClassChange, 500);

body{
  font-family:sans-serif;
}
#default{
  background:red;
}
#box1{
  background:orange;
}
#box2{
  background:yellow;
}
#box3{
  background:green;
}
#box4{
  background:lightblue;
}
li {
    display: inline-block;
    width: 400px;
    padding: 10px;
    position: absolute;
    opacity: 0;
    transition: opacity 1s;
}
li.active{
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Links to filter posts:
<a href="#">no category (show all posts)</a> |
<a href="#commercial">Commercial</a> |
<a href="#hospitality">Hospitality</a> |
<a href="#municipal-institutional">Municipal / Institutional</a> |
<a href="#residential">Residential</a>

<ul>
  <li id="default" class="active"><b>Default text</b> Quisque posuere augue eu vulputate vestibulum. Mauris lacinia diam sit amet magna vulputate sodales et vel magna. Integer eros diam, faucibus nec mi sit amet, suscipit ornare massa. Praesent convallis ut lorem fringilla fringilla. Pellentesque sed nisi sapien. Maecenas sit amet placerat augue. Nullam auctor ligula risus, et laoreet nisl varius ac. Donec euismod erat neque, in viverra sapien luctus eget.</li>
  <li id="box1"><b>Commercial text</b> Nulla justo quam, sagittis in turpis a, rutrum dapibus tellus. Sed porttitor massa nec urna rutrum finibus. In sit amet sagittis orci. Proin ligula quam, tempus eget ligula nec, gravida venenatis tellus. Quisque vitae nisl a ipsum semper finibus. Proin vehicula molestie arcu, nec facilisis justo tempus id. Morbi lectus dui, luctus non tellus ac, varius aliquam dui. Morbi commodo nulla eget luctus ullamcorper. Nulla facilisi. Fusce dapibus vestibulum sapien, ut laoreet libero pharetra in.</li>
  <li id="box2"><b>Hospitality text</b> Sed eget nunc lobortis, varius felis ut, scelerisque tortor. Maecenas vitae nunc leo. Mauris non facilisis risus, vel tincidunt enim. Donec pharetra nisi id suscipit consectetur. Integer lacinia in eros at tincidunt. Praesent et enim sem. Sed in viverra erat, vitae tempus felis. Vestibulum id sodales leo.</li>
  <li id="box3"><b>Municipal / Institutional text</b> Maecenas rutrum diam nec sapien consectetur, a viverra enim commodo. Curabitur a eros risus. Quisque viverra elementum ipsum, sit amet commodo libero tristique non. Nullam blandit interdum dolor non vulputate. Morbi et lacus blandit, blandit ipsum non, mollis eros. Duis sit amet ex sed felis congue vestibulum. Aliquam ultrices viverra est, quis posuere est consectetur vel. Duis viverra magna sed dignissim semper. Pellentesque varius pretium justo, eleifend placerat lectus fringilla non.</li>
  <li id="box4"><b>Residential text</b> Pellentesque dui enim, pulvinar et dignissim a, ultricies sed sapien. Mauris pulvinar ipsum a est feugiat euismod. Cras sed rutrum lorem. Aenean cursus a augue in laoreet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse non luctus lacus, in dignissim diam. Quisque vitae ipsum ac eros cursus consectetur non id libero. Aenean mauris nisl, sagittis vitae nisi et, sagittis venenatis ligula. Donec libero odio, vulputate et lacinia quis, feugiat quis dui.</li>
</ul>

Answer 2

Not sure why you are using this frag variable, it never changes.

You can do the following

if(window.location.hash.length < 2) { ..... }

Also if there is nothing stopping you, you can use the onhashchange event instead of continuous checking through setInterval

$(window).bind('hashchange', hashClassChange);

Answer 3

Could you please try with below code:

//If the url hash does not contain any string, show the default box
else if (frag.length < 1 || (frag.length > 1 && frag[1].length == 0) ) {
    //if we don't have # in URL then frag will have only single 0th index
    //if we have # in URL but nothing after that then its length will be zero
  $('#default').addClass("active");
  $('#box1').removeClass("active");
  $('#box2').removeClass("active");
  $('#box3').removeClass("active");
  $('#box3').removeClass("active");
}

Answer 4

You can check for last char is # or not .

var lastChar = location.pathname.substr(location.pathname.length - 1); 
if(lastChar == '#')
 //Your default textbox show hide logic goes here