I have been looking around the internet for a while to find a good library or way of making a mobile full width/height div
And when I click a button it swipes to the right revealing another div
with new content, and pushing the current div to the left ( or right )
The blue box is my viewport, mobile in this case
Here's a crappy illustration to show what I mean
I have tried using CSS ( with semi-success ) I can reveal another div using
.slide {
position: absolute;
width: 100%;
height: 100%;
transition: transform .5s ease-in-out;
}
#slide-options {
background: #eee;
transform: translate(100%, 0);
}
#slide-options.active {
transform: translate(0,0);
}
But it's just sliding over the 1st div, not pushing it along
Any idea's or existing libraries?
Thank you!
Related
I'm working on a to-do web app and I'm trying to achieve a visual effect wherein multiple todos appear to "share" a single background. So, imagine that a user adds a few todos. Their backgrounds appear as a part of a single gradient, with colors transitioning from top todo to bottom todo. This pen should hopefully demonstrate what I want to happen (click the first div):
Elements 'sharing' a background
HTML:
<div class="outer">
<div class="inner"></div>
<p>CLICK ME</p>
</div>
CSS:
.outer {
position: absolute;
left: 0;
top: 0;
height: 300px;
width: 200px;
background: white;
overflow: hidden;
clip: rect(auto, auto, auto, auto);
transition: transform 500ms ease-in-out;
font-size: 2rem;
}
.inner {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: linear-gradient(to right, red, orange, green, blue);
opacity: 0.5;
}
Now this already kind of works, I guess, but only if I manually animate position of the divs. Is there some way to utilize CSS transforms instead? The big problem there is that as soon as a transform is applied to outer div, the fixed child div stops being fixed, completely destroying the 'same background' illusion. you can see it in this pen:
Illusion fail
I read that it's part of the spec and that's just how it is, but thought maybe you CSS wizards here know other ways to achieve this effect, perhaps even without fixed child divs. Would really appreciate your help.
Here's an example using clip-path, but one issue is that it doesn't clip the same way as clip does, because it only clips the element itself, not child elements under it. Children elements will also get clipped, so they have to be moved to match the new clip position.
https://codepen.io/mix3d/pen/OJPjbGp
I'm building a portfolio site for myself and I made a custom cursor that follows the default one, by creating an empty div, styling it as a small circle, and making it trail behind the default cursor with Javascript. All of that works fine.
The problem is that once the cursor moves over an image, the circle is displaying under it.
HTML
<div class="cursor"></div>
<img src="https://steamuserimages-a.akamaihd.net/ugc/268338039154053677/D41BD0C4419DBF35C84CB17B2737B065504B1858/" alt="">
CSS
.cursor {
height: 15px;
width: 15px;
border: 1px solid #0b0d0f;
border-radius: 50%;
position: absolute;
transition-duration: 200ms;
transition-timing-function: ease-out;
pointer-events: none;
}
JavaScript
const cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', e => {
console.log(e);
cursor.setAttribute("style", "top: "+(e.pageY - 10)+"px; left: "+(e.pageX - 10)+"px;")
})
I would expect the custom cursor to hover over the image along with the default cursor, but instead is displays under it.
Give the hovering element a higher z-index in the CSS to make it appear in front of other elements (jsfiddle).
However, this may be a browser-specific problem—it works for me even without the z-index set.
I'm developing an cordova app with 3 "pages". The "pages" are divs with a fixed height and the with of 100%. (see div1, div2, div3 in the picture)
I'm currently using jquery show and hide functions with a slide but the performance on mobile phones is very bad. So I thought of using css, I cant get an idea of how to make is so you can swipe the current visible div to sort of snap the next div in place.
Maybe this picture wil clear my story up: picture
I hope someone can push me in the right direction css and javascript wise..
You should still use jQuery Mobile to detect swipe left/right events on each div, but instead of animating div's position, you should add/remove class for the previous/active/next DIV. Classes should look something like this:
.container {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100vh;
transition: all 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940); // this will add nice inertia effect upon switching DIVs
}
.container.previous {
transform: translateX(-100%);
}
.container.active {
transform: translateX(0%);
}
.container.next {
transform: translateX(-100%);
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I am completely new to the jquery scene, and so am having some trouble trying to figure this out. My problem is:
I am creating a website for a project, and this website is based of a square (700px by 700px) that has been divided into 4 smaller squares - all 350px by 350px.
What I want to do is have each of these smaller squares have a panel covering them, that when clicked, move away to reveal the content behind them. The two panels on the left side would slide to the left and disappear, and the two on the right would slide to the right and disappear.
If possible I would like only one panel to disappear at a time. So as one would click a new panel, the previous one would slid back into position, hiding its content again.
Any help would be greatly appreciated!
There are many ways to do the sort of thing you're interested in. CSS transitions have already been mentioned. I've included a working example but it is very basic - it should get you moving in the right direction. Please take a look at the links below - they've got a lot of great information.
If you have four elements, and the main function of the covers is just to cover, you could use :after (or :before) CSS pseudo-elements. Here's what that HTML markup could look like if your panels were li elements:
<ul>
<li id="panelOne">One</li>
<li id="panelTwo">Two</li>
<li id="panelThree">Three</li>
<li id="panelFour">Four</li>
</ul>
Since the covers are only there to hide your four panels and they're pseudo-elements, you'd style them in your CSS. You could start by styling your HTML elements:
ul {
display: block;
background: black;
width: 700px;
height: 700px;
margin: 0 auto;
}
li {
float: left;
position: relative;
background: white;
border: 1px solid black;
width: 350px;
height: 350px;
}
Then style your :after covers:
li:after {
display: block;
/*the background color is just to make the covers more visible */
background: red;
position: absolute;
top: 0;
left: 0;
width: 350px;
height: 350px;
content: "";
}
If you use jQuery to add a class (for example, ".clicked") to one panel at a time, you'd style the .clicked pseudo-elements so they move to the left or right:
li#panelOne.clicked:after, li#panelThree.clicked:after {
-webkit-transform: translateX(-350px);
-moz-transform: translateX(-350px);
-ms-transform: translateX(-350px);
-o-transform: translateX(-350px);
transform: translateX(-350px);
}
li#panelTwo.clicked:after, li#panelFour.clicked:after {
-webkit-transform: translateX(350px);
-moz-transform: translateX(350px);
-ms-transform: translateX(350px);
-o-transform: translateX(350px);
transform: translateX(350px);
}
And use jQuery to add or remove the class:
$( 'li' ).click(function(){
//first remove the class from ALL panels
$( 'li' ).removeClass( 'clicked' );
//then add to the panel that's been clicked
$(this).addClass( 'clicked' );
});
And one more step: since you want the covers to slide to the left or right, you'll need to add CSS transitions to achieve that. You'd place them in your :after pseudo-element styles:
-webkit-transition: -webkit-transform 500ms ease-out 0s;
-moz-transition: -moz-transform 500ms ease-out 0s;
-o-transition: -o-transform 500ms ease-out 0s;
transition: transform 500ms ease-out 0s;
And here's how that would all look in a jsfiddle: http://jsfiddle.net/rt9d5/10/embedded/result/
Try using the Jquery UI Accordion http://jqueryui.com/accordion
You can create multiple collapsible panels and set whether it to have one panel open at a time (or multiple if you want).
My Suggestion would be to look at this, do a little research, and if you have any more questions post a more specific question on stackoverflow.
So Im a graphic desinger and I've been asked to develop a concept for a client's new site. Its a micro-site with limited amounts of content. The idea I have come up with is to place all the sections of the site on divs and then rotate them like a wheel when a user clicks a menu link. What I need to find out is this: Is it possible to rotate entire divs containing normal content around a central pivot point using html5? The rotation needs to be animated the content contained in each rotated div needs to rotate in unison with its container div. If it is possible, how?
I've googled it and found examples of rotating stuff with CSS3 and I've seen html5 transformations but Im not sure I have seen anything this sophisticated before and I can't find any examples to work off. So Im a little concerned its not actually possible for some reason. Im also open to using something like javascript to make this happen.
You can do something like this:
HTML
<div class="container">
<div class="first">First</div>
<div class="second">Second</div>
<div class="third">Third</div>
</div>
CSS
.container {
transition: transform 1s;
transform: rotate(0);
position: relative;
}
.container>div {
position: absolute;
}
.container.second {
transform: rotate(120deg);
}
.container.third {
transform: rotate(240deg);
}
.container .first {
bottom: 0;
right: 0;
transform: rotate(120deg);
}
.container .second {
left: 0;
right: 0;
transform: rotate(240deg);
}
You can add some simple js to change the container current class.