Any way i can have ckeditor consume 100% height dynamically?
http://jsfiddle.net/bobbyrne01/jejmqjxa/1/
html
<div id="outer">
<textarea class="ckeditor" id="editor1" name="editor1"></textarea>
</div>
<button>test</buton>
css
#outer {
width: 95%;
height:500px;
}
While checking the ckeditor docs it is not supported yet to set the height in %
http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-height So to get the desired result I suggest to set the height to 100% by CSS but not by the ckedtior.config read the screen height with javascript, set the size on load and window resize and put it as value in the outer element height.
Might sounds like a lot of work but is not as tricky. Updated fiddle here
CSS to add (to get all ckeditors you might have on the loaded page)
div[id^=cke_editor] {
height:100%;
}
Javascript to set the height of the outer div on page load
document
.getElementById("outer")
.style.height = window.innerHeight+"px";
If you want to have this working on window resize I suggest to use jQuery but however you can do it without. Here is how (with and without jQuery): Cross-browser window resize event - JavaScript / jQuery
Related
I'm using jQuery Lazyload Plugin. Before the images are loaded I use a dummy image as placeholder which is a 20x20 pixels blank PNG. Also I'm using jQuery wookMark which is a dynamic grid plugin. For this plugin to work I need the images to be in their correct aspect ratio so the plugin can calculate the suitable position of each grid element in the page.
I have width and height attributes on img tag set to the correct dimensions, but that doesn't have any effect on the dummy image and it will be shown as a square, no matter what.
I can use inline styles to set width and height for each image, but this approach will stop the image from being responsive in other dimensions.
Is there a way to give an image width and height in a way that it act like it is its real dimensions?
Here's the pen to look at:
http://codepen.io/anon/pen/iaIoJ
The only way you're going to get what you want is by using some javascript. You're already using jQuery so that will make it a bit easier.
Use the following CSS to begin with (as an example):
.myImage {
width: 300px;
height: 400px;
}
then when the images are loaded (in some sort of callback function I presume):
$('.myImage').css('width','100%');
$('.myImage').css('height','auto');
Alternatively, you can work with a placeHolder css class that has this height and widht, and then $('myImage').removeClass('placeHolder'); to clear it from the images.
I found a good way for it.It's not going to be pure css, but that's fine by me :)
My solution is to set the image height to 0 and use padding-bottom to maintain the aspect ratio:
<img src="./blank.png" style="height:0;padding-bottom:133.333%">
And also having a class for the img tag when the actual image is loaded:
img.loaded {
height:auto !important;
padding-bottom:0 !important;
}
Here's the pen for this example: http://codepen.io/nOji/pen/yoshA
Hope you find it useful.
Is it possible to set a font size to a percentage of the container size? I have a list of items which have an image, a header and a description. The image resizes automatically as the user resizes the window. I would like the header font to do the same.
edit: Javascript/JQuery is fine.
In CSS3, there is the vw unit, which stands for 1/100 of the viewport width. For example,
h1 { font-size: 5.5vw; }
sets the heading font size to 5.5% of the viewport width.
However, this seems to work on IE 9 (Standards Mode) only so far. Moreover, IE 9 does not dynamically change the value of the unit when the browser window is resized, only on reload.
Just to expand on Tyler's answer, this is what javascript is meant for, though I'm tad sure you can achieve the same feat using CSS3 viewports, you will be better off using jQuery (it's usually in the cache of most browser's and always hosted on Google so no need to worry :)
If you have a css like this:
#body #mytext {
font-size: 50%;
}
you can dynamically resize in jQuery like this:
$(window).resize(function(){
$('#body #mytext').css('font-size',($(window).width()*0.5)+'px');
});
No, this can only be done in JavaScript.
Is jquery is an option?
Super easy if it is: fiddle
<div id="container">
<p>HELLO WORLD!</p>
</div>
<script>
$(document).ready(function() {
var sizeMe = ($('#container').height() / 100) * 90; /* 90% of container */
$('p').css('font-size', sizeMe);
};
</script>
I've done it with jquery in the past. Check out this article if it's of any interest to you. You can also use CSS to detect device width (not browser, and it's not supported in older browsers).
http://css-tricks.com/resolution-specific-stylesheets/
A few weeks ago I working on this site. This is my next portfolio site. I want to make this structure, when I finish:
Header
Horizontal image gallery with floating height
Footer
I want to create something similar, just like the 22slides.com portfolio sites for photographers. If you change your browser's window size or press full screen button, the img element or the image's div automatically change his height.
I putted in the CSS a "max-height" parameter, to prevent the images never become bigger than their original resolution. It's a serious issue on huge resolution screens. but in Chrome it's not working properly, because the aspect ratios become wrong. If you press full screen, the aspect ratio more bad. In every other latest browser (Firefox, Safari, Opera, IE8-9) working normally. I created a custome CSS only for chrome with this command (but now I uncommented this in HTML to show you the Chrome aspect ratio problem):
#portfolio img { max-height: none; }
So with this line, the images using the biggest possible height in Chrome and the aspect ratios are correct. But it's a problem for me. I not want that a 1024x683px image showed bigger than his actual resolution on a FullHD monitor.
I think the best solution, if there's a javascript, which is dynamically escribe a width and height for every single image and keep the original aspect ratio. 22slides.com using something similar javascript, but I'm not a javascript programmer at all. :(
The images HTML structure:
<div id="portfolio">
<img src="image1.jpg" alt="" />
<img src="image2.jpg" alt="" />
</div>
CSS (max-height is very little number, just to show you the problem in Chrome):
#portfolio { white-space: nowrap; float: left; }
#portfolio img { height: 100%; width: auto !important; min-height: 150px; max-height: 350px; }
I'm using this Jquery Javascript to dynamically change the image's height and bring back the image's overflow on the screen with 130px negative height. Probably not this script causing the problem, becuase if I turn it off, the aspect ratios are more bad in Chrome:
// Dynamical vertical resizing on images and Correct the height (to not overflow the screen)
$(document).ready(function(){
$(window).load(function(){ // On load
$('#portfolio img').css({'height':(($(window).height())-130)+'px'}); // Adjust the number if you change something in CSS
});
$(window).resize(function(){ // On resize
$('#portfolio img').css({'height':(($(window).height())-130)+'px'}); // Adjust the number if you change something in CSS
});
});
I need help! Thank You!
Update:
This javascript written by "Emphram Stavanger" and "nick_w" seems to solve my image fit to browser height problem:
Imagefit vertically
I tried and it's perfectly working with one single image. The image fitting in the available viewport window perfectly, with correct aspect ratio! There is a visual explanation for our problem made by "Emphram Stavanger":
http://www.swfme.com/view/1064342
JsFiddle demo (Basicly it's Emphram Stavanger's code, I just putted in the changes by nick_W, changed Jquery to latest and I putted after the show link:
http://jsfiddle.net/YVqAW/show/
I not tried yet with horizontal scrolling image website, but it's already a big step!
UPDATE 2:
SOLUTION: https://stackoverflow.com/questions/20303672/horizontal-image-slideshow-javascript-not-working-properly-with-portrait-oriente
(And I need help again...) :)
A little late but you can use a div with background-image and set background-size: contain instead of an img tag:
div.image{
background-image: url("your/url/here");
background-size:contain;
background-repeat:no-repeat;
background-position:center;
}
Now you can just set your div size to whatever you want and not only will the image keep its aspect ratio it will also be centralized both vertically and horizontally.
The background-size property is ie>=9 only though.
I am loading images in multiple places where the site theme will have them displayed in different sizes. I experimented with the CSS properties and found that I could scale the image using the height and width parameters and crop the image using position:relative and overflow:hidden.
What I want to do though is a combination of that. To scale the image down until the width is the width of the container element or the height is the height of the container element (which ever comes first). Then crop the rest.
Thus the image should be in proportion and also fill the container, regardless of shape.
Any ideas?
Marvellous
I'm not entirely certain what you're trying to do, but here is some guidance that will help you use only CSS properties to achieve some image resizing and clipping.
The code below will resize an image to whatever the container is.
<div id="THE-OUTER-CONTAINER" style="width:100px; height:100px; overflow:hidden;">
<img src="YOUR_PIC.jpg" style="width:100%; height:100%;"/>
</div>
the key is understanding that height and width properties of the img can use %. Using % in your design is great for giving flexibility. This will of course, force the image to whatever size the parent container is. So if the parent container is not the right aspect ratio it will deform the image.
To preserve aspect ratio you will need to know the dimension to expand along in advance and only specify that in the img tag style. For instance, the below will properly resize the image along the width only.
<div id="THE-OUTER-CONTAINER" style="width:100px; height:100px; overflow:hidden;">
<img src="YOUR_PIC.jpg" style="width:100%;"/>
</div>
Using the above, if YOUR_PIC.jpg is 200x200 pixels, it will scale it down to 100px and clip 100px off of the bottom.
If you want it to expand within ranges along with the width/height you would use 'max-width'/'min-width'and 'max-height'/'min-height' css properties on the img. Set those equal to what you need. Then you will have something like this:
<div id="THE-OUTER-CONTAINER" style="width:100px; height:100px; overflow:hidden;">
<img src="YOUR_PIC.jpg" style="width:100%; height:100%; max-width:50px; max-height:50px;"/>
</div>
The above will make sure that the image doesn't expand for containers larger than 50px but will shrink for any container below 50px.
Alternatively, you can use some javascript to do some calculation of sizes dynamically. This would be useful if you do not know in advance which dimension you want to resize upon. Use javascript to calc the size and then set the above css properties accordingly. I would suggest using jquery to make your javascript life easier.
Hope this gets you on the right track.
To reword your question more succinctly; you want to scale an image to fill it's container element. This can't be done at the moment only using CSS3, but Christian Varga has achieved it beautifully using jQuery:
https://christianvarga.com/jquery-resize-image-to-parent-container-plugin/
You can use javascript and css. Javascript to check the image heights/widths, then apply appropriate css.
Javascript (note: using zeptojs which is pretty similar to jQuery):
$(window).bind("load", function() {
$.each($("img"), function(index, item) {
var image = new Image();
image.src = item.src;
if (image.height > image.width) {
$(item).addClass("resize-x");
} else {
$(item).addClass("resize-y");
}
});
})
CSS:
.resize-x {width: 64px; height : auto;}
.resize-y {width: auto; height : 64px;}
Any ideas for using max-height on a borderless/scrolless iFrame so if it ends up being too tall the browser doesn't render a giant black area to fill in the rest of the iFrame?
I've tried setting height="100%" and max-height="xx" but that doesn't seem to work.
Many Thanks!
Your use of height="100%", using the = operator, suggests you're trying to use in-line attributes. This can work, but usually works better with absolute measurements (so 700px rather than a percentage). max-height isn't a valid attribute, so far as I'm aware, of any element except in stylesheets, so I'd suggest that you use CSS:
iframe {
min-height: 200px; /* or whatever */
max-height: 500px; /* or whatever */
}
You can, if you must, also use in-line styles, which would yield <iframe src="..." style="min-height: 200px; max-height: 500px;">
Also, while you can use percentages, to give max-height: 80%, this does seem to require that the parent element has a defined height of its own (I'm not sure if it's all browsers, or just one or two, but either way it seems a reasonable expectation in order that the browser can work out what 80% actually is).
A good JavaScript based answer seems to be the first solution from:
https://www.geeksforgeeks.org/how-to-adjust-the-width-and-height-of-iframe-to-fit-with-content-in-it/
Resizes the iframe to suit the content. I've found that you have to manually add a bit extra for height... go figure, but seems to work.
Here's the full mark-up and JS that works for me based on that solution:
<iframe src="/app/index.html" style="width:100%;" frameborder="0" id="Iframe">
Oops, your browser doesn't get Iframes. Click Here to proceed.
</iframe>
<script>
// Adjust the iframe height to exactly as much as required by the content
var frame = document.getElementById("Iframe");
frame.onload = function() {
// add extra 50 pixels - in reality need just a bit more
frame.style.height = (50+frame.contentWindow.document.body.scrollHeight) + 'px';
// not sure if this is really required.
// set the width of the iframe as the width of the iframe content
frame.style.width = frame.contentWindow.document.body.scrollWidth+'px';
}
</script>