CODEWITHSUNDEEP
javascriptsvg
user2533212
user2533212

Reputation: 61

Javascript show/hide links not working

Click on Ike's and you'll notice a div appear below the map. Try to click on the link. It's not working.

I'm using this to show/hide the div's on click

function ikesClick() {
            filler.style.display='none';
            FrontDeskDesc.style.display='none'; 
            LoungeDesc.style.display='none';    
            StudyDesc.style.display='none'; 
            IkesDesc.style.display='inline';    
        };

If you view the page source, you can see the entirety of the Javascript there.

My question is, what do I do to make the link clickable?

I'm almost certain this is happening because of the way it's displaying none/inline.

You can observe the HTML here:

<section id="roomInfo">
    <section id="filler" style="display:inline">
    Hover over or select a colored area for details about individual rooms and locations in the library.
    </section>
    <section id="IkesDesc" style="display:none;">
    <h1>Ike's - Late Night Diner</h1>
    <p>
    In the hub of President’s Park, Ike’s provides a late night dining option.  Visit <a href="dining.gmu.edu">dining.gmu.edu</a> for hours of operation.
    </p>
    <img src="Ikes.JPG" style="max-width:500px; width:100%;" alt="Ike's Facade" />
    </section>
    <section id = "FrontDeskDesc" style="display:none;">
    Get your temporary keys and stuff here!
    </section>
    <section id ="LoungeDesc" style="display:none;">
    loungin'
    </section>
    <section id ="StudyDesc" style="display:none;">
    Studying for finals yo
    </section>
</section><!--end room info-->

The problem persists under the section "IkesDesc" where the link to dining.gmu.edu is.

Upvotes: 1

Views: 181

Answers (1)

Jean-Paul
Jean-Paul

Reputation: 21180

First of all, your link is incomplete:

<a href="dining.gmu.edu">dining.gmu.edu</a>

So this should be something like:

<a href="https://gmu.sodexomyway.com/home.xhtml">dining.gmu.edu</a>

Also, since you have jQuery already running on the page, you might want to simplify your code to:

$("#Ikes").click(function() {

  $(".objects").hide();
  $(this).show();

});

Where Ikes is the id of the clickable img and .objects is the class of all the clickable images.

Also, I saw that it is not possible to click Ikes in FireFox. So you might want to look into that as well.

UPDATE

What seems to be causing the problem is your layout:

you use position:relative; and position:absolute; throughout whereas this is quite dangerous when 'spawning' divs.

For example:

#svg {
    display: block;
    left: 0;
    margin: -55px 0 0;
    padding: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

#roomInfo {
    background-color: #CCCCCC;
    margin-top: 75%;
    outline: 1px solid gray;
    padding: 5px;
    width: 100%;
}

Also, you seem to position some elements as if they have position absolute whereas they actually are placed relative.

I advice you to make the total layout relative such that it is responsive and can handle things as smaller screens and the spawning of divs.

I helped you a bit in this jsFiddle, but I'll leave the rest for you.

Also, look at my jQuery code which basically reduces THIS to the jQuery used in my jsFiddle:

$(document).ready(function() {
    $("#area1").click(function() {
       $(".extra").hide();
       $("#IkesDesc").show();
    });

    $("#area2").click(function() {
       $(".extra").hide();
       $("#FrontDeskDesc").show();
    });

    $("#area3").click(function() {
       $(".extra").hide();
       $("#LoungeDesc").show();
    });

    $("#area4").click(function() {
       $(".extra").hide();
       $("#StudyDesc").show();
    });
});

I made the example working so you can copy/paste as you please.

Also, I added the following:

var position = $("#IkesDesc").position();
   scroll(0,position.top);

This is a really cool trick that will scroll to the div that just appeared such that the user actually notices something changed (I kind of miss that in your current site).

You can check it as a working example HERE.

I hope that helped you out!

Good luck!

Upvotes: 0

Related Questions