We Keep Coding

Making custom chrome app top bar

I am making a chrome app and this is my background.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('window.html', {
'outerBounds': {
'width': 500,
'height': 500,
},
'resizable': false
});
});
I want to know how to make it so when I run the app, the top bar where you can close the app is a different color. I also want to know how to show text on the top bar with a different color.

The top bar is part of the window's frame.
You can supply a FrameOptions object to create():
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('window.html', {
'outerBounds': {
'width': 500,
'height': 500,
},
'resizable': false,
'frame': { /* ... */ }
});
});
You have 2 broad options:
You can keep the default system frame, and have (minimal) customization options: specifically, you can control the frame's color. See this sample.
'frame': { 'color': "#ff0000" }
Optionally, it can be different when active/inactive. See the documentation for appropriate format. You can't control the text color this way.
You can completely disable the OS-supplied frame, and build your own - but you'll need to provide your own controls (e.g. a close button) and draggable areas. See this sample.
'frame' : { 'type' : 'none' }

try this:
innerBounds: {
width: ,
height: ,
minWidth: ,
maxWidth: ,
minHeight: ,
maxHeight:
}

Cloudinary jQuery Add HTML Element to Image

I am using Cloudinary for my image management. I am calling the image using:
$.cloudinary.image(data.result.public_id, {
format: "jpg", width: 300, height: 200, crop: "fill"
})
Does anyone know how I can add an html element to this image such as style="max-width: 100%"? I can't seem to find it in their docs.

Though this might be a little different from your approach, but functionally it could do the same thing by adding a custom class on your image element and then change the style from there.
In your example:
js:
$.cloudinary.image(data.result.public_id, {
format: "jpg", width: 300, height: 200, crop: "fill", class: "your-custom-class"
});
css
.your-custom-class {
max-width: 100%;
}
The Documentation is here: http://cloudinary.com/documentation/jquery_image_manipulation
Check the Lazy loading and dynamic transformations section.

You can also directly set the style attribute, for example:
$.cloudinary.image(data.result.public_id, {format: "jpg", width: 300, height: 200, crop: "fill", style: "max-width:100%" })

Javascript/ExtJS - get Codemirror Editor by textarea

Hello stackoverflow community,
i just built a Codemirror Editor into an ExtJSProject like so:
addCodeMirrorPanel: function() {
this.getAixmFormarea().add(Ext.widget({
xtype: 'textarea',
fieldLabel: 'AIXM',
autoScroll: true,
name: 'aixm',
id: 'codearea',
width: 800,
height: 300,
resizable: true,
resizeHandles: 's se e',
listeners: {
afterrender: function () {
var textarea = Ext.getCmp('codearea');
var codemirror = CodeMirror.fromTextArea(textarea.inputEl.dom,{
lineNumbers: true,
content: '',
matchBrackets: true,
electricChars:true,
autoClearEmptyLines: true,
extraKeys: {"Enter": "newlineAndIndentContinueComment"}
});
}
}
}));
}
Now what i want to do is access the codemirror editor from a different Controller function
and im not quite sure about how to do that.
no getinstance() , geteditorbyID() or similar methods are specified in the codemirror manual and i cant seem to access it from the now hidden textfield either.

Well why are you discarding the instance after you are creating it? Perhaps you could simply store it on the widget?
this.codeMirror = CodeMirror.fromTextArea(...);

I ran into a similar issue and was originally using the answer provided by plalx. However, if you are in need of creating instances of codemirror's dynamically this can get tricky.
I used the following code and created a method on the parent component to getValue(), setValue(), and getCodeMirror()
So in use you can get the codemirror instance similar to this:
var codeMirror = Ext.ComponentQuery.query('#parentFld')[0].getCodeMirror();
Here is the component code:
{
fieldLabel: 'Code Instance',
itemId: 'parentFld',
border: 1,
html: '<textarea></textarea>',
/* Overriding getValue function of the field to pull value from the codemirror text area*/
getValue: function (value) {
return this.getCodeMirror().getValue();
},
/*Overriding setValue function of the field to put the value in the code mirror window*/
setValue: function (value) {
this.getCodeMirror().setValue(value);
},
getCodeMirror: function () {
return this.getEl().query('.CodeMirror')[0].CodeMirror;
},
listeners: {
//on render of the component convert the textarea into a codemirror.
render: function () {
var codeMirror = CodeMirror.fromTextArea(this.getEl().down('textarea').dom, {
mode: {
name: "text/x-sql", globalVars: true
},
//theme: theme,
lineNumbers: true,
readOnly: false,
extraKeys: {"Ctrl-Space":"autocomplete"}
});
codeMirror.setSize(700, 370);
}
}
}

How can I set default (global) options for helpers?

I need to fix the problem with body element and the css overflow attribute discussed in this post:
When a fancybox 2 is activated, a scrollbar flashes on the parent page causing the content to shift left and then back
Using the helper option helpers: {overlay: {locked: false}} fixes my problem, but I need a solution to set this option for all Fancybox calls, this way I do not need to spend this setting on each call.
I tried with different forms, but doesn't works:
$.fancybox.open([{
helpers: {
overlay: {
locked: false
}
}
}]);
$.extend($.fn.fancybox.helpers, {
overlay: {
locked: false
}
});
$.fn.fancybox.defaults.overlay.locked = false;
I do not want to change the css component, because currently use the same via Bower.

You could setup an object with this setting that you use in all of your fancyBox calls:
var fancyBoxDefaults =
{
helpers: {
overlay: {
locked: false
}
}
};
$(".fancybox1").fancybox(fancyBoxDefaults);
$(".fancybox2").fancybox(fancyBoxDefaults);
If you need to set settings for any specific fancyBox, you could extend the object:
$(".fancybox3").fancybox($.extend(fancyBoxDefaults,{
maxWidth: 800,
maxHeight: 600
}));

Changing Twitter logo in twitter feed

Hi I have a twitter feed using the following code:
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 3,
interval: 6000,
width: 195,
height: 300,
theme: {
shell: {
background: '#999999',
color: '#D6E03D'
},
tweets: {
background: '#f3f3f3',
color: '#999999',
links: '#5a5a5a'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('louise').start();
</script>
and this is linked to the widget.js file. I need the default twitter to be blue not white so I tried downloading the js file and hosting it from my server and changing the code to my image using this code:
isFullScreen?" twtr-fullscreen":""}var AA=T?"images/widget-logoblue.png":"http://widgets.twimg.com/i/widget-logo.png";
this adds the blue image in ok but it messes up some of the links that should be different colours within the feed, therefore I think I need to stick to linking to this version:
isFullScreen?" twtr-fullscreen":""}var AA=T?"images/widget-logoblue.png":"http://widgets.twimg.com/i/widget-logo.png";
is there a way I can link to this but override the twitter image that they are using with my own twitter logo?
Any help would be greatly appreciated, thanks
Louise

I guess the solution might be one of these:
CSS hack - hide image and use background-image CSS property instead
Detect image on load and replace it then
Write a custom widget. Example.