Code All Time: Mouse hover and set priority color in boxes.

Plugins:

HTML:

asp.net- .aspx page

<asp:HiddenField ID="boxId" runat="server" />

<asp:HiddenField ID="boxValue" runat="server" />

Profitiblity and productivity

</div>

<%--start--%>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<%--end--%>

<%--start--%>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<%--end--%>

<%--start--%>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<%--end--%>

<%--start--%>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<%--end--%>

<%--start--%>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<%--end--%>

<%--start--%>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<%--end--%>

<%--start--%>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<%--end--%>

<%--start--%>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<%--end--%>

<%--start--%>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<%--end--%>

<%--start--%>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<%--end--%>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

Time

</div>

<div class="mediumpriority" onclick="mediumpriority()">Medium</div><br /><br /><br />

<asp:Button ID="Button1" runat="server" onclick="update_Click" OnClientClick="getColor()" Text="Button" />

</form>

asp.net- aspx.cs

protected void Page_Load(object sender, EventArgs e)

{

if (Session["box"] != null)

{

string boxId = Session["box"].ToString();

string boxValue = Session["value"].ToString();

ClientScript.RegisterStartupScript(this.GetType(), "colorLoad", "colorLoad('" + boxId + "','" + boxValue + "');", true);

}

protected void update_Click(object sender, EventArgs e)

{

string box = boxId.Value;

string value = boxValue.Value;

Session["box"] = box;

Session["value"] = value;

}

CSS:

<style>

body {

}

.boxArea {

border: 1px solid gray;

width: 575px;

height: 550px;

padding: 10px;

margin: 40px 35px;

float: left;

}

.textOne {

float: left;

max-height: 550px;

width: 167px;

margin: 220px 170px;

margin-left: -180px;

padding-top: 530px;

-webkit-transform: rotate(-90deg);

-moz-transform: rotate(-90deg);

-ms-transform: rotate(-90deg);

-o-transform: rotate(-90deg);

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

.textTwo {

}

.number {

width: 50px;

height: 50px;

text-align: center;

float: left;

padding-top: 14px;

}

.box {

width: 50px;

height: 50px;

border: 1px solid gray;

float: left;

border-bottom: none;

border-right: none;

}

.boxR {

width: 50px;

height: 50px;

border: 1px solid gray;

float: left;

border-bottom: none;

}

.boxB {

width: 50px;

height: 50px;

border: 1px solid gray;

float: left;

border-right: none;

}

.boxRB {

width: 50px;

height: 50px;

border: 1px solid gray;

float: left;

}

.box:hover, .boxR:hover, .boxB:hover, .boxRB:hover, .selectBox:hover {

cursor: pointer;

}

.selectBox {

background: #c3c1c1;

}

.selectBoxHigh {

background: red !important;

}

.selectBoxMedium {

background: yellow !important;

}

.selectBoxLow {

background: #4cff00 !important;

}

.highpriority {

width: 60px;

height: 50px;

border: 1px solid #ae0303;

background: red;

float: left;

margin: 40px 5px;

margin-bottom: 5px;

text-align: center;

padding-top: 14px;

color: #000;

}

.mediumpriority {

width: 60px;

height: 50px;

border: 1px solid #cccc06;

background: yellow;

float: left;

margin: 5px 5px;

text-align: center;

padding-top: 14px;

color: #000;

}

.lowpriority {

width: 60px;

height: 50px;

border: 1px solid #3dba08;

background: #4cff00;

float: left;

margin: 10px 5px;

text-align: center;

padding-top: 14px;

color: #000;

}

</style>

Javascript:

function getColor() {

var cusid_ele = document.getElementsByClassName('item');

var id = '';

var boxVal = '';

for (var i = 0; i < cusid_ele.length; ++i) {

var item = cusid_ele[i];

id = id + item.id + ',';

if ($(item).hasClass("selectBoxHigh")) {

boxVal = boxVal + 'high,';

}

else if ($(item).hasClass("selectBoxMedium")) {

boxVal = boxVal + 'medium,';

}

else if ($(item).hasClass("selectBoxLow")) {

boxVal = boxVal + 'low,';

}

else {

boxVal = boxVal + 'none,';

}

document.getElementById("<%= boxId.ClientID %>").value = id;

document.getElementById("<%= boxValue.ClientID %>").value = boxVal;

}

function colorLoad(boxId, boxValue) {

var boxFields = boxId.split(',');

var valueFields = boxValue.split(',');

for (var i = 0; i < 100; i++) {

if (valueFields[i] == 'high') {

$('#' + boxFields[i]).addClass('selectBoxHigh');

}

if (valueFields[i] == 'medium') {

$('#' + boxFields[i]).addClass('selectBoxMedium');

}

if (valueFields[i] == 'low') {

$('#' + boxFields[i]).addClass('selectBoxLow');

}

if (valueFields[i] == 'none') {

$('#' + boxFields[i]).addClass('selectBox');

}

</script>

var mousedown = 0;

$(document).mousedown(function (e) {

e.preventDefault();

mousedown = 1;

});

$(document).mouseup(function (e) {

e.preventDefault();

mousedown = 0;

});

function mouseoverColor(x) {

if (mousedown == 1) {

if ($(x).hasClass("selectBox")) {

$(x).removeClass('selectBox');

} else {

$(x).addClass('selectBox');

$(x).removeClass('selectBoxHigh');

$(x).removeClass('selectBoxMedium');

$(x).removeClass('selectBoxLow');

}

function mousedownColor(x) {

if ($(x).hasClass("selectBox")) {

$(x).removeClass('selectBox');

} else {

$(x).addClass('selectBox');

$(x).removeClass('selectBoxHigh');

$(x).removeClass('selectBoxMedium');

$(x).removeClass('selectBoxLow');

}

function highpriority() {

var cusid_ele = document.getElementsByClassName('item');

for (var i = 0; i < cusid_ele.length; ++i) {

var item = cusid_ele[i];

if ($(item).hasClass("selectBox")) {

$(item).addClass('selectBoxHigh');

$(item).removeClass('selectBox');

}

function mediumpriority() {

var cusid_ele = document.getElementsByClassName('item');

for (var i = 0; i < cusid_ele.length; ++i) {

var item = cusid_ele[i];

if ($(item).hasClass("selectBox")) {

$(item).addClass('selectBoxMedium');

$(item).removeClass('selectBox');

}

function lowpriority() {

var cusid_ele = document.getElementsByClassName('item');

for (var i = 0; i < cusid_ele.length; ++i) {

var item = cusid_ele[i];

if ($(item).hasClass("selectBox")) {

$(item).addClass('selectBoxLow');

$(item).removeClass('selectBox');

}

</script>

Just copy and paste............ Enjoy.......

Code All Time

Pages

Tuesday, April 18, 2017

Mouse hover and set priority color in boxes.

No comments:

Post a Comment