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>
Related
This content moves along with the window resize and I'm trying to make it stay in place. Is there any way to stop the content from moving or should I move the section along with window resize so that it appears in the same position?
Pictures of the content in [#media only screen and (min-width: 992px) and (max-width: 1199px)]
width: 1198 px
width: 992 px
The partial code
#hero {
height: 100%;
position: relative;
float: left;
padding: 18% 10% 35% 6%;
margin: 0 5% 0% 5%;
width: 90%;
}
.IntroText {
margin-left: auto;
margin-right: auto;
color:black;
padding-bottom: 1.5%;
font-size: 20px;
transform: translateX(-20px);
transition: transform 1s, opacity 1s;
transition-delay: 0.5s;
}
.MyName {
color:#fad25a;
}
.knowMore {
left: 0.4%;
font-weight: bold;
font-size: 20px;
transform: translateX(-20px);
transition: transform 1s, opacity 1s;
transition-delay: 1s;
}
button, .talkButton {
color: #d4af37;
padding: 5px 25px;
border: 2px solid #d4af37;
position: relative;
margin: auto;
z-index: 1;
overflow: hidden;
transition: 0.3s;
}
button:after, .talkButton:after {
content: '';
background-color: #252526;
position: absolute;
z-index: -2;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
button:before, .talkButton:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 100%;
background-color: #d4af37;
transition: 0.3s;
z-index: -1;
}
button:hover, .talkButton:hover {
cursor: pointer;
color: #252526;
}
button:hover:before, .talkButton:hover:before {
width: 100%;
}
button:focus, .talkButton:focus {
outline: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="hero" class="jumbotron">
<div class="container">
<h1 class="IntroText animated">
Lorem Ipsum dolor <span class="MyName">sit amet</span> and<br> consecteuer
</h1>
<button type="button" id="knowbutton" class="knowMore animated" onclick="toAbout()">Know more</button>
</div>
</section>
In the CSS file, in the #hero rule set you have given padding and margins in percentages. It means whenever the screen changes then the padding and margin apply according to that screen(in percentages).
try by fixing padding and margins in the #hero rule set
You could do a position: fixed
#hero {
height: 100%;
position: fixed;
top: 100px;
left: 50px;
padding: 18% 10% 35% 6%;
margin: 0 5% 0% 5%;
width: 90%;
}
Now it is always going to stay in the same position(100px from the top, 50px from the left), even if you scroll.
So i'm creating this side bar with html, css and js, the idea is to increase the width of the side bar when clicking the menu button.
The problem is when I try to add transition duration or delay to any of the side bar elements it doesn't work:
This is my HTML:
<body>
<section class="side-bar" id="side-bar">
<div class="nav-toggle">
<i class='bx bx-menu' id="menu-on" ></i>
</div>
</section>
<script src="js/home.js"></script>
</body>
CSS :
.nav-toggle{
position: absolute;
width: 20%;
height: 10%;
display: flex;
justify-content: center;
align-items: center;
transition: all .2s ease;
transition-delay: .2s;
}
.nav-toggle i{
font-size: 2rem;
color: #fff;
cursor: pointer;
}
.side-bar.active-side-bar .nav-toggle{
top: 0;
right: 0;
}
.side-bar{
width: 5%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
background: var(--secondary-color);
z-index: 100;
transition: all .2s ease;
}
.side-bar.active-side-bar{
width: 20%;
}
and js :
let navBar=document.querySelector('.side-bar');
let navOn=document.querySelector('#menu-on');
navOn.addEventListener('click', function(event){
navBar.classList.toggle('active-side-bar');
});
Thank you all.
It seems to be working for me:
const navBar = document.querySelector('.side-bar');
const navOn = document.querySelector('#menu-on');
navOn.addEventListener('click', () => {
navBar.classList.toggle('active-side-bar');
});
:root {
--secondary-color: #ff0000
}
.nav-toggle {
position: absolute;
width: 20%;
height: 10%;
display: flex;
justify-content: center;
align-items: center;
transition: all .2s ease;
transition-delay: .2s;
}
.nav-toggle i {
font-size: 2rem;
color: #ffffff;
cursor: pointer;
}
.side-bar.active-side-bar .nav-toggle {
top: 0;
right: 0;
}
.side-bar {
width: 5%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
background: var(--secondary-color);
z-index: 100;
transition: all .2s ease;
}
.side-bar.active-side-bar {
width: 20%;
}
<body>
<section class="side-bar" id="side-bar">
<div class="nav-toggle">
<i class='bx bx-menu' id="menu-on">></i>
</div>
</section>
</body>
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 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
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');
});