I have a little issue positioning an element outside the canvas to star an animation from the outside. An example bellow.
.square {
height: 50px;
width: 50px;
background-color: #555;
position: absolute;
right: -10px;
}
<html>
<head>
</head>
<body>
<div class="square"></div>
</body>
</html>
This is a reference image about the expected start position of the element (red dotted box).
Anyone know how to configure the css related to the object to position it outside the canvas without increases their (canvas) size?
Hopefully without deactivate the scroll bar (for example to increase the left side of the canvas) and not over the canvas (to keeping it scrollable and not relative)
I thought this is the simplest question ever, but i couldn't find on the web, hope to be helpful to someone, thanks!
Related
In simple terms I am trying to scale a large box (used when the browser is in full screen) down to a smaller box using the CSS transform property. The box is scaling properly but the browser is still showing the scroll bars as if it is not scaled. I do not want to turn off overflow, I am hoping I am missing something.
A fiddle of my issue. Notice the vertical scroll bar:
http://jsfiddle.net/adamlj/uvfhr8nw/4/
<html>
<head>
<style>
.scaleme {
background: red;
height: 2000px;
width: 4000px;
}
.scaler {
transform-origin: top left;
transform: scale(0.16666667);
}
</style>
</head>
<body>
<div class="scaler">
<div class="scaleme"></div>
</div>
</body>
</html>
transform leaves the original element untouched. It only affects how the element is rendered.
But the original element remains the same, hence occupying the same space in document flow. So the scrollbars will not go away unless you resize the element.
If you're looking for a solution to resize both the element and the space it occupies in document flow, have a look at this answer.
"use strict";var _createClass=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}();function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var zoomFactor=function(){function e(t){_classCallCheck(this,e),this.el=this.q(t,document),this.b(),this.u()}return _createClass(e,[{key:"q",value:function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:this.el).querySelector(e)}},{key:"b",value:function(){var e=this.el.innerHTML,t=document.createElement("z-1"),n=document.createElement("z-2"),i=document.createElement("z-3"),l=document.createElement("style");this.el.innerHTML="",this.el.appendChild(t),t.appendChild(n),n.appendChild(i),i.innerHTML=e,l.appendChild(document.createTextNode("z-1,z-2,z-3,zoom-factor{display:block}z-1,zoom-factor{position:relative;overflow:hidden}z-1,z-2{width:100%}z-1,z-2,z-3{color:#fff}z-1{float:left;overflow:hidden}z-2{position:absolute}z-3{transform-origin:left top;width:0}")),document.getElementsByTagName("head")[0].appendChild(l)}},{key:"v",value:function(){return this.q("input")?this.q("input").value:parseFloat(this.el.dataset.scale)||1}},{key:"u",value:function(){var e=this.v(),n=this.q("z-1"),i=this.q("z-2"),l=this.q("z-3");n.style=i.style=l.style="",i.style.width=n.clientWidth*e+"px",l.style.transform="scale("+e+")",n.style.height=l.clientHeight*e+"px"}}]),e}();new zoomFactor("zoom-factor");
.scaleme {
background: red;
height: 2000px;
width: 4000px;
}
<zoom-factor data-scale="0.16666667">
<div class="scaleme"></div>
</zoom-factor>
Placed the CSS inside the JS, ran it through babel to make it es2015 compatible and minified it. Once you place that js in your page, it will automatically parse the <zoom-factor> element according to its data-scale.
I am pretty new to HTML/jQuery, and I am designing a portfolio site for a class. I made a graphic that contains a box on the left where text should go. I wanted to minimize scrolling for the user so I have made the divs containing the images resize with the window, and have also implemented a minimum size. I am getting a little confused on how to do this with my text box now. I am trying to create a div which is contained inside the background image divs in order to hold the text. This text div needs to be positioned inside the box graphic and resize along with the images. I tried using percentages for the margins but it doesn't work because as I resize the window, it becomes unaligned again.
[Here is the page.]
[Here is the CSS.]
Also, please keep in mind this is a work in progress and the graphics and animation will not stay exactly how they are! If anyone can help me out, please let me know, and thank you!!
Please take a look at this jsfiddle and let me know if this is more of something like what you want?
html:
<html>
<head>
<title></title>
</head>
<body>
<header>some | header | nav</header>
<div class="content">
<p>test text</p>
</div>
<footer> a © symbol </footer>
</body>
</html>
CSS:
body {
background:gray;
}
header {background:black; color:white}
footer {background:black; color:white}
.content {
margin: 25px;
height: 30px;
width: 100px;
padding: 50px;
border: 1px solid black;
}
http://jsfiddle.net/VsKsQ/
I hope that helps.
I want to display images in a 144px x 144px div element.
Images are always larger than 144px and so I want to zoom scale them. By that I mean that the smallest side will touch the edge of the div, cutting a bit from the other side - the opposite of letterbox.
How can I do this and have it work on older browsers like IE as well?
EDIT:
Changed the image, the first was wrong, sorry.
Resize the image so that inside the div there is no space without image
My first answer addressed intentionally blocking out the part of the image while intentionally keeping the space occupied. If you just want part of the image visible with no space or anything else taken up, the best option will be to use CSS Sprite techniques.
Here's an example:
HTML (copy and paste into your own file for a full test):
<html>
<head>
<style type="text/css">
.clippedImg {
background-image: url("http://www.grinderschool.com/images/top_main.jpg");
background-position: -75px -55px;
height: 100px;
width: 235px;
}
</style>
</head>
<body>
<div class='clippedImg'> </div>
</body>
</html>
CSS (this is really the key):
.clippedImg {
background-image: url("http://www.grinderschool.com/images/top_main.jpg");
background-position: -75px -55px;
}
You can adjust the position numbers to get exactly the portion and size of the image that you want.
Note also that if you want a black box around this, it's even easier than the other post I made. Just put a parent div around this one:
<div class='blackBox'>
<div class='clippedImg'> </div>
<div>
With a padding and width set to create the black-box effect you want:
.blackBox {
background-color: black;
padding: 0 20px;
width: 235px;
}
Set only the width of the image to 144px in CSS or in the attribute. The height will scale automatically. I'm fairly certain this works as low as IE 6. I'm not certain about anything older than that.
If I read your question right, you aren't trying to resize the image, but rather to actually cut off part of the image. If you just want to resize the image, then follow the other answers about that.
The simplest way I can think of to actually cut off the image this is to add <div class='blockOut'> </div> and then use CSS to place & size the div, make it's color match the background color of your page, and put it in front of the image. Example CSS:
.blockOut {
position: relative;
top: -100px;
left: 100px;
background-color: white;
z-index: 2; //this is the important part for putting this div in front of the other one
}
Edit: Note that since you added an example showing that you want all sides blacked out, this would require separate divs for blacking out the top, each side, and the bottom. Also, if you want part of the image to show through (as it does in your example) you can use CSS transparency options.
div{height:114px;width:114px;overflow:hidden;}
div img{position:relative;left:-100px /*or whatever you want. can change it with js*/;top:-100px;}
that is masking to only show a part of the img, as you say in the title. but in the description says you want to resize the img. decide yuorself
to do what you want with css, you should use max-height:144px;max-width:144px. but ie6 doesn't implements those simple properties, so you'll have to use js
I have been playing around with text in the canvas, and although it is easy to draw, it is not easy to interact with. I began implementing keyboard press functionality to update text on the canvas, but then gave up when I realized I would have to incorporate cut,copy,past and undo functionality.
Is there anyway to "float" html elements on top of eachother? For example can I float a text field ontop of certain parts of my canvas, disable the border and set the color to the canvas color?
Thank You
You may use the CSS position: absolute property with z-index: 1 to place elements above the canvas.
EDIT: added an example: here the div that contains "1234" floats on top of the div that contains "abcd" (that could be replaced with a canvas element)
<div id="wrapper">
<div style="position: absolute; left: 10px; top: 10px; width:200px; height:100px; background-color: yellow;">
abcd
</div>
<div style="position: absolute; z-index: 1; left: 50px; top: 20px; width:100px; height:20px; background-color: green;">
1234
</div>
</div>
You can use 'somehow' invisible text-control to gain control over the text being input and copy innerHTML on the canvas on keypress. Im doing similar stuff, copying computed font css attributes of the text present in DOM and more. Z-indexes work pretty straight. The setFocus() function can help too.
I have a large div housing my background image. Generally, it will be centered with the sides going off the screen. Because it is background, I don't want scrollbars to show up on the browser- is there a solution here?
Thanks
EDIT: Let me clarify based on the answers:
I have a large image that extends beyond the browser's boundaries, but that I need to assign to a div background or img instead of the body background because I'm manipulating it w jquery, etc.
I know it is not possible for a div's background image to extend beyond its borders.
I also can't use an img or nested div with overflow:hidden because that would hide the overflow, when all I want is for it to not trigger scrolls, i.e. be ignored physically by layout engine but still be shown visually, just like an overflowing body background would.
I just ran into the same circumstance as you do.
After a little experiment I found that it is caused by the wrong value the CSS property 'position'.
When I changed the position setting of the div from 'fixed' to 'absolute', things go as exactly what you want.
This worked for me; I recall learning that it didn't work in Opera, but that was quite some time ago.
html, body { overflow-x: hidden; }
Based on the additional info I came up with this example. The image is the background of a div that fills the whole visible area and pretty much acts just like it's the body's background image (tested in firefox). You could even scroll around the image by modifying the background-position attribute.
<html>
<head>
<style>
#test {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-image: url('http://farm5.static.flickr.com/4121/4805074237_6cf5880f75_o.jpg');
background-position: 50% 50%;
overflow: none;
z-index: -1;
}
</style>
</head>
<body>
<div id="test">
</div>
Here's some other stuff in the body of the page.
<div>
and some stuff in a div in the body of the page.
</div>
</body>
</html>