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');

using jscolor programatically (no jquery)

jscolor is a color picker javascript

it lets u make an input type="text" into a color picker, just by adding the class .color to the <input tag>

1
it inside a function
(the input tag element, referenced as this) is an OBJECT with property .color which is the chosen color in the colorpicker

2
therefore, you can pass

product_text_color.attr('class', 'color'); // the input box has been made into a jquery object first
// attach color picker to it by adding a class .color to it

{'color': product_text_color.val()}
programatically passing an OBJECT with prop .color to a function:
since you can't directly get the colorpicker, USE JQUERY TO DO IT, and this is the way how.
and then the fn taking this OBJECT as arg, references it like this: colorObj.color





Refer to next post:
jquery get the value of a select box

css baseline

css baseline

http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

CSS vertical-align Property

img
{
vertical-align:text-top;
}

text-bottom

The bottom of the element is aligned with the bottom of the parent element's font