I am trying to do a simple thing. 3 div moving up and down on touch (for smartphone). On top of this 3 div, I'd like to have a canvas, to draw the edge of div. (In the example it is straight, but there will be some rotation and other beautiful canvas drawing...). I'd like to use canvas and not an img, to learn.
I use vh, vw to make it responsive. There is only 5 div.
I am not sure my solution to scroll up and down is a good idea. It represents when it is team 1 to play or team 2.
Here is my fiddle:
https://jsfiddle.net/Sulot/gzm6duzy/2/
#mycanvas{
pointer-events: none;
position:fixed;
top:0;
left:0;
width:100vw;
height:100%;
z-index:5;
border: 3px solid;
}
This css choice doesn't sound as a good idea.
Thanks,
Stéphane.
Related
Can someone please explain to me why i can't get the "Ken Burns" effect to show up properly when increasing the size of my images?
I pretty much tried hacking away at this with different images and different CSS settings but I really can't get them stacked and not floating outside the box. It's not interference with my CSS, as I tried it standalone as well.
I would like to have a banner with say a max of 1200x600 that fits the width of the screen. Please provide complete CSS.
https://codepen.io/planetgrafix/pen/erAcF
#slideshow {
position:relative;
width:800px;
height:400px;
overflow:hidden;
border:8px solid #ccc;
}
slideshow img {
position:absolute;
width:360px;
height:240px;
top:50%;
left:50%;
margin-left:-180px;
margin-top:-120px;
opacity:0;
snip...
https://gist.github.com/pithyless/1861253
Thank you.
This question already has an answer here:
CSS responsive slanted edge
(1 answer)
Closed 7 years ago.
I'd like to know how to create a div 100% width and say 300px wide where the bottom border is slightly angled across the full width of the box.
It can be done in either CSS or javascript but it needs to be responsive. I've seen examples of using borders but if I'm honest I don't fully understand using borders for super whizzy shapes.
What you're looking for is something like this :
<div class="box"></div>
We want to specify that we want to use the border as the main drawing feature.
We want the bottom left border to be transparent.
Then if we apply a reasonable height to it, we see it gets close to your image..
.box {
border-right: 300px solid red;
border-bottom: 10px solid transparent;
height:100px;
}
This then is a drawing of purely borders, stretched and sized so much they look solid.
JSFiddle
Making it responsive is a little more tricky as borders are not supported with percentage values.
You will always have a maximux border size set in a fixed value.
In our case we will use 300 px as previously, so our .box class becomes like so :
.box {
border-right: 300px solid red;
border-bottom: 10px solid transparent;
height:100px;
width:100%;
right:0px;
float:right;
}
We are going to pull right, so that the solid looking image will actually float left.
We will then add a wrapper which will have an overflow of hidden, so even though the border-image will not change size, the overflow will make it seem as it is.
.box_wrapper{
width:100px;
overflow:hidden;
left:0px;
}
Our HTML gains a wrapper :
<div class="box_wrapper">
<div class="box"></div>
</div>
And the result is something of a responsive workaround!
JSFiddle 2
If you update the .box_wrapper size in the fiddle, the bordered box will look like it's adjusting its width.
Note: There may be a much better way to achieve this!
I'm using html/css/javascript as a game UI for a 3D game. I render the page on top of my game. Most game UI's have an anchoring concept (position widgets to Top, Left, Right, Bottom, Center, LeftCenter, RightCenter, TopCenter, BottomCenter). I'm wondering if anyone knows of any existing html/css framework out there that mimics this behavior or if it's fairly easy to do such a thing with css? I'm not all that familiar with css and I've done some searching around this but haven't seen anything that seems like it's a direct anchoring like I was referring to above. It seems like anchoring div's like this would be ideal in my situation.
I'm picturing behavior like anchoring a div to the bottom center and when I add things inside of it the overall div itself always stays centered at the bottom no matter if I resize the window.
Comment as answer:
Look at css position: fixed it basically causes the element to act like a watermark
If you want it bottom-left you would do
css bottom: 0; left: 0;
If you wanted top-center you could do
css top:0; left:0; right:0;
(I think you can get where I'm going with that without explaining all the different scenarios)
left: 0, right: 0 seems to just make the div take up the entire width. Giving a width of 50% doesn't center that div of a width of 50% it seems.
Response
try html
<div id='a'>
<div id='b'></div>
</div>
css
#a {
position: fixed;
left:0;
right:0;
}
#b {
width: 50%;
margin: auto;
}
So I have a simple lightbox with code like this:
jquery code:
var $overlay =$('<div class="overlay"></div>');
$('body').append($overlay);
$('img').click(function(){
$overlay.show();
});
css:
.overlay {
width: 100%;
height:100%;
background:grey;
display:none;
position: absolute;
top:0;
}
This is obviously very simple I haven't wrote much code except the overlay that will appear when the image is clicked and triggers the lightbox.
Here are my questions:
My webpage is longer than the screen, what code could I use to stop the screen scrolling when my lightbox is triggered.
Is it possible to set the lightbox $overlay to only fill the screen in view. So only take up the part of the webpage in the current screen view. I have images spread out over webpages and I when are a lightbox is triggered I would like it to fill only that part of the screen.
Well, I decided to post an answer hopefully it will help you.
First things first, your JavaScript. From the JS you posted, it looks like you are using a different .overlay for each image. Not needed.
Simply make one overlay like so:
<div class="overlay"><img src="#" width="500"/></div>
Then, set the images src when you click on an image on your webpage:
$('img').click(function(){
var src = $(this).attr('src');//Gets the image you clicked on src
$('.overlay').fadeIn();//Fades in the overlay
$('.overlay img').attr('src',src).css('margin-top',($(window).height() - $('.overlay img').height()-20)/2);//Sets the overlay image to the correct source, and centers the image. -20 is for the border
});
$('.overlay').click(function(){
$(this).fadeOut();// And fades out the overlay on click
});
Simple and easy. Now to your actual question.
How you are going to achieve what you want is with CSS.
First, set the body and html's height and width to 100%, and remove the margin. This stops overlay from making scroll bars:
body, html{
width:100%;
height:100%;
margin:auto;
}
Then, to make overlay appear over the image you clicked, change position:absolute; to position:fixed;:
.overlay {
width: 100%;
height:100%;
background:grey;
display:none;
position: fixed;
top:0;
text-align:center;
cursor:pointer;
}
Add a little more CSS to make it look pretty:
.overlay img{
border-radius:5px;
border:10px solid white;
box-shadow: 0 0 5px black;
}
And Bang!
JSFiddle Demo
Make sure you check out the coding in this JSFiddle
I have a black rectangle I wish to extend the full left to right horizontal viewpoint. Problem is, I have a DIV container (980px) I can't change (long story - basically restriction of the software I'm using).
style="position:fixed; left:0%; width:100%; height:300px"
This works, but I'm left with a fixed rectangle I don't want. Absolute positioning extends to a maximum of 980px (governing DIV container). Any suggestions? JS?
Any information you can provide would be extremely appreciated.
Within your stylesheet you will need to change the parent div ( the 980px div ) to have position: static
#parentDiv{
width:960px;
position:static;
}
#fullWidth{
position:absolute;
width:100%;
height:300px;
background: #000;
left:0;
}