Stop hover after specific time period CSS or Pure JS

Stop hover after specific time period CSS or Pure JS - javascript

I'm trying to find a way to show an hover for a specific time and stop it.
I'd like to show a background for 1 second and then hide it even when the mouse is still on.
My preferences are in css or javascript but I'd like to keep jquery out of my code.
Here is a JSFiddle of my current code.
#social {
min-width: 350px;
font-size: 11pt;
text-align: center;
width: 60%;
margin: auto;
word-spacing: 25pt;
}
#social a {
padding: 4px 9px 4px 9px;
color: #999999;
text-decoration: none;
}
#social a:hover {
color: transparent;
background: red;
}

You can use CSS animations, something like:
#social {
min-width: 350px;
font-size: 11pt;
text-align: center;
width: 60%;
margin: auto;
margin-top: 3vh;
word-spacing: 25pt;
}
#social a {
padding: 4px 9px 4px 9px;
color: #999999;
text-decoration: none;
}
#social a:hover {
animation-name: background;
animation-duration: 1s;
}
#keyframes background {
from {
background-color: transparent;
color: #999;
}
to {
background-color: red;
color: white;
}
}
<div id="social">
showreel
linkedin
instagram
vscocam
</div>

#social {
min-width: 350px;
font-size: 11pt;
text-align: center;
width: 60%;
margin: auto;
margin-top: 3vh;
word-spacing: 25pt;
}
#social a {
padding: 4px 9px 4px 9px;
color: #999999;
text-decoration: none;
}
#social a:hover {
color: transparent;
animation: backg 5s;
-webkit-animation: backg 5s;
}
#keyframes backg
{
0% {background: red;}
50% {background: red;}
100% {background: white;}
}
#-webkit-keyframes backg
{
0% {background: red;}
50% {background: red;}
100% {background: white;}
}
<div id="social">
showreel
linkedin
instagram
vscocam
</div>

You can use an animation and keyframes to do that. In this case, your animation would look like:
#keyframes hover-effect {
0% {
background-color: transparent;
color: #999999;
}
1% {
color: transparent;
background: red;
}
100% {
color: transparent;
background: red;
}
}
.class:hover {
animation: hover-effect 1s ease;
}
Here is the jsfiddle updated: https://jsfiddle.net/gk3nfmnj/1/

You can use css animation to get it.
like following
#social {
min-width: 350px;
font-size: 11pt;
text-align: center;
width: 60%;
margin: auto;
margin-top: 3vh;
word-spacing: 25pt;
}
#social a {
padding: 4px 9px 4px 9px;
color: #999999;
text-decoration: none;
}
#social a:hover {
animation: hover 2s;
}
#keyframes hover {
from {
background: transparent;
}
to {
background: red;
}
}
<div id="social">
showreel
linkedin
instagram
vscocam
</div>

Related

How can i close this navbar when user clicks a link on mobile view?

The navbar is not closing when a user clicks on links to navigate through website?
I had tried to add a click event listener to every link to close navbar but it didn't work!
Also the hamberberger menu icon in active position i.e. X is not aligned well. But the major preblem is to collapse the navbar when clicked.
$(document).ready(function() {
$('.container').click(function() {
$('.navbar .menu').toggleClass("active");
});
});
function myFunction(x) {
x.classList.toggle("change");
}
#media (max-width: 1104px) {
.about .about-content .left img {
height: 350px;
width: 350px;
}
}
#media (max-width: 991px) {
.max-width {
padding: 0 50px;
}
}
#media (max-width: 947px) {
.menu-btn {
display: block;
z-index: 999;
}
/* .menu-btn i.active:before {
content: "\f00d";
} */
.navbar .menu {
position: fixed;
height: 100vh;
width: 100%;
left: -100%;
top: 0;
background: #111;
text-align: center;
padding-top: 80px;
transition: all 0.3s ease;
}
.navbar .menu.active {
left: 0;
}
.navbar .menu li {
display: block;
}
.navbar .menu li a {
font-family: 'Josefin Sans', sans-serif;
display: inline-block;
margin: 20px 0;
font-size: 25px;
}
}
.navbar {
position: fixed;
width: 100%;
z-index: 999;
padding: 30px 0;
font-family: 'Ubuntu', sans-serif;
transition: all 0.3s ease;
}
.navbar.sticky {
padding: 15px 0;
background: crimson;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a {
position: relative;
color: #fff;
font-size: 35px;
font-weight: bold;
text-transform: uppercase;
font-family: 'Orbitron', sans-serif;
border: 3px solid #fff;
padding: 0px 10px;
text-shadow: 0px 4px 5px rgba(0, 0, 0, 0.5);
box-shadow: inset 3px 1px 8px 2px rgb(0 0 0 / 50%);
letter-spacing: 2px;
}
.navbar .logo a::after {
content: 'PANDEY';
position: absolute;
font-size: 15px;
font-weight: bold;
bottom: -12px;
/* color: crimson; */
right: 15px;
background: crimson;
border-radius: 5px;
/* box-shadow: inset 3px 1px 8px 2px rgb(0 0 0 / 50%); */
padding: 0px 4px;
letter-spacing: 2px;
}
.navbar .logo a span {
color: crimson;
transition: all 0.3s ease;
}
.navbar.sticky .logo a::after {
border-radius: 4px;
background: #fff;
color: crimson;
text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.9);
}
.container {
display: inline-block;
cursor: pointer;
box-sizing: border-box;
}
.bar1 {
width: 35px;
height: 3px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.bar2 {
width: 25px;
height: 3px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.bar3 {
width: 15px;
height: 3px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
transform: translate(0, 11px) rotate(-45deg);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
transform: translate(0, -6px) rotate(40deg);
width: 35px;
}
.navbar.sticky .logo a span {
color: #fff;
}
.navbar .menu li {
list-style: none;
display: inline-block;
}
.navbar .menu li a {
font-family: 'Josefin Sans', sans-serif;
display: block;
color: #fff;
font-size: 18px;
font-weight: 500;
margin-left: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
position: relative;
color: #fff;
}
.navbar.sticky .menu li a:hover {
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1 /jquery.min.js"></script>
<nav class="navbar">
<div class="max-width">
<div class="logo">Chhailbihari</div>
<ul class="menu">
<li class="menu-btn">Home</li>
<li class="menu-btn">About</li>
<li class="menu-btn">Services</li>
<li class="menu-btn">Skills</li>
<li class="menu-btn">Contact</li>
</ul>
<div class="menu-btn">
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
</div>
</nav>

i think you have make menu which is responsive - i.e. works on mobile also.
for this use #media screen css
show hamburger icon when width of window is like tab or mobile else hide this icon.
in menu div (mobile or tab) add close icon to close menu.
hope this solution helps
you may refer below code for navbar for mobile view with hamburger icon.
body
{
margin: 0;
padding: 0;
background: blue;
color: #cdcdcd;
}
#togglmenu
{
display: block;
position: relative;
top: 50px;
left: 50px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#togglmenu a
{
text-decoration: none;
color: #232323;
transition: color 0.3s ease;
}
#togglmenu a:hover
{
color: tomato;
}
#togglmenu input
{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0; /* hide this */
z-index: 2; /* and place it over the hamburger */
-webkit-touch-callout: none;
}
#togglmenu span
{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#togglmenu span:first-child
{
transform-origin: 0% 0%;
}
#togglmenu span:nth-last-child(2)
{
transform-origin: 0% 100%;
}
#togglmenu input:checked ~ span
{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
#togglmenu input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#togglmenu input:checked ~ span:nth-last-child(2)
{
transform: rotate(-45deg) translate(0, -1px);
}
#menu
{
position: absolute;
width: 300px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li
{
padding: 10px 0;
font-size: 22px;
}
#togglmenu input:checked ~ ul
{
transform: none;
}
<nav role="navigation">
<div id="togglmenu">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Info</li>
<li>Contact</li>
</ul>
</div>
</nav>

jQuery .Click event trigger goes beyond input element that it's assigned to

I have this problem where an input .remove-button is not working as intended. When I click on the div(.tag) that contains .remove-button or around it, the .remove-button code will trigger, even though it was only set to it. Also for some reason, the code seems to be running multiple times deleting everything in the array
edit:
it seems to be triggering the click when I click anywhere inside the #course-tag-container.
course_splice.
script:
//...
jQuery("input.remove-button").click((event)=>{
//find course text
course_inv.splice( course_inv.indexOf(jQuery(event.target).closest(".tag").find(".course").text()), 1
);
event.target.closest(".tag").remove();
});
//...
html for tag:
<div class="tag">
<div class="course-wrap">
<p class="course">LEED v4 Project Management</p>
<div class="input-wrapper">
<input type="image" name="removeButton"
src="http://builtenvironmentplus.org/wp-content/uploads/2021/07/course_remove.svg"
alt="remove button" class="remove-button">
</div>
</div>
</div>
screenshot of what it looks like:
full script:
<script>
let course_inv = [];
jQuery( document ).ready(function() {
//course field
let course_field = document.getElementById("course-field");
course_field.placeholder = "LEED v4 Project Management,LEED for Homes Workshop: Part2,...";
jQuery(".wpcf7").wrap('<div id="form-container"/>');
//add tag container
jQuery(".wpcf7").before('<label class="tag-label">Selected Course<span style="font-size: 18px">(s)</span><span style="color:red;">*</span><div id="course-tag-container"/></label>');
jQuery("#form-container").append('<button id="fake-submit" type="button">Send</button>');
jQuery("#fake-submit").click((event)=>{
jQuery("#course-field").val("");
jQuery("#course-field").val(course_inv.join(", "));
jQuery("#submit-button").click();
})
});
jQuery(document).on('ready ajaxComplete', function () {
//add button functionality
jQuery(".et_pb_post").wrap('<div class="course-wrapper" />');
jQuery(".et_pb_post").after('<input type="image" name="addButton" src="http://builtenvironmentplus.org/wp-content/uploads/2021/07/course_add.svg" width="100px" height="auto" alt="add button" class="add-button">');
jQuery(".add-button").wrap('<div/>');
//adding button functionality
jQuery(".add-button").click((event)=>{
let course_name = jQuery(event.target).closest(".course-wrapper").find(".entry-title").text();
if(course_inv.indexOf(course_name) === -1){
course_inv.push(course_name);
jQuery("#course-tag-container").append('<div class="tag"><div class="course-wrap"><p class="course">'+course_name+'</p><div class="input-wrapper"><input type="image" name="removeButton" src="http://builtenvironmentplus.org/wp-content/uploads/2021/07/course_remove.svg" alt="remove button" class="remove-button"> </div></div></div>');
jQuery("input.remove-button").click((event)=>{
console.log("start------------\n"+"courses:" +course_inv.join(","));
//find course text
console.log( "index: "+course_inv.indexOf(jQuery(event.target).closest(".tag").find(".course").text()) );
course_inv.splice(
course_inv.indexOf(jQuery(event.target).closest(".tag").find(".course").text()), 1
);
console.log("courses:" +course_inv.join(",")+"\n end----------------");
event.target.closest(".tag").remove();
});
}else{
jQuery(".tag:contains('"+course_name+"')").addClass('animate')
jQuery(".tag:contains('"+course_name+"')").on("animationend", ()=>{
jQuery(".tag:contains('"+course_name+"')").removeClass('animate');
});
}
})
});
</script>
CSS:
input,select{
border-radius: 20px !important;
padding-left: 20px !important;
padding-right: 20px !important;
margin-bottom: 10px !important;
font-size: 18px !important;
}
ul input:nth-of-type(2){
border:none;
}
.searchandfilter p
{
margin-top: 1em;
display: block !important;
}
.searchandfilter ul
{
display: block !important;
}
.searchandfilter h4
{
margin:20px 0;
font-size:20px !important;
}
.widget-area .searchandfilter li, .widget-area .searchandfilter p
{
display:block !important;
}
/*style the wp-pagenavi pagination links*/
.wp-pagenavi a,
.wp-pagenavi span {
color: #000000;
background: #f1f3f5;
font-size: 1em !important;
line-height: 1em;
font-weight: bold !important;
padding: 0.45em 0.8em !important;
border-radius: 100px;
transition: all .5s;
}
/*style the wp-pagenavi current page number*/
.wp-pagenavi span.current {
color: #ffffff !important;
background: #0070fc !important;
font-size: 17px !important;
border-radius: 100px;
}
/*style the wp-pagenavi pagination links on hover*/
.wp-pagenavi a:hover {
color: #ffffff!important;
background: #0070fc!important;
}
/*style the wp-pagenavi pages text*/
.wp-pagenavi .pages {
background: none;
}
/*remove border and center the wp-pagenavi links*/
.wp-pagenavi {
border-top: none;
text-align: center;
}
/*contact form css*/
.wpcf7 {
background-color: #DBDBDB;
border-radius: 5px;
}
.wpcf7-form{
margin-left: 0px;
margin-right: 0px;
margin-top: 15px;
margin-bottom: 5px;
padding: 0px;
}
#course-field{
background-color: #deddbd;
}
.wpcf7-textarea {
width: 100% !important;
}
.wpcf7 input {
margin-top: 5px;
width: 100%;
height: 43px;
font-size: 17px !important;
padding-left: 10px;
border-radius: 1px !important;
margin-bottom: 5px !important;
}
.wpcf7 label{
color: black !important;
font-size: 19px;
}
.textarea{
height: 150px !important;
margin-bottom: -10px;
font-family: verdana !important;
}
#submit-button{
background: #0078d3;
border: 0px solid !important;
border-radius: 5px !important;
font-size: 18px;
color: white;
transition: background-color 250ms;
cursor: pointer;
margin-bottom: -10px !important;
}
#submit-button:hover {
background-color: #3382BE;
}
.title{
display: inline-block;
}
.color{
background-color: #ededed !important;
}
.course-wrapper{
display: flex;
}
.add-button{
transition: transform 250ms;
margin-top: 50%;
}
.add-button:hover{
transform: rotate(-90deg);
background: url(black.png);
filter: invert(15%) sepia(100%) saturate(7499%) hue-rotate(196deg) brightness(94%) contrast(102%);
}
#blog-container{
left: 10px;
}
#fake-submit{
width: 100%;
border: none;
height: 44px;
border-radius: 5px;
background-color: #005DA4;
color: white;
font-size: 15px;
margin-top: 36px;
transition: background-color 250ms;
cursor: pointer;
margin-top: -14px;
}
#fake-submit:hover{
background-color: #3382BE;
}
/*css for the tags*/
.tag {
background-color: rgb(220 220 220);
display: inline-block;
margin-bottom: 5px;
border-radius: 25px;
}
.course{
border-radius: 15px;
margin:0px;
margin-top: 15px;
margin-bottom: 15px;
font-size:15px;
margin-left:15px !important;
}
.input-wrapper{
margin-left: -10px;
margin-right: -15px
}
.remove-button{
width:60px !important;
height:auto;
margin-top:10% !important;
margin-bottom:0px !important;
}
.course-wrap{
display:flex;
align-items: center;
margin-bottom:-10px;
margin-top:-10px;
}
#course-tag-container{
margin-top: 10px;
margin-bottom: -10px !important;
background-color: white;
padding: 10px;
padding-top: 15px;
padding-bottom: 15px;
border-radius: 1px;
border: #BBBBBB 1px solid;
min-height: 43px;
}
#form-container{
background-color: #DBDBDB;
padding: 10px;
padding-top: 12px;
border-radius: 5px;
}
#course-field, #submit-button{
display: none;
}
.tag-label {
color: black;
font-size: 19px;
}
#keyframes highlight-tag {
50%{
background-color: #75ACD8;
}
100%{
background-color: #DBDBDB;
}
}
.animate{
animation: highlight-tag 1s ease-in-out;
}

It was the label all along!
In this line I wrap the entire container that's holding my tags with a label. This for some reason expands my iput to the entire label region.
jQuery(".wpcf7").before('<label class="tag-label">Selected Course<span style="font-size: 18px">(s)</span><span style="color:red;">*</span><div id="course-tag-container"/></label>');
When changing the label to a paragraph and stopping it right before the div, it worked as intended.
jQuery(".wpcf7").before('<p class="tag-label">Selected Course<span style="font-size: 18px">(s)</span><span style="color:red;">*</span></p><div id="course-tag-container"/>');

display inline-block not working on safari

is this because of the inline block issue that safari not support ?
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
border: none;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}
#package-search input[type=search] {
color: transparent;
display: inline-block;
width: 80px;
height: 56px;
background: #fff url(assets/img/img/icon/search-b.png) no-repeat 30px 18px;
background-size: 23px auto;
border-radius: 28px;
cursor: pointer;
margin-top: 10px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
padding-left: 0;
}
#package-search input[type=search]:hover {
background-color: pink;
}
#package-search input[type=search]:focus {
width: 380px;
padding-left: 70px;
padding-right: 20px;
color: #343434;
background-color: pink;
cursor: auto;
}
#package-search input::-moz-placeholder {
color: transparent;
}
#package-search input::-webkit-input-placeholder {
color: transparent;
}
this button search has transitioned to get more width when we hover or click and it gonna block another div beside that button search icon
but on safari it doesn't block another div, the result that button box when we hover or click, it gonna be behind on that another div
what cause of this ? do I missing something?
look at this issue
look here and click

Search box looks different on mobile, cannot get it to be in the center of the page nor reduce the size of the search box

My site looks different on mobile, the hotel search box does not show up in it's entirety, so the labels at the bottom get cut off. Also I tried to add the following CSS code, it helped to center the hotel search box but I cannot get it to move the box closer to the header and make it smaller so that when I click on options they are not cut off:
#media only screen and (max-width:767px){
.containerBox {
width: 100%!important;
}
}
Here is the link and screenshot of what I am talking about.
Hotel Search box on the home page.
I will include the full code below.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#selectCountry:ACTIVE, #destino:ACTIVE, #selectCountry:FOCUS, #destino:FOCUS {
color: #FFFFFF;
background-color: #ed8323; }
.select-complementarias {
border: 0px solid #dadada !important;
border-radius: 3px !important;
padding: 5px !important;
font-weight: bold !important;
color: #424547 !important;
width: 100%; }
.select-complementarias:ACTIVE, .select-complementarias:FOCUS {
color: #FFFFFF;
background-color: #ed8323; }
.searchCity {
min-width: 200px;
width: 100%;
color: #424547; }
.warning {
color: #FF0000 !important;
font-size: 14px; }
.numInputHidden, .elementHidden {
display: none; }
.divNewLine {
clear: left;
padding: 3px; }
.divCell {
float: left;
margin-right: 2px;
max-width: 236px;
width: 100%;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 3px; }
.cell-complementarias {
float: left;
margin-right: 2px;
width: 250px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px; }
.divCell-auto {
float: left;
margin-right: 2px;
width: 100%;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 3px; }
.divCellSmall {
float: left;
margin-right: 2px;
width: 110px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 3px; }
.divCell-20px {
float: left;
margin-right: 2px;
width: 20px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 3px; }
.divCell-50px {
float: left;
margin-right: 2px;
width: 50px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 3px; }
.divCell-130px {
float: left;
margin-right: 2px;
width: 130px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 3px; }
.divCell-100px {
float: left;
margin-right: 2px;
width: 100px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 3px; }
.time-hours {
width: 100px !important; }
.time-minutes {
width: 100px !important; }
.hoursFligths {
display: inline;
margin-left: 11px;
width: 130px !important; }
#selectsMenores select {
width: 50px; }
.textHidden {
display: none; }
.ui-datepicker {
font-size: 11px; }
.ui-widget {
font-size: 12px; }
.containerBox input {
border: 0px solid #dadada;
border-radius: 3px;
padding: 5px;
/*font-weight: bold;*/
line-height:21px!important;
width: 95%!important;
}
.containerBox select {
border: 0px solid #dadada !important;
border-radius: 3px !important;
padding: 5px !important;
/*font-weight: bold !important;*/
color: #424547 !important;
width: 100%;
-moz-appearance: none;
cursor: pointer;
height:auto;
}
#selectCountry {
width: 95% !important; }
.input-date {
width: 100%;
color: #424547; }
.input-date-home {
width: 357px !important;
color: #424547; }
.input-date:ACTIVE, .input-date-home:FOCUS, .input-date-home:ACTIVE, .input-date-home:FOCUS {
color: #FFFFFF;
background-color: #ed8323; }
.ui-widget {
font-weight: bold !important; }
.ui-widget-content {
font-weight: bold !important;
border: 0px solid #eee; }
.container-box-ticket, .container-box-hotel {
width: 375px !important; }
.container-box-ticket {
width: 375px !important; }
.containerBox {
font-family: arial;
border: 0px solid #dadada;
width: 512px!important;
background-color: #262626e8;
color: #FFFFFF;
font-size: 17px;
/*font-weight: bold;*/
padding: 10px;
position: relative; }
.containerBox label {
font-size: 12px;
font-weight: bold;
color: #fff;
display: inline-block;
}
.containerBox input:FOCUS {
border: 0px solid #dadada;
border-color: #53a69d;
box-shadow: 0 0 3px #000000;
background-color: #ed8323;
color: #FFFFFF; }
select:FOCUS, .containerBox input:ACTIVE, select:ACTIVE {
border: 0px solid #dadada !important;
border-color: #ed8323 !important;
box-shadow: 0 0 3px #000000 !important;
background-color: #ed8323 !important;
color: #FFFFFF !important; }
.containerBox button {
border: 0px solid #D8D8D8;
border-radius: 3px;
background-color: #F2F2F2;
font: arial;
font-size: 12px;
cursor: pointer;
width: 100px;
height: 35px!important; }
.containerBox button:HOVER {
border-radius: 3px;
border-color: #CED8F6;
background-color: #D8D8D8; }
#divbuttonverpreciosbuscando {
display: none; }
.spinner {
margin: 10px auto;
width: 50px;
height: 40px!important;
text-align: center;
font-size: 10px; }
.spinner > div {
background-color: #333;
height: 100%!important;
width: 6px;
display: inline-block;
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
animation: sk-stretchdelay 1.2s infinite ease-in-out; }
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s; }
.spinner .rect3 {
-webkit-animation-delay: -1s;
animation-delay: -1s; }
.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s; }
.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s; }
#-webkit-keyframes sk-stretchdelay {
0%, 40%, 100% {
-webkit-transform: scaleY(0.4); }
20% {
-webkit-transform: scaleY(1); } }
#keyframes sk-stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4); }
20% {
transform: scaleY(1);
-webkit-transform: scaleY(1); } }
hr {
color: #ed8323;
border-color: #ed8323; }
.titulo {
font-size: 20px;
text-align: left;
margin-left: -15px;
margin-right: -15px; }
.titulo-segundo {
font-size: 12px;
margin-left: -8px;
margin-right: 38px;
margin-top: -28px;
position: fixed;
text-align: left;
width: 225px;
z-index: 110; }
#ver_precios, .buttonForm {
background-color: #ed8323 !important;
color: #FFFFFF !important;
font-weight: bold !important;
opacity: 1 !important;
border: 0 solid #d8d8d8;
border-radius: 3px;
cursor: pointer;
font-size: 12px;
width: 100px;
height: 35px;!important; }
.ui-datepicker {
background: #ffffff;
border: 1px solid #555;
color: #EEE;
border: 0px;
box-shadow: 0 0 3px #000000; }
.ui-datepicker-header {
position: relative;
padding-bottom: 10px;
background: #ffffff !important;
border: 0px !important; }
.ui-widget-header {
background: #ffffff !important; }
.ui-dialog .ui-dialog-titlebar {
color: #FFFFFF;
font-size: 16px;
font-weight: bold !important;
background: #262626; }
.ui-dialog .ui-dialog-titlebar .ui-button {
color: #FFFFFF !important;
font-size: 16px !important;
font-weight: bold !important;
background: #262626 !important; }
.ui-dialog .ui-dialog-titlebar .ui-state-focus {
background: red; }
.ui-dialog {
background: #262626;
position: fixed; }
.ui-datepicker-title {
background-color: #ffffff;
line-height: 1em !important; }
.ui-datepicker-month {
color: #ed8323;
padding: 0px !important;
margin: 0px !important;
background-color: #ffffff; }
.ui-datepicker-year {
color: #ed8323;
background-color: #ffffff; }
.ui-datepicker .ui-state-default {
background: #ffffff !important;
border: 0px solid #d3d3d3 !important; }
.ui-datepicker, .ui-datepicker .ui-datepicker-calendar .ui-state-default {
color: #000000 !important;
text-align: center; }
.ui-state-active {
border-radius: 0 !important;
background: #ed8323 !important;
cursor: pointer !important;
text-decoration: none !important; }
.ui-state-focus {
border-radius: 0 !important;
cursor: pointer !important;
text-decoration: none !important;
border: 0px; }
.ui-state-focus:HOVER {
border-color: transparent;
color: #FFFFFF !important;
background: #1ec7e6 !important; }
.ui-menu, .ui-menu-item {
background: #ed8323 none repeat scroll 0 0 !important; }
.ui-datepicker-calendar td a.ui-state-hover {
background: #ed8323 none repeat scroll 0 0 !important; }
.ui-datepicker-calendar td a.ui-state-active {
background: #ed8323 none repeat scroll 0 0 !important; }
.ui-datepicker-calendar td a.ui-state-focus {
background: #ed8323 none repeat scroll 0 0 !important; }
.ui-datepicker-title {
margin: 0 2.3em;
text-align: center; }
.ui-datepicker-year {
display: block;
font-size: 9px;
margin-left: -5px; }
.ui-datepicker table {
border-collapse: separate;
font-size: 0.9em; }
.calendarioIcon {
height: 19px!important;
margin: 6px 149px;
position: absolute; }
.close-dialog-icon {
cursor: pointer;
height: 51px;
margin: -22px 525px 0;
position: absolute; }
.calendarioIcon-hotel {
height: 19px!important;
margin: 3px 20px;
position: absolute;
right: 5%; }
.calendarioIcon-tickets {
height: 19px!important;
margin: 6px 438px;
position: absolute; }
.calendario-icon-homes {
height: 19px!important;
margin: 3px 440px;
position: absolute; }
.calendario-icon-arrow {
height: 25px!important;
margin: 3px 175px;
position: absolute; }
.ui-autocomplete-loading {
background: white url("material/ring-alt.svg") right center no-repeat;
background-size: 20px 20px; }
.spinner {
margin: 10px auto;
width: 50px;
height: 40px;
text-align: center;
font-size: 10px; }
.spinner > div {
background-color: #333;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
animation: sk-stretchdelay 1.2s infinite ease-in-out; }
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s; }
.spinner .rect3 {
-webkit-animation-delay: -1s;
animation-delay: -1s; }
.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s; }
.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s; }
#-webkit-keyframes sk-stretchdelay {
0%, 40%, 100% {
-webkit-transform: scaleY(0.4); }
20% {
-webkit-transform: scaleY(1); } }
#keyframes sk-stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4); }
20% {
transform: scaleY(1);
-webkit-transform: scaleY(1); } }
#divbuttonverpreciosbuscando {
display: none; }
.ui-corner-all {
border: 0px; }
#airline {
width: 100%!important; }
.label-hiden {
display: none !important; }
.containerBox-header {
opacity: 0.9 !important;
/* border-top-left-radius: 10px;
border-top-right-radius: 10px;*/ }
.containerBox-footer {
opacity: 1 !important;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-top-left-radius: 0px !important;
border-top-right-radius: 0px !important;
/* padding-top: 9px !important;
padding-bottom: 20px !important;*/
transition-duration: 0.4s;
transition-property: background;
/* height: 5px !important;*/
background-color: #ed8323 !important;
font-size: 14px;
font-weight: 500 !important; }
.containerBox-footer:HOVER {
background-color: #ed8323 !important;
cursor: pointer; }
.buscar-label {
margin-top: 5px !important; }
.ui-dialog .ui-dialog-titlebar, .ui-dialog label {
background: #262626 none repeat scroll 0 0 !important;
color: #FFFFFF; }
.error-input {
border-color: #FF0000;
box-shadow: 0 0 1em red;
background-color: #FBEFF2; }
.error-input:-ms-input-placeholder {
color: red !important; }
.error-input::-moz-placeholder {
color: red !important; }
.error-input:-moz-placeholder {
color: red !important; }
.error-input::-webkit-input-placeholder {
color: red !important; }
.containerBox input::-webkit-input-placeholder {
color: #000000; }
.containerBox input:-ms-input-placeholder {
color: #000000; }
.containerBox input::-moz-placeholder {
color: #000000; }
.containerBox input:focus::-webkit-input-placeholder {
color: #000000 !important; }
.containerBox input:focus:-ms-input-placeholder {
color: #000000 !important; }
.containerBox input:focus::-moz-placeholder {
color: #000000 !important; }
#not-found-sources {
color: #FFFFFF; }
.ui-autocomplete-input .ui-corner-all {
color: #000000 !important; }
.ui-autocomplete a {
color: #000000 !important; }
.box_float{
display: block;
position: absolute;
top: 90px;
z-index: 2;
}
li{
list-style-type: none!important;
margin: 0;
padding: 0;
}
.caja_fondo{
height:auto;
font-family: arial;
border: 0px solid #dadada;
opacity: 0.8;
color: #FFFFFF;
font-size: 17px;
/*font-weight: bold;*/
padding: 15px;
position: relative;
}
.catalog-area {
display: inline-block;
background-color: rgba(39,46,59,.8);
height: auto;
padding: 1px 1px 1px 1px;
width: 100%;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
/*.imagenes_circuitos {
height: 456px;
width: 370px;
padding: 1px 1px 1px 1px;
overflow-y: scroll;
}
.imagenes_circuitos_min{
padding-top: 20px;*/
}
.circuit_catalog {
display: table-cell;
z-index: 9;
padding: 1px 1px 1px 1px;
font-family: Arial, Helvetica, sans-serif;
/*font-weight: bold;*/
display: inline-block;
text-align: center;
color: gray;
display: inline-block;
border-radius: 25px;
vertical-align: middle;
border-radius: 25px;
}
.circuit_catalog a {
color: #3c5c8b;
font-weight: 700;
text-decoration: none;
outline: none;
font-family: Arial, Helvetica, sans-serif;
line-height: 12px;
/*font-weight: bold;*/
display: inline-block;
text-align: center;
color: gray;
display: inline-block;
}
/*.img_circuits {
opacity: .8;
width: 160px;
height: 200px;
border-radius: 15px;
box-shadow: 2px 2px 2px #3C5C8B;*/
}
.containerBoxCircuits {
font-family: arial;
border: 0px solid #dadada;
background-color: #262626;
color: #ffffff;
font-size: 17px;
/*font-weight: bold;*/
padding-left: 15px;
padding-right: 15px;
display: inline-block;
float: left;
opacity: .8;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.container-box-circuit{
margin-left:20px;
display:none;
}
/*.img_circuits_min {
width: 80px;
height: 100px;
border-radius: 15px;
box-shadow: 2px 2px 2px #3C5C8B;*/
}
.circuit_catalog_min {
font-family: Arial, Helvetica, sans-serif;
line-height: 12px;
/*font-weight: bold;*/
width: 88px;
height: 110px;
display: inline-block;
text-align: center;
color: gray;
display: inline-block;
border-radius: 25px;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: box-shadow;
transition-property: box-shadow;
}
.celdas {
float: left;
padding: 5px;
}
.containerBox-circuits {
padding-bottom: 20px;
}
/*.img_circuits_botmin {
background-color: #d42729;
position: absolute;
float: left;
left: 4px;
bottom: 10px;
width: 80px;
height: 23px;
line-height: 10px;
font-size: 7px;
color: white;
font-weight: inherit;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;*/
}
.textcatmin {
position: absolute;
float: left;
padding-top: 0px;
left: 0px;
width: 80px;
height: 22px;
line-height: 7px;
font-size: 7px;
color: white;
font-weight: inherit;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
overflow: hidden;
}
.containerBoxAll {
width: 512px!important;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.tab-content .tab-menu button {
color: #fff;
cursor: pointer;
opacity: 1 !important;
padding-top: 15px !important;
padding-bottom: 15px !important;
transition-duration: 0.4s;
transition-property: background;
height: 5px !important;
background-color: #ed8323 !important;
width: 81px;
padding: 10px;
}
.tab-content .tab-menu button:HOVER {
background-color: #ed8323 !important;
cursor: pointer;
color:#000;
}
.tab-content .tab-menu button.active {
background-color: #262626!important;
color: #ed8323 ;
}
span.titulo-tabs {
word-wrap:normal;
float:left;
line-height: 0px;
}
.footerAll {
width: 512px!important;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.form-service{
margin-left: 13px;
margin-right: -13px;
}
.CircuitsAll {
width: 511px!important;
opacity: 1!important;
}
.CircuitsAll:HOVER {
opacity: 1!important;
}
.containerBoxCircuitsAll:HOVER {
opacity: 1!important;
}
.containerBoxCircuitsAll{
width: 541px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.tab-content{
width:100%;
float:left;
}
input[type="radio"], input[type="checkbox"] {
margin-right: 0.5em;
width: 15px!important;
}
/*# sourceMappingURL=comun.css.map */

Use these css
#media(max-width:767px){
.html_header_transparency #top .avia-builder-el-0 .container, .html_header_transparency #top .avia-builder-el-0 .slideshow_caption {
padding-top: 0px;
}
#top .input-text, #top input[type="text"], #top input[type="input"], #top input[type="password"], #top input[type="email"], #top input[type="number"], #top input[type="url"], #top input[type="tel"], #top input[type="search"], #top textarea, #top select {
margin-bottom: 10px;
height: 39px;
}
.avia-slideshow li img {
display: none;
}
}
for center the box use it.
.containerBox {
margin: auto;
}
.containerBox-header {
opacity: 0.9 !important;
margin-top: 70px;
}
.avia_codeblock_section .avia_codeblock .widget {
top: 0;
left: 0;
}
for mobile view
#media (max-width: 767px)
#wrap_all #main #after_full_slider_1 .container .av-content-full .post-entry .entry-content-wrapper .avia_codeblock_section .avia_codeblock .widget {
width: 100% !important;
}
.avia_codeblock_section .avia_codeblock .widget {
left: 0;
top: 0;
}
}
if it's not work use !important after css like this - display: none !important;

Target Nav Menu with JQuery

I'm trying to target an href button and a menu to fade in as the page loads. I'm having trouble trying to figure out the exact code since it is placed inside so many different tags and I'm fairly new to JS and JQuery. I have included a fiddle with all the code.
So far I have managed this code:
HTML:
<div id="ImageMain">
<ul id="nav">
<li id="navm">Men</li>
<li id="navm">Women</li>
<li id="navm">Contact</li>
</ul>
Shop Now
</div>
<script>
$(document).ready(function() {
$("#navm").fadeIn(500);
});
$(document).ready(function() {
$("#homeb").fadeIn(500);
});
</script>
CSS:
#ImageMain {
background-image: url(http://juliapavel.de/wp-content/uploads/2016/07/DSC1139-1.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 1400px;
text-align: center;
color: black;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
position: relative;
}
#ImageMain h1 {
padding-bottom: 10px;
padding-top: 450px;
}
#homeinfo {
padding-bottom: 15px;
}
#brand {
float: left;
padding: 100px;
}
#Pronto {
width: 150px;
}
#ImageMain #brand a {
font-size: 20px;
transition-duration: 1s;
}
#nav #navm a {
transition-duration: 1s;
}
#brand a:hover {
opacity: .3;
transition-duration: 1s;
}
#navm a:hover {
opacity: .3;
transition-duration: 1s;
}
#navm {
margin-right: auto;
margin-left: auto;
display: none;
}
#homeb {
text-decoration: none;
color: black;
border-radius: 5px;
border: solid 1px black;
padding: 12px;
transition-duration: 1s;
}
#wrapper a {
text-decoration: none;
border: solid 1px #141414;
border-radius: 5px;
padding: 10px;
color: #141414;
}
#homeb:hover {
opacity: .3;
transition-duration: 1s;
}
#wrapper a:hover {
opacity: 0.7;
transition-duration: 0.8s;
}
h3 {
color: white;
}
#nav {
list-style: none;
padding: 0;
padding-top: 5px;
text-align: center;
}
#nav li {
display: inline-block;
padding: 7px;
}
#nav a {
text-decoration: none;
color: black;
font-size: 15px;
}
https://jsfiddle.net/tux41Lvp/

You need to create a parent div to the button anchor:
<div id="link">
Shop Now
</div>
You need to hide the target elements( you have to target parents ):
#nav{ display:none;}
#link{ display:none;}
Look at js on the working snippet
$(document).ready(function() {
$("#nav").fadeIn(500);
$("#link").fadeIn(1000);
});
#ImageMain {
background-image: url(http://juliapavel.de/wp-content/uploads/2016/07/DSC1139-1.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 1400px;
text-align: center;
color: black;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
position: relative;
}
#ImageMain h1 {
padding-bottom: 10px;
padding-top: 450px;
}
#homeinfo {
padding-bottom: 15px;
}
#brand {
float: left;
padding: 100px;
}
#Pronto {
width: 150px;
}
#ImageMain #brand a {
font-size: 20px;
transition-duration: 1s;
}
#nav #navm a {
transition-duration: 1s;
}
#brand a:hover {
opacity: .3;
transition-duration: 1s;
}
#navm a:hover {
opacity: .3;
transition-duration: 1s;
}
#navm {
margin-right: auto;
margin-left: auto;
display: none;
}
#homeb {
text-decoration: none;
color: black;
border-radius: 5px;
border: solid 1px black;
padding: 12px;
transition-duration: 1s;
}
#wrapper a {
text-decoration: none;
border: solid 1px #141414;
border-radius: 5px;
padding: 10px;
color: #141414;
}
#homeb:hover {
opacity: .3;
transition-duration: 1s;
}
#wrapper a:hover {
opacity: 0.7;
transition-duration: 0.8s;
}
h3 {
color: white;
}
#nav {
list-style: none;
padding: 0;
padding-top: 5px;
text-align: center;
}
#nav li {
display: inline-block;
padding: 7px;
}
#nav a {
text-decoration: none;
color: black;
font-size: 15px;
}
#nav{ display:none;}
#link{ display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ImageMain">
<ul id="nav">
<li id="navm">Men</li>
<li id="navm">Women</li>
<li id="navm">Contact</li>
</ul>
<div id="link">
Shop Now
</div>
</div>

You forgot to hide the items before showing them and you can't have two separate items with the same ID's, so I changed the selector.
$("#nav a, #homeb").hide();
$(document).ready(function() {
$("#nav a").fadeIn(1000);
$("#homeb").fadeIn(1000);
});
#ImageMain {
background-image: url(http://juliapavel.de/wp-content/uploads/2016/07/DSC1139-1.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 1400px;
text-align: center;
color: black;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
position: relative;
}
#ImageMain h1 {
padding-bottom: 10px;
padding-top: 450px;
}
#homeinfo {
padding-bottom: 15px;
}
#brand {
float: left;
padding: 100px;
}
#Pronto {
width: 150px;
}
#ImageMain #brand a {
font-size: 20px;
transition-duration: 1s;
}
#nav #navm a {
transition-duration: 1s;
}
#brand a:hover {
opacity: .3;
transition-duration: 1s;
}
#navm a:hover {
opacity: .3;
transition-duration: 1s;
}
#navm {
margin-right: auto;
margin-left: auto;
display: none;
}
#homeb {
text-decoration: none;
color: black;
border-radius: 5px;
border: solid 1px black;
padding: 12px;
transition-duration: 1s;
}
#wrapper a {
text-decoration: none;
border: solid 1px #141414;
border-radius: 5px;
padding: 10px;
color: #141414;
}
#homeb:hover {
opacity: .3;
transition-duration: 1s;
}
#wrapper a:hover {
opacity: 0.7;
transition-duration: 0.8s;
}
h3 {
color: white;
}
#nav {
list-style: none;
padding: 0;
padding-top: 5px;
text-align: center;
}
#nav li {
display: inline-block;
padding: 7px;
}
#nav a {
text-decoration: none;
color: black;
font-size: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ImageMain">
<ul id="nav">
<li>Men</li>
<li>Women</li>
<li>Contact</li>
</ul>
Shop Now
</div>

We Keep Coding

JavaScript is the programming language of the Web.

Stop hover after specific time period CSS or Pure JS - javascript

Related

How can i close this navbar when user clicks a link on mobile view?

jQuery .Click event trigger goes beyond input element that it's assigned to

display inline-block not working on safari

Search box looks different on mobile, cannot get it to be in the center of the page nor reduce the size of the search box

Target Nav Menu with JQuery

Categories

Resources