Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Tom Checkley
Tom Checkley
25,181 Points
Posted by Tom Checkley
Tom Checkley
25,181 Points

I'm stuck trying to combine the jquery light box with a function that accesses various divs from a drop down nav menu

this is my script so far

//Lightbox for pop boxs var $overlay = $('<div id = "overlay"></div>'); var $div = $('<div></div>'); //with the image lightbox this was var $image = $('<img>') $overlay.append($div);

$('body').append($overlay);

$('nav a').click(function(){
    var $this = $(this);
    var panel = $this.attr('href');

    $div.attr('id', panel); 
    //with the image light box this was $image.attr('src', panel); 
    //in this code it is crating a div with the id of the panel, instead of showing the div
    $overlay.fadeIn();//this would be changed to $overlay.show()
    return false;
});

$('.close').click(function(){
    $(this).parent().fadeOut();
});
Tom Checkley
Tom Checkley
25,181 Points
Tom Checkley
Tom Checkley
25,181 Points

sorry, this isn't very well worded, the problem I'm having is that this is creating a new div with the id of the link selected as opposed to getting the existing div.

2 Answers

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

jQuery's .attr() method is used to get the value of a particular attribute, or set it.

It sounds like you want to select the div with an id attribute matching the value of your variable panel, or part of it, since it would contain the 'hash' symbol to designate that it should link to an anchor on the same page rather than a separate page.

If that's the case, then you need to look at using an attribute selector, of which jQuery has a few different types. depending on how specific you want to be. You could also use the basic ID selector.

The jQuery selector methods all take a string, so you would just add your panel variable to the string where required to get it to dynamically select the correct div with your specified id attribute.

For example:

$('nav a').click(function(){
    var $this = $(this);
    var panel = $this.attr('href'); // something like #my-div

    $div = $(panel); // ID selector: $('#my-div')
    $overlay.append($div); // since you've reassigned the variable $div, you would need to ensure it is appended to the $overlay again

    $overlay.fadeIn();
    return false;
});

Note that, if your link's href attribute contains more than just the 'hash' and the ID attribute you're looking for, you could use the following to assign to panel instead:

    var panel = $this.prop('hash'); // something like the #my-div from http://example.com/#my-div

Lastly, if you want to post code on the forums and have it 'syntax highlighted' (coloured), you need to surround the code with three backticks (```) on their own line, with the first one designating the type of code your pasting, and with an extra line break before and after. e.g. for JavaScript code:

```js
var $this = $(this);
// comments
```

Would result in the following:

var $this = $(this);
// comments

Hope that all helps!

Tom Checkley
Tom Checkley
25,181 Points
Tom Checkley
Tom Checkley
25,181 Points

Thanks very much Ian. Got it working. Thanks for the tips on posting to the forum. Will be very usefull