Hide a <div> in JUST the home page..

rbarbour:

Not my intentions, I also agree that their is no downside, just giving alternatives and suggestions. :P

I appreciate the insight as always.. For the record I tried a BUNCH of other code based solutions and had only partial success.. I may eventually go back to one of them at some later point and try to work out the kinks.. but that day ain't today!! :laugh:

rbarbour:

Why not just wrap the entire container in the if statement, no need for CSS

Before I comment further, I will state that there is no 'right' or 'wrong' way of achieving the desired results, but personally I tend towards using CSS for this kind of thing rather than code. I find it helps separate function from content.

Having said that, in a case like this (without having a stylesheet for each page) there is always going to be some code required anyway.

Although my original suggestion to DivaVocals was along the lines of the solution taken, in reality I probably would have opted for a slightly different method.

<?php 
$style = "display:none";  
    if ($this_is_home_page) {
       $style = "display:block !important" ;
     } 


echo "<style>#ez-feature-top-container-wrap {$style;}</style>";
?> 

The benefit of using this method over the solution taken is that the $style variable can be initialised at the top of the page, with the actual echo/output located deeper in the code where it is actually needed/used.

Nah... I just changed my mind again :)

Something like

 $useClass = "ez-feature-top-container-wrap hidden" ;

 if ($this_is_home_page) {
$useClass = "ez-feature-top-container-wrap" ;
} 


echo "<div class=$useClass>" ;


... stuff goes here ..


echo "</div>" ; 

Then in my stylesheet.css

.ez-feature-top-container-wrap {
display: block ; 
}

.ez-feature-top-container-wrap hidden {
display: none ; 
}
 

The reason why I believe this is a better option (bearing in mind I've no real idea what is actually to be displayed) is that this allows additional control for mobile devices. For example, if the output happens to be a large banner that simply doesn't 'work' correctly on a mobile device, then another addition to the stylesheet along the lines of.................

@media (max-width: 320px) {  
 
  ez-feature-top-container-wrap {
 display: none ;
    }
}

.... can be used... The net result being the banner (or whatever) will only be displayed on the home page but only if the screen width is larger than 320px.

Pretty neat eh?

Cheers
RodG

Agree, no "right" way, also offerring solutions, so this is what I was referring.

Knowing that it would be a "mostly" off condition, the stylesheet.css would have the do not display css associated with the div tag, and only one specialized css sheet would be needed to unhide the div.

The index_home.css sheet would contain the css to unhide the div. In the sequence of loading the stylesheet.css would load first with the hide property in all cases. When the home page is the page loaded, then the index_home.css file content would be loaded and that css will override the stylesheet css. Tada not a million sheets, just two. The only code hack was to add the tag(s) to begin with...like Rod was getting at, then also have more control over when/how the content is shown

Used: http://www.zen-cart.com/wiki/index.php/Customisation_-_Templates_-_Stylesheets_-_Per-Page-Rules
As a reference.

thanks everyone.. I'll take a look at those alternate solutions..

Very neat, thank you.

RodG:

Before I comment further, I will state that there is no 'right' or 'wrong' way of achieving the desired results, but personally I tend towards using CSS for this kind of thing rather than code. I find it helps separate function from content.

Having said that, in a case like this (without having a stylesheet for each page) there is always going to be some code required anyway.

Although my original suggestion to DivaVocals was along the lines of the solution taken, in reality I probably would have opted for a slightly different method.

> 
> The benefit of using this method over the solution taken is that the $style variable can be initialised at the top of the page, with the actual echo/output located deeper in the code where it is actually needed/used.  

For personal reasons I prefer not to add CSS declarations in CODE. :lookaroun

> **RodG:**
>
> Nah... I just changed my mind again  :)  
> 
> Something like 
> 
> ```
 $useClass = "ez-feature-top-container-wrap hidden" ;

 if ($this_is_home_page) {
$useClass = "ez-feature-top-container-wrap" ;
} 


echo "<div class=$useClass>" ;


... stuff goes here ..


echo "</div>" ; 

Then in my stylesheet.css

.ez-feature-top-container-wrap {
display: block ;
}

.ez-feature-top-container-wrap hidden {
display: none ;
}

> 
> The reason why I believe this is a better option (bearing in mind I've no real idea what is actually to be displayed) is that this allows additional control for mobile devices.   For example,  if the output happens to be a large banner that simply doesn't 'work' correctly on a mobile device, then another addition to the stylesheet along the lines of................. 
> 
> ```
@media (max-width: 320px) {  
 
  ez-feature-top-container-wrap {
 display: none ;
    }
}

.... can be used... The net result being the banner (or whatever) will only be displayed on the home page but only if the screen width is larger than 320px.

I use a very similar CODE and CSS in my responsive templates to hide/show the side-boxes.

RodG:

Pretty neat eh?

Cheers
RodG

Yep, pretty neat! :smile:

rbarbour:

For personal reasons I prefer not to add CSS declarations in CODE. :lookaroun

Same here (which is why I changed my mind about using that method). Doing so pretty much defeats the purpose of .css.

It comes in handy for 'quick n dirty' testing/development though (sometimes). For me, it much depends whether I'm using an IDE or a text editor on a live site. ;-)

I also have no qualms in using it when trying to help others using their own code snippets.... before offering/suggesting more advanced/better methods.

Like I said at the outset, I don't consider any particular way of doing things as being 'right' or 'wrong' (I figure, as long as it works, its 'right', and if it doesn't work, it's 'wrong'). LOL

Cheers
RodG

RodG:

Like I said at the outset, I don't consider any particular way of doing things as being 'right' or 'wrong' (I figure, as long as it works, its 'right', and if it doesn't work, it's 'wrong'). LOL

Cheers
RodG

LMAO :laugh: - couldn't have put it better!

RodG:

Something like

$useClass = "ez-feature-top-container-wrap hidden" ;

if ($this_is_home_page) {
$useClass = "ez-feature-top-container-wrap" ;
}

echo "<div class=$useClass>" ;

... stuff goes here ..

echo "</div>" ;

> 
> Then in my stylesheet.css 
> 
> ```
.ez-feature-top-container-wrap {
display: block ; 
}

.ez-feature-top-container-wrap hidden {
display: none ; 
}
 

Gonna give this a looksee, but I'm not entirely sure that this will work for my particular situation.. Not sure that the index_home.css suggestion is THAT much different that the solution I have working now..

Long term though, I have been brainstorming approaching this from a different angle. Gonna explore some other options within my WordPress theme framework to improve the Zen Cart/WordPress theme integration I am after.. The container I am trying to suppress comes from a special widget that is part of the theme framework and it is not possible to call this widget on it's own.. So instead of using it, I am looking at creating a custom widget and shortcode for this custom widget. Then I can wrap the shortcode PHP inside the "$this_is_home_page" condition..

But that is long term.... Meanwhile gonna stick with my short term solution..

RodG:

Like I said at the outset, I don't consider any particular way of doing things as being 'right' or 'wrong' (I figure, as long as it works, its 'right', and if it doesn't work, it's 'wrong'). LOL
Yep.. for now the solution in place is achieving my IMMEDIATE objective.. But I appreciate the suggestions from everyone.. Ya'll have FORCED me to look at a longer term solution NOW!!!:laugh: Which I would have done anyway because IMHO my current solution is a bandaid.. I'm not a fan of leaving bandaids in place long term..