I have a right sidebar.I'm using font awesome angle-left icon to show/hide the sidebar. On click of toggle button side bar pushes the content towards left along with the button & then button(font awesome left-angle) rotates 180 degrees to become (font awesome right-angle) as an animation. It is working fine till here. But when i scroll the page the toggle button is also getting scrolled vertically.
Here I don't want toggle button getting scrolled vertically every time.
I hv tried position: fixed in css by which vertical scrolling is stopped but the sidebar is not pushing the toggle button horizontally. The side bar is getting overlapped on the toggle button (only in firefox).
In chrome its working fine.The vertical scrolling is stopped & the sidebar is pushing the content to left side, but this is not happening in firefox.
css:
.container {
position: relative;
height: 100%;
width: 100%;
right: 0;
-webkit-transition: right 1s ease-in-out;
-moz-transition: right 1s ease-in-out;
-ms-transition: right 1s ease-in-out;
-o-transition: right 1s ease-in-out;
transition: right 1s ease-in-out;
}
.container.open-sidebar {
right: 240px;
}
#sidebar {
position: absolute;
right: -240px;
background-color: rgba(0, 0, 0, 0.3);
width: 240px;
height: 100%;
}
.content {
width: 100%;
height: 100%;
padding: 10px;
position: relative;
padding-left: 50px;
}
.content #sidebar-toggle {
background: transparent;
color: white;
opacity: 0.5;
border-radius: 1px;
display: block;
position: relative;
padding: 30px 7px;
float: right;
}
.padtop {
line-height: 600px;
color: white;
opacity: 0.5;
position: fixed;
}
.rotate {
-moz-transition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.rotate.side {
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
html:
<div class="container">
<div class="col-sm-1">
<a href="#" data-toggle=".container" id="sidebar-toggle">
<i class="fa fa-angle-double-left fa-5x padtop rotate"></i></a>
</div>
</div>
Here is my o/p:
o/p in Firefox
o/p in Chrome
description and example demo for toggle effect..
Demo
HTML
<div class="toggle-button">
<button></button>
</div>
CSS
.toggle-button { background-color: white; margin: 5px 0; border-radius: 20px; border: 2px solid #D0D0D0; height: 24px; cursor: pointer; width: 50px; position: relative; display: inline-block; user-select: none; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; }
.toggle-button button { cursor: pointer; outline: 0; display:block; position: absolute; left: 0; top: 0; border-radius: 100%; width: 30px; height: 30px; background-color: white; float: left; margin: -3px 0 0 -3px; border: 2px solid #D0D0D0; transition: left 0.3s; }
.toggle-button-selected { background-color: #83B152; border: 2px solid #7DA652; }
.toggle-button-selected button { left: 26px; top: 0; margin: 0; border: none; width: 24px; height: 24px; box-shadow: 0 0 4px rgba(0,0,0,0.1); }
Javascript
$(document).on('click', '.toggle-button', function() {
$(this).toggleClass('toggle-button-selected');
});
Related
I have a problem with the Lightbox2 made by Lokesh.
https://lokeshdhakar.com/projects/lightbox2/
I am v2.11.3 and the display of horizontal photo is on the top of the screen in mobiles devices. I have try different options but doesn't work.
Another problem es the order the photos are displaying by Lightbox, I am using Colcate for horizontal grid, so the image follow left to right order but the Lightbox show me the photos follow the vertical order top to bottom, I don't know how I can fix it.
(https://user-images.githubusercontent.com/73562012/108930646-68c95c00-769a-11eb-9c71-ec83b816f2da.png)
leave you part of my code,
the file lightbox-plus-jquery.min.js you que find in the lokesh's page
thanks!
<link rel="stylesheet" href="css/stylesheet.css">
<link rel="stylesheet" href="css/lightbox.css">
</head>
<div class="container gallery">
<div class="grid">
<!-- current -->
<div class="grid-col grid-col--1">
</div>
<div class="grid-col grid-col--2">
</div>
<div class="grid-col grid-col--3">
</div>
<div class="grid-col grid-col--4">
</div>
<div class="grid-col grid-col--5">
</div>
<div class="grid-item">
<a href="images/urban//urban7-david-porter.jpg"
data-lightbox="roadtrip"
data-title="Urban - oil on canvas">
<img src="images/urban/urban7-david-porter.jpg" alt="Urban, canvas on oil, David Porter" width="100%">
</a>
</div>
<div class="grid-item">
<a href="images/urban/urban00-david-porter.jpg" data-lightbox="roadtrip"
data-title="Urban - oil on canvas">
<img src="images/urban/urban00-david-porter.jpg" alt="Urban, canvas on oil, David Porter" width="100%">
</a>
</div>
<div class="grid-item">
<a href="images/urban/urban10-david-porter.jpg" data-lightbox="roadtrip"
data-title="Urban - oil on canvas">
<img src="images/urban/urban10-david-porter.jpg" alt="Urban, canvas on oil, David Porter" width="100%">
</a>
</div>
</div>
</div>
<!-- colcate- grid -->
<script src="https://unpkg.com/colcade#0/colcade.js"></script>
<script>
var colc = new Colcade( '.grid', {
columns: '.grid-col',
items: '.grid-item'
});
</script>
<!-- lightbox -->
<script src="js/lightbox-plus-jquery.min.js"></script>
<script src="js/lightbox.js"></script>
<script>
lightbox.option({
resizeDuration: 200,
wrapAround: true,
fadeDuration: 2000,
fitImagesInViewport: true,
wrapAround: true,
});
</script>
my css
body.lb-disable-scrolling {
overflow: hidden;
}
.lightboxOverlay {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color: black;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
display: none;
}
.lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
font-weight: normal;
outline: none;
}
.lightbox .lb-image {
display: block;
height: auto;
max-width: inherit;
max-height: none;
border-radius: 3px;
/* Image border */
border: 4px solid white;
}
.lightbox a img {
border: none;
}
.lb-outerContainer {
position: relative;
*zoom: 1;
width: 250px;
height: 250px;
margin: 0 auto;
border-radius: 4px;
/* Background color behind image.
This is visible during transitions. */
background-color: white;
}
.lb-outerContainer:after {
content: "";
display: table;
clear: both;
}
.lb-loader {
position: absolute;
top: 43%;
left: 0;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
.lb-cancel {
display: block;
width: 32px;
height: 32px;
margin: 0 auto;
background: url(../images/loading.gif) no-repeat;
}
.lb-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
.lb-container > .nav {
left: 0;
}
.lb-nav a {
outline: none;
background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}
.lb-prev, .lb-next {
height: 100%;
cursor: pointer;
display: block;
}
.lb-nav a.lb-prev {
width: 34%;
left: 0;
float: left;
background: url(../images/prev.png) left 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.lb-nav a.lb-prev:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.lb-nav a.lb-next {
width: 64%;
right: 0;
float: right;
background: url(../images/next.png) right 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.lb-nav a.lb-next:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.lb-dataContainer {
margin: 0 auto;
padding-top: 5px;
*zoom: 1;
width: 100%;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.lb-dataContainer:after {
content: "";
display: table;
clear: both;
}
.lb-data {
padding: 0 4px;
color: #EDE7E5;
}
.lb-data .lb-details {
width: 85%;
float: left;
text-align: left;
line-height: 1.2em;
}
.lb-data .lb-caption {
font-size: 1rem;
font-weight:;
line-height: 1em;
}
.lb-data .lb-caption a {
color: #424242;
}
.lb-data .lb-number {
display: block;
text-align: left;
width: 100% !important;
padding-bottom: 1em;
font-size: 12px;
color: #C7C2C0;
}
.lb-data .lb-close {
display: block;
float: right;
width: 30px;
height: 30px;
background: url(../images/close.png) top right no-repeat;
text-align: right;
outline: none;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.lb-data .lb-close:hover {
cursor: pointer;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
I have the following code:
$(document).scroll(function() {
var scroll = $(this).scrollTop();
if (scroll >= 150) {
$("#popUp").css("margin-left", "-425px");
$("#plus").css("margin-left", "0px");
}
});
$("#plus").click(function() {
$("#popUp").css("margin-left", "0px");
$("#plus").css("margin-left", "-425px");
});
$("#close").click(function() {
$("#popUp").css("margin-left", "-425px");
$("#plus").css("margin-left", "0px");
});
* {
margin: 0;
font-family: 'Source Sans Pro', sans-serif;
}
#darkBack {
width: 100%;
height: 100vh;
background: rgba(76, 56, 75, .15);
}
#popUp {
position: fixed;
max-width: 350px;
height: 225px;
background: rgba(236, 240, 241, 1);
border: 7px solid #fff;
bottom: 0;
margin-left: 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#new span {
background: #fff;
position: absolute;
color: #1c8dc4;
padding: 4px 10px;
font-size: 16px;
font-weight: 600;
letter-spacing: 1px;
margin-top: -5px;
}
#popUp .close {
color: #464646;
right: 8px;
top: 0px;
position: absolute;
font-size: 20px;
cursor: pointer;
}
#popUp h2 {
font-size: 17px;
color: #464646;
line-height: 24px;
font-weight: 400;
text-align: center;
margin-top: 40px;
padding: 0 20px;
}
#body {
height: 1200px;
background: #eee;
}
a.button {
margin: 0 auto;
text-align: center;
right: 0;
left: 0;
position: absolute;
width: 120px;
font-size: 15px;
color: #fff;
border-bottom: 2px solid #18729f;
background: #1c8dc4;
border-radius: 4px;
padding: 8px 0;
}
#plus {
position: fixed;
color: #fff;
bottom: 15%;
font-size: 15px;
margin-left: -425px;
-webkit-transition: all 1.25s ease;
-moz-transition: all 1.25s ease;
-o-transition: all 1.25s ease;
transition: all 1.25s ease;
cursor: pointer;
text-align: left;
letter-spacing: 1px;
}
#plus span {
position: absolute;
margin-top: 38px;
left: 4px;
}
#plus::after {
content: '';
display: block;
display: relative;
border-top: 55px solid transparent;
border-bottom: 55px solid transparent;
border-left: 55px solid #1c8dc4;
}
#media all and (max-width: 900px) {
#popUp {
margin-left: -425px;
}
#plus {
margin-left: 0px;
}
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<div id="popUp">
<div id="close" class="close"><i class="fa fa-times"></i></div>
<div id="new"><span>NEW!</span></div>
<h2>I'm a notification popup that isn't too distracting or in your face. Scroll down or close me and I will go away. You'll still be able to open me later on don't worry.</h2>
<br>
Visit Page
</div>
<div id="plus"><span>NEW<br> <i class="fa fa-plus"></i></span></div>
<div id="body"></div>
How would I move the to the opposite side of the page? Instead of it appearing at the far left of the page, how would I make it appear at the far right? I have tried changing the margin-left in the js but I am not quite getting it right, as it does not output the expected output. Any suggestions?
When using fixed positioning of elements, I advise you to use the right / left rule for offset.
In jquery I changed all margin-left to right. I did the same in css. It was with those rules that dealt with displacement. Also, to rotate the triangle, I adopted rule border-right: 55px solid #1c8dc4 for #plus::after.
$(document).scroll(function() {
var scroll = $(this).scrollTop();
if (scroll >= 150) {
$("#popUp").css("right", "-425px");
$("#plus").css("right", "0px");
}
});
$("#plus").click(function() {
$("#popUp").css("right", "0px");
$("#plus").css("right", "-425px");
});
$("#close").click(function() {
$("#popUp").css("right", "-425px");
$("#plus").css("right", "0px");
});
* {
margin: 0;
font-family: 'Source Sans Pro', sans-serif;
}
#darkBack {
width: 100%;
height: 100vh;
background: rgba(76, 56, 75, .15);
}
#popUp {
position: fixed;
max-width: 350px;
height: 225px;
background: rgba(236, 240, 241, 1);
border: 7px solid #fff;
bottom: 0;
right: -425px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#new span {
background: #fff;
position: absolute;
color: #1c8dc4;
padding: 4px 10px;
font-size: 16px;
font-weight: 600;
letter-spacing: 1px;
margin-top: -5px;
}
#popUp .close {
color: #464646;
right: 8px;
top: 0px;
position: absolute;
font-size: 20px;
cursor: pointer;
}
#popUp h2 {
font-size: 17px;
color: #464646;
line-height: 24px;
font-weight: 400;
text-align: center;
margin-top: 40px;
padding: 0 20px;
}
#body {
height: 1200px;
background: #eee;
}
a.button {
margin: 0 auto;
text-align: center;
right: 0;
left: 0;
position: absolute;
width: 120px;
font-size: 15px;
color: #fff;
border-bottom: 2px solid #18729f;
background: #1c8dc4;
border-radius: 4px;
padding: 8px 0;
}
#plus {
position: fixed;
color: #fff;
bottom: 15%;
font-size: 15px;
right: 0px;
-webkit-transition: all 1.25s ease;
-moz-transition: all 1.25s ease;
-o-transition: all 1.25s ease;
transition: all 1.25s ease;
cursor: pointer;
text-align: left;
letter-spacing: 1px;
}
#plus span {
position: absolute;
margin-top: 38px;
right: 2px;
}
#plus::after {
content: '';
display: block;
display: relative;
border-top: 55px solid transparent;
border-bottom: 55px solid transparent;
border-right: 55px solid #1c8dc4;
}
#media all and (max-width: 900px) {
#popUp {
right: -425px;
}
#plus {
right: 0px;
}
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<div id="popUp">
<div id="close" class="close"><i class="fa fa-times"></i></div>
<div id="new"><span>NEW!</span></div>
<h2>I'm a notification popup that isn't too distracting or in your face. Scroll down or close me and I will go away. You'll still be able to open me later on don't worry.</h2>
<br>
Visit Page
</div>
<div id="plus"><span>NEW<br> <i class="fa fa-plus"></i></span></div>
<div id="body"></div>
i need a navigation menu in my website so I was searching for some option online , i found a one in codepen,i copied pasted in my my text editors and saw the preview but the code was not running properly in the preview.
Here am attaching the link for the codepen editor :
I want the same output from code pen in my previews in the text editors
html,
body {
font-family: sans-serif;
font-size: 14px;
color: #555555;
height: 100%;
width: 100%;
margin: 0;
}
.container {
left: 50%;
top: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
.selector {
padding: 0.25rem;
background-color: #efefef;
width: min-content;
border-radius: 12px;
position: relative;
}
.selector-item {
white-space: nowrap;
padding: 0.75rem 1.5rem;
cursor: pointer;
z-index: 2;
user-select: none;
transition: color 0.2s ease;
}
.selector-item--active {
color: white;
}
.highlight {
background-color: #ff4757;
border-radius: 8px;
position: absolute;
left: 0.25rem;
width: 4.75rem;
height: 2.6rem;
z-index: 1;
box-shadow: 0px 0px 12px -2px rgba(255, 71, 86, 0.9);
transition: left 0.2s ease,
width 0.2s ease;
}
<div class="container">
<div class="selector" self="size-x1" layout="row center-left">
<div class="highlight"></div>
<div class="selector-item" onclick="selectItem(event)">Chapter-wise</div>
<div class="selector-item" onclick="selectItem(event)">Year-wise</div>
<div class="selector-item" onclick="selectItem(event)">Others</div>
</div>
</div>
You need to add following reference in your page.
https://cdnjs.cloudflare.com/ajax/libs/flex-layout-attribute/1.0.3/css/flex-layout-attribute.min.css
Hard to explain in the subject but basically I have two divs and to avoid any overlapping when I click the button I don't move the elements but instead changing the width of their parent containers.
What's surprising is that the one to the right edge of the screen is behaving nicely, giving us an impression that the inside element goes out of the screen.
On the left side it doesn't work the same. Even if, just for a test, changed the inner element to absolute positioning.
In other words when I click Run I expect the text on the left side to be pushed out of the screen after short time since the width of the parent is decreasing.
Here is what I am trying to achieve:
$("#run").on("click", function() {
$("#cont-left, #cont-right").toggleClass("hide");
});
#cont-right {
position: absolute;
top: 0px;
right: 0px;
width: 200px;
overflow: hidden;
border: 2px solid blue;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
#test {
background: yellow;
left: 0px;
}
#cont-left {
position: absolute;
top: 0px;
height: 30px;
left: 0px;
width: 200px;
overflow: hidden;
border: 2px solid green;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
#test2 {
background: pink;
right: 0px;
}
#run {
display: block;
width: 100px;
background: red;
cursor: pointer;
margin: 0 auto;
color: white;
padding: 10px 0px;
text-align: center;
font-weight: bold;
}
#run:hover {
background: green;
}
#cont-right.hide,
#cont-left.hide {
width: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cont-right" class="hide">
<div id="test">
111<br />222<br />333
</div>
</div>
<div id="cont-left" class="hide">
<div id="test2">
111<br/>222<br />333
</div>
</div>
<span id="run">Run</span>
If it's just text, try text-align
If you're only working with text, the only change you need to make to your css to fix this is:
#cont-left {
text-align: right;
}
What if it's not: then it's time to flex
If you want to use more than text you should be using display: flex; so that you can justify-content: flex-end; (justify the content to the end). You will need to apply these to the containers #cont-left and #cont-right. For #cont-right use justify-content: flex-start;
However, when you apply those values, the divs #test and #test2 will no longer take up their parent's width, therefore, you will be required to move the background-color to the parent divs or set width: 100%;
Below I have modified the code snippet to include the flex changes.
$("#run").on("click", function() {
$("#cont-left, #cont-right").toggleClass("hide");
});
#cont-right {
position: absolute;
top: 0px;
right: 0px;
width: 200px;
overflow: hidden;
transition: all 0.5s ease-in-out;
display: flex;
justify-content: flex-start;
background: yellow;
}
#cont-left {
position: absolute;
top: 0px;
height: 30px;
left: 0px;
width: 200px;
overflow: hidden;
transition: all 0.5s ease-in-out;
display: flex;
justify-content: flex-end;
background: pink;
}
#run {
display: block;
width: 100px;
background: red;
cursor: pointer;
margin: 0 auto;
color: white;
padding: 10px 0px;
text-align: center;
font-weight: bold;
}
#run:hover {
background: green;
}
#cont-right.hide,
#cont-left.hide {
width: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cont-right" class="hide">
<div id="test">
111<br />222<br />333
</div>
</div>
<div id="cont-left" class="hide">
<div id="test2">
111<br/>222<br />333
</div>
</div>
<span id="run">Run</span>
so i have a dropdown menu that will fade in once a link is clicked. once the link is clicked everything is fine the menu fades in but once i click off and a function runs that fades out the dropdown. the triangle that is on top of the box fades out slightly slower than the actual box. in css i have made this triangle with the :after selector and a fiddle can be found JsFiddle
HTML
<?php echo 'Welcome ' . $user->data()->fname . '!'; ?>
<div class="Account-Links">
My Account
Sign Out
Help
</div>
CSS
.Account-Actions {
postition: relative;
}
.Account-Links {
position: absolute;
top: 45px;
left: 0;
display: block;
visibility: hidden;
margin: 0;
padding: 0;
width: 200px;
height: 0;
opacity: 0;
box-sizing: border-box;
background-color: rgba(0,0,0,.7);
z-index: 1000;
transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
}
.Account-Links-On {
height: auto;
visibility: visible;
opacity: 1;
}
.Account-Links::after {
position: absolute;
top: -8px;
right: 22px;
content: '';
width: 0;
height: 0;
border-bottom: solid 8px rgba(0,0,0,.7);
border-left: solid 8px transparent;
border-right: solid 8px transparent;
}
.Account-Link {
display: block;
color: #FFF;
margin: 0;
padding: 10px;
}
.Account-Link:hover {
background-color: rgba(231,76,60,.75);
}
a {
text-decoration: none;
}
a.Header-Link {
position: relative;
display: block;
margin: 0 10px;
padding: 0 8px;
line-height: 47px;
color: #777;
border-bottom: 3px solid transparent;
}
a.Header-Link:hover {
color: #000;
}
JS
$(document).ready(function(){
$('.Account-Actions').bind('click', function(){
$('.Account-Links').toggleClass('Account-Links-On');
});
$('html').click(function() {
$('.Account-Links').removeClass('Account-Links-On');
});
$('.Account-Links, .Account-Actions').click(function(event){
event.stopPropagation();
});
});
You have created that arrow on different class and toggling the opacity on other class. You arrow shouldn't be on .Account-Links. It should be on .Account-Links-On if you don't want that delay to happen.
SEE THE DEMO
.Account-Links-On::after {
position: absolute;
top: -8px;
right: 22px;
content: '';
width: 0;
height: 0;
border-bottom: solid 8px rgba(0,0,0,.7);
border-left: solid 8px transparent;
border-right: solid 8px transparent;
}
And this concludes that :after psuedo selector doesn't animate slower.