I'm trying to dynamically change the HTML in a node label in Dagre D3:
$('.unselected-node').find('.inputTemplate').css( "display", "inline-block" );
However, this doesn't work. The only way I'm able to change .unselected-node is by accessing the HTML directly:
g.node('id').label += "<div>" + inputTemplate + "</div>";
This means I have to manually code and store HTML as a string somewhere in a javascript file, which is very unideal. Is there anyway to dynamically change the label?
This is the HTML in question, though the problem is more generic than simply this example, since it happens whenever I try to use jQuery to change dagre d3 html:
<div>
<div class="<%= templateData.class %>" data-params=<%= templateData.jsonData %>>
<span class ="control glyphicon glyphicon-pawn test" style="color:<%= templateData.responseTypeColor %>"></span>
<span class="pull-right"><i><%= templateData.response._id %></i></span>
<span> <%= templateData.response.created_by %></span>
<h3 class="templateData.response.responseTitle"><%= templateData.response.title %></h3>
<p class="templateData.response.responseText"><%= templateData.response.text %></p>
<button type="button" class="btn btn-link btn-sm reply-button">Reply</button>
</div>
<div class="inputTemplate" style="display:none">
<hr style="border: none; height:1px; background-color: black ">
<form id="responseForm">
<div id="newResponseTitleDiv" class="form-group row">
<div id="suggestedTitles">
Response title:
<input class="typeahead form-control" style="width: 50%; display:inline-block;" type="text" data-toggle="popover" data-trigger="focus" data-content="Describe a specific position that you will defend." id="newResponseTitle" name="responseTitle">
<button type="button" class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#responseModal">Browse</button>
</div>
</div>
<div class="form-group row">
<textarea rows="10" style="width:90%; border:solid .33px gray; resize: none;"></textarea>
</div>
<div class="form-group row">
<button type="button" id="test" class="btn btn-sm submit-reply-button">Submit</button>
</div>
</form>
</div>
</div>
I also tried doing d3.select(...) on inputTemplate and using
attr.('visibility', 'hidden')
but it doesn't seem to work either.
Related
<form class="container">
<div class="row">
<div class="col-md-5">
<h2>Template</h2>
<textarea id="template" value={this.state.value1} placeholder=" Hello {{name}}! {% if test -%} How are you?{%- endif %}" onChange={this.handleChange1.bind(this)}/>
</div>
<div class="col-md-5">
<h2>Render</h2>
<div id="render"> {this.state.loading || !this.state.data ? < div id="render"></div> : <div>{this.state.data.toString().replace(/•/g, " ")}</div>}
</div>
<div class="col-md-5">
<input type="button" class="btn btn-success" id="convert" value="Convert" onClick={this.click} disabled={this.state.isLoading}/>
<input type="button" class="btn btn-danger" id="clear" value="Clear" onClick={this.resetForm}/>
</div>
</div>
I am trying to move the button to the right side of the grey box so that all text box and button is horizontal to each other.
Tried to do inline block on the div class col-md-5 but it shifts everything vertical.
Here is the css:
h2{
font-family: "Times New Roman", Times, serif;
font-style: normal;
}
ul{
list-style-type: none;
}
.col-md-5{
margin: auto;
}
*{ margin: 0; padding: 0; }
#template,
#render,
#values {
width: 100%;
min-height: 300px;
resize: vertical;
font-family: "Courier New", Courier, monospace;
border: 1px solid #ccc;
}
#render {
background: #eee;
}
You are using col-md-5 for the buttons' container div.
One row consists of 12 columns in the bootstrap
You have to change it to col-md-2 or reduce the size of textarea's container div
If col-md-2 does not work, make sure to reset your defualt css
* { margin: 0 padding: 0 }
In addition to the answer above, You need to close your textarea tag as well. It is not self closing.
<form class="container">
<div class="row">
<div class="col-md-6">
<h2>Template</h2>
<textarea id="template" value={this.state.value1} placeholder=" Hello {{name}}! {% if test -%} How are you?{%- endif %}" onChange={this.handleChange1.bind(this)}> </textarea>
</div>
<div class="col-md-3">
<h2>Render</h2>
<div id="render"> {this.state.loading || !this.state.data ? < div id="render"></div> : <div>{this.state.data.toString().replace(/•/g, " ")}</div>}
</div>
<div class="col-md-3">
<input type="button" class="btn btn-success" id="convert" value="Convert" onClick={this.click} disabled={this.state.isLoading}/>
<input type="button" class="btn btn-danger" id="clear" value="Clear" onClick={this.resetForm}/>
</div>
</div>
</form>
Bootstrap goes by a 12 column system. Your total adds up to 15 forcing the buttons to the next line. Try changing the last column to the following:
<div class="col-md-2">
<input type="button" class="btn btn-success" id="convert" value="Convert" onClick={this.click} disabled={this.state.isLoading}/>
<input type="button" class="btn btn-danger" id="clear" value="Clear" onClick={this.resetForm}/>
</div>
I found two issues with your code,
Second div with class col-md-5 was not closed properly.
The sum of column numbers according to bootstrap guidelines should be 12 in a row (if you are following 12 column grid system).
This is the updated code that I think should solve it.
<div class="row">
<div class="col-md-5">
<h2>Template</h2>
<textarea id="template" value={this.state.value1} placeholder=" Hello {{name}}! {% if test -%} How are you?{%- endif %}" onChange={this.handleChange1.bind(this)}/>
</div>
<div class="col-md-5">
<h2>Render</h2>
<div id="render"> {this.state.loading || !this.state.data ?
<div id="render"></div> :
<div>{this.state.data.toString().replace(/•/g, " ")}</div>}
</div>
</div>
<div class="col-md-2">
<input type="button" class="btn btn-success" id="convert" value="Convert" onClick={this.click} disabled={this.state.isLoading}/>
<input type="button" class="btn btn-danger" id="clear" value="Clear" onClick={this.resetForm}/>
</div>
</div>
The sum of col-md-5 is going up to 15. You need to make your button as col-md-2 as commented above or you can make all of them as col-md-4.
<form class="container">
<div class="row">
<div class="col-md-4">
<h2>Template</h2>
<textarea id="template" value={this.state.value1} placeholder=" Hello {{name}}! {% if test -%} How are you?{%- endif %}" onChange={this.handleChange1.bind(this)}/>
</div>
<div class="col-md-4">
<h2>Render</h2>
<div id="render"> {this.state.loading || !this.state.data ? < div id="render"></div> : <div>{this.state.data.toString().replace(/•/g, " ")}</div>}
</div>
<div class="col-md-4">
<input type="button" class="btn btn-success" id="convert" value="Convert" onClick={this.click} disabled={this.state.isLoading}/>
<input type="button" class="btn btn-danger" id="clear" value="Clear" onClick={this.resetForm}/>
</div>
</div>
I am working on a hexadecimal to decimal color code converter. I wish to change the positions of the form elements on the click of a button.
i.e when i click hexa to deci button the form that takes hexadecimal code must appear on the left and when i deci to hexa button the form that takes decimal code must appear first.
my work at codepen
HTML CODE :
<!DOCTYPE html>
<head>
<title>my color converter</title>
</head>
<body>
<h3>TOGGLE COLOR REPRESENTATION</h3>
<div class="align text-center">
<button class="btn btn-default button1">HEXA TO DECI</button>
<button class="btn btn-default button2">DECI TO HEXA</button>
</div>
<div class="row">
<div class="col-md-6 column1">
<form>
<div class="form-group colorcode1">
<label for="hex2decimal" class="class1"><p>COLOR IN DECIMAL CODE</p></label>
<input type="colorcode" class="form-control .class2" id="colorcode1" placeholder="decimal code">
</div>
</form>
</div>
<div class="col-md-6">
<form>
<div class="form-group colorcode2">
<label for="hex2decimal" class="class3"><p>COLOR IN HEXADECIMAL CODE</p></label>
<input type="colorcode" class="form-control class4" id="colorcode2" placeholder="hex code">
</div>
</form>
</div>
</div>
<div class="align text-center">
<button class="btn btn-default button3">CONVERT</button>
<button class="btn btn-default button4">REFRESH</button>
</div>
</body>
CSS CODE :
.form-group {
margin-top: 60px;
width:80%;
margin-left:8.33333333%;
text-align: center;
}
h3 {
text-align:center;
margin-top:40px;
}
.align {
margin-top:40px;
}
JavaScript :
$(document).ready(function(){
$(".button1").on('click',function(){
var form1 = $('.colorcode1').detach();
form1.appendTo('form');
});
});
Note: I am learning Jquery and i have included the CDN.
I added this to your style:
.column1 {
float: right;
}
and then changed the js like this:
$(document).ready(function() {
$(".button1").on('click', function() {
$('.colorcode1').parents('div:first').toggleClass('column1');
$('.colorcode2').parents('div:first').toggleClass('column1');
});
});
I would call the class something else than column1, though.
see working code here. your javascript will be as follows:
codepan
$(document).ready(function() {
$(".button1").on('click', function() {
var form1 = $('.colorcode1');
var form2 = $('.colorcode2');
jQuery(form1)
.detach()
.appendTo('#hax');
jQuery(form2)
.detach()
.appendTo('#dec');
});
$(".button2").on('click', function() {
var form1 = $('.colorcode1');
var form2 = $('.colorcode2');
jQuery(form1)
.detach()
.appendTo('#dec');
jQuery(form2)
.detach()
.appendTo('#hax');
});
});
HTML :
<h3>TOGGLE COLOR REPRESENTATION</h3>
<div class="align text-center">
<button class="btn btn-default button1">HEXA TO DECI</button>
<button class="btn btn-default button2">DECI TO HEXA</button>
</div>
<div class="row">
<div class="col-md-6 column1">
<form id="dec">
<div class="form-group colorcode1">
<label for="hex2decimal" class="class1">
<p>COLOR IN DECIMAL CODE</p>
</label>
<input type="colorcode" class="form-control .class2" id="colorcode1" placeholder="decimal code">
</div>
</form>
</div>
<div class="col-md-6">
<form id="hax">
<div class="form-group colorcode2">
<label for="hex2decimal" class="class3">
<p>COLOR IN HEXADECIMAL CODE</p>
</label>
<input type="colorcode" class="form-control class4" id="colorcode2" placeholder="hex code">
</div>
</form>
</div>
</div>
<div class="align text-center">
<button class="btn btn-default button3">CONVERT</button>
<button class="btn btn-default button4">REFRESH</button>
</div>
I have the following code:
<div class="modal-body">
<div class="form-group" id="checkDiv_0">
<div class="col-md-2 control-label">
#Translations.ReportCopy
</div>
<div class="col-md-10">
<div class="col-md-1">
<button class="btn btn-primary pull-right"><span class="glyphicon glyphicon-remove"></span></button>
</div>
<div class="col-md-11">
<textarea id="textarea_0" name="Copies" class="form-control textarea-resize"></textarea>
</div>
</div>
</div>
<div class="form-group" id="checkDiv_1">
<div class="col-md-2 control-label">
#Translations.ReportCopy
</div>
<div class="col-md-10">
<div class="col-md-1">
<button class="btn btn-primary pull-right"><span class="glyphicon glyphicon-remove"></span></button>
</div>
<div class="col-md-11">
<textarea id="textarea_1" name="Copies" class="form-control textarea-resize"></textarea>
</div>
</div>
</div>
I want to set focus on textare with the id textarea_1. Without the focus the user must left-click insisde the textarea and than can start writting inside it.
I tried with $('#textarea_1').focus(), but without success.
SOLUTION:
I solved the problem this way:
$(document).ready(function () {
$('#modal').on('shown.bs.modal',
function () {
var element = document.getElementById("textarea_0");
element.focus();
});
});
You need to wrap your jQuery code inside the .ready() function:
$(document).ready(function(){
$("#textarea_1").focus();
});
You do not need javascript for this question, since you can just do:
<textarea id="textarea_1" name="Copies" class="form-control textarea-resize" autofocus></textarea>
The autofocus attribute focuses the text area as default on the DOM.
You can use this page as reference:
http://www.w3schools.com/tags/att_textarea_autofocus.asp
Two examples without jQuery:
window.onload = function() { document.getElementById('textarea_1').focus(); };
or
window.addEventListener('load', function() { document.getElementById('textarea_1').focus(); }, false);
The second one allows you to assign multiple 'onload' events to single DOM element.
The code necessary really depends on when you need to give it focus. If you need to give it focus when the page loads, you should do what #David Li suggested.
Otherwise, you can do something like this.
document.getElementById('focusButton').onclick = function(){
document.getElementById('textarea_1').focus();
};
<div class="modal-body">
<div class="form-group" id="checkDiv_0">
<div class="col-md-2 control-label">
#Translations.ReportCopy
</div>
<div class="col-md-10">
<div class="col-md-1">
<button class="btn btn-primary pull-right"><span class="glyphicon glyphicon-remove"></span></button>
</div>
<div class="col-md-11">
<textarea id="textarea_0" name="Copies" class="form-control textarea-resize"></textarea>
</div>
</div>
</div>
<div class="form-group" id="checkDiv_1">
<div class="col-md-2 control-label">
#Translations.ReportCopy
</div>
<div class="col-md-10">
<div class="col-md-1">
<button class="btn btn-primary pull-right"><span class="glyphicon glyphicon-remove"></span></button>
</div>
<div class="col-md-11">
<textarea id="textarea_1" name="Copies" class="form-control textarea-resize"></textarea>
</div>
</div>
</div>
<input type="button" id="focusButton" value="give element focus">
Using jQuery I want to append a entire div when a click event happens. I tried but it's not working.
When a user clicks the Add another image I want to append the entire div tag with all its elements.
Here is my code:
<form method="post" id="form_property" enctype="multipart/form-data">
<div class="row">
<div class="span4" id="image">
<h3><strong>4.</strong> <span>Add Images to your Property</span></h3>
<div class="fileupload fileupload-new control-group" data-provides="fileupload">
<label class="control-label" for="inputPropertyPrice">Image files</label>
<div class="input-append">
<div class="uneditable-input"> <i class="icon-file fileupload-exists"></i>
<span class="fileupload-preview"></span>
</div> <span class="btn btn-file">
<span class="fileupload-new">Select file</span>
<span class="fileupload-exists">Change</span>
<input type="file" name="files1" accept="image/*" />
</span>
</div>
</div>
</div>
<!-- /.span4 -->
</div>
<!-- /.row -->
<br/> <a id="another_image" class="btn btn-primary btn-small list-your-property" href="#">Add Another Image</a>
<br/>
<br/>
<input type="submit" name="submit" value=" Save images " class="btn btn-primary btn-large" style="float: left; width: 370px; height: 50px; margin-top: 10px">
</form>
Jquery
<script type="text/javascript">
$(document).ready(function(){
var count = 2;
$('#another_image').click (function(){
if(count < 7){
$('<br/><br/>
<div class="input-append">
<div class="uneditable-input">
<i class="icon-file fileupload-exists"></i>
<span class="fileupload-preview"></span>
</div>
<span class="btn btn-file">
<span class="fileupload-new">Select file</span>
<span class="fileupload-exists">Change</span>
<input type="file" name="files'+ count +'" accept="image/*" />
</span>
</div>
').appendTo ("#image");
count++;
}
});
});
</script>
Can someone please help me to fix this?
Use .appendTo() along with clone().
If you don't use clone() the same div will get replaced and nothing will be updated in the target. You don't need to type/copy the whole html.
Syntax : $(Element_Selector).appendTo(TargetSelector).
$($('.input-append').first().clone()).appendTo("#image");
Fiddle
*Note: Cloning existing html might create duplicate Ids. Take care of it.
I prefer #Shaunak's answer which is more efficient, but if you want to follow in your way then check THIS DEMO and the below code
$(document).ready(function(){
var count = 2;
$('#another_image').click (function(){
if(count < 7){
$('<br/><br/>' +
'<div class="input-append">' +
'<div class="uneditable-input">'+
'<i class="icon-file fileupload-exists"></i>' +
'<span class="fileupload-preview"></span>' +
'</div><span class="btn btn-file">'+
'<span class="fileupload-new">Select file</span>'+
'<span class="fileupload-exists">Change</span>' +
'<input type="file" name="files'+ count +'" accept="image/*" />'+
'</span></div>').appendTo ("#image");
count++;
}
});
});
Can I center the content of div with center-block??
The following example does not work:
<div class="form-group">
<div class="center-block">
<input id="user_registrate" type="submit" value="Registrate" class="btn btn-success" />
</div>
</div>
http://jsfiddle.net/jd93fL1x/2/
And this one works:
<div class="form-group">
<div>
<input id="user_registrate" type="submit" value="Registrate" class="btn btn-success center-block" />
</div>
</div>
http://jsfiddle.net/jd93fL1x/3/
I want two buttons centered, that is why I want the div with the center-block.
The class center-block applies the center to the element itself, not to the content; in this case you can use the class text-center on the container and since the input has the class btn making it inline-block, that will work:
<div class="text-center">
<input id="user_registrate" type="submit" value="Registrate" class="btn btn-success" />
<input id="user_registrate" type="submit" value="Registrate" class="btn btn-success" />
</div>
DemoFiddle
Just use text-align:center on the div:
.center-block {
text-align:center;
}
jsFiddle example
(or use the selector .form-group > div instead of .center-block if you're not using that class for anything)
You can use simply put text-align:center
<div class="form-group">
<div style="text-align:center">
<input id="user_registrate" type="submit" value="Registrate" class="btn btn-success" />
</div>