Hiding a div on every page except for the index

Question

I have ran into a minor problem that I almost found an answer to. I have my header/footer that I made into an include file since the client was making me add and remove stuff to these daily. Now I can do all the changes in one file, boy what a nifty feature! The excitement didn't last long trust me, now I had to find a fix for adding the current or active state for each page's nav, and now I am in a big dilemma. I would like to keep the include files so I don't have to be wasting the clients time with extensive changes but I need to make this div only appear on the index file. The div at the very top that is a dark gray needs to appear on the homepage but hidden on the other pages. It says "Obamacare made easy - Get Professional Help at No Extra Cost!".

Any ideas on how I can achieve this desired effect?

If you need any more parts of the code or anything then just let me know.

Header include besides head section(GA, meta tags, and all that jazz)

</head>

<body>
<div class="hTitle"><em>Obamacare Made Easy – Get Professional Help at No Extra Cost!</em><span class="x">    <strong>X</strong></span></div>
<div class="header">
<div class="wrapper">
    <a href="index.php"><img class="logo" src="images/logo.png" alt="OAHU logo" /></a>
    <a class="fraud" href="http://insurance.ohio.gov/Newsroom/Pages/05092013ConsumerAlertHealthReform.aspx" target="blank">Fraud Alert<br /><p>Click to learn</p></a>
</div>
</div>
<nav>
  <ul>
    <li><a class="current" href="index.php">Home</a></li>
    <li><a href="consumer.php">Find an Agent</a></li>
    <li><a href="resources.php">Resources</a></li>
    <li><a href="about.php">About OAHU</a></li>
    <li><a href="http://www.ohioahu.org/" target="blank">Agent's Login</a></li>
  </ul>
</nav>

jsfiddle file

live site if that helps

The site is written in HTML5, CSS3, jQuery, and PHP so any of those are an option to fix this.

possible duplicate of [jQuery add class .active on menu](http://stackoverflow.com/questions/4866284/jquery-add-class-active-on-menu) — Diodeus - James MacFarlane, Sep 18 '13 at 19:40
It isn't a dup, the problem I am having is my header+nav are in a include for the header. — Josh Powell, Sep 18 '13 at 19:49
Do you have individual files for each page and then include the header? If so, in the index.php page, before your includes, you can set a var `$show_msg = 0;` and then in your header wrap the div with an `if ($show_msg)` — Vlad, Sep 18 '13 at 19:53
I do have individual pages so I will try this when I am home for my own personal knowledge but the jquery worked great for this. :} — Josh Powell, Sep 18 '13 at 19:57

score 2 · Answer 1 · answered Sep 18 '13 at 19:41

2

In the index file, give your body an ID or Class.

<body class="index">

then your CSS can read something like

.hTitle {
    display:none;
}

.index .hTitle {
    display:block !important;
}

This will show the header ONLY on the index. (Yay for CASCADING!)

answered Sep 18 '13 at 19:41

ntgCleaner

5,865
9
48
86

This was the answer I found that almost did it. The problem is I have the body tag in my header include so I really only have one body tag sadly. :( I may just wait till this site is done and then remove the header include if that is the only option. Thanks a bunch mate, this is a great answer. – Josh Powell Sep 18 '13 at 19:44
There's still a way! What exactly are your includes? do you include your body with your head? then include your nav? If so, you can make a div in between them and give it a class and it would do the same thing! – ntgCleaner Sep 18 '13 at 19:45
If you're using jQuery, you can also use that to find out the name of your URL, then if it's index, hide the div. – ntgCleaner Sep 18 '13 at 19:46
Yes - that is what is described in the dupe-link. – Diodeus - James MacFarlane Sep 18 '13 at 19:51
This was a good answer but the jQuery worked perfect for me and was a very simple line of code. – Josh Powell Sep 18 '13 at 19:53

score 1 · Answer 2 · answered Sep 18 '13 at 19:43

In PHP:

if (currPage()=='index.php') {
    echo '<div id="indexpageonly">Heres the div</div>';
}

I use this method to determine which tabs to display on a nav menu:

<li class="menu-item <?php chk_active('myprojects.php');?>"><a href="myprojects.php">Projects</a></li>
<li class="menu-item <?php chk_active('invoicehistory.php');?>"><a href="invoicehistory.php">Invoice History</a></li>

And the chk_active() function looks like this:

function chk_active($chkPage){
    if (currPage()==$chkPage) {
        echo 'active';
    }else if (currPage()=='project.php' && $chkPage=='myprojects.php'){
        echo 'active';
    }
}

I think this would be great for my portfolio so +1 for that! — Josh Powell, Sep 18 '13 at 19:59

score 1 · Accepted Answer · answered Sep 18 '13 at 19:43

1

By default, keep that div hidden, .hTitle{ display:none } and use jQuery to show the div and do it only on home page

$(document).ready(function(){
    if($('a.current').attr('href') == 'index.php') {
        $('.hTitle').show();
    }
});

answered Sep 18 '13 at 19:43

The Alpha

143,660
29
287
307

You are the man! This did the job but I see two very similar answers but one is php. Would one be better or just personal preference. – Josh Powell Sep 18 '13 at 19:47
If you do it with PHP then that div is never sent to the client. If you do it with jQ, the div is always sent and you also have to send the jQ code. In this case, the amount is very small and unnoticeable. – Vlad Sep 18 '13 at 19:50

Hiding a div on every page except for the index

3 Answers3