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>
Related
I have a div which when clicked, height changes so that the rest of the content becomes visible.
But I have a button inside this div which I would like to use as a "close-button", to change the height back to it's original value so the content is hidden again, but it's not working.
Here is the code:
$('.scrollClick').click(function() {
$(this).css("height", "350px");
});
$('.acceptCta').click(function() {
$('.scrollClick').css("height", "27px");
});
.scrollClick{
font-family:inherit;
background-color: #000E52;
color: #fff;
text-align: center;
display: inline-block;
position: fixed;
z-index: 9999;
cursor: pointer;
right: 20px;
padding: 5px;
border-radius: 5px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
transition: all 0.5s ease;
font-size: 16px;
max-width: 240px;
box-sizing: border-box;
text-align: center;
height: 27px;
overflow: hidden;
}
.dropContentBox{
display: inline-block;
color: #fff;
transition: all 0.5s ease;
text-align: center;
}
.acceptCta{
display: inline-block;
position: relative;
background-color: #7CBD2B;
color: #333;
font-size: 14px;
font-weight: 600;
padding: 10px 25px;
box-sizing: border-box;
border-radius: 3px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.15);
transition: all 0.5s ease;
z-index:10;
}
.acceptCta:hover{
background-color: #88D41B;
}
.acceptCta:hover .arrow{
opacity: 1.0;
}
.arrow {
border: solid #333;
border-width: 0 3px 3px 0;
display: inline-block;
opacity: 0;
padding: 3px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transition: all 0.5s ease;
}
.bouncer {
position: relative;
border: solid #fff;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transition: border-color 0.5s ease;
animation: bouncer 2s infinite;
}
#keyframes bouncer {
0% {
bottom: 0px;
}
20% {
bottom: 7px;
}
40% {
bottom: 0px;
}
60% {
bottom: 7px;
}
80% {
bottom: 0px;
}
100% {
bottom: 0px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scrollClick">
Viktig informasjon! Les her <i class="bouncer"></i>
<div class="dropContentBox"><img src="/content/cnm/137449/600x600-banner-include-info-dishwasher-2019-no.png?$banner$">
<div class="acceptCta">Jeg har lest og forstått <i class="arrow"></i></div>
</div>
</div>
</div>
So as you see in my jQuery code, I want the .scrollClick class to go back to it' original height, when clicking the .acceptCta div.
What am I doing wrong? Ty
The problem is that the click on your second button also triggers a click on your first button as the second button is within the first button. you can restructure your html or can stop propagation.
$('.scrollClick').click(function() {
$(this).css("height", "350px");
});
$('.acceptCta').click(function(e) {
e.stopPropagation();
$('.scrollClick').css("height", "27px");
});
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>
I built a sliding down search box. When you press the search icon a search box drops down, and if you press the search icon the search box will disappear again. I want another way for people to exit the search box besides just clicking on the search icon again. I also want to be able to exit the search box by clicking anywhere else on the screen besides the search box. How would I do this?
jsfiddle - https://jsfiddle.net/pkhj0frp/
jQuery('.search-icon').on('click', function() {
jQuery('.search-form').toggleClass('search-visible');
});
/*--------------------------------------------------------------
## Search
--------------------------------------------------------------*/
.search-icon {
float: right;
line-height: 70px;
cursor: pointer;
margin: 0px 34px;
}
.search-form {
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out 250ms ease;
-moz-transition: all .3s ease-in-out 250ms ease;
-ms-transition: all .3s ease-in-out 250ms ease;
-o-transition: all .3s ease-in-out 250ms ease;
transition: all .3s ease-in-out 250ms ease;
background: #fff;
height: 0;
opacity: 0;
overflow: hidden;
padding-left: calc((100vw - 1200px) / 2);
padding-right: calc((100vw - 1200px) / 2);
position: absolute;
top: calc(20% + 1px);
transform: translateX(-50%);
left: 50%;
width: 100vw;
}
.search-form.search-visible {
opacity: 1;
height: 110px;
}
.search-form.search-form-permanent {
border-bottom: none;
height: 100px !important;
left: 0;
opacity: 1 !important;
padding: 0;
position: relative;
transform: none;
width: 100%;
z-index: 5;
}
.search-form.search-form-permanent .input-group {
padding: 0;
top: 0;
}
.search-form.search-form-permanent .button-search {
color: #33f;
outline: none;
}
.search-form.search-form-permanent .button-search:hover {
color: #b4c5cd;
}
.search-form .input-group {
margin-left: 18px;
position: relative;
width: 100%;
margin-top: 10px;
}
.search-form .form-control {
background: #fff;
border: none;
border-bottom: 1px #000 solid;
border-radius: 0;
box-shadow: none;
float: left;
height: auto;
padding: 0;
outline: none !important;
width: calc(100% - 36px) !important;
font-size: 50px;
font-family: 'freightlight';
font-style: italic;
text-transform: uppercase;
color: #000;
box-shadow: none !important;
border-color: inherit !important;
-webkit-box-shadow: none !important;
-webkit-font-smoothing: antialiased;
}
.search-form .form-control:focus {
background: #fff !important;
box-shadow: none !important;
border-color: inherit !important;
-webkit-box-shadow: none !important;
}
.search-form .button-search {
background: transparent;
border: none;
float: right;
font-size: 1.4em;
padding: 6px 0 0 0;
width: 36px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search-icon"><img src="https://www.nature.org/cs/groups/webasset/documents/webasset/search-icon.png"></div>
<form role="search" method="get" class="search-form form-inline" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<div class="input-group">
<input type="search" value="" name="s" class="input-sm search-field form-control" placeholder="Search">
<button type="submit" class="button-search icon-search"></button>
</div>
</form>
I create exit the search box by clicking anywhere else on the screen and keypress shortcut.
jQuery('.search-icon').on('click', function(e) {
e.stopPropagation();
jQuery('.search-form').toggleClass('search-visible');
});
$(window).bind('keydown', function(e) {
e.preventDefault()
var keyCode = e.keyCode || e.which;
if (keyCode == 117) {
$('.search-form').toggleClass('search-visible');
}
});
$(document).click(function() {
$('.search-form').removeClass('search-visible');
})
I am breaking my head to get the div content to slide before appearing when I hover over the relevant item that is suppose to change the content of the div dynamically using jquery. The content just changes but I would like them to slide, I have tried various things but in vain.
Please excuse me if my question is silly, I am new to Jquery.
HTML
<div class="servdescripitems">
<h3>Heading 1</h3>
<p>Paragraph of first service</p>
<ul>
<li>Heading 1 list 1</li>
<li>Heading 1 list 2</li>
</ul>
<div class="button">Service 1</div>
</div>
<ul class="serviceslist">
<li class="service1"></li>
<li class="service2"></li>
<li class="service3"></li>
</ul>
Jquery
$('.service1').mouseover(function() {
$('.servdescripitems').html('<h3>Heading 1</h3><p>Paragraph of first service</p><ul><li>Heading 1 list 1</li><li>Heading 1 list 2</li></ul><div class="button">Service 1</div>');
});
$('.service2').mouseover(function() {
$('.servdescripitems').html('<h3>Heading 2</h3><p>Paragraph of second service</p><ul><li>Heading 2 list 1</li><li>Heading 2 list 2</li></ul><div class="button">Service 2</div>');
});
$('.service3').mouseover(function() {
$('.servdescripitems').html('<h3>Heading 3</h3><p>Paragraph of second service</p><ul><li>Heading 3 list 1</li><li>Heading 3 list 2</li></ul><div class="button">Service 3</div>');
});
CSS
.servdescripitems {
width: 100%;
height: 400px;
}
.servdescripitems h3 {
text-align: center;
font-family: 'Lato', sans-serif;
font-weight: bold;
font-size: 15pt;
color: #ed1f24;
margin-bottom: 10px;
}
.servdescripitems p {
font-family: 'Lato', sans-serif;
font-weight: normal;
font-size: 12pt;
margin-bottom: 15px;
}
.servdescripitems ul{
list-style-image: url("../images/servicelist.png");
padding-left: 30px;
}
.servdescripitems li {
font-family: 'Lato', sans-serif;
font-weight: normal;
font-size: 12pt;
padding-bottom: 5px;
}
.button {
border-top: 1px solid #7e7e7e;
background: #3b363b;
background: -webkit-gradient(linear, left top, left bottom, from(#7e7e7e), to(#3b363b));
background: -webkit-linear-gradient(top, #7e7e7e, #3b363b);
background: -moz-linear-gradient(top, #7e7e7e, #3b363b);
background: -ms-linear-gradient(top, #7e7e7e, #3b363b);
background: -o-linear-gradient(top, #7e7e7e, #3b363b);
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-family: 'Lato', sans-serif;
font-size: 11pt;
font-weight: bold;
text-decoration: none;
text-align: center;
width: 150px;
height: 20px;
margin: 5px auto;
}
.button:hover {
border-top-color: #ed1f22;
background: #ed1f22;
color: #ffffff;
cursor: pointer;
}
.button:active {
border-top-color: #ed1f22;
background: #ed1f22;
}
.serviceslist {
width: 80%;
margin: 0 auto;
}
.serviceslist li {
margin-bottom: 3px;
margin-right: 30px;
float: left;
}
.service1 {
background: rgba(0, 0, 0, 0) url("../images/service1.png") no-repeat scroll 0 0;
background-position: 0 0;
height: 100px;
width: 100px;
background-color: #f6f6f6;
border: 2px solid #ed1f24;
border-radius: 100px;
-webkit-transition: all 400ms linear;
-moz-transition: all 400ms linear;
-o-transition: all 400ms linear;
-ms-transition: all 400ms linear;
transition: all 400ms linear;
cursor: pointer;
}
.service2 {
height: 100px;
width: 100px;
background-color: #f6f6f6;
border: 2px solid #ed1f24;
border-radius: 100px;
-webkit-transition: all 400ms linear;
-moz-transition: all 400ms linear;
-o-transition: all 400ms linear;
-ms-transition: all 400ms linear;
transition: all 400ms linear;
cursor: pointer;
}
.service3 {
height: 100px;
width: 100px;
background-color: #f6f6f6;
border: 2px solid #ed1f24;
border-radius: 100px;
-webkit-transition: all 400ms linear;
-moz-transition: all 400ms linear;
-o-transition: all 400ms linear;
-ms-transition: all 400ms linear;
transition: all 400ms linear;
cursor: pointer;
}
I have fiddled the script here
with jQuery the simplest slides are Up and Down as they are built-in.
I've added a div inside your current service details container, so the container's size is not affected when sliding content in/out
This is how I've updated each of your mouseover functions:
$('.service1').mouseover (function() {
//check if current service shown is not the same - this avoids sliding to same content
if(inside_div.attr("current-service")!="1"){
//slideUp current content
inside_div.slideUp(function(){
//once slideUp is finished, change the content of the inside div...
inside_div.html('<h3>Heading 1</h3><p>Paragraph of first service</p><ul><li>Heading 1 list 1</li><li>Heading 1 list 2</li></ul><div class="button">Service 1</div>');
// ... then tell the div what service content it now has, and slide it back down
inside_div.attr("current-service","1").slideDown();
});
}
});
Here's an updated fiddle:
https://jsfiddle.net/g66aa0oo/
Let me know if any further explanation is needed.
Also See: https://api.jquery.com/slideUp/
If you really want left/right sliding, I'd recommend looking at a carousel effect plug-in such as slick
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%;
}