0

I am trying to display a table (or ul) that will contain a navigation bar on my page, but only displays the tabs that will contain jquery called divs present on the html.

Essentially, it's a single html document that contains all divs, jquery hides all divs but the first, and the nav bar will allow to navigate through each. Now I am trying to make it easy to use for my client, so that the menu items will only exist if the div for it also exists. I've got most of it done, the only thing is actually knowing if a div exists.

I tried using this:

if(document.getElementById("page1")) {
document.write("<b>Good morning</b>");}
else 
{
document.write("<b>Bad morning </b>");
}

When I place the above code within the div page1, it returns true. Is there no way to do it from the top of the page and not within the div?

Thanks!

Update:

As suggested by many, I have used the following:

$j(document).ready(function(){
    //Hide the sections we don't need right away
    $j("#page2").hide();
    $j("#page3").hide();
    $j("#page4").hide();
    if ($j('#page1').length > 0) {
var page = 'Excellent Morning'   ;
}
});

Then when I try to use:

document.write(page);

It displays the following instead: [object HTMLBodyElement]

Sherif
  • 269
  • 3
  • 9
  • 19
  • Google `$(document).ready()`. You can place that code anywhere (although don't use `document.write`). It's much cleaner to have your code separate and not mixed in with the markup. – davin Oct 05 '11 at 19:50

3 Answers3

1

Why not use jQuery since you are already?

if ($('#page1').length > 0) {
    // do stuff...
}

EDIT: As davin pointed out, your code should be evaluated after the DOM has been rendered. You can do this by placing it in a $(document).ready call:

$(document.ready(function() {
    if ($('#page1').length > 0) {
        // do stuff...
    }
});

EDIT 2: Based on the OP's edits, a better solution would be to add a placeholder element and to set its content (like FishBasketGordo suggested). An example of this:

$(document.ready(function() {
    //Hide the sections we don't need right away
    $("#page2, #page3, #page4").hide();
    if ($('#page1').length) {
        $('#myPlaceHolder').html('<b>Good Morning</b>');
    }
    else
    {
        $('#myPlaceHolder').html('<b>Bad Morning</b>');
    }
});

Somewhere else in the document...

<span id="myPlaceHolder"></span>
RoccoC5
  • 4,185
  • 16
  • 20
  • 1
    or just `($('#page1').length)` ;) – cillierscharl Oct 05 '11 at 19:50
  • Does not seem to work for some reason, I changed my if clause above for yours, left everything else the same, still prints Bad morning! – Sherif Oct 05 '11 at 19:51
  • To your Edit; I could then create a variable and call it elsewhere in my page, correct? – Sherif Oct 05 '11 at 20:00
  • Yes, you could. If you are editing content based on whether the element exists, you should perform all of your logic within the `$(document).ready`. – RoccoC5 Oct 05 '11 at 20:06
  • Thanks this will probably the best solution here. Now I edited my post with an update, any idea what I'm doing wrong? – Sherif Oct 05 '11 at 20:12
  • You've defined `var page` within a function, so it's out of scope when you attempt to reference it. You can declare it as a global variable (outside of the function), but it would probably be best to define a placeholder element and modify its text like FishBasketGordo suggested. – RoccoC5 Oct 05 '11 at 22:25
  • Makes absolute sense, thanks! How would I go about declaring a global var outside the function when I need it to be within the document.ready function to catch the div id that is lower on the page? – Sherif Oct 05 '11 at 22:44
  • I had never used .html, I will be testing a little bit but the if else now works, I'll just have to find a way to use that to render what I need and allow the client minimal mods! Thanks a lot for your help, both of you! – Sherif Oct 06 '11 at 14:35
1

If you place it at the top of the page, the page1 div doesn't exist when the code runs. If you are using jQuery, place the code in a $(document).ready event. Then, you can put it where you want it within the markup. Here's an example:

$(document).ready(function() {
    if (document.getElementById("page1")) {
        document.write("<b>Good morning</b>");
    } else {
        document.write("<b>Bad morning </b>");
    }   
});

Although, rather than doing a document.write, I would consider having a placeholder span or div, and setting it's innerHTML property (or use jQuery's html method). I would also use CSS for my style instead of <b> tags, but that's another matter entirely.

FishBasketGordo
  • 22,904
  • 4
  • 58
  • 91
  • Would this mean however that the client would then have to modify the html content directly in the function above? My hope was to simply tell him to add a div before and after each of his sections to have the associated tab automatically "appear" in the nav bar. He will never need more than 5 tabs so I simply need to have 5if clauses ready to display the associated tabs. As for the tag don't worry I'd never use that, just copied that from a document.write example online :p – Sherif Oct 05 '11 at 19:56
  • I'm confused. How is adding a `div` not modifying the HTML content? – FishBasketGordo Oct 05 '11 at 19:58
  • Well it's a simple copy paste operation for him, I'm guessing I can simply tell him where to put it. I'll be right back I'll try a few things, thanks for your help so far! – Sherif Oct 05 '11 at 19:59
  • OK, it's a little clearer. Anyway, if I understand what you're going for, you can do what you originally planned with the code above. Your client won't need to modify it. The key is that the code that accesses the the `div` gets run after the `div` is rendered on the page. That's what `$(document).ready` ensures. – FishBasketGordo Oct 05 '11 at 20:54
  • Thanks, it makes more sense to me now. I tried adding the div checker and setting a var with the content I want to print. When I write the var later on however, it returns this : [object HTMLBodyElement]. I have no idea what that means :( – Sherif Oct 05 '11 at 21:14
  • `page` is a local variable within the function you pass to `ready`. You need to declare it in a global scope if you want to access it globally. – FishBasketGordo Oct 06 '11 at 02:41
0

You can use

if ($(selector).length > 0) {
    // element exists
}

or you can check out this post for a more elegant solution Is there an "exists" function for jQuery?

Community
  • 1
  • 1
Joel McBeth
  • 1,278
  • 16
  • 21