CODEWITHSUNDEEP
javascriptjqueryhtmlif-statement
Becky
Becky

Reputation: 2289

if statement logic not producing the desired result

I have a page called 'services'. When you go to that page from the navigation menu I do not want any of the services to show up (too complicated to explain it). Then on my index page I have links for each type of service there is. If you click on a link it will take you to the services page and only show that service.

For the individual service links, they look like this:

<a href="serviceCheck2#service1">Service 1</a>
<a href="serviceCheck2#service2">Service 2</a>
<a href="serviceCheck2#service3">Service 3</a>

This aspect of this system works. It takes me to the services page and only shows the service I clicked on, from the link.

The part that doesn't work is not showing the services OR the service-display-box from the navigation menu. Right now all of the services show and the service-display-box does as well.

I tried to create logic to prevent this from happening, but it isn't working. In the javascript below you will see comments like //added, this is what I added to try and create logic that it would show the service-display-box and specific service item if there was a hash in the browser, or else it would not show the service-display-box at all.

What is wrong with my logic?

$(function(){

    //get the section name from hash
    var sectionName = window.location.hash.slice(1);

    if (sectionName != null) { //added
    //then show the section
     $('#service-display-box').show();
     $(window.location.hash).show().scroll().siblings().hide();
    } else { //added
        $('#service-display-box').hide(); //added
    } //added
})

#service-display-box {
    display: none;
}
<div id="service-display-box">
      <div id="service-display-box-container">
        <div class="service-item-box" id="service1">
          <div class="service-item-title">1</div>
          <h2 class="service-item-description"> Service</div>
        </h2>
        <h2 class="service-item-box" id="service2">
          <div class="service-item-title">2</div>
          <div class="service-item-description"> Service</div>
        </h2>
        <h2 class="service-item-box" id="service3">
          <div class="service-item-title">3</div>
          <div class="service-item-description"> Service</div>
        </h2>
        <h2 class="service-item-box" id="service4">
          <div class="service-item-title">4</div>
          <div class="service-item-description"> Service</div>
        </h2>
        <h2 class="service-item-box" id="service5">
          <div class="service-item-title">5</div>
          <div class="service-item-description"> Service/div>
        </h2>
        <h2 class="service-item-box" id="service6">
          <div class="service-item-title">6</div>
          <div class="service-item-description"> Service</div>
        </h2>
        <div style="clear:both;"></div>
        <div id="service-top"><span id="service-top-border">Back to all services</span></div>
      </div>
    </div>

I've also tried

if (sectionName > 1) {

Upvotes: 0

Views: 36

Answers (1)

mdickin
mdickin

Reputation: 2385

window.location.hash.slice(1) returns an empty string, which is not the same as null. I think you want to check .length == 0 instead.

Upvotes: 3

Related Questions