boundary limit for draggable css

boundary limit for draggable css - javascript

im having trouble setting boundaries for my draggable i found out that i need to get rid of these
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
the boundaries will work
for my code to work the script above are necesary for the rest of my code if i get rid of them my code will not work at all. i need to find a way to get around this problem
$(function () {
$("div[id='dragx']").draggable({
containment: "#box",
scroll: false
});
});var z = 1; //value to make div overlappable
$('#addText').click(function (e) {
/** Make div draggable **/
$('<div />', {
class: 'ui-widget-content',
appendTo: '.container',
draggable: {
containment: 'parent',
start: function( event, ui ) {
$(this).css('z-index', ++z);
}
}
});
});
$(document).on("dblclick", '.text', function()
{
$(this).hide(); $(this).closest('.item').find('.edit_text').val($(this).text()).show();
});
$(document).on("click", ".edit_text", function()
{
return false;
});
$(document).on("click", function()
{
var editingText = $('.edit_text:visible');
if (editingText.length)
{
editingText.hide();
editingText.closest('.item').find('.text').text($(editingText).val()).show();
}
});
var count = 1;
var selectedDraggable;
ko.bindingHandlers.draggable={
init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
$(element).draggable();
$(element).addClass('item' + count);
count++;
$(element).on('click', function () {
selectedDraggable = $(this);
})
}
};
var vm=function(){
var self=this;
self.items=ko.observableArray();
self.textContent = ko.observable('');
self.init=function(){
self.items([]);
}
self.remove=function(item){
console.log(item);
self.items.remove(item);
}
self.addNew = function() {
self.items.push( self.textContent() );
self.textContent('');
}
self.init();
}
ko.applyBindings(new vm());
.item{
width: 200px;
height: 200px;
padding: 0.5em;
background:transparent;
z-index: 1;
cursor: pointer;
background-color: lightpink;
display:block;
}.container {background-color: lightgrey;
width: 500px;
height: 500px;
border: 2px solid;
position: relative;
}
<textarea data-bind="value: textContent" Placeholder="Type text to append" rows="4" cols="21"></textarea>
<button data-bind="click: addNew">Create</button><div id="box" class="container" style="float:left;">
<div data-bind="foreach:items" class="fix_backround">
<div id="dragx" href="#" class="item" data-bind="draggable:true,droppable:true">
<span data-bind="click:$parent.remove">[x]</span><br/><br/>
<center><span class="text" data-bind="text:$data"></span><input class="edit_text"/></center>
</div></div>
</div><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="http://www.pureexample.com/js/lib/jquery.ui.touch-punch.min.js"></script>
<script src="http://circletype.labwire.ca/js/circletype.js"></script><script src="http://tympanus.net/Development/Arctext/js/jquery.arctext.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">

Related

RGraph + gridstack resize to div

I am developing an application with gridstack and I want to put several graphics (lines and gauge) in different containers using the RGraph library.
I can not make the graph fill the width and height of the container.
Also when I change the size I want the graphic to adapt to the container.
I have an example:
Code JSFiddle
$(document).ready(function ()
{
var data = [[4,5,8,11,15], [1,3,2,5,9]];
var tips = ['a','b','c','d','e','yf','yh','tt','hh','ll'];
var line = new RGraph.Line('cvs', data)
.set('tooltips', tips)
.set('gutter.left', 50)
.draw();
});
#canvas{
width: 100% !important;
max-width: 100% !important;
height: 70% !important;
align-content:center;
vertical-align:middle;
/*position:static;*/
}
#cvs {
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Serialization demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="./gridstack.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.3.0/gridstack.min.css" />
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.3.0/gridstack.min.js'></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.3.0/gridstack.jQueryUI.min.js'></script>
<script src="http://www.rgraph.net/libraries/RGraph.common.core.js"></script>
<script src="http://www.rgraph.net/libraries/RGraph.common.dynamic.js"></script>
<script src="http://www.rgraph.net/libraries/RGraph.common.tooltips.js"></script
src="http://www.rgraph.net/libraries/RGraph.common.resizing.js"></script>
<script src="http://www.rgraph.net/libraries/RGraph.line.js"></script>
<style type="text/css">
.grid-stack {
background: lightgoldenrodyellow;
}
.grid-stack-item-content {
color: #2c3e50;
text-align: center;
background-color: #18bc9c;
}
</style>
</head>
<body>
<div class="container-fluid">
<div>
<a class="btn btn-default" id="save-grid" href="#">Save Grid</a>
<a class="btn btn-default" id="load-grid" href="#">Load Grid</a>
<a class="btn btn-default" id="clear-grid" href="#">Clear Grid</a>
</div>
<br/>
<div class="grid-stack" id="grid-stack">
<div class="chart-container" id="tile1" >
<div class="grid-stack-item-content">
<span class="pull-left">Tile 1</span>
<div class="pull-left" style="clear:both">Content</div>
</div>
</div>
<div class="chart-container" id="tile2">
<div class="grid-stack-item-content">
<span class="pull-left">Tile 2</span>
<div class="pull-left" style="clear:both">
<canvas id="cvs" width="600" height="250" style="width: 100%; float: left">[No canvas support]
</canvas>
</div>
</div>
</div>
</div>
<hr/>
<textarea id="saved-data" cols="100" rows="20" readonly="readonly"></textarea>
</div>
<script type="text/javascript">
$(function () {
var options = {
};
$('.grid-stack').gridstack(options);
new function () {
this.serializedData = [
{id: "tile1", x: 0, y: 0, w: 4, h:2},
{id: "tile2", x: 4, y: 0, w: 5, h: 4},
];
this.grid = $('.grid-stack').data('gridstack');
this.loadGrid = function () {
this.grid.removeAll();
var items = GridStackUI.Utils.sort(this.serializedData);
items.forEach(node=>{
var containerElt = $("#" + node.id);
containerElt.attr("data-gs-id", node.id);
containerElt.attr("data-gs-width", node.w);
containerElt.attr("data-gs-height", node.h);
containerElt.attr("data-gs-x", node.x);
containerElt.attr("data-gs-y", node.y);
this.grid.makeWidget(containerElt)
});
return false;
}.bind(this);
this.saveGrid = function () {
this.serializedData = _.map($('.grid-stack > .grid-stack-item:visible'), (el)=> {
el = $(el);
var node = el.data('_gridstack_node');
return {
id: node.id,
x: node.x,
y: node.y,
width: node.width,
height: node.height
};
}, this);
$('#saved-data').val(JSON.stringify(this.serializedData, null, ' '));
return false;
}.bind(this);
this.getSerializedData = function () {
var result = _.map($('.grid-stack > .grid-stack-item:visible'), (el)=> {
el = $(el);
var node = el.data('_gridstack_node');
return {
id: node.id,
x: node.x,
y: node.y,
w: node.width,
h: node.height
};
}, this);
return result;
}.bind(this);
this.clearGrid = function () {
this.grid.removeAll();
return false;
}.bind(this);
$('#save-grid').click(this.saveGrid);
$('#load-grid').click(this.loadGrid);
$('#clear-grid').click(this.clearGrid);
$('#grid-stack').on('change', (event, items) => {
var result = this.getSerializedData();
var json = JSON.stringify(result, null, ' ');
$('#saved-data').val(json);
});
this.loadGrid();
};
});
</script>
</body>
</html>

You need to create a function to reset and redraw your line, then have that trigger when the window resizes and when the widget is updated (on the change event in gridstack). Make sure not to use extra styles, as they'll actually hinder your result. I've updated your example to work on window resize. It will not update when you resize the widget, but if you resize the window, you'll see the chart continues to fill up the full widget.
http://jsfiddle.net/kqada7zj/46/

Minimize Maximize is not Working

The minimize & maximize Button is not working
The code is
I want to minimize & maximize this div & also how to set the height of div box.It is just as extra as height of title bar because i give height as 100%
$(function() {
$("#main").resizable();
});
$("#button").click(function() {
if ($(this).html() == "-") {
$(this).html("+");
$(this).slideUp();
} else {
$(this).html("-");
$(this).slideDown();
}
$("#box").slideToggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="main" id="main">
<div id="title_bar">
<div id="button">-</div>
</div>
<div id="box">
</div>
</div>

Try this code : I have commented two lines of your code $(this).slideUp(); and $(this).slideDown(); this lines show/hide on click of that link.
$(function () {
$("#main").resizable();
});
$("#button").click(function () {
if ($(this).html() == "-") {
$(this).html("+");
//$(this).slideUp();
} else {
$(this).html("-");
//$(this).slideDown();
}
$("#box").slideToggle();
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<body>
<div class="main" id="main">
<div id="title_bar">
<div id="button">-</div>
</div>
<div id="box" style="height:200px;border:1px red solid">
This is box
</div>
</div>
</body>

$(this).slideDown(); in the buttons function will simply slide the button, remove them and you're basically good to go!
$(function() {
$("#main").resizable();
});
$("#button").click(function() {
if ($(this).html() == "-") {
$(this).html("+");
} else {
$(this).html("-");
}
$("#box").slideToggle();
});
#button {
background: lightblue;
border: 1px solid #ccc;
}
#box {
background: coral;
border: 1px solid #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="main" id="main">
<div id="title_bar">
<div id="button">+</div>
</div>
<div id="box">
Hello World!
</div>
</div>

$(function() {
$("#main").resizable();
$("#button").click(function() {
if ($(this).html() == "-") {
$(this).html("+");
$(this).slideDown();
} else {
$(this).html("-");
$(this).slideDown();
}
$("#box").slideToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="main" id="main">
<div id="title_bar">
<div id="button">-</div>
</div>
<div id="box">Hi
</div>
</div>

You need to have some content inside the div box, so i added a fixed height ot demonstrate the function.
And you were sliding the button div which will hide it prevent you from click on it again.
See snippet bellow on how to do it:
$(function() {
$("#main").resizable();
});
$("#button").click(function() {
if ($(this).html() == "-") {
$(this).html("+");
$("#main").css('height', 'auto');
$("#main").resizable('disable');
} else {
$(this).html("-");
$("#main").resizable('enable');
}
$("#box").slideToggle();
});
#box {
height: 100px;
}
#button {
cursor: pointer;
background: yellow;
padding: 0 5px;
}
#main {
border: 1px solid;
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="main" id="main">
<div id="title_bar">
<div id="button">-</div>
</div>
<div id="box">
</div>
</div>

How do you make prepended elements draggable

I have a code that adds elements upon the click of a button.
$(document).ready(function(){
$("#add_txt").click(function(){
$("body").prepend('<input class="style_txt">');
});
});
//However when I add...
$( function() {
$( ".style_txt" ).draggable();
} );
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<button class="btn" id="add_txt">Add Text</button>
The element can not be dragged? Why is this?

you can't do it with input element, wrap it inside span
$(document).ready(function() {
$("#add_txt").click(function() {
$("body").prepend('<span><input class="style_txt"></span>');
$(".style_txt").parent().draggable();
});
});
span {
padding: 5px;
border: 1px solid #eee;
cursor: move;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<button class="btn" id="add_txt">Add Text</button>

You could do it like this:
$(document).ready(function() {
$("#add_txt").click(function() {
$("body").prepend('<div class="style_text"><input /></div>');
$(".style_text").draggable({
start: function(event, ui) {
$(this).data("preventBehaviour", true);
}
});
$(".style_text :input")
.on("mousedown", function(e) {
var mdown = document.createEvent("MouseEvents");
mdown.initMouseEvent(
"mousedown",
true,
true,
window,
0,
e.screenX,
e.screenY,
e.clientX,
e.clientY,
true,
false,
false,
true,
0,
null
);
$(this).closest(".style_text")[0].dispatchEvent(mdown);
})
.on("click", function(e) {
var $draggable = $(this).closest(".style_text");
if ($draggable.data("preventBehaviour")) {
e.preventDefault();
$draggable.data("preventBehaviour", false);
}
});
});
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<button class="btn" id="add_txt">Add Text</button>
It's a rather complex answer, but it works. Note: I found this workaround in another answer.

Common function for validation using jquery

I am using simple code to validate whether input box is empty or not and just showing check icon and warning icon accordingly.
You can see working PLUNKER here.
Problem: This set of code works fine for one set of Label:Input Box.
Imagine if we have number of input control throughout the website.
I am looking for a solution which is quite generalized. No need to repeat same set of HTML, CSS or JS code over and over again.
I know its hard to avoid some duplication but wanna write less repetitive code.
// Code goes here
$(document).ready(
function() {
$("#icon-id").hide();
$("#input-id").keyup(function() {
if ($("#input-id").val().length === 0) {
$("#input-id").addClass("redBorder");
$("#icon-id").addClass("icon-warning-sign");
$("#icon-id").removeClass("icon-check");
$("#icon-id").css("color", "red");
$("#icon-id").show();
} else {
$("#input-id").removeClass("redBorder");
$("#icon-id").removeClass("icon-warning-sign");
$("#icon-id").addClass("icon-check");
$("#icon-id").css("color", "green");
$("#icon-id").show();
}
});
});
body {
margin: 20px;
}
.input-container {
width: 250px;
position: relative;
}
.my-input {
width: 100%;
}
.my-icon {
position: absolute;
right: 0px;
color: red;
top: 8px;
}
.redBorder {
border: 1px solid red !important;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="2.0.3" src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.0.0-rc1" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body style="margin-top:55px;">
<!-- validation check -->
<div id="header" style="margin-bottom:20px;">
<div id="validate-click">Enter Below</div>
</div>
<!-- input contianre -->
<div class="form-group input-container">
<input id="input-id" type="text" class="my-input" placeholder="Enter here">
<i id="icon-id" class="icon-warning-sign my-icon"></i>
</div>
</html>
Note: Please don't refer any third party control.

You can use class selector instead id for the input. And use an data attribute to select the good icon.
live demo
You can see an example below :
function() {
$(".icon-class").hide();
$(".input-class").keyup(function() {
var idIcon = $(this).attr('data-id-icon');
if ($(this).val().length === 0) {
$(this).addClass("redBorder");
$("#" + idIcon).addClass("icon-warning-sign");
$("#" + idIcon).removeClass("icon-check");
$("#" + idIcon).css("color", "red");
$("#" + idIcon).show();
} else {
$(this).removeClass("redBorder");
$("#" + idIcon).removeClass("icon-warning-sign");
$("#" + idIcon).addClass("icon-check");
$("#" + idIcon).css("color", "green");
$("#" + idIcon).show();
}
});
}
<input data-id-icon="icon-id-1" type="text" class="my-input input-class" placeholder="Enter here">
<i id="icon-id-1" class="icon-warning-sign my-icon"></i>
<input data-id-icon="icon-id-2" type="text" class="my-input input-class" placeholder="Enter here">
<i id="icon-id-2" class="icon-warning-sign my-icon-2"></i>

Make it a jQuery plugin: https://jsfiddle.net/1nxtt0Lk/
I added the attribute data-validate to your <input />s so I can call the plugin on them using $('[data-validate']).
Code:
;( function( $, window, document, undefined ) {
"use strict";
var pluginName = "customValidator",
defaults = {
propertyName: "value"
};
function Plugin ( element, options ) {
this.element = element;
this.settings = $.extend( {}, defaults, options );
this._defaults = defaults;
this._name = pluginName;
this.init();
}
$.extend( Plugin.prototype, {
init: function() {
var $input = $(this.element);
var $icon = $input.parent().find('.my-icon');
$icon.hide();
$input.keyup(function() {
if ($input.val().length === 0) {
$input.addClass("redBorder");
$icon.addClass("icon-warning-sign");
$icon.removeClass("icon-check");
$icon.css("color", "red");
$icon.show();
console.log("empty");
} else {
$input.removeClass("redBorder");
$icon.removeClass("icon-warning-sign");
$icon.addClass("icon-check");
$icon.css("color", "green");
$icon.show();
console.log("Not empty");
}
});
},
} );
$.fn[ pluginName ] = function( options ) {
return this.each( function() {
if ( !$.data( this, "plugin_" + pluginName ) ) {
$.data( this, "plugin_" +
pluginName, new Plugin( this, options ) );
}
} );
};
} )( jQuery, window, document );
$('[data-validate]').customValidator();
body {
margin: 20px;
}
.input-container {
width: 250px;
position: relative;
}
.my-input {
width: 100%;
}
.my-icon {
position: absolute;
right: 0px;
color: red;
top: 8px;
}
.redBorder {
border: 1px solid red !important;
}
<head>
<script data-require="jquery#*" data-semver="2.0.3" src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.0.0-rc1" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<div class="form-group input-container">
<input id="input-id" type="text" class="my-input" placeholder="Enter here" data-validate>
<i id="icon-id" class="icon-warning-sign my-icon"></i>
</div>
<div class="form-group input-container">
<input id="input-id2" type="text" class="my-input" placeholder="Enter here" data-validate>
<i id="icon-id2" class="icon-warning-sign my-icon"></i>
</div>
PS: I used the plugin boilerplate as a base script: https://github.com/jquery-boilerplate/jquery-boilerplate ;
a commented version can be found here https://raw.githubusercontent.com/jquery-boilerplate/jquery-boilerplate/master/dist/jquery.boilerplate.js
Other answer suggest to use a class selector to iterate over each of them. Although that solution definitely would work, I suggest to get used to write jQuery plugins as in the long term it makes your project much more clean and easy to read.

// Code goes here
$(document).ready(
function() {
$(".icon-id").hide();
$(".input-id").keyup(function() {
if ($(this).val().length === 0) {
$(this).addClass("redBorder");
$(this.parentElement).find("#icon-id").addClass("icon-warning-sign");
$(this.parentElement).find("#icon-id").removeClass("icon-check");
$(this.parentElement).find("#icon-id").css("color", "red");
$(this.parentElement).find("#icon-id").show();
} else {
$(this).removeClass("redBorder");
$(this.parentElement).find("#icon-id").removeClass("icon-warning-sign");
$(this.parentElement).find("#icon-id").addClass("icon-check");
$(this.parentElement).find("#icon-id").css("color", "green");
$(this.parentElement).find("#icon-id").show();
}
});
});
body {
margin: 20px;
}
.input-container {
width: 250px;
position: relative;
}
.my-input {
width: 100%;
}
.my-icon {
position: absolute;
right: 0px;
color:red;
top: 8px;
}
.redBorder{
border: 1px solid red !important;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="2.0.3" src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.0.0-rc1" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body style="margin-top:55px;">
<!-- validation check -->
<div id="header" style="margin-bottom:20px;">
<div id="validate-click">Enter Below</div>
</div>
<!-- input contianre -->
<div class="form-group input-container">
<input id="input-id" type="text" class="my-input input-id" placeholder="Enter here">
<i id="icon-id" class="icon-warning-sign my-icon icon-id"></i>
</div>
<div class="form-group input-container">
<input id="input-id" type="text" class="my-input input-id" placeholder="Enter here">
<i id="icon-id" class="icon-warning-sign my-icon icon-id"></i>
</div>
</body>
</html>
You can try like this

You can use the classes my-input and my-icon instead of the ids.
Inside the keyup listener you can use $(this) to refer to my-input and $(this).next() to refer to my-icon as the icon is the adjacent sibling of the input.
Also chain your functions like this for brevity:
$(this).next().removeClass("icon-warning-sign")
.addClass("icon-check")
.css("color", "green")
.show();
See demo below:
// Code goes here
$(document).ready(function() {
$(".my-icon").hide();
$(".my-input").keyup(function() {
if ($(this).val().length === 0) {
$(this).addClass("redBorder");
$(this).next().addClass("icon-warning-sign")
.removeClass("icon-check")
.css("color", "red")
.show();
} else {
$(this).removeClass("redBorder");
$(this).next().removeClass("icon-warning-sign")
.addClass("icon-check")
.css("color", "green")
.show();
}
});
});
body {
margin: 20px;
}
.input-container {
width: 250px;
position: relative;
}
.my-input {
width: 100%;
}
.my-icon {
position: absolute;
right: 0px;
color: red;
top: 8px;
}
.redBorder {
border: 1px solid red !important;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="2.0.3" src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.0.0-rc1" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
</head>
<body style="margin-top:55px;">
<!-- validation check -->
<div id="header" style="margin-bottom:20px;">
<div id="validate-click">Enter Below
</div>
</div>
<!-- input contianre -->
<div class="form-group input-container">
<input id="input-id" type="text" class="my-input" placeholder="Enter here">
<i id="icon-id" class="icon-warning-sign my-icon"></i>
</div>
</html>

$(document).ready(
function() {
$(".my-input").keyup(function() {
var $input = $(this).parent().find('input');
var $icon = $(this).parent().find('i');
if ($(this).val().length === 0) {
$input.addClass("redBorder");
$icon.addClass("icon-warning-sign").removeClass("icon-check").css("color", "red").show();
} else {
$input.removeClass("redBorder");
$icon.removeClass("icon-warning-sign").addClass("icon-check").css("color", "green").show();
}
});
});
body {
margin: 20px;
}
.input-container {
width: 250px;
position: relative;
}
.my-input {
width: 100%;
}
.my-icon {
position: absolute;
right: 0px;
color: red;
top: 8px;
display: none;
}
.redBorder {
border: 1px solid red !important;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="2.0.3" src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.0.0-rc1" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body style="margin-top:55px;">
<!-- validation check -->
<div id="header" style="margin-bottom:20px;">
<div id="validate-click">Enter Below
</div>
</div>
<!-- input contianre -->
<div class="form-group input-container">
<input type="text" class="my-input" placeholder="Enter here">
<i class="icon-warning-sign my-icon"></i>
</div>
<div class="form-group input-container">
<input type="text" class="my-input" placeholder="Enter here">
<i class="icon-warning-sign my-icon"></i>
</div>
</html>

Why can't I drag, nor resize my datatable

In function LoadXml() i create table using google visualisation table api; which i put in a div.Also i have another div which takes the whole page of my browser wih a google map!
I want to drag and resize my div with table and i thiink it should work -but it doesn't.
<html>
<head>
<style>
#wrapper
{
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
#table
{ position: absolute;
top: 10px;
left: 10px;
width: 150px; height: 150px;
}
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['table']});
</script>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=AIzaSyBwQlpVsFgaZ2EjeUSeQiSICP1UwPV9o9c" type="text/javascript"></script>
<script src="http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/src/markermanager.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script type="text/javascript">
$(function() {
$( "#table" ).resizable();
});
$(function() { $( "#table" ).draggable(); });
function initialize()
{
if (GBrowserIsCompatible())
{
map = new GMap2(document.getElementById("wrapper"));
map.setCenter(new GLatLng(42.143365, 24.751032), 13);
map.setUIToDefault();
}
}
function loadXMLDoc(l)
{
arrayMyAddresses = [];
intPNum=l;
s=l;
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//alert(xmlhttp.responseText);
var xmlObj = xmlhttp.responseXML;
var textXML = xmlObj.documentElement.firstChild.firstChild.nodeValue;
//parsing data
//create array with name rec to hol our data for the datatable
var rec = new Array();
tblTst = google.visualization.arrayToDataTable(rec);
visual = new google.visualization.Table(document.getElementById('table'));
}
}
// making ajax call to the server
}
</script>
</head>
<body onload= "loadXMLDoc(1),initialize();">
<div id = "wrapper"> </div>
<div id = "table" ></div>
</body>
</html>

We Keep Coding

JavaScript is the programming language of the Web.

boundary limit for draggable css - javascript

Related

RGraph + gridstack resize to div

Minimize Maximize is not Working

How do you make prepended elements draggable

Common function for validation using jquery

Why can't I drag, nor resize my datatable

Categories

Resources