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%" })
Related
I was trying to set the style of a dojox form CheckedMultiSelect control. First I tried to use the .set method. The physical width has changed, but the control is still automatically sized to the max. length of dropdown items.Second, I tried the way from this post -How to set width to dojox/form/CheckedMultiSelect?. And it didn't do anything.
var groupCheckedMultiSelect = new CheckedMultiSelect ({
id: "groupChkMultiSelect",
dropDown: true,
multiple: true,
class: 'narrow',
label: "Group"
}, 'GroupDiv');
groupCheckedMultiSelect.set('style', {width: '100px', height: '30px', fontSize: '14px'});
groupCheckedMultiSelect.startup();
.narrow .dojoxCheckedMultiSelectWrapper {
width: 1000px;
}
Try Setting
.dojoxCheckedMultiSelectButton{
width:400px
}
Fiddle:http://jsfiddle.net/theinnkeeper/4L3sksmt/1/
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:
}
I need each codemirror editor with different dimensions in a php page.
Like below we can create an instances of codemirror editor but it should have same dimensions.Is there any way to create different dimensions?
function editor(id)
{
CodeMirror.fromTextArea(id, {
height: "350px",
parserfile: "parsexml.js",
stylesheet: "css/xmlcolors.css",
path: "js/",
continuousScanning: 500,
lineNumbers: true
});
}
editor('code1');
editor('code2');
Yes, add your dimensions in additional parameters in your editor function.
For example :
function editor(id, h)
{
CodeMirror.fromTextArea(id, {
height: h,
parserfile: "parsexml.js",
stylesheet: "css/xmlcolors.css",
path: "js/",
continuousScanning: 500,
lineNumbers: true
});
}
editor('code1', '350px');
editor('code2', '450px');
I don't know how to center delete action icon in inline editing.
My setting action column is:
{
name: 'action',
width: 40,
align: "center",
editable: false,
formatter:'actions',
search: false,
fixed: true,
resize: false,
formatoptions: { keys: true, editbutton: false }
}
You need to play around with CSS to find the fix in your case. Try overriding jqGrid's CSS rules.
In general, if you have only 'Delete' icon in your column, following CSS rules will make it center aligned.
.ui-pg-div.ui-inline-del {
float: none !important;
}
span.ui-icon.ui-icon-trash {
margin: auto;
}
Although, its not a good practice to use '!important'.
If you want to do this for a particular grid, you can prepend grid id(say, list) to CSS rule like this:
#list .ui-pg-div.ui-inline-del{}
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.