I not need the "user ability to resize", but an automatic resize triggered by windows.resize events.
Translating my necessity into an hipothetical/intentional code (it not works!), for my applicartion:
$( window ).resize(function() {
editor = CKEDITOR.instances.editor1;
editor.height = window.innerHeight - 106;
editor.width = window.innerWidth - 253;
});
How to implement this kind of resize with CKEditor4? I am using standard editor at textarea.
PS: the name of the behaviour is perhaps "Change the Size of the Editor on the Fly", but my necessity is not about config by percentual width, see the required subtractions.
Well... just use the editor.resize() method ;)
$( window ).resize(function() {
editor = CKEDITOR.instances.editor1;
editor.resize( window.innerWidth - 253, window.innerHeight - 106 );
});
Related
I am customizing the title of the Magnific popup/lightbox to include more than one row of content by using the 'change' callback, and modifying the content of
this.content
within the callback. It is working correctly, except for the fact that if the image within the popup is very tall, or the window re-sizes to a smaller height, the calculation that Magnific is doing to adjust the 'max-height' of the image seems to only take into account a single row of text for the title.
Does anyone know what is needed to adjust the max-height calculation of the image to take into account a taller title box?
Thank you
** Edit
A quick hack to jquery.magnific-popup.js around line 461 in the "updateSize:" callback has allowed me to get around this problem. It seems reasonable to for this popup/lightbox to accept a max height in percentage so that it doesn't fill the screen.
Here's my change, I'd appreciate some feedback if possible. Thanks!
updateSize: function(winHeight) {
if(mfp.isIOS) {
// fixes iOS nav bars https://github.com/dimsemenov/Magnific-Popup/issues/2
var zoomLevel = document.documentElement.clientWidth / window.innerWidth;
var height = window.innerHeight * zoomLevel;
mfp.wrap.css('height', height);
mfp.wH = height;
} else {
mfp.wH = winHeight || _window.height();
// ########################################
// CHANGE IS RIGHT HERE TO FORCE 80% height
// ########################################
mfp.wH *= 0.8;
}
// Fixes #84: popup incorrectly positioned with position:relative on body
if(!mfp.fixedContentPos) {
mfp.wrap.css('height', mfp.wH);
}
_mfpTrigger('Resize');
},
You can limit the max height of the image in the resize callback, which will allow more room for the title:
$('a.magnific').magnificPopup({
type: 'image',
callbacks: {
resize: function() {
var img = this.content.find('img');
img.css('max-height', parseFloat(img.css('max-height')) * 0.95);
}
}
});
I'd like to add my contribution. As I wanted to include both titles and descriptions to images. This meant that I couldn't fit all this information in the viewport space. The description was cut off and I was left with a scrollbar.
#alexantd - I tried your callback addition which only works when the window is being resized.
#ajhuddy - Your solution worked perfectly for me. I was able to fit the text in fine. Though the image was considerably small with a lot of space at the top.
I adjusted the padding as to regain 40px space to display a slightly larger image. Here's my CSS to do so. The CSS below allowed me to reduce images to 0.85 (85%).
.mfp-img {
padding: 0px 0px 40px !important;
}
.mfp-close {
margin-top: -40px;
}
else b.wH=a||v.height()**,b.wH*=.9**;b.fixedContentPos
I can markup a Heading or ListItem to have a moveTo attribute and that transition works perfectly.
Is there a way perform a transition to a named view programmatically say, on a button click?
Somewhere on the net I found below code, but its not working. I need something similar to this -
function moveTo(){
var w = dijit.byId('currentView');
w.performTransition('#newView',1,"fade",null);
}
This code sample registers an onclick event handler on a button with the id "ButtonID". After pressing the button, a lookup in the dijit registry will be performed to find the displayed view.
You can call the function performTransition(...) on any dojox.mobile.View.
require(["dijit/registry"], function(registry) {
dojo.ready(function() {
// Button Listener
registry.byId("ButtonID").on("click", function(){
var oldView = dijit.registry.byId("ID_View1");
oldView.performTransition("ID_View2", 1, "slide", null);
});
});
But:
Changing "moveTo" parameters programmatically is much more difficult than performing transitions between views. You have to do some nasty things to override the moveTo Attribute of a widget like for example a Backbutton in a dojox.mobile.Heading
var heading1 = dijit.registry.byId("ID_Heading");
heading1.destroyDescendants();
heading1.moveTo = viewId;
heading1.backButton = false;
heading1._setBackAttr("Zurück");
I'm creating a seemingly simple dojo 1.8 web page which contains an app layout div containing a tab container and an alarm panel below the tab container. They are separated by a splitter so the user can select how much of the alarms or the tabcontainer they want to see.
Here's the example on jsfiddle:
http://jsfiddle.net/bfW7u/
For the purpose of the demo, there's a timer which grows the table in the alarm panel by an entry every 2 seconds.
The problem(s):
If one doesn't do anything and just lets the table grow, no scroll bar appears in the alarm panel.
If one moves the splitter without having resized the browser window first, the splitter handle ends up in a weird location.
Resizing the browser window makes it behave like I would expect it to begin with.
Questions:
Am I doing something wrong in the way I'm setting things up and that's causing this problem?
How can I catch the splitter has been moved event (name?)
How do I resize the splitter pane to an arbitrary height? I've tried using domStyle.set("alarmPanel", "height", 300) and this indeed sets the height property... but the pane does not resize!
Any help greatly appreciated!
I forked your jsFiddle and made some modifications to it: http://jsfiddle.net/phusick/f7qL6/
Get rid of overflow: hidden in html, body and explicitly set height of alarmPanel:
.claro .demoLayout .edgePanel {
height: 150px;
}
This tricky one. You have two options: to listen to splitter's drag and drop or to listen to ContentPane.resize method invocation. Both via dojo/aspect:
// Drag and Drop
var splitter = registry.byId("appLayout").getSplitter("bottom");
var moveHandle = null;
aspect.after(splitter, "_startDrag", function() {
moveHandle = aspect.after(splitter.domNode, "onmousemove", function() {
var coords = {
x: !splitter.horizontal ? splitter.domNode.style.left : 0,
y: splitter.horizontal ? splitter.domNode.style.top : 0
}
dom.byId("dndOutput").textContent = JSON.stringify(coords);
})
});
aspect.after(splitter, "_stopDrag", function() {
moveHandle && moveHandle.remove();
});
// ContentPane.resize()
aspect.after(registry.byId("alarmPanel"), "resize", function(duno, size) {
dom.byId("resizeOutput").textContent = JSON.stringify(size);
});
Call layout() method after changing the size:
registry.byId("alarmPanel").domNode.style.height = "200px";
registry.byId("appLayout").layout();
I use Dojo Toolkit 1.7.2 from http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js
I need to show scrollable (with help touch) content inside dialog. Also, if possible, I will need to have transition between views inside dialog like at mobile too.
What I do (simplified version of code):
var dialog = new Dialog();
var view = new ScrollableView({
selected: true
});
//add some content inside view. Content heigh is greater than height of dialog.
If I do this, the dialog tries to fit the whole height of the content.
Next attempt:
var dialog = new Dialog({
style: {
width: 600,
height: 400
}
});
or
dialog.resize({w: 600, h: 400});
Now dialog has fixed height, but inner ScrollableView instance won't scroll to bottom of its content.
When I dig into the source, I find that ScrollableView inherits from dojox/mobile/_ScrollableMixin which inherits from dojox/mobile/scrollable.
The resize() function of dojox/mobile/scrollable uses window height in order to calculate scrolling functionality.
Is there some way to have what I need without implementating my own version of ScrollableView?
Solution:
var dialogRect = domGeometry.getMarginBox(dialog.domNode);
var headerRect = domGeometry.getMarginBox(dialog.titleBar);
var containerNodePaddingTop = domStyle.get(dialog.containerNode, "paddingTop");
var containerNodePaddingBottom = domStyle.get(dialog.containerNode, "paddingBottom");
var viewHeight = dialogRect.h - headerRect.h - containerNodePaddingTop - containerNodePaddingBottom;
var view = new ScrollableView({
selected: true,
height: viewHeight.toString() + "px"
});
// or
// view.set("height", viewHeight.toString() + "px");
Fixed it this way:
var Name = 'yourdialogid';
dojo.query("#"+Name+" .dijitDialogPaneContent").forEach(function(node, index, arr){
dojo.style(node,"overflow","auto");
dojo.style(node,"height",(dojo.position(dijit.byId(Name).domNode).h-80)+"px");
});
I'm new with Appcelerator and I encountered an annoying problem regarding layout.
I have to do a menu bar that is very easy to do with plain html (ul>li>a and that's all). The problem is that it seems that all button-related functions are not... customizable. I want buttons to be displayed as plain text, not buttons.
The first thought was to use labels (instead of buttons). But... Is this a right way? I need a menu bar, not a text paragraph! Besides that, the menu is somehow flexible, not like labels.
This is one (of many!) things i tried:
var menu_color = Titanium.UI.createButton({
title:Ti.Locale.getString("menu_color") || "Color",
height:24,
top:10
});
I also added borderWidth:0 (no effect) and backgroundColor:none/transparent with no luck.
Help? :)
I usually use views when I need to create what you described above.
For example:
I use a view with a vertical layout, then add my child views. The child views then have listeners for the click or whatever event.
This allows you to have more control over the formatting. A side effect of this is you will need to create your own "press" ui cue in some cases.
var demo = {win : Ti.UI.currentWindow};
(function(){
//Create the container view
demo.vwMain = Ti.UI.createView({height:100, layout:'vertical', backgroundColor:'yellow'});
demo.win.add(demo.vwMain);
demo.fakebutton1 = Ti.UI.createView({height:40, backgroundColor:'blue',left:25,right:25,borderRadius:5,borderColor:'#000'});
demo.vwMain.add(demo.fakebutton1);
demo.fakebutton2 = Ti.UI.createView({top:5,height:40, backgroundColor:'green',left:25,right:25,borderRadius:5,borderColor:'#000'});
demo.vwMain.add(demo.fakebutton2);
demo.fakebutton1.addEventListener('click', function(e) {
alert('Clicked fake button 1');
});
demo.fakebutton2.addEventListener('click', function(e) {
alert('Clicked fake button 2');
});
})();
create a view with layout property is set to vertical and add label or button which you want.View is like in HTML.Hope you understand.