Change css on current URL

Question

I want to change my div style on my current URL.

if I am on my home page.

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

if I am on some other page except my home page so I want my class like this.

div.layout-column.column-main.with-column-1.with-column-2{
width:590;
}

I tried it but I don't get proper output.

if (window.location.href == 'http://easyapuestas.com/')
{
  // alert("hiiii");
document.write("<style>" +
"div.layout-column.column-main.with-column-1.with-column-2{" +
" width: 790px;" +
"}" +
"</style>");
}
if (window.location.href !== 'http://easyapuestas.com')
{
// alert(window.location.href);
   document.write("<style>" +
 "div.layout-column.column-main.with-column-1.with-column-2{" +
 " width: 590px;" +
 "}" +
 "</style>");
}

Michal Klouda · Accepted Answer · 2012-08-17 06:41:09Z

1

Try something like this:

$(document).ready(function() { 
   var width = window.location.href == 'http://easyapuestas.com/' ? '790px' : '590px';
   $('div.layout-column.column-main.with-column-1.with-column-2').css('width', width);
});

answered Aug 17, 2012 at 6:41

Michal Klouda

14.6k7 gold badges58 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Michal Klouda Over a year ago

Actually, what is the class name of the div you are trying to resize? Are you aware of the fact, that you can't use dots as part of the name?

wasim kazi Over a year ago

currently in my CMS's css file they give this code.div.layout-column.column-main.with-column-1.with-column-2 as 590. so this same class I want to change as 790 for my home page

nnnnnn Over a year ago

That selector finds divs that have all of those individual classes, so that's fine assuming the divs do in fact have all of those classes.

nnnnnn · Accepted Answer · 2012-08-17 06:48:17Z

0

If you give a class or id to the body element of your main page you should be able to do it in your stylesheet without JS:

<body class="home">

And then:

div.layout-column.column-main.with-column-1.with-column-2{
   width:590px;
}

body.home div.layout-column.column-main.with-column-1.with-column-2{
   width:790px;
}

This works because on pages where the body doesn't have class "home" only the first selector matches your div(s), but on pages where the body does have class "home" both selectors match your div(s) in which case the first is overridden by the second.

answered Aug 17, 2012 at 6:48

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

1 Comment

nnnnnn Over a year ago

Oh right, OK. If you can I'd still recommend putting the classes in the common stylesheet, but then use jQuery to do if(window.location.href == 'http://easyapuestas.com/') { $("body").addClass("home");}.

wasim kazi · Accepted Answer · 2012-08-17 11:07:31Z

0

Thanks to all. I got my solution.

I manage it by php. I get my current URL by PHP and then apply CSS to that particular class and it's working perfect.

answered Aug 17, 2012 at 11:07

wasim kazi

3784 silver badges13 bronze badges

Comments

Lucil Sandaruwan · Accepted Answer · 2012-08-17 19:01:03Z

0

I think you try to check the pages other than home page using this

if (window.location.href == 'http://easyapuestas.com/')

{

that is the fault, It is better to split this by "/" using split(url) function, It will return an array. Then u can check the number of element of that array, using that I think u can use this

var url=window.location.href == 'http://easyapuestas.com/';
var split_arr=url.split("/");

// now u can check the count of this array if it is greater than 3 it will not the home page

edited Aug 17, 2012 at 19:01

answered Aug 17, 2012 at 7:40

Lucil Sandaruwan

1651 gold badge2 silver badges11 bronze badges

Collectives™ on Stack Overflow

Change css on current URL

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related