I'm planning to change all the input[type=submit]s & buttons in my website into this smooth animated flowing button.
So, how do I create this using HTML, JavaScript & CSS? Especially I made this GIF to post it in Stack Overflow. And I don't think, I've to post some codes in this question to explain it. :/
EDIT: I don't want exactly Curls effect with bottom right to top left. It should start affecting from the area I click. In the next GIF I've clicked in the middle. Now please see the affect.
I hope you can understand what I mean. It should start flowing to the outside from the exact area I click.
You can use hover.css, Checkout background transition in that
http://ianlunn.github.io/Hover/ .
If you want exactly like the one you posted. you can always try some trial and error with hover.css
you can easily make with simple css see this click
Hope this helps!
.button {
position: relative;
background-color: #4CAF50;
border: none;
font-size: 28px;
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
overflow: hidden;
}
.button:after {
content: "";
background: #90EE90;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
<button class="button">Click Me</button>
Please check this , hope it is helpful.
a {
padding: 20px 30px;
line-height:30px;
color:#fff;
font-size: 20px;
background:#ff0000;
text-decoration: none;
position: relative;
transition: all ease .6s;
overflow:hidden;
display: inline-block;
}
a span {
z-index:1;
position:relative;
}
a:after {
transform: scale(0);
background: #000;
position: absolute;
right:-200px;
bottom:-200px;
content:'';
border-radius: 100%;
transition: all ease .6s;
width: 400px;
height: 400px;
}
a:hover:after {
transform:scale(1);
transition: all ease .6s;
}
<span>Test</span>
can be achieved by a small tweak from "Abhitalks" answer from this question!
In html :
<div class="outer_box" id="btn">
<span>Button text</span>
<div id="dummy"></div>
</div>
css :
.outer_box{
background-color: transparent;
width: 400px;
height: 400px;
position: relative;
border: 1px solid silver;
text-align:center;
}
#dummy {
position: absolute;
top: 400px; left: 400px;
width: 1px; height: 1px;
background-color: gray;
z-index: -5;
}
Script :
$('#btn').on("click", function() {
$('#dummy').animate({
'width': '400px',
'height': '400px',
'top': '0px',
'left': '0px'
}, 500);
//and any action to be done on click :)
});
Related
I'm trying to make a replica of the slider on top of this google page: https://www.google.com/doodles
If someone could make a replica of the image slider with the bars, that would be great! I've tried to on my own but can't figure it out. Here's my try if it's helpful!
JAVASCRIPT:
<script>
var imgArray = [
'images/img1.gif',
'images/img2.gif',
'images/img3.jpg',
'images/img4.jpg'],
curIndex = 0;
imgDuration = 3000;
function slideShow() {
document.getElementById('slider').className += "fadeOut";
setTimeout(function () {
document.getElementById('slider').src = imgArray[curIndex];
document.getElementById('slider').className = "";
}, 500);
curIndex++;
if (curIndex == imgArray.length) { curIndex = 0; }
}
</script>
HTML:
<img class="slidershow" id="slider" src="images/img1.gif" onmouseover="slideShow()">
<div id="navigation">
<label for="r1" class="bar" id="bar1"></label>
<label for="r2" class="bar" id="bar2"></label>
<label for="r3" class="bar" id="bar3"></label>
<label for="r4" class="bar" id="bar4"></label>
</div>
</div>
CSS: --> Honestly, I wrote so much CSS that I don't know which ones relate, so I might have left a few out. Need to clean that up - Apologize in advance
.nav_links {
list-style: none;
}
.nav_links li {
display: inline-block;
padding: 0px 20px;
}
.nav_links li a {
color: #009cdc;
transition: all 0.3s ease 0s;
}
.nav_links li:hover a {
color: #2772ff;
}
#top-content {
display: block;
}
latest-nav li#latest-nav-1 {
background-color: #fa4842;
}
#latest-nav li.off {
border-top: 15px solid #fff;
}
#latest-nav li.off {
height: 5px;
opacity: 0.35;
}
#latest-nav li {
cursor: pointer;
float: left;
height: 5px;
transition: opacity 0.15s ease,height 0.15s ease,border-top 0.15s ease;
-moz-transition: opacity 0.15s ease,height 0.15s ease,border-top 0.15s ease;
-webkit-transition: opacity 0.15s ease,height 0.15s ease,border-top 0.15s ease;
width: 16.6%;
}
.slidershow {
height: 400px;
overflow: hidden;
}
.middle {
position: absolute;
top: 50%;
left: 25%;
transform: translate(-50%,-50%);
}
#navigation {
position: absolute;
bottom: 35px;
left: 60%;
transform: translateX(-50%);
display: flex;
}
.bar {
border-top: 15px solid #fff;
width: 200px;
opacity: 0.35;
height: 5px;
cursor: pointer;
transition: 0.4s;
}
.slides {
width: 500%;
height: 100%;
display: flex;
margin-top: 30px;
}
.slide {
width: 20%;
transition: 0.6s;
}
.slide img {
display: block;
margin: auto;
max-height: 250px;
max-width: 600px;
width: auto;
}
latest .container img {
display: block;
margin: auto;
max-height: 250px;
max-width: 600px;
}
#bar1 {
background-color: #3875fc;
}
#bar2 {
background-color: #ff8809;
}
#bar3 {
background-color: #19be29;
}
#bar4 {
background-color: #fa4842;
}
Thanks so much!
I'm always happy to see newcomers devoting time to study. First of all, good job! Unfortunately I'm not a very good teacher, but I put together a little example of this slider you're working on. You can check it clicking here.
Basically what is going on is:
The HTML is divided into two sections: the slider & the navbar.
I hide all slides by default applying a display: none to them. They're only visible when I add an additional class.
Detect the hover method via javascript. Whenever the navbar item is hovered on, you will detect its position (I added a data attribute called data-position to find out which position it is) and show the correspondent slider.
So, if the navbar has the data-position of 2, I know that I must show the second slide. To do that, I use .slider .slider-item:nth-child(2).
As I mentioned I'm not the best at explaining, but I hope this helps you out a little bit. Keep studying and don't give up!
HTML:
<div class="wrapper">
<div class="slider">
<div class="slider-item slider-item--visible">
hello item 1
</div>
<div class="slider-item">
hello item 2
</div>
<div class="slider-item">
hello item 3
</div>
</div>
<nav class="navbar">
<span class="navbar-item navbar-item--selected" data-position="1"></span>
<span class="navbar-item" data-position="2"></span>
<span class="navbar-item" data-position="3"></span>
</nav>
</div>
CSS
.wrapper{
max-width: 1000px;
width: 100%;
margin: 0 auto;
display: block;
}
/* Slider */
.slider{
max-width: 100%;
width: 100%;
}
.slider-item{
display: none;
}
.slider-item--visible{
display: block;
}
/* Navbar */
.navbar{
max-width: 100%;
display: flex;
align-items: flex-end;
height: 8px;
}
.navbar-item{
max-width: 33.3%;
width: 100%;
display: block;
height: 5px;
cursor: pointer;
opacity: .5;
transition: all .32s ease;
}
.navbar-item--selected{
height: 8px;
opacity: 1;
}
/* Meaningless styles (colors) */
.navbar-item:nth-child(1){
background: salmon;
}
.navbar-item:nth-child(2){
background: lightblue;
}
.navbar-item:nth-child(3){
background: #19be29;
}
Javascript
const $navbars = document.querySelectorAll(`.navbar-item`);
function removeSelected(){
const $selected = document.querySelectorAll(`.navbar-item--selected, .slider-item--visible`);
if (!$selected){
return;
}
for (let each of $selected){
each.classList.remove("navbar-item--selected");
each.classList.remove("slider-item--visible");
}
}
for (let each of $navbars){
each.addEventListener("mouseover", function(){
removeSelected();
const position = each.getAttribute("data-position");
const $item = document.querySelector(`.slider .slider-item:nth-child(${position})`)
each.classList.add("navbar-item--selected")
$item.classList.add("slider-item--visible");
});
}
I am currently working on a website and the user wants the site map to be a bar at the bottom of the screen with a button kinda built in so that when you click it a site map will slide down or up and then allow the user to click it again and make it go away.
I have the coding for it to go up but once you click it i cant get the button to follow so you can click it again. It just goes behind the site map and is gone. I have to use the coding inline due to the people who designed this site before made the css over 10000 lines long and when you try changing it there is always conflicts and the hosting company is no help on the fix. so i found that putting it in the html coding is the only way to overwrite the crazy css they created.
function footer() {
var footerH = $('footer');
var fH = footerH.height();
$('.fTab').on('click', function() {
$(this).toggleClass('current');
$('footer').slideToggle(500);
});
}
footer();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="fTab" style="width: 100%; height: 3em; position: absolute; bottom: 0; display: block; background: #ffffff; color: #000000; line-height: 4em; text-align: center; font-size: 1.2em; border-radius: 10px 10px 0 0; cursor: pointer; -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -ms-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out;">Site Map</span>
<footer style="position: absolute; display: none; left: 0; width: 100%; height: 30%; background: #ffffff;">
test
</footer>
https://jsfiddle.net/ns16twzq/
$(document).on('click', '#smBtn', function(){
$('#siteMap').css('height', '100%');
$(this).addClass('active');
});
$(document).on('click', '.active', function(){
$('#siteMap').css('height', '100px');
$(this).removeClass('active');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="siteMap" style="position: absolute; width: 100%; height: 100px; left: 0; bottom: 0; background: #333; transition: all ease 0.3s;">
<button id="smBtn" style="margin: 10px auto; display: table; background: #fff; padding: 10px; border-radius: 4px; border: none; transition: all ease 0.3s;">Site Map</button>
</div>
$('#smBtn').on('click', function() {
$('.siteMap').toggleClass('active');
});
.siteMap {
position: absolute;
width: 100%;
height: 100px;
left: 0;
bottom: 0;
background: #333;
transition: all ease 0.3s;
}
.siteMap.active {
height: 100%;
}
#smBtn {
margin: 10px auto;
display: table;
background: #fff;
padding: 10px;
border-radius: 4px;
border: none;
transition: all ease 0.3s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="siteMap">
<button id="smBtn">Site Map</button>
</div>
I have several buttons that use the same class. I am using a click function to make adjustments to the button. The issue I am having is the click function is controlling all of the buttons with the same class.
I am using $(document.body) as the selector because the data is derived asynchronously.
I'm wanting to toggle the class for both the triggerPosition and triggerButton. Originally, I just had $(document.body).on('click', '.triggerButton', function() { and thought adding 'triggerPosition' into it would allow the $(this) function to work for both the triggerPosition and triggerButton, but it doesn't.
Does anyone see what I need to do? The triggerButton is working for the specific one clicked on. Currently, the triggerPosition is the issue.
$(document.body).on('click', '.triggerButton', '.triggerPosition', function() {
$('.triggerPosition').toggleClass('active');
$(this).toggleClass('active');
});
.triggerRow {
display: block;
border-bottom: 1px solid #2f2f2f;
width: 500px;
}
.triggerButton {
width: 55px;
height: 30px;
background: #4d4d4d;
border: 1px solid #2f2f2f;
border-radius: 20px;
position: relative;
box-sizing: border-box;
cursor: pointer;
}
.triggerButton.active {
background: #b82222;
}
.triggerPosition {
position: absolute;
left: -2px;
top: -2px;
width: 30px;
height: 30px;
border-radius: 50%;
background: #FFF;
border: 2px solid #4d4d4d;
transform: translateX(0);
-webkit-transition: ease 0.3s;
transition: ease 0.3s;
}
.triggerPosition.active {
border: 2px solid #b82222;
transform: translateX(21px);
-webkit-transition: ease 0.3s;
transition: ease 0.3s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="triggerRow" data-triggerid="1">
<div class="triggerButton">
<div class="triggerPosition"></div>
</div>
</div>
<div class="triggerRow" data-triggerid="2">
<div class="triggerButton">
<div class="triggerPosition"></div>
</div>
</div>
I have been for long trying to make an HTML box slide on hover and reveal the text beneath it using CSS or JS. I am new to JavaScript so it would be great if you provide a bit of explanation with the answer if its to be achieved by JS.
I have searched many sites and asked a lot of people but I haven't been able to achieve it.
I have made two DIVs, one being underneath the other
I tried writing some example text, but it appears before the box
.trigger{
width: 100px;
height: 100px;
border: 5px solid #999;
background: #ddd;
position: relative;
}
.box{
display: inline-block;
background: pink;
width: 100px;
height: 100px;
transition: transform 500ms ease-in-out;
pointer-events: none;
position: absolute;
}
.trigger:hover .box{
transform: translate(100px, 75px) rotate(40deg) ;
}
<div class="trigger">
<div class="box"></div>
</div>
All you need to do is add a z-index:
.trigger {
width: 100px;
height: 100px;
border: 5px solid #999;
background: #ddd;
position: relative;
}
.box {
display: inline-block;
background: pink;
width: 100px;
height: 100px;
transition: transform 500ms ease-in-out;
pointer-events: none;
position: absolute;
z-index: 2;
}
.content {
position: absolute;
z-index: 1;
}
.trigger:hover .box {
transform: translate(100px, 75px) rotate(40deg) ;
}
<div class="trigger">
<div class="content">Content</div>
<div class="box"></div>
</div>
Kindly check this fiddle and tell me how I can keep the second <div> at the same position even when the height of first <div> is increased. If the first <div> overlaps the second it's fine. I just don't want the second div to move at all.
https://jsfiddle.net/7v9dud8u/
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- page content -->
<div id="main-div" style="background-color: #ae2477; width:300px; height: 100px;" onclick="expandHeight();">
Main
</div>
<br/>
<div id="sub-div" style="background-color: #FF0000; width:300px; height: 100px;" onclick="reduceHeight();">
Sub
</div>
<script>
function expandHeight(){
$("#main-div").animate({height:"200px"},400);
}
function reduceHeight(){
$("#main-div").animate({height:"100px"},400);
}
</script>
Thanks.
Using CSS, you can use position: absolute;
<style>
#main-div {
position: absolute;
}
</style>
Doing this will allow the two divs to move freely around the browser window without affecting one another.
If all you want is to keep the second div from moving, then some simple css will do. Just add this to the second div's style attribute:
position:absolute; top:130px;
Try similar answer:
http://fiddle.jshell.net/MvzFC/24/
CSS:
.userWrap {
position: relative;
display: inline-block;
width: 300px;
height: 50px;
overflow: visible;
z-index: 1;
}
.userWrap:hover {
z-index: 2;
}
.user {
position: absolute;
display: inline-block;
width: 300px;
height: 50px;
margin-bottom: 5px;
background: #fff;
transition: width 0.3s, height 0.3s;
}
.user:hover {
width: 350px;
height: 200px;
background: #eee;
transition: width 0.3s ease 0.5s, height 0.3s ease 0.5s;
}
.user img {
float: left;
}
.user .name, .skills {
margin-left: 5px;
}
.user .name {
font-size: 21px;
font-weight: bold;
}