I can't get Singularity's grid-toggle to work. When trying to install as per their wiki, I get the response that there is no such framework as singularitygs. It is actually installed, apparently under singularitygs/templates/ but adding the other lines anywhere doesn't seem to do anything. Does it work?
Grid-toggle is an alternative to '#include background-grid', allowing you to toggle the background grid with the key press 'g'. Having followed the installation and activation instructions (Singularity Wiki, 'visualising your grids'), I cannot get it to work. I wondered if anybody else is using it and might help. There is one sentence which reads: 'The grid-toggle mixin should not be used from within a a selector; it will write its own.' note I did not type the two letter 'a's before selector; it's in the wiki. I'm confused.
I don't have gemfile. The gem 'grid-toggle' is sitting there deep within my Ruby folder (OSX 10.7.5). I'm obviously not placing the right lines in the right place in my style.scss. The documentation isn't the best in the world, is it?
I've got the same error when using #include background-grid, but then I included it in the html {#include background-grid} and it worked :-) It should work in any css element.
This is my own answer - at last. Add 'data-development-grid="show"' to the html element with ID 'wrap' which is where I want the grid. Add '#include grid-toggle' to an SCSS element *{ ...} or to a html{ ...} element. I wrote a new javascript/jquery file as below in place of grid.js:
(function() {
$(document).keypress(function(event) {
if (event.which === 103) {
var wrap = document.getElementById("wrap");
var dev = wrap.getAttribute('data-development-grid');
if (dev === null || dev === 'hide') {
wrap.setAttribute('data-development-grid', 'show');
}
else {
wrap.setAttribute('data-development-grid', 'hide');
}
}
});
})();
called it myToggle.js and referenced it in the head of the html page as normal. And hey presto a grid which toggles. I daresay the javascript is rubbish and there is a better way.
Try using this command: 'bundle exec compass install singularitygs/grid-toggle then you'll have a new directory inside the compass project called js containing grid.js and grid.min.js.
Related
I have had this issue before when using gulp to minify javascript, I don't think I ever fixed it. However i'm getting it once again whilst using laravels setup.
Basically i'm getting strange characters within my minified app.js, as follows:
/* istanbul ignore else */
if (offsetLeft < this.scrollOffset) {
this.scrollOffset = Math.max(offsetLeft - additionalOffset, 0);
q�SMB#_:fd�a���{<��˘�10$� onalOffset;
}
},
tabProx...
Within the browser they are shown as dots:
This has only recently happened since putting my Laravel project within Git, so not too sure what could of changed to cause this issue.
Has anyone encountered this?
Edit:
Hovering over one of the dots within the console gives the a tooltip of \u0, if you wondering where I got that from.
I have textarea which is required field. I've found post suggesting that Dojo doesn't have validation for Textarea, but in Dojo 1.9, there's an argument 'required'.
I've done the following:
new Textarea({required:true, value:""}, query('[name=description]')[0])
but the effect isn't what I've expected. The texarea has red border always, even if the field wasn't focused (as opposite to, for example, ValidationTextBox). But when I call:
form.validate()
the validation is passed even if the texarea is empty.
Is it possible to get Textare behave the same as in ValidationTextBox, or as for now, the validation for that component is not yet ready and I'd have to write custom version (as in linked post) or wait for next Dojo?
I've done it using mixin of SimpleTextArea and ValidationTextArea:
define(["dojo/_base/declare", "dojo/_base/lang", "dijit/form/SimpleTextarea", "dijit/form/ValidationTextBox"],
function(declare, lang, SimpleTextarea, ValidationTextBox) {
return declare('dijit.form.ValidationTextArea', [SimpleTextarea, ValidationTextBox], {
constructor: function(params){
this.constraints = {};
this.baseClass += ' dijitValidationTextArea';
},
templateString: "<textarea ${!nameAttrSetting} data-dojo-attach-point='focusNode,containerNode,textbox' autocomplete='off'></textarea>"
})
})
See also my answer in Dojo validation of a textarea
The power of Dojo lies in extending it with ease. If you really need the required functionality, then implement it. If you design it well, there should be no problem if it actually gets implemented in a new release of Dojo.
If you really want to know if such a feature exists or is in development I suggest looking at http://bugs.dojotoolkit.org. Besides, you can always contribute to the code, that's what open source is meant for.
I would like to add to the answer of Donaudampfschifffreizeitfahrt
instead of "this.baseClass += ' dijitValidationTextArea';"
I would do
this.baseClass = this.baseClass.replace('dijitTextBox', 'dijitValidationTextArea');
because
• we do not need the TextBox class if we have got a textarea mixin
• ! the "rows" parameter is mixed in but not fired/styled if the TextBox class is present ...
I'm writing some simple jasmine tests and I'm getting an exception since the code I'm testing is looking for a form that doesn't exist because there's no DOM when testing a js file only: $("form")[0] in the tested js file leads to:
TypeError: $(...)[0] is undefined
I read a bit about jasmine-jquery and realized I can use some html fixture with an external html file. That flow seems quite messy, since all I need to do is only to add an empty valid form so that the test (which focusing on something else) will run, something like <form></form> appending would be enough I think.
At first I thought that sandbox() function will be the solution, but it seems that it creates only divs, and I need a form.
Any simple way to add some elements by using only code in jasmine spec file?
The simplest solution is to add the form to the DOM by yourself in the before block and then delete it in the after block:
describe(function(){
var form;
beforeEach(function(){
form = $('<form>');
$(document.body).append(form);
});
it('your test', function(){
})
afterEach(function(){
form.remove();
form = null;
});
});
Also writing your sandbox helper isn't that hard:
function sandbox(html){
var el;
beforeEach(function(){
el = $(html);
$(document.body).append(el);
});
afterEach(function(){
el.remove();
el = null;
});
Another approach is to use jasmine fixture
The concept
Here's one way to think about it:
In jQuery, you give $() a CSS selector and it finds elements on the
DOM.
In jasmine-fixture, you give affix() a CSS selector and it adds those
elements to the DOM.
This is very useful for tests, because it means that after setting up
the state of the DOM with affix, your subject code under test will
have the elements it needs to do its work.
Finally, jasmine-fixture will help you avoid test pollution by tidying
up and remove everything you affix to the DOM after each spec runs.
See also: SO: dom manipulation in Jasmine test
You should use sandbox() to create a div and create a form element and append to sandbox, this is the safer way to jasmine take control to this fixtures in the DOM.
I'm writing my first jQuery plugin with Grunt and TDD, and its been awesome so far. All of my tests are passing in the browser, and all but this one are passing in phantomjs/qunit.
But I'm sure I'm just missing something here. I have a test that gets the css value of the margin that is added with jQuery.
test('adds appropriate styles to image', 1, function() {
this.simpleString.adaminNumReplace();
var newMargin = this.simpleString.find('> img:first').css('margin');
strictEqual(newMargin, '0px', 'margin is equal to default');
});
The test passes when I use the runner to test in browser. And when I visually check in the inspector. And if I console.log the value. Everything appears to be fine and points to '0px'.
But in the terminal window, the test fails:
$.fn.adaminNumReplace() - adds appropriate styles to image
Message: margin is equal to default
Actual: ""
Expected: "0px"
at file:///Applications/MAMP/htdocs/adamin_number_replace/libs/qunit/qunit.js:357
Is there any reason that phantomjs wouldn't be able to grab the css margin value? It says Actual is "". But it is definitely '0px'.
Any insight or thought would really be appreciated!
The full repo is here, in case it helps: Github Repo
Okay. So I was able to figure this out. I'm not totally sure as to why. But calling the css shortcut
.css('margin')
returns nil in the terminal. But does work in the spec runner.
However, calling the specific:
.css('margin-top')
Does in fact return '0px' which is what i was going for here.
So it looks like the answer, in case anyone else might run into this:
I am not able to return css values when using a shortcut like 'margin' or 'padding'.
Use specifics like 'margin-top', 'padding-left' etc...
hope that helps someone else...
Script registrar loads jquery.validation.min.js even after
Html.Telerik().ScriptRegistrar().jQuery(false)
Is there any way to tell it not to do so?
Even when I try to load exactly what I need, doing this:
#Html.Telerik().ScriptRegistrar().jQuery(false).DefaultGroup(g =>
{
g.Add("telerik.common.min.js");
g.Add("telerik.tabstrip.min.js");
}
And if for example I have a telerik grid on the page it would load all necessary scripts including grid.min, grid.editing and jquery.validate.min.
I prefer to control it myself and instead of that simply to get an error, or non-functioning elements if I forgot to define the right scripts.
If I try to use this snippet:
#Html.Telerik().ScriptRegistrar().jQuery(false).Scripts(s =>
{
s.Add("telerik.common.min.js");
...
It ignores useTelerikContentDeliveryNetwork="true" in web.config, and searches for scripts on local server. I still want to use CDN.
UPD: Is there actually a way to use telerik's CDN sources but if for some reason they are down, load all the stuff from the project's server?
As a further update to this answer for people coming from search engines: You can now remove jQuery Validation in addtion to jQuery by using something like:
#Html.Telerik().ScriptRegistrar().jQuery(false).jQueryValidation(false)
.jQuery(false) indeed prevents including of jquery.js only. It does not affect jquery.validate.js and was never meant to. Currently there is no way to stop the ScriptRegistrar from including jquery.validate.js when there is an editable grid in the page.
There is no built-in support for fallback when you are using the Telerik CDN. A manual workaround can be implemented though. Something like this:
#(Html.Telerik().ScriptRegistrar())
<script type="text/javascript">
if (typeof jQuery === "undefined" || typeof $.telerik === "undefined") {
// the CDN failed for some reason use local files
document.write("<script src='scripts/telerik.common.min.js'><\/script>");
document.write("<script src='scripts/telerik.grid.min.js'><\/script>");
// etc
}
</script>