I've been trying to hide the input of a code cell in Jupyter by adding the tag hide-input to it. However, it doesn't seem to be working. What is the most up to date way of doing it?
According to the latest documentation youi can use the:
{toggle}
directive to hide/un-hide elements in a Jupyter Notebooks, as noted in 1.
The example given is:
:show:
Some hidden toggle content!
If you just want to hide any input code cell, I would recommend you to use:
# Specific code we want to hide:
# ==============================
# #hidden
from IPython.display import HTML
password="xxxxx"
# ==============================
# Necessary script to hide the cell:
# ==============================
HTML('''<script>
code_show=true;
function code_toggle() {
if (code_show){
$('.cm-comment:contains(#hidden)').closest('div.input').hide();
} else {
$('.cm-comment:contains(#hidden)').closest('div.input').show();
}
code_show = !code_show
}
$( document ).ready(code_toggle);
</script>
To show the code hidden: click here.''')
# ==============================
This solution was originally provided by Damian Kao. And works perfectly.
It also adds the toggle-on/off functionality: When you run this cell, the code will be hidden by default. But you can show it by clicking on the link.
Related
I ran the code to hide the cells of Jupyter notebook and it worked. Any ideas on how to display the cells again?
from IPython.display import HTML
HTML('''<script>
var code_show=true; //true -> hide code at first
function code_toggle() {
$('div.prompt').hide(); // always hide prompt
if (code_show){
$('div.input').hide();
} else {
$('div.input').show();
}
code_show = !code_show
}
$( document ).ready(code_toggle);
</script>
''')
This is what I am seeing
Basically, if you restart Anacond and run the notebook again you see all the cells
I want to implement a tag input on my form and have the available tags auto-suggested; so these are the libraries I am using:
http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/
https://github.com/bassjobsen/Bootstrap-3-Typeahead
This is how I initialize the two libs together:
$(document).ready(function() {
$('input#tags').tagsinput({
typeahead: {
source: ["mysql-server", "apache", "php", "nginx", "phpmyadmin"]
}
});
});
When I begin typing ph it starts suggesting two available tags like this:
When I make a selection, e.g. php - this what happens:
This happens with all tags, it does the tag and then there's a shadow version of the selected tag from the suggestion.
Any ideas?
I have spent the last few hours trying to work out how to use the Semantic UI dropdown module. I'm almost there... My code works perfectly and retrieves from a remote dataset. My only issue is that the dropdown does not perform the search when focusing on the element (tabbing to it, clicking it, etc). I need it to perform an empty search when focused. The only way to do an empty search is to press space bar then backspace to bring up the whole dataset.
JavaScript
$('.qb .product .field').dropdown('setting', {
apiSettings: {
url: '<domain>/api/v1/product/find/{query}'
}
});
HTML
<div class="ui dropdown floating fluid search selection field">
<input type="hidden" name="product_id">
<div class="default text"></div>
</div>
Remote JSON Object - Not all of them as there are many
{
"results":[
{
"id":1,
"name":"Voluptatem",
"created_at":"2015-09-23 16:31:29",
"updated_at":"2015-09-23 16:31:29"
},
{
"id":2,
"name":"Excepturi",
"created_at":"2015-09-23 16:31:29",
"updated_at":"2015-09-23 16:31:29"
},
{
"id":3,
"name":"Something",
"created_at":"2015-09-23 16:31:29",
"updated_at":"2015-09-23 16:31:29"
}
]
}
So just to clarify. When typing "v" into the search box then product with ID 1 is visible. When I press backspace to provide "" all results are returned. I need the latter to show on element focus. And nothing seems to be working at all.
Thank you.
Unfortunately I have had the same issue as you. One workaround I had, was to use the Semantic UI search function and set minCharacters = 0. However, if you need some of the more specialized features of dropdown (e.g. multiselect) then you are out of luck for now.
$('.search').search({
minCharacters: 0,
apiSettings: {
...
...
}
});
This will give you a dropdown like GUI, but will only let you select a single element.
These two URLs point to files which are identical except for one thing:
mobileCSS.html
noCSS.html
The mobileCSS.html file contains this line:
<link rel="stylesheet" href="/code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.css">
The noCSS.html file has the same line commented out:
<!--link rel="stylesheet" href="/code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.css"-->
Both pages use AngularJS to populate two <select> elements, one of which acts as a slave to the other. Both also contain a set of checkboxes to show the internal state of the model.
When jquery.mobile-1.4.3.css is used:
The initial values of the <select> elements are not displayed
The checkbox inputs do not update
Is this a known issue? Can you suggest a workaround for this?
Partial solution: correctedCSS.html
This reveals that jQueryMobile is not correctly updating, and that the decorations it adds hide the fact that the <select> and <checkbox> elements are being correctly updated by AngularJS:
.ui-checkbox .ui-btn {
z-index:0; /* in jquery.mobile-1.4.3.css, this is set to 2 */
}
.ui-select .ui-btn select {
opacity:1; /* in jquery.mobile-1.4.3.css, this is set to 0 */
}
Screenshots http://dev.lexogram.com/tests/angularJS/angularVSjqueryMobile.png
I am not too good at angular because I am also at learning stage but as per my knowledge something like below code can help.
JS
$scope.endonyms = [{code: "en", name: "English" }, { code: "fr", name: "Français" }];
$scope.selectedOption = $scope.endonyms[2];
HTML:
<select ng-options="endonym as endonym.name for endonym in endonyms"
ng-change="setSource()" ng-model="selectedOption">
The solution is as #Omar suggested:
you need to refresh checkboxes $(element).checkboxradio("refresh") and selectmenus $(element).selectmenu("refresh") after updating their values dynamically
However, timing is an important issue. When the AngularJS controller is first created, the jQueryMobile decorative elements have not yet been created, so they cannot be refreshed. Also, when AngularJS changes the value of a $scope property, the corresponding DOM element is not immediately updated, so calling "refresh" in the next line is pointless.
// Delay initial "refresh" until the page is ready
$(function () {
$("#source").selectmenu("refresh");
$("#target").selectmenu("refresh");
$("input[type='checkbox']").checkboxradio("refresh");
})
// Wait 1 millisecond before refreshing an item whose $scope property has been changed
function refreshChangedItems() {
window.setTimeout(function () {
$("input[type='checkbox']").checkboxradio("refresh");
$("#target").selectmenu("refresh");
}, 1)
}
You can find these fixes in solutionCSS.html
I've installed the codemirror editor succesfully.
But there is one issue regarding css of that editor.
You can check here what I mean.
So how can I display the color after 3rd line in the editor.
you should look at
<div class="CodeMirror-gutters" style=" /*height: some_pixel*/; "><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 28px;"></div></div>
instead of some_pixel after press enter or any keyword it will automatically set the height of the line number,
if you have that problem on start you might want to see how to create at first,
there is three common method,
The simplest is to define your Text Area and just use this code:
var YourCodeMirror = CodeMirror.fromTextArea(YourDefinedTextArea);
The best is put values using code:
var yourCodeMirror = CodeMirror(PlaceYouWant, {
value: /*any code here :*/"function(){return 'anything'}",
mode: /*your mode ie.*/"javascript"
});
hope it helps
UPDATE: There is a manual site here : http://codemirror.net/doc/manual.html
CodeMirror parses HTML using the XML mode. To use it, the appropriate script must be included, same as with any other mode.
Add its dependency in your markup:
<script type="text/javascript"
src="/site.com/js/libs/codemirror/mode/xml/xml.js"></script>
and set the mode to xml:
config = {
mode : "xml",
// ...
};
In addition, you may want to configure the parser to allow for non well-formed XML. You can do so by switching the htmlMode flag on:
config = {
mode : "xml",
htmlMode: true,
// ...
};