SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    How do you change the values of a Class inside the Web page?

    Hi,

    Sometimes it is just better (faster) to change certain values of a Class inside the Web page rather than do it via CSS file. In these cases how does one do this?

    That is for example say we have a CSS class:


    .notice_box {
    font-family: "Lucida Grande", Verdana, sans-serif;
    font-size: 10px;
    width: 250px;
    height: auto;
    border: 2px dotted blue;
    padding: 5px;
    }

    But at times inside a web page we want the value of width to be something else and we want the Font size to be something else, which value is dynamically set by the user. So how does one do this inside the web page?

    I mean what do we add to this to tell it that width for example should be 350 and font-size should be 14 Pix?

    <div class="notice_box">
    ...something here...
    </div>

    Regards,

    Anoox search engine volunteer

    www.anoox.com

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You could add a class to that and tell it font size and width.

    Although perhaps it would be more useful to you (I don't know your setup) to remove the width/fonts on that universal class and then add a class/classes to those elements to set width/anything that can vary between elements.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello Ryan,

    Can you be more exact?
    So I mean what would you add to:

    <div class="notice_box">
    ...something here...
    </div>

    to for example set the font-size to be 14 and background color xyz,
    within in the Web page?

    Regards,

    Quote Originally Posted by RyanReese View Post
    You could add a class to that and tell it font size and width.

    Although perhaps it would be more useful to you (I don't know your setup) to remove the width/fonts on that universal class and then add a class/classes to those elements to set width/anything that can vary between elements.

    Anoox search engine volunteer

    www.anoox.com

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by WorldNews View Post
    Sometimes it is just better (faster) to change certain values of a Class inside the Web page rather than do it via CSS file.
    Is it? What's your rationale for saying that?

    It would be good to give a clearer explanation of your situation. Is this being done via a CMS? You can place styles inline (at the point where they apply), in the header of the page (via style tags) or externally (via link tags). The external method is the easiest in terms of them being universally applicable.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by WorldNews View Post
    Hello Ryan,

    Can you be more exact?
    So I mean what would you add to:

    <div class="notice_box">
    ...something here...
    </div>

    to for example set the font-size to be 14 and background color xyz,
    within in the Web page?

    Regards,
    You could set on .notice_box all the other styles that are static. THe ones that won't vary between elements.

    THen you could just add a calss on as such
    Code:
    <div class="notice_box other">
    ...something here...
    </div>
    And then give .other the background/font size.

    Inline styles in the HTML may be faster (debatable), but maintenance is a complete nightmare
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jhonnyD2 View Post
    u r great Ryan , all problems have been solved by u .. rapidly!!! how to be like u ?
    Just practice CSS a lot . If you stay on these forums a lot you are sure to run into a fiarly large chunk of issues and it's just a matter of recognizing it and realizing a potential fix.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Can you be specific with actual code for this?
    I mean what is he exact code to change few elements of a CSS class
    inside the web page?

    BTW, the way we need to change these values inside the web page is because they are selected by the user in real time as they are viewing that
    page. So in real time they can for example select to change the font
    and background of a page.

    Quote Originally Posted by RyanReese View Post
    You could set on .notice_box all the other styles that are static. THe ones that won't vary between elements.

    THen you could just add a calss on as such
    Code:
    <div class="notice_box other">
    ...something here...
    </div>
    And then give .other the background/font size.

    Inline styles in the HTML may be faster (debatable), but maintenance is a complete nightmare

    Anoox search engine volunteer

    www.anoox.com

  8. #8
    SitePoint Evangelist
    Join Date
    Sep 2006
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sounds like you will need to turn to javascript and css selectors to do this. Are you using any type of javascript library on the project?

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    If you have any sort of behavior (what you are describing) then you will need JS. In which case any code I give you would be useless (since I would give you the CSS)

    Head on over there.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •