Toggle between two different CSS definitions based on the URL

Question

I have this CSS which controls some modal's on the desktop version of the site.

#modal, #purchModal, #travModal, #notesModal, #explainModal 
{ position: fixed; z-index: 101; top: 10%; left: 25%; 
   width: 50%; background:#CEECF5; border-radius:15px; 
}

If the url contains '/mobile/' I would like to switch the CSS code there to

 z-index: 101; top: 5%; left: 5%; width: 95%; 
 background:#CEECF5; border-radius:15px;

What exactly would be the best way to do this? I'd imagine I'd be using jQuery or JavaScript here

GautamD31 · Accepted Answer · 2013-11-02 05:22:10Z

4

Use two different classes for both the styles and Toggle them like

.Class1 { 
    position: fixed; z-index: 101; top: 10%; left: 25%; 
    width: 50%; background:#CEECF5; border-radius:15px; 
}

.Class2 {
    z-index: 101; top: 5%; left: 5%; width: 95%; 
    background:#CEECF5; border-radius:15px; 
}

And toggle them like

$('Element you want to change css').toggleClass('Class1' , 'Class2');

Or you can use directly like

if(document.url.indexOf('mobile')!=-1)
{
    $('Element you want to change css').addClass('Class1');
}
else
{
    $('Element you want to change css').addClass('Class2');
}

If you want you can remove the old class and then add the new class in the above approach.

edited Nov 2, 2013 at 5:22

answered Nov 2, 2013 at 5:06

GautamD31

28.8k10 gold badges66 silver badges86 bronze badges

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

Comments

Rakesh Mali · Accepted Answer · 2013-11-06 05:57:25Z

2

You can do it without using jQuery or JavaScript. Just write css for different devices

//A comman css for class #modal
 #modal {
   position: fixed;
   top: 10%;
   left: 50%;
   z-index: 1050;
   width: 560px;
   margin-left: -280px;
   background-color: #ffffff;
 }

//if screen width is less then 767px
@media (max-width: 767px) {
 #modal {
    position: fixed;
    top: 20px;
    right: 20px;
    left: 20px;
    width: auto;
    margin: 0;
  }
}

//if screen width is less then 480px
@media (max-width: 480px) {
 #modal {
    top: 10px;
    right: 10px;
    left: 10px;
  }
}

So you can improve your load time without including this unwanted jquery of JS.

answered Nov 6, 2013 at 5:57

Rakesh Mali

291 silver badge3 bronze badges

Comments

James A. Rosen · Accepted Answer · 2013-11-02 05:10:39Z

1

First, define your two CSS variations:

/* Desktop */
#modal, #purchModal, #travModal, #notesModal, #explainModal {
  position: fixed; z-index: 101; top: 10%; left: 25%; 
  width: 50%; background:#CEECF5; border-radius:15px; 
}

/* Mobile */
body.mobile #modal, body.mobile #purchModal, body.mobile #travModal,
body.mobile #notesModal, body.mobile #explainModal {
  z-index: 101; top: 5%; left: 5%; width: 95%; 
  background:#CEECF5; border-radius:15px;
}

Then, have jQuery set the <body> class based on the URL on page load:

$(function() {
  var isMobile = /\/mobile\/.test(window.location.url);
  $('body').toggleClass('mobile', isMobile);
});

answered Nov 2, 2013 at 5:10

James A. Rosen

65.6k62 gold badges186 silver badges263 bronze badges

Comments

eggward · Accepted Answer · 2013-11-02 05:21:02Z

0

How about having 2 different css files? One for Desktop version and another for Mobile? Change the css file in the page with something like this

$('head').append('<link rel="stylesheet" href="desktop.css" type="text/css" />');

answered Nov 2, 2013 at 5:21

eggward

3451 silver badge5 bronze badges

Collectives™ on Stack Overflow

Toggle between two different CSS definitions based on the URL

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related