CODEWITHSUNDEEP
jquerycss
wasim kazi
wasim kazi

Reputation: 378

Change css on current URL

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>");
}

Upvotes: 1

Views: 206

Answers (4)

Lucil Sandaruwan
Lucil Sandaruwan

Reputation: 165

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

Upvotes: 0

wasim kazi
wasim kazi

Reputation: 378

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.

Upvotes: 0

nnnnnn
nnnnnn

Reputation: 150010

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.

Upvotes: 0

Michal Klouda
Michal Klouda

Reputation: 14521

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);
});

Upvotes: 1

Related Questions