so I have this problem with jQuery .animate() function where I animate one element and it displaces all other elements associated with it.
This is the menu I am working with:
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-9 navbar">
<ul>
<li id="home_button" class="menu_button">
<i class="fa fa-home"></i>
<p>Home</p>
</li>
<li id="projects_button" class="menu_button">
<i class="fa fa-pencil"></i>
<p>Projects</p>
</li>
<li id="about_button" class="menu_button">
<i class="fa fa-balance-scale"></i>
<p>About</p>
</li>
<li id="contact_button" class="menu_button">
<i class="fa fa-user"></i>
<p>Contact</p>
</li>
</ul>
</div>
</div>
To see what I mean, I transferred my code into jsfiddle
Any help is appreciated!
This is normal HTML behaviour. Browsers "flow" the layouts, so if you make one element bigger, it reflows the rest of the document and displaces elements where it needs to.
If you want an element to move from one position to another, you have to take it out of the normal layout. You can do this by setting the position CSS attribute of the element to something other than relative. For example position: absolute makes the element positioned relative to the whole document, position: fixed makes the element positioned relative to the window's border, etc.
Additionally, you can use CSS transforms which also don't affect layout. These allow you to do a combination of translation, rotation and scaling to an element without displacing it's nearby siblings. This is ideal for, say, a slight size increase on mouse over or to transition items in from off screen.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
Either way, I strongly recommend using CSS animations and transitions, rather than jQuery animate. You can then use jQuery to apply classes to enable and disable animations.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
https://developer.mozilla.org/en/docs/Web/CSS/#keyframes
$('.animation-test').on('click', function() {
$(this).toggleClass('animation-test--enabled');
});
* {
font-family: arial, helvetica, san-serif;
}
.transition-test {
padding: 20px;
background: cornflowerblue;
transition: transform 200ms ease-in-out;
}
.transition-test:hover {
transform: scale(1.1);
}
.animation-test {
padding: 20px;
background: salmon;
}
.animation-test--enabled {
animation: identifier 1s infinite;
}
#keyframes identifier {
0% { transform: translateX(0); }
33% { transform: translateX(20px); }
66% { transform: translateX(-20px); }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="transition-test">Hover over me to see a transition on a transform scale (no Javascript required)</div>
<br/>
<div class="animation-test">Click me to toggle an animation (Javscript applies and removes the class)</div>
In addition to this breaking your layout, you'd also have to consider a way to stop and reverse the animation midway or else it'll keep going and potentially repeat if the user comes back to it. Try moving your mouse back and forth across all the buttons really fast on your fiddle to see what I mean. It's entertaining, but not the effect you want I think.
Fortunately not everything needs to be solved with javascript. CSS transitions are easy to understand and do all the hard work for you. Combine it with psuedo selectors and you'll get the effect your looking for.
CSS Transitions:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
Psuedo Classes:
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
.menu_button{
transition: .250s width;
}
.menu_button:hover{
width : 100px;
}
.menu_button{
transition: .250s width;
}
.menu_button:hover{
width : 100px;
}
/** Note so important **/
ul {
list-style: none;
}
.container-fluid {
margin: 0;
padding: 0;
}
.photo-placeholder {
height: 350px;
background-color: green;
}
/* Navbar menu */
.menu_button {
width: 35px;
height: 35px;
display: inline-block;
margin-top: 15px;
margin-right: 10px;
border-radius: 20px;
}
#home_button {
background-color: red;
}
#home_button i {
margin-left: 0.6em;
margin-top: 0.5em;
}
#projects_button {
background-color: blue;
}
#projects_button i {
margin-top: 0.5em;
margin-left: 0.6em;
}
#about_button {
background-color: yellow;
}
#about_button i {
margin-top: 0.55em;
margin-left: 0.55em;
}
#contact_button {
background-color: green;
}
#contact_button i {
margin-top: 0.5em;
margin-left: 0.75em;
}
stretch {
width: 80px;
}
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-9 navbar">
<ul>
<li id="home_button" class="menu_button">
<i class="fa fa-home"></i>
<p>Home</p>
</li>
<li id="projects_button" class="menu_button">
<i class="fa fa-pencil"></i>
<p>Projects</p>
</li>
<li id="about_button" class="menu_button">
<i class="fa fa-balance-scale"></i>
<p>About</p>
</li>
<li id="contact_button" class="menu_button">
<i class="fa fa-user"></i>
<p>Contact</p>
</li>
</ul>
</div>
</div>
</div>
</body>
Related
I'm new to coding, and I do not understand what is wrong with my code. The menu bar is for the media. I have it set to transition when a user clicks on it, and it works when they open it; however, when it closes, the transition doesn't work. I tried troubleshooting it; however, the transitions work if I move the line of code after the link list. I'm sure it's something silly, and I was hoping someone could take a look and provide some guidance.
The transition works for line 32, but I want it on line 25, however, only closes it without the transition, help please.
Menu Bar
HTML Code:
<!-- Main start to the webpage. Nav Bar and Business Name-->
<body>
<section class="header">
<nav>
<img src="img/light_logo.png"
<div class="nav-links" id="navLinks">
(LINE 25) <!-- <i class="fa-solid fa-xmark" onclick="hideMenu()"></i> -->
<ul>
<li>Home</li>
<li>Products</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
(LINE 32) <i class="fa-solid fa-xmark" onclick="hideMenu()"></i>
</div>
<i class="fa-solid fa-bars" onclick="showMenu()"></i>
</nav>
Javascript code:
<!-- JavaScript for Toggle Menu -->
<script>
var navLinks = document.getElementById("navLinks");
function showMenu(){
navLinks.style.right = "0";
}
function hideMenu(){
navLinks.style.right = "-200px";
}
</script>
My CSS Code:
#media(max-width: 700px){
.text-box h1{
font-size: 20px;}
.nav-links ul li{
display: block;
}
.nav-links{
position: absolute;
background: #6e6d6e;
height: 100vh;
width: 200px;
top: 0;
right: -200px;
text-align: left;
z-index: 2;
transition: 1s;
}
nav .fa-solid {
display: block;
color: #fff;
margin: 10px;
font-size: 22px;
cursor: pointer;
}
.nav-links ul{
padding: 30px;
}
}
I need to make a chevron rotate 180deg when clicking on its parent element to indicate whether a section is expanded or collapsed to an existing (non-bootstrap) accordion.
Currently all sections are defaulted to display expanded (green). When the .BlackTitleExp_top_style div is clicked the header section closes and the divs bg-color turns a light green to indicate the section is collapsed.
Ideally, when the header turns grey, the chevron should also rotate 180deg so that is is pointing down indicating the section is closed.
Ideally I'd like to accomplish by clicking on BlackTitleExp_top_style parent element but I'm not married to this idea. Any suggestions would be greatly appreciated.
$(document).ready(function() {
var BTE_top = $(".BlackTitleExp_top_style");
var BTE_top_BG = "BlackTitleExp_top_style_BG";
$(BTE_top).click(function() {
var el = $(this);
el.not(el).removeClass(BTE_top_BG);
el.toggleClass(BTE_top_BG);
});
});
.BlackTitleExp_top_style {
cursor: pointer;
background-color: rgba(92, 132, 92, 0.35);
border-radius: 5px;
position: relative;
padding: 15px;
margin-bottom: 10px;
}
.BlackTitleExp_top_style_BG {
transition: all 300ms ease;
cursor: pointer;
background-color: rgba(128, 128, 128, 0.35);
}
.chevron {
position: absolute;
right: 20px;
}
.rotate {
transform: rotate(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<!-- HTML -->
<div class="wrapper">
<div class="BlackTitleExp_top_style">
simulated open section
<i class="fas fa-chevron-up chevron"></i>
</div>
<div class="BlackTitleExp_top_style">
simulated open section
<i class="fas fa-chevron-up chevron"></i>
</div>
<div class="BlackTitleExp_top_style">
simulated open section
<i class="fas fa-chevron-up chevron"></i>
</div>
<div class="BlackTitleExp_top_style">
simulated open section
<i class="fas fa-chevron-up chevron"></i>
</div>
</div>
Define the states that an element(s) can exist in (ex. rotated 180o/0o, expanded/collapsed,
on/off etc) then declare the condition(s) (ex. if (fart) { smell.it }) or event(s) (ex. click, hover, etc) that can occur to invoke a behavior(s) (ex. rotate, expand, do your taxes, etc). In the demo below the adding/removing of a class (.fa-rotate-180) sets the styles on each <i>.
The class .fa-rotate-180 is a Font Awesome class that will rotate any of its icons 180o when applied. CSS animation is added as well via transform: rotate(), transition, and #keyframes
Details commented in demo
// Start with all content hidden
$('.content').hide();
// When header.title is clicked...
$('.title').on('click', function(event) {
// Reference the p.content that follows the clicked header✱
const clickedContent = $(this).next('.content');
// Reference the i.chevron that is nested within clicked header
const clickedChevron = $(this).find('.chevron');
/* Slide up all p.content with the exception of the sibling p.content that follows
the clicked header✱ */
$('.content').not(clickedContent).slideUp('fast');
// Expand/Collapse the p.content of the clicked header✱
clickedContent.slideToggle('fast');
/* Remove .fa-rotate-180 class from all i.chevron with the exception of the
i.chevron nested within clicked header */
$('.chevron').not(clickedChevron).removeClass('fa-rotate-180');
/* Add/Remove .fa-rotate-180 class to/from the i.chevron nested within the
clicked header */
clickedChevron.toggleClass('fa-rotate-180');
});
/* ✱ The expand/collapse aspect of code is not required by OP question and
is only added to provide a complete functional example. */
:root {
font: 16px/1.2 Arial;
}
.title {
font-size: 1.3rem;
cursor: pointer
}
.chevron {
/* block or inline-block for smoother animation */
display: inline-block;
/* Animation when going back to collapsed state */
transform: rotate(0deg);
transition: 0.3s;
}
.fa-rotate-180 {
/* This declares the keyframes used for animation */
animation: spin;
transition: 0.4s
}
/* An #rule used to breakdown animation into steps */
#keyframes spin {
100% {
transform: rotate(180deg);
}
}
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css' rel='stylesheet'>
<aside class='read-more'>
<header class='title'>
<i class="fas fa-chevron-up chevron"></i> Chevron rotates 180<sup>o</sup>...
</header>
<p class='content'>...when header is clicked</p>
</aside>
<aside class='read-more'>
<header class='title'>
<i class="fas fa-chevron-up chevron"></i> Chevron rotates 180<sup>o</sup>...
</header>
<p class='content'>...when header is clicked</p>
</aside>
<aside class='read-more'>
<header class='title'>
<i class="fas fa-chevron-up chevron"></i> Chevron rotates 180<sup>o</sup>...
</header>
<p class='content'>...when header is clicked</p>
</aside>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Try this
BTE_top.click(function() {
var el = $(this);
var icon = el.find('i');
if(!icon.hasClass('rotate')){
icon.addClass('rotate');
}
el.not(el).removeClass(BTE_top_BG);
el.toggleClass(BTE_top_BG);
});
You are very close. Just adding this little bit of CSS will get you what you want:
.chevron {
position: absolute;
right: 20px;
transition: all 300ms ease;
}
.BlackTitleExp_top_style_BG .chevron {
transform: rotate(180deg);
}
Now when the BlackTitleExp_top_style_BG is added, the chevrons transform property is updated. With a transition now defined on chevron the rest of your code works as expected.
$(document).ready(function() {
var BTE_top = $(".BlackTitleExp_top_style");
var BTE_top_BG = "BlackTitleExp_top_style_BG";
$(BTE_top).click(function() {
var el = $(this);
el.not(el).removeClass(BTE_top_BG);
el.toggleClass(BTE_top_BG);
});
});
.BlackTitleExp_top_style {
cursor: pointer;
background-color: rgba(92, 132, 92, 0.35);
border-radius: 5px;
position: relative;
padding: 15px;
margin-bottom: 10px;
}
.BlackTitleExp_top_style_BG {
transition: all 300ms ease;
cursor: pointer;
background-color: rgba(128, 128, 128, 0.35);
}
.chevron {
position: absolute;
right: 20px;
transition: all 300ms ease;
}
.BlackTitleExp_top_style_BG .chevron {
transform: rotate(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<!-- HTML -->
<div class="wrapper">
<div class="BlackTitleExp_top_style">
simulated open section
<i class="fas fa-chevron-up chevron"></i>
</div>
<div class="BlackTitleExp_top_style">
simulated open section
<i class="fas fa-chevron-up chevron"></i>
</div>
<div class="BlackTitleExp_top_style">
simulated open section
<i class="fas fa-chevron-up chevron"></i>
</div>
<div class="BlackTitleExp_top_style">
simulated open section
<i class="fas fa-chevron-up chevron"></i>
</div>
</div>
I'm making a fixed sidebar but it won't collapse.. I really don't know how to do it.
I have searched on the internet .. still couldn't find any results.
here is my sidebar.html
<div class="container-fluid" style="background-color:#19334d">
<div class="sidebar" id="sidebar">
<div class="pt-5 text-center pb-2 ">
<a href="../index.php" class="logo-normal pr-3">
<img src='../assets/img/favicon.ico' width="50px">
</a>
<a href="../index.php" class="logo-normal">
Fitness Addict
</a>
</div>
<hr style="border-color:white; width:90%" align=center>
<ul class="nav pl-4">
<li >
<a href="../home/myhome.php">
<i class="fa fa-home icon pr-4"></i>
My Home
</a>
</li>
.
.
.
</ul>
</div>
The css:
.sidebar{
height: calc(100vh - 90px);
width: 230px;
position: fixed;
top: 0;
left: 0;
z-index: 1;
background-size: cover;
background-position: center center;
display: block;
background: #408000;
box-shadow: 0px 0px 45px 0px rgba(0, 0, 0, 0.6);
margin-top: 80px;
margin-left: 20px;
border-radius: 5px;
}
.sidebar .nav {
margin-top: 20px;
display: block;
}
I have tried to do it through JavaScript but I don't know how to make it.
anyone can help?
Your JavaScript might look like this:
/* Set the width of the sidebar to 250px and the left margin of the page content to 250px */
function openNav()
{
document.getElementById("sidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
function closeNav()
{
document.getElementById("sidebar").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
And then you'd need to add this JS as source on the HTML using relevant code. Via W3Schools tutorial on creating a collapsible sidebar.
You might also want to have a look here at the awesome responsive sidebar tutorial on W3Schools.
collapsed:
max-width: 0;
not collapsed:
max-width: auto;
you can add property to sidebar
tranform:translateX(-100%);
when sidebar is active add class active using js and add css
sidebar.active{
tranform:translateX(0%);
}
to the parent of side bar add property
.parent{
overflow-x:hidden;
}
not collapsed:
.sidebar {
transition: left 0.3s ease-out;
}
collapsed via adding class 'hide' :
.sidebar.hide {
left: -295px;
}
-295px because width is 230px, margin-left is 20px and box-shadow has blur 45px
You could use css and the transition property.
in .css:
.sidebar {
// your current code
left: -210px; // example
transition: left 2s ease;
}
.sidebar:hover{
left: 0px;
}
This will let your div slide in over 2 seconds and disapear when not hoovered anymore.
See an example here.
Try Bootstrap, its made for creating responsive websites for all devices with little hassle, and you can find lots of other cool options! check out their documentation
You can use media queries to detect screen size, and then hide the sidebar at smaller sizes:
.sidebar{
height: calc(100vh - 90px);
width: 230px;
position: fixed;
top: 0;
left: 0;
z-index: 1;
background-size: cover;
background-position: center center;
display: block;
background: #408000;
box-shadow: 0px 0px 45px 0px rgba(0, 0, 0, 0.6);
margin-top: 80px;
margin-left: 20px;
border-radius: 5px;
}
.sidebar .nav {
margin-top: 20px;
display: block;
}
#media (max-width: 400px) {
.sidebar {
display: none;
}
}
<div class="container-fluid" style="background-color:#19334d">
<div class="sidebar" id="sidebar">
<div class="pt-5 text-center pb-2 ">
<a href="../index.php" class="logo-normal pr-3">
<img src='../assets/img/favicon.ico' width="50px">
</a>
<a href="../index.php" class="logo-normal">
Fitness Addict
</a>
</div>
<hr style="border-color:white; width:90%" align=center>
<ul class="nav pl-4">
<li >
<a href="../home/myhome.php">
<i class="fa fa-home icon pr-4"></i>
My Home
</a>
</li>
</ul>
</div>
I am writing a bootstrap site, and want to make a sort of pop out menu from the right of the screen. This menu needs to be hidden' and when a button "Menu" is clicked it pops out of screen right, and covers whatever is on screen right. it does not push the content out of the way. Kind of like the windows 8 menu when you slide your finger from screen right.
I've thought of making a dropdown menu, since it behaves almost like I want, except for it's position. But I need to change the dropdown behaviour, So that instead of the dropdown menu popping out attached to the dropdown button, it pops out of screen right, but I can't find out how to do this.
<head>
...
<link href ="CSS/Bootstrap.min.css" rel ="stylesheet"/>
</head>
<div class="col-xs-3">
<!--some side content-->
</div>
<div class="col-xs-9">
<!--some side content-->
</div>
<div class="col-xs-12">
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
<li class="dropup">
<a class="dropdown-toggle" data-toggle="dropdown">Menu
<ul> class="dropdown-menu">
<li>
</li>
<li>
</li>
</ul>
</a>
</li>
</div>
</nav>
</div>
<script src="JS/jquery-1.11.3.min.js"></script>
<script src="JS/bootstrap.min.js"></script>
I have three folders in my project:
Css with bootstrap css files(bootstrap-theme, bootstrap-theme min, bootstrap, bootstrap min)
Fonts
JS with bootstrap.js and bootstrap.min.js
Please show me how to do this.
If you know of a different way of making the menu I want in bootstrap I'd love to hear it as well.
Here is a simple example to get you going:
jsFiddle Demo
Note that an id was added to the a tag that opens the menu, to make it easy for jQuery to capture the click event on that element.
In the jQuery, we are using a variable mnuOut to keep track of whether the menu is IN or OUT (visible or hidden).
Also, we use the .animate() method to animate the slide out from the right. This works by changing the css attribute right:
FROM right:-80px (slid 80px beyond the right side of the screen)
TO right:0 where the right-most edge of the myMenu DIV is flush against the right side of the screen.
HTML:
<div id="myMenu">
<div id="item1" class="submenu">Item 1</div>
<div id="item2" class="submenu">Item 2</div>
<div id="item3" class="submenu">Item 3</div>
</div>
<a id="menuTrigger" class="dropdown-toggle" data-toggle="dropdown">Menu
CSS:
#myMenu{position:fixed;top:20px;right:-80px;width:80px;height:300px;background:palegreen;}
.submenu{width:100%;height:20px;padding:20px 5px;border:1px solid green;}
#menuTrigger:hover{cursor:pointer;}
jQuery:
mnuOut=false;
$('#menuTrigger').click(function(){
if (mnuOut){
//Menu is visible, so HIDE menu
$('#myMenu').animate({
right: '-80px'
},800);
mnuOut = false;
}else{
//Menu is hidden, so SHOW menu
$('#myMenu').animate({
right: 0
},800);
mnuOut = true;
}
})
If you want your menu to cover the content make sure you add
position: absolute;
Or
position: fixed;
Then after that give it
right: 500px;
But instead of 500px use the width of your menu
And to make it popout just override the
right: 0;
Making it 0 will make it stick to the right back to its original position
What you want requires a little more than just a couple of lines of css but I think this will give you a good start. Just style according to your theme:
HTML
<div id="oneout">
<span class="onetitle">
menu
</span>
<div id="oneout_inner">
<center>
menu info here
<br>
</center>
</div>
</div>
CSS
#oneout {
z-index: 1000;
position: fixed;
top: 64px;
right: 1px;
width: 18px;
padding: 40px 0;
text-align: center;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
#oneout_inner {
top: 60px;
right: -250px;
position: fixed;
width: 230px;
padding: 10px;
background: #FFFFFF;
height: auto;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
text-align: left;
border:1px solid #333;
}
#oneout:hover {
z-index: 1000;
right: 250px;
}
#oneout:hover #oneout_inner {
z-index: 1000;
right: 0px;
}
.onetitle {
display: block;
writing-mode: lr-tb;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
position: absolute;
right: -11px;
top: 3px;
font-family: Lucida Sans;
font-size: 16px;
font-weight: normal;
text-transform: uppercase;
letter-spacing: -1px;
}
Here is a working DEMO
I'm working on my custom home page and I'd like to make a transition of one element to another.
Here's my HTML code:
<div id="index-features">
<ul>
<li>
<h5 id="feature-1" class="feature-title">Instant access</h5>
<span id="feature-1-description" class="feature-description">After purchasing a style, there will be no waiting. Your account will be directly promoted in the "Customers" group and you will unlock access to all the features of the forum.</span>
</li>
<li>
<h5 id="feature-2" class="feature-title">Compatibility with all browsers</h5>
<span id="feature-2-description" class="feature-description">The styles are tested on all browsers to analyze any bugs and if we find, we correct them.</span>
</li>
<li>
<h5 id="feature-3" class="feature-title">Modern techniques</h5>
<span id="feature-3-description" class="feature-description">We use modern techniques (CSS3 gradients, etc.) to stand out from others.</span>
</li>
<li>
<h5 id="feature-4" class="feature-title">Compatibility with the default XenForo products</h5>
<span id="feature-4-description" class="feature-description">The styles are worked not only for the forum software, but also for the default XenForo products (Media Gallery and Resource Manager).</span>
</li>
<li>
<h5 id="feature-5" class="feature-title">Optional copyright removal</h5>
<span id="feature-5-description" class="feature-description">By paying more for a style, you can remove the copyright ("Style by XenDesignFocus") of the style.</span>
</li>
</ul>
<ul>
<li>
<h5 id="feature-6" class="feature-title">Compatibility with any resolution</h5>
<span id="feature-6-description" class="feature-description">The styles are designed to be compatible on any resolution. They are responsive, so they will fit on tablet and mobile.</span>
</li>
<li>
<h5 id="feature-7" class="feature-title">High quality support</h5>
<span id="feature-7-description" class="feature-description">If you need help about a purchased style here, ask in the support forum so that we can fix your problem very quickly.</span>
</li>
<li>
<h5 id="feature-8" class="feature-title">Custom framework</h5>
<span id="feature-8-description" class="feature-description">All styles are based on a custom framework for features such as the ability to change the logo image with a HTML logo text, make the appearance of the avatars in rounded, put a custom node icon for each forum, etc.</span>
</li>
<li>
<h5 id="feature-9" class="feature-title">Extra features</h5>
<span id="feature-9-description" class="feature-description">In addition to the custom framework, some styles have custom features such as for example the possibility to enable the fixed header option, etc.</span>
</li>
<li>
<h5 id="feature-10" class="feature-title">Test title</h5>
<span id="feature-10-description" class="feature-description">Test</span>
</li>
</ul>
</div>
CSS:
#index-features
{
position: relative;
margin-top: 15px;
text-align: center;
}
#index-features li
{
border-bottom: #CCCCCC 1px solid;
margin: 0 -20px 20px -20px;
padding: 0 20px; 0 20px;
}
#index-features ul:last-child li:last-child
{
border-bottom: none;
}
.feature-title
{
display: inline-block;
font-weight: bold;
}
.feature-title:before
{
content: "";
float: left;
background: url("../images/index-features-sprite.png") no-repeat;
width: 32px;
height: 32px;
margin-right: 5px;
}
.feature-description
{
display: block;
margin: 0 0 20px 37px;
}
#feature-1:before
{
background-position: 0 0;
}
#feature-2:before
{
background-position: -32px 0;
}
#feature-3:before
{
background-position: -64px 0;
}
#feature-4:before
{
background-position: 0 -32px;
}
#feature-5:before
{
background-position: -32px -32px;
}
#feature-6:before
{
background-position: 0 -64px;
}
#feature-7:before
{
background-position: -32px -64px;
}
#feature-8:before
{
background-position: -64px -32px;
}
#feature-9:before
{
background-position: -64px -64px;
}
As you can see, I've two ul tag and what I want is to do a transition of the first ul to the other ul: http://prntscr.com/7ftax4 and the second ul: http://prntscr.com/7ftba6
The idea would be that the first ul is displayed and after 10 seconds, second ul passes over the first ul.
How can I do it with JavaScript or CSS please?
Here is a piece of jQuery which will successively add an active class over the <ul> elements. Then using CSS the <ul> elements can be hidden and shown when the .active class is applied
$(function(){
$('#index-features ul').first().addClass('active');
setInterval(loop,10000);
function loop(){
var $active=$('ul.active');
var $next=$active.nextAll('ul').first();
if($next.length===0)$next=$active.prevAll('ul').last();
$active.removeClass('active')
$next.addClass('active');
}
});
#index-features
{
position: relative;
margin-top: 15px;
text-align: center;
}
#index-features li
{
border-bottom: #CCCCCC 1px solid;
margin: 0 -20px 20px -20px;
padding: 0 20px; 0 20px;
}
#index-features ul:last-child li:last-child
{
border-bottom: none;
}
.feature-title
{
display: inline-block;
font-weight: bold;
}
.feature-title:before
{
content: "";
float: left;
background: url("../images/index-features-sprite.png") no-repeat;
width: 32px;
height: 32px;
margin-right: 5px;
}
.feature-description
{
display: block;
margin: 0 0 20px 37px;
}
#feature-1:before
{
background-position: 0 0;
}
#feature-2:before
{
background-position: -32px 0;
}
#feature-3:before
{
background-position: -64px 0;
}
#feature-4:before
{
background-position: 0 -32px;
}
#feature-5:before
{
background-position: -32px -32px;
}
#feature-6:before
{
background-position: 0 -64px;
}
#feature-7:before
{
background-position: -32px -64px;
}
#feature-8:before
{
background-position: -64px -32px;
}
#feature-9:before
{
background-position: -64px -64px;
}
#index-features ul {
position: absolute;
top: 0;
opacity: 0;
transition: opacity 0.5s;
}
#index-features ul.active {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="index-features">
<ul>
<li>
<h5 id="feature-1" class="feature-title">Instant access</h5>
<span id="feature-1-description" class="feature-description">After purchasing a style, there will be no waiting. Your account will be directly promoted in the "Customers" group and you will unlock access to all the features of the forum.</span>
</li>
<li>
<h5 id="feature-2" class="feature-title">Compatibility with all browsers</h5>
<span id="feature-2-description" class="feature-description">The styles are tested on all browsers to analyze any bugs and if we find, we correct them.</span>
</li>
<li>
<h5 id="feature-3" class="feature-title">Modern techniques</h5>
<span id="feature-3-description" class="feature-description">We use modern techniques (CSS3 gradients, etc.) to stand out from others.</span>
</li>
<li>
<h5 id="feature-4" class="feature-title">Compatibility with the default XenForo products</h5>
<span id="feature-4-description" class="feature-description">The styles are worked not only for the forum software, but also for the default XenForo products (Media Gallery and Resource Manager).</span>
</li>
<li>
<h5 id="feature-5" class="feature-title">Optional copyright removal</h5>
<span id="feature-5-description" class="feature-description">By paying more for a style, you can remove the copyright ("Style by XenDesignFocus") of the style.</span>
</li>
</ul>
<ul>
<li>
<h5 id="feature-6" class="feature-title">Compatibility with any resolution</h5>
<span id="feature-6-description" class="feature-description">The styles are designed to be compatible on any resolution. They are responsive, so they will fit on tablet and mobile.</span>
</li>
<li>
<h5 id="feature-7" class="feature-title">High quality support</h5>
<span id="feature-7-description" class="feature-description">If you need help about a purchased style here, ask in the support forum so that we can fix your problem very quickly.</span>
</li>
<li>
<h5 id="feature-8" class="feature-title">Custom framework</h5>
<span id="feature-8-description" class="feature-description">All styles are based on a custom framework for features such as the ability to change the logo image with a HTML logo text, make the appearance of the avatars in rounded, put a custom node icon for each forum, etc.</span>
</li>
<li>
<h5 id="feature-9" class="feature-title">Extra features</h5>
<span id="feature-9-description" class="feature-description">In addition to the custom framework, some styles have custom features such as for example the possibility to enable the fixed header option, etc.</span>
</li>
<li>
<h5 id="feature-10" class="feature-title">Test title</h5>
<span id="feature-10-description" class="feature-description">Test</span>
</li>
</ul>
</div>
This can be done with pure CSS, but you need animation and animation delay. I have made a fiddle where one div will be covered by another div after 10 seconds so be patient: http://jsfiddle.net/Lcek5s21/
#number1, #number2 {
height:100px;
width: 100px;
}
#number1 {
background-color:red;
}
#number2 {
background-color:green;
-webkit-animation: mymove 3s infinite;/* Chrome, Safari, Opera */
-webkit-animation-delay: 10s;/* Chrome, Safari, Opera */
animation: mymove 3s infinite;
animation-delay: 10s;
position:relative;
opacity:0;
}
#-webkit-keyframes mymove {
0% {
top: 0px;
opacity: 0;
}
100% {
top: -100px;
opacity: 1;
}
}
/* Standard syntax */
#keyframes mymove {
0% {
top: 0px;
opacity: 0;
}
100% {
top: -100px;
opacity: 1;
}
}