I'm looking for a way to set different width and height separately based on viewport width and height. Is it possible in css or js?
For a JS solution, you can use the FlowType.js library.
It will allow you to quickly and easily control the text elements on your page relative to the size of their containing div.
Your example could be setup like this:
$(document).ready(function(){
// customize the options you pass into the
// flowtype function in order to get the effects you want
$('.text_block').flowtype({
minimum : 500,
maximum : 1200,
minFont : 12,
maxFont : 40,
fontRatio : 30
});
});
This example uses jQuery to ensure that all assignments via flowtype are only assigned after the page has loaded.
To activate flowtype, you just need to put this call somewhere before your closing <body> tag:
<script> $('.text_block').flowtype(); </script>
See the flowtype.js website for more information on how to install flowtype, and how to configure it.
Here is a jsfiddle showing your example with the flowtype library assignments.
Hope this helps!
Related
The CasperJS documentation for captureSelector() does not say anything about how to set the size of the screenshot. The default (at least on my system using webkit, Windows 8) seems to be to take a tiny screenshot of the top left portion of the page.
Am I looking in the wrong place?
I found viewportSize. I assume this is what I need, but does anyone have code that can set this to a sensible default (like 100%)?
FYI this.viewport('100%', '100%'); just hangs, so I assume it doesn't take %.
Do I have to inject code that will return the window width and height into the page and pass that back to extract it or is there an easier way?
casper.captureSelector() should take the screenshot of the element that you select. If you want to take a screenshot of the whole page you need to use casper.capture().
Note that PhantomJS has a default viewportSize of 400x300. Some pages don't resize correctly, so a part of the page is not visible. You will need to set this to something desktop-like:
var casper = require('casper').create({
viewportSize: {width: 1280, height: 800}
});
There is no way to make it 100%. What you could do is read out the width of the body of the page and set the viewport accordingly through casper.viewport().
var width = 1280;
casper.start(url, function(){
width = this.evaluate(function(){
return document.body.clientWidth;
});
}).viewport(width, 800).then(function(){
this.capture("screenshot.png");
}).run();
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.
I have this code below:
<script type="text/javascript">
jwplayer("container").setup({
flashplayer: "http://test.captive-portal.com/jwplayer/player.swf",
file: "http://content.captive-portal.com/files/video/cirque-du-soleil/mob.mp4",
image: "http://content.captive-portal.com/files/video/cirque-du-soleil/mob.jpg",
height: 285,
width: 480,
});
</script>
The whole page is here (in case you need it): video page.
What I'm trying to do is to change the 4 lines: file: (...), image (...), height(...) and width (...) depending of the resolution of the window. I have managed to do this with css, so styles are applied correctly, but this is javascript and I don't really know how to modify it. I was trying to place 2 similar scripts on one page in divs and hide the small one in case of big screen or hide a big one in case of small screen but it didn't work. Video didn't play. I think this may be caused by some scripts in the flash player file.
Is there any way to set conditions for those 4 lines depending of the screen resolution?
Thank you very much for your help in advance.
Those parameters are simply an object.
So you should be able to create that object out of the jwplayer call, and simply pass it in. e.g
var params = {};
params.flashplayer = "http://test.captive-portal.com/jwplayer/player.swf";
if(!mobile){ //you need to handle checking for mobile devices
params.file = "http://content.captive-portal.com/files/video/cirque-du-soleil/desktop.mp4";
params.image = "http://content.captive-portal.com/files/video/cirque-du-soleil/desktop.jpg";
params.height = 570;
params.width = 960;
}else{
//set params in same way but with mobile settings
}
jwplayer("container").setup(params);
If you later want to just resize the player. JwPlayer has a 'resize' function that you can call: jwplayer.resize(width,height)
I have a web app using master page and content pages (see the attached image). I need to set max-width of one div in content page dynamically accordint to the browser window size (so that the whole app stays on the page, without scrolling). I couldn't find the sloution (or couldn't replicate the results) using just html and CSS. So I'm thinking to do it using javascript. But the problem is, I NEVER used it, so I really have no clue how to do it. I'd really appriciate if someone took a couple of minutes and write the function that will do it. As I see it, I should take difference in height between bottom edge of the header and top edge of the footer and subtract height values of searchbar and button bar.
EDIT:
Thanks to maxedison for providing that code. But, how do I use it? :D I'm a total noob. I have a problem, since I use masterpage and content pages. Where do I put that code?
EDIT 2 - THE ANSWER:
I looked a little further into how to use jQuery, and searched here some more, and I found a solution. Next time I start developing an application, I'll use jQuery from the bottoms up...It just simplifies some things so much. :)
So for the solution: It's similar to what maxedison suggested, but I changed it so, that I set height with CSS and I just added a fixed value to deduct from window.height.
<script type='text/javascript'>
$(function () {
$('.myStyle').css({ 'height': (($(window).height()) - 350) + 'px' });
$(window).resize(function () {
$('.myStyle').css({ 'height': (($(window).height()) - 350) + 'px' });
});
});
</script>
Using jQuery, it would look something like:
function resetHeight(){
var newHeight = $(window).height() - $('.header').outerHeight() - $('.searchBar').outerHeight() - $('.buttons').outerHeight() - $('.footer').outerHeight();
$('.content').height(newHeight);
}
$(function(){
newHeight();
$(window).resize(function(){
resetHeight();
});
});
Can any body help me to find out, how to print dynamic graph as example generated by flot.
I tried this one but it's printing whole page, but I want only graph portion.
function printGraph(){
$('<img src="../images/button_refresh.png" alt="Print Graph" style="">').appendTo(controlholder).click(function (e) {
//Canvas2Image.saveAsPNG(document.getElementById('placeholder'));
//canvas.toDataURL("image/png");
window.print('placeholder');
});
}
This article describes how to copy the canvas to a normal img which can then easily be printed or saved as an image.
The important part:
img.src = canvas.toDataURL();
See the great answer below from Ignacio Correia for more details.
Launch a new window with only the graph or with alternate css similar to what google maps does when you print.
Attention this post have been edited, please see all possible solutions
From what I have searched and found you have only 2 choices or try to print the CANVAS, or EXPORT as an image or my idea is to separate the image from the content and try to print only the graph. Here is a FAQ by Flot, how can you export the image: Question Number 3
Q: Can I export the graph?
A: You can grab the image rendered by the canvas element used by Flot
as a PNG or JPEG (remember to set a background). Note that it won't
include anything not drawn in the canvas (such as the legend). And it
doesn't work with excanvas which uses VML, but you could try
Flashcanvas.
SOLUTION 1 - Export image:
Export image to computer and then print it
SOLUTION 2 - FLOT to CANVAS:
Saving canvas as images - By Mozilla
Save as Image Flot Plugin
Related question - Problem printing in IE8
SOLUTION 3 - My own, Modal printing
This is not the best solution by far but it works, here is a demo:
JSFIDDLE Normal Demo
JSFIDDLE Fullscreen Demo
Steps
Load Fancybox
Open using INLINE FRAME the graph
PRINT on callback after show
Reload the page after print to redesign the page
Here is the necessary code:
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
afterShow : function() {
alert('You are about to print the graph!');
window.print();
},
afterClose : function() {
alert('We need to refresh the page!');
window.location.reload(false);
}
});
});
Extra
This related question is about exporting Flot to PDF, don't know if you may be interested: Export Flot to PDF
EDIT - WORKING SOLUTION
Here is a working demo of how to export the image: FLOT to IMAGE
You could hide the parts of the page you don't wish to print by using a separate stylesheet that has media="print". This would also allow you to tweak the final printed output of the graph itself, for example making it larger.
Found a solution by using html2canvas. First assign the container div to have id like "theChart".
<div class="box" id="theChart">
<div id="placeholder"></div>
</div>
Now we can create an image:
html2canvas($('#theChart')).then(function(canvas) {
image = canvas.toDataURL("image/png");
document.location.href=image;
});
This will also solve the problem when canvas.toDataURL() does not render axis labels.