Change splitter position for contentPane in borderContainer? - dojo

I have 2 contentPanes inside a BorderContainer using the Dojo Toolkit. Much like the following:
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar', gutters:true, liveSplitters:true" id="borderContainerB" style="height: 200px">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'top'" style="width: 100px;">Hi, I'm leading pane<br><br>Lots of stuff goes here.</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'center'">Hi, I'm center pane</div>
</div>
I'd like to use JavaScript to programmatically change the position of the splitter. In one case, I'd like to move it all the way to the side so only one contentPane is visible. What do I do to change the splitter position?
Already tried:
var datasetArea = document.getElementById("studiesDatasetArea");
datasetArea.style.height = newHeight + "px";
which didn't work, as well as:
dojo.widget.byId('studiesDatasetArea').resizeTo(400, newHeight);
which changes the borderContainer's size, rather than just moving the location of the splitter. I don't want to change the outer borderContainer's size.

I found some useful code here that answers my question:
http://telliott.net/dojoExamples/dojo-bcExample.html
A snippet:
require(["dijit/registry"],
function(registry)
{
var myBC = registry.byId("studiesBorderContainer"); // actual JS object
var topPane = registry.byId("studiesTableArea");
dojo.style(topPane.domNode, "height", (800-newHeight)+"px");
myBC.resize();
});

_layoutChildren: function(/*String?*/ changedChildId, /*Number?*/ changedChildSize){
// summary:
// This is the main routine for setting size/position of each child.
// description:
// With no arguments, measures the height of top/bottom panes, the width
// of left/right panes, and then sizes all panes accordingly.
//
// With changedRegion specified (as "left", "top", "bottom", or "right"),
// it changes that region's width/height to changedRegionSize and
// then resizes other regions that were affected.
// changedChildId:
// Id of the child which should be resized because splitter was dragged.
// changedChildSize:
// The new width/height (in pixels) to make specified child
//example:
var bc = digit.byId(‘borderContainerId’);
var newSize = 150;
var childContentPaneId = ‘myPaneId’;
dojo.hitch(bc, bc._layoutChildren(‘childContentPaneId’,newSize));

Related

Dynamically setting max-height of Bootstrap modal body

I'm trying to dynamically set the max-height of Bootstraps modal-body elements for all modal dialog boxes. I've written the following, which seems to work when the dialog is opened. I'm depending on the enforceFocus method to exist and to be called once the dialog is rendered. I realize there may be moment before the CSS property is set where the dialog will not be rendered exactly right, but I'm okay with that. Is there anything wrong with this solution? I know I have yet to account for resizing the screen with a modal open, but that seems the easier problem to solve.
(function ($) {
$.fn.modal.Constructor.DEFAULTS.backdrop = 'static';
$.fn.modal.Constructor.DEFAULTS.keyword = false;
var oldEnforceFocus = $.fn.modal.Constructor.prototype.enforceFocus;
$.fn.modal.Constructor.prototype.enforceFocus = function () {
oldEnforceFocus.call(this);
var $element = this.$element;
var maxHeight =
$("body").height() // full page
- $element.find(".modal-header").outerHeight(true) // modal header
- $element.find(".modal-footer").outerHeight(true) // modal footer
- ($element.find(".modal-dialog").outerHeight(true) - $element.find(".modal-dialog").height()) // dialog margins
- 5; // fudge factor
$element.find(".modal-body").css("max-height", maxHeight);
}
})(jQuery);
Thanks!
edit: To give credit where credit is due, this is based on
Correct way to extend Bootstrap Modal - lock, unlock.
If you don't want to use javascript, you can use CSS media queries and get close-ish to the height you need by using min-height. For example, define a media query on min-height: 540px, and set the max-height of the modal to something like max-height: 500px. Then define a media query at say min-height: 680px and set the modal to max-height: 640px. It's not fluid, and it requires several media queries to inch up to the largest size you want to plan for, but it will get you there.
#Josh solution is good with CSS and media queries but writing so many media queries where small devices has different screen heights e.g Iphone and SamSung G and N series, required alot of media queries to even calculate close-ish modal height on different screen sizes.
so setting height of modal (modal-body) dynamically according to media screen size and on small devices where there will be 2 types of media screen landscape and portrait, following few lines of code will put you very close-ish to your goal
Rendering modal HTML according to screen size with-in sec and later if screen size changes adjust it's height according to screen size
$(document).ready(function () {
setInterval(Dimension, 100);
function Dimension() {
var doc = $(document).height(); // document height
var head = $(".modal-header").height(); // modal header height
var footer = $(".modal-footer").height(); // modal footer height
var modheight = doc - head - footer - 65; // 65 is extra margins and it will not effect the height of modal any way if not changed.
$('.modal-body').css('height', modheight);
}
});
Note
Few Changes required in Modal CSS
CSS
.modal-dialog {
margin: 0px auto !important;
}
.modal-body {
overflow-y: scroll; // In-case the content in modal-body overflow so it will have scrolling.
}
Fiddle
You can check the modal height adjust itself by increasing and decreasing the fiddle result window's height and width.

Jssor slider responsive caption, unwanted text resize

Using JSSOR slider the function ScaleSlider() calls $ScaleWidth to resize the slider according to the viewport. This is achieved by applying a transform style to the #slider1_container element.
transform: scale(0.756364);
However, this also causes any text in the caption to be resized, rendering it illegible.
<div id="slider1_container">
<div u="slides">
<div u="caption" class="myCaption">
<p>Text goes here</p>
</div>
<img u="image" src="myImage.jpg" />
</div>
</div>
How can I prevent the caption text (.myCaption) to be affected by the transform style?
This was a very irritating issue, our designer kept complaining about the automatic resizing.
What i did to deal with this was:
1.Created a function to scale the div that holds my captions back to its original size. The div its originally hidden and after applying the transformation is shown. The original size of my slider is 1920 px width, so i am using that to calculate the percentage of the browser resizing in order to scale the captions back
function ScaleCaptions(){
bodyWidth = document.body.clientWidth;
widthChange=1920/bodyWidth;
if(bodyWidth<992){widthChange=widthChange/1.5;}
$(".captionHolder").css("transform","scale("+widthChange+")");
$(".captionHolder").show();
}
I call this function for the following 3 events, after the ScaleSlider function is called:
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
$(window).bind("load", ScaleCaptions);
$(window).bind("resize", ScaleCaptions);
$(window).bind("orientationchange", ScaleCaptions);
If you want to resize the captions at some point, css rules wont work, so you have to do it with jquery. In my case i wanted to resize the captions below 992px, so i added this line of code in my function
if(bodyWidth<992){widthChange=widthChange/1.5;}
i would disagree with the above approach, sorry for writing another answer but i could not comment. Even when adding css rules for well established breakpoints(768,992,1200, so on), the text continues to resize along the slider, with the difference of starting from the text size declared in the css rules. So for example if i wanted for 768px the font size to be 16px, although it would start from 16px at 768px, it would continue to resize along the slider, which is not what i want. Also 16px font size at 1200px resolution, and 16px font size at 768px resolution have a huge difference, with the second case the text being very tiny
I have similar automated function which works for my solution:
function ScaleSliderCaptions(id,obj){
//var parentWidth = jQuery('#'+id).parent().width();
var bodyWidth = document.body.clientWidth;
var widthChange=obj.$GetOriginalWidth()/bodyWidth;
if(bodyWidth<(obj.$GetOriginalWidth()/2)){widthChange=widthChange/1.5;}
jQuery(".slider-content").css("transform","scale("+widthChange+")").show();
}
obj - slider object created before,
id - slider_container
Caption should always scale along with slider. There is no option to stop caption from scaling.
Css trick below may meet your needs,
#media only screen and (max-width: 480px) {
.myCaption{
...;
font-size: 24px;
...;
}
}
#media only screen and (max-width: 768px) {
.myCaption{
...;
font-size: 16px;
...;
}
}
#media only screen and (min-width: 769px) {
.myCaption{
...;
font-size: 12px;
...;
}
}

Magnific Popup - taller mfp-bottom-bar causes max image height issue

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

Dojo Tollkit - height of ScrollableView inside Dialog

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");
});

What is the Dojo equivalent of jQuery's innerHeight()?

In jQuery, we can use innerHeight to get the height of one element (including padding but not border.).
$("selector").innerHeight();
How can I get the same value by dojo?
What my solution is using
dojo.contentBox() //get the height of content box
dojo.style(node, "borderTopWidth") //get width of border-top
dojo.style(node, "borderBottomWidth"). //get width of border-left
Is there any easy way to do it?
Unfortunately, I don't think there is an easier way to do it.
You basically have three choices:
dojo.contentBox(node) // excludes border, padding and margin
dojo.position(node) // includes border and padding; excludes margin
dojo.marginBox(node) // includes border, padding and margin
So, you need to do what you suggested. Use dojo.contentBox(), then separately calculate the top and bottom border widths.
Alternatively you might want to place a <div> inside a <div>, so that you can set the border on the outer div and keep the padding on the inner div. You would then be able to get the required height from calling dojo.position() for the inner div.
<div id="outer" style="border: solid #000 1px;">
<div id="inner" style="height: 20px; padding: 2px;">.</div>
</div>
<script>
alert(dojo.position("inner").h) // 24
</script>