How to animate border using vanilla javascript or css - javascript

I set border-bottom color to grey and add transiton to .3s, and ':hover' effect,so on hover it changes its color to blue. Problem is related with that: when I place my mouse over the element with hover effect the border i set(blue) emerges from top to bottom(falling effect).
this is it
Now my client wants border to emerge from left to right on hover and border shouldn't fade away on hover on another list item,it(border) have to 'lag behind' the cursor trying to 'catch on' the cursor and fill the next list item's border positon. I hope I you get what I want. I know that it's not possible to do in css,but i don't know how to do this in js,can someone help me with that and expalain to me what to do,without using any frameworks like jQuery.

You can animate by using the width property as Thusitha said.
Here I have attached the codepen link for that effect.
ul {
list-style-type: none;
border-bottom: 5px solid #eee;
}
ul li {
display: inline-block;
position: relative;
padding: 20px;
}
ul li:before {
content: "";
position: absolute;
height: 5px;
width: 0px;
bottom: -5px;
left: 0;
background: blue;
transition: all linear 0.25s;
}
/* Expanding Animation Element */
ul li:hover:before {
width: 100%
}
<div class="box">
<ul>
<li>Homepage</li>
<li>Style Demo</li>
</ul>
</div>

Related

HTML5 animations creating a dashed border that smoothly moves inward on hover

I am making a drag and drop module - and need to have it so that when the dragging process occurs - the dashed line around the outside moves in and the box goes a particular color. I don't want the look of the dashed line to change though. There is the option of maybe having the dashed line animate move around the edge of the box
.
for now its ensuring the contents doesn't jump - to make it absolutely positioned so its disconnected from the border morphing?
how to css3 animate the border moving in/out smoothly?
https://jsfiddle.net/L47xrsnt/4/
html
<div class="drag-drop">
<div class="drag-drop-border">
<div class="contents">
xx
</div>
</div>
</div>
css
.drag-drop {
.drag-drop-border {
border: 2px dashed pink;
}
&:hover {
padding: 15px;
background: gold;
}
}
You can try like below:
.box {
height: 100px;
background: yellow;
position: relative;
}
.box::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 3px;
border: 2px dashed pink;
transition: 0.5s;
}
.box:hover::before {
margin: 10px;
}
<div class="box">
</div>
To make the border transition smoother, you can add following CSS code in your :
{
transition: 0.5s padding ease-in-out;
}
You can add other parameters in transaction as per your requirement.

Button behind text only on mobile

I am trying to do a very simple quiz like this one:
https://www.sitepoint.com/simple-javascript-quiz/
I tried to make it more responsive and added this line:
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
It worked fine but when I add a long text on the alternatives of each question, the button "Next Question" stay behind the text, only on mobile (iphone 6, safari).
I tried to add a z-index: 1000; and nothing changed:
button{
font-family: 'Work Sans', sans-serif;
font-size: 22px;
background-color: #279;
color: #fff;
border: 0px;
border-radius: 3px;
padding: 20px;
cursor: pointer;
margin-bottom: 20px;
z-index:1000;
}
So, there's a few things wrong here. As said above you need to remove the height from .quiz-container and remove the absolute positioning from .slide.
What I would suggest is that you add display: none; to slide then your active style to display:block - this will correctly display the button where it should be. With that said, you will lose the fade effect. You'd need to add this CSS to get it back. Hope this helps!
.quiz-container {
position: relative;
margin-top: 40px;
}
.slide {
width: 100%;
opacity: 0;
display: none;
}
.active-slide {
opacity: 1;
display: block;
}
You set position: absolute to your quizz questions, so they will ignore the space of every element you set in HTML.
A large z-index will only put an element above another, that's the why you see the quizz questions above the button.
The problem will be solved if you increment the height of quiz-container on mobile screen (try use #media screen).
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I recomend you to find another way to put your questions at the top of page instead using position: absolute
The problem really is that your quiz-container div has a fixed height of 200px, and you can't make it fluid because your slides have position:absolute, which removes them from the flow and prevents the parent growing in height accordingly.
So you need to re-think how to go about this.
An interesting approach would be to use flexbox, controlling which slide to show with the order property.
.quiz-container {
margin-top: 40px;
overflow: hidden;
}
#quiz{
display: flex;
}
.slide {
opacity: 0;
transition: opacity 0.5s;
/*gives each slide 100% width and prevents it from growing or shrinking*/
flex: 0 0 100%;
}
.active-slide {
opacity: 1;
/*sets the order to -1, so it's positioned before all other flex-items*/
order: -1;
}

Make an overlay on mouse over

I have a trouble with an effect I want to achieve.
When I put the mouse over this element :
<div class="process">
<h3 class="text-center">Process</h3>
<ul class="row text-center list-inline wowload bounceInUp animated" style="visibility: visible; animation-name: bounceInUp;">
<li data-id="Reflexion">
<span><i class="fa fa-flask"></i><b>Reflexion</b></span>
</li>
</ul>
</div>
I want to have an overlay over all the page and over this overlay my <ul>...</ul>
I have tried with z-index and position but it doesn't work, my overlay is always over all the page and over the <ul>...</ul>
Here is the style of <ul></ul> and .overlay
.process ul li{
width: 10em;
height: 10em;
border: 1px solid #CEEBF0;
padding: 0;
border-radius: 50%;
margin: 0 1.25em;
line-height: 13.5em;
color: #21ABCA;
-webkit-transition: border-color 0.5s ease-in; /* Safari */
-moz-transition: border-color 0.5s ease-in; /* Firefox */
transition: border-color 0.5s ease-in;
}
.process ul li span{line-height: 2em;display: inline-block;font-weight: 300;}
.process ul li span i{font-size: 3em;}
.process ul li span b{display: block;font-size: 1em;font-weight: 300;}
.process ul li:hover {
border-color:#3498db;
background-color: rgba(52, 152, 219,1.0);
}
.overlay {
position: fixed;
z-index: 50;
background-color: red;
height: 100vh;
width: 100vw;
}
Here is the script I'm using to listen mouse event :
$(".process ul li").on({
mouseenter : function() {
$('#overlay').addClass('overlay');
},
mouseleave : function() {
$('#overlay').removeClass('overlay');
},
});
Update
There is a Fiddle that show better than words my trouble
When I make overlays I usually use absolute positioning to get it right. Without knowing what effect you want specifically, here's a generic demo of how an overlay might work.
fiddle
By setting the overlay's position to absolute, and all of its positional attributes to 0, it covers the box it's bound to completely without having to worry about setting widths or heights.
Hope this helps!
EDIT
I know you've solved the issue, but for those who may look later, here's a link to a fiddle wherein the issue has been solved.
fiddle
The Z-index property only works when both elements are positioned manually. Make sure the list has position: relative or position: absolute too, not just the overlay. Then you need to give a higer value to the z-index of the list.
EDIT: try adding this to your code:
.process {
position: relative;
z-index: 100;
}
You'll have to actually play with Z-index to make sure only the hovered panel is in front of the overlay if that's what you want, but this proves that you need to set a position attribute on what you want to be manually z-positioned.

How to draw the line for list element from the starting of div container?

The live example http://jsfiddle.net/vro0om/yhvnh/
I am trying to draw the line separating 2 li elemts in nested ul. But the line takes the width of the container ul and not the div containing the complete structure. In the mentioned example I have used nested ul but in my working using ng-repeat to obtain the same effect.
.unstyled {
padding-left: 24px;
}
.titleSeperator
{
background: black ;
margin-top: 0px;
margin-bottom: 0px;
height : 1px;
width:100%;
}
I think there is an easier way to do what you want.
First, remove all your .titleSeperator divs. Then, use the following CSS code for the parent ul:
ul.lines {
line-height: 1.4em;
background: linear-gradient(white 95%, black 5%);
background-size: 100% 1.4em;
background-origin: content-box;
}
The new fiddle : http://jsfiddle.net/yhvnh/2/
Some explanations for the CSS:
line-gradient allows to create a gradient starting with 95% of white and ending with 5% of black
background-size define the size of the gradient : width 100% and height 1.4em (should be the same as line-height)
background-origin specifies what the background-position property should be relative to
You can set position: relative; overflow: hidden; on topmost ul and make separators absolutely positioned
.titleSeperator {
background: black;
height : 1px;
width: 10000px;
position: absolute;
left: 0;
}
Demo: http://jsfiddle.net/yhvnh/3/
However Lucas proposed better approach, so use it if you can, you should avoid redundant HTML elements.
Variant 2
You can also use :before pseudo element instead of redundant .titleSeparator divs
.unstyled > li:before {
content:'';
background: black;
height : 1px;
width: 10000px;
position: absolute;
left: 0;
}
Demo: http://jsfiddle.net/yhvnh/4/

IE7: Can't display popup box when hovering over transparent background

This is probably one of the weirdest things I've seen... I have a list of elements and each contains an icon image and a hidden pop-up box. When the user hovers over the icon, the popup box is display above (jQuery's hover). This works fine in all browsers and IE8/9, but IE7 has an issue. There's a 'gap' between the icon and the popup box. If I set a background color and the popup box's container is touching the row of icons, I can keep the popup box displayed on the screen as the user moves their mouse through it to make a selection.
However, I don't want a background color displayed, and when it's not, the popup box will disappear when the user moves their mouse anywhere in that gap. In other words, the popup displays in the correct position, but the user can't make a selection because there's no way to get to the popup without hovering over the gap.
Here's some HTML and CSS:
<div class="icon-nav">
<ul>
<li>
<div class="popup-wrapper">
Air Quality
<div class="popup-container">
<div class="popup-content"></div>
</div>
</div>
</li>
<li>
<div class="popup-wrapper">
Public Health
<div class="popup-container">
<div class="popup-content"></div>
</div>
</div>
</li>
Etc....
</ul>
</div>
CSS:
.icon-nav { position: absolute; top: 388px; z-index: 999; width: 100%; } /* Positioned relative to a wrapper element. */
.icon-nav ul { display: block; width: 968px; margin: 0 auto; position: relative; }
.icon-nav ul li { float: left; }
.icon-nav ul li .popup-wrapper {}
.icon-nav ul li .popup-container { position: absolute; bottom: 0px; padding-bottom: 35px; z-index: 9999; width: 100%; display:none; left: 0px; }
.icon-nav ul li .popup-content { width: 900px; height: 260px; background-color: #fff; margin: 0 auto; padding:30px; }
.icon-nav ul li a { width:121px; height: 115px; overflow: hidden; }
jQuery:
$('.icon-nav li .popup-wrapper').hover(
function(){
$('a',this).addClass('hover')
var name = $('a', this).attr('rel');
var popup = $('.popup-container', this);
$(popup).css({'display':'block'});
// More Code...
},function(){
$('a',this).removeClass('hover');
$('.popup-container', this).css({'display':'none'});
}
);
TIA!!!
Create a 1pixel square transparent png, and use that as your elements background.
Just a quick something to try:
Set the css rule
background-color: transparent
on the div that contains the gap (I guess that'd be .popup-container).

Categories