I'm trying to do a resizable canvas element using CSS resize. The setup looks like this:
HTML:
<div class="canvas-wrapper">
<canvas></canvas>
</div>
CSS:
.canvas-wrapper {
position: relative;
overflow: hidden;
resize: horizontal;
}
.canvas-wrapper canvas {
width: 100%;
height: auto;
}
It works just fine but the resize handle is always hidden by the canvas. I surely could add an additional child element with the resize property to the wrapper and place it above the canvas but this seems rather inelegant.
Now is there any way to influence the "z-index" of the resize handle?
I've already seen this question but they do a workaround there, too.
Edit: It seems that the handle remains usable in some browsers even if its hidden by the canvas (try this). Probably the spec isn't very accurate on this behaviour. Does anyone have further information about this?
i changed it a bit in this i think this is what you were trying to accomplish
http://jsfiddle.net/aidan2129/U7J9k/
.canvas-wrapper {
position: absolute;
overflow: hidden;
resize: horizontal;
}
.canvas-wrapper2 {
position: relative;
overflow: hidden;
resize: horizontal;
}
.canvas-wrapper canvas {
width: 100%;
height: auto;
background-color:blue;
}
.canvas-wrapper2 canvas {
width: 100%;
height: auto;
background-color:red;
}
It seems to work fine i have just set the position to absolute so it does not take the full length of the page but if you resize the result canvas element to the right you will see the blue canvas appear behind the red one.
Hope this helps
Since it seems there is no solution without a little workaround I finally used the pointer-events: none property mentioned here. This enables the resize handler (at least for me in Firefox and Chrome) no matter if it is behind the canvas or not.
For visual feedback I used a pseudo-element. See the updated fiddle for how it looks like.
Related
I'm trying to make a horizontal section with a parallax effect. In the background there should be an image that scrolls at a different speed than the page.
The problem is: I want the parallax element to be contained in the parent element, so the parent element works kind of like a mask for the child: the child is only visible within the boundries of the parent.
I know that this can be achieved by having the parallax element beetween two elements with backgrounds that are "above" the parallax element and obstruct it, but this method is not applicable for my case.
The obvious idea that comes to mind is to use overflow: hidden on the parent. This however breaks the 3D transforms so there is no parallax left.
How do I achieve the described effect?
Here is a codepen: https://codepen.io/rradarr/full/mdwgard.
I want the red rectangle to not be visible outside the "parallax-container" with the black border.
* {
margin: 0;
}
html, body {
height: 100%
}
main {
position: relative;
width: 100%;
perspective: 1px;
transform-style: preserve-3d;
overflow-y: auto;
overflow-x: hidden;
height: 100vh;
background-color: blue;
}
.static {
min-height: 800px;
}
.parallax-container {
border: solid black 3px;
height: 600px;
width: 100%;
transform-style: preserve-3d;
position: relative;
}
.parallax-child {
position: relative;
width: 100%;
height: 100%;
transform: translateZ(-2px) scale(2.01);
z-index: -1;
}
#img-or-whatever {
height: 900px;
width: 100%;
background-color: red;
position: relative;
z-index: -1;
}
<main>
<div class="static"></div>
<div class="parallax-container">
<div class="parallax-child">
<div id="img-or-whatever"></div>
</div>
</div>
<div class="static"></div>
</main>
As far as I know you can't achieve the described effect with translateZ.
This is because according to this article about CSS 3D
...giving overflow any value other than visible effectively forces the value of transform-style to flat, even when we have explicitly set it to preserve-3d.
The only alternative for overflow hidden is to put something "above" the parallax element as far as I know (which you said you want to avoid).
If there is really no option to put something "above" the parallax element you could try to do something similar with js (something like this for example). This is not ideal since it will imply a lot of calculations and variables and might take some time to accomplish exactly what you want (and you loose the 3D inside the container since you need overflow: hidden anyway).
If you really need the 3d inside there you could create a more complex solution with javascript that skips overflow: hidden as well. But I'd try to avoid that if is not mandatory (I'd rather add an absolute element over the overflow: hidden container where 3D is enabled. And give the absolute container transparent background if you still need 3D in that section).
Usually I would also advise to try to avoid .js for this kind of stuff (if possible) but I don't think you have a lot of options here.
You could try the :not() pseudo clss, but I don't know what you would pass into the parentheses that would be similar to not in the black square.
is there really any way to hide scrollbar in Firefox, without manipulating the padding/margin without set to absolute, and without creating a browser specific css file, I just want to know is there any clean solution like this.
::-webkit-scrollbar {
display: none;
}
Unfortunately this only works for webkit browsers.
html { overflow: -moz-scrollbars-none; }
you can use a trick
add a parent to your elements with this style
html, body{
height: 100%;
width: 100%;
overflow:hidden;
}
#container{
height: 100%;
width: 100%;
overflow: auto;
padding-right: 10px;
box-sizing: content-box;
}
this trick send the scrollbar out of the view , it's exist but user didn't see it
If the size of the content is less than the size of the window, usually Firefox will hide the scroll.
The problem that happens sometimes is that if the size of the content changes for any reason or the size of the window changes to the content, the scroll bar will reappear and cause a mutation in the page.
If you want the scroll to always be visible in Firefox, you can use the following command
html {
overflow-y:scroll;
}
Disclaimer - I understand there exists questions around fixed elements in safari, and fixed elements weren't supported, but now are and so forth. However I can't find a question that addresses this exact question.
Given the simplest of fixed sidebars, something like:
.sidebar {
position: fixed;
top: 10px;
right: 10px;
}
And a relatively long page, with input elements.
When an input element is focused, any fixed element becomes absolute - I understand the why, safari is trying to declutter the viewport - thats fine, but not always appropriate. I ask that I get to choose the best experience for the user (i know best naturally).
So the Question..
Is there any way to leave fixed elements as fixed even when input elements are focused?
I have attempted to do a bit of $(window).on('scroll', magic and position elements manually on scroll, but its quite jittery on the ipad.
Safari has supported position: fixed since at least version 9.2, but if you're seeing difficult issues, you can fully create the fixed position effect by making the document element and body full screen and then using absolute positioning. Scrolling then occurs in some main container element rather than the body. Your "fixed" elements can exist anywhere in the markup using this method.
jsfiddle here
html,
body,
.mainContainer {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
}
.mainContainer {
overflow: auto;
}
.fixed {
position: absolute;
bottom: 20px;
left: 20px;
}
In order to achieve the effect you desire you need to change your approach to the layout. Instead of positioning the sidebar with position:fixed you need to use position:absolute within a position:relative container that is set to the height of the viewport within that position:relative container you need another div that uses overflow-y: scroll and -webkit-overflow-scrolling : touch
Caveat: I generally avoid using position fixed on tablet & mobile if possible although the browser support is there, in my experience it'll be janky and javascript solutions leave a lot to be desired, my first response would be to challenge the pattern with the designer. If I'm given designs that include a position fixed element when there are input elements, I'm more likely to seek a design solution than a development one as the focus issues you're describing are difficult to circumvent and maintain a quality user experience.
THE MARKUP:
<div class="outer">
<div class="sidebar">
<ul>
<li>Dummy list nav or something</li>
</ul>
</div>
<div class="container">
<input type="text" />
<!-- I added 10000 inputs here as a demo -->
</div>
</div>
THE CSS:
html,body{
-webkit-overflow-scrolling : touch !important;
overflow: auto !important;
height: 100% !important;
}
.outer {
position: relative;
overflow: hidden;
/* I'm using Viewport Units here for ease, but I would more likely check the height of the viewport with javascript as it has better support*/
height: 100vh;
}
.sidebar {
position: absolute;
top: 10px;
right: 10px;
/*added bg colour for demo */
background: blue;
}
.container {
height: 100vh;
overflow-y: scroll;
-webkit-overflow-scrolling: touch
}
input {
display: block;
}
Here's a CodePen for you to open in your simulator (presentation view):
https://codepen.io/NeilWkz/full/WxqqXj/
Here's the editor view for the code:
https://codepen.io/NeilWkz/pen/WxqqXj
When rendered in Chrome/Android the website shows as intended but in IE/Firefox some vertical scrollbars appear. Simplified code:
CSS
html, body {
overflow: hidden;
position: relative;
}
.menu, .slide, .ico {
overflow-x: hidden;
overflow-y: scroll;
position: fixed;
height: 100%;
width: 100%;
}
.menu::-webkit-scrollbar, .slide::-webkit-scrollbar, .ico::-webkit-scrollbar {
display: none;
}
.container {
display: table;
height: 100%;
position: absolute;
overflow: hidden;
width: 100%;
}
.links {
height: 100%;
display: table-cell;
vertical-align: middle;
}
HTML structure
<html>
<body>
<div class="menu">
<div class="container">
<div class="links">
I hope I copied the sufficient code to show the issue. If needed I can link the website.
The idea is having the links div be scroll-able vertically but without showing the scrolling bar.
Edit: here is the full code: http://www.jcml.pt
Edit2: I was able to fix it (but created another problem as can be seen on my answer).
well...
overflow-y: scroll;
Means if content overflows in y axis (vertical), show a scroll bar. It sounds like this is what your seeing. And that this code worked! (lol)
Try adjusting the height: of the element (or parent element) where this is occurring it may need a few more pixels of space in IE or Firefox to show all of the content in vertical space; as browsers render / read slightly differently (especially if defined as 100% or auto).
Then remove overflow-y: scroll; leave it blank or declare overflow-y: auto; or if your still having an issue trying define your height in pixels or declare a max-height: with the 100% if your still having issues please try to update your question so we can fully understand and provide a JSfiddle demo and / or screenshot.
Since it was working on Chrome I thought I was going on the right direction and searched even more things and found this scheme:
http://blogs.msdn.com/b/kurlak/archive/2013/11/03/hiding-vertical-scrollbars-with-pure-css-in-chrome-ie-6-firefox-opera-and-safari.aspx
I was able to fix it the problem by creating two containers instead of one (but now it doesn't scroll at all - something I'll have to work on later). Code can be seen here: http://www.jcml.pt/3
I am relatively new to front-end dev so a bit lost as to how i can go about this. I created a container that contains a slider and some images. My supervisor has a huge screen so obviously there will be empty space at the bottom of the screen. So he doesn't want that. Instead he wants the container to be centered horizontally and vertically based on the size of the user's screen.
How can I do this properly with as minimal code as possible? I believe there is jQuery plugin but wanted to see if there is a better way or if doing this makes sense at all or not?
Due to the flow-based nature of CSS, without Javascript this can only be done if the vertical size of the centered element is fixed, by applying a position:absolute' andtop:50%` within a fixed container, and then use negative margin to offset the container. Click here for JSFiddle Sample.
Alternatively the same effect can be reached by using display:table-cell, but that's kind of messy and loses you a lot of flexibility. Sample already supplied in the other answer here so I'll save myself the effort :)
You can do it easily using a vertical-align property.
Since vertical-align works the desired way way only in a table cell, this trick with display property can give you the desired effect.
#yourDiv {
// give it a size
width: 100px;
height: 100px;
margin: 0 auto;
}
html, body {
height: 100%;
width: 100%;
padding: 0; margin: 0;
}
html {
display: table;
}
body {
display: table-cell;
vertical-align: middle;
}
See a fiddle with demo.
Try this:
HTML:
<div class="center"></div>
CSS:
.center {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
background-color: red;
}
Demo: http://jsfiddle.net/WDth4/
Exactly Center an Image/Div Horizontally and Vertically:
http://css-tricks.com/snippets/css/exactly-center-an-imagediv-horizontally-and-vertically/