jQuery Content slider blocks responsive menu drawer

jQuery Content slider blocks responsive menu drawer - javascript

The content slider blocks the menu items of my responsive site
I have used the following css to accomplish this
/* http://www.menucool.com */
#sliderFrame, #sliderFrame div {
box-sizing: content-box;
}
#sliderFrame
{
width:920px;
margin:0 auto; /*center-aligned*/
padding:20px;
box-shadow: 0 0 5px #BBB;
border:1px solid #CCC;
background-color:#FFF;
}
#slider, #slider .sliderInner {
width:680px;height:306px;/* Must be the same size as the slider images */
border-radius:0px;
}
#slider {
background-color:white;
float:left;
position:relative;
transform: translate3d(0,0,0);
}
/* the link style (if an image is wrapped by a link) */
#slider a.imgLink, #slider .video {
z-index:2;
cursor:pointer;
position:absolute;
top:0px;left:0px;border:0;padding:0;margin:0;
width:100%;height:100%;
}
#slider .video {
background:transparent url(video.png) no-repeat 50% 50%;
}
/* Caption styles */
#slider .mc-caption {
position:absolute;
width:400px;
height:auto;
padding:10px 0;/* 10px will increase height.*/
left:120px;
bottom:10px;
overflow:hidden;
font:bold 13px/16px Arial;
color:#069;
text-align:center;
background:rgba(255,255,255,0.2);
border:1px solid rgba(255,255,255,0.3);
border-radius: 5px;
}
#slider .mc-caption a {
color:#060;
}
/* ------ built-in navigation bullets wrapper ------*/
#slider .navBulletsWrapper {
display:none;
}
/* --------- Others ------- */
#slider img, #slider>b, #slider a>b {
position:absolute; border:none; display:none;
}
#slider .sliderInner {
overflow:hidden;
position:absolute; top:0; left:0;
}
#slider>a, #slider video, #slider audio {display:none;}
#slider div {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
/* -- thumbnails -- */
#thumbs
{
float:left;
margin-left:10px;
width:230px;
font:normal 11px/13px Arial;
border-top:1px solid #CCC;
color:#666;
}
#thumbs .thumb
{
border:1px solid #CCC;
border-top:1px solid #FFF;
padding:11px 8px;
background:#EEE;
cursor:pointer;
}
#thumbs .thumb-on
{
background:#FFF;
}
#thumbs img{border:1px solid #DDD; cursor:pointer; width:70px; height:44px;}
#thumbs .frame {float:left;padding:2px;border:1px solid #CCC;background:white;border-radius:3px;box-shadow:0 0 3px #BBB;font-size:0;line-height:0;}
#thumbs .thumb-content {float:left;width:110px;padding-left:18px;}
/* Captions in #thumbs .thumb-content */
#thumbs .thumb-content p {font-weight:bold; color:#BF5D9B; margin:0 0 3px;padding:0;}
#thumbs .thumb-on .thumb-content p {color:#BB0000;}
And the following html for the slider
<div id="sliderFrame" style="align-content:flex-start;background-color:#93C994;">
<div id="slider">
<img src="img/3.jpg" alt="Caption for slide 1" />
<img src="img/slider_jquery_responsive_slideme.jpg" alt="Caption for slide 2" />
<img src="slide-3.jpg" alt="Header File" />
<img src="img/picto.png" alt="Caption for slide 3" style="height:350px;width:800px"/>
<img src="img/3.jpg" alt="Caption for slide 4"/>
<img src="img/slider_jquery_responsive_slideme.jpg" alt="Caption for slide 5"/>
</div>
</div>
here is the html for the menu drawer
<header role="banner">
<div id="cd-logo"><img src="img/cd-logo.svg" alt="logo" onClick="#"></div>
<nav class="main-nav">
<ul><!-- insert more links here -->
<li><a class="cd-signin" href="#0">Sign in</a></li>
<li><a class="cd-signup" href="#0">Sign up</a></li>
</ul>
</nav>
</header>
and its corresponding CSS
/* --------------------------------
Main components
-------------------------------- */
header[role=banner] {
position: relative;
height: 50px;
background: #343642;
}
header[role=banner] #cd-logo {
float: left;
margin: 4px 0 0 5%;
/* reduce logo size on mobile and make sure it is left aligned with the transform-origin property */
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
header[role=banner] #cd-logo img {
display: block;
}
header[role=banner]::after {
/* clearfix */
content: '';
display: table;
clear: both;
}
#media only screen and (min-width: 768px) {
header[role=banner] {
height: 80px;
}
header[role=banner] #cd-logo {
margin: 20px 0 0 5%;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
z-index:inherit;
}
}
.main-nav {
float: right;
margin-right: 5%;
width: 44px;
height: 100%;
background: url("../img/cd-icon-menu.svg") no-repeat center center;
cursor: pointer;
}
.main-nav ul {
position: absolute;
top: 0;
left: 0;
width: 100%;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.main-nav ul.is-visible {
-webkit-transform: translateY(50px);
-moz-transform: translateY(50px);
-ms-transform: translateY(50px);
-o-transform: translateY(50px);
transform: translateY(50px);
}
.main-nav a {
display: block;
height: 50px;
line-height: 50px;
padding-left: 5%;
background: #292a34;
border-top: 1px solid #3b3d4b;
color: #FFF;
}
#media only screen and (min-width: 768px) {
.main-nav {
width: auto;
height: auto;
background: none;
cursor: auto;
}
.main-nav ul {
position: static;
width: auto;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
line-height: 80px;
}
.main-nav ul.is-visible {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.main-nav li {
display: inline-block;
margin-left: 1em;
}
.main-nav li:nth-last-child(2) {
margin-left: 2em;
}
.main-nav a {
display: inline-block;
height: auto;
line-height: normal;
background: transparent;
}
.main-nav a.cd-signin, .main-nav a.cd-signup {
padding: .6em 1em;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 50em;
}
.main-nav a.cd-signup {
background: #2f889a;
border: none;
}
}
Can Anyone help me???

The slider is positioned above the header because it has a higher z-index value. Simply give the header a higher z-index value:
.header {
...
z-index: 10;
}
For more information on stacking context there is an excellent article on mdn.

Related

Angular 4+ Creating a Semi-Circular Nav Menu, Modular vs. Global CSS

I have been trying to create an animated circular navigation menu in Angular 4+ inspired by this blog post
However I am having a little bit of trouble translating this into Angular properly. As a starting point I have stripped down the code to the absolute minimum working point. 1 html, 1 js and 1 css file.
This is the goal:
And this is what the following code produces right now. Notice the icons stuck on the left top corner driving the circular nav size to 0:
Angular Code:
index.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>GuiltyGorillaMerch</title>
<base href="/">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="assets/modern.js"></script>
<script type="text/javascript" src="assets/polyfills.js"></script>
</head>
<body>
<app-root></app-root>
<script type="text/javascript">
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
myFunction()
</script>
<script type="text/javascript" src="assets/demo.js"></script>
</body>
</html>
bottom-menu.component.html
<button class="cn-button" (click)="handle()" id="cn-button">{{buttonLogo}}</button>
<div [ngClass] = "{'opened-nav': open}" class="cn-wrapper" id="cn-wrapper">
<ul>
<li><span class="icon-picture"></span></li>
<li><span class="icon-headphones"></span></li>
<li><span class="icon-home"></span></li>
<li><span class="icon-facetime-video"></span></li>
<li><span class="icon-envelope-alt"></span></li>
</ul>
</div>
<div [ngClass] = "{'on-overlay': open}" id="cn-overlay" class="cn-overlay"></div>
bottom-menu.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-bottom-menu',
templateUrl: './bottom-menu.component.html',
styleUrls: ['./bottom-menu.component.css']
})
export class BottomMenuComponent implements OnInit {
open : boolean;
buttonLogo: string = "+";
constructor() {
this.open = false;
}
ngOnInit() {
}
ngAfterViewInit(){
var button = document.getElementById('cn-button');
var wrapper = document.getElementById('cn-wrapper');
var overlay = document.getElementById('cn-overlay');
}
openNav(){
this.open = true;
this.buttonLogo = "-"
}
closeNav(){
this.open = false;
this.buttonLogo = "+";
}
handle(){
if(!this.open){
this.openNav()
}else{
this.closeNav()
}
}
}
bottom-menu.component.css (directly copied from original CSS):
#import url(http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css);
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
position: relative
}
html,
body {
height: 100%;
}
body {
background: #f06060;
color: #fff;
}
.csstransforms .cn-wrapper {
font-size: 1em;
width: 26em;
height: 26em;
overflow: hidden;
position: fixed;
z-index: 10;
bottom: -13em;
left: 50%;
border-radius: 50%;
margin-left: -13em;
-webkit-transform: scale(0.1);
-ms-transform: scale(0.1);
-moz-transform: scale(0.1);
transform: scale(0.1);
pointer-events: none;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
}
.csstransforms .opened-nav {
border-radius: 50%;
pointer-events: auto;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.cn-overlay {
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 0;
visibility: hidden;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
z-index: 2;
}
.cn-overlay.on-overlay {
visibility: visible;
opacity: 1;
}
.cn-button {
border: none;
background: none;
color: #f06060;
text-align: center;
font-size: 1.8em;
padding-bottom: 1em;
height: 3.5em;
width: 3.5em;
background-color: #fff;
position: fixed;
left: 50%;
margin-left: -1.75em;
bottom: -1.75em;
border-radius: 50%;
cursor: pointer;
z-index: 11;
}
.cn-button:hover,
.cn-button:active,
.cn-button:focus {
color: #aa1010;
}
.csstransforms .cn-wrapper li {
position: absolute;
font-size: 1.5em;
width: 10em;
height: 10em;
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
overflow: hidden;
left: 50%;
top: 50%;
margin-top: -1.3em;
margin-left: -10em;
-webkit-transition: border .3s ease;
-moz-transition: border .3s ease;
transition: border .3s ease;
}
.csstransforms .cn-wrapper li a {
display: block;
font-size: 1.18em;
height: 14.5em;
width: 14.5em;
position: absolute;
bottom: -7.25em;
right: -7.25em;
border-radius: 50%;
text-decoration: none;
color: #fff;
padding-top: 1.8em;
text-align: center;
-webkit-transform: skew(-50deg) rotate(-70deg) scale(1);
-ms-transform: skew(-50deg) rotate(-70deg) scale(1);
-moz-transform: skew(-50deg) rotate(-70deg) scale(1);
transform: skew(-50deg) rotate(-70deg) scale(1);
-webkit-backface-visibility: hidden;
-webkit-transition: opacity 0.3s, color 0.3s;
-moz-transition: opacity 0.3s, color 0.3s;
transition: opacity 0.3s, color 0.3s;
}
.csstransforms .cn-wrapper li a span {
font-size: 1.1em;
opacity: 0.7;
}
.csstransforms .cn-wrapper li:first-child {
-webkit-transform: rotate(-10deg) skew(50deg);
-ms-transform: rotate(-10deg) skew(50deg);
-moz-transform: rotate(-10deg) skew(50deg);
transform: rotate(-10deg) skew(50deg);
}
.csstransforms .cn-wrapper li:nth-child(2) {
-webkit-transform: rotate(30deg) skew(50deg);
-ms-transform: rotate(30deg) skew(50deg);
-moz-transform: rotate(30deg) skew(50deg);
transform: rotate(30deg) skew(50deg);
}
.csstransforms .cn-wrapper li:nth-child(3) {
-webkit-transform: rotate(70deg) skew(50deg);
-ms-transform: rotate(70deg) skew(50deg);
-moz-transform: rotate(70deg) skew(50deg);
transform: rotate(70deg) skew(50deg)
}
.csstransforms .cn-wrapper li:nth-child(4) {
-webkit-transform: rotate(110deg) skew(50deg);
-ms-transform: rotate(110deg) skew(50deg);
-moz-transform: rotate(110deg) skew(50deg);
transform: rotate(110deg) skew(50deg);
}
.csstransforms .cn-wrapper li:nth-child(5) {
-webkit-transform: rotate(150deg) skew(50deg);
-ms-transform: rotate(150deg) skew(50deg);
-moz-transform: rotate(150deg) skew(50deg);
transform: rotate(150deg) skew(50deg);
}
.csstransforms .cn-wrapper li:nth-child(odd) a {
background-color: #a11313;
background-color: hsla(0, 88%, 63%, 1);
}
.csstransforms .cn-wrapper li:nth-child(even) a {
background-color: #a61414;
background-color: hsla(0, 88%, 65%, 1);
}
.csstransforms .cn-wrapper li.active a {
background-color: #b31515;
background-color: hsla(0, 88%, 70%, 1);
}
.csstransforms .cn-wrapper li:not(.active) a:hover,
.csstransforms .cn-wrapper li:not(.active) a:active,
.csstransforms .cn-wrapper li:not(.active) a:focus {
background-color: #b31515;
background-color: hsla(0, 88%, 70%, 1);
}
.csstransforms .cn-wrapper li:not(.active) a:focus
{
position:fixed;
}
.no-csstransforms .cn-button {
display: none;
}
.no-csstransforms .cn-wrapper li {
position: static;
float: left;
font-size: 1em;
height: 5em;
width: 5em;
background-color: #eee;
text-align: center;
line-height: 5em;
}
.no-csstransforms .cn-wrapper li a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
color: inherit;
font-size: 1.3em;
border-right: 1px solid #ddd;
}
.no-csstransforms .cn-wrapper li a:last-child {
border: none;
}
.no-csstransforms .cn-wrapper li a:hover,
.no-csstransforms .cn-wrapper li a:active,
.no-csstransforms .cn-wrapper li a:focus {
background-color: white;
}
.no-csstransforms .cn-wrapper li.active a {
background-color: #6F325C;
color: #fff;
}
.no-csstransforms .cn-wrapper {
font-size: 1em;
height: 5em;
width: 25.15em;
bottom: 0;
margin-left: -12.5em;
overflow: hidden;
position: fixed;
z-index: 10;
left: 50%;
border: 1px solid #ddd;
}
#media screen and (max-width:480px) {
.csstransforms .cn-wrapper {
font-size: .68em;
}
.cn-button {
font-size: 1em;
}
.csstransforms .cn-wrapper li {
font-size: 1.52em;
}
}
#media screen and (max-width:320px) {
.no-csstransforms .cn-wrapper {
width: 15.15px;
margin-left: -7.5em;
}
.no-csstransforms .cn-wrapper li {
height: 3em;
width: 3em;
}
}
EDIT:
As soon as I moved the CSS to the global assets/styles.css
file the styling took effect properly. However I am curious as to why it works
in global CSS but not in the module's respective css file. Any thoughts?

The styles specified in #Component metadata apply only within the template of that component.
https://angular.io/guide/component-styles#style-scope
You define they styles for html, body etc. in a component that doesn't use those elements in its template, so those styles don't take effect, those need to be in your common styles file.
bottom-menu.component.css seems the right place for the css that only applies to the html you defined in your component, such as the .cn- classes

How to take off the y-overflow?

I am trying to build a vertical tab system. I have several problems yet, but I am having problems with it without overflowing in y position.
I believe I am not working out well with the content part.
<div class="content">
<h3 class="heading">Tab 4 Content</h3>
<p class="description">Lorem cumque.</p>
// ----------------- Variables
wrapper = $(".tabs");
tabs = wrapper.find(".nav-tab");
tabToggle = wrapper.find(".tab-toggle");
// ----------------- Functions
function openTab() {
var content = $(this).parent().next(".content"),
activeItems = wrapper.find(".active");
if (!$(this).hasClass('active')) {
$(this).add(content).add(activeItems).toggleClass('active');
wrapper.css('min-height', content.outerHeight());
}
};
// ----------------- Interactions
tabToggle.on('click', openTab);
// ----------------- Constructor functions
$(window).load(function() {
tabToggle.first().trigger('click');
});
button,
.button {
position: relative;
display: inline-block;
color: white;
padding: 0.75rem 2rem;
margin: 0 auto;
background-color: #374d72;
border: none;
width: 100%;
font-weight: bold;
font-size: 1.2rem;
text-align: center;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
button:hover,
.button:hover {
background-color: #374d72;
}
button:hover:before,
button:hover:after,
.button:hover:before,
.button:hover:after {
color: #4cc4cf;
}
button:after,
button:before,
.button:after,
.button:before {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
/* ---------------------- Vertical Tabs */
.tabs {
position: relative;
min-height: 0;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
/* ---------------------- Tab */
/* ---------------------- Content */
}
.tabs .nav-tab {
margin-bottom: 1px;
/* ---------------------- Tab Toggle */
}
#media screen and (min-width: 10rem) {
.tabs .nav-tab {
float: left;
clear: left;
width: 30%;
}
}
.tabs .nav-tab .tab-toggle {
padding: 1rem 4rem 1rem 2rem;
position: relative;
outline: none;
width: 100%;
}
#media screen and (min-width: 10rem) {
.tabs .nav-tab .tab-toggle {
text-align: left;
}
}
.tabs .nav-tab .tab-toggle:after {
content: "\25BC";
position: absolute;
display: block;
right: 2rem;
top: 50%;
-webkit-transform: rotate(0deg) translateY(-50%);
-moz-transform: rotate(0deg) translateY(-50%);
-ms-transform: rotate(0deg) translateY(-50%);
-o-transform: rotate(0deg) translateY(-50%);
transform: rotate(0deg) translateY(-50%);
}
#media screen and (min-width: 10rem) {
.tabs .nav-tab .tab-toggle:after {
-webkit-transform: rotate(-90deg) translateX(50%);
-moz-transform: rotate(-90deg) translateX(50%);
-ms-transform: rotate(-90deg) translateX(50%);
-o-transform: rotate(-90deg) translateX(50%);
transform: rotate(-90deg) translateX(50%);
}
}
.tabs .nav-tab .tab-toggle.active {
color: #8099c2;
background-color: white;
cursor: default;
}
.tabs .nav-tab .tab-toggle.active:after {
color: #8099c2;
-webkit-transform: rotate(180deg) translateY(50%);
-moz-transform: rotate(180deg) translateY(50%);
-ms-transform: rotate(180deg) translateY(50%);
-o-transform: rotate(180deg) translateY(50%);
transform: rotate(180deg) translateY(50%);
}
#media screen and (min-width: 10rem) {
.tabs .nav-tab .tab-toggle.active:after {
-webkit-transform: rotate(-90deg) translateX(50%) translateY(0);
-moz-transform: rotate(-90deg) translateX(50%) translateY(0);
-ms-transform: rotate(-90deg) translateX(50%) translateY(0);
-o-transform: rotate(-90deg) translateX(50%) translateY(0);
transform: rotate(-90deg) translateX(50%) translateY(0);
right: 1rem;
}
}
.tabs .content {
max-height: 0;
overflow: hidden;
background-color: #efefef;
}
#media screen and (min-width: 10rem) {
.tabs .content {
max-height: none;
position: absolute;
right: 0;
top: 0;
width: 70%;
opacity: 0;
padding: 0rem 2rem 2rem 2rem;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
}
.tabs .content.active {
max-height: 1000px;
}
#media screen and (min-width: 10rem) {
.tabs .content.active {
max-height: none;
opacity: 1;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
}
.tabs .content>.heading {
font-size: 1.5rem;
margin-bottom: 1rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="tabs">
<div class="nav-tab">
<button class="tab-toggle">Tab 1</button>
</div>
<div class="content">
<h3 class="heading">Tab 1 Content</h3>
<p class="description">Lorem cumque.</p>
</div>
<div class="nav-tab">
<button class="tab-toggle">Tab 2</button>
</div>
<div class="content">
<h3 class="heading">Tab 2 Content</h3>
<p class="description">Lorem cumque.</p>
</div>
</div>
</div>
</div>
I made it full width, but dont want it overflowing

Why must I click twice to open and close my menu

Hello I got a situation which I do not understand quite well. I have the following setup:
$(document).ready(function(){
$('.menuBtn').on('click touch', function () {
$(this).toggleClass('act');
if($(this).hasClass('act')) {
$('.mobileMenu').addClass('act');
//$('body').addClass('positionfixed');
}
else {
$('.mobileMenu').removeClass('act');
//$('body').removeClass('positionfixed');
}
});
});
.mobile-menu-button{
display:block;
position:fixed;
top:20px;
left:20px;
z-index:99;
background-color:#19b698;
padding:5px 10px;
color:#fff;
font-family: Open Sans;
font-weight:bold;
}
.mobile-menu-button i{
font-size:26px;
background-color:#00adee;
padding:5px 10px;
color:#fff;
}
.mobileMenu {
background-color: #fff !important;
position: fixed;
left: 0;
top: 0;
z-index: 100;
height: 100vh;
width: 100vw;
display: block;
text-align: center;
opacity: 0;
-webkit-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transform: scale(0);
transform: scale(0);
overflow:hidden;
}
.mobileMenu img{
max-width:90%;
margin:0 auto;
margin-top:20px;
margin-bottom:10px;
border-bottom:1px dotted #717274;
padding-bottom:20px;
}
.mobileMenu.act {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.mobileMenu.act ul li {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
display:block !important;
}
.mobileMenu ul {
display: block;
vertical-align: middle;
}
.mobileMenu li {
padding: 10px 0 !important;
-webkit-transition: all 400ms 510ms;
transition: all 400ms 510ms;
opacity: 0;
}
.mobileMenu li:nth-child(odd) {
-webkit-transform: translateX(30%);
transform: translateX(30%);
}
.mobileMenu li:nth-child(even) {
-webkit-transform: translateX(-30%);
transform: translateX(-30%);
}
.mobileMenu li:last-child {
-webkit-transform: none;
transform: none;
}
.mobileMenu a {
color: #00adee !important;
display: inline-block;
font-size: 18px;
}
.mobileMenu a.suBtn {
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="mobile-menu-button menuBtn">Open</span>
<nav class="mobileMenu">
<span class="mobile-menu-button menuBtn">Close</span>
<ul>
<li>Home</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</nav>
Why should I press two times on the open / close button to open / close the menu?
Anyone any idea / fix?

The problem is that you checking for .act on the button instead of the menu. There are two buttons so you need to toggle twice.
Changing:
$(this).toggleClass('act');
if($(this).hasClass('act')) {
to
$('.mobileMenu').toggleClass('act');
if($('.mobileMenu').hasClass('act')) {
fixes it:
$(document).ready(function(){
$('.menuBtn').on('click touch', function () {
$('.mobileMenu').toggleClass('act');
if($('.mobileMenu').hasClass('act')) {
$('.mobileMenu').addClass('act');
//$('body').addClass('positionfixed');
}
else {
$('.mobileMenu').removeClass('act');
//$('body').removeClass('positionfixed');
}
});
});
.mobile-menu-button{
display:block;
position:fixed;
top:20px;
left:20px;
z-index:99;
background-color:#19b698;
padding:5px 10px;
color:#fff;
font-family: Open Sans;
font-weight:bold;
}
.mobile-menu-button i{
font-size:26px;
background-color:#00adee;
padding:5px 10px;
color:#fff;
}
.mobileMenu {
background-color: #fff !important;
position: fixed;
left: 0;
top: 0;
z-index: 100;
height: 100vh;
width: 100vw;
display: block;
text-align: center;
opacity: 0;
-webkit-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transform: scale(0);
transform: scale(0);
overflow:hidden;
}
.mobileMenu img{
max-width:90%;
margin:0 auto;
margin-top:20px;
margin-bottom:10px;
border-bottom:1px dotted #717274;
padding-bottom:20px;
}
.mobileMenu.act {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.mobileMenu.act ul li {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
display:block !important;
}
.mobileMenu ul {
display: block;
vertical-align: middle;
}
.mobileMenu li {
padding: 10px 0 !important;
-webkit-transition: all 400ms 510ms;
transition: all 400ms 510ms;
opacity: 0;
}
.mobileMenu li:nth-child(odd) {
-webkit-transform: translateX(30%);
transform: translateX(30%);
}
.mobileMenu li:nth-child(even) {
-webkit-transform: translateX(-30%);
transform: translateX(-30%);
}
.mobileMenu li:last-child {
-webkit-transform: none;
transform: none;
}
.mobileMenu a {
color: #00adee !important;
display: inline-block;
font-size: 18px;
}
.mobileMenu a.suBtn {
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="mobile-menu-button menuBtn">Open</span>
<nav class="mobileMenu">
<span class="mobile-menu-button menuBtn">Close</span>
<ul>
<li>Home</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</nav>

May I offer a solution where you have a single button controlling the display of the menu instead of two buttons?
Main changes were to increase the z-index of .mobile-menu-button so it's always on top of your menu and to check in the text value of the button and decide whether to open or close it. You could also check if the menu has .act on it instead of checking the text of the button; tomayto, tomahto.
$( document ).ready( function () {
var $mobileMenu = $( '.mobileMenu' );
$('.menuBtn').on( 'click touch', function () {
var $this = $( this ),
isOpen = 'Close' === $this.text();
$this.text( isOpen ? 'Open' : 'Close' );
$mobileMenu.toggleClass( 'act', !isOpen );
} );
} );
.mobile-menu-button {
display: block;
position: fixed;
top: 20px;
left: 20px;
z-index: 105;
background-color: #19b698;
padding: 5px 10px;
color: #fff;
font-family: Open Sans;
font-weight: bold;
cursor: pointer;
}
.mobile-menu-button i {
font-size: 26px;
background-color: #00adee;
padding: 5px 10px;
color: #fff;
}
.mobileMenu {
background-color: #fff !important;
position: fixed;
left: 0;
top: 0;
z-index: 100;
height: 100vh;
width: 100vw;
display: block;
text-align: center;
opacity: 0;
-webkit-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transform: scale(0);
transform: scale(0);
overflow: hidden;
}
.mobileMenu img {
max-width: 90%;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 10px;
border-bottom: 1px dotted #717274;
padding-bottom: 20px;
}
.mobileMenu.act {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.mobileMenu.act ul li {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
display: block !important;
}
.mobileMenu ul {
display: block;
list-style: none;
}
.mobileMenu li {
padding: 10px 0 !important;
-webkit-transition: all 400ms 510ms;
transition: all 400ms 510ms;
opacity: 0;
}
.mobileMenu li:nth-child(odd) {
-webkit-transform: translateX(30%);
transform: translateX(30%);
}
.mobileMenu li:nth-child(even) {
-webkit-transform: translateX(-30%);
transform: translateX(-30%);
}
.mobileMenu li:last-child {
-webkit-transform: none;
transform: none;
}
.mobileMenu a {
color: #00adee !important;
display: inline-block;
font-size: 18px;
}
.mobileMenu a.suBtn {
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="mobile-menu-button menuBtn">Open</span>
<nav class="mobileMenu">
<ul>
<li>Home</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</nav>
I also added list-style: none; to .mobileMenu ul as I noticed some bullet points. I'm assuming you didn't want those.
Why Two Clicks?
As far as why you had to click twice, you were using toggleClass() on two different buttons to open/close the menu. The first button (Open) would get .act added and the menu would show. Now we're seeing the second button (Close) which doesn't have .act yet, so you click it and toggleClass() adds .act to it (instead of removing .act from the first button (Open) like you might have been expecting). Since a button needs .act on it to hide the menu, you now need to click the second button (Close) a second time to for toggelClass() to remove .act and hide the menu. Now the first button (Open) is shown, which still has .act. But clicking it removes .act, thus necessitating one more click to add .act back to the button and now the menu can be show because the button has .act.
It's more simple to use a single button.

You should use below jQuery code instead of using yours::
$(document).ready(function(){
$('.menuBtn').on('click touch', function () {
$(this).toggleClass('act');
if(!$('.mobileMenu').hasClass('act')) {
$('.mobileMenu').addClass('act');
//$('body').addClass('positionfixed');
}
else {
$('.mobileMenu').removeClass('act');
//$('body').removeClass('positionfixed');
}
});
});
Working URL:: https://jsfiddle.net/Lxz9v34L/2/

You have 2 .menuBtn.
You could simplify your code to something like this:
$(document).ready(function(){
$('.menuBtn').on('click touch', function () {
$('.mobileMenu').toggleClass('act');
$(this).text($(this).text() === 'Open' ? 'Close' : 'Open')
});
});
.mobile-menu-button{
display:block;
position:fixed;
top:20px;
left:20px;
z-index:101;
background-color:#19b698;
padding:5px 10px;
color:#fff;
font-family: Open Sans;
font-weight:bold;
cursor: pointer;
}
.mobile-menu-button i{
font-size:26px;
background-color:#00adee;
padding:5px 10px;
color:#fff;
}
.mobileMenu {
background-color: #fff !important;
position: fixed;
left: 0;
top: 0;
z-index: 100;
height: 100vh;
width: 100vw;
display: block;
text-align: center;
opacity: 0;
-webkit-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transform: scale(0);
transform: scale(0);
overflow:hidden;
}
.mobileMenu img{
max-width:90%;
margin:0 auto;
margin-top:20px;
margin-bottom:10px;
border-bottom:1px dotted #717274;
padding-bottom:20px;
}
.mobileMenu.act {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.mobileMenu.act ul li {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
display:block !important;
}
.mobileMenu ul {
display: block;
vertical-align: middle;
}
.mobileMenu li {
padding: 10px 0 !important;
-webkit-transition: all 400ms 510ms;
transition: all 400ms 510ms;
opacity: 0;
}
.mobileMenu li:nth-child(odd) {
-webkit-transform: translateX(30%);
transform: translateX(30%);
}
.mobileMenu li:nth-child(even) {
-webkit-transform: translateX(-30%);
transform: translateX(-30%);
}
.mobileMenu li:last-child {
-webkit-transform: none;
transform: none;
}
.mobileMenu a {
color: #00adee !important;
display: inline-block;
font-size: 18px;
}
.mobileMenu a.suBtn {
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="mobile-menu-button menuBtn">Open</span>
<nav class="mobileMenu">
<ul>
<li>Home</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</nav>

$(this).toggleClass('act');
to
$('.menuBtn').toggleClass('act');
because this will return the only span which is clicked not other. Hence it is not going toggle class on both div.
please find working snippet below
$(document).ready(function(){
$('.menuBtn').on('click touch', function () {
$('.menuBtn').toggleClass('act');
if($(this).hasClass('act')) {
$('.mobileMenu').addClass('act');
//$('body').addClass('positionfixed');
}
else {
$('.mobileMenu').removeClass('act');
//$('body').removeClass('positionfixed');
}
});
});
.mobile-menu-button{
display:block;
position:fixed;
top:20px;
left:20px;
z-index:99;
background-color:#19b698;
padding:5px 10px;
color:#fff;
font-family: Open Sans;
font-weight:bold;
}
.mobile-menu-button i{
font-size:26px;
background-color:#00adee;
padding:5px 10px;
color:#fff;
}
.mobileMenu {
background-color: #fff !important;
position: fixed;
left: 0;
top: 0;
z-index: 100;
height: 100vh;
width: 100vw;
display: block;
text-align: center;
opacity: 0;
-webkit-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transform: scale(0);
transform: scale(0);
overflow:hidden;
}
.mobileMenu img{
max-width:90%;
margin:0 auto;
margin-top:20px;
margin-bottom:10px;
border-bottom:1px dotted #717274;
padding-bottom:20px;
}
.mobileMenu.act {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.mobileMenu.act ul li {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
display:block !important;
}
.mobileMenu ul {
display: block;
vertical-align: middle;
}
.mobileMenu li {
padding: 10px 0 !important;
-webkit-transition: all 400ms 510ms;
transition: all 400ms 510ms;
opacity: 0;
}
.mobileMenu li:nth-child(odd) {
-webkit-transform: translateX(30%);
transform: translateX(30%);
}
.mobileMenu li:nth-child(even) {
-webkit-transform: translateX(-30%);
transform: translateX(-30%);
}
.mobileMenu li:last-child {
-webkit-transform: none;
transform: none;
}
.mobileMenu a {
color: #00adee !important;
display: inline-block;
font-size: 18px;
}
.mobileMenu a.suBtn {
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="mobile-menu-button menuBtn">Open</span>
<nav class="mobileMenu">
<span class="mobile-menu-button menuBtn">Close</span>
<ul>
<li>Home</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</nav>

In fact, there are two buttons (1 for open, 1 for close).
The 1 first click on "open" works, but then, it doesn't because the close button does not have the act class.
I think you should toggle class on both :
$('.menuBtn').on('click touch', function () {
**$('.menuBtn')**.toggleClass('act');
...
}

Draw a circle with four segments

So, this question was posted for Androids, but I couldn't find anything relating to HTML/CSS/Javascript. How can I draw a circle with four different segments to interact with?
The level of interaction I'm looking for is simple enough - just something to accept hover and click commands. I've done a lot of looking and I can't come up with anything. I know how to create a circle, but not one with four different areas I can interact with. Can anyone help?

html:
<a id="s1"></a>
<a id="s2"></a>
<a id="s3"></a>
<a id="s4"></a>
css:
a{
display:inline-block;
width:50px;
height:50px;
background:green;
}
a:hover{
background:blue;
}
#s1{
position:absolute;
top:0px;
left:0px;
border-top-left-radius:50px;
}
#s2{
position:absolute;
top:0px;
left:50px;
border-top-right-radius:50px;
}
#s3{
position:absolute;
top:50px;
left:0px;
border-bottom-left-radius:50px;
}
#s4{
position:absolute;
top:50px;
left:50px;
border-bottom-right-radius:50px;
}
demo

Do you mean something like this , the concept is pretty easy.
.quarter-circle {
background-color:#c06;
height:150px;
width: 150px;
-moz-border-radius: 150px 0 0 0;
border-radius: 150px 0 0 0;
}
just stick 4 quarters in 1 wrap div like this
HTML:
<div id="wrap">
<p class="quarter-circle"></p>
<p class="quarter-circle fliph"></p>
<p class="quarter-circle flipv"></p>
<p class="quarter-circle fliphv"></p>
</div>
CSS:
#wrap
{
width:300px;
height:300px;
}
.fliph
{
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
.flipv
{
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipV;
-ms-filter: "FlipV";
}
.fliphv
{
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1) scaleX(-1);
filter: FlipV;
-ms-filter: "FlipV";
}
.quarter-circle {
margin:0px;
background-color:#c06;
height:150px;
width: 150px;
-moz-border-radius: 150px 0 0 0;
border-radius: 150px 0 0 0;
position:relative;
display:inline-block;
float:left;
}

.c {
height: 20px;
width: 20px;
background-color: black;
position: absolute;
}
.c:hover {
background-color: red;
}
.tl {
top: 0;
left: 0;
border-top-left-radius: 20px;
}
.tr {
top: 0;
left: 20px;
border-top-right-radius: 20px;
}
.bl {
top: 20px;
left: 0;
border-bottom-left-radius: 20px;
}
.br {
top: 20px;
left: 20px;
border-bottom-right-radius: 20px;
}
<div class="c tl"></div><div class="c tr"></div><div class="c bl"></div><div class="c br"></div>

Image flipping effect not working on Safari and IE

My image flipping effect not working in safari and IE browser.
I am using this code:
.flipcard {
position: relative;
width:220px;
height: 220px;
perspective: 500px;
margin:auto;
text-align:center;
}
.flipcard.v:hover .front, .flipcard.v.flip .front{
transform: rotateX(180deg);
-webkit-transform:transform: rotateX(180deg); /* Chrome, Safari, Opera */
}
.flipcard.v:hover .back, .flipcard.v.flip .back{
transform: rotateX(0deg);
-webkit-transform:transform: rotateX(0deg); /* Chrome, Safari, Opera */
}
.flipcard.v .back{
transform: rotateX(-180deg);
}
.flipcard.h:hover .front, .flipcard.h.flip .front{
transform: rotateY(180deg);
-webkit-transform:transform: rotateY(180deg); /* Chrome, Safari, Opera */
}
.flipcard.h:hover .back, .flipcard.h.flip .back{
transform: rotateY(0deg);
-webkit-transform:transform: rotateY(0deg); /* Chrome, Safari, Opera */
}
.flipcard.h .back{
transform: rotateY(-180deg);
-webkit-transform:transform: rotateY(-180deg); /* Chrome, Safari, Opera */
}
.flipcard .front, .flipcard .back
{
position:absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
transition: all 0.5s ease-in;
color: white;
border:30px solid rgba(255, 255, 255, 0.5);
backface-visibility: hidden;
-webkit-transform:backface-visibility: hidden; /* Chrome, Safari, Opera */
}
.text_div{ background:#EF6A36; width:160px; height:160px; margin:0px; padding:0px;}
.text_div > img {
margin-top: -18px;
}
.flipcard p{font-size:14px;}
.text_div > h1 {
color: #fff;
height: 80px;
padding: 20% 5%;
width: 90%;
font-size:23px;
text-transform:uppercase;
line-height:60px;
}
.back > a {
background:#EF6A36;
color: #fff;
float: left;
font-family: helvetica_neuebold;
font-size: 24px;
font-weight: normal;
height: 42px;
list-style: outside none none;
padding: 60px 0;
text-align: center;
text-decoration: none;
width: 160px;
font-family: "HelveticaNeueLTPro-Cn";
margin-top:-21px;
}
HTML:-
<div class="flipcard h">
<div class="front">
<div class="text_div">
<img src="<?php echo get_template_directory_uri(); ?>/images/heart.png">
<h1>Brand Blazing</h1>
<!--<p>Your truth . Your story. - Your rand</p> -->
</div>
</div>
<div class="back">
<img class="icon_margin" class="icon_margin" src="<?php echo get_template_directory_uri(); ?>/images/heart.png">
YOUR TRUTH
</div>
</div>
Its working in only Mozilla and Chrome. I try to search on Google but no hopes. Kindly suggest your any alternate for this.
Any help from any one greatly appreciated.

All of your -webkit-transform declarations are wrong. You have them in this format:
-webkit-transform:transform: XXXXXX;
when they should be:
-webkit-transform: XXXXXX;
Also, -webkit-transform:backface-visibility: hidden;
should be:
-webkit-backface-visibility: hidden;
.flipcard {
position: relative;
width:220px;
height: 220px;
perspective: 500px;
margin:auto;
text-align:center;
}
.flipcard.v:hover .front, .flipcard.v.flip .front{
transform: rotateX(180deg);
-webkit-transform: rotateX(180deg); /* Chrome, Safari, Opera */
}
.flipcard.v:hover .back, .flipcard.v.flip .back{
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg); /* Chrome, Safari, Opera */
}
.flipcard.v .back{
transform: rotateX(-180deg);
-webkit-transform: rotateX(-180deg);
}
.flipcard.h:hover .front, .flipcard.h.flip .front{
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg); /* Chrome, Safari, Opera */
}
.flipcard.h:hover .back, .flipcard.h.flip .back{
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg); /* Chrome, Safari, Opera */
}
.flipcard.h .back{
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg); /* Chrome, Safari, Opera */
}
.flipcard .front, .flipcard .back
{
position:absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
transition: all 0.5s ease-in;
color: white;
border:30px solid rgba(255, 255, 255, 0.5);
backface-visibility: hidden;
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
}
.text_div{ background:#EF6A36; width:160px; height:160px; margin:0px; padding:0px;}
.text_div > img {
margin-top: -18px;
}
.flipcard p{font-size:14px;}
.text_div > h1 {
color: #fff;
height: 80px;
padding: 20% 5%;
width: 90%;
font-size:23px;
text-transform:uppercase;
line-height:60px;
}
.back > a {
background:#EF6A36;
color: #fff;
float: left;
font-family: helvetica_neuebold;
font-size: 24px;
font-weight: normal;
height: 42px;
list-style: outside none none;
padding: 60px 0;
text-align: center;
text-decoration: none;
width: 160px;
font-family: "HelveticaNeueLTPro-Cn";
margin-top:-21px;
}
<div class="flipcard h">
<div class="front">
<div class="text_div">
<img src="<?php echo get_template_directory_uri(); ?>/images/heart.png">
<h1>Brand Blazing</h1>
<!--<p>Your truth . Your story. - Your rand</p> -->
</div>
</div>
<div class="back">
<img class="icon_margin" class="icon_margin" src="<?php echo get_template_directory_uri(); ?>/images/heart.png">
YOUR TRUTH
</div>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

jQuery Content slider blocks responsive menu drawer - javascript

The slider is positioned above the header because it has a higher z-index value. Simply give the header a higher z-index value: .header { ... z-index: 10; } For more information on stacking context there is an excellent article on mdn.

Related

Angular 4+ Creating a Semi-Circular Nav Menu, Modular vs. Global CSS

How to take off the y-overflow?

Why must I click twice to open and close my menu

Draw a circle with four segments

Image flipping effect not working on Safari and IE

Categories

Resources