Editing css with php or JQuery

Is there a way that I can change a css style sheet's data from a html form and php and/or JQuery. So if I have the following

widths.css

#main #section1 { 
width: 25%;
}
#main #section2 { 
width: 50%;
}
#main #section3 { 
width: 25%;
}

So I want to have 3 text boxes S1, S2 and S3 and then a user can place values into each text box. It will check they add up to 100% or less and then it will write them to the 开发者_高级运维css in place of 25%, 50% and 25%. How would I achieve this using php and/or JQuery.

Thanks

well there is a dirty but solution to this. use php to write javascript to the the html possibly after ending of body tag. so the code goes like this

..
...
</body>
<?php echo <<< code
<script type="text/javascript">
document.getElementById("section1").style.width="$_POST['s1']";
// and then for each section u can do this
code;
?>

you will have to set the CSS dynamically on the page it self. Once the user entered the data, you can use little bit of AJAX to change the styles. So something like below would be your PHP and styles on the page. if you want this to be a permenant change make sure to put the settings in a DB against the user's profile. This can be added to your AJAX script as well.

<style type="text/css">
#main #section1 { 
  width: <?php echo $s1; ?>%;
}

#main #section2 { 
  width: <?php echo $s2; ?>%;
}

#main #section3 { 
  width: <?php echo $s3; ?>%;
}

</style>

HTH

You can use the jQuery addClass() to add a specific CSS class with the style you require.

To use PHP, you could use CSS internally on the page:

<style type="text/css">
<?php echo "width: 100px;" //for example ?>
</style>

But I wouldn't necessarily recommend that.

something basic but which should work

$(".validate").click(function(){
      //I've assumed your text inputs were children of an element with id section$i 
      var w1 = Number($("#section1 input").val());
      var w2 = Number($("#section2 input").val());
      var w3 = Number($("#section3 input").val());
      if(w1+w2+w3 == 100){
           //here you change css rules for #section$i elements
           $("#section1").css("width",w1+"%")
           $("#section2").css("width",w2+"%")
           $("#section3").css("width",w3+"%")
      }
      else{
           alert("sum of values must equals 100%")
      }
});

assuming that you have a clickable area with class validate

You can use this script i just made for you:

var merge = function(objectCollections){
    var array = new Array();
    foreach(objectCollections,function(objectCollection){
    foreach(objectCollection,function(object){
        array.push(object);
    });
    });
    return array;
}
var foreach = function(object,loop){
    for (var key in object) {
    if (object.hasOwnProperty(key)) {
        loop(object[key],key);
    }
    }
}
var changeCSS =function(value){
    var links = document.getElementsByTagName('link');
    var styles = document.getElementsByTagName('style');
    var sheets = merge([links,styles]);
    var rules = value.split(/[(\ *{)(\})]/g);

    for(var i in sheets){
    if(typeof sheets[i] == 'object'){
        var sheet = sheets[i].sheet ? sheets[i].sheet : sheets[i].styleSheet;
        for(var j in sheet.cssRules){
        if(typeof sheet.cssRules[j].selectorText != 'undefined'){
            if(sheet.cssRules[j].selectorText == rules[0]){
            sheet.cssRules[j].cssText = value;
            console.debug(sheet.cssRules[j].cssText);
            }
        }
        }
    }
    }
}

usage example:

changeCSS('#main #section1 {width: 25%;}');

this will change the css (not set a style on a tag or something)