Change css on current URL

[wasim kazi]

Hello, I have one CMS with fixed layout. In that I have make few changes depends on my current URL.

If I am on my home page so This class given below is

div.layout-column.column-main.with-column-1.with-column-2 = width:790;

And If I am of some other page so this same class look like this.

div.layout-column.column-main.with-column-1.with-column-2 = width:790;
I have tried it but it's not working properly.

<script>
     if (location.href.indexOf("example.com") == 1) {
         document.write("<style>" +
         "div.layout-column.column-main.with-column-1.with-column-2{" +
         " width: 790px;" +
         "}" +
         "</style>");
     }
     else{
     document.write("<style>" +
         "div.layout-column.column-main.with-column-1.with-column-2{" +
         " width: 590px;" +
         "}" +
         "</style>");
     }
    </script> 

[lps]

My suggestion: use jQuery.width() to do so.

[wasim kazi]

Thanks for your suggetion. My problem was solved. I made some condition in php and now that code is working fine.

[esma.ramirez]

Anyway if you wanna set specific css to every pages with jquery only, you can do something like:

var pathname = window.location.pathname;
if(pathname = 'something.php'){
    $("#mydiv").css({"width":"100px"});
}elseif (pathname ='anothersomething.php'){
    $("#mydiv").css({"width":"200px"});
}//AND GO ON

Anyway i didn't tested, so couldn't work

[lps]

Please do mark the thread as 'solved' if the problem is solved. Thanks.

[JorgeM]

@wasim kazi, can you share how you resolved your issue for the benifit of others that may have a similar problem?

[wasim kazi]

@jorgeM Thanks for remembering me. Now here is my ans.

I made two different div with different size and call them on my current URL

<? $url = (!empty($_SERVER['HTTPS'])) ? "https://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'] : "http://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']; ?>

<? if($url == 'http://www.example.com/'){ ?>
  <div class="layout-column column-22">
      <?php echo $layoutPartContent2 ?>
  </div>

    <?}

    else{?>

    <div class="layout-column column-2">
        <?php echo $layoutPartContent2 ?>
    </div>

<? } ?>