css how to center a table?

how to center using css
MORE IMPORTANTLY,
css how to center a table?

container div, and table within.

<div id="price">
<table class="class-table-center">


/*** Center table in its container: .class ***/
table.class-table-center { /*** How to center align table in its container div. ***/
margin: auto;
}



http://webdesign.about.com/od/tables/qt/tiptablecenter.htm
http://www.granneman.com/webdev/coding/css/centertables/

http://www.w3.org/Style/Examples/007/center.en.html

CENTERING THINGS

A common task for CSS is to center text or images. In fact, there are three kinds of centering:

• Centering lines of text
• Centering a block of text or an image
• Centering a block or an image vertically

This small paragraph is vertically centered.

DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
...
<DIV class="container">
  <P>This small paragraph is vertically centered.
</DIV>

Using .data to attach (key,value) on any element, or jquery object

Using .data to attach (key,value) on any element, or jquery object
Purpose: To save data for later use, by callback functions
(e.g., knowing which control called this function, so that you know which control to update the text of)


$('#select-choice-custom-button').data('foo', 52); //place/save data
asdf = $('#select-choice-custom-button').data('foo') //retrieve/load data



CAVEAT:

//console.log($('#select-choice-custom-button').data()); //prints too many things; forgot to put a .data('keyname');



EXAMPLE USAGE:
$('#select-choice-custom-button').data('foo', 52);
alert($('#select-choice-custom-button').data('foo'));
console.log('ok');
 
   

jquery How to get the currently-selected TEXT inside a selectbox, not the value? (value is easy.)

jquery How to get the currently-selected TEXT inside a selectbox, not the value? (value is easy.)

to get the text:
http://stackoverflow.com/questions/1643227/jquery-get-selected-text-from-dropdownlist

$('#yourdropdownid').children("option:selected").text();
which is an optimization of

$("#yourdropdownid option:selected").text();

for completeness, to get the value:


<script>
var submit_product_edit_form = function() {
    // create a form hidden input with the value of true.
    $('<input>').attr({
        type: 'hidden',
        name: 'hidden_lang_change',
        value: true,
    }).appendTo('#product_view_form');

    // submit POST with it.
    $("#product_view_form").submit();
};

$("#id_lang").change(function() { // If Bulk Action selectbox OnChange
    submit_product_edit_form();
});
</script>



2

<script>
var submit_product_edit_form = function() {
    // create a form hidden input with the value of true.
    $('<input>').attr({
        type: 'hidden',
        name: 'hidden_lang_change',
        value: true,
    }).appendTo('#product_edit_form');

    // submit POST with it.
    $("#product_edit_form").submit();
};

$("#id_lang").change(function() { // If Bulk Action selectbox OnChange
    submit_product_edit_form();
});
</script>

CSS background, height, to solve clipped apple icon bottom.

Scenario: To show bottom truncated apple icon, you looked at background: background-image, background-position... but what really helped was height.

You also looked at css baseline text-bottom, but as long as height was too short, the apple image is clipped at the bottom, or top.

background-position: x px y px , for different use, only indicates where in th background-image's sprite list do you want to start displaying as top left corner.
starting position of a background image.



css for background - Google Search
http://www.w3schools.com/css/css_background.asp
http://www.w3schools.com/cssref/css3_pr_background.asp
http://www.tizag.com/cssT/background.php
For the shorthand:

When using the shorthand property the order of the property values is:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

http://www.w3schools.com/cssref/pr_background-position.asp

Definition and Usage

The background-position property sets the starting position of a background image.

Note: For this to work in Firefox and Opera, the background-attachment property must be set to "fixed".

CSS Learnt how to directly override styles, for the specific buttons/blocks that you want to edit.

Practical learning of specificity encountered in CSS, today.

The Impact:
Learnt how to directly override styles, for the specific buttons/blocks that you want to edit.

The idea is just like in VB6 or C#, Windows Forms, you just set the styles directly on and for the elements/widgets that you want the style to be, and you copy all the widgets, they get the styles,

unlike CSS, which inherits from the top.. or from somewhere. From a long obscure chain. Ugh.

But anyway:


form input.smallrounded[type="submit"] { [[form input.largerounded[type="submit"] EXCEPT ... ln476]]
form input.largesquared[type="submit"]

form input.activedisabled[type="submit"] {ln476 activedisabled
    background-color: #EDEDED;
add color: #FFFFFF;
}


    border: 2px solid #FFFFFF;
    border-radius: 16px 16px 16px 16px;
    color: #FFFFFF;
    height: 34px;
}ln450 color for product box btn text 'Install'

form input.active[type="submit"] {
    background-color: #FF0000;
}ln472 bkgnd color for all buttons 'please try again', 'product box btn'

<input class="largerounded active" type="submit" value="Ok">
form input.largerounded[type="submit"] {
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
    height: 48px;
}ln444 color for one button 'please try again' , [cancel btn, install thisdevice anotherdevice]
form input.largerounded[type="submit"] {
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
    height: 48px;
}ln444 proceed,cancel : DON'T CHANGE





form input.smallrounded[type="submit"] {
    border: 2px solid #FFFFFF;
    border-radius: 16px 16px 16px 16px;
    color: #FFFFFF;
    height: 34px;
}ln450 smallrounded 'add' new device name

form input.largesquared[type="submit"] {
    border: 2px solid #FFFFFF;
    border-radius: 0 0 0 0;
    color: #FFFFFF;
    height: 48px;
}ln462 square big existing device name



AJAX PRODUCTBOX
class=" .product-box-button {
    background-color: #{{color_1}};
add color: #{{button_text_color}};
}

AJAX INSTALL TO THIS DEVICE?
class=" .install-to-device-button {
    background-color: #{{color_1}};
color: #{{button_text_color}};
}

class=" .install-to-device-cancel-button {
    background-color: #BFBFBF;
color: #FFFFFF;
}

/*AJAX SELECT DEVICE*/
class=" .large-squared-devicename-button {
    background-color: #{{color_1}};
color: #{{button_text_color}};
}

class=" .small-rounded-addnewdevice-button { NO CHANGES.
    background-color: #EDEDED;
color: #FFFFFF;
}

/*ERROR*/
class=" .error-ok-button {
    background-color: #{{color_1}};
color: #{{button_text_color}};
}









OKAY ALREADY:
/*AJAX PRODUCTBOX*/
/*
form input.active[type="submit"]*/

form.provision input.product-box-button {
    background-color: #008000;
color: #FF6820;
}

/*AJAX INSTALL TO THIS DEVICE?*/

div.centeredbuttons input.install-to-device-button {
    background-color: #FF6820;
color: #008000;
}

form.close_lb input.install-to-device-cancel-button {
    background-color: #000000;
color: #FF0000;
}

/*AJAX SELECT DEVICE*/
div.centeredbuttons input.large-squared-devicename-button {
    background-color: #DE2EF1;
color: #001EFF;
}

Read and closed these docs about Django Template Language today.

Read and closed these docs about Django Template Language today,
with more understanding than all the instances before.

Coz... viewed other ppl's code.


django template language
https://docs.djangoproject.com/en/dev/ref/templates/builtins/#std:templatetag-comment
https://docs.djangoproject.com/en/dev/ref/templates/api/

jquery get the value of a select box

jquery get the value of a select box

make the select box or input box into a $jq object first, then
use $jquery_object.val().

http://api.jquery.com/val/


        console.log(product_text_color.val());
        console.log(button_text_color.val());

        changeProductTextColor({'color': product_text_color.val()}, '2');
        changeTextColor({'color': button_text_color.val()},'install','2');