Define what div with ID you are viewing

Question

I'm making a one-page website design, but how can I define the div I'm inside?

For example... I have an navigation menu with icons, when I'm inside <div id="contact"></div> the contact icon in the navigation menu change opacity from 1 to 0.5

How do I do that? Hope you understand what I mean.

score 1 · Answer 1 · answered Jun 14 '13 at 20:23

There must be an ID associated to the DIV your icon is inside. Like this:

<div id="contact" class="class-div">
  <img id="img1" class="class-img" src="some-source" />
</div>

So, basically when you hover over that specific DIV, you call the ID of your DIV and change the style. Like this:

#contact {
  opacity: 0.5;
}

If you want to select the parent ID when you hover over the image, you will need to use some sort of JavaScript code or simple import jQuery plugin and change styles using jQuery selectors. Like this:

$('#img1').hover(function() {
        $(this).parents('div#contact').css({ 'opacity': '0.5'  });
    });

score 1 · Answer 2 · edited May 23 '17 at 10:27

I think I know what you mean, I made a jsFiddle for you where you can see how I did it. I used jQuery to check how much you have scrolled down and compared it to the distance that the divs have to the top of the page.

http://jsfiddle.net/Denocle/QBf59/2/

Let's say your HTML looks like this:

<div id="menu">
    <div id="menu-hello"><a href="#hello">Hello</a></div>
    <div id="menu-about"><a href="#about">About</a></div>
    <div id="menu-contact"><a href="#contact">Contact</a></div>
</div>

<div class="big" id="hello">
    <h1>Hello</h1>
    Text
</div>

<div class="big" id="about">
    <h1>About</h1>
    Text  
</div>

<div class="big" id="contact">
    <h1>Contact</h1>
    Text
</div>

Then we have some jQuery like this:

$(window).scroll(function() {
    $('.big').each( function(i){
        var top_of_object = $(this).position().top;
        var bottom_of_object = $(this).position().top + $(this).outerHeight();
        var top_of_window = $(window).scrollTop();
        var id = $(this).attr('id');

        if (top_of_window >= top_of_object && top_of_window <= bottom_of_object) {
            $('#menu-'+id).css({'opacity':'0.5'});
        } else {
            $('#menu-'+id).css({'opacity':'1'});
        }
    }); 
});

This will determine if the top of the browser window is inside one of the divs with the "big" class and then change the opacity for the divs in the menu with the id prefixes of "menu-".

I reused some code from this thread: https://stackoverflow.com/a/9099127/1713635

Define what div with ID you are viewing

2 Answers2