0

I'll try asking again. My question was deleted once, apparently due to the fact that a similar question was already asked. It was deleted again when posted as a reply to the similar question, apparently for not being similar enough.

My question:

Is this (solution for the 'similar question', link above) cross-browser compatible, i.e. does this work in all browsers? Also, what should be added to the jQuery file in order to make the stylesheets auto-switch (the light style for daylight hours and the dark style for nighttime)?

*If .js is used for javascript files, is .jq used for jQuery? This is my first time seeing a jQuery solution, as I typically type 'javascript' in the ol' search engine.

Hopefully this gets answered, and is not deleted a third time.

Improve this question
2
  • 2
    Your prior posts were deleted because you didn't read the FAQ at stackoverflow.com/faq. The answers block is for answers only, not additional questions. This is not like most message boards. To answer part of your question, jQuery is simply a collection of scripts written in JavaScript to make things easier. It's all JavaScript. No .jq files exist, or are needed. To get an answer to the rest of your question, post your question independently of another. Again, you will see in the FAQ that straightforward questions here get straightforward answers. Commented Feb 8, 2012 at 22:00
  • The only reason I posted my question as a reply was because it was deleted as its own thread prior to that. I DID read the FAQ. As far as how I save it, much thanks for that. :) Commented Feb 8, 2012 at 22:15

4 Answers 4

Reset to default
2

You don't need to switch stylesheets, you just need to switch styles.

<body class='day'> <body class='night'>

then you can have:

.day { background-color:#ffffff } .night { background-color:#808080 }

You can then control this with:

$('body').removeClass('day') $('body').removeClass('night')

Wrap a bit of date-time based logic around it and you're ready to go.

You can also sub-class other page elements like this to continue the theme:

.day h1 { ... } .night h1 { ... }
Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

+1 because this is what he should be doing, even if that's not what the OP asked for.
I understand what you're saying, but I'm trying to avoid increasing the file size of my index page exponentially. By using internal CSS for positioning, and external stylesheets (background images, color-scheme) as an addition to the internal CSS, I can avoid crashing others' browsers. Loading ALL the stylesheets simultaneously seems a bit much when only one is needed at any given time. I wouldn't be sub-classing, so much as I'd be sub-sub-sub-sub-sub-classing. (I asked about day/night styles, since I figure any answer that works for two should work for 366. Can't forget leap year...)
Then you must be doing it wrong. Keep in mind that the average stylesheet is smaller than a single JPG.
True, but 366 stylesheets are not, even though each individual stylesheet is shy of 1kb on its own.
All you need in the alternate stylesheets are the DIFFERENCES in the styles from the main one. You do not need to declare everything all over again.
|
1

jQuery is a Javascript framework, meaning that it abstracts some of the baser, lower-level Javascript functionality so it's easier to use for more advanced things such as UI effects, HTTP requests, and DOM manipulation. But indeed, they both have a .js extension.

That said, I would suggest an alternative, lighter-weight solution than switching the actual stylesheet, thus avoiding extra network requests. I blogged about this simple method a while back and it only takes one line of jQuery.

Improve this answer

Comments

1

Diodius' answer is probably the best choice, but since that is not what you asked for I gave the code below. That said, I think you should STRONGLY consider Diodius' answer.

Is this (solution for the 'similar question', link above) cross-browser compatible, i.e. does this work in all browsers?

Yes. I should work in most modern browsers.

Also, what should be added to the jQuery file in order to make the stylesheets auto-switch (the light style for daylight hours and the dark style for nighttime)?

I'm not sure what you mean "added to the jQuery file". You don't add anything to the jQuery file, you simply reference it, then jQuery is available in your javascript after that.

so to change your style based on the time of day you'd have something like this:

<link type="text/css" rel="stylesheet" id="timeofdaystyle" href="day.css"/> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function() { var d = new Date(); var hour = d.getHours(); if (hour < 8 || hour > 20) { //between 8pm and 8am $('#timeofdaystyle').attr('href', 'night.css'); } else { /* this is unnecessary really, because you already have it set to day.css, but I'll add it as an example */ $('#timeofdaystyle').attr('href', 'day.css'); } }); </script>

*If .js is used for javascript files, is .jq used for jQuery? This is my first time seeing a jQuery solution, as I typically type 'javascript' in the ol' search engine.

No, .js files are used for all JavaScript. jQuery is JavaScript, therefor the .js extension is used.

I hope that helps.

Improve this answer

Comments

0

I wouldn't switch stylesheets. I would add a class to the body, then switch that class. if you have 2 stylesheets. one having say mobile the other having desktop styles it's just a matter of detecting the browser and changing the class of the body. It's cross browser compatible and not a headache to write.

Improve this answer

1 Comment

366, actually. Plus I'm trying to get the styles to switch as per scheduling. FYI, I know absolutely squat about scripting, beyond know things like GOTO, etc. are bad juju.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.