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
Related
I have tried this jsfiddle and can't get the background canvas to be at full size of the window. I have tried video.width = window.innerWidth but with no luck. Can some explain?
update:
the problem i think is with this code (and if this is the case I think the title should be "Give PlaneGeometry the dimensions of window.innerWindth, window.innerHeight"
//the geometry on which the movie will be displayed;
//movie image will be scaled to fit these dimensions.
movieGeometry = new THREE.PlaneGeometry( 2,2,0 );
movieScreen = new THREE.Mesh( movieGeometry, movieMaterial );
// movieScreen.position.set(0,50,0);
movieScreen.material.depthTest = false;
movieScreen.material.depthWrite = false
when I change the parameters of the PlaneGeometry the movie image will be scaled to fit these dimensions. The problem is that I can't find the right dimensions.
body has a margin.
add:
body {
margin: 0px;
}
fiddle
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.
Bootstrap 3:
I'm trying to float a button center halfway outside the panel-footer. But the whole layout is responsive so I need to have it when the screen size is resized or smaller it is still correct.
I created a bootply with my attempt that is close but doesn't stay when the screen is resized.
Thanks,
Nate
Bootply Trial
Is this what you wanted to get? http://www.bootply.com/114327
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.bottom-btn {
left: 50%;
bottom: -17px; /* half of the button height */
margin-left: -77px; /* half of the button width */
/* instead of bottom and margin-left, you can use translateX as well. */
}
play with css position property and use margin to get exact position. see the comments for the .bottom-btn class.
I'm using the supersized jquery plugin in order to display a fullscreen background slideshow.
Look at this website (it's not my own but I'm using the same structure):
http://mysampleconcept.com/situs4/
As you can see (for example if you give the header some opacity) the images begin at the top of the body.
But I want them to begin below the header (so that the header doesn't cover the top of the image).
If you give the supersized LIs for example top: 100px; the whole image moves down so that the bottom of the image disappears below my footer.
So that's not the solution I want.
So all in all which I need is the image to stretch to the biggest size it can, while still being inside the window not stretching over the top 100px nor bottom.
How can I do this?
Sorry, my English is not the best...
I found this solution but I don't know how to implement it: https://stackoverflow.com/a/12889088/1981981
You can use the solution offered in the question you refered to as a starting point. Just place it right below the $.supersized() inside your document ready function.
Since you want a top offset, we have to modify the top value aswell. I modified the snipped to suit your needs:
var portfolioSize = function() {
var headerOffset = 100;
$('#supersized').css({
height: $(window).height() - headerOffset,
top: headerOffset + 'px'
});
};
portfolioSize();
$(window).resize(function() { portfolioSize(); });
I changed the $(window).load Event to a direct call, since we place the code inside the document ready function.
Don't forget to modify the CSS for positioning as mentioned in the other answer (https://stackoverflow.com/a/12889088/860205).
I made a vertical carousel which consists of images that when clicked should be visible fullscreen. But the problem is i'm not able to figure out how to make sure the fullscreen images are preloaded or something and works like the thumbnail images(getting preloaded).
I'm not sure what approach to follow for preloading the fullscreen images using css background and how to make sure the images fadeIn or just some transition when i click on the thumbnail in the carousel.
Please have a look at the following link where my code is uploaded.
http://www.lluvia.me/slideshow/carousel.html
If its convenient,feel free to check the script by checking the source.
Help would be appreciated. Thanks!
Found this post and figured it might help you, Preloading images with jQuery
Try and post some of the code in your body for future reference. :)
Quick and easy:
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
// Alternatively you could use:
// (new Image()).src = this;
});
}
// Usage:
preload([
'img/imageName.jpg',
'img/anotherOne.jpg',
'img/blahblahblah.jpg'
]);
Or, if you want a jQuery plugin:
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
// Usage:
$(['img1.jpg','img2.jpg','img3.jpg']).preload();
Alternatively, if you want to stick purely with CSS check out this page: http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/ You can just have the background image be positioned off screen then come on screen when needed.
#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }