0

I have a website that's main body is full of elements positioned by absolute within a relative parent container (in order to exactly control the positioning of each element). There are 3 stylesheets, each one with parameters for the max and min size of the users screen, so it can properly be displayed on phones, normal screens, and huge screens. Each element has six defined classes (smallLeft1, smallTop3, normalLeft3, normalTop1, largeLeft3, largeTop1 for example) which provide all the coordinate data for whichever screen size. But, this method requires defining all the elemental positions (only the top ones, left doesn't ever go about 2 on small, 4 on normal, or 6 on large).

The top that is defined for each class increments in 216px jumps each time, so rather than having 3 stylesheets, each one defining all the potential tops, is there a way to define one class (probably one for each stylesheet) that can match the first part of the class name, and take the second part as an argument for a multiplier?

topherg
  • 4,203
  • 4
  • 37
  • 72
  • 1
    Check out this thread... possible duplicate? http://stackoverflow.com/questions/5110249/wildcard-in-css-for-classes – Doug May 21 '13 at 10:28
  • Possibly, but it doesn't talk about using the wildcard for an arithmetic function – topherg May 21 '13 at 10:30
  • I see what you mean... I'm not entirely sure if that's possible because CSS doesn't get parsed as such at any point during runtime... you could do it using javascript. – Doug May 21 '13 at 10:34
  • I tried to do it in javascript initially, but it didn't play well with the multiple stylesheets. The only way I could get that to work was to have a function called at every resize, and that absolutely killed performance – topherg May 21 '13 at 10:36
  • @cgoddard When a javascript function for positioning your elements absolutely kills your performance, then I'm for 100% sure that the architecture of your HTML elements is not good and you should consider a change in your HTML structure. – Sven Bieder May 21 '13 at 11:58
  • @SvenBieder I'm sure its not the best, but for the layout design I have gone for, it is the best I could come up with. It is kind of like the windows phone start screen with all the tiles, and then when the controller of the site is assembling a page, it creates a new tile (with all the desired properties), and the coordinate positioning data for each size (small, medium & large), which is then put into div tags with the positioning data as class names. I did try other positioning layouts, but couldn't really get anything that would work in the same way (especially without using javascript)... – topherg May 21 '13 at 12:34
  • @cgoddard You work with pure html and javascript? Or do you also use any kind of serverside language (php, C#, Java,...)? – Sven Bieder May 21 '13 at 12:38
  • @SvenBieder I use PHP to determine the site's content, and that information is transmitted (bundled if its a full request, or in JSON if via AJAX), then the JavaScript interpreter replaces the container element's content with what has been sent by the server (as well as a few other things), and then it sits around, waiting for the next move the viewer makes – topherg May 21 '13 at 12:41
  • @cgoddard do you have perhaps a link to the page that I get a better picture what exactly you are doing? – Sven Bieder May 21 '13 at 12:50
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/30334/discussion-between-cgoddard-and-sven-bieder) – topherg May 21 '13 at 12:50
  • @SvenBieder cg.lionspawstudios.com – topherg May 21 '13 at 13:54
  • 1
    How often does someone who isn't a developer actually resize the viewport? I'd say somewhere between rarely and never. Perhaps working with javascript isn't such a big deal? If it's really killing your performance for the few seconds when the browser is being resized you could try employing something like this (http://stackoverflow.com/questions/1909441/jquery-keyup-delay) to wait a moment after the browser resize has occurred before running the function. I've used this function in the context described but not to do what you're doing... it may be worth a shot. – Doug May 21 '13 at 20:57
  • @Doug excellent timing, I had come to the same conclusion. I have decided to go with the javascript alternative, and written an efficient subroutine that handles it. But that sounds like a really good idea to add a buffer between the checking function and the onResize event to save a little more processing time – topherg May 21 '13 at 22:54
  • Great minds think alike ;-) (or is it "fools seldom differ"?) It gets to a point in any dev that you have to just go "meh" and ask yourself is spending hours toiling over the perfect solution more important than just getting the job done and earning your money :-) – Doug May 21 '13 at 22:59

0 Answers0