We Keep Coding

Accordion Panel Content Not Scrolling

Good Day,
I'm having a real weird issue with my site. What I am attempting to do is place a Time.ly Calendar widget in one panel of my accordion. If you look at this page under "TOURNAMENTS: http://www.rthhockey.com/onehockey It is rendering exactly as I would like it to. The problem is that if you look here, http://www.rthhockey.com/tcs-hockey, I am just copying and pasting the code from the working page, and simply replacing the calendar script and it is not scrolling as expected. On yet another page, http://www.rthhockey.com/canlan, it's only scrolling a portion of what it should be. Essentially, the calendar script is the only thing changing, that I can tell. It's just the organizer numbers that are changing. It's very odd to me but, maybe some of you pro's might have an easy solution. I have tried playing with the height of the panel and accordion to no avail. Thank you in advance for any assistance you might be able to offer.
CSS
.ac-container {
max-width: 810px;
}
.ac-container label {
height: 50px !important;
line-height: 50px !important;
font-size: 26px !important;
font-family: 'Open Sans';
padding: 5px 15px;
position: relative;
z-index: 20;
display: block;
height: 30px;
cursor: pointer;
color: #ff6600;
line-height: 50px;
font-size: 26px;
background: #ffffff;
font-size: 26px;
height: 30px;
line-height: 50px;
border: 1px solid #ff6600;
}
.ac-container {
width: 100%;
margin: 10px auto 30px auto;
text-align: left;
}
.ac-container label:hover {
background: #fff;
}
.ac-container input:checked + label,.ac-container input:checked + label:hover {
background: #ffffff;
color: #ff6600;
height: 30px;
line-height: 21px;
font-size: 13px;
}
.ac-container label:hover:after,.ac-container input:checked + label:hover:after {
content: '';
position: absolute;
width: 24px;
height: 24px;
right: 13px;
top: 7px;
background: none;
}
.ac-container input:checked + label:hover:after {
background-image: none;
}
.ac-container input {
display: none;
}
.ac-container article {
background: #ffffff;
margin-top: -5px;
overflow: hidden;
height: 0;
position: relative;
z-index: 10;
-webkit-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
-moz-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
-o-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
-ms-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
}
.ac-container article p {
font-style: normal;
color: #494949;
line-height: 23px;
font-size: 10px;
padding: 5px;
font: normal normal 12px 'Open Sans';
}
.ac-container input:checked ~ article {
-webkit-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
-moz-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
-o-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
-ms-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
box-shadow: 0 0 0 1px rgba(155,155,155,0.3);
}
.ac-container input:checked ~ article.ac-small {
height: 390px;
}
.ac-container input:checked ~ article.ac-medium {
height: 420px;
}
.ac-container input:checked ~ article.ac-large {
height: 230px;
}
div.scroll {
max-height: 1250px;
overflow: auto;
}
.timely-stream:not(.timely-agenda) .timely-event {
min-height:92px; !important
}
.timely-title-text,
.timely-details-container{
font-size:67%;
}
HTML
<section class="ac-container">
<div>
<input id="ac-1" name="accordion-1" type="radio" >
<label for="ac-1">TOURNAMENTS</label>
<article class="ac-small">
<div class="scroll">
<script src="//dashboard.time.ly/js/embed.js" data-src="https://events.time.ly/hye2ww2?categories=21029&organizers=43496" data-max-height="0" id="timely_script" class="timely-script"></script>
</div>
</article>
</div>
<div>
<input id="ac-2" name="accordion-1" type="radio" checked="">
<label for="ac-2">OneHockey</label>
<article class="ac-medium">
<img src="https://i.imgur.com/HJwXuym.png?2" title="OneHockey Events" />
</article>
</div>
<div>
<input id="ac-3" name="accordion-1" type="radio">
<label for="ac-3">INFO</label>
<article class="ac-large">
Blah, blah, blah
</article>
</div>
</section>
The 3 differnt script codes that I've used with the 1st being the one that is working:
<script src="//dashboard.time.ly/js/embed.js" data-src="https://events.time.ly/hye2ww2?categories=21029&organizers=43496" data-max-height="0" id="timely_script" class="timely-script"></script>
<script src="//dashboard.time.ly/js/embed.js" data-src="https://events.time.ly/hye2ww2?categories=26034&organizers=46341" data-max-height="0" id="timely_script" class="timely-script"></script>
<script src="//dashboard.time.ly/js/embed.js" data-src="https://events.time.ly/hye2ww2?categories=21029&organizers=43496" data-max-height="0" id="timely_script" class="timely-script"></script>

this div needs to have 'overflow: scroll' applied to it.
article class="ac-small"
example:
article.ac-small {overflow: scroll;}

Multicolor progress bar using CSS

I want to create a multicolor progress bar please help me to code. when progress less than 50 it will show red when progress is >50 and <90 it will show green and from 90 to 100 it show blue, how to do it??

You need to create one div for the progressbar and then you just add divs inside the progressbar div.
`
<div class="bar">
<div class="fifty">
<p>50%</p>
</div>
<div class="twentyfive">
<p>25%</p>
</div>
<div class="ten">
<p>10%</p>
</div>
</div>
`
The CSS could be something like this:
`
.bar {
width: 100%;
height: 30px;
border-radius: 10px;
background-color: #b3b3b3;
color: white;
text-align: center;
}
.fifty {
width: 50%;
height: 100%;
background-color: green;
float: left;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.twentyfive {
width: 25%;
height: 100%;
background-color: orange;
float: left;
}
.ten {
width: 10%;
height: 100%;
background-color: red;
float: left;
}
`

I created a multicolor progress bar.
Check it on my codepen here: https://codepen.io/onlintool24/pen/dyVJrww
Just need to change the var progressval value and you can see the multicolor progress bar.
var progressval = 50;
var elm = document.getElementsByClassName('progressab')[0];
elm.style.width = progressval+"%";
elm.innerText = "You're "+progressval+"% There!";
if(progressval>90 && progressval<=100 ){ elm.style.backgroundColor = 'blue';
}else if(progressval>50 && progressval<90 ){ elm.style.backgroundColor = 'green';
}else if(progressval<=50){ elm.style.backgroundColor = 'red';
}
.progressa {
border-radius: 50px !important;
height: 35px;
line-height: 36px;
font-size: 14px;
overflow: hidden;
height: 35px;
margin-bottom: 20px;
background-color: rgba(0,0,0,0.5);
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
line-height: 36px;
height: 35px;
font-size: 14px;
border: 3px solid transparent;
}
.progressab {
background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
background-image: -o-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
-webkit-background-size: 40px 40px;
background-size: 40px 40px;
-webkit-transition: width .25s ease,height .25s ease,font-size .25s ease;
-moz-transition: width .25s ease,height .25s ease,font-size .25s ease;
-ms-transition: width .25s ease,height .25s ease,font-size .25s ease;
-o-transition: width .25s ease,height .25s ease,font-size .25s ease;
transition: width .25s ease,height .25s ease,font-size .25s ease;
width: 0;
color: #fff;
text-align: center;
font-family: 'Open Sans',sans-serif !important;
animation: progress-bar-stripes 2s linear infinite reverse;
}
#keyframes progress-bar-stripes{
0% {
background-position: 40px 0;
}
100% {
background-position: 0 0;
}
}
<div class="progressa">
<div class="progressab" style=" background-color: rgb(178, 222, 75);"></div>
</div>

Is it possible to animate a div border?

I am using .addClass and .removeClass on some divs which add or remove the bottom border. Is animating this possible? Something like this:
$("#left-title").addClass('active').show("slide", { direction: 'left', easing: 'easeInCirc' }, 1000);
Thanks

Sure, use the transition css3 property:
div{
float: left;
position: relative;
padding: .2em .5em .5em .5em;
background: #eceded;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-weight: bold;
box-shadow: inset 0 -5px 0 0 #bbb;
border-radius: 5px;
border: 1px solid #999;
overflow:hidden;
cursor: pointer;
}
div:after{
content: '';
display: block;
width: 0;
height: 5px;
position: absolute;
top: 100%;
left: 0;
margin-top: -5px;
background-color: red;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
div:hover:after{
width: 100%;
background-color: #0c0;
}
<div>Hover me</div>

How to get Mouse Out effect in CSS

I have created a transition effect on a div. I have written the following code and its working fine, when I hover on the div, the color smoothly changes, but when I remove the mouse the color backs to its original state abruptly.
I want to know the method of changing the color slowly on Mouse out Event as well.
Kindly check my code and guide me.
<nav>
<ul>
<li id="skills" class="navText" >Work -Experience</li>
<li id="web" class="navText">Skills </li>
</ul>
</nav>
CSS
nav ul #skills
{
position:absolute;
width: 150px;
height: 150px;
border:6px solid;
border-color:white;
border-radius: 150px;
line-height:150px;
font-size: 15px;
#background-color: EA7079;
background-color: #1A1A1A;
color: white;
left:370px;
}
nav ul #skills:hover
{
position:absolute;
width: 150px;
height: 150px;
border:6px solid;
border-color: #DCDEE0;
border-radius: 150px;
line-height:150px;
font-size: 15px;
background-color: EA7079;
color: white;
left:370px;
/* CSS3 */
-webkit-transition: all 1000ms ;
-moz-transition: all 1000ms ;
-ms-transition: all 1000ms ;
-o-transition: all 1000ms ;
transition: all 1000ms ;
}

It is changing back suddenly because you have the transitions in the :hover rule. The transitions only works when the mouse is over the element.
Do it like this instead:
nav ul #skills
{
position:absolute;
width: 150px;
height: 150px;
border:6px solid;
border-color:white;
border-radius: 150px;
line-height:150px;
font-size: 15px;
#background-color: EA7079;
background-color: #1A1A1A;
color: white;
left:370px;
/* CSS3 */
-webkit-transition: all 1000ms ;
-moz-transition: all 1000ms ;
-ms-transition: all 1000ms ;
-o-transition: all 1000ms ;
transition: all 1000ms ;
}
nav ul #skills:hover
{
position:absolute;
width: 150px;
height: 150px;
border:6px solid;
border-color: #DCDEE0;
border-radius: 150px;
line-height:150px;
font-size: 15px;
background-color: EA7079;
color: white;
left:370px;
}
See? The transitions are applied only when the mouse is over the element because it is in the :hover rule. Thus, it cannot fade back out after the mouse leaves because the transitions are no longer applied. If the transitions are applied to the elements style, it will fade in and out every time the mouse moves over it.
Here is a JSFiddle to show what I mean.
Hope this helps!

It should work if you only have transition on the non-hovered element, according to CSS-tricks
av ul #skills
{
position:absolute;
width: 150px;
height: 150px;
border:6px solid;
border-color:white;
border-radius: 150px;
line-height:150px;
font-size: 15px;
#background-color: EA7079;
background-color: #1A1A1A;
color: white;
left:370px;
/* CSS3 */
-webkit-transition: all 1000ms ;
-moz-transition: all 1000ms ;
-ms-transition: all 1000ms ;
-o-transition: all 1000ms ;
transition: all 1000ms ;
}
nav ul #skills:hover
{
position:absolute;
width: 150px;
height: 150px;
border:6px solid;
border-color: #DCDEE0;
border-radius: 150px;
line-height:150px;
font-size: 15px;
background-color: EA7079;
color: white;
left:370px;
}

I can't center a button and fix it to the browsers footer?

http://i.imgur.com/SXgTt.png
You see removing these two will make the image work, but it don't stick to the footer when viewed in browser
here's how its look like
http://i.imgur.com/gdBMr.png
and here's the css with html
<style>
body {
text-align: center;
background-color: #080707;
font-family: "Open Sans", sans-serif;
}
.enter {
display: block;
width: 165px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 30px;
border: 2px solid #c52f30;
color: #cf2f32;
margin: 30px auto 0;
text-decoration: none;
position:fixed;
bottom:23px;
}
.enter:hover {
background: #cf2f32;
color: white;
-webkit-transition: background 0.4s ease, color 0.4s ease;
-moz-transition: background 0.4s ease, color 0.4s ease;
-o-transition: background 0.4s ease, color 0.4s ease;
-ms-transition: background 0.4s ease, color 0.4s ease;
transition: background 0.4s ease, color 0.4s ease; }
</style>
<body>
<p><img src="images/fullbg.png" style='width:100%; max-width: 800px;' border="0" alt="Null"></p>
Enter
</body>

I don't think you can use the auto margins trick if the element is set to position fixed. But you can have it this way:
.enter {
display: block;
width: 165px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 30px;
border: 2px solid #c52f30;
color: #cf2f32;
margin: 30px 0 0 -82px;
text-decoration: none;
position:fixed;
left: 50%;
bottom:23px;
}
Just set the left margin to be half of the element's width.

I cant see images, buy you can try;
.enter {
display: block;
width: 165px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 30px;
border: 2px solid #c52f30;
color: #cf2f32;
margin: 0 0 0 -83px;;
text-decoration: none;
position:fixed;
bottom:23px;
left:50%;
}