what I would like is to make my site menu switching between panel and classic horizontal menu.My goal is to change the site menu depending on the screen size (desktop/mobile)... but it is another story!
I have the following working solution (http://jsfiddle.net/998HD/2/):
HTML
<div data-role="page">
<div data-role="header">
<h1>Title</h1>
Panel
</div>
<div id="pnl" data-role="panel" data-display="overlay">
<ul data-role="listview">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<div data-role="content">Lorem ipsum</div>
</div>
CSS
.menu.ui-panel {
position: relative;
width: 100%;
min-height: 0
}
.menu.ui-panel .ui-li {
display: inline-block;
margin: 0;
border: 0
}
JS
$('#lnkpnl').click(function() {
var menu = 1; // 0 = panel, 1 = horizontal
if (menu) $('#pnl').addClass('menu').insertAfter('.ui-header');
$('#pnl').panel('open')
})
JQuery Mobile moves #pnl panel after the header and content and this prevents me from simply apply:
.menu.ui-panel {
position: static
/*... other props ...*/
}
and avoid line 1 and 2 in javascript code.
So, I ask you. Is my solution the best? Is there a pure css solution?
Many thanks.
You are right on point. There is a way to do this with transition CSS. I included a Fiddle to show you, but it is jquery assisted. Then again, this is a very light JS call so it shouldn't toruble your application. Then again, neither is yours. So you are good either way.
-webkit-transition:all 1.0s ease-in-out;
-moz-transition:all 1.0s ease-in-out;
-o-transition:all 1.0s ease-in-out;
transition:all 1.0s ease-in-out;
Hope it helps
FIDDLE
Related
I cannot find a way to properly make it so that the window automatically scrolls down to the element that is conditionally rendered and animated to drop down (and off the screen)
this is the element in question
<CSSTransitionGroup transitionEnterTimeout={1000} transitionLeaveTimeout={1000} transitionName="menu">
{
(this.state.lowerBarClicked && dropDownablePlan) ?
<div className='lowerBar__moreInfo'>
<div className='chart__header'>Usage Based Plans</div>
<div className='chart__main'>
<Chart />
</div>
<div className='chart__callToAction'>
<p className='chart-monthlyOrder'>Your Average Montly Order number: {orderNumber}</p>
<button className='btn cta'>Upgrade</button>
<p className='chart-lowerMessage'>See a feature you want? Contact us about Custom plans <a href=''>here</a></p>
</div>
</div>
: null
}
</CSSTransitionGroup>
this is the css I have for it
.menu-enter {
max-height: 0px;
-webkit-transition: max-height 1s ease;
overflow: hidden;
}
.menu-enter.menu-enter-active {
height: auto;
max-height: 40rem;
background-color: #E8E4E4;
}
.menu-leave {
max-height: 40rem;
-webkit-transition: max-height 1s ease;
}
.menu-leave.menu-leave-active {
overflow: hidden;
max-height: 0px;
}
I am not sure if this is what you mean but you can call a simple javascript command to automatically scroll down to your element
document.querySelector(".element").scrollIntoView()
in this example the element to scroll down to has the class name = element
I just want to basically show text and hide, then next text and hide, then last text and hide and repeat. How can I do this? I've been looking at code but I'm still lost. Any help is greatly appreciated!
My Code :
<style>
#myArea {
height:250px;
width:300px;
position:relative;
}
.text {
position:absolute;
z-index:1;
bottom:20px;
left:10px;
}
</style>
<body>
<div id="myArea">
<img src="images/backgrnd.jpg" />
<div id="txt1" class="text">
<img src="images/text1.png" />
</div>
<div id="txt2" class="text">
<img src="images/text2.png" />
</div>
<div id="txt3" class="text">
<img src="images/text3.png" />
</div>
</div>
It is fairly simple to achieve the effect that you are looking for. All that is needed is for you to place the images absolutely on top of each other and then add an animation which changes the opacity of the image (or its container) accordingly.
The key parts when animating multiple elements in a loop are to
make sure that the animation of the second and subsequent elements start after all the previous elements have completed their animation and
make sure all the previous elements stay in the final state until the other elements complete their animation (otherwise they will mess up the animation).
The first part can be achieved by using progressive animation-delay on elements while the second part is achieved by setting the #keyframes accordingly. Here, since there are 3 images, animation of each of them should be completed at 33% mark itself (because during the other 66%, the other 2 will be executing their animation). The state as at 33% should be maintained till 100%.
(If you have 4 images, it should complete at 25% and so on.)
#myArea {
height: 250px;
width: 300px;
position: relative;
}
.text {
position: absolute;
z-index: 1;
bottom: 20px;
left: 10px;
opacity: 0;
animation: fade-in-out 9s ease backwards infinite 1s; /* initial delay is for image to load */
}
.text:nth-of-type(2) {
animation-delay: 4s; /* this must start after first has faded-out */
}
.text:nth-of-type(3) {
animation-delay: 7s; /* this must start after second has also faded-out */
}
#keyframes fade-in-out {
0% {
opacity: 0;
}
11%, 22% {
opacity: 1;
}
33%, 100% {
opacity: 0;
}
}
<div id="myArea">
<img src="http://lorempixel.com/300/250/abstract/2" />
<div id="txt1" class="text">
<img src="http://lorempixel.com/200/200/animals/1" />
</div>
<div id="txt2" class="text">
<img src="http://lorempixel.com/200/200/animals/2" />
</div>
<div id="txt3" class="text">
<img src="http://lorempixel.com/200/200/animals/3" />
</div>
</div>
Are you probably looking for the steps timing-function? It provides a gif-like way to animate an image set!
there is an example: https://jsfiddle.net/simurai/CGmCe/
from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function
Hope it helps!
I incorporated Bootstrap on my site to make it responsive. I also added in CSS animation to my code. However, this takes the text from being in the center of the page, to starting on the far left of the page, finishing the animation, and then shifting the text to the center.
How do I start the animation in the center itself?
Bootstrap Code:
<header id="top" class="header">
<div class="text-vertical-center">
<h1 class="typing">Hi, welcome to my website.</h1>
<h3 class="typing">Let's get started.</h3>
<br>
Let's Get Started.
</div>
</header>
CSS Code:
.css-typing
{
width: 100%;
white-space:nowrap;
overflow:hidden;
-webkit-animation: type 3s steps(50, end);
animation: type 3s steps(50, end)1;
}
#keyframes type{
from { width: 0; }
}
#-webkit-keyframes type{
from { width: 0; }
}
Any thoughts or help would be awesome.
Thanks!
I was wondering it it is possible to use a nested ":target" directive to modify elements on the page with pure CSS. I am bringing in a form text area which is absolutely positioned inside a div element (.container). When the text area appears, I want 3 things:
1) The open link to dissapear
2) The close link to appear
3) The contaner div to expand with the form element
I have been trying this by nesting the :target element inside my .container but it is not working. Is this possible?
<div class="container" id="container">
<h4>Show close</h4>
<div id="comments">
<form name="myForm">
<p>Write your comment:<br />
<textarea name="myTextarea"></textarea></p>
</form>
</div>
</div>
CSS
.container{
position:relative;
background:pink;
&:target {
transition: all 1s ease;
a#open { display: none; }
a#close {display: block;}
}
a#close { display: none; }
}
#comments {
position:absolute;
height:200px;
width:400px;
background:yellow;
left:-300%;
top:30px;
transition: all 1s ease;
}
#comments:target {
transition: all 1s ease;
left:20px;
}
JSFiddle here
I know this question has been asked before but I can't get mine working. I have a javascript array in the head of my html document which makes the images change to the next one in the array, but I can't make transitions work. I've tried using css properties and I've very briefly tried jquery but as I haven't used jquery before I don't know how to do anything with it.
I have this for javascript:
<script type="text/javascript">
image2 =new Array("images/product1_thumb.png", "images/product2_thumb.png", "images/product3_thumb.png"
, "images/product4_thumb.png")
num =0;
imgNum =image2.length;
function rotate()
{
if(document.images)
{
if(num ==imgNum)
{
num = 0;
}
}
document.getElementById('image2').src = image2[num];
num++;
setTimeout("rotate()",4000);
}
</script>
This is the html:
<section id="right">
<img src="images/product1_thumb.png" ID="image2" alt="" title="" />
</section>
And this css is what I've used to try to make the transitions:
#image2{
margin-left:100px;
position:inherit;
-moz-transition: all 2s ease-in-out 2s;
-webkit-transition: all 2s ease-in-out 2s;
transition: all 2s ease-in-out 2s; /* opacity 5s ease-in-out; */
}
#right{
padding-top:10%;
margin-left:70%;
width:30%;
background-image:url('images/watermark50.png');
background-repeat:no-repeat;
background-position:center;
height:100%;
}
#right img{
margin-left: 30%;
}
I'd be grateful for any help but if it uses jquery you'd have to start at the beginning as I have no idea how it works.