Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

Im working on a MVC3 application, with a masterpage which renders the views in the body. Now I have 2 css files (different layouts), and I want to select the CSS depending on the screen size of the client. Everything works with the code below, however, only for the index page, whenever I go to a second page, whatever it is, no CSS is rendered at all. The code below is placed in the HEAD section of the masterpage.

<script type="text/javascript">
      var css = './Content/SiteWide.css'     

      if ($(window).width() < 1140) {
      css = './Content/SiteNarrow.css';            
      }
      var tempcss = '<link href="TEMPCSS" rel="stylesheet" type="text/css" />';
      var cssLink = tempcss.replace("TEMPCSS", css);
      document.write(cssLink);    
</script>

So somehow the css doesnt load again when you go to a second page (all using the same masterpage), do you guys have any ideas?

thanks

share|improve this question
Why would you want to load the same CSS file twice in one page? That or I am not understanding what your question is. – Tejs May 8 '12 at 20:05
Have you tried looking at media queries instead? – beardtwizzle May 8 '12 at 20:08
Pro-tip: Don't use static file locations. Make use of Url.Content. Your code would look like: var css = '@Url.Content("~/Content/SiteWide.css")'; - Try this out and see if it works. - From experience I've had static locations sometimes not work as expect, whereas Url.Content did the trick for me. – Only Bolivian Here May 8 '12 at 20:08
If it works on your Index but not on other pages then it is probably because you are using a relative path. You can verify this by inspecting with firebug what the css path is. If that is the issue then you can try using server-side code to generate the correct relative/absolute path for the css file based on the current url. – bygrace May 8 '12 at 20:09
The @Url.Content("~/Content/SiteWide.css")' worked, I actually use that normally, but since It didnt work now I tried the static approach. The working code is below – NeedACar May 8 '12 at 20:16
show 2 more comments

4 Answers

up vote 0 down vote accepted

Pro-tip: Don't use static file locations. Make use of Url.Content.

Your code would look like: 

var css = '@Url.Content("~/Content/SiteWide.css")';

Try this out and see if it works. From experience I've had static locations sometimes not work as expect, whereas Url.Content did the trick for me.

share|improve this answer
Yes this was the solution, thanks! – NeedACar May 8 '12 at 20:27
up vote 5 down vote

Use CSS media queries instead of Javascript.

<!-- dropped rel attribute -->
<link media="only screen and (max-width:1139px)" href="SiteNarrow.css" />
<link media="only screen and (min-width:1140px)" href="SiteWide.css" />

Ideally you create one CSS file for one state, and have another override that when conditions are met.

<!-- dropped rel attribute -->
<link href="base.css" />
<link media="only screen and (min-width:1140px)" href="override.css" />
share|improve this answer
Great suggestion, but doesn't really answer the original question. – Only Bolivian Here May 8 '12 at 20:13
Sergio ~ Yes it does. THe OP is concerned on loading the right CSS file depending on screen width. That's exactly what CSS media queries are capable of doing. While it doesn't do it in the method the OP asks for, it perfectly performs his end result, and will, in effect, actually solve his problem. – Richard Neil Ilagan May 8 '12 at 20:21
@SergioTapia It's not about answering an exact question, unless specified. Most of the time it's about solving an issue and this obviously does. – Peter May 8 '12 at 20:22
I think this is the better solution than using javascript. – bygrace May 8 '12 at 20:29
up vote 2 down vote

I believe you need to use Url.Content(). I.e.

@Url.Content("~/Content/SiteWide.css");

The pathing may be incorrect when you navigate from your Index page if you use 

./Content/SiteWide.css

I've usually found Url.Content() to be the right thing to do when pathing to files in the project

share|improve this answer
Technically I think this would fix his issue so why did it get a -1? – bygrace May 8 '12 at 20:14
This is the correct answer (I posted this as a comment). Doesn't deserve a -1. – Only Bolivian Here May 8 '12 at 20:15
@Sergio, byGrace....thanks for the supportive comments – MikeTWebb May 8 '12 at 20:17
up vote 0 down vote

I recommend implementing Responsive Web Design

http://www.sitepoint.com/responsive-web-design/#fbid=UhFHwQrRwnn

You can use what are called "Media Queries" to dynamically apply different css files or properties as the screen size changes, in real time. Very cool!

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.