I found a tutorial that is exactly the way I want the slider to look with the exception that I do not want to have multiple slides in each slide. And I simply want the text to change as I click different links.
Also I want the slides to transition by fading in.
I tried playing around with the code, but it seems to be way too complex for my understanding to fix. Because it seems to use Movefromleft movefromright .. for each movement.
I need some help to either fix this or guide me to a less complex version of a nice interface (like this) tutorial that does the same.
http://jsfiddle.net/itsnamitashetty/73pffnx9/2/
.mi-slider ul.mi-moveFromRight li {
-webkit-animation: moveFromRight 350ms ease-in-out both;
animation: moveFromRight 350ms ease-in-out both;
visibility:visible !important;
}
I am not sure why and how to get the fiddle to show up what its doing right now. But basically it doesn;t show up the first slide, and then works for the second and third but after the first clicks it doesnt work..
here is the original tutorial
http://tympanus.net/Tutorials/ItemSlider/
So I was able to find another content slider that did what I wanted but I had to make it work with the other tutorial.
HERE is what I came up with
Unfortunately the codepen in not showing how it works.
But anyways for someone looking to achieve the same thing
here are the two tutorials that I used,
Item slider & Full Width Tabs
I basically worked around the CSS of Full Width Tabs to make it interface pretty much like Item slider
.container {
font-family: 'Lato', Calibri, Arial, sans-serif;
color: #47a3da;
}
a {text-decoration: none;
outline: none;}
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
.container{width:60%; margin:2% 20%;}
.tabs {
position: relative;
width: 100%;
overflow: hidden;
margin: 1em 0 2em;
font-weight: 300;
}
/* Nav */
.tabs nav {
text-align: center;
border-top: 5px solid transparent;
}
.tabs nav a.tab-current {
/* border: 1px solid #47a3da;
box-shadow: inset 0 2px #47a3da;*/
border-bottom: none;
z-index: 100;
}
.tabs nav a {
display: inline-block;
text-transform: uppercase;
letter-spacing: 5px;
padding: 40px 30px 30px 34px;
position: relative;
color: #888;
outline: none;
-webkit-transition: color 0.2s linear;
transition: color 0.2s linear;
}
.tabs nav a:hover, .tabs nav a.tab-current {
color: #000;
}
.content{background:rgba(0,0,0,0.8)}
/* Content */
.content section {
font-size: 1.25em;
padding: 3em 1em;
display: none;
max-width: 1230px;
margin: 0 auto;
}
.content section:before,
.content section:after {
content: '';
display: table;
}
.content section:after {
clear: both;
}
/* Fallback example */
.no-js .content section {
display: block;
padding-bottom: 2em;
border-bottom: 1px solid #47a3da;
}
.content section.content-current {
display: block;
}
nav a.tab-current:after,
nav a.tab-current:before {
content: '';
position: absolute;
top: -5px;
border: solid transparent;
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
nav a.tab-current:after {
border-color: transparent;
border-top-color: rgba(0,0,0,0.8);
border-width: 20px;
left: 50%;
margin-left: -20px;
}
nav a.tab-current:before {
border-color: transparent;
border-width: 27px;
left: 50%;
margin-left: -27px;
}
Related
Here is my codepen or view below the code.
If you click on a tab, its content will show successfully, then click on another tab, that content will also show successfully, however after that, if you go back to the previous tab that you just clicked, then that previous tab's content won't show, instead, the second tab's content will simply remain there. Why is this the case?
JS:
$k('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
//new tab
console.log(e.target);
//previous tab
console.log(e.relatedTarget);
})
CSS:
/*nice Menu*/
.rotate {
-moz-transition: all .5s linear;
-webkit-transition: all .5s linear;
transition: all .5s linear;
}
.rotate.down {
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
transform:rotate(90deg);
}
a {
text-decoration: none;
}
:after, :before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.pad-15 {
padding: 15px;
}
.clear {
clear: both;
}
.clear:after, .clear:before{
content: " ";
display: table;
}
a.toggle-nav {
top: 12px;
right: 15px;
position: absolute;
color: #fff;
line-height: 25px;
font-size: 22px;
background: #DE5939;
padding: 3px 5px;
border-radius: 1px;
transform: rotate(90deg);
}
.nice-nav {
width: 250px;
height: 100%;
transition:all 0.4s ease-in-out 0s;
float:left;
font-size: 15px;
}
.nice-nav li.child-menu span.toggle-right {
bottom: 0;
display: inline-block;
float: right;
padding: 15px;
position: absolute;
right: 0;
text-align: right;
top: 3px;
}
.nice-nav ul li a {
background: #fff none repeat scroll 0 0;
border: 1px solid #f6f6f6;
color: #333;
display: block;
padding: 12px;
position: relative;
}
.nice-nav ul li.child-menu ul {
background: #fff;
display: none;
}
.nice-nav ul li.child-menu ul li a {
background: #f6f6f6;
padding: 10px 20px;
}
.nice-nav > ul {
margin: 0;
padding: 0;
}
.nice-nav > ul li{
list-style: none;
margin: 2px auto;
}
.nice-nav ul li ul {
padding: 0;
}
.modal-backdrop.fade.show{
display: none;
}
/*nice Menu*/
You forgot to add nav in your ul class.
From your code from this:
<!--nice menu-->
<div class="nice-nav">
<ul>
To this:
<!--nice menu-->
<div class="nice-nav">
<ul class="nav d-block" aria-orientation="vertical">
Here's my problem:
I'm trying to animate a nav list (ul) and in my mind, I want to move it on click like that:
$('#top-nav-more').click(function() {
$('.hidden').toggleClass('hidden-click');
$(this).find('img').toggleClass('rotate');
});
/** Top Nav **/
#top-nav {
background: #e41a2e;
padding:0 !important;
display: inline-block;
/*height:40px;*/
}
.top-nav-wrapper{
max-width:1366px;
margin: 0 auto;
}
a.top-req-info{
position: absolute;
font-family: 'Daxline Light';
font-size: 0.80rem;
color: #FFF;
background: #cd1729;
padding: 10px 20px 11px 10px;
/* float: left; */
}
a.top-req-info:hover, #top-nav-book a:hover, .hidden a:hover {
text-decoration:none;
color: #821b31;
}
a.top-req-info:hover, #top-nav-book:hover {
background: #821b31;
color: white;
}
#top-nav-book:hover a {
color: white;
}
#top-nav-more a, #top-nav-no a, #top-nav-book a, .hidden a {
color: #FFF;
font-size: 0.80rem;
}
.rotate {
transform: rotate(180deg);
}
ul.top-nav-right{
list-style: none;
float: right;
display: inline;
margin: 7px 0;
}
ul.top-nav-right li{
display:inline;
padding: 8px 25px 8px;
}
li#top-nav-more{
background: #cd1729;
}
#top-nav-more img{
margin-right: 15px;
transition: 0.3s;
}
.hidden {
position: relative;
left: 321px;
display: none!important;
transition:all 1s linear;
}
.hidden-click {
transition:all 1s linear;
position: relative;
left: 0;
display: inline!important;
}
ul .hidden:first-child {
display: inline!important;
left: 0;
}
.search-bar input {
background-color: #821A31;
color: #ffff;
font-size: 35px;
border: 0;
margin: 0;
height: 76px;
width: 100%;
padding: 0 80px;
font-weight: 200;
display: none;
}
.search-bar input:focus, .search-bar input:focus{
outline: none;
}
.search-bar input.slide-down {
display: block;
}
.search-bar input::placeholder {
color: white;
}
.hover-bar {
background: #821A31!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Top Navigation -- Red bar -->
<div id="top-nav" class="container-fluid">
<div class="top-nav-wrapper">
<ul class="top-nav-right">
<li class="hidden">Health Care</li>
<li class="hidden">My Account</li>
<li class="hidden">Student Portal</li>
<li id="top-nav-more">More</li>
<li id="top-nav-no">Phone number</li>
<li id="top-nav-book">Book a Tour</li>
</ul>
</div>
</div>
Essentially, when you click more, the bar will change the position from some certain pixels to the left to 0 pixels on the left.
I added the transition effect to do it smoothly but for some reason, the effect happens right away. So technically it works but it doesn't work as I wish.
Something has to be wrong on my css transition. I read that it is possible to animate the position, so it is not a problem of position, it has to be something different. I've already use the property transition somewhere else in my code, so I have no clue of what is wrong, any idea?
This might get you close. I imagine there might be more to the animation you're looking for. It's hard to manipulate elements that are set to display none. Visibility: hidden and position: absolute is an equivalent you can manipulate:
/** Top Nav **/
#top-nav {
background: #e41a2e;
padding:0 !important;
display: inline-block;
/*height:40px;*/
}
.top-nav-wrapper{
max-width:1366px;
margin: 0 auto;
}
a.top-req-info{
position: absolute;
font-family: 'Daxline Light';
font-size: 0.80rem;
color: #FFF;
background: #cd1729;
padding: 10px 20px 11px 10px;
/* float: left; */
}
a.top-req-info:hover, #top-nav-book a:hover, .hidden a:hover {
text-decoration:none;
color: #821b31;
}
a.top-req-info:hover, #top-nav-book:hover {
background: #821b31;
color: white;
}
#top-nav-book:hover a {
color: white;
}
#top-nav-more a, #top-nav-no a, #top-nav-book a, .hidden a {
color: #FFF;
font-size: 0.80rem;
}
.rotate {
transform: rotate(180deg);
}
ul.top-nav-right{
list-style: none;
float: right;
display: inline;
margin: 7px 0;
}
ul.top-nav-right li{
display:inline;
padding: 8px 25px 8px;
}
li#top-nav-more{
background: #cd1729;
}
#top-nav-more img{
margin-right: 15px;
transition: 0.3s;
}
.hidden {
position: absolute;
left: 321px;
visibility: hidden;
transition:all 1s linear;
}
.hidden-click {
transition:all 1s linear;
position: relative;
left: 0;
visibility: visible;
}
ul .hidden:first-child {
display: inline!important;
left: 0;
}
.search-bar input {
background-color: #821A31;
color: #ffff;
font-size: 35px;
border: 0;
margin: 0;
height: 76px;
width: 100%;
padding: 0 80px;
font-weight: 200;
display: none;
}
.search-bar input:focus, .search-bar input:focus{
outline: none;
}
.search-bar input.slide-down {
display: block;
}
.search-bar input::placeholder {
color: white;
}
.hover-bar {
background: #821A31!important;
}
Working/semi-working example:
https://jsfiddle.net/qLpfynks/
I believe the reason is because you are switching from display:none to display: inline. CSS cannot transition display and so it will show the "transition" immediately.
To fix this and still achieve the desired effect change it to
.hidden {
position: relative;
left: 321px;
display: inline!important;
opacity:0; /*makes it invisible*/
transition:all 1s linear;
/*transition:left 1s linear*/
}
.hidden-click {
transition:all 1s linear;
/*transition:left 1s linear*/
position: relative;
left: 0;
opacity: 1; /*makes it visible*/
display: inline!important;
}
Note that if you use the specificier all for your transition you will see a fade in and out animation. If you don't want this, specify only left (see commented CSS code)
So, I have a modal window in a website that I'm devloping.
The modal is made out of pure CSS, to open it and close it I have javascript functions wich change the css elements to make the modal show/hide.
CSS of the modal:
<style>
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog > div {
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background:white;
display: table;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
.btnEncomendarProduto {
background-color:#D60E12;
color:white;
border-radius:5px;
font-size: 12px;
white-space:normal;
cursor:pointer;
text-transform: initial;
border:1px solid #D60E12;
margin-top:3px;
}
</style>
So the problem is when I have a something that displays too much information on the modal, this happens:
So I think I need a scroll bar on the div inside the modal. How can I do that?
Thank you.
If you have an inner div that expands with the content of the actual modal, you can set the max-height of that div to be something--like 75vh--and add overflow-y: auto to that container, and it will automatically add a scrollbar when the content gets longer than that set max-height.
HTML
<div class="Content">
<p>
This is the page contents.
</p>
</div>
<div class="Modal" id="modal">
<div class="Contents">
<h1>Modal</h1>
<p id="text-area">
[large amounts of content]
</p>
</div>
</div>
CSS
body
{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.Content
{
position: relative;
width: 100%;
}
.Modal
{
position: fixed;
display: none;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3); // light grey background
}
.Modal.Open
{
display: block;
}
.Modal .Contents
{
overflow-y: auto;
display: block;
position: relative;
width: 90%;
margin: 5% auto 0;
max-height: 90vh;
padding: 5px;
background: #fff;
}
Note the .Modal .Contents selector and how it works.
JSFiddle Example: https://jsfiddle.net/nj6r0sjw/
Code of .JS file
$(document).scroll(function (){
var menuheight= $('header').height();
var y = $(this).scrollTop();
if (y>(menuheight))
{
$('.menu_nav_features').addClass('sticky');
}
else{
$('.menu_nav_features').removeClass('sticky');
}
});
Code of .css class to be add on scroll down for specific height file
.sticky{
position: fixed;
top: 0;
}
This is my Navigation Bar code of .less file. ( for information )
.menu_nav_features{
width: 100%;
height: 46px !important;
border-bottom: 1px solid #e6e6e6;
border-top: 1px solid #e6e6e6;
.menu-features{
margin-top: 0px;
width: 1200px !important;
list-style:none;
margin-left: -35px;
li{
display: inline;
.transition;
a{
background: #f4f4f4;
margin-right:-3px;
display: inline-block;
text-decoration: none;
color:#444444;
padding:0px 30px;
line-height: 44px;
.transition;
}
a:active, a:hover{
color: #000;
background: #fdfdfd;
}
}
li:nth-child(2):hover .bf{
.displayall;
.transition;
}
.bf{
display: none;
position: absolute;
margin-left: 134px;
padding-top: 7px;
// top: 50px;
.bf_btns{
a{
display: block;
width: 238px !important;
}
a:last-child{
margin-top: 0px;
}
}
}
}
}
Problem Statement : When scroll bar height greater than my Header height then my Navigation bar fix cause of Sticky class.It show immediately and i want to show it slowly down or something like slideDown JQuery.I add tranistion to Sticky Class but nothing happened.
You can simply fix this problem with css
#keyframes scroll-down {
from {transform: translate(0,100%)}
to {transfrom: translate(0,0)}
}
.sticky {
position: fixed;
top:0;
animation-name: scroll-down;
animation-duration: 0.4s;
}
I'd like to make a two page slider to move through the content. Is it possible to make a CSS code to do the animation like in this example?
Like this
demo
css
body {
font:normal 1.25em/1.5 Arial, sans-serif;
}
.demo-wrapper {
max-width: 640px;
margin: 0 0 1em;
padding: 5px;
border: 1px solid #CCC;
background: #F4F4F4;
}
/**
* Slider CSS
*/
.slider {
/* For no JS situations */
overflow: auto;
}
.slider > ul {
margin: 0;
padding: 0;
/* Force list items onto a single line and remove white space */
font-size: 0;
white-space: nowrap;
/* Only WebKit requires prefix */
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.slider > ul > li {
display: inline-block;
}
.slider .next,
.slider .prev {
position: absolute;
top: 50%;
margin-top: -1em;
padding: .5em;
line-height: 1;
text-decoration: none;
color: white;
background: rgba(0, 0, 0, .25);
cursor: pointer;
}
.slider .next {
right: 0;
}
.slider .prev {
left: 0;
}
.slider .prev.is-disabled,
.slider .next.is-disabled {
opacity: .25;
}
/* Full width variation */
.slider--fit li {
width: 100%;
}
demo1