SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Good method of adjusting size of divs based on values in a database? (HTML Strict)

    In an application I am working on I am allowing users to create objects (divs) for which they can set a width. These objects will be stored in a database along with the user-chosen width. Currently, when I display the objects the user has created, I pull the width values and apply them to a div with the style tag, as in style="width: $width_variable_from_mysql_goes_here ;"

    After doing some reading on Strict versus Transitional doc types I have started converting my html to Strict but now have the problem of finding a way to apply the widths in the database to the html on the page without using the "style" tag.

    Surely there must be a solution for this in strict mode?

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Likely instead of using inline styles, you would be adding a class to the div dynamically. The class then has the styles the user has chosen.

    What you use for the names depends-- if you want them based on the user's name or on set widths (can people really just choose anything? Or are they given a list of possible choices?). Remember classes and id's cannot start with a number.

    So someone's div they've chosen to be width=500px; If this was only say one choice out of 5 possible widths, you'd prolly use the width as your class name:

    <div class="w500">

    With set widths, you could always have your single, untouched stylesheet already listing all the possibilities:

    div.w500 {
    width: 500px;
    }

    div.w800 {
    width: 800px;
    }

    and so on.
    If people can just add any old width and there could be bazillions of possibilities, then your classes would prolly instead be the usernames or whatever works well with referring to the unique user.

    In this case, you might need to have <style> tags in your <head> (which are still legal with Strict) but you'll need to either add that dynamically or you could have an imported CSS sheet created when the user sets their desired widths and call them in the head

    <head>
    stuff, title, meta tags...
    <style>
    @import url("user/divwidths.css");
    </style>
    </head>

    which only has the widths for those divs listed (they'd prolly still have a class, depends on what's easiest for you to set up).

  3. #3
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the reply Stomme poes, it looks like I will go with something like the first option you mentioned since users could have multiple objects with widths that could change frequently. Ideally I would like for them to be able to make the divs any size (bazillions of widths) but it looks like that might be too hard to do. I guess I could always try a javascript function that automatically adjusts the widths down to the pixel needed but I am worried that such a solution might not scale if there are many divs .. say 40-50 which is a likely possibility for larger objects.

    I thought this was an interesting problem though, would you see this as a limitation of HTML Strict? If I changed my doc type to Transitional everything would work much more smoothly for me.

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Nah, I wouldn't consider it a limitation of Strict if you're planning on using JS anyway-- basically I would think you could do the same thing with JS (problem there is if you care about those who don't have JS on, but that depends on who's coming to this site to set div widths : )
    Transitional lets you get away with all sorts of dirty things. Just because it's legal in Afghanistan doesn't mean it's a Good Thing.

    On the other hand, I was once forced to make some of my pages Transitional for using "target" to get around a caching issue (I might even be able to remove it, now that we have persistent sessions running but at the time we didn't and this was solely for form pages that hadn't been submitted yet). While I found it dirty, I did it. So, it could be a possibility for you. However I believe you can keep Strict and do it with some JS and some scripts on the back end.

    People are always changing stuff dynamically with JS anyway, and I'm thinking, to keep the JS as separate as possible from the HTML and CSS you'd likely be adding a class via JS. I don't know how to generate stylesheets with JS though, but I'm sure it could be done (or more likely, at the time the user starts picking out their choices, a stylesheet is made by a script on the back end and stored somewhere with all the other variables you have for that user and added to the HTML as an @import in the <style> tags of the <head> as I mentioned, via the back end since these users are logged in and get a session of some sort...).

  5. #5
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, thanks for the ideas - I hadn't even thought of generating a class with javascript but that could be a workable solution too! Its always good to know how people who have more experience than me think!!

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Hell, I don't do anything with JS. I know of the class generating because people do it with menus (they start out with the Suckerfish sfhover class but then make the JS generate it instead of writing it in there manually).

    It's also used for things like having a form where parts of it remain hidden until a question is answered "yes". The class is dynamically added, and the event of choosing the certain answer removes the class (which was already pre-styled in the CSS) which then shows the whateveritwas. Those without JS in the first place don't even get that class loaded and they simply see the entire form.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •