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.
Related
Have a problem with gowd package after event behavior.
When I use event in:
button.OnEvent("onclick", EventHandleFunction) { ... }
and trying to change DOM with function like:
element.AddHTML("<p id='myId'>This is a paragraph</p>")
.. my TineMCE stops to work - whole theme is lost, and only empty textarea remains.
Something is going wrong I guess, and some html nodes are deleted, not keeped by gowd functions anymore.
Has anyone any idea what is wrong and how to fix it ?
Searched for issue everywhere but haven't found a solution.
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.
I'm just working on a little webservice. Therefore I am using an AJAX call and append my data to a table on my website. Here I can read and update already existing entries or write new entries. Everything works fine.
I want to have the possibility to update already existing with the wysihtml5 editor. I already integrated this editor on my website and I can use it on new entries. That works, too.
But now there's the problem with existing data. When it comes to the form to update data, I want the existing data being displayed as the value. Everything works fine on all inputs, just the wysihtml5 don't work.
I already know that there's an iframe and that's why I can't set the value of the textarea. I searched for a solution and found the following code (last line):
var editor = new wysihtml5.Editor("textareaid", { // id of textarea element
toolbar: "wysihtml5-toolbar", // id of toolbar element
parserRules: wysihtml5ParserRules, // defined in parser rules set
});
editor.setValue('Here's the content', true);
Usually this should work, but no content appears and the console just tells me:
Error: wysihtml5.Sandbox: Sandbox iframe isn't loaded yet
I tried it with a timeout-function but nothing works. Searching on the internet it also seems that there is noone else with that problem. I hope you can help me out, would be great!
Is there a way to set the value?
This code work for me
$("#product_details").data("wysihtml5").editor.getValue();// to get the value
$("#product_details").data("wysihtml5").editor.setValue('new content')// to set the value
I got the solutions, below code worked for me
$('#id ~ iframe').contents().find('.wysihtml5-editor').html(my_html);
This work for me
$('.wysihtml5-sandbox').contents().find('.wysihtml5-editor').html(my_html);
the ".wysihtml5-sandbox" is a class name of iframe, create by wysihtml5 by default.
I finally got it working by myself. I just change the second parameter of setValue to false. I don't know why, but it works then.
this code worked for me :
var wysihtml5Editor = $('#text_editor').data("wysihtml5").editor;
wysihtml5Editor.setValue("<p>foobar</p>", true);
console.log(wysihtml5Editor.getValue());
I'm converting a standard browser based app that's working fine to a chrome-app.
Once the page loads up, it has already hit an error - Uncaught TypeError: Cannot call method 'appendChild' of null. This occurs after several hundred lines of JS have done their job but its the first time the code makes a reference to the document object, specifically document.getElementById('mainDiv').appendChild(...).
I can clearly see the div with the id="mainDiv" in the debuggers elements tab. Yet, document.getElementById('mainDiv') must be returning a null. Any attempt at putting in breakpoints fails as they are ignored. I've added them to the line that fails as well as to lines that lead up to it and breakpoints are never triggered. I've read some of the threads on SO and I'm certain the breakpoints issue is just a bug in the debugger, but not recognizing an id when I can clearly see it and the code when run in the browser works fine leaves me wondering what's going on. Is document in the browser different from document in the app version?
Any ideas?
If I choose "inspect background page", the breakpoints work but it still fails but in a different way. The elements tab does NOT show my html page, but the pseudo generated background one and I can't get the debugger to show my page at all.
Any enlightenment would be appreciated. I've searched and read what I could find, but much of the docs are clearly out of date.
You seem to be accessing the document object of the background page, instead of that of your POS.html file.
Try this:
chrome.app.window.create('POS.html',{
'bounds': {
'width': screen.availWidth,
'height': screen.availHeight
}
}, function(appWin) {
var pageWindow = appWin.contentWindow;
var pageDocument = pageWindow.document;
pageWindow.addEventListener('load',function() {
// now use
pageDocument.getElementById('yourid');
// instead of
document.getElementById('yourid');
},false);
});
Also to inspect elements in your page right-click anywhere in the app window and select Inspect Element (this works only when the app was loaded as an 'unpacked extension')
Alternatively you can navigate to chrome://extensions and click the page link next to your app entry.
As lostsource mentioned, you're probably accessing the wrong DOM's document. You should think about the javascript in your app running in different global contexts, one for each page. There is (at a minimum) a page for the background page, and a page for each window.
Each of these pages runs in its own global context. This means global variables like document and window are different.
In the background page will be scripts which you load via the background manifest tag. When you open a window, it can also load its own script via script tags (make sure you do not use inline or block script tags, but use script src="foo.js". See http://developer.chrome.com/apps/contentSecurityPolicy.html).
The code that runs in the callback to chrome.app.window.create runs in the background page's context, so its document variable is for the background page's DOM, which is usually empty. Instead you can make it refer to the window's DOM using win.contentWindow as lostsource suggested, or add a page.js file with the script in it, and include it from the page via a script src='page.js' tag.
Is your call occurring after the load event, e.g. the JS called in a function set on window.onload?
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...