I want to create some animations by using CSS3 transitions.
Imagine the following UL/LI element:
<ul>
<li class="green" id="green" style="display: none;">Contents 1</li>
<li class="red" id="red" style="display: none;">Contents 2</li>
<li class="yellow" id="yellow" style="display: none;">Contents 3</li>
</ul>
It's important to know that those elements are positioned horizontally next to eachother (display: inline-block).
Now, when I click on a button, I show those elements, that isn't an issue.
This is done with the following HTML code:
Make contents 1 visible
Make contents 2 visible<br/>
Make contents 3 visible
When I want to put an animation on it, I can do it by adding a certain class to the element and the CSS would like this:
.animate { transition: all linear 5s; opacity: 1; display: inline-block; }
But now, let's mark the LI elements as absolute, so they are all displayed at the same location.
What I would like to have now as an animation is the following:
When I enabled item 2 it just fades in.
When I then enable item 1, it fades in, and at the same time, item 2 should start moving to the right until item 1 has taken up all the required space it needs.
But, to make it difficult, neither of the items has a fixed with, because the content of the UL LI elements is dynamiccly.
Here's a fiddle to better understand it:
http://jsfiddle.net/dw4Lz8qe/
So, I would like to fade an item is, but if there's already an item visible, the visible item(s) should start moving to the right until the required space for the fading in element is fully taken.
So, I do hope that this question was clear.
Kind regards,
Animating font-size may solve your problem:
ul li {
display: inline-block;
opacity: 0;
font-size: 0px;
transition: all linear 0.5s;
}
.green {background-color: green;}
.red {background-color: red;}
.yellow {background-color: yellow;}
.animate {
opacity: 1;
font-size: 16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="$('#green').toggleClass('animate') ">Toggle contents 1</button>
<button onclick="$('#red').toggleClass('animate') ">Toggle contents 2</button>
<button onclick="$('#yellow').toggleClass('animate')">Toggle contents 3</button>
<ul class="padding: 0px; margin: 0px;">
<li class="green" id="green">Contents 1</li>
<li class="red" id="red">Contents 2</li>
<li class="yellow" id="yellow">Contents 3</li>
</ul>
As long as your <li> can have a fixed with, it works with css. Check your updated fiddle - you might want to use that to dive deeper into the matter. Problem is, you cannot transition between width: 0 and width: autoas this is not supported by any browser I know of.
http://jsfiddle.net/dw4Lz8qe/1/
Related
I want to hide the button ONLY if a specific div (.variable-item-3) has the class "selected".
The class "selected" is added when the li is clicked.
if($('.variable-item-3').hasClass('selected')) {
$('.button').hide();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="variable-item-1">Option 1</li>
<li class="variable-item-2">Option 2</li>
<li class="variable-item-3 selected">Option 3</li>
</ul>
<button type="submit" class="button">Add to cart</button>
You need to perform the test after you change the selected class. You're just running it once when the page is loaded, it won't automatically run again when the class changes.
You can use the .toggle() function with a boolean argument to make the visibility depend on a test.
$("li").click(function() {
$("li").removeClass("selected");
$(this).addClass("selected");
$(".button").toggle(!$('.variable-item-3').hasClass('selected'));
});
li.selected {
background-color: yellow;
}
.button {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="variable-item-1">Option 1</li>
<li class="variable-item-2">Option 2</li>
<li class="variable-item-3 selected">Option 3</li>
</ul>
<button type="submit" class="button">Add to cart</button>
Since you are already using javascript to add the .selected class, it's probably easier to use the javascript solutions suggested in the other answers. However, if you prefer using CSS (I personally prefer using CSS to Javascript whenever possible) and if the div you care about comes before the button you care about then you can actually just use CSS.
.variable-item-3.selected ~ .button {
display: none;
}
This assumes that .button and .selected are siblings. It gets more complicated if the two aren't siblings but it's still possible as long as an ancestor of .button is a sibling of .selected. In that case it would look something like this:
.variable-item-3.selected ~ div .button {
display: none;
}
If the HTML isn't structured so that either of these will work, then you'll need to use one of the other solutions that does it with javascript.
I'm using jquery-ui tabs to create a page with a menu. I decided to have a graphic like below for my website
But ends up to this:
As you can see I can not fulfill my wishes. There are something that I can not modify on jquery-ui, at least I don't know how to resolve it. Because styling applies to all materials I could not change first and last ul>li. I explicit it in below picture:
I added my script to jsfiddle for showing what I have done.
http://jsfiddle.net/fad6d85o/
Now My two certain questions are listed below:
1- how to apply different css to first and last ul>li?
2- How can I define for example width:25% for ul>li>a links? I want to define container width:800px and then set width: 100/n % for ul>li>a links.
.ui-widget-content a {
color: #333333;
padding: 60px;
line-height: 4.3em;
}
I have done above changes but it's not nice when a string is long and another one is short. it would not be as size as each other.
add this to your css:-
.ui-tabs-nav li:last-child
{
border-radius:4px 0px 0px 4px;
}
.ui-tabs-nav li:first-child
{
border-radius:0px 4px 4px 0px;
}
Demo
Please Check the fiddle
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tabs-1">
<p>Content for Tab 1</p>
</div>
<div id="tabs-2">
<p>Content for Tab 2</p>
</div>
<div id="tabs-3">
<p>Content for Tab 3</p>
</div>
</div>
I guess this is what you are looking for as far as i understood your question.
Please mark me correct if i am correct or if some more issues are there i am ready to help out. Cheers......
This is my pen: http://codepen.io/anon/pen/IszKj
What I want to do is how it so when I click on either any status or any date I open up a hidden div which gives a list of options.
My question is, how do I approach this in the best way?
Do I have two different divs and then open the one which is relevant to the list item which was clicked:
<div id="status" style="display: hidden">Option 1 Option 2</div>
<div id="date" style="display: hidden">Option 1 Option 2</div>
Do I have one div and only show the content inside it which is relevant to that button?
<div style="hidden">
<span id="status">...</span>
<span id="date">...</span>
</div>
In addition to this, should I be using toggle or the traditional open / close function.
It would be nice for it to be degradable if JS is disabled.
Created a Fiddle for you:
http://jsfiddle.net/e4mQD/1/
HTML:
<div style="display: block;
height: 40px;">
<ul id="filter">
<li>
<span>Any status▾</span>
<ul class="options">
<li>Option1</li>
<li>Option2</li>
</ul>
</li>
<li>
<span>Any date▾</span>
<ul class="options">
<li>OptionA</li>
<li>OptionB</li>
</ul>
</li>
</ul>
CSS:
#filter, .options {
list-style-type: none;
}
.options {
display:none;
}
.options li {
cursor: pointer;
}
JavaScript:
$('#filter li').click(function(){
$(this).find('.options').toggle();
});
display:hidden
is not valid css rule. You need to use display:none
My question is, how do I approach this in the best way?
In your particular use-case, it is better that you use different blocks for each of those options.
In fact, as #mh-itc pointed out, it is better if you use nested list i.e. ul instead of div inside those lis.
Also, you may use a instead of span.
It would be nice for it to be degradable if JS is disabled.
This can be achieved by deferring the display:none; until the JavaScript is loaded and run.
Demo: http://jsfiddle.net/abhitalks/928Dj/
Markup:
<div>
<ul id="filter">
<li>
Any status ▾
<ul class="opt">
<li><label><input type="checkbox" />Status 1</label></li>
<li><label><input type="checkbox" />Status 2</label></li>
</ul>
</li>
<li>
Any date ▾
<ul class="opt">
<li><label><input type="checkbox" />Date 1</label></li>
<li><label><input type="checkbox" />Date 2</label></li>
</ul>
</li>
</ul>
</div>
CSS:
ul {
margin: 0; padding: 0;
list-style: none;
}
#filter {
display: inline-block;
}
#filter > li {
display: inline-block;
margin-bottom: 12px;
padding-right: 12px;
vertical-align: top;
}
ul.opt.hidden {
display: none;
}
jQuery Code:
// comment out to see how it degrades without javascript
$("ul.opt").addClass("hidden");
$('#filter > li > a').on("click", function(e) {
$(this).next('ul').toggle();
});
Note: In the demo, un-comment the JavaScript code to see how it will behave when JavaScript is available. And comment out to see how it degrades when JavaScript isn't available.
If you want to keep accessibility in mind change the hidden status when loading the site with javascript, if you do that user that have add-ons like NoScript active get to see every option without loosing functionality.
People who use NoScript tend to dislike sites that force them to deactivate NS to use it properly.
For your solution I suggest to use two separate divs, with this you have the option to show both boxes at the same time and have a styled version that makes clear, that these are separate.
Add a class like "optionbox" to these and throw your css rules in there instead of making a rule with #date, #status
<div style="border-radius: 10px; border: 2px solid #a1a1a1; padding: 10px 20px; width: 94%;">
<ul>
<li>Course details in different countries
<ul>
<li>India</li>
<li>Australia</li>
<li>United Kingdom</li>
<li>China</li>
<li>England</li>
</ul>
</li>
</ul>
</div>
I wrote this code to jump to that particular div tags according to their # id's in the href. I wanted to jump to the div with smooth scrolling effect. Any CSS implementation needed?
try this jQuery.ScrollTo
$.scrollTo('a[href=bdpaus]');
In Firefox and Chrome, you can use the scroll-behavior: smooth CSS; this is not yet supported in other browsers, but polyfills do exist.
* {line-height: 3em}
body {scroll-behavior: smooth}
Click
<br>a<br>b<br>c<br>a<br>b<br>c<br>a<br>b<br>c<br>a<br>b<br>c<br>a<br>b<br>c<br>a<br>b<br>c<br>a<br>b<br>c<br>a<br>b<br>c<br>a<br>b<br>c<br>a<br>b<br>c<br>a<br>b<br>c<br>a<br>b<br>c<br>a<br>b<br>c<br>a<br>b<br>c<br>a<br>b<br>c<br>
<div id="bottom">end of page</div>
You could also use jQuery to animate the page's scrollTop, but unless you are already using jQuery for other purposes I wouldn't think it worth including the entire library for just one cosmetic function.
I'm coding a tab system for my website that must be entirely CSS/HTML/JS (without using any images). Problem is, I keep hacking the code until when I'm finished its just a mess. I don't know whether to use positioning, or float the tabs or what. Basically one of the big problems is that after I take away the bottom-border CSS of the selected tab, I need to move it down 1px so it seamlessly blends with the sorting headers - I don't know whether to use margin: -1px or position: relative/absolute etc. I'd love some advice on a good way to code a tab system like this, so that it can be reused across the website!
Here's an example with CSS that makes it work:
HTML:
<body>
<div class="tabs">
<ul>
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
</ul>
<div class="tabInner">
<div id="item1">
bla1
</div>
<div id="item2">
bla2
</div>
<div id="item3">
bla3
</div>
</div>
</div>
</body>
CSS:
.tabs ul {
list-style: none;
}
.tabs ul li {
float: left;
background: #eee;
border: 1px #aaa solid;
border-bottom: none;
margin-right: 10px;
padding: 5px;
}
.tabs ul li.active {
margin-bottom: -1px;
padding-bottom: 6px;
}
.tabInner {
clear: both;
border: 1px solid #aaa;
height: 200px;
overflow: hidden;
background: #eee;
}
.tabInner div {
height: 200px;
padding: 10px;
}
It even works without JS (to some degree). You'll still need some JS to move the 'active' class arround and also if you want fancy transitions.
See it in action here: http://jsfiddle.net/V8CK4/
I would use divs nested inside a list.
<ul>
<li>Tab1
<div> Content for Tab1</div>
</li>
<li>Tab2
<div> Content for Tab2</div>
</li>
<li>Tab3
<div> Content for Tab3</div>
</li>
</ul>
Then with css style ul li div to not show. I would use jQuery to show the child divs upon click of the parent li.
EDIT: Thanks to the comment... Note the li's would have to be styled inline so they do not break line after every one. Also set the li list-style to none.
In my opinion I would write it like this:
<div class="tabContainer">
<ul class="tabList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<em class="tabMessage">This is the message on the right.</em>
<div class="tabInnerContainer">
<div id="item1">
bla
</div>
<div id="item2">
bla
</div>
<div id="item3">
bla
</div>
</div>
</div>
This way will allow you to make it function al least to some extent without Javascipt, degrading nicely in browsers with JS turned off. Some of the classes could be removed if using CSS3 sleectors.
I assume the problem is to make the tab and the bar below it seem like one piece without using too much code.
What I have done before is to make the two elements I want to join overlap slightly (or not at all) and then put a third element (in the same color as both other elements) where the overlap is. This acts as a kind of patch.
Like this:
I. without patch
_________________
| |
| tab |
__|_________________|________________________________
| |
| menu bar |
|_____________________________________________________|
II. with patch
_________________
| tab |
|- - - - - - - - -|
___| patch |_______________________________
| - - - - - - - - - |
| menu bar |
|_____________________________________________________|
You will only need to use z-indexes to make this work properly. The patch may extend over the tab div it is contained in by using position: absolute and an adequately high value for top.
Update: demonstration
http://jsfiddle.net/7GJaW/
Like #Otis mentioned, nesting is a pretty good technique. I usually nest ul's
Link 1
Link 1 Item 1
Link 1 Item 2
However, if you are not trying to attempt to do a dropdown...