I am developing an Ionic App and it needs to have some buttons (one above another, not inline) on the bottom-left place of the device's screen
I have the following CSS:
.button {
left = "1em";
z-index = "13";
overflow = "scroll";
position = "absolute";
width = "3em";
height = "2.5em";
textAlign = "center";
}
and then I calculate its bottom like this:
let bottom: number = 0;
this.floors.forEach(floor => {
let floorButton: HTMLElement = document.createElement("button");
floorButton.setAttribute("class", "button");
floorButton.appendChild(document.createTextNode(floor.level));
floorButton.style.bottom = bottom + "em";
bottom = bottom + 5;
});
Now my problem is simple: in a device with a bigger screen than another device, it is positioning in an upper position.
I can workarround this by calculating the height of the device's screen and dividing it x times until I get to the position I want. But this looks dirty to me (I don't know if it's the right wait tho, maybe it is).
So my question is, is there a simpler way that doing this as the one I put above instead of having to calculate the screen's height size in pixels? Can it be done directly by CSS? I've checked #media but it looks like it won't help at all. Or maybe I'm just doing it right and I'm overthinking it too much?
Thanks!
You can just use CSS for this:
.button {
display: block;
margin-top: 5px;
}
In this way doesn't matter what is the width of screen, always your buttons will be in separate line.
Related
I want the image to be at the center of the window, and of the same size irrespective of the window size. Im not sure on how to do this, any kind of help will be appreciated.
Or you can use JavaScript to do it
In case the piscture is 600px x 400px:
var w = ((window.innerWidth)-600)/2;
var h = ((window.innerHeight)-400)/2;
var img = document.getELementByTagName('IMG')[0];
img.style.marginLeft = w+'px';
img.style.marginTop = h+'px';
You must just add the concrete size of the picture in CSS, like this:
img {
width: 600px;
height: 400px;
}
The image will be 600px x 400px in all screen resolutions.
I found some answers about dynamically doing stuff to divs, but none of them did what I want.
I am working with Raphael js vector library and need a div for the canvas where the objects are going to be drawn. For example:
<html>
<head>
<style>
#canvas
{
height: 2000px;
position: absolute;
width: 1500px;
}
</style>
</head>
<body>
<div id="canvas"></div>
<!-- some code here -->
</body>
</html>
In my JS file I did the following:
var paper = Raphael("canvas"),
r = paper.rect(100, 100, 100, 100),
c = paper.circle(500, 500, 80);
Now on my application, the user will populate the canvas by creating objects like r and c I showed above. But the problem is that once an object gets created outside of canvas' dimensions, it will not be show on the paper/canvas.
I am trying to dynamically enlarge div's size to i.e. height: 3000px, width: 2000px. I found some answers about absolute position but that did not help. Also found about div overflow, but this applies to div's parent element. Any help will be appreciated.
What you need to do is resize both the containing div and the paper. In this example I will show your circle is cropped bottom right.
When you click the canvas, it will resize to show your circle is drawn correctly.
See http://jsfiddle.net/kRzx5/7/
var paper = Raphael("canvas"),
r = paper.rect(100, 100, 100, 100),
c = paper.circle(500, 500, 80);
// size i want to resize to
var w = 1000;
var h = 1000;
var canvas = $('#canvas');
canvas.on('click', function(){
// resize container
$(this).css({width: w, height: h});
// resize paper
paper.setSize(w, h);
});
In this example I am using an arbitrary size to use, you could keep checking the positions and sizes of each object that gets added, and find the item which has largest value on x and y when checking its bounding box, then resize to this. So paper will always fit the items that get added.
My website's landing page (http://www.chrisamaddeo.com/) has a full screen background. I want to make it move like an example of this website's header (http://www.kaiserair.com/) I have this code, HTML, which goes in the head of my website:
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
var movementStrength = 25;
var height = movementStrength / $(window).height();
var width = movementStrength / $(window).width();
$("#top-image").mousemove(function(e){
var pageX = e.pageX - ($(window).width() / 2);
var pageY = e.pageY - ($(window).height() / 2);
var newvalueX = width * pageX * -1 - 50;
var newvalueY = height * pageY * -1 - 25;
$('#top-image').css("background-position", newvalueX+"px "+newvalueY+"px");
});
I have this code, css and it doesn't work:
#top-image {
background:url('https://d3ui957tjb5bqd.cloudfront.net/images/screenshots/products/0/8/8905/red-rocks-park-o.jpg' -50px -25px;
position:fixed ;
top:0;
width:100%;
z-index:0;
}
My website is hosted with weebly and their html is a little different
Actually, i've just tried copying your code:
http://codepen.io/chrisboon27/pen/rEDIC
It does work, in that it moves the image.
I did have to add some some closing braces to your jQuery but maybe you just missed those when you pasted the code into this question.
Also, I looked at your site and noticed you are currently using background-size:cover. This takes your bg image and makes it fit within the div - you dont want that as you want some bg extending beyond the div - so i'n the css in the example I linked to you can see I used calc to make the bg-image size to 100% width + 50px. I used 50px as your code currently moves the background image position by up to 25px left or right, therefore you need it to be 50px total wider than the div.
EDIT:
If you use calc you should include a -webkit prefixed version too (unless you are using prefix-free or prefixr to add prefixes. Here is browser support: http://caniuse.com/calc
If you need to support more browsers you will need to set background-size via javascript
I'm finding that quite hard to follow without recreating it and seeing where those numbers come from. However I recently made something very similar with jQuery for someone else except it moves an img within a div. It probably wouldn't take much to switch it to move a background image though (though finding out the bg-image dimensions would be tricky - you might be better hard coding them in that instance).
html:
<div class="container"><img src="foo.jpg" class="draggable"/>
</div>
jQuery:
//for each item
$(".container").each(function(){
//get the container width
var conWidth = $(this).width();
//and its height
var imgHeight = $(this).find("img").height();
//get the nested img width
var conHeight = $(this).height();
//and its height
var imgWidth = $(this).find("img").width();
//figure out how much of the image is not visible horizontally
var excessWidth = imgWidth - conWidth;
//and how much is not visible vertically
var excessHeight = imgHeight - conHeight;
//how far is this container from the left of the page
var containerPositionLeft = this.offsetLeft;
//and from the top
var containerPositionTop = this.offsetTop;
//when moving mouse over container
$(this).mousemove(function(e){
//figure out how many pixels the mouse is from the left edge of the page
var mouseoffLeftPage = e.pageX;
//and how many from the top edge of the page
var mouseoffTopPage = e.pageY;
//figure out how many pixels the mouse is from the left edge of the page
var mouseoffLeftPx = mouseoffLeftPage - containerPositionLeft;
//and how many from the top edge of the page
var mouseoffTopPx = mouseoffTopPage - containerPositionTop;
//figure out the distance the mouse is from the left edge as a percentage (kind of - all the way to the right equals 1 not 100)
var mouseoffLeftPercent = mouseoffLeftPx/conWidth;
//do the same for height
var mouseoffTopPercent = mouseoffTopPx/conHeight;
//times the 'percentage' value by the amount of image hidden - so if your conatiner is 200px wide, your image 300px wide nd your mouse is half way across this value would be 0.5*100 which would give you 50 - which is exactly half the amount of image that is missing.
//note this gets set as a minus value as we will be using a minus number to shift the image around.
var setnewWidth = -(mouseoffLeftPercent * excessWidth);
//do the same for the height
var setnewHeight = -(mouseoffTopPercent * excessHeight);
//add the values as css (using transform(translate) as it's more performant and does subpixel rendering so looks smoother [or does it? it does in animations but seems as my js is not technically animating it it might not make a difference in that respect] - could set the top,left version as fallback for unsupporting browsers but ie9 supports transforms anyway so i dont care.)
$(this).find("img").css({"transform" : "translate("+ setnewWidth+"px ,"+setnewHeight+"px)" });
//$(this).find("img").css({"left" : setnewWidth+"px", "top" : setnewHeight+"px" });
});
});
Not a direct answer to what isn't working in your code, but shows an example (with comments on what is happening) of how it can be done - note that my version doesn't rely on you knowing any of the widths or heights of objects and can run on multiple items on one page - also it doesn't have to be placed at the very top of the page. It does assume the image is larger than its container though - if it isn't larger the image just moves around within it.
You could reduce the number of variables by doing more calculations in a row, I just wanted it to be as easy to read the logic as possible.
DEMO:
http://codepen.io/chrisboon27/pen/BhkJq
Simpler than that, you can just make sure the CSS position is set to "fixed" so wherever you are on the page it's always 0px from the top.
I have a button/image that I want centered. Code below works as expected in vertical mode:
pauseButton.source = pause; // embedded image
pauseButton.verticalCenter = 0;
pauseButton.horizontalCenter = 0;
pauseButton.addEventListener(MouseEvent.CLICK, playVideo);
After setting orientation to landscape mode the image stays in the same position and so is no longer centered:
stage.setOrientation(StageOrientation.ROTATED_RIGHT);
Setting verticalCenter/horizontalCenter again after orientation change doesn't make a difference. How can I force it to center.
I know that for desktop pub, the center can dynamically transform...I just tried
for (var i:int = 0; i < 100 ; i++){
sq.x=stage.stageWidth / 2;
sq.y=stage.stageHeight / 2; }
and it dynamically changed position with the size of the window, without delay. Im not sure if putting this in a loop will help you at all, but I just wanted to be sure it would update accurately on my end. Works fine!
Let me explain, I've got several floats in a parent div, it may be possible that some go to new line due to parent width restriction, is it possible to do it in CSS ?
For example : style all the div like div3 and div5 and all the next div which may be break ?
(please notice width and height are not fixed in real just in my example)
http://jsfiddle.net/frntz/aMzF7/1/
Thank you.
You can't do it with just CSS. You'll need to use some JavaScript to calculate the width of the container against the widths of your divs. The divs which would be wrapped to the next line could be determined by the accumulated div width exceeding the wrapper width, etc. JavaScript could then easily reset the width accumulation and apply the class and continue with the iteration of the child nodes until all 'wrapped' divs are found and styled.
Here's an example with jQuery:
var maxWidth = $('#parent').width(),
accWidth = 0;
$('#parent').children().each(function(){
accWidth += $(this).width();
if (accWidth > maxWidth) {
$(this).addClass('newline');
accWidth = $(this).width();
}
});
Demo 1: http://jsfiddle.net/AlienWebguy/77NTw/
Demo 2: http://jsfiddle.net/AlienWebguy/77NTw/1/
And here's an example with vanilla JS:
var maxWidth = document.getElementById('parent').offsetWidth,
accWidth = 0,
nodes = document.getElementById('parent').childNodes,
i;
for (i in nodes) {
if (nodes[i].hasOwnProperty('offsetWidth')) {
accWidth += nodes[i].offsetWidth;
if (accWidth > maxWidth) {
nodes[i].className += ' newline';
accWidth = nodes[i].offsetWidth;
}
}
}
Demo 3: http://jsfiddle.net/AlienWebguy/77NTw/2/
Yes.
Floats will always go on to the next line if there is no room in the parent container.