naming a specific css ID for a theme with a js function

[didou038]

Hi all !

I'm trying to code a theme using a js function that animates the title of a page. until then, no worries. as I want this animation works only on the index page, I created a specific ID in my css called index-header.
My js function does make the animation as the div id = index-header.

here is my code in the theme:

Code:

<?php
    $slugindex = get_page_slug();
    if ($slugindex == 'index'){
        echo '<div id="index-header">';
        }else{
        echo '<div id="header">';
        }
    }    
?>
    <h1><?php get_site_name(); ?></h1>
</div>

so i create my ID in my css like this (not all just an example):

Code:

#header, #index-header{
    position:relative;
    width: 350px;
    top:0px;
    color: #fff;
    font-family: 'Josefin Slab', Arial, sans-serif;
    font-size: 20px;
    margin:0px;
    padding:20px;
    font-size:42px;
    color:#fff;
    text-align:left;
    font-weight:400;
    text-align:left;
}

but nothing appears on my page.

I can not find my error (I'm blind?)
I need your help,

thank you

[n00dles101]

do you have alive site where we can see it in action?

[didou038]

no sorry, just in local for this moment

[didou038]

if i try this :

Code:

<div id="<?php get_page_slug(); ?>-header">

it works for the page "index". but for the other pages I have not desired layout because the ID does not exist in the css.

we are left with an "ID" portfolio-header such

[n00dles101]

get_page_slug on its own echos the slug name.

use

get_page_slug(FALSE);

To return it to your function.

[didou038]

nice ! it works (so simple ...)

my header id doesn't works. i've got the good div id but it seems it doesn't read it in the css ... i need to search why.

thanks n00dles

[didou038]

solved like I can ...

the problem come from the js function that animate the text. It deleted the <h1></h1>.

so I stop use of <h1> the time to find a solution ...