How to make below code in order to default Landscape printing with table/phone ?
It is working in the Window Printing now.
<style type="text/css" media="print"> /* #page {size:landscape} */ #media print { #page {size: A4 landscape;max-height:100%; max-width:100%} } </style>
Thank you very much for your help & support !
Related
I am having an issue with creating buttons in an Animate CC HTML 5 canvas project. I've tried creating a MovieClip instance in my library, setting a linkage name and creating a frame in the MovieClip for each state, labelled as "out", "over", "down" and "hit".
Using the ButtonHelper class in CreateJS has "worked", to a degree, producing a functioning button with rollover state, until I try to reposition the button else where on the stage using the .x and .y properties. When I do this, the hit state seems to "separate" from the rest of the MovieClip - i.e. to trigger the "rollover" frame, I would have to mouse over the hit state much further down and to the right of the stage.
My Animate CC trial has now expired, so I am trying to solve my issues with using the CreateJS libraries with plain old fashioned HTML. I have created a spritesheet PNG file with three 50px x 50px images in it, which equals 150px X 50px. I have created an HTML doc and Javascript code, which follow below, but when the states of the Sprite button do not change when I click "down" on it or mouse "over" it.
I wonder if anything could pass some ideas my way? There might well be a simple error in what I've written, I'm working by myself and slowing going "code-blind" to it.
Thanks very much,
Dave
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sprite and Spritesheet Testing</title>
<script type="text/javascript" src="js/easeljs-0.8.2.min.js"></script>
<script type="text/javascript" src="js/preloadjs-0.6.2.min.js"></script>
<script type="text/javascript" src="js/soundjs-0.6.2.min.js"></script>
<script type="text/javascript" src="js/tweenjs-0.6.2.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<link type="text/css" rel="stylesheet" href="css/defaults.css" />
</head>
<body onload="init();">
<h1>Using Sprites, SpriteSheets and ButtonHelper</h1>
<p>Below should be some example buttons. Hopefully this functionality can be recreated within Animate CC using the CreateJS libraries.</p>
<!-- CreateJS content will be displayed here -->
<canvas id="t26Canvas" width="749" height="737" class="setupCanvas">
<h1>The internet browser you are currently using does not support the <canvas/> HTML 5 element.</h1>
</canvas>
</body>
</html>
Javascript:
/* Javascript required by the example page */
var HTML5Stage;
var spritesheet;
var data;
var myButton;
var myButtonHelper;
function init() {
// Get the HTML5 <canvas/> element we are going to be using for the CreateJS content.
HTML5Stage = new createjs.Stage("t26Canvas");
// Set usable on touch devices
createjs.Touch.enable(HTML5Stage);
// Enable capturing of mouse rollover events
HTML5Stage.enableMouseOver(30);
setupSpriteSheet();
addTestButton();
}
function setupSpriteSheet() {
data = {
images: ["images/ui/buttonsprites.png"],
frames: {width: 50, height: 50},
animations: {
out: 0,
over: 1,
down: 2
}
};
spritesheet = new createjs.SpriteSheet(data);
}
function addTestButton() {
myButton = new createjs.Sprite(spritesheet);
myButtonHelper = new createjs.ButtonHelper(myButton);
HTML5Stage.addChild(myButton).set({x: 300, y: 100})
HTML5Stage.update();
}
Is there a way to use Bootstrap 3 Fixed Navbar to have it fixed to top on md+ but fixed to bottom on smaller devices?
Currently doing this with two separate navs being hidden and displayed based on screen width. Would much prefer to have one nav that will affix based on screen size but can't figure out how.
I'm front end and do not know JavaScript so please be detailed in any instructions that may include JS!
Thanks in advance.
If you don't want to use javascript for this case, here is my solution.
Since you should use:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
to make the nav fixed to top or:
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
to make the nav fixed to bottom you can simply do this insted of those two:
<nav class="navbar navbar-default navbar-position" role="navigation">
And after that:
/* LESS */
#media (max-width: 767px) {
navbar-position {
.navbar-fixed-bottom;
}
}
#media (min-width: 768px) and (max-width: 991px) {
navbar-position {
.navbar-fixed-bottom;
}
}
#media (min-width: 992px) and (max-width: 1199px) {
navbar-position {
.navbar-fixed-top;
}
}
#media (min-width: 1200px) {
navbar-position {
.navbar-fixed-top;
}
}
So, as you see, insted of navbar-fixed-top or navbar-fixed-bottom you can use navbar-position witch inherit navbar-fixed-top or navbar-fixed-bottom classes depending of device type (xs, sm, md, lg)
Pretty simple with a bit of jQuery.
Simply check the width of the browser on load, and if it's equal to or less than 768 pixels wide, add navbar-fixed-bottom to your navbar.
jQuery:
var width = $(window).width(),
height = $(window).height();
if ((width <= 768)) {
$('.navbar').addClass('navbar-fixed-bottom');
}
The variable width gets the width of the window on load, and then the if statement checks to see if it's equal to or less than 768 pixels. If it is, then it appends the appropriate class, otherwise it leaves it alone. You need to fire this on page load, so it'll end up looking more like this:
$(function() {
var width = $(window).width(),
height = $(window).height();
if ((width <= 768)) {
$('.navbar').addClass('navbar-fixed-bottom');
}
});
FIDDLE
Simply make the result pane in the fiddle narrower to simulate a samller device/screen size/window, then hit run to see it flip from top to bottom.
Optionally, you can make it switch from top to bottom even if the user resizes the window. Could come in useful for when a user rotates a mobile device.
$(window).on('load resize', function() {
if($(window).width() <= 768) {
$('.navbar').addClass('navbar-fixed-bottom');
} else {
$('.navbar').removeClass('navbar-fixed-bottom');
}
});
I made a JS Bin for this one because JS Fiddle was acting weird with the load feature. Adjust the size of the output window to see what I'm talking about with this bit of code.
I'm working with Bootstrap 3 and the client wants the website container width to be set to 960px. Do I directly edit the CSS file or what is the best way to do this? I heard something about "Less". Do I customize the download? Thanks!
Update: the site does NOT need to be responsive, so I can disable that responsive-ness and just add the 960px width to the CSS and be done with it or does this cause problems elsewhere?
For Bootstrap3, you can customize it to get 960px by default (http://getbootstrap.com/customize/)
change #container-large-desktop from ((1140px + #grid-gutter-width)) to ((940px + #grid-gutter-width)).
change #grid-gutter-width from 30px to 20px.
then download your custom version of bootstrap and use it. It should be 960px by default now.
I wanted the max width to be 810px, so I used a media query like this:
#media (min-width: 811px) {
.container{
width:810px;
}
}
Bootstraps gridsystem is FLUID. This means it works in percentages.
So just set a width to page wrapper, and you are ready to go
HTML:
<body>
<div class="page-wrapper">
<!-- Your bootstrap grid/page markup here -->
</div>
</body>
CSS:
.page-wrapper {
width: 960px; /* Your page width */
margin: 0 auto; /* To center your page within the body */
}
The easiest way is to wrap everything in a container like this..
.container-fixed {
margin: 0 auto;
max-width: 960px;
}
http://bootply.com/94943
Or, you can go with LESS/custom build: http://getbootstrap.com/customize/
I am adding a whole new section to a website using Twitter Bootstrap 3, however the container cannot go wider than 940px in total for Desktop - as it will throw out the Header and Footer {includes}.
So 940px works out at 12 x 60 = 720px for the columns and 11 x 20 = 220px for the gutters. Fair enough, but how do you input these into Bootstrap 3 as there is 'no' #ColumnWidth field/setting in the Customize section?
I have tried by setting the #container-lg-desktop and #container-desktop both to 940px - but it doesn't work.
There is a far easier solution (IMO) in Bootstrap 3 that does not require you to compile any custom LESS. You just have to leverage the cascade in "Cascading Style Sheets."
Set up your CSS loading like so...
<link type="text/css" rel="stylesheet" href="/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="/css/custom.css" />
Where /css/custom.css is your unique style definitions. Inside that file, add the following definition...
#media (min-width: 1200px) {
.container {
width: 970px;
}
}
This will override Bootstrap's default width: 1170px setting when the viewport is 1200px or bigger.
Tested in Bootstrap 3.0.2
In the first place consider the Small grid, see: http://getbootstrap.com/css/#grid-options. A max container width of 750 px will maybe to small for you (also read: Why does Bootstrap 3 force the container width to certain sizes?)
When using the Small grid use media queries to set the max-container width:
#media (min-width: 768px) {
.container {
max-width: 750px;
}
}
Second also read this question: Bootstrap 3 - 940px width grid?, possible duplicate?
12 x 60 = 720px for the columns and 11 x 20 = 220px
there will also a gutter of 20px on both sides of the grid so 220 + 720 + 40 makes 980px
there is 'no' #ColumnWidth
You colums width will be calculated dynamically based on your settings in variables.less.
you could set #grid-columns and #grid-gutter-width. The width of a column will be set as a percentage via grid.less in mixins.less:
.calc-grid(#index, #class, #type) when (#type = width) {
.col-#{class}-#{index} {
width: percentage((#index / #grid-columns));
}
}
update
Set #grid-gutter-width to 20px;, #container-desktop: 940px;, #container-large-desktop: #container-desktop and recompile bootstrap.
The best option is to use the original LESS version of bootstrap (get it from github).
Open variables.less and look for // Media queries breakpoints
Find this code and change the breakpoint value:
// Large screen / wide desktop
#screen-lg: 1200px; // change this
#screen-lg-desktop: #screen-lg;
Change it to 9999px for example, and this will prevent the breakpoint to be reached, so your site will always load the previous media query which has 940px container
If you don't wish to compile bootstrap, copy the following and insert it in your custom css file. It's not recommended to change the original bootstrap css file. Also, you won't be able to modify the bootstrap original css if you are loading it from a cdn.
Paste this in your custom css file:
#media (min-width:992px)
{
.container{width:960px}
}
#media (min-width:1200px)
{
.container{width:960px}
}
I am here setting my container to 960px for anything that can accommodate it, and keeping the rest media sizes to default values. You can set it to 940px for this problem.
If if doesn't work then use "!Important"
#media (min-width: 1200px) {
.container {
width: 970px !important;
}
}
I have a droid eris which has a HVGA screen (320x480). But the following jquery command $.mobile.media("screen and (min-width: 800px)") returns true. Can any one tell me what's wrong? Thanks.
It looks like you're confusing the syntax for media queries in a stylesheet, and in a <link> to a stylesheet. What you're got so far isn't syntactically valid in either context.
In a stylesheet:
#media screen and (min-width:800px)
In a link to a stylesheet:
<link rel="stylesheet" href="foo.css" media="screen and (min-width:800px)"/>