0

I'm working on a website which will feature, one one page, a slideshow made in Adobe Edge (exported as a .js JavaScript file). I'm also using CSS media queries to resize various elements on the site, like <div>s and fonts based on screen resolution. What I'm thinking of doing for the slideshow is creating multiple versions at different resolutions; is it possible to use CSS media queries to subsequently select the appropriate version per screen resolution?

Improve this question
4
  • What do you mean by multiple versions? Multiple versions of JavaScript per resolution? Is that correct? ... And if so, what does the JavaScript do specifically? Commented Jul 26, 2012 at 14:23
  • Also with that in mind. You can only manipulate CSS with media queries. However you could maybe tie your JavaScript into specific classes some how and have your JavaScript watch for changes to that class... Commented Jul 26, 2012 at 14:26
  • I'm creating multiple versions of the slideshow in Edge, at different resolutions. This will wield multiple .js files; for example, slideshow-1080.js, slideshow-720.js, and so on. I'm probably going to resort to a JavaScript variable, as recommended by Diodesus, but I still want to know if there's any way to do this using CSS, and possibly PHP. Commented Jul 26, 2012 at 14:37
  • Yeah I honestly don't think you can do it with just CSS. I think you could use the Media Query to change the dimensions of something, and then as Diodeus mentioned. Use JavaScript to watch for it and load JS depending on what the value is. You could probably use jQuery getScript to avoid loading all the files at once and load them only when needed. api.jquery.com/jQuery.getScript Commented Jul 26, 2012 at 14:47

2 Answers 2

Reset to default
2

Read back the value of a known CSS declaration, such as the width of the main outer element. This value will be different, based on the CSS you set up in your media query. With this you can set a JS variable to determine which version to use.

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

Comments

0

Define different sizes for different image resolution like so:

@media only screen and (min-width:768px) and (max-width:1009px)

Inside the media query you will define different values for different elements based on the screen resolution.

Improve this answer

1 Comment

I don't think you understand the question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.