I am working on a header navigation which has logo on the left and profile icon on the right in the middle there are some navigation links.
There is a left slide menu made which triggers in when window width is less than 700px. I have triggered slide left menu on window resize event as well. The main navigation has to shift to the responsive menu container on resizing the window width. However it is not working on window resize function.
Here is the codepen link i tried
$("#sidebarCollapse").on('click', function () {
$('#sidebar').toggleClass('active');
});
$(".main-nav li a").on('click', function(){
$(".main-nav li a").removeClass('active');
$(this).addClass('active');
});
// Menu Add Class Left
$(".hamburger-menu").click(function(){
$(".mob-menu").toggleClass("slide-left");
});
// Menu Add Class Close
$('.mdl-layout__obfuscator').click(function(){
$(".mob-menu").removeClass("slide-left");
});
var domWidth = $(window).width();
function moveElements() {
var mobMenu = $('.mob-menu'),
$mainNav = $('.main-nav'),
respNav = $('.resp-nav'),
mainHdr = $(".global-header");
if( domWidth < 700) {
//alert(domWidth);
$('.main-nav').appendTo('.resp-nav');
}
} .
$(window).on('load resize',function() {
// alert('hi');
moveElements();
$(window).resize(function() {
moveElements();
});
});
/* ---------------------------------------------------
GLOBAL HEADER PAGE
----------------------------------------------------- */
textarea,
input,
button {
outline: none;
}
.txtlabel {
font-size: 12px;
text-align: left;
color: #706e6b;
padding-bottom: 11px;
display: block;
}
.global-header {
width: 100%;
display: block;
height: 50px;
box-shadow: 0 2px 4px 0 #e8ebf3;
-moz-box-shadow: 0 2px 4px 0 #e8ebf3;
-webkit-box-shadow: 0 2px 4px 0 #e8ebf3;
position: relative;
background-color: #f1f1f1;
}
.g-logo {
padding: 7px 24px;
float: left;
}
.m-g-logo {
display: none;
padding: 7px 20px;
float: left;
}
.hamburger-menu {
display: none;
}
.resp-nav {
margin-top: 20px;
float: left;
}
.mob-menu {
display: none;
padding: 10px;
box-shadow: 2px 0 3px 0 #b5b7bd;
-moz-box-shadow: 2px 0 3px 0 #b5b7bd;
-webkit-box-shadow: 2px 0 3px 0 #b5b7bd;
/*position: fixed;*/
position: absolute;
-webkit-transform: translateX(-285px);
-ms-transform: translateX(-285px);
transform: translateX(-285px);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
will-change: transform;
-webkit-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
-webkit-transition-property: -webkit-transform;
transition-property: transform;
background: #fff;
top: 0;
bottom: 0;
color: #333;
z-index: 9999;
width: 240px;
-webkit-box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
}
.profile-info {
float: left;
width: 100%;
}
.profile-icon {
width: 23px;
height: 23px;
margin: 8px;
display: block;
}
.profpic {
width: 32px;
height: 32px;
border-radius: 50%;
color: #fff;
background-color: #394961;
float: left;
margin: 5px 0px 5px 5px;
}
.profile-info span {
color: #626579;
font-size: 16px;
margin: 3px 0 0 3px;
}
.prof-name {
float: left;
width: 68%;
margin: 0 0 0 20px;
}
.prof-name a.link {
float: left;
margin: 0 10px 0 3px;
}
.prof-name a.link:first-child {
position: relative;
}
.prof-name a.link:first-child:after {
content: "|";
position: absolute;
right: -10px;
color: #9ea6a9;
}
.icon-hamburger {
height: 5px;
background-color: black;
margin: 6px 0;
width: 20px;
float: left;
border: none;
cursor: pointer;
}
.main-nav {
list-style: none;
float: left;
margin-left: 30px;
}
.main-nav li {
list-style: none;
float: left;
}
.main-nav li a {
color: #626579;
padding: 14px 30px;
display: block;
}
.main-nav li a:hover {
color: #00a0e7;
}
.main-nav li a.active {
color: #00a0e7;
border-bottom: 3px solid #00a0e7;
background-color: #eef0f6;
}
.nav-icon {
float: left;
padding: 10px;
}
.pull-right i[class^='icon-'] {
width: 32px;
height: 32px;
display: block;
}
.icon-search {
background: url("../../imgs/global-header/icn-search.svg") no-repeat 4px 5px;
}
.icon-notification {
background: url("../../imgs/global-header/icn-notification.svg") no-repeat 8px 8px;
}
.icon-profile {
background: #394961 url("../../imgs/global-header/avatar.svg") no-repeat;
position: relative;
margin-right: 30px;
border-radius: 50%;
}
.icon-profile:after {
background: url("../../imgs/global-header/page-1.svg") no-repeat;
display: block;
width: 9px;
height: 6px;
position: absolute;
content: "";
top: 14px;
right: -20px;
}
.icon-profile:before {
background: url("../../imgs/global-header/avatar-icon.svg") no-repeat;
display: block;
width: 16px;
height: 16px;
position: absolute;
content: "";
top: 7px;
right: 8px;
}
.nav-icon:hover {
background-color: transparent;
}
.nav-icon:not(.active):hover {
background-color: #eef0f6;
cursor: pointer;
}
.usage {
list-style: none;
}
.usage ul {
list-style: disc;
list-style-position: outside;
}
/* search */
.srch {
position: relative;
display: inline-block;
margin-right: 30px;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
ul,
ol {
margin-top: 0;
margin-bottom: 10px;
}
.ui-front {
list-style: none!important;
background-color: #fff;
color: #626579;
font-size: 12px;
font-weight: 500;
width: 240px!important;
min-width: 110px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
border: 1px solid #F1F5F6;
border-radius: 4px;
padding: 10px 8px!important;
}
.ui-front li {
padding: 8px 8px!important;
cursor: pointer;
}
.slide-left {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
z-index: 99999;
}
.mdl-layout__obfuscator {
background-color: transparent;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
visibility: hidden;
-webkit-transition-property: background-color;
transition-property: background-color;
-webkit-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
.slide-left~.mdl-layout__obfuscator {
background-color: rgba(0, 0, 0, .5);
visibility: visible;
}
.slide-menu {
position: fixed;
-webkit-transform: translateX(-285px);
-ms-transform: translateX(-285px);
transform: translateX(-285px);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
will-change: transform;
-webkit-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
-webkit-transition-property: -webkit-transform;
transition-property: transform;
background: #fff;
top: 0;
bottom: 0;
color: #333;
z-index: 9999;
width: 250px;
-webkit-box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
}
#media only screen and (max-width: 768px) {
.main-nav {
display: block;
width: 100%;
margin: 0;
}
.main-nav ul {
padding: 0;
}
.main-nav ul li {
width: 100%;
margin: 0;
}
.nav-icon:nth-child(3) {
display: none;
}
.g-logo {
display: none;
}
.m-g-logo {
display: block;
padding: 7px 24px;
float: left;
}
.hamburger-menu {
display: block;
}
.global-header .rightmenu {
position: absolute;
right: 12px;
}
.mob-menu {
display: block;
}
.global-header {
width: 100%;
display: block;
height: 500px;
}
}
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<div class="global-header">
<div class="mob-menu">
<div class="profile-info">
<div class="profpic"><i class="profile-icon"></i></div>
<div class="prof-name">
<span>Marvin Duncan</span>
Profile
Logout
</div>
</div>
<div class="resp-nav"></div>
</div>
<div class="pull-left">
Logo
</div>
<nav class="main-nav">
<ul>
<li>Label 1</li>
<li>Label 2</li>
</ul>
</nav>
<div class="pull-right rightmenu">
<div class="nav-icon" title="Profile"><i class="icon-profile">☺</i></div>
</div>
<div class="mob-view">
<span class="hamburger-menu">
<button class="icon-hamburger"></button>
Logo
</span>
</div>
<div class="mdl-layout__obfuscator"></div>
</div>
The problem is probably because this line only happens once:
var domWidth = $(window).width();
You need to place that line of code within your moveElements function, so that it continually checks the width of the window.
Additionally, I'd suggest not using 'appendTo' to move something. It is tricky to move pieces of the DOM around like this and you can get in a mess easily. Better to use CSS to move the display of something. Or, if you can't achieve it with CSS alone - maybe have two instances, and show/hide them as needed.
change $(window).width(); to $(document).width();
i tried and it worked
Related
I'm a newbie and practicing dropdown menu using the following Youtube video https://www.youtube.com/watch?v=uFIl4BvYne0. Everything is working except the onclick function.
Can anyone point out where I'm going wrong?
function show(anything) {
document.querySelector('.textBox').value =
anything;
}
let dropdown = document.querySelector('.dropdown');
dropdown.onclick = function() {
dropdown.classList.toggle('active');
}
#import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
min-height: 100vh;
background: #fafafa;
}
.dropdown {
position: relative;
margin-top: 100px;
width: 300px;
height: 50px;
}
.dropdown::before {
content: "";
position: absolute;
right: 20px;
top: 15px;
z-index: 10000;
width: 8px;
height: 8px;
border: 2px solid #333;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(-45deg);
transition: 0.5s;
pointer-events: none;
}
.dropdown.active::before {
top: 22px;
transform: rotate(-225deg);
}
.dropdown input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100;
cursor: pointer;
background: #fff;
border: none;
outline: none;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
padding: 12px 20px;
border-radius: 10px;
}
.dropdown .option {
position: absolute;
top: 70px;
width: 100%;
background: #fff;
box-shadow: 0px 30px 30px rgba(0, 0, 0, 0.05);
border-radius: 10px;
overflow: hidden;
/*display: none*/
;
}
.dropdown.active .option {
display: block;
}
.dropdown .option div {
padding: 10px 20px;
cursor: pointer;
}
.dropdown .option div:hover {
background: #62baea;
color: #fff;
}
<body>
<h2>Converter</h2>
<label>Litres</label>
<div class="dropdown">
<input type="text" class="textBox" placeholder="HTML" readonly>
<div class="option">
<div onlcick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
</div>
</div>
</body>
I have tried some fixes but couldn't find out the problem.
Note: I'm pretty new in this field.
You need to add addEventListener in order to append an action:
function show(anything) {
document.querySelector('.textBox').value =
anything;
}
let dropdown = document.querySelector('.dropdown');
dropdown.addEventListener('click', function(event) { // add click function
dropdown.classList.toggle('active'); // i don't know what class you want to change so i changed the background to a class to demonstrate the click
});
#import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
min-height: 100vh;
background: #fafafa;
}
.dropdown {
position: relative;
margin-top: 100px;
width: 300px;
height: 50px;
}
.dropdown::before {
content: "";
position: absolute;
right: 20px;
top: 15px;
z-index: 10000;
width: 8px;
height: 8px;
border: 2px solid #333;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(-45deg);
transition: 0.5s;
pointer-events: none;
}
.dropdown.active::before {
top: 22px;
transform: rotate(-225deg);
}
.dropdown input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100;
cursor: pointer;
background: #fff;
border: none;
outline: none;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
padding: 12px 20px;
border-radius: 10px;
}
.dropdown .option {
position: absolute;
top: 70px;
width: 100%;
background: #fff;
box-shadow: 0px 30px 30px rgba(0, 0, 0, 0.05);
border-radius: 10px;
overflow: hidden;
/*display: none*/
;
}
.dropdown.active .option {
display: block;
background-color: grey;
}
.dropdown .option div {
padding: 10px 20px;
cursor: pointer;
}
.dropdown .option div:hover {
background: #62baea;
color: #fff;
}
<body>
<h2>Converter</h2>
<label>Litres</label>
<div class="dropdown">
<input type="text" class="textBox" placeholder="HTML" readonly>
<div class="option">
<div onlcick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
</div>
</div>
</body>
I have a problem, which is for sure simple to solve, except for me. Let me explain, the snippet below shows a dialogue-box. I added an interaction feedback. If the input field is empty and a user tries to access the cross, the field blinks red.
In case the input field is set, the cross can be clicked which displays options. If this are clicked too the input field blinks green. The problem: Unfortunately it works just once, even than I try to remove those CSS classes afterwards. Further if green appeared once and the input field is empty again, I can´t trigger the red blinking again.
My thoughts are, that JavaScript can´t remove and add CSS classes during the same time action. Or the animation will not start over again. I am not sure. I would be glad if somebody can enlighten me.
var dialogSettingToggle = document.getElementById("dialog-setting-toggle")
var dialogSettingInput = document.getElementById("dialog-setting-input")
dialogSettingToggle.addEventListener("click", function() {
if (isEmpty(dialogSettingInput.value)) {
dialogSettingInput.classList.toggle("dialog-input-alert")
} else {
dialogSettingToggle.classList.toggle("open")
var dialogSettingContext = document.getElementById("dialog-setting-button-context")
dialogSettingContext.addEventListener("click", function() {
dialogSettingInput.classList.remove("dialog-input-alert")
dialogSettingInput.classList.add("dialog-input-confirm")
dialogSettingInput.value = ""
dialogSettingToggle.classList.remove("open")
})
var dialogSettingLink = document.getElementById("dialog-setting-button-link")
dialogSettingLink.addEventListener("click", function() {
dialogSettingInput.classList.remove("dialog-input-alert")
dialogSettingInput.classList.add("dialog-input-confirm")
dialogSettingInput.value = ""
dialogSettingToggle.classList.remove("open")
})
var dialogSettingObject = document.getElementById("dialog-setting-button-object")
dialogSettingObject.addEventListener("click", function() {
dialogSettingInput.classList.remove("dialog-input-alert")
dialogSettingInput.classList.add("dialog-input-confirm")
dialogSettingInput.value = ""
dialogSettingToggle.classList.remove("open")
})
}
})
function isEmpty(str) {
return !str.trim().length
}
body {
height: 100%;
background: #e6e7ee;
}
section {
word-wrap: break-word;
word-break: normal;
width: 95%;
max-width: 350px;
margin: 40px auto;
border-radius: 10px;
}
hr {
color: white;
height: 0px;
cursor: default;
}
h5 {
margin: 10px;
font-size: 1.2em;
font-weight: normal;
color: #7b7e8c;
cursor: default;
}
button {
box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.1), -6px -6px 10px white;
background: #f2f3f7;
cursor: pointer;
border: 0;
padding: 10px;
margin: 7px;
margin-top: 10px;
width: 150px;
font-size: 1rem;
transition-property: background-color, box-shadow;
transition-duration: .2s;
color: #7b7e8c;
}
select {
appearance: none;
width: 270px;
background: url(data:image/png;base64,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);
background-repeat: no-repeat;
background-position: right;
background-size: 1.8em;
border-radius: 10px;
padding: 10px;
margin: 7px;
font-size: 1rem;
color: #7b7e8c;
border: 0;
cursor: pointer;
box-shadow: 0 0 transparent, 0 0 transparent, inset 3px 3px 5px rgba(0, 0, 0, 0.1), inset -3px -3px 5px white;
}
input {
width: 270px;
background: #f8f9fb;
border-radius: 10px;
padding: 10px;
margin: 7px;
font-size: 1rem;
color: #7b7e8c;
border: 0;
cursor: text;
box-shadow: 0 0 transparent, 0 0 transparent, inset 3px 3px 5px rgba(0, 0, 0, 0.1), inset -3px -3px 5px white;
}
button:hover,
select:hover,
input:hover {
color: #3498db;
}
button:active {
box-shadow: 0 0 transparent, 0 0 transparent, inset 3px 3px 5px rgba(0, 0, 0, 0.1), inset -3px -3px 5px white;
}
.border-round {
border-radius: 10px;
}
.dialog {
position: absolute;
left: 0;
right: 0;
padding: 10px 20px 20px;
margin-top: 20px;
width: 340px;
min-height: 100px;
font-size: 1.2em;
background: #f2f3f7;
}
.box-shadow {
box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.1), -6px -6px 10px white;
}
.dialog-setting-button-delete {
position: relative;
margin-top: 7px;
width: 40px;
height: 40px;
border-radius: 10px;
background: #ecf0f3;
cursor: pointer;
box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.1), -6px -6px 10px white;
}
.dialog-setting-close {
position: absolute;
width: 25px;
height: 25px;
padding: 0px;
margin: 0px;
left: 350px;
top: 5px;
border-radius: 10px;
background: #ecf0f3;
cursor: pointer;
box-shadow: none;
}
.dialog-input-alert {
animation: input-alert 1.5s;
}
#keyframes input-alert {
from {
background: red;
color: white
}
to {
background: #f8f9fb;
color: #7b7e8c;
}
}
.dialog-input-confirm {
animation: input-confirm 1.5s;
}
#keyframes input-confirm {
from {
background: greenyellow;
color: white
}
to {
background: #f8f9fb;
color: #7b7e8c;
}
}
/****************************************
******** dialog-setting-toggle ***********
****************************************/
.dialog-setting-toggle {
position: relative;
margin-top: 7px;
margin-right: 7px;
width: 40px;
height: 40px;
border-radius: 10px;
background: #ecf0f3;
cursor: pointer;
box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.1), -6px -6px 10px white;
}
.dialog-setting-toggle::before,
.dialog-setting-toggle::after {
content: "";
background: #7b7e8c;
border-radius: 5px;
width: 20px;
height: 5px;
position: absolute;
left: 10px;
top: 18px;
transition: 0.2s ease;
z-index: 1;
}
.dialog-setting-toggle::before {
transform: rotate(0deg);
}
.dialog-setting-toggle::after {
transform: rotate(-90deg);
}
.dialog-setting-toggle:hover::before {
transform: rotate(0deg);
background-color: #3498db;
}
.dialog-setting-toggle:hover::after {
transform: rotate(-90deg);
background-color: #3498db;
}
.dialog-setting-toggle.open::before {
transform: rotate(45deg);
background-color: #3498db;
}
.dialog-setting-toggle.open::after {
transform: rotate(-45deg);
background-color: #3498db;
}
.dialog-setting-toggle.open .dialog-setting-button {
opacity: 1;
pointer-events: auto;
}
.dialog-setting-toggle.open .dialog-setting-button:first-of-type {
right: -50px;
justify-content: center;
align-items: center;
}
.dialog-setting-toggle.open .dialog-setting-button:nth-of-type(2) {
right: -100px;
justify-content: center;
align-items: center;
transition-delay: 0.05s;
}
.dialog-setting-toggle.open .dialog-setting-button:last-of-type {
right: -150px;
justify-content: center;
align-items: center;
transition-delay: 0.1s;
}
.dialog-setting-button {
width: 40px;
height: 40px;
border-radius: 10px;
cursor: pointer;
background: #ecf0f3;
position: absolute;
color: #7b7e8c;
display: flex;
opacity: 0;
pointer-events: none;
box-shadow: inherit;
}
.dialog-setting-button:hover {
transform: scale(1.2);
color: #3498db;
}
<script src="https://kit.fontawesome.com/39094309d6.js" crossorigin="anonymous"></script>
<section id="dialog-setting" class="dialog box-shadow">
<div>
<h5 style="text-align:center">Options</h5>
<button style="float: right" id="dialog-setting-close" class="dialog-setting-close border-round"><i class="fas fa-times"></i></button>
</div>
<hr class="border-round">
<input style="float: left" id="dialog-setting-input" type="search" placeholder="context / link / object" class="item dialog-setting-input"></input>
<div style="float: right" id="dialog-setting-toggle" class="dialog-setting-toggle">
<div title="Kontext" id="dialog-setting-button-context" class="dialog-setting-button"><i class="fab fa-uncharted"></i></div>
<div title="Link" id="dialog-setting-button-link" class="dialog-setting-button"><i class="fas fa-link"></i></div>
<div title="Objekt" id="dialog-setting-button-object" class="dialog-setting-button"><i class="fas fa-server"></i></div>
</div>
</section>
It isn´t the best solution but it is one solution. I added a timeout with the same duration as the animation goes. Works fine for my needs.
dialogSettingToggle.addEventListener("click", function () {
if (isEmpty(dialogSettingInput.value)) {
dialogSettingInput.classList.add("dialog-input-alert")
setTimeout(function() {
dialogSettingInput.classList.remove("dialog-input-alert")
}, 1000)
} else {
dialogSettingToggle.classList.toggle("open")
var dialogSettingContext = document.getElementById("dialog-setting-button-context")
dialogSettingContext.addEventListener("click", function() {
resetInput()
})
var dialogSettingLink = document.getElementById("dialog-setting-button-link")
dialogSettingLink.addEventListener("click", function() {
resetInput()
})
var dialogSettingObject = document.getElementById("dialog-setting-button-object")
dialogSettingObject.addEventListener("click", function() {
resetInput()
})
}
})
function resetInput() {
dialogSettingInput.classList.add("dialog-input-confirm")
setTimeout(function() {
dialogSettingInput.classList.remove("dialog-input-confirm")
}, 1000)
dialogSettingInput.value=""
dialogSettingToggle.classList.remove("open")
}
I'm developing a Cordova app. For that I'm using Vue.js and jQuery for bindings and script and I'm developing UI on my own. I could do page transitions and animations for most of the UI like, Radio buttons and check boxes etc. But I could not be able to develop a custom popover. I have tried following code.
Vue.directive('popover', {
bind: function(el, bindings, vnode) {
$(el).click(function() {
var pageEl = $(this).closest('.ui-page');
pageEl.find('.drawer').toggleClass('active');
$(el).closest('.ui-page').click(function(e) {
// $('.drawer', this).removeClass('active');
});
});
}
})
var pageInstace = new Vue({
el: '#popover-page',
data: {
options: [1, 2, 3, 4, 5]
}
})
html,
body {
position: relative;
width: 100%;
height: 100%;
}
body {
font-family: 'Open Sans';
font-size: 16px;
margin: 0;
overflow: hidden;
}
* {
box-sizing: border-box;
}
*, *:active, *:hover, *:focus {
outline: 0;
}
button {
padding: 0;
}
img {
max-width: 100%;
}
.ui-page,
.header,
.scroll-content {
position: absolute;
width: 100%;
top: 0;
left: 0;
overflow: hidden;
}
.ui-page {
height: 100%;
background-color: #fff;
}
.page-content {
position: relative;
height: 100%;
overflow-y: auto;
z-index: 1;
}
.header {
height: 54px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12), 0 1px 8px 0 rgba(0, 0, 0, 0.2);
background-color: #607D8B;
color: #fff;
display: flex;
align-items: center;
padding-left: 16px;
padding-right: 16px;
z-index: 1;
}
.scroll-content {
bottom: 0;
overflow: auto;
}
.scroll-content.has-header {
top: 54px;
}
.header button {
color: #fff;
height: 100%;
}
.header .header-title {
margin: 0 22px;
font-size: 18px;
font-weight: 600;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.header .buttons {
position: relative;
display: flex;
}
.header .buttons button {
padding: 4px 8px;
}
.header .buttons button:last-child {
padding: 4px 0 4px 8px;
}
.btn {
position: relative;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
border: none;
padding: 8px 16px;
font-size: 16px;
border-radius: 4px;
font-family: unset;
overflow: hidden;
}
.btn-clear {
background-color: transparent;
border: none;
}
.item {
position: relative;
display: flex;
overflow: hidden;
border-bottom: 1px solid #bdbdbd;
}
.drawer {
position: absolute;
background-color: #fff;
z-index: 4;
top: 60px;
right: 4px;
border-radius: 2px;
box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.4);
transform: scale(0, 0);
transform-origin: top right;
transition: transform ease 0.3s;
min-width: 180px;
}
.drawer.active {
transform: scale(1, 1);
}
.drawer .drawer-content {
position: relative;
padding: 4px 0;
}
.drawer .drawer-content:after {
content: '';
position: absolute;
border: 8px solid transparent;
border-bottom-color: #fff;
top: -14px;
right: 22px;
}
.drawer .item {
padding: 12px 16px;
font-size: 14px;
}
.drawer .item:last-child {
border-bottom: none;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div class="ui-page" id="popover-page">
<div class="page-content">
<div class="header">
<div class="header-title">
Page Title
</div>
<button class="btn-clear" v-popover>Popover</button>
</div>
<div class="drawer">
<div class="drawer-content">
<div class="item" v-for="option in options">{{ option }}</div>
</div>
</div>
<div class="scroll-content has-header">
<div class="page-content">
<p>Some Content</p>
</div>
</div>
</div>
</div>
This works fine for toggling popover on button click. I tried so much. But I could not hide the popover when click on outside of the popover.
How can I hide popover when clicking out side of it?
Please try this. I have added jQuery
$('body').click(function(e) {
if (!$(e.target).closest('.drawer').length){
$(".drawer").removeClass("active");
}
});
$('body').click(function(e) {
if (!$(e.target).closest('.drawer').length){
$(".drawer").removeClass("active");
}
});
Vue.directive('popover', {
bind: function(el, bindings, vnode) {
$(el).click(function(e) {
e.stopPropagation();
var pageEl = $(this).closest('.ui-page');
pageEl.find('.drawer').toggleClass('active');
$(el).closest('.ui-page').click(function(e) {
// $('.drawer', this).removeClass('active');
});
});
}
})
var pageInstace = new Vue({
el: '#popover-page',
data: {
options: [1, 2, 3, 4, 5]
}
})
html,
body {
position: relative;
width: 100%;
height: 100%;
}
body {
font-family: 'Open Sans';
font-size: 16px;
margin: 0;
overflow: hidden;
}
* {
box-sizing: border-box;
}
*, *:active, *:hover, *:focus {
outline: 0;
}
button {
padding: 0;
}
img {
max-width: 100%;
}
.ui-page,
.header,
.scroll-content {
position: absolute;
width: 100%;
top: 0;
left: 0;
overflow: hidden;
}
.ui-page {
height: 100%;
background-color: #fff;
}
.page-content {
position: relative;
height: 100%;
overflow-y: auto;
z-index: 1;
}
.header {
height: 54px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12), 0 1px 8px 0 rgba(0, 0, 0, 0.2);
background-color: #607D8B;
color: #fff;
display: flex;
align-items: center;
padding-left: 16px;
padding-right: 16px;
z-index: 1;
}
.scroll-content {
bottom: 0;
overflow: auto;
}
.scroll-content.has-header {
top: 54px;
}
.header button {
color: #fff;
height: 100%;
}
.header .header-title {
margin: 0 22px;
font-size: 18px;
font-weight: 600;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.header .buttons {
position: relative;
display: flex;
}
.header .buttons button {
padding: 4px 8px;
}
.header .buttons button:last-child {
padding: 4px 0 4px 8px;
}
.btn {
position: relative;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
border: none;
padding: 8px 16px;
font-size: 16px;
border-radius: 4px;
font-family: unset;
overflow: hidden;
}
.btn-clear {
background-color: transparent;
border: none;
}
.item {
position: relative;
display: flex;
overflow: hidden;
border-bottom: 1px solid #bdbdbd;
}
.drawer {
position: absolute;
background-color: #fff;
z-index: 4;
top: 60px;
right: 4px;
border-radius: 2px;
box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.4);
transform: scale(0, 0);
transform-origin: top right;
transition: transform ease 0.3s;
min-width: 180px;
}
.drawer.active {
transform: scale(1, 1);
}
.drawer .drawer-content {
position: relative;
padding: 4px 0;
}
.drawer .drawer-content:after {
content: '';
position: absolute;
border: 8px solid transparent;
border-bottom-color: #fff;
top: -14px;
right: 22px;
}
.drawer .item {
padding: 12px 16px;
font-size: 14px;
}
.drawer .item:last-child {
border-bottom: none;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div class="ui-page" id="popover-page">
<div class="page-content">
<div class="header">
<div class="header-title">
Page Title
</div>
<button class="btn-clear" v-popover>Popover</button>
</div>
<div class="drawer">
<div class="drawer-content">
<div class="item" v-for="option in options">{{ option }}</div>
</div>
</div>
<div class="scroll-content has-header">
<div class="page-content">
<p>Some Content</p>
</div>
</div>
</div>
</div>
Vue.directive('popover', {
bind: function(el, bindings, vnode) {
$(el).click(function() {
$(el).closest('.ui-page').find('.drawer').toggleClass('active');
});
$('body').on('click', $(el).closest('.ui-page'), function(e) {
var $drawer = $(el).closest('.ui-page').find('.drawer');
var $target = $(e.target);
if ($target.closest($(el)).length <= 0
&& $drawer.hasClass('active')
&& $target.closest('.drawer').length <= 0) {
$drawer.removeClass('active');
}
});
}
})
var pageInstace = new Vue({
el: '#popover-page',
data: {
options: [1, 2, 3, 4, 5]
}
})
html,
body {
position: relative;
width: 100%;
height: 100%;
}
body {
font-family: 'Open Sans';
font-size: 16px;
margin: 0;
overflow: hidden;
}
* {
box-sizing: border-box;
}
*, *:active, *:hover, *:focus {
outline: 0;
}
button {
padding: 0;
}
img {
max-width: 100%;
}
.ui-page,
.header,
.scroll-content {
position: absolute;
width: 100%;
top: 0;
left: 0;
overflow: hidden;
}
.ui-page {
height: 100%;
background-color: #fff;
}
.page-content {
position: relative;
height: 100%;
overflow-y: auto;
z-index: 1;
}
.header {
height: 54px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12), 0 1px 8px 0 rgba(0, 0, 0, 0.2);
background-color: #607D8B;
color: #fff;
display: flex;
align-items: center;
padding-left: 16px;
padding-right: 16px;
z-index: 1;
}
.scroll-content {
bottom: 0;
overflow: auto;
}
.scroll-content.has-header {
top: 54px;
}
.header button {
color: #fff;
height: 100%;
}
.header .header-title {
margin: 0 22px;
font-size: 18px;
font-weight: 600;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.header .buttons {
position: relative;
display: flex;
}
.header .buttons button {
padding: 4px 8px;
}
.header .buttons button:last-child {
padding: 4px 0 4px 8px;
}
.btn {
position: relative;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
border: none;
padding: 8px 16px;
font-size: 16px;
border-radius: 4px;
font-family: unset;
overflow: hidden;
}
.btn-clear {
background-color: transparent;
border: none;
}
.item {
position: relative;
display: flex;
overflow: hidden;
border-bottom: 1px solid #bdbdbd;
}
.drawer {
position: absolute;
background-color: #fff;
z-index: 4;
top: 60px;
right: 4px;
border-radius: 2px;
box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.4);
transform: scale(0, 0);
transform-origin: top right;
transition: transform ease 0.3s;
min-width: 180px;
}
.drawer.active {
transform: scale(1, 1);
}
.drawer .drawer-content {
position: relative;
padding: 4px 0;
}
.drawer .drawer-content:after {
content: '';
position: absolute;
border: 8px solid transparent;
border-bottom-color: #fff;
top: -14px;
right: 22px;
}
.drawer .item {
padding: 12px 16px;
font-size: 14px;
}
.drawer .item:last-child {
border-bottom: none;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div class="ui-page" id="popover-page">
<div class="page-content">
<div class="header">
<div class="header-title">
Page Title
</div>
<button class="btn-clear" v-popover>Popover</button>
</div>
<div class="drawer">
<div class="drawer-content">
<div class="item" v-for="option in options">{{ option }}</div>
</div>
</div>
<div class="scroll-content has-header">
<div class="page-content">
<p>Some Content</p>
</div>
</div>
</div>
</div>
In my example when I click on thumbnails I open a fancybox gallery, to see prev and next photo I need to click on photos. How can I have the same effect with my "prev and next" link at left ?
At this time nothing happened when I click on them ?
HERE IS MY LINK
http://www.booclin.ovh/tom/254/
$("img").error(function() { $(this).parent().remove(); });
$("a.fancyboxgallery").fancybox();
$("#launcherbook2").on("click", function(){
$("a.fancyboxgallery").eq(0).trigger("click");
});
$(".fancybox-lock").bind("mousewheel", function() { return false; });
$( function( ){
$( "#closegallery" ).on( "click", function(){
$.fancybox.close(); return false; });
});
*, *:after, *:before { padding: 0; margin: 0; -webkit-touch-callout: none;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; outline:0; box-sizing: border-box }
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
html, body { height: 100%; padding: 0; margin: 0; background-color: #fff;}
body, p, span, a, .links, .linkscredit { margin: 0 auto; font-size: 11px; line-height: 20px; text-decoration:none; font-family: "open_sansregular", sans-serif; letter-spacing: 1px; text-align:left; color: #282828; background-color: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; z-index:9999; }
.spanbold { font-family: "open_sansbold"; }
.boldlinks, .menustyle2 { font-family: "open_sansbold"; cursor:pointer;}
a:hover { color: #d2c6af; }
img, object, embed { border: 0px; }
/* Second page */
.rightpart { position: fixed; left:0px; width: 100%; height: 100%; padding-left:200px; z-index: 0; overflow: auto;}
.leftpart { text-align:left; position: absolute; left:0; top:0; height:100%; padding: 80px 40px 10px 40px; overflow: hidden; z-index: 8021; }
.partmenu { z-index: 8021; }
.bottominfo { padding-left:0px; position:absolute; bottom:10px;
right:20px; z-index: 0; }
.secondleftpart { position:absolute; top:30px; left:10px; }
/* Second page */
#media only screen and (max-height: 500px) {
.bottominfo { display: none; }
.leftpart { height:auto; }
}
#page-tablegalerie { overflow:hidden; height: 100%; width: 100%; border-collapse: collapse; text-align: left; }
#page-tdgalerie { height: 100%; padding-left:0px; vertical-align: middle; }
div#globalgalerie { max-width: 100%; text-align: left; }
.fancyboxgallery, .socialopacity {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
z-index:1;
transition: opacity .1s ease-in-out;
-moz-transition: opacity .1s ease-in-out;
-webkit-transition: opacity .1s ease-in-out;
font-size: 0px;
}
.fancyboxgallery:hover, .socialopacity:hover {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
z-index:1;
}
.fancyboxthumbnailsgallery { margin: 12px 5px -10px 5px; }
div#juicebox-container{ height:900px; width:100%; overflow: hidden; }
.imglist { overflow: hidden; }
.imglist a { float: left; margin: 0px; }
.imglist a img {
vertical-align:bottom;
padding: 0px;
border: 0px solid #ccc;
max-width: 200px;
max-height: 133px;
float: left;
}
#page_holder {height: 100%;width: 100%;}
/* Slide */
#fancybox-loading,
#fancybox-lock,
.fancybox-wrap,
.fancybox-skin,
.fancybox-inner,
.fancybox-error,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-wrap embed,
a.fancybox-close,
a.fancybox-expand,
a.fancybox-nav,
a.fancybox-nav span,
.fancybox-tmp
{
padding: 0;
margin: 0;
border: 0;
outline: none;
vertical-align: top;
background-color: transparent;
background-repeat: no-repeat;
background-image: none;
text-shadow: none;
}
#fancybox-lock {
background:#fff;
position: fixed;
top: 0;
left: 0px;
right: 0;
bottom: 0;
z-index: 8020;
overflow: hidden!important;
-webkit-transition : -webkit-transform 0.5s;
-webkit-transform : translateX(0px);
}
.fancybox-lock-test {
overflow-y: hidden !important;
}
.fancybox-lock {
overflow: hidden !important;
width: auto;
}
.fancybox-lock body {
overflow: hidden !important;
}
.fancybox-wrap {
position: absolute;
top: 0;
left: 0;
z-index: 8020;
-webkit-transform: translate3d(0,0,0);
}
.fancybox-opened {
z-index: 8030;
}
.fancybox-skin {
border:0px;
background: #fff;
}
.fancybox-inner {
position: relative;
overflow: hidden!important;
-webkit-overflow-scrolling: touch;
width: auto!important;
height: auto!important;
padding: 0px 30px -10px 0px !important;
}
.fancybox-spacer {
position: absolute;
top: 100%;
left: 0;
width: 1px;
}
.fancybox-image, .fancybox-iframe {
display: block;
width: 100%;
}
.fancybox-image {
max-width: 100%;
max-height: 100%;
zoom: 1;
}
a.fancybox-close {
position: fixed !important;
top: 80px;
left: 40px;
z-index: 99999 !important;
cursor: pointer;
background-position: 0 0;
}
a.fancybox-close:hover { color:#d2c6af; text-shadow: 0px 0px 0px #282828;}
a.fancybox-nav {
position: absolute;
top: 0;
width: 50%;
height: 100%;
cursor: pointer;
text-decoration: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
z-index: 8040;
overflow: hidden;
}
.fancybox-type-iframe a.fancybox-nav,
.fancybox-type-inline a.fancybox-nav,
.fancybox-type-html a.fancybox-nav
{
width: 70px;
}
a.fancybox-prev {
left: 0px;
}
a.fancybox-next {
right: 0px;
}
a.fancybox-nav span {
position: absolute;
top: 50%;
width: 46px;
height: 46px;
margin-top: -23px;
cursor: pointer;
z-index: 8040;
}
a.fancybox-prev span {
left: 0;
background-position: 0 -50px;
}
a.fancybox-next span {
right: 0;
background-position: 0 -100px;
}
.fancybox-mobile a.fancybox-nav {
max-width: 80px;
}
.fancybox-desktop a.fancybox-nav {
opacity: 1; filter: alpha(opacity=100);
}
.fancybox-desktop a.fancybox-nav:hover {
opacity: 1; filter: alpha(opacity=100);
}
a.fancybox-expand {
position: absolute;
bottom: 0;
right: 0;
width: 46px;
height: 46px;
z-index: 8050;
opacity: 0; filter: alpha(opacity=0);
background-position: 0 -150px;
zoom: 1;
-webkit-transition: opacity .1s ease;
-moz-transition: opacity .1s ease;
-o-transition: opacity .1s ease;
transition: opacity .1s ease;
}
.fancybox-wrap:hover a.fancybox-expand {
opacity: 1; filter: alpha(opacity=100);
}
.fancybox-wrap a.fancybox-expand:hover {
opacity: 1; filter: alpha(opacity=100);
}
#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -85px;
margin-left: -35px;
width: 169px;
height: 71px;
padding:427px 348px;
background-color: #fff;
background-image: url(../images/loaderwhitescreen.gif);
background-position: center center;
opacity: 1; filter: alpha(opacity=100);
cursor: pointer;
z-index: 8060;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.fancybox-tmp {
position: absolute !important;
top: -99999px;
left: -99999px;
max-width: 99999px;
max-height: 99999px;
overflow: visible !important;
}
.fancybox-title {
text-align:left;
line-height: 15px;
position: relative;
text-shadow: none;
z-index: 8050;
display: block;
visibility: hidden;
}
.fancybox-title-float-wrap {
position: relative;
margin-top: 10px;
text-align: left;
zoom: 1;
left: -9999px;
}
.fancybox-title-float-wrap > div {
display: inline-block;
padding: 7px 20px;
font-weight: bold;
text-shadow: 0 1px 2px #222;
background: transparent; background: rgba(255, 255, 255, 1);
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.fancybox-title-outside-wrap {
position: relative;
margin-top: 10px;
text-shadow: 0 1px rgba(255, 255, 255, 1);
}
.fancybox-title-inside-wrap {
padding-top: 10px;
}
.fancybox-title-over-wrap {
position: absolute;
bottom: 0;
left: 0;
background: #fff; background: rgba(255, 255, 255, 1);
max-height: 50%;
overflow: auto;
}
.fancybox-overlay {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
z-index: 8010;
}
.fancybox-overlay-fixed {
position: fixed;
width: 100%;
height: 100%;
}
/* Default theme */
.fancybox-default-skin {
border-color: #fff;
background: #fff;
}
.fancybox-default-skin-open {
box-shadow: 0 10px 25px rgba(255, 255, 255, 1);
}
.fancybox-default-overlay {
background: #fff;
opacity: 1; filter: alpha(opacity=100);
}
}
.fancybox-dark-skin {
background: #fff;
border-color: #fff;
border-radius: 0px;
box-shadow: 0 0 10px rgba(255, 255, 255, 1) inset !important;
}
.fancybox-dark-overlay {
background: #fff;
opacity: 1; filter: alpha(opacity=100);
}
.fancybox-light-skin-open {
box-shadow: 0 10px 25px rgba(255, 255, 255, 1);
}
.fancybox-light-overlay {
opacity: 1; filter: alpha(opacity=100);
background: #fff; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #999999 0%, #555555 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#999999), color-stop(100%,#555555)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #999999 0%,#555555 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #999999 0%,#555555 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #999999 0%,#555555 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #999999 0%,#555555 100%); /* W3C */
}
<script src="http://www.booclin.ovh/tom/2/index/js/modernizr.custom.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="http://www.booclin.ovh/tom/254/index/normal/jquery.fancybox.js"></script>
<script type="text/javascript" src="http://www.booclin.ovh/tom/254/index/normal/fancybox.js"></script>
<div class="leftpart">
<div class="secondleftpart">
<a title="Prev" style="font-size: 7px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-next" href="javascript:;">PREV</a>
<a style="font-size: 7px;" href="javascript:;"> | </a>
<a title="Next" style="font-size: 7px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-prev" href="javascript:;">NEXT</a>
<br/>
<a style="font-size: 7px;" title="Thumbnails" id="closegallery" class="showthumbnails" href="javascript:;">
THUMBNAILS
</a>
</div>
</div>
<div class="rightpart"><div id="globalgalerie">
<a class="fancyboxgallery" rel="single_2" href="http://www.booclin.ovh/tom/254/index/projets/3.jpg" class="highlightit" title="">
<img style="margin:12px 5px 5px 5px;" alt="" src="http://www.booclin.ovh/tom/254/index/projets/03.jpg"/>
</a>
<a class="fancyboxgallery" rel="single_2" href="http://www.booclin.ovh/tom/254/index/projets/2.jpg" class="highlightit" title="">
<img alt="" style="margin:12px 5px 5px 5px;" src="http://www.booclin.ovh/tom/254/index/projets/02.jpg" />
</a>
<a class="fancyboxgallery" rel="single_2" href="http://www.booclin.ovh/tom/254/index/projets/1.jpg" class="highlightit" title="">
<img alt="" style="margin:12px 5px 5px 5px;" src="http://www.booclin.ovh/tom/254/index/projets/01.jpg"/>
</a>
</div></div>
Currently, your "PREV" and "NEXT" links aren't doing anything (due to you setting their reference to href="javascript:;"). You need to change this to:
<a title="Prev" style="font-size: 7px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-next" href="javascript:$.fancybox.prev();">PREV</a>
<a title="Next" style="font-size: 7px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-prev" href="javascript:$.fancybox.next();">NEXT</a>
I've this code
.pictos {
display: block;
height: 70px;
margin: 160px 0 30px;
padding: 0 17%;
width: 100%;
}
.pictos > div {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);
border: 1px solid #fff;
border-radius: 50%;
display: table-row;
float: left;
height: 70px;
width: 70px;
margin: 0 0 0 50px;
}
.pictos a.standard:hover,
.pictos a.standard:focus {
background: url("http://s11.postimg.org/91k4hiqe7/standard.png") no-repeat scroll 50% -39px rgba(120, 182, 55, 1);
}
.pictos > div a {
border-radius: 50%;
display: inline-block;
height: 45px;
margin: 12px;
text-decoration: none;
text-indent: -9999px;
transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
width: 45px;
}
/* Hide this */
.pictos > div .standard-hover {
border-radius: 50%;
display: inline-block;
height: 45px;
margin: 12px;
text-decoration: none;
text-indent: -9999px;
transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
width: 45px;
}
.pictos > div:first-child {} .pictos a.standard {
background: url("http://s11.postimg.org/91k4hiqe7/standard.png") no-repeat scroll 50% 50% rgba(255, 255, 255, 1);
}
.pictos a.standard:hover span,
.pictos a.standard span:hover,
.pictos a.standard span:focus,
.pictos a.standard:focus span {
display: block;
opacity: 1;
}
.pictos a span::after {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #78b637 rgba(120, 182, 55, 0) rgba(120, 182, 55, 0);
border-image: none;
border-style: solid;
border-width: 6px;
content: " ";
height: 0;
left: 50%;
margin-left: -6px;
pointer-events: none;
position: absolute;
top: 100%;
width: 0;
}
.pictos a span {
background: none repeat scroll 0 0 #78b637;
border: medium none;
border-radius: 9px;
bottom: 50px;
color: #efefef;
font-family: "Montserrat-Regular", sans-serif;
font-size: 13px;
padding: 5px 0;
position: relative;
right: 77px;
text-align: center;
text-decoration: none;
text-indent: 0;
text-transform: uppercase;
width: 200px;
}
<div class="pictos">
<div>
<a href="#" class="standard">
<span>standard</span>
</a>
<a href="#" class="standard-hover">
<span>standard</span>
</a>
</div>
</div>
What I want is when you hover the link, an white icon phone (like this http://s30.postimg.org/3l9qho5h9/standard_hover.png) appears from the bottom to the green circle. It happens when the first icon is moving to the top.
Thanks for the help.
Like this?
.pictos {
display: block;
height: 70px;
margin: 160px 0 30px;
padding: 0 17%;
width: 100%;
}
.pictos > div {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);
border: 1px solid #fff;
border-radius: 50%;
display: table-row;
float: left;
height: 70px;
width: 70px;
margin: 0 0 0 50px;
}
/* new stuff: */
.pictos a.standard {
background-repeat: no-repeat;
background-color: rgba(255, 255, 255, 1);
/* set two background images: */
background-image: url("http://s11.postimg.org/91k4hiqe7/standard.png"),
url(http://s30.postimg.org/3l9qho5h9/standard_hover.png);
/* set positioning for them both individually: */
background-position: 50% 50%, 50% 39px;
}
.pictos a.standard:hover,
.pictos a.standard:focus {
/* when hovering, change background-color and both of the background-positions: */
background-color: rgba(120, 182, 55, 1);
background-position: 50% -39px, 50% 50%;
}
/* end of new stuff, removed some other unnecessary rules also*/
.pictos > div a {
border-radius: 50%;
display: inline-block;
height: 45px;
margin: 12px;
text-decoration: none;
text-indent: -9999px;
transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
width: 45px;
position:relative;
}
.pictos a.standard:hover span,
.pictos a.standard span:hover,
.pictos a.standard span:focus,
.pictos a.standard:focus span {
display: block;
opacity: 1;
}
.pictos a span::after {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #78b637 rgba(120, 182, 55, 0) rgba(120, 182, 55, 0);
border-image: none;
border-style: solid;
border-width: 6px;
content: " ";
height: 0;
left: 50%;
margin-left: -6px;
pointer-events: none;
position: absolute;
top: 100%;
width: 0;
}
.pictos a span {
background: none repeat scroll 0 0 #78b637;
border: medium none;
border-radius: 9px;
color: #efefef;
font-family: "Montserrat-Regular", sans-serif;
font-size: 13px;
padding: 5px 0;
position: relative;
text-align: center;
text-decoration: none;
text-indent: 0;
text-transform: uppercase;
width: 200px;
position:absolute;
top:-50px;
left:-77px;
opacity:0;
height:16px;
transition:opacity .4s;
}
<div class="pictos">
<div>
<a href="#" class="standard">
<span>standard</span>
</a>
</div>
</div>
I have started with a different approach, using pseudo elements to contain your icons, and animated them on hover.
I have also added an <a> tag to allow you to have text as well
.wrap {
display: inline-block;
padding: 5px;
background: lightgray;
border-radius: 10px;
}
.phone {
height: 50px;
width: 50px;
border-radius: 50%;
border: 10px solid gray;
position: relative;
overflow: hidden;
transition: all 0.6s;
margin: 0 auto;
}
.phone:before,
.phone:after {
content: "";
position: absolute;
top: 0;
left: 0;
background: url(http://s11.postimg.org/91k4hiqe7/standard.png) no-repeat center;
background-size: 60%;
height: 50px;
width: 50px;
transition: all 0.6s;
}
.wrap:hover .phone:before {
top: -100%;
}
.phone:after {
top: 100%;
background: url(http://s30.postimg.org/3l9qho5h9/standard_hover.png) no-repeat center;
background-size: 60%;
}
.wrap:hover .phone:after {
top: 0;
}
.wrap:hover .phone {
background: green;
}
a, span {
transition: all 0.6s;
text-decoration: none;
display: inline-block;
width: 80px;
height: 20px;
border-radius: 10px;
color: white;
text-align: center;
position: relative;
margin: 0 auto;
margin-bottom:10px;
}
a span {
background: green;
opacity: 0;
display: inline-block;
}
.wrap:hover span {
opacity: 1;
}
span:before {
content: "";
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
height: 10px;
width: 10px;
background: inherit;
}
<div class="wrap">
<a href="#"><span>Standard</span>
<div class="phone"></div>
</a>
</div>
Try this:
button {
-webkit-appearance: none;
-moz-appearance: none;
font-family: helvetica;
position: relative;
display: inline-block;
width: 60px;
height: 60px;
border: 1px solid lightgrey;
background-color: white;
border-radius: 50px;
border-width: 10px;
transition: all 1s;
overflow:hidden;
}
button:before{
content:'☎';
color: black;
font-size: 40px;
position: absolute;
top: -10px;
left: 6px;
transition: top 1s;
}
button:hover{
background-color: green;
}
button:hover:before{
top:-100px;
}
button:after{
content:'☎';
color: white;
font-size: 40px;
position: absolute;
top: 50px;
left: 7px;
transition: top 1s;
}
button:hover:after{
top: -10px;
}
<button />