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>
The site is written in HTML5 , CSS3 , jQuery , and PHP so any of those are an option to fix this.
3 answers
solution1
2 2013-09-18 19:41:16
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!)
solution2
1 2013-09-18 19:43:32
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';
}
}
solution3
1 ACCPTED 2013-09-18 19:43:50
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();
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.