In addition to changing the input values on change of the slider ... how can I vise versa change the slider on input change in addition?
html:
<div style="margin-bottom:20px;">
<label for="amount">Price range:</label>
<span style="float:right;">
<input id="amount-min" type="number" placeholder="0.000" style="border: 1px solid #ddd;; color:#f6931f; font-weight:bold; text-align:center; width:75px; padding-bottom: 0px; padding-top: 0px;">
<input id="amount-max" type="number" placeholder="0.000" style="border: 1px solid #ddd;; color:#f6931f; font-weight:bold; text-align:center; width:75px; padding-bottom: 0px; padding-top: 0px;">
</span>
</div>
<div id="slider-range"></div>
javascript:
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#amount-min" ).val( ui.values[ 0 ] );
$( "#amount-max" ).val( ui.values[ 1 ] );
}
});
$( "#amount-min" ).val( $( "#slider-range" ).slider( "values", 0 ) );
$( "#amount-max" ).val( $( "#slider-range" ).slider( "values", 1 ) );
$('#amount-min').on('change', function () {
$(this).val( $( "#slider-range" ).slider( "values", 0 ) );
});
$('#amount-max').on('change', function () {
$(this).val( $( "#slider-range" ).slider( "values", 1 ) );
});
});
Fiddle:
http://jsfiddle.net/6e4gLmc2/
I want to keep the original range as given. And I want to only allow an input value that is within the range and considering the other value
I suggest you change your on change to on input. Works better on type number inputs as you want the value to change immediately as the user changes the values in the inputs ( including with the arrows or up/down keys )
This event is similar to the onchange event. The difference is that the oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus, after the content has been changed.
Then just add this.val() ( which is the input val ) as low or high value of the slider
$(function() {
$("#slider-range").slider({
range: true,
min: 0,
max: 500,
step: 0.001,
values: [35.113, 300.123],
slide: function(event, ui) {
$("#amount-min").val(ui.values[0]);
$("#amount-max").val(ui.values[1]);
}
});
$("#amount-min").val($("#slider-range").slider("values", 0));
$("#amount-max").val($("#slider-range").slider("values", 1));
console.log(
$("#amount-min").val() );
$('#amount-min').on('input', function() {
if ($(this).val() < $("#amount-max").val()) {
$("#slider-range").slider('values', 0, $(this).val());
}
});
$('#amount-max').on('input', function() {
if ($(this).val() > $("#amount-min").val()) {
$("#slider-range").slider('values', 1, $(this).val());
}
});
});
<title>jQuery UI Slider - Range slider</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div style="margin-bottom:20px;">
<label for="amount">Price range:</label>
<span style="float:right;">
<input id="amount-min" step=".001" type="number" placeholder="0.000" style="border: 1px solid #ddd;; color:#f6931f; font-weight:bold; text-align:center; width:75px; padding-bottom: 0px; padding-top: 0px;">
<input id="amount-max" step=".001" type="number" placeholder="0.000" style="border: 1px solid #ddd;; color:#f6931f; font-weight:bold; text-align:center; width:75px; padding-bottom: 0px; padding-top: 0px;">
</span>
</div>
<div id="slider-range"></div>
Related
Somehow the canvas drawing is getting blur when attached under tabs of jquery ui.
Can anybody help me to figure out why canvas drawing is getting blur?
problem seems to be in this section
.ui-tabs-panel {
height:500px; }
#chartCanvas-1,#crossCanvas-1{
position:absolute; top:50px; left:0px;
/*border:1px solid blue;
width:500px;
height:400px;*/
}
/*#crossCanvas-1{ border:1.5px solid green;}
#chartCanvas-1{ border:1px solid red;}*/
Using jquery 1.8.3
Using jquery ui and css
<html lang="en">
<head>
<meta charset="utf-8" />
<title> Create dynamic Tabs using jQuery and css</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
var tabTitle = $( "#tab_title" ),
tabContent = $( "#tab_content" ),
tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
tabCounter = 2;
var tabs = $( "#tabs" ).tabs();
// modal dialog init: custom buttons and a "close" callback reseting the form inside
var dialog = $( "#dialog" ).dialog({
autoOpen: false,
modal: true,
buttons: {
Add: function() {
addTab();
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
form[ 0 ].reset();
}
});
// addTab form: calls addTab function on submit and closes the dialog
var form = dialog.find( "form" ).submit(function( event ) {
addTab();
dialog.dialog( "close" );
event.preventDefault();
});
// actual addTab function: adds new tab using the input from the form above
function addTab() {
var label = tabTitle.val() || "Tab " + tabCounter,
id = "tabs-" + tabCounter,
chartCanvas_id = "chartCanvas-" + tabCounter,
crossCanvas_id = "crossCanvas-" + tabCounter,
li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";
tabs.find( ".ui-tabs-nav" ).append( li );
tabs.append( "<div id='" + id + "'><canvas id='"+chartCanvas_id+ "'></canvas><canvas id='"+crossCanvas_id+ "'></canvas></div>" );
tabs.tabs( "refresh" );
tabCounter++;
}
// addTab button: just opens the dialog
$( "#add_tab" )
.button()
.click(function() {
dialog.dialog( "open" );
});
// close icon: removing the tab on click
$( "#tabs span.ui-icon-close" ).live( "click", function() {
var panelId = $( this ).closest( "li" ).attr( "aria-controls" );
if( panelId !== "tabs-1")
{
panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
$( "#" + panelId ).remove();
tabs.tabs( "refresh" );
}
});
var canvas=document.getElementById("chartCanvas-1");
var context=canvas.getContext("2d");
var canvasOffset=$("#chartCanvas-1").offset();
/*var canvasTemp=document.getElementById("crossCanvas-1");
var ctxTemp=canvasTemp.getContext("2d");
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;*/
context.beginPath();
context.moveTo(10, 10);
context.lineTo(40,30);
context.stroke();
context.closePath();
/*ctxTemp.beginPath();
ctxTemp.moveTo(0, 0);
ctxTemp.lineTo(40,50);
ctxTemp.stroke();
ctxTemp.closePath(); */
});
</script>
<link rel="stylesheet" href="jquery-ui.css">
<style type="text/css">
#dialog label, #dialog input { display:block; }
#dialog label { margin-top: 0.5em; }
#dialog input, #dialog textarea { width: 95%; }
#tabs { margin-top: 0.7em; height: 600px;}
#tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
#add_tab { cursor: pointer; }
.ui-tabs-panel {
height:500px; }
#chartCanvas-1,#crossCanvas-1{
position:absolute; top:50px; left:0px;
/*border:1px solid blue;
width:500px;
height:400px;*/
}
/*#crossCanvas-1{ border:1.5px solid green;}
#chartCanvas-1{ border:1px solid red;}*/
</style>
</head>
<body>
<div id="dialog" title="Tab data">
<form>
<fieldset class="ui-helper-reset">
<label for="tab_title">Title</label>
<input type="text" name="tab_title" id="tab_title" value="" class="ui-widget-content ui-corner-all" />
<label for="tab_content">Content</label>
<textarea name="tab_content" id="tab_content" class="ui-widget-content ui-corner-all"></textarea>
</fieldset>
</form>
</div>
<button id="add_tab">Add Tab</button>
<div id="tabs">
<ul>
<li>Default <span class="ui-icon ui-icon-close">Remove Tab</span></li>
</ul>
<div id="tabs-1">
<canvas id="chartCanvas-1" style="width: 600px; height: 400px"></canvas>
<!-- <canvas id="crossCanvas-1" style="width: 600px; height: 400px"></canvas> -->
</div>
</div>
</body>
</html>
Regards,
SK
the reson it's blurred is becuase of your CSS for the canvas, in the canvas tag.
<canvas id="chartCanvas-1" style="width: 600px; height: 400px"></canvas>
The standard size for a canvas is 300x150 pixels and changing the width and height with CSS will scale the canvas. To change the size of the canvas, instead do it in the JavaSCript code
canvas.width = 600;
canvas.height = 400;
And remove the style from your canvas tag in your HTML code
<canvas id="chartCanvas-1"></canvas>
How to alert text after slide range [jquery] ?
my first question is in picture.
And my second question is , When checked checkbox it's will disable slide range,
but when user click slide range it's will alert. How to apply code for, If slide range disable it's will not alert when click.
and this is my script code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<input id="display_value" type="text" value="0">
<br>
<div id="slide_data" style=" width: 300px; float: left; margin-top: 7px;"></div>
<br>
<br>
<label style=" font-family: lato; font-size: 13px; ">
<input type="checkbox" name="checkbox_disable" id="checkbox_disable" style="cursor: pointer;" />Disable Slide Range
</label>
<script>
window.onload=function(){
$(function() {
$("#slide_data" ).slider({
range: "min",
value: 0,
min: 0,
max: 1000,
slide: function( event, ui ) {
$( "#display_value" ).val(ui.value);
}
});
$( "#checkbox_disable" ).click(function(){
if(this.checked)
{
$( "#slide_data" ).slider( "option", "disabled", true );
alert('checked');
}
else
{
$( "#slide_data" ).slider( "option", "disabled", false );
alert('not checked');
}
});
});
}
// after user slide we will call function filters_web_hosting_package //
$(document).ready(function (){
$("#slide_data").click(
function () {
alert("Slide");
//filters_web_hosting_package();
}
);
});
</script>
It's in jQuery's API:
stop: function( event, ui ) {}
Your case:
stop: function(event, ui) {
alert("test")
}
Updated fiddle
Use $("#slide_data").mouseup instead of $("#slide_data").click.
Working FIDDLE.
you dont need to use the slide method in the slide object. you can use the stop method. it will fire after you have slided. This way you dont need the last function you created.
The display of the value can still be in the slide method* so add the stop method for the if statement
window.onload=function(){
$(function() {
$("#slide_data" ).slider({
range: "min",
value: 0,
min: 0,
max: 1000,
slide: function( event, ui ) {
$( "#display_value" ).val(ui.value);
},
stop: function( event, ui ) {
if(ui.value > 500)
alert("test");
}
});
$( "#checkbox_disable" ).click(function(){
if(this.checked) {
$( "#slide_data" ).slider( "option", "disabled", true );
alert('checked');
} else {
$( "#slide_data" ).slider( "option", "disabled", false );
alert('not checked');
}
});
});
}
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<input id="display_value" type="text" value="0">
<br>
<div id="slide_data" style=" width: 300px; float: left; margin-top: 7px;"></div>
<br>
<br>
<label style=" font-family: lato; font-size: 13px; ">
<input type="checkbox" name="checkbox_disable" id="checkbox_disable" style="cursor: pointer;" />Disable Slide Range
</label>
I am using Jqueryui drag resize select all together drag and resize is working fine but select is not working fine .
JSFiddle
My code is:-
CSS-
.dr {
background: none repeat scroll 0 0 #63F;
color: #7B7B7B;
height: 50px;
text-shadow: 1px 1px 2px #FFFFFF;
width: 50px;
position:absolute;
}
.bg_section {
border: 1px solid #E4E3E3;
height: 290px;
margin: 48px auto 0;
position: relative;
width: 400px;
}
JS-
$(document).ready(function(){
var selected = $([]), offset = {top:0, left:0};
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add": function() {
section = $( "#section" ).val();
divid = $( "#divdata" ).val();
divstring="<div class='dr' id='"+divid+"'>"+divid+"</div>";
// $( ".add" ).appendTo( $( "#"+section) );
$( divstring ).appendTo( $( "."+section) );
$( "."+section).selectable();
$("#divdata option[value="+ divid+"]").remove();
$("#"+divid).draggable({
containment: "."+section,
grid: [ 10, 10 ],
start: function(ev, ui) {
if ($(this).hasClass("ui-selected")){
selected = $(".ui-selected").each(function() {
var el = $(this);
el.data("offset", el.offset());
});
}
else {
selected = $([]);
$(".dr").removeClass("ui-selected");
}
offset = $(this).offset();
},
drag: function(ev, ui) {
var dt = ui.position.top - offset.top, dl = ui.position.left - offset.left;
// take all the elements that are selected expect $("this"), which is the element being dragged and loop through each.
selected.not(this).each(function() {
// create the variable for we don't need to keep calling $("this")
// el = current element we are on
// off = what position was this element at when it was selected, before drag
var el = $(this), off = el.data("offset");
el.css({top: off.top + dt, left: off.left + dl});
});
},
stop: function(e, ui) {
var Stoppos = $(this).position();
var leftPos=Stoppos.left;
var topPos= Stoppos.top;
var dragId=ui.helper[0].id;
// alert(leftPos/10);
// alert(topPos/10);
// alert(dragId);
sectionWidth= $('#'+dragId).parent().width();
sectionHeight = $('#'+dragId).parent().height();
},
}).resizable({
containment: "."+section,
grid: [10,10],
start: function(e, ui) {
// alert($(".paper-area").width());
//containment: ".paper-area",
$(this).css({
// position: "absolute",
});
},
stop: function(e, ui) {
// containment: ".paper-area",
$(this).css({
// position: "absolute",
});
}
});
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
}
});
$( "body" ).on( "click", ".dr", function(e) {
if (e.metaKey == false) {
// if command key is pressed don't deselect existing elements
$( ".dr" ).removeClass("ui-selected");
$(this).addClass("ui-selecting");
}
else {
if ($(this).hasClass("ui-selected")) {
// remove selected class from element if already selected
$(this).removeClass("ui-selected");
}
else {
// add selecting class if not
$(this).addClass("ui-selecting");
}
}
$( ".bg_section" ).data(".bg_section")._mouseStop(null);
});
$(".add").click(function() {
$( "#dialog-form" ).dialog( "open" );
$("#new_field").hide();
$("#save_new").hide();
});
$(".add_new").click(function() {
$(".add_new").hide();
$("#new_field").show();
$("#save_new").show();
});
$("#save_new").click(function() {
$( "#divdata" ).append($('<option>', {
value: $("#new_field").val(),
text: $("#new_field").val(),
class:'add',
}));
$("#new_field").hide();
$("#save_new").hide();
$(".add_new").show();
});
})
HTML-
<div id="dialog-form" title="Add fields in Section">
<p class="validateTips">All form fields are required.</p>
<div class="add_new">Add</div>
<input type="text" id="new_field"/>
<div id="save_new">save</div>
<form>
<fieldset>
<label for="divdata">Divs</label>
<select name="divdata" id="divdata">
<option value="dr1">Div1</option>
<option value="dr2">Div2</option>
<option value="dr3">Div3</option>
<option value="dr4">Div4</option>
<option value="dr5">Div5</option>
</select>
</br>
<label for="section">Section</label>
<select name="section" id="section">
<option value="paper-area">Header</option>
<option value="paper-area-detail">Detail</option>
<option value="paper-area-qty">Items</option>
<option value="paper-area-sub">Total</option>
<option value="paper-area-footer">Footer</option>
</select>
</fieldset>
</form>
</div>
<div class="main_bg">
<div class="textarea-top">
<div class="textarea-field">
<div class="field-icon add"><img src="<?php echo Yii::app()->baseUrl;?>/images/bill_add-field-icon.png" alt="add" border="0" width="29" height="25" /></div>
</div>
<div class="paper-area bg_section" id="paper_area">
</div>
<div class="paper-area-detail bg_section">
</div>
<div class="paper-area-qty bg_section">
</div>
<div class="paper-area-sub bg_section">
</div>
<div class="paper-area-footer bg_section"></div>
</div>
I am using drag-select for drag resize.Any help should be Appreciated.
Seems like a strange bug/conflict with jquery ui dragable and/or resizeable. Only some parts of selectable are working in combination with these other two functions. If you inspect the elements which have all three functions and you try to select one of them it only gets the "ui-selecting" class, which is a timeout class and option from selectable but stoping there. Normally the classes are replaced in this way:
ui-selectee
ui-selecting
ui-selected.
If you remove the drag- and resizeable functions the selectable stuff is working normally (but there still other bugs in your code)
I guess it is possible to combine all these function, but you will have to play around with the options and callbacks to get it working like you want to. Maybe not everything you want is possible becouse of these conflicts.
The easiest way to resize is by using resize:both; , max-height:__px; , max-width:__px; in CSS
Indeed it seems that jquery ui draggable and selectable don't work that nice together. However other people have posted solutions. Please look at the following,
http://words.transmote.com/wp/20130714/jqueryui-draggable-selectable/
http://jsfiddle.net/6f9zW/light/ (this is from the article above)
Since it seems as a nice working solution that examines the state when dragging and selecting, i will also post it below in case the site goes down.
JS
// this creates the selected variable
// we are going to store the selected objects in here
var selected = $([]), offset = {top:0, left:0};
$( "#selectable > div" ).draggable({
start: function(ev, ui) {
if ($(this).hasClass("ui-selected")){
selected = $(".ui-selected").each(function() {
var el = $(this);
el.data("offset", el.offset());
});
}
else {
selected = $([]);
$("#selectable > div").removeClass("ui-selected");
}
offset = $(this).offset();
},
drag: function(ev, ui) {
var dt = ui.position.top - offset.top, dl = ui.position.left - offset.left;
// take all the elements that are selected expect $("this"), which is the element being dragged and loop through each.
selected.not(this).each(function() {
// create the variable for we don't need to keep calling $("this")
// el = current element we are on
// off = what position was this element at when it was selected, before drag
var el = $(this), off = el.data("offset");
el.css({top: off.top + dt, left: off.left + dl});
});
}
});
$( "#selectable" ).selectable();
// manually trigger the "select" of clicked elements
$( "#selectable > div" ).click( function(e){
if (e.metaKey == false) {
// if command key is pressed don't deselect existing elements
$( "#selectable > div" ).removeClass("ui-selected");
$(this).addClass("ui-selecting");
}
else {
if ($(this).hasClass("ui-selected")) {
// remove selected class from element if already selected
$(this).removeClass("ui-selected");
}
else {
// add selecting class if not
$(this).addClass("ui-selecting");
}
}
$( "#selectable" ).data("selectable")._mouseStop(null);
});
// starting position of the divs
var i = 0;
$("#selectable > div").each( function() {
$(this).css({
top: i * 42
});
i++;
});
CSS
#selectable .ui-selecting {background: #FECA40;}
#selectable .ui-selected {background: #F39814; color: white;}
#selectable {margin: 0; padding: 0; height: 300px; position: relative; padding:0; border:solid 1px #DDD;}
#selectable > div {position: absolute; margin: 0; padding:10px; border:solid 1px #CCC; width: 100px;}
.ui-selectable-helper {position: absolute; z-index: 100; border:1px dotted black;}
HTML
<div id="selectable">
<div class="ui-widget-content">Item 1</div>
<div class="ui-widget-content">Item 2</div>
<div class="ui-widget-content">Item 3</div>
<div class="ui-widget-content">Item 4</div>
<div class="ui-widget-content">Item 5</div>
</div>
Other threads describing similar problem and solutions,
Is there a JQuery plugin which combines Draggable and Selectable
jQuery UI : Combining Selectable with Draggable
I have found A solution Now we can use *Drag-Resize-Select -*together
Example-
code:-
CSS:-
.ui-selecting {background: #FECA40;}
.ui-selected {background: #F39814; color: white;}
.bg_section {margin: 0; padding: 0; height: 300px; position: relative; padding:0; border:solid 1px #DDD;}
.bg_section > div {position: absolute; margin: 0; padding:10px; border:solid 1px #CCC; width: 100px;}
.ui-selectable-helper {position: absolute; z-index: 100; border:1px dotted black;}
JS:-
var selected = $([]); // list of selected objects
var lastselected = ''; // for the shift-click event
$(document).ready(function(){
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add": function() {
section = $( "#section" ).val();
divid = $( "#divdata" ).val();
divstring="<div class='dr' id='"+divid+"'>"+divid+"</div>";
// $( ".add" ).appendTo( $( "#"+section) );
$( divstring ).appendTo( $( "."+section) );
$("#divdata option[value="+ divid+"]").remove();
$("#"+divid).draggable({
containment: "."+section,
grid: [ 10, 10 ],
start: function(ev, ui) {
$(this).is(".ui-selected") || $(".ui-selected").removeClass("ui-selected");
selected = $(".ui-selected").each(function() {
$(this).addClass("dragging");
});
},
drag: function(ev, ui) {
},
stop: function(e, ui) {
selected.each(function() {
$(this).removeClass("dragging");
});
var Stoppos = $(this).position();
var leftPos=Stoppos.left;
var topPos= Stoppos.top;
var dragId=ui.helper[0].id;
// alert(leftPos/10);
// alert(topPos/10);
// alert(dragId);
sectionWidth= $('#'+dragId).parent().width();
sectionHeight = $('#'+dragId).parent().height();
},
}).resizable({
containment: "."+section,
grid: [10,10],
start: function(e, ui) {
// alert($(".paper-area").width());
//containment: ".paper-area",
$(this).css({
// position: "absolute",
});
},
stop: function(e, ui) {
// containment: ".paper-area",
$(this).css({
// position: "absolute",
});
}
});
$("#paper_area").selectable();
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
}
});
$( "body" ).on( "click", ".dr", function(evt) {
id = $(this).attr("id");
// check keys
if ((evt.shiftKey) && (lastselected != '')) {
// loop all tasks, select area from this to lastselected or vice versa
bSelect = false;
$(".task").each(function() {
if ($(this).is(':visible')) {
if ($(this).attr("id") == id || $(this).attr("id") == lastselected)
bSelect = !bSelect;
if (bSelect || $(this).attr("id") == lastselected || $(this).attr("id") == lastselected) {
if (!$(this).hasClass("ui-selected"))
$(this).addClass("ui-selected");
}
else
$(this).removeClass("ui-selected");
}
});
return;
}
else if (!evt.ctrlKey)
$(".ui-selected").removeClass("ui-selected"); // clear other selections
if (!$(this).hasClass("ui-selected")) {
$(this).addClass("ui-selected");
lastselected = id;
}
else {
$(this).removeClass("ui-selected");
lastselected = '';
}
});
$(".add").click(function() {
$( "#dialog-form" ).dialog( "open" );
$("#new_field").hide();
$("#save_new").hide();
});
$(".add_new").click(function() {
$(".add_new").hide();
$("#new_field").show();
$("#save_new").show();
});
$("#save_new").click(function() {
$( "#divdata" ).append($('<option>', {
value: $("#new_field").val(),
text: $("#new_field").val(),
class:'add',
}));
$("#new_field").hide();
$("#save_new").hide();
$(".add_new").show();
});
})
I have 5 functions like the one shown below. What I would like to do is once the user has slid each bar to a position, for the combined total of all 5 bars to print out a message.
Depending on what total is reached, would depend what message is shown. For example, if the total of all 5 slide bars = 500, the message would read "You are very happy". If the total of all 5 slide bars = 100 the message would read "You are very sad"
I'm new to this so looking for some experience and best practice advice so I can take it and learn.
$(function () {
$("#slider-vertical").slider({
orientation: "vertical",
range: "min",
min: 0,
max: 100,
value: 10,
slide: function (event, ui) {
$("#amount").val(ui.value);
}
});
$("#amount").val($("#slider-vertical").slider("value"));
});
In the HTML, the results of the slider are showing like this:
<p>
<label for="amount">Volume:</label>
<input type="text" id="amount" style="border: 0; color: #f6931f; font- weight: bold;"
/>
</p>
<div id="slider-vertical" style="height: 200px;"></div>
</div>
<p>
<label for="amount">Volume:</label>
<input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
<style>
.slider { height: 200px; float:left; margin-right:20px; }
</style>
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
<script>
$(function() {
$( ".slider" ).slider({
orientation: "vertical",
range: "min",
min: 0,
max: 100,
value: 10,
slide: function( event, ui ) {
var total = 0;
$('.slider').each( function() {
total += $(this).slider('value');
});
$( "#amount" ).val( total );
}
});
});
</script>
ADDITION:
In order to show different images depending on total value, you should, firstly, use image tag instead of input tag
<img id="amount-img" src="/path/to/images/defualt.png"/>
and, secondly, use code like this to choose and display images:
slide: function( event, ui ) {
var total = 0;
$('.slider').each( function() {
total += $(this).slider('value');
});
var img = 'default.png';
if( total>=50 ) img = 'above50.png';
else if( total>=100 ) img = 'above100.png';
else if( total>=250 ) img = 'above250.png';
$('#amount-img').attr( 'src', '/path/to/images/'+img );
}
I have an odd problem, that I can find no reference to in SO or otherwise. My grid appears to be working great in all ways except for two critical issues, and two things I would like to do. When replying, I don't expect responses for all concerns, even if you have info for one of them, please post it as an answer. Please see images below for visuals on my problem.
First issue:
Whenever data is placed into ANY field of an empty row and tab is clicked a new row is generated. I only want this behaviour if the selected cell is in the last column of this row
Second issue:
Whenever a new row is added that extends past the edge of my defined div, and the vertical scrollbar appears,an additional non-selectable column is added which creates a horizontal scrollbar at the bottom of my grid. This bar hides part of the bottom row. How do I prevent this horizontal bar from appearing.
Third request:
When the grid creates a new row, how to I validate to ensure each cell in the current last row has data in it before allowing the tab effect to add the new row.
Final request:
After clicking a cell and it receives focus, it cannot lose focus unless another cell is selected. I need to lose focus if user clicks on anything outside of the grid.
Showing adding of new row even though not all cells filled, and selector is in first cell
Showing issues presented by bottom scrollbar
HTML
<link type="text/css" rel="stylesheet" href="css/slickGrid/slick.grid.css" />
<link type="text/css" rel="stylesheet" href="css/cupertino/jquery-ui-1.8.20.custom.css" />
<link type="text/css" rel="stylesheet" href="css/slickGrid/slick.grid.darren1.css" />
<form id="myGridForm" action="" method="post">
<div style="position:relative; overflow:visible; margin:25px 0 0 0;">
<div id="loader" style="position:absolute; z-index:997;top: 62px; left:200px;"><img src="images/loading.gif" border="0" /></div>
<div id="dateInput" style="position:relative;z-index:990;visibility:hidden;">
<!-- jQuery DatePicker shows here -->
<p><label for="datepicker">Click to change date:</label><input type="text" id="datepicker" name='datepicker'size="30" readonly="readonly"/></p>
</div>
<div id="myGrid" style="height: 177px; width: 902px; float: left; overflow: hidden; position: relative; visibility: hidden;" >
<!-- #myGrid.slickGrid goes here -->
</div>
</div>
<div class="options-panel" style=" -moz-border-radius: 6px; -webkit-border-radius: 6px; border: 1px solid silver; background: #f0f0f0; padding: 4px; margin: 0 0 220px 0; width: 880px;position: absolute; top: 315px; left: 280px;">
<h2>Instructions:</h2>
<ul>
<li>Select the date by clicking the date image above the table</li>
<li>Enter your event data (you can enter multiple events for that date)</li>
<li>To add another event, hit your <em>TAB</em> key and a new row will be created</li>
<li>When you're all done for this date, click the <em>Commit Changes</em> button to have your events saved to the site</li>
</ul>
<input type="hidden" name="p" id="p" value="<?=$_POST['p']?>" />
<input type="hidden" name="k" id="k" value="<?=$_POST['k']?>" />
<input type="hidden" name="i" id="i" value="<?=$_POST['i']?>" />
<input type="hidden" name="d" id="d" value="<?=$_POST['d']?>" />
<input type="hidden" name="gridData" id="gridData" />
<div id="submitButton" style="visibility:hidden;"> <button type="submit">Commit Changes</button></div>
</div>
</form>
<script>
console.log('json2 Loadstatus: '+json2Loaded);
</script>
<script type="text/javascript" language="javascript" src="js/slickGrid/lib/firebugx.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js.php"></script>
<script type="text/javascript" src="js/json2.js.php"></script>
<script src="js/slickGrid/plugins/slick.cellrangedecorator.js"></script>
<script src="js/slickGrid/plugins/slick.cellrangeselector.js"></script>
<script src="js/slickGrid/plugins/slick.cellselectionmodel.js"></script>
<script src="js/slickGrid/slick.formatters.js"></script>
<script src="js/slickGrid/slick.editors.js"></script>
<script src="js/slickGrid/jquery.event.drag-2.0.min.js"></script>
<script src="js/slickGrid/slick.core.js"></script>
<script src="js/slickGrid/slick.grid.js"></script>
<script>
function requiredFieldValidator(value) {
if (value == null || value == undefined || !value.length) {
return {valid: false, msg: "This is a required field"};
} else {
return {valid: true, msg: null};
}
}
var columns = [
{ id: "VisitDate", name: "VisitDate", field: "VisitDate", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text },
{ id: "VisitTime", name: "VisitTime", field: "VisitTime", width: 100, editor: Slick.Editors.Text },
{ id: "PrimaryComplaint", name: "PrimaryComplaint", field: "PrimaryComplaint", width: 100, cssClass: "cell-right", editor: Slick.Editors.Text },
];
var data = [
{
"VisitDate": "11/30/2009",
"VisitTime": "0117",
"PrimaryComplaint": "General malaise "
},
{
"VisitDate": "02/08/2010",
"VisitTime": "0930",
"PrimaryComplaint": "General malaise "
}
];
var options = {
editable: true,
enableAddRow: true,
enableCellNavigation: true,
asyncEditorLoading: false,
forceFitColumns: true
};
var grid = new Slick.Grid("#myGrid", data, columns, options);
grid.onAddNewRow.subscribe(function (e, args) {
var item = args.item;
grid.invalidateRow(data.length);
data.push(item);
grid.updateRowCount();
grid.render();
});
$('#loader').hide();
$('#dateInput').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0},"slow");
$('#myGrid').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0},"slow");
$('#submitButton').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0},"slow");
$.getScript("js/jquery.calendarPicker.js");
$.getScript("js/jquery.json-2.3.min.js");
</script>
<script>
console.log('json2 Loadstatus: '+json2Loaded);
</script>
<? //Instantiate datepicker jQueryUI widget ?>
<script>
$(document).ready(function(){
$(function() {
$( "#datepicker" ).datepicker({ numberOfMonths: [1, 3] });
$( "#datepicker" ).datepicker( "option", "showAnim", "clip");
$( ".selector" ).datepicker( "option", "showOn", "both" );
}); // end function()
}); // end doc.ready
$('#myGridForm').submit(function() {
console.log ( ' myGrid data1: '+ $('grid').data() );
console.log ( ' myGrid data2: '+ $('#myGrid').data() );
var datum = $('#myGrid').data();
console.log ( ' myGrid data3: '+ $('datum').serialize() );
console.log ( ' myGrid data4: '+ JSON.stringify(data) );
$("input[name='gridData']").val(JSON.stringify(data));
// stops submit /ie. return false;
});
</script>