Off canvas menu not working on Iphone 5

Off canvas menu not working on Iphone 5 - javascript

I have an off canvas menu that "according to my client" that appears to not be functioning correctly. There are no errors whatsoever in my console, so I am not sure whats going on here, and i don't have an Iphone/pad to test on. Anyone want to give this a shot? demo
html:
<html>
<body>
<div id="site-wrapper" class="container">
<nav id="site-menu">
<ul class="nav">
<li class="parent"><a class="accordian-toggle" href="#" >Item Parent</a>
<ul class="nav-child unstyled small">
<li>Item</li>
<li>Item</li>
</ul>
</li>
<li class="parent"><a class="accordian-toggle" href="#" >Item Parent</a>
<ul class="nav-child unstyled small">
<li>Item</li>
<li>Item</li>
</ul>
</li>
</ul>
</nav>
<header id="header">
<a class="brand" href="/">My Company</a><br />
</header>
<div id="site-canvas">
<div id="mainbody">
<div class="container-fluid">
<p>main content</p>
</div>
</div>
<footer>
<p>footer</p>
</footer>
</div>
</div>
</body>
</html>
css/less:
header {
position: fixed;
top: 0;
z-index: #z-index * 6;
overflow: hidden;
width: 100%;
height: 65px;
}
#site-wrapper {
.reset-box;
}
#mainbody {
width: #100;
margin: 65px auto 0;
}
#menuToggle {
position: fixed;
top: 15px; left: 0;
z-index: #z-index * 7;
}
#menuButton {
background-color: #black;
margin: 0;
padding: 0;
height: 35px;
width: 50px;
}
#menuButton:hover {background-color: #black-hover;}
#site-menu {
background-color: #black;
height: #100;
position: fixed;
top: 0; left: -340px;
width: 330px;
z-index: #z-index * 5;
}
#site-menu:after {z-index: #z-index * 7;}
#site-canvas {
backface-visibility: hidden;
height: #100;
transform: translateX(0);
transform: translate3d(0, 0, 0);
width: #100;
}
/********************************
/* OFF CANVAS MENU
/*******************************/
.show-nav #site-canvas {
transform: translateX(330px);
transform: translate3d(330px, 0, 0);
}
.reveal #site-menu {
transform: translateX(0);
transform: translate3d(0, 0, 0);
}
.reveal .show-nav #site-menu {
transition: 900ms ease all;
transform: translateX(330px);
transform: translate3d(330px, 0, 0);
}
.reveal .show-nav #site-canvas {
transform: translateX(0);
transform: translate3d(0, 0, 0);
}
and last but not least the js:
/********************************
/* OFF CANVAS MENU
/*******************************/
$(document).ready(function(){
var special = ['reveal'];
$('.main-menu').click(function() {
var transitionClass = jQuery(this).data('transition');
if ($.inArray(transitionClass, special) > -1) {
$('body').removeClass();
$('body').addClass(transitionClass);
} else {
$('body').removeClass();
$('#site-canvas').removeClass();
$('#site-canvas').addClass(transitionClass);
}
$('#site-wrapper').toggleClass('show-nav');
$('.main-menu i').toggleClass('fa-ellipsis-v fa-ellipsis-h');
$('.main-menu div').toggle();
return false;
});
});
/********************************
/* OFF CANVAS MENU HEIGHT
/*******************************/
$(document).ready(function(){
$('#site-canvas').css({'min-height':($(window).height())+'px'});
$(window).resize(function(){
$('#site-canvas').css({'min-height':($(window).height())+'px'});
});
});
/********************************
/* NAV ACCORDIAN
/*******************************/
$(document).ready(function(){
$('.accordian-toggle').click(function(){
$('#site-menu .nav > .parent > .nav-child').slideUp();
if(!$(this).next().is(':visible')){
$(this).next().slideDown();
}
});
});

I found the problem was missing vendor prefixes...
/********************************
/* OFF CANVAS MENU
/*******************************/
.show-nav #site-canvas {
transform: translateX(-330px);
transform: translate3d(-330px, 0, 0);
-webkit-transform: translateX(-330px);
-webkit-transform: translate3d(-330px, 0, 0);
-ms-transform: translateX(-330px);
-ms-transform: translate3d(-330px, 0, 0);
}
.reveal #site-menu {
transform: translateX(0);
transform: translate3d(0, 0, 0);
-webkit-transform: translateX(0);
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translateX(0);
-ms-transform: translate3d(0, 0, 0);
}
.reveal .show-nav #site-menu {
transition: 900ms ease all;
transform: translateX(-330px);
transform: translate3d(-330px, 0, 0);
-webkit-transform: translateX(-330px);
-webkit-transform: translate3d(-330px, 0, 0);
-ms-transform: translateX(-330px);
-ms-transform: translate3d(-330px, 0, 0);
}
.reveal .show-nav #site-canvas {
transform: translateX(0);
transform: translate3d(0, 0, 0);
-webkit-transform: translateX(0);
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translateX(0);
-ms-transform: translate3d(0, 0, 0);
}

Related

Background images dont stay on sides of page when resolution changes

I'm pretty new to css animations but I've got my page looking how I want except for this one glitch. I have a scrolling animation using scrollspy.js and when it hits a certain div images slideinleft or slideinright into the page.
Link here
However when you hit control + mwheel down it doesn't start the anims from outside of the browser window like i would prefer it to. I'm using 1920x1080 res, for reference.
Basically, on page load it looks fine:
But again, when employing the ctrl + mwheel down it becomes this ugly looking page:
I need it to scale.
Any css gurus know what I'm doing wrong?
HTML:
<div class="flex-row panel-row-style panel-row-style-for-4-1 page left-phone has-bg feed active" style="margin-top: 100px; animation-name: slideInLeft;">
<div id="pgc-4-1-0" class="panel-grid-cell panel-grid-cell-empty"></div><div id="pgc-4-1-1" class="panel-grid-cell">
<div id="panel-4-1-1-0" class="so-panel widget widget_sow-image panel-first-child panel-last-child" data-index="2">
<div class="top-img panel-widget-style panel-widget-style-for-4-1-1-0">
<div class="so-widget-sow-image so-widget-sow-image-default-eef982a7180b">
<div class="sow-image-container phone">
<img src="http://streamlistapp.com/wp-content/uploads/2017/06/phone-blank2.png" width="400" height="831" srcset="http://streamlistapp.com/wp-content/uploads/2017/06/phone-blank2.png 400w, http://streamlistapp.com/wp-content/uploads/2017/06/phone-blank2-144x300.png 144w" sizes="(max-width: 400px) 100vw, 400px" class="so-widget-image">
<img class="screen-left layer" src="http://streamlistapp.com/wp-content/uploads/2017/07/purse-inside-screen.png">
</div>
</div>
</div>
</div>
</div><div id="pgc-4-1-2" class="panel-grid-cell panel-grid-cell-mobile-last animated" style="visibility: visible; animation-name: undefined;">
<div id="panel-4-1-2-0" class="so-panel widget widget_siteorigin-panels-builder panel-first-child panel-last-child" data-index="3">
<div id="pl-w5973cd6d9c123" class="panel-layout">
<div id="pg-w5973cd6d9c123-0" class="panel-grid panel-no-style">
<div id="pgc-w5973cd6d9c123-0-0" class="panel-grid-cell">
<div id="panel-w5973cd6d9c123-0-0-0" class="so-panel widget widget_sow-editor panel-first-child panel-last-child" data-index="0">
<div class="link-s front panel-widget-style panel-widget-style-for-w5973cd6d9c123-0-0-0">
<div class="so-widget-sow-editor so-widget-sow-editor-base">
<div class="siteorigin-widget-tinymce textwidget">
<h4>
STREAMING<br>
MARKETPLACE
</h4>
<h3>Streamlist</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><div id="pgc-4-1-3" class="panel-grid-cell panel-grid-cell-empty"></div>
CSS:
.can-transform3d .active.has-bg:before,
.can-transform3d .active.has-bg:after,
.can-transform3d .past-active.has-bg:before,
.can-transform3d .past-active.has-bg:after {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
/*transform: translate3d(328px, 0, 0);*/
transform: translate3d(0px, 0, 0);
}
.has-bg {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.has-bg:before,
.has-bg:after {
content: '';
position:absolute;
display: block;
opacity: 0;
-webkit-transition: all 750ms cubic-bezier(0,0.5,0.25,1);
-moz-transition: all 750ms cubic-bezier(0,0.5,0.25,1);
-o-transition: all 750ms cubic-bezier(0,0.5,0.25,1);
-ms-transition: all 750ms cubic-bezier(0,0.5,0.25,1);
transition: all 750ms cubic-bezier(0,0.5,0.25,1);
-webkit-transition-delay: .25s; /* Safari */
transition-delay: .25s;
z-index: 1;
visibility: visible;
background-repeat: no-repeat;
background-attachment: scroll;
clear: both;
/*width: 100%;*/
}
.past-active:before,
.past-active:after,
.active:before,
.active:after {
opacity: 1 !important;
}
.page {
height: auto;
width: 100%;
position: relative;
text-align: center;
/*padding-top: 60px;*/
z-index: 1;
}
.can-transform3d .left-phone:before,
.can-transform3d .left-phone:before,
.can-transform3d .left-phone:after,
.can-transform3d .left-phone:after {
-webkit-transform: translate3d(150px , 0, 0);
-moz-transform: translate3d(150px , 0, 0);
-o-transform: translate3d(150px , 0, 0);
-ms-transform: translate3d(150px , 0, 0);
/*transform: translate3d(682px , 0, 0);*/
transform: translate3d(150px , 0, 0);
}
.left-phone:before,
.left-phone:after {
margin-left: 0;
/*right: 0;*/
}
.active .phone .screen-left, .active .phone .screen-right,
.past-active .phone .screen-left, .past-active .phone .screen-right {
opacity: 1;
}
.phone .screen-left, .phone .screen-right {
opacity: 0;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
transition: all 1s ease-out;
}
.phone .screen-left {
position: absolute;
top: 12.06656%;
left: 22.37791%;
/*width: 75.460123%;*/
}
.layer {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.feed:before, .discover:before {
background-image: url(http://streamlistapp.com/wp-content/uploads/2017/07/watch3-transparent-bg-e1500713498530.png);
/*top: -150px;*/
height: 564px;
width: 330px;
/*right: -425px;*/
right: -425px;
/*background-position: right center;*/
}
.feed:after, .discover:after {
background-image: url(http://streamlistapp.com/wp-content/uploads/2017/07/bracelet-e1500713698821.jpeg);
height: 260px;
width: 260px;
bottom: 0;
/*right: 15%;*/
right: -6%;
/*background-position: 70% center;*/
}
Scroll spy functions:
//First phone (left)
$('#pgc-4-1-2').on('scrollSpy:exit',function(){
$('.panel-row-style-for-4-1').removeClass('past-active').removeClass('active');
wow.addBox(this);
}).scrollSpy();
$('#pgc-4-1-2').on('scrollSpy:enter',function(){
$(this).removeClass('animated');
$('.panel-row-style-for-4-1')
.removeClass('past-active')
.addClass('active')
.removeClass('animated')
.css({
'animation-name' : 'slideInLeft'
})
wow.addBox(this);
}).scrollSpy();

I want to call multiple hover effect when i hover on a div

I want to call multiple hover effects when I hover on the div=class"component". Right now only individual characters are effected -- here is the jsfiddle link https://jsfiddle.net/ogrwm1zg/
<div class="container">
<div class="component">
<a href="/somelink">
<ul class="grid-see">
<li class="ot-letter-top"><span data-letter="S">S</span></li>
<li class="ot-letter-right"><span data-letter="E">E</span></li>
<li class="ot-letter-right"><span data-letter="E">E</span></li>
<li ><span class="blank-spaces" ></span></li>
</ul>
<ul class="grid-our">
<li class="ot-letter-left"><span data-letter="O">O</span></li>
<li class="ot-letter-left"><span data-letter="U">U</span></li>
<li class="ot-letter-left"><span data-letter="R">R</span></li>
<li ><span class="blank-spaces" ></span></li>
</ul>
<ul class="grid-work">
<li class="ot-letter-left"><span data-letter="W">W</span></li>
<li class="ot-letter-left"><span data-letter="O">O</span></li>
<li class="ot-letter-left"><span data-letter="R">R</span></li>
<li class="ot-letter-top"><span data-letter="K">K</span></li>
</ul>
</a>
</div>
</div>

See this working fiddle. I also removed alot of redundant CSS.
Replace your :hover CSS to affect the container instead of single elements.
E.g. replace the selector:
.ot-letter-top:hover span:after
With this one:
.component:hover .ot-letter-top span:after
.body {
background: white;
}
/* grid */
.grid {
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.grid li {
position: relative;
float: left;
max-height: 290px;
text-align: center;
padding-right: 10px;
}
/* Common styles for the letters */
.grid li span {
display: inline-block;
font-weight: 900;
line-height: 1;
position: relative;
color: #14b9f1;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 550px;
-ms-perspective: 550px;
perspective: 550px;
z-index: 1;
font-size: 90px;
}
.component li span:before,
.component li span:after {
position: absolute;
content: attr(data-letter);
line-height: inherit;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
-webkit-transition: all .3s;
transition: all .3s;
}
.component li span:before {
text-shadow: none;
color: hsla(0, 0%, 0%, 0.12);
}
/* Colors */
.ot-letter-left, .ot-letter-right {
background: #FFF;
}
.ot-letter-left span:after,
.ot-letter-right span:after,
.ot-letter-top span:after,
.ot-letter-bottom span:after {
color: #FFF;
}
.ot-letter-bottom {
background: #e95949;
}
/* Left */
.ot-letter-left span:before,
.ot-letter-left span:after,
.ot-letter-right span:before,
.ot-letter-right span:after {
-webkit-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
transform-origin: 0 50%;
}
.ot-letter-left span:before,
.ot-letter-right span:before {
-webkit-transform: scale(1.08, 1) skew(0deg, 1deg);
-ms-transform: scale(1.08, 1) skew(0deg, 1deg);
transform: scale(1.08, 1) skew(0deg, 1deg);
}
.ot-letter-left span:after,
.ot-letter-right span:after {
text-shadow: -1px 0px 0px hsla(360, 100%, 100%, 0.1), 3px 0px 1px hsla(0, 0%, 0%, 0.4);
-webkit-transform: rotateY(-15deg);
-ms-transform: rotateY(-15deg);
transform: rotateY(-15deg);
}
.component:hover .ot-letter-left span:before,
.component:hover .ot-letter-right span:before {
-webkit-transform: scale(0.85, 1) skew(0deg, 20deg);
-ms-transform: scale(0.85, 1) skew(0deg, 20deg);
transform: scale(0.85, 1) skew(0deg, 20deg);
}
.component:hover .ot-letter-left span:after,
.component:hover .ot-letter-right span:after {
-webkit-transform: rotateY(-40deg);
-ms-transform: rotateY(-40deg);
transform: rotateY(-40deg);
}
/* Up */
.ot-letter-top span:before,
.ot-letter-top span:after {
-webkit-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.ot-letter-top span:before {
-webkit-transform: scale(1, 0.95) skew(-4deg, 0deg);
-ms-transform: scale(1, 0.95) skew(-4deg, 0deg);
transform: scale(1, 0.95) skew(-4deg, 0deg);
}
.ot-letter-top span:after {
text-shadow: 0px 1px 0px hsla(360, 100%, 100%, 0.1), 0px -3px 1px hsla(0, 0%, 0%, 0.4);
-webkit-transform: rotateX(-15deg);
-ms-transform: rotateX(-15deg);
transform: rotateX(-15deg);
}
.ot-letter-top:hover span:before {
-webkit-transform: translateY(-0.050em) scale(1, 0.55) skew(-10deg, 0deg);
-ms-transform: translateY(-0.050em) scale(1, 0.55) skew(-10deg, 0deg);
transform: translateY(-0.050em) scale(1, 0.55) skew(-10deg, 0deg);
}
.component:hover .ot-letter-top span:after {
-webkit-transform: translateY(-0.035em) rotateX(-40deg);
-ms-transform: translateY(-0.035em) rotateX(-40deg);
transform: translateY(-0.035em) rotateX(-40deg);
}
/* Down */
.ot-letter-bottom span:before,
.ot-letter-bottom span:after {
-webkit-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.ot-letter-bottom span:before {
-webkit-transform: scale(1, 1.05) skew(4deg, 0deg);
-ms-transform: scale(1, 1.05) skew(4deg, 0deg);
transform: scale(1, 1.05) skew(4deg, 0deg);
}
.ot-letter-bottom span:after {
text-shadow: 0px -1px 0px hsla(360, 100%, 100%, 0.1), 0px 3px 1px hsla(0, 0%, 0%, 0.4);
-webkit-transform: rotateX(15deg);
-ms-transform: rotateX(15deg);
transform: rotateX(15deg);
}
.component:hover .ot-letter-bottom span:before {
-webkit-transform: translateY(-0.035em) scale(1, 1.2) skew(10deg, 0deg);
-ms-transform: translateY(-0.035em) scale(1, 1.2) skew(10deg, 0deg);
transform: translateY(-0.035em) scale(1, 1.2) skew(10deg, 0deg);
}
.component:hover .ot-letter-bottom span:after {
-webkit-transform: translateY(0.045em) rotateX(40deg);
-ms-transform: translateY(0.045em) rotateX(40deg);
transform: translateY(0.045em) rotateX(40deg);
}
/* Example for media query: change number of items per row */
.blank-spaces {
width: 20px;
}
<body>
<div class="container">
<div class="component">
<a href="/somelink">
<ul class="grid">
<li class="ot-letter-top"><span data-letter="S">S</span></li>
<li class="ot-letter-right"><span data-letter="E">E</span></li>
<li class="ot-letter-right"><span data-letter="E">E</span></li>
<li><span class="blank-spaces"></span></li>
</ul>
<ul class="grid">
<li class="ot-letter-left"><span data-letter="O">O</span></li>
<li class="ot-letter-left"><span data-letter="U">U</span></li>
<li class="ot-letter-left"><span data-letter="R">R</span></li>
<li><span class="blank-spaces"></span></li>
</ul>
<ul class="grid">
<li class="ot-letter-left"><span data-letter="W">W</span></li>
<li class="ot-letter-left"><span data-letter="O">O</span></li>
<li class="ot-letter-left"><span data-letter="R">R</span></li>
<li class="ot-letter-top"><span data-letter="K">K</span></li>
</ul>
</a>
</div>
</div>
<!-- /container -->

CSS Pie Slices Unable To Hover

I have recently been trying to work on css pie menu. Everything works fine, except the hover doesn't work if the slices are more than 9 parts. For clearer picture, visit demo.
The following is my html:
<div class="menu">
<div class="menu-btn"><i class="fa fa-bars"></i></div>
</div>
<div class="menu-items">
<div class="menu-item">
<div class="menu-item-content active"><i class="fa fa-home"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-user"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-sliders"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-envelope"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-cog"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-archive"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-calendar"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-comments"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-suitcase"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-database"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-graduation-cap"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-newspaper-o"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-shopping-bag"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-send"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-support"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-question-circle-o"></i></div>
</div>
</div>
And this is my css:
#import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
html,
body {
color: #000;
}
.menu {
position: fixed;
left: -60px;
top: -60px;
z-index: 10;
width: 120px;
height: 120px;
border-radius: 50%;
border:0.01em solid #455A64;
background-color: #3F51B5;
cursor:pointer;
}
.menu .menu-btn {
position: absolute;
bottom: 30px;
right: 30px;
color:#fff;
font-size:20px;
transition:0.1s linear all;
}
.menu:hover .menu-btn{
font-size:24px;
right:28px;
bottom: 28px;
}
.menu-items {
position: fixed;
top: 100px;
left: 100px;
z-index: 9;
width: 200px;
height: 200px;
color:#fff;
background: transparent;
border-radius: 50%;
/*display:none;*/
}
.menu-item {
position: absolute;
width: 200px;
height: 200px;
left: 0px;
top: 0px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
border-radius: 100px;
clip: rect(0px, 200px, 200px, 100px);
cursor:pointer;
}
.menu-item:nth-child(1) {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.menu-item:nth-child(2) {
-webkit-transform: rotate(112.5deg);
-moz-transform: rotate(112.5deg);
-o-transform: rotate(112.5deg);
transform: rotate(112.5deg);
}
.menu-item:nth-child(3) {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.menu-item:nth-child(4) {
-webkit-transform: rotate(157.5deg);
-moz-transform: rotate(157.5deg);
-o-transform: rotate(157.5deg);
transform: rotate(157.5deg);
}
.menu-item:nth-child(5) {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.menu-item:nth-child(6) {
-webkit-transform: rotate(202.5deg);
-moz-transform: rotate(202.5deg);
-o-transform: rotate(202.5deg);
transform: rotate(202.5deg);
}
.menu-item:nth-child(7) {
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-o-transform: rotate(225deg);
transform: rotate(225deg);
}
.menu-item:nth-child(8) {
-webkit-transform: rotate(247.5deg);
-moz-transform: rotate(247.5deg);
-o-transform: rotate(247.5deg);
transform: rotate(247.5deg);
}
.menu-item:nth-child(9) {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
.menu-item:nth-child(10) {
-webkit-transform: rotate(292.5deg);
-moz-transform: rotate(292.5deg);
-o-transform: rotate(292.5deg);
transform: rotate(292.5deg);
}
.menu-item:nth-child(11) {
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
-o-transform: rotate(315deg);
transform: rotate(315deg);
}
.menu-item:nth-child(12) {
-webkit-transform: rotate(337.5deg);
-moz-transform: rotate(337.5deg);
-o-transform: rotate(337.5deg);
transform: rotate(337.5deg);
}
.menu-item:nth-child(13) {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
.menu-item:nth-child(14) {
-webkit-transform: rotate(382.5deg);
-moz-transform: rotate(382.5deg);
-o-transform: rotate(382.5deg);
transform: rotate(382.5deg);
}
.menu-item:nth-child(15) {
-webkit-transform: rotate(405deg);
-moz-transform: rotate(405deg);
-o-transform: rotate(405deg);
transform: rotate(405deg);
}
.menu-item:nth-child(16) {
-webkit-transform: rotate(427.5deg);
-moz-transform: rotate(427.5deg);
-o-transform: rotate(427.5deg);
transform: rotate(427.5deg);
}
.menu-item-content {
position: absolute;
width: 200px;
height: 200px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
border-radius: 100px;
clip: rect(0px, 100px, 200px, 0px);
background-color: #1b458b;
-webkit-transform: rotate(22.5deg);
-moz-transform: rotate(22.5deg);
-o-transform: rotate(22.5deg);
transform: rotate(22.5deg);
}
.menu-item .menu-item-content i{
position:absolute;
top:12px;
left:77px;
font-size: 16px;
transform: rotate(180deg);
}
.menu-item .menu-item-content:hover, .menu-item .active {
background-color : #1976D2 !important;
}
If possible, there is another problem. If you can observe in the demo, after every 4 parts the border is missing. Please help me with these problems.

Change the menu-item class to
.menu-item {
position: absolute;
width: 200px;
height: 200px;
left: 0px;
top: 0px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
border-radius: 100px;
clip: rect(0px, 138px, 100px, 100px);
cursor: pointer;
}
#import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
html,
body {
color: #000;
}
.menu {
position: fixed;
left: -60px;
top: -60px;
z-index: 10;
width: 120px;
height: 120px;
border-radius: 50%;
border: 0.01em solid #455A64;
background-color: #3F51B5;
cursor: pointer;
}
.menu .menu-btn {
position: absolute;
bottom: 30px;
right: 30px;
color: #fff;
font-size: 20px;
transition: 0.1s linear all;
}
.menu:hover .menu-btn {
font-size: 24px;
right: 28px;
bottom: 28px;
}
.menu-items {
position: fixed;
top: 100px;
left: 100px;
z-index: 9;
width: 200px;
height: 200px;
color: #fff;
background: transparent;
border-radius: 50%;
/*display:none;*/
}
.menu-item {
position: absolute;
width: 200px;
height: 200px;
left: 0px;
top: 0px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
border-radius: 100px;
clip: rect(0px, 138px, 100px, 100px);
cursor: pointer;
}
.menu-item:nth-child(1) {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.menu-item:nth-child(2) {
-webkit-transform: rotate(112.5deg);
-moz-transform: rotate(112.5deg);
-o-transform: rotate(112.5deg);
transform: rotate(112.5deg);
}
.menu-item:nth-child(3) {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.menu-item:nth-child(4) {
-webkit-transform: rotate(157.5deg);
-moz-transform: rotate(157.5deg);
-o-transform: rotate(157.5deg);
transform: rotate(157.5deg);
}
.menu-item:nth-child(5) {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.menu-item:nth-child(6) {
-webkit-transform: rotate(202.5deg);
-moz-transform: rotate(202.5deg);
-o-transform: rotate(202.5deg);
transform: rotate(202.5deg);
}
.menu-item:nth-child(7) {
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-o-transform: rotate(225deg);
transform: rotate(225deg);
}
.menu-item:nth-child(8) {
-webkit-transform: rotate(247.5deg);
-moz-transform: rotate(247.5deg);
-o-transform: rotate(247.5deg);
transform: rotate(247.5deg);
}
.menu-item:nth-child(9) {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
.menu-item:nth-child(10) {
-webkit-transform: rotate(292.5deg);
-moz-transform: rotate(292.5deg);
-o-transform: rotate(292.5deg);
transform: rotate(292.5deg);
}
.menu-item:nth-child(11) {
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
-o-transform: rotate(315deg);
transform: rotate(315deg);
}
.menu-item:nth-child(12) {
-webkit-transform: rotate(337.5deg);
-moz-transform: rotate(337.5deg);
-o-transform: rotate(337.5deg);
transform: rotate(337.5deg);
}
.menu-item:nth-child(13) {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
.menu-item:nth-child(14) {
-webkit-transform: rotate(382.5deg);
-moz-transform: rotate(382.5deg);
-o-transform: rotate(382.5deg);
transform: rotate(382.5deg);
}
.menu-item:nth-child(15) {
-webkit-transform: rotate(405deg);
-moz-transform: rotate(405deg);
-o-transform: rotate(405deg);
transform: rotate(405deg);
}
.menu-item:nth-child(16) {
-webkit-transform: rotate(427.5deg);
-moz-transform: rotate(427.5deg);
-o-transform: rotate(427.5deg);
transform: rotate(427.5deg);
}
.menu-item-content {
position: absolute;
width: 200px;
height: 200px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
border-radius: 100px;
clip: rect(0px, 100px, 200px, 0px);
background-color: #1b458b;
-webkit-transform: rotate(22.5deg);
-moz-transform: rotate(22.5deg);
-o-transform: rotate(22.5deg);
transform: rotate(22.5deg);
}
.menu-item .menu-item-content i {
position: absolute;
top: 12px;
left: 77px;
font-size: 16px;
transform: rotate(180deg);
}
.menu-item .menu-item-content:hover,
.menu-item .active {
background-color: #1976D2 !important;
}
<div class="menu">
<div class="menu-btn"><i class="fa fa-bars"></i></div>
</div>
<div class="menu-items">
<div class="menu-item">
<div class="menu-item-content active"><i class="fa fa-home"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-user"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-sliders"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-envelope"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-cog"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-archive"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-calendar"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-comments"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-suitcase"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-database"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-graduation-cap"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-newspaper-o"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-shopping-bag"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-send"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-support"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-question-circle-o"></i></div>
</div>
</div>

Trigger click on one anchor when another is clicked

When I click on the link, I would like the link to be also clicked. However, nothing happens with my code, see fiddle.
HTML:
<section class="space_between">
<h3 class="center_rounded_ol">Man-to-man suggestions</h3>
<ol class="rounded-list center_rounded_ol">
<li>
Name Surname
</li>
</ol>
</section>
<nav class="nav-fillpath">
<a class="next" onClick="load()">
<span class="icon-wrap"></span>
<h3><strong>Alexis</strong> Tsipras</h3>
</a>
</nav>
JavaScript:
function load() {
$("#foo").tigger('click');
}
function burn() {
$(this).css("color", "red");
}

I personally prefer writing it this way: JS Fiddle
$('.next').on('click', function() {
$("#foo").trigger('click');
});
$('#foo').on('click', function() {
$(this).css("color", "red");
});
$('.next').on('click', function() {
$("#foo").trigger('click');
});
$('#foo').on('click', function() {
$(this).css("color", "red");
});
nav a {
position: absolute;
top: 50%;
display: block;
outline: none;
text-align: left;
z-index: 1000;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
nav a.prev {
left: 0;
}
nav a.next {
right: 0;
}
nav a svg {
display: block;
margin: 0 auto;
padding: 0;
}
/*--------------------*/
/* Fillpath (http://www.nizuka.fr/)*/
/*--------------------*/
.color-10 {
background: #f3cf3f;
}
.nav-fillpath a {
width: 100px;
height: 100px;
}
.nav-fillpath .icon-wrap {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.nav-fillpath a::before,
.nav-fillpath a::after,
.nav-fillpath .icon-wrap::before,
.nav-fillpath .icon-wrap::after {
position: absolute;
left: 50%;
width: 3px;
height: 50%;
background: #566475;
content: '';
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.nav-fillpath .icon-wrap::before,
.nav-fillpath .icon-wrap::after {
z-index: 100;
height: 0;
background: #fff;
-webkit-transition: height 0.3s, -webkit-transform 0.3s;
transition: height 0.3s, transform 0.3s;
}
.nav-fillpath a::before,
.nav-fillpath .icon-wrap::before {
top: 50%;
-webkit-transform: translateX(-50%) rotate(-135deg);
transform: translateX(-50%) rotate(-135deg);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.nav-fillpath a.next::before,
.nav-fillpath a.next .icon-wrap::before {
-webkit-transform: translateX(-50%) rotate(135deg);
transform: translateX(-50%) rotate(135deg);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.nav-fillpath a::after,
.nav-fillpath .icon-wrap::after {
top: 50%;
-webkit-transform: translateX(-50%) rotate(-45deg);
transform: translateX(-50%) rotate(-45deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.nav-fillpath a.next::after,
.nav-fillpath a.next .icon-wrap::after {
-webkit-transform: translateX(-50%) rotate(45deg);
transform: translateX(-50%) rotate(45deg);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
.nav-fillpath h3 {
position: absolute;
top: 50%;
margin: 0;
color: #fff;
text-transform: uppercase;
font-weight: 300;
font-size: 0.85em;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
}
.nav-fillpath a.prev h3 {
left: 100%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}
.nav-fillpath a.next h3 {
right: 100%;
text-align: right;
-webkit-transform: translateY(-50%) translateX(50%);
transform: translateY(-50%) translateX(50%);
}
.nav-fillpath a:hover .icon-wrap::before,
.nav-fillpath a:hover .icon-wrap::after {
height: 50%;
}
.nav-fillpath a:hover::before,
.nav-fillpath a:hover .icon-wrap::before {
-webkit-transform: translateX(-50%) rotate(-125deg);
transform: translateX(-50%) rotate(-125deg);
}
.nav-fillpath a.next:hover::before,
.nav-fillpath a.next:hover .icon-wrap::before {
-webkit-transform: translateX(-50%) rotate(125deg);
transform: translateX(-50%) rotate(125deg);
}
.nav-fillpath a:hover::after,
.nav-fillpath a:hover .icon-wrap::after {
-webkit-transform: translateX(-50%) rotate(-55deg);
transform: translateX(-50%) rotate(-55deg);
}
.nav-fillpath a.next:hover::after,
.nav-fillpath a.next:hover .icon-wrap::after {
-webkit-transform: translateX(-50%) rotate(55deg);
transform: translateX(-50%) rotate(55deg);
}
.nav-fillpath a:hover h3 {
opacity: 1;
-webkit-transform: translateY(-50%) translateX(0);
transform: translateY(-50%) translateX(0);
}
#media screen and (max-width: 520px) {
.nav-slide a.prev,
.nav-reveal a.prev,
.nav-doubleflip a.prev,
.nav-fillslide a.prev,
.nav-growpop a.prev {
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
.nav-slide a.next,
.nav-reveal a.next,
.nav-doubleflip a.next,
.nav-fillslide a.next,
.nav-growpop a.next {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.nav-slide a,
.nav-reveal a,
.nav-doubleflip a,
.nav-fillslide a {
-webkit-transform: scale(0.6);
transform: scale(0.6);
}
.nav-growpop a {
-webkit-transform: translateY(-50%) scale(0.6);
transform: translateY(-50%) scale(0.6);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<section class="space_between">
<h3 class="center_rounded_ol">Man-to-man suggestions</h3>
<ol class="rounded-list center_rounded_ol">
<li>
Name Surname
</li>
</ol>
</section>
<nav class="nav-fillpath">
<a class="next">
<span class="icon-wrap"></span>
<h3><strong>Alexis</strong> Tsipras</h3>
</a>
</nav>
Update:
using this is better because this way you separate your javascript all in .js or <script> instead of having it scattered on DOM elements so keep the HTML "clean", something like the inline CSS vs external CSS. Beside doing it this way you can easily attach more than one event..
This post jQuery.click() vs onClick has more detailed answer.

There is a typo in load() function:
function load() {
$("#foo").trigger('click'); //'r' was missing
}
Please note that
$(this)
inside burn() function returns window instance, is that what you are expecting there?
In case you want to change color of a link that gets clicked here is a HTML code (notice event parameter added):
Name Surname
and js:
function burn(element) {
$(element).css("color", "red");
}
This solution with 'this' lets you reuse burn() function for more that one link, it doesn't bind you to #foo elemenent only.

jQuery panel slider opens with button click but won't close

I have a button on my page which opens a right panel by using jquery and modernizr frameworks. Button is placed on the rightmost place of screen. When it is clicked it slides to the left with the panel which it opens. The problem is, it won't slide back to where it was when it is clicked again.
HTML:
<!-- right panel -->
<div class="cd-panel from-right">
<header class="cd-panel-header">
<h1>Views</h1>
Close
</header>
<div class="cd-panel-container">
Views
<div class="cd-panel-content" ng-controller="ViewtreeCtrl">
<div>
Panel elements
</div>
</div>
<!-- cd-panel-content -->
</div>
<!-- cd-panel-container -->
Javascript:
jQuery(document).ready(function($){
//open the lateral panel
$('.cd-btn').on('click', function(event){
event.preventDefault();
$('.cd-panel').addClass('is-visible');
});
//clode the lateral panel
$('.cd-panel').on('click', function(event){
if( $(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close') ) {
$('.cd-panel').removeClass('is-visible');
event.preventDefault();
}
});
});
JsFiddle demo (You can see the CSS on JSFiddle)

jQuery(document).ready(function($){
//open the lateral panel
$('.cd-btn').on('click', function(event){
event.preventDefault();
//use toggleClass
$('.cd-panel').toggleClass('is-visible');
});
});
JSFIDDLE
http://jsfiddle.net/Lecgrfvu/3/

Try this i used toggleClass (View in full screen mode to see the result)
jQuery(document).ready(function ($) {
//open the lateral panel
$('.cd-btn').on('click', function (event) {
event.preventDefault();
$('.cd-panel').toggleClass('is-visible');
});
//clode the lateral panel
});
.cd-panel-close {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 60px;
/* image replacement */
display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
.cd-panel-close::before, .cd-panel-close::after {
/* close icon created in CSS */
position: absolute;
top: 22px;
left: 20px;
height: 3px;
width: 20px;
background-color: #424f5c;
/* this fixes a bug where pseudo elements are slighty off position */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cd-panel-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-panel-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.no-touch .cd-panel-close:hover {
background-color: #424f5c;
}
.no-touch .cd-panel-close:hover::before, .no-touch .cd-panel-close:hover::after {
background-color: #ffffff;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.no-touch .cd-panel-close:hover::before {
-webkit-transform: rotate(220deg);
-moz-transform: rotate(220deg);
-ms-transform: rotate(220deg);
-o-transform: rotate(220deg);
transform: rotate(220deg);
}
.no-touch .cd-panel-close:hover::after {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.cd-panel-container {
position: fixed;
width: 90%;
height: 100%;
top: 0;
background: #dbe2e9;
z-index: 1;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.from-right .cd-panel-container {
right: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.from-left .cd-panel-container {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.is-visible .cd-panel-container {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
}
#media only screen and (min-width: 768px) {
.cd-panel-container {
width: 70%;
}
}
#media only screen and (min-width: 1170px) {
.cd-panel-container {
width: 20%;
}
}
.cd-panel-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 70px 5%;
overflow: auto;
/* smooth scrolling on touch devices */
-webkit-overflow-scrolling: touch;
}
.cd-panel-content p {
font-size: 14px;
font-size: 0.875rem;
color: #424f5c;
line-height: 1.4;
margin: 2em 0;
}
.cd-panel-content p:first-of-type {
margin-top: 0;
}
#media only screen and (min-width: 768px) {
.cd-panel-content p {
font-size: 16px;
font-size: 1rem;
line-height: 1.6;
}
}
.cd-btn {
visibility: visible !important;
position: absolute;
top: 400px;
left: -50px;
font-size: 16px;
padding: 10px;
margin: 0 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="cd-panel from-right">
<header class="cd-panel-header">
<h1>Views</h1>
Close
</header>
<div class="cd-panel-container"> Views
<div class="cd-panel-content" ng-controller="ViewtreeCtrl">
<div>
<ul class="collapsible-list">
<li class="nav-header">Views</li>
<li class="collapsible-list-subnav" ng-repeat="treeObject in treeObjects"><a class="collapsible-list-parent">{{treeObject.name}}</a>
<ul class="collapsible-list secondary">
<li class="collapsible-list-subnav"><a class="collapsible-list-parent">Public Views</a>
<ul class="collapsible-list tertiary">
<li ng-repeat="publicView in treeObject.publicViews" ng-click="viewClick($event, publicView)"><a>{{publicView.title}}</a>
</li>
</ul>
</li>
<li class="collapsible-list-subnav"><a class="collapsible-list-parent">Private Views</a>
<ul class="collapsible-list tertiary">
<li ng-repeat="privateView in treeObject.privateViews" ng-click="viewClick($event, privateView)"><a>{{privateView.title}}</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- cd-panel-content -->
</div>
<!-- cd-panel-container -->
</div>

Develop Reference

JavaScript is the programming language of the Web.

Off canvas menu not working on Iphone 5 - javascript

Related

Background images dont stay on sides of page when resolution changes

I want to call multiple hover effect when i hover on a div

CSS Pie Slices Unable To Hover

Trigger click on one anchor when another is clicked

jQuery panel slider opens with button click but won't close

Categories

Resources