I'm using epiceditor within my site, and I am populating it with markdown embedded on the page by the server. Currently when epiceditor displays, it has a very small default height, with scroll bars to handle viewing the entire content. I can manually set the height of the div, and for now that's the best I've been able to do (I've set it to something reasonably large: 800px). However I would like its height to always be enough to fit the entire content without scroll-bars. Essentially something like overflow:visible.
Here's the relevant portions so far
<html>
<head>
<script src="/assets/javascripts/epiceditor/js/epiceditor.min.js" type="text/javascript"></script>
<script id="postMarkdown" type="text/markdown" data-postId="1">
#Markdowns in here
...
</script>
<style>
#epiceditor{
height: 800px;
}
</style>
<script src="/assets/javascripts/thrown/posts/edit.js" type="text/javascript"></script>
</head>
<body>
<div id="epiceditor">
</div>
</body>
</html>
And heres the edit.js source (its compiled from coffescript)
$ ->
postMarkdown = $("#postMarkdown").first()
options =
basePath : '../../assets/javascripts/epiceditor'
editor = new EpicEditor(options).load()
postId = postMarkdown.data('postId')
markdown = postMarkdown.html()
editor.importFile('posts/'+postId,markdown);
editor.reflow();
I was hoping reflow might expand the height after the content was inserted, however no such luck. However If I resize the div and call reflow, It does resize properly.
I've inspected the markup it creates in hopes I could determine the height and resize its container and tell it to reflow. However it seems it contains multiple iframes, and at a glance I didn't expect that to be a quick change, or if it would even be possible. However I'd welcome any solution.
I also understand that if I size its container to the right height, epiceditor will fill the proper space. However I want its height to be the amount needed to render, such that the editor takes up the right space in the rest of the sites design. Therefore if there something I can set in EpicEditor to have it not overflow in the manner it is, or a way to determine the height after it loads, I'm set.
Thanks for any help.
I'm the guy who made EpicEditor, here's a solution for you:
var editor = new EpicEditor({
basePath: 'https://raw.github.com/OscarGodson/EpicEditor/develop/epiceditor'
});
var updateEditorHeight = function () {
editorHeight = $(editor.getElement('editor').body).height();
// +20 for padding
$('#epiceditor').height(editorHeight + 20);
editor.reflow();
}
editor.load(function (){
updateEditorHeight();
});
editor.on('update', function () {
// You should probably put a check here so it doesn't
// run for every update, but just on update, AND if the
// element's height is different then before.
updateEditorHeight();
});
Also, in the CSS I added a overflow: hidden to epiceditor's wrapper so the scrollbars don't appear as it grows.
DEMO: http://jsbin.com/eyidey/1/
DEMO CODE: http://jsbin.com/eyidey/1/edit
UPDATE
As of EpicEditor 0.2.2 autogrow is built in. Just turn on the autogrow option.
Related
Note that I'm not asking how to make a div the size of the "window" or "viewport" for which there are plenty of existing questions.
I have a web page of some height and width, and I'd like to add an empty, top-level div (i.e., not one containing the rest of the page) with a size exactly equal to the page's height and width. In practice, I also want it to be at least the size of the viewport.
I know I can do a one-time calculation of the height and width in JavaScript:
var height = Math.max(document.body.scrollHeight,
document.documentElement.clientHeight);
var width = Math.max(document.body.scrollWidth,
document.documentElement.clientWidth);
But this value can change based on images loading, or AJAX, or whatever other dynamic stuff is going on in the page. I'd like some way of locking the size of the div at the full page size so it resizes dynamically and on-demand.
I have tried something like the following:
function resetFakeBg() {
// Need to reset the fake background to notice if the page shrank.
fakeBg.style.height = 0;
fakeBg.style.width = 0;
// Get the full page size.
var pageHeight = Math.max(document.body.scrollHeight,
document.documentElement.clientHeight);
var pageWidth = Math.max(document.body.scrollWidth,
document.documentElement.clientWidth);
// Reset the fake background to the full page size.
fakeBg.style.height = pageHeight + 'px';
fakeBg.style.width = pageWidth + 'px';
}
// Create the fake background element.
fakeBg = setFakeBgStyle(document.createElement('div'));
document.body.appendChild(fakeBg);
// Keep resizing the fake background every second.
size_checker_interval = setInterval(resetFakeBg, 1000);
Limitations
This is for a Chrome extension, and I'd like to limit my modification of the page to adding this single div. This means that adding CSS to modify the height and width of the html and/or body tags is undesirable because it might have side-effects on the way the rest of the page is rendered.
In addition, I do not want to wrap the existing page in the div because that has the potential to break some websites. Imagine, for example, a site styled with the CSS selector body > div. I'd like my extension to break as few websites as possible.
WHY OH WHY WOULD I NEED TO DO THIS?
Because some people like to hold their answers hostage until they're satisfied that I have a Really Good Reason™ for wanting to do this:
This is for an accessibility-focused Chrome extension that applies a CSS filter across an entire page. Recent versions of Chrome (>= 45) do not apply CSS filters to backgrounds specified on the <html> or <body> tag. As a result, I have chosen to work around this limitation by copying the page's background onto a div with a very negative z-index value, so that it can be affected by the page-wide CSS filter. For this strategy to work, the div needs to exactly imitate the way the page background would appear to a user—by being the exact size of the document (and no larger) and at least filling the viewport.
setInterval() is your best friend in cases like this where you want the .height() and .width() of an element to be asynchronously specified all the time to something that can be dynamicly altered by user input and DOM tree changes. It is what I dub as a "page sniffer", and arguably, works better than $(document).ready if you are working in multiple languages (PHP, XML, JavaScript).
Working Example
You should get away with setting the width and height in the window resize function, you might wanna add it in a load function as well, when all data/images are loaded.
just add width=100%
e.g;-
Hello World
I think you must do it like this:
...
<body>
<script>
function height()
{var height = Math.max(document.body.scrollHeight,
document.documentElement.clientHeight);}
function width()
{var width = Math.max(document.body.scrollWidth,
document.documentElement.clientWidth);}
</script>
<div height="height()" width="width()">
</div>
</body>
...
My dev site uses lots of Skrollr animation at 1024px resolutions and up. Under 1024px, I don't want the animation to show, so I hid all of the images and whatnot.
However, the javascript that gets called to make the animation work is still getting called on smaller resolutions and causing some issues.
Is there a way to basically say "If the resolution is less than 1024px, ignore these JS files"?
I tried putting them in a DIV and using my existing CSS media queries to "display: none" the DIV on smaller resolutions, but that doesn't work.
FYI, these are the files being called:
<script type="text/javascript" src="/js/skrollr.min.js"></script>
<script type="text/javascript" src="/js/homepageanimation.js"></script>
On top of the jQuery(function($) { in http://workwave.joomlatest01.mms-dev.com//js/homepageanimation.js put something like
jQuery(function($) {
if(screen.width < 1024) {
return;
}
// skrollr stuff....
}
so all the skrollr functions won't be called on screen sizes with a width below 1024px.
The easiest way is too use jQuery..
$(window).width();
plain Javascript:
var w = window.innerWidth;
var ow = window.outerWidth; //toolbars and status, etc...
if(w > 1024) {
//Skrollr
}
from there an small if to trigger the Skrollr event
I would suggest conditionally loading the script. Basically the script only gets loaded if the screen size is greater than 1024.
if(window.innerWidth >= 1024){
var file = document.createElement('script')
file.setAttribute("type","text/javascript")
file.setAttribute("src", "/js/skrollr.min.js")
}
A nice approach here would be to only call the function that initiates the Skrollr functionality at given screen sizes. A real quick Google suggests that Skrollr has a .init() function that gets things rolling.
Without seeing how the JS is set up it's hard to give any solid advice, but here's an idea:
You have a JS file for the page/site that contains a conditional that checks the width of the window before initializing the plugin after the document is ready.
$(document).ready(function() {
if ($(window).width() > 1023) {
skrollr.init();
}
});
jQuery makes this a lot easier too, so it's worth taking advantage of that.
Another option to consider instead of going via window width (which can sometimes be inconsistent with the CSS widths among different browsers) is to test against a CSS rule and whether it is true, so use one you know would be true at a size above 1024px, and this would eliminate any inconsistency.
Within this condition link the JQuery files as demonstrated in other answers.
I am a skilled database / application programmer for the PC. I am also an ignorant html / javascript / web programmer.
I am creating some documentation about some .Net assemblies for our intranet. Ideally I would like to display an image full size if the browser window can fit it. If not then I would like to reduce it and toggle between a small version and full size version by a click. It is a dependency chart and can be different sizes for different pages. I would prefer a single function to handle this but being it is for our use none of the requirements I mentioned is set in stone. I would like to make it work well but nothing is mandatory.
I read a lot of stuff but couldn't find anything that matched what I wanted. First I tried this (after a few iterations):
<img src='Dependancy Charts/RotairAORFQ.png' width='100%' onclick='this.src="Dependancy Charts/RotairAORFQ.png";this.width=this.naturalWidth;this.height=this.naturalHeight;' ondblclick='this.src="Dependancy Charts/RotairAORFQ.png";this.width="100%";'>
It has problems. First off it enlarges a small image and it looks funny. Second I would have to put the code in every page. Third it requires a double click to restore it. I was going to live with those short commings but the double click fails. I can't figure out how to restore it.
So I tried to get fancy. I couldn't figure out how to get past problem 1, but solved 2 and 3 by creating a function in a separate file. Then I ran into what appeared to be the same problem. This was my second attempt:
function ImageToggle(Image)
{
if (ImageToggle.FullSize == 'undefined')
ImageToggle.FullSize = false;
if (ImageToggle.FullSize)
{
Image.width='100%';
ImageToggle.FullSize = false;
}
else
{
Image.width=Image.naturalWidth;
ImageToggle.FullSize = true;
}
return 0
}
And in my page:
<img src='Dependancy Charts/RotairAORFQ.png' width='100%' onclick='ImageToggle(this)'>
Can what I want be done? It doesn't sound impossible. If it is a large amount of effort would be required then alternate suggestions are acceptable.
You're probably interested in the max-width: 100% CSS property, rather than a flat-out width:100%. If you have a tiny image, it'll stay tiny. If you have a huge image, it gets resized to the width of the containing element.
For example: http://jsbin.com/kabepo/1/edit uses a small and a huge image, both with max-width:100%. As you can see, the small image is untouched, the huge image is resized to something sensible.
I would recommend that you set a the max-width: 100% CSS property for the image.
This will prevent the image's width from expanding to be greater than the container's width.
You can also do the same with max-height: 100% if you are having problems with the image overflowing vertically.
Please see this JSFiddle for an example.
(Note: If you set both a width and a height attribute on the <img> tag directly or in your CSS file your image will not be scaled proportionally.)
Does it have to be a toggle or would a mouseover work for you as well?
<style>
.FullSize { width:100px; height:auto; }
.FullSize:hover { width:90%; height:auto; }
</style>
<img src="Dependancy Charts/RotairAORFQ.png" class="FullSize">
Note: when image is made larger IN the page - the surrounding content will be displaced around it - depending on how you have set up the layout.
Also if you have any body margins or table or div paddings, using image width at 100% will make the page scroll. To check just change 90% to 100% and work your way up / down.
You could also force the image to be a specific size until the browser gets made smaller by the user / has a smaller resolution.
<style>
.FullSize {width:1000px;max-width:100%;height:auto;}
</style>
<img src="Dependancy Charts/RotairAORFQ.png" class="FullSize">
A tip: the image used must be the largest one. So minimum width of lets say 1200 pixels wide (if that is the forced image size you use). That way regardless of size it is it will remain clearer than a small image becoming a large. Since it's an intranet, file size shouldn't be an issue.
Thanks all for your help. Rob and Mike both pointed me to an excellent solution. I now have my page load with an image that fits the browser window, resizes with the browser and if the user is interested they can expand the image and scrollbars appear if necessary. I got this to work in a function so minimal code is needed for each page.
To load the image:
<p style="overflow:auto;">
<img src='Dependancy Charts/RotairAORFQ.png' width="100%" onclick='ImageToggle(this)'>
</p>
And the function:
function ImageToggle(Image)
{
if (ImageToggle.FullSize == 'undefined')
ImageToggle.FullSize = false;
if (ImageToggle.FullSize)
{
Image.style="max-width: 100%";
ImageToggle.FullSize = false;
}
else
{
Image.style="max-width: none";
Image.width=Image.naturalWidth;
ImageToggle.FullSize = true;
}
return 1
}
if you want to get current browser window size and if you want to do it on a click event so try this in jquery or javascript:
<script>
$("#myButton").click(function(){
var x = window.innerHeight; // put current window size in x (ie. 400)
});
</script>
I've been looking around the web for an answer for a couple of hours and cannot find anything so I'm hoping someone can help me.
I want to take the height of a wrapper div who's class is movie and apply it to an inner div who's class is movie-center. How can I do this using JS or jQuery?
I am a newbie when it comes to JS, so I would really appreciate if you could lay everything out for me (including any HTML needed).
Thank you!
EDIT 1: Maybe if I am explaining what I am doing people will have a better understanding. I am making a responsive WordPress theme. As the width of the browser is smaller, the movie widths are smaller. I want the overlay title and graphic to stay in the center. I tried doing this with CSS and it cannot be done fully unless I know the exact height (which I won't because of resizing).
EDIT 2: here is the browser's rendered html code:
<article id="movie-97" class="post-97 movie type-movie status-publish hentry"><a href="http://localhost:8888/movies/hard-truth-levity-hope">
<div class="movie-center">
<div class="movie-overlay">
<div class="movie-play"></div>
<h2 class="movie-title">Hard Truth, Levity and Hope</h2>
</div> <!-- end .movie-overlay -->
</div> <!-- end .movie-center -->
<div class="movie-thumb"><img width="480" height="270" src="http://localhost:8888/wp-content/uploads/2014/03/truth-levity-hope.jpg" class="attachment-movie-thumb wp-post-image" alt="Hard Truth, Levity and Hope" /></div>
EDIT 3: Here's a Pastebin for my website. Note: it has been stripped down to only show the essential parts of the site.
What you've done is the correct way. Make sure you've loaded jQuery properly and try to wrap your code inside DOM ready handler $(document).ready(function() {...}); or shorter form $(function() {...});
$(function() {
$('.movie').each(function() {
var h = $(this).height();
$(this).find('.movie-center').height(h);
});
});
Edit: Since you're using Wordpress, there's probably a conflict happen here, try to use:
jQuery(document).ready(function($) {
$('window').resize(function() {
$('.movie').each(function() {
var h = $(this).height();
$(this).find('.movie-center').height(h);
});
}).resize();
});
Please try this :
/* Get height of .movie thumb preview */
jQuery(document).ready(function($) {
$('.movie').each(function() {
var h = $(this).height();
console.log(h);
$(this).find('.movie-center').first().css('height',h);
console.log($(this).find('.movie-center').first().height())
});
});
Connor,
This will get you what you're looking for:
jQuery(document).ready(function($) {
$('.movie').each(function() {
var h = $(this).height();
$(this).find('.movie-center').height(h);
});
});
A quick explanation. You'll notice that jQuery's .height() function is called twice. First, without any params and then with h passed in.
Pull up your JS console (cmd+opt+j if you're using Chrome) to see how this actually works.
The question at the top of this page has an id of #question-header, so if you enter this in the console $('#question-header').height() you'll see that it returns 36. That's because that element is 36 pixels tall.
So, calling .height without any params will return the height of the selected element. But, we can set the height by passing in a number. Try this by pasting this in to the JS console:
$('#question-header').height(1000)
The header is now 1000px tall!
The third line of the code basically says, "Hey, within this particular instance of the .movie article, find the .movie-center element and set the height.
So, there you go. Some working code and hopefully an explanation as to exactly why/how to use it in the future.
Greetings.
I am developing an animated homepage for a Flash-HTML hybrid website, and for the sake of standards, my solution is proving difficult. I am not a Javascript pro, so any help is appreciated!
Here is the run-down:
For Flash users, HTML page loads a variable-height AS3 Flash movie that will start at 556 pixels high, and after finishing its animation sequence, tween via Actionscript + JavaScript to 250 pixels high.
To kick off this movie sequence -- (below-left) -- I am attempting to set the initial height of the Flash movie via MooTools, so if users do not have Flash or Javascript enabled, they will see the shorter-height image area with alternative image content and HTML content revealed (below-right).
Element.setStyle sets the height just fine until swfObject runs, at which point the movie collapses since I am not specifying a height via CSS. If users do not have Flash, it defaults to the height of a static image.
So here is my question: Does anyone know how to dynamically pass a height variable to swfobject when it is set up to width/height # 100%? Am I killing myself for no reason trying to work with two page heights?
Image Sequence:
Left - Initial Flash movie with HTML navigation below
Right - Resized movie at the end of the sequence with HTML nav & content below, looks the same as no-Flash version (static image)
alt text http://client.deicreative.com/op/images/twopages.jpg
^^ should land here for users w/o Flash
<script type="text/javascript">
<!--
window.addEvent('domready', function() {
$('flashContent').setStyle('height', 556); // sets height for initial movie
$('homeContent').setStyle('display', 'none'); // hides homepage text + photos below
doSwfObject(); // attempting to start swfObject after setStyle is done
});
function resizePage(h) { // to be called from AS3
var tweenObj = new Fx.Tween('flashContent');
tweenObj.start('height', h);
}
function doSwfObject(){
var flashvars = {};
var params = { scale: "noScale" };
var attributes = { id: "flashContent", name: "flashContent" };
swfobject.embedSWF("swf/homeMovie.swf", "flashContent", "100%", "100%", "9.0.0", false, flashvars, params, attributes);
alert(document.getElementById('flashContent').style.height);
// alerts & shows correct height, but page collapses after hitting 'ok'
}
//-->
</script>
The simplest solution is to embed your SWF in a wrapper DIV. Set the SWF to 100% width/height of the wrapper DIV, then use JS to resize the wrapper DIV, not the <object> itself. Less buggy that way.
Since SWFObject 2 replaces the target DIV with the object, you'll need an additional div in your markup:
<div id="wrapper">
<div id="flashcontent"></div>
</div>
becomes
<div id="wrapper">
<object id="flashcontent" width="100%" height="100%" (etc.) ></object>
</div>
I think the act of posting something on here helps me think through the problem -- after doing so, the answer became more clear. So here is my solution for anyone who stumbles across this later.
To animate the Flash movie's height to its initial, taller state while preserving shorter height for non-Flash users (see images above), I use JavaScript the same way I would to tween the movie's height once sequence is complete. The result resembles a push-down ad on a newspaper website.
In AS3, after preloading is done, I tell Javascript to tween the height of the flash movie container (simplified, obviously -- there is no preloading code):
package {
import flash.display.MovieClip;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.external.ExternalInterface;
public class HomeMovie extends MovieClip {
private var stageHeight:uint;
public function HomeMovie(){
this.stage.scaleMode = StageScaleMode.NO_SCALE;
this.stage.align = StageAlign.TOP_LEFT;
stageHeight = 556;
// Tell javascript the stage needs resizing.
if (ExternalInterface.available) {
ExternalInterface.call("resizePage", stageHeight);
}
}
}
}
In JavaScript (via MooTools):
<script type="text/javascript">
<!--
window.addEvent('domready', function() { // hide content on home-page below movie
$('homeContent').setStyle('display', 'none');
});
function resizePage(h) {
var tweenObj = new Fx.Tween('flashContent', {
property:'height',
duration:500,
transition:Fx.Transitions.Quad.easeOut
});
tweenObj.start(h);
}
//-->
</script>
I will probably take it one step further and check for Flash before hiding the home-page content, so that it will not occur if the user has Javascript but not Flash. Again, this is all for the sake of standards.
Have you tryed SWFForceSize? It's an SWFObject addon and it could help you. Even if you don't use it, you could take a look at the source code to see how they do things.
Btw you don't need SWF object when using Mootools as it has a call called Swiff that does everything SWFObject does and then some! :D