I've integrated data Tables in my project and its work is fantastic but now since I don't need the number of entries [filter] and so I have removed it by using
display:none
in my style sheet and now what I need is that I don't know how to move the "Add New" button to the place of the entry filter [in the below image]. Any help would be appreciated. Thanks in advance.....
I'm assuming you're using the JQuery DataTables Plugin.
1 - Removing the Length Selector
To remove the number of entries selector, you should configure the DOM elements/positioning accordingly, which avoids adding instead of just hiding some elements. The plugin has an example:
http://www.datatables.net/release-datatables/examples/basic_init/dom.html
The sDom docs:
http://datatables.net/ref#sDom
The first thing you need to do is to remove the "l" from sDom: "lfrtip" (if bJQueryUI is false) or sDom: '<"H"lfr>t<"F"ip>' (if bJQueryUI is true), which means you'd remove the length select widget.
2 - Placing another widget where the Length Selector would be placed
That's about the CSS. I'm assuming your new widget is placed just before the data table. This would allow floats from before:
div.dataTables_wrapper { clear: none; }
The search edit input is a float: right; and the table has a clear: both; by default. So you can make your add button a float: left;, and that should solve your problem.
See the jsfiddle I've done with that.
Now it looks like this after adding
float:left
Related
I have a dialog that is used to set thresholds. I don't want the user to have the ability to enter any non-numeric characters within these so have used the dojo widget 'NumberTextBox'. Problem is that when a non-numeric value is entered in to the textbox, the layout of the combobox is altered.
Would anyone know what could be wrong? I have tried applying a width to the text boxes, making the table that the boxes sit within wider but nothing is working. Any help would be much appreciated.
Please see code snippet below:
When validation fails dijit adds extra classes to the widget's div (dijitTextBoxError, dijitNumberTextBoxError,dijitValidationTextBoxError, dijitError). It's possible that one of these classes has some styles that don't fit with your layout. You can inspect the element with browser tools to find out what styles apply and override them accordingly.
Most probably you have a problem with your CSS (please add a real sample of you code so we can confirm it).
You can set CSS directly on your DOM forcing style for you NumberTextBox element using its property style.
Example:
https://jsfiddle.net/mLkfetLp/
require(["dijit/form/NumberTextBox", "dojo/domReady!"], function(NumberTextBox){
new NumberTextBox({
name: "programmatic",
style:"width: 50px;", // add your style here!
constraints: {pattern: "0.######"}
}, "programmatic").startup();
});
Is there any work around for the pre-loaded/instantiated to prevent the lack of styling being present before the api loads the table?
Right now for example. The headers of my table are bunched up with no spacing looking like a funky sentence.
HeadHead1Head2Something
for example.
I've tried a number of ways to get around this, from how/when I load my table data.. to using the oLanguage setting for processing to have an image loader, figuring it was maybe lack of content. But no, the style just doesn't appear until after the $(' selector ').dataTable(); call is made.
you can hide the table before it is initialized and show it after initializing is complete.
Use CSS to hide the table.
.grid { display: none; }
add fnInitComplete to your datatable settings to show the table once it is intililized.
enter code here
$(".grid").dataTable({
// Your settings
"fnInitComplete": function(oSettings, json) {
$(".grid").show()
}
});
I have observed an undesirable behaviour in Chrome that occurs when one joins two <p>'s by deleting the separation between them. Although the <p> tags are joined properly, Chrome wraps the right-most <p> tag's content with a <span>.
Edit: this happens for all block elements, not just p tags.
Example:
For example, when the separating </p><p> are deleted from the following block:
<div contenteditable="true"><p>p one.</p><p>p two.</p></div>
It becomes:
<div contenteditable="true"><p>p one.<span style="font-size: 16px; line-height: 1.44;">p two.</span></p>
Example in a fiddle: Chrome wrapping contents of joined <p> with a <span>.
Question:
Is there an easy way to prevent chrome from doing this? It results in horrible markup that I'd like very much to be rid of.
There is a way but you need to pro-actively set a few styles. The idea is to tell Chrome that the styles are already taken care of, so it doesn't need to add SPAN to meet the styles requirement.
basically, you need to add the chrome added styles to a span class under your contenteditable div ( see example below).
Edited fiddle
For you example:
I added an "edit" class to the contenteditable DIV
I added an .edit p, span class in the style
This becomes:
.edit {
border: 1px solid gray;
padding: 10px;
}
.edit p, span {
line-height: 1.44; font-size: 16px;
}
And the DIV:
<div contenteditable="true" class="edit">...</div>
Note that you normally don't need the font-size: 16px;. I needed to add this one because fiddle defines some font size in contenteditable. On a standalone page I didn't need it.
You need to apply this Chrome 'patch' to any elements where it happens (so if you need UL, OL... then add what is needed following my example logic above)
I know it is not really an answer to solve it, but a hint how it could be fixed (but it is to long to be a comment to Petah question how i would solve it)
in general you would check when such bugs could happen. for the case of the span creation you would listen to all keydown and keypress events and check if the key is the backspace/delete key or for every key that inserts chars if it is a real selection.
if this is the case then you need to check the current selection (either the position of the insert mark, or the real selection) then you know which is the next following text-element or node. then you need to check the in the next following keypress and keyup if there is a span created directly after your insert mark. depending on the browser bug you need some further checking. if there is one create unwrap its content again. additionale Mutation events and helper attributes could be used.
But i need to say that i gave up in doing this myself and switched over to ckeditor 4. most of the it's features i don't need and it is a really big library. but cause of the huge number of such bugs i did not see another solution for me.
EDIT
Here an update of the js fiddle that shows the idea with a Mutable event:
http://jsfiddle.net/THPmr/6/
But that is not bullet proofed, it is just to show how it could be achived ( only tested in chrome 27.0.1422.0, and probably would not work if more then one text element is contained in the second p )
Here is my take on removing the extra spans
document.querySelector('[contenteditable=true]')
.addEventListener('DOMNodeInserted', function(event) {
if (event.target.tagName == 'SPAN') {
event.target.outerHTML = event.target.innerHTML;
}
});
The CSS is influencing how the markup is made inside contenteditable:
div, pre {
border: 1px solid gray;
padding: 10px;
line-height: 1.44;
}
Delete the line-height line and the problem doesn't occur any more.
There are in general several bugs with contenteditable related to default styling : How to avoid WebKit contentEditable copy-paste resulting in unwanted CSS?
EDIT JsFiddle IS indirectly influencing this (tinkerbin behaves differently) because of its' CSS (normalize.css). Try this:
Run your fiddle
Inspect a <p>
Disable all font-size declarations in the CSS stack - including your line-height
do the backspace
there is no inline span
Solution 1 : Use classes and id's.
Don't declare font-size for p or div but for p.main-content, or more simply, .main-content.
If the font-size of your elements inside contenteditable is coming from the browsers' internal default CSS then Chrome won't add extra markup/inline styling.
Solution 2 : Use a Sanitizer.
I'd personally go with #1 as it's never a good practice to specify font-sizes and typo in so generic tags.
The best way I found so far is to listen to DOMNodeInserted and check the tagName. If it is a span, you can remove the tag and but leave the contents. This also keeps the cursor at the correct place.
function unwrap(el, target) {
if ( !target ) {
target = el.parentNode;
}
while (el.firstChild) {
target.appendChild(el.firstChild);
}
el.parentNode.removeChild(el);
}
var AutoFix = true;
document.getElementById('editable')
.addEventListener('DOMNodeInserted', function(ev) {
if ( !AutoFix ) {
return;
}
if ( ev.target.tagName=='SPAN' ) {
unwrap(ev.target);
}
});
I've added a boolean 'AutoFix' so you can disable the automatic dom changes when you do need to insert a span, since this event fires on any dom change. E.g. if you have a toolbar that allows the user to insert something like <span class="highlight">...</span>.
The code has no side effects in IE or FireFox as far as I can see.
This irritated me as well, but I found a solution that works well enough for now.
$('#container span').filter(function() {
$(this).removeAttr("style");
return $(this).html().trim().length == 0;
}).remove();
I simply remove the style tag from the span element and remove it altogether if it's empty. You could probably filter based on the attribute style, but as I'm already doing a loop to check to remove empty spans, I thought it was best to do both at the same time.
It does create a flicker for a microsecond when chrome first tries to insert the style inherited for the span, but you only see that once immediately after deletion.
It isn't perfect, but it's quick and concise.
Found this link from a comment posted on someone's blog:
(Fixed bug where the latest WebKit versions would produce span element…)
https://github.com/tinymce/tinymce/commit/8e6422aefa9b6cc526a218559eaf036f1d2868cf
Please see the answers here: https://stackoverflow.com/a/24494280/2615633
To fix the problem you may just use this plugin: jquery.chromeinsertfix
After several attempts of using provided solutions, I came up with this script:
var content = obj.textContent;
obj.innerHTML = '';
obj.textContent = content;
When someone pastes a text with html encoded chars, putting it to innerHTML results with a valid html tags, that is why I decided to purge innerHTML content before placing content into obj
Not sure if this has been covered somewhere, but I couldn't find it in the documentation, and was wondering if it'd be possible to not include the search input box with the jQuery chosen plugin (used to style select inputs). Specifically I'd like to use the standard select one without it.
http://harvesthq.github.com/chosen/
Just a quick follow-up: I noticed that in function
AbstractChosen.prototype.set_default_values
a variable is read from
this.options.disable_search
So you can disable the search-field with
jQuery('select').chosen( {disable_search: true} );
without using a fixed-number threshold.
$(".chzn-select").chosen({disable_search_threshold: 3});
If the number of element of the select is smaller than disable_search_threshold (here 2 and less), the search box will not display.
Well I tried with the documentation as well and no luck, so I finally fixed to this
$('.chzn-search').hide();
I do the above after I call chosen.
Hope this helps
I add a class to my stylesheet.
.chzn-select { display: none }
Alternatively, for individual elements, I specify the element and append _chzn to target it.
#element_chzn .chzn-select { display: none; }
Note that: chosen will convert hyphens in your element ids and classes to underscores, so to target element-id you need.
#element_id_chzn .chzn-select { display: none; }
Newer versions of jquery chosen gives you option to disable search input with in dropdown.
$(".chzn-select").chosen({
disable_search: true
});
Older versions do not support this option. Some how if you are strictly not allowed to use newer version than you can use
$(".chzn-select").chosen({
disable_search_threshold: 5
});
it will hide the search box if results are less than 5, best to use with gender type dropdowns. There is another way to fix this and that is;
$(".chzn-select").chosen();
$(".chzn-select").hide();
Call hide immediately after initialization, don't know why this tricks works but it is doing what you want!
I suggest you to use the latest version so you have access to latest options.
Hope it works for you!
Use this code to disable it:
jQuery('select').chosen( {disable_search: true} );
and don't forget to hide it, otherwise it will still be working on mobile !
.chzn-search{display: none}
The disable_search_threshold option hides the search box for single select dropdowns. The number passed in specifies how many items you want to allow before showing the search box. If you don't want the searchbox, just set it to a higher number than the amount of items it will ever contain.
$('#myDropDown').chosen({ disable_search_threshold: 10 });
$('select').chosen( {disable_search: true} );
Since none of the chosen-settings for hiding the search-field for multiple selects seemed to be working, I hacked the chosen.jquery.js in line 577 to:
<li class="search-field"><span class="placeholder">' + this.default_text + '</span></li>
(Span instead of the input field). Needed to comment out this line, too
this.search_field[0].disabled = false;
Working fine for me - even though its not the best practice to hack the code.
With the latest Version of chosen only that works for me:
$('ul.chosen-choices li.search-field').hide();
I used jQuery('select').chosen( {disable_search: true} ); but on chrome profiler, the method search_field_scale was called anyway and eat a lot of the performance.
So I remove the method and all the calls to him and replaced with this.search_field.css({'width': '100%'}) on show_search_field_default and replace style=25px with style:100%
and than
this.search_field.css({ 'width': '23px' }); result_select because of the "data-placeholder"
working fine for me.
disable_search:true,
Here is the document for chosen jquery plugin
Can anyone help me with javascript that hides divs matching a specific random number? Every time I load this page it has two divs like <div id='1945498985'> the number changes every page load but remains between 9-10 in length how would I fetch the two divs on the page and remove/hide them?
Let me clarify the two divs on this page each have a random number between 9 and 10 in length.
One such div looks like this:
<div id='843401712' style='position:relative;z-index: 1000;left: 75px;top: -340px; padding:0px; margin: 0px;width: 310px; height:280px; text-align: center; border:3px gray solid'></div>
I do not have control over the generated html I am looking to run javascript alongside a page as a greasemonkey extension to hide these two divs.
Thanks for any help you guys offer, I'm new to javascript so its a big help.
Use document.getElementsByTagName() to fetch all div elements. Then, check their id using maybe a regular expression like [0-9]{9,10} and if the id matches, remove/hide them.
You have two problems with your question.
First, you're suggesting that you have two divs with the same ID, which is illegal.
Secondly, your ID is all numeric, which is also illegal.
Here (using jquery for brevity and assuming you're getting your random from a dynamically generated page like from PHP) is an example of doing what you're looking for:
<script type="text/javascript">
var pRand = '<?php echo $pRand; ?>';
document.ready(function(){
$('.el-'+pRand).hide();
});
</script>
...
<div class="el-<?php echo $pRand;?>"></div>
<div class="el-<?php echo $pRand;?>"></div>
Use jQuery filter and provide a function that does a regex match on your id:
http://api.jquery.com/filter#expr
See here:
http://jsfiddle.net/ANW8C/
In your case...
Example:
$('div').filter(function() {
return this.id.match('\\d{9,10}');
} ).hide();
I suggest to you using jquery it has some selector filters that may help you to selecting correct div
http://api.jquery.com/category/selectors/
As others have said, you should first make sure you have legal ID values. They cannot start with a number and there can only be one object with a given ID in the page.
If you have any control over the generated HTML, it would be best to put a common class name on all divs that you want to hide. You can then easily find them or add a style rule that will hide them.
<div id='a1945498985' class="hideMe"></div>
<div id='a2945498986' class="hideMe"></div>
The, you can either hide all objects with that class name. In jQuery, that would simply be this:
$(".hideMe").hide();
Here are some examples - I haven't used jQuery because you haven't suggested that you are using it. It is very useful for this kind of stuff, but you can also solve the problem without it if you need to.
http://jsfiddle.net/Sohnee/tpGqj/
There are two methods used, one relies on a parent container and the other uses the new getElementsByClassName support that some browsers have (you can roll your own getElementsByClassName if you need to support older browsers).
Ideally, you wouldn't apply a random id to an element - there seems little point in giving an element a random id. If you are setting the random id server side, you could also supply the id to the JavaScript so it can target the element with a getElementById call, which would be the most efficient.
Also, I concur with the statements about numeric ids being invalid - you should put at least one alphabetical character at the start of the id.