Does anyone know how I would - instead of having my idTabs fade - have them move from left to right? The could would need to be provided to this here: http://codebins.com/bin/4ldqp7r/2
Thanks!
The basic idea is to position the slide-out content to the left of the visible pane.
#adv2 {
...
overflow: hidden;
position: relative;
}
#adv2 ul{
...
position: relative;
z-index: 3;
}
#adv2 span {
z-index: 1;
}
#adv2 span p {
position: relative;
margin: 0;
left: -410px;
z-index: 2;
}
Then you add the javascript to render the slide out effect.
for (i in list) {
$(list[i]).css({'left': '-410px', 'display': 'none'});
}
$(id).css({'display': 'none'}).animate({left: '+=410'});
Related
In this stackblitz, I am not able to add animation while closing, I tried it using transform, but it didnt seem to work
HTML
Blocker is used to covering the full screen in a half-transparent mode in mobile devices
const sidebar = document.querySelector('.sidebar');
sidebar.querySelector('.blocker').onclick = hide;
function show() { // swipe right
sidebar.classList.add('visible');
document.body.style.overflow = 'hidden';
}
function hide() { // by blocker click, swipe left, or url change
sidebar.classList.remove('visible');
document.body.style.overflow = '';
}
function toggle() {
sidebar.classList.contains('visible') ? hide() : show();
}
.sidebar {
/* it's a mobile sidebar, blocker and content */
position: fixed;
top: 0;
left: 0;
width: 100vw;
/* to cover the whole screen */
height: 100vh;
padding: 0;
/* to override the default padding */
background: rgba(0, 0, 0, .5);
/* half transparent background */
display: none;
z-index: 99999;
/* to be on top of any other elements */
}
.sidebar.visible {
display: block;
}
/*cover the whole screen and to detect user click on background */
.sidebar .blocker {
position: absolute;
width: 100%;
height: 100%;
}
/* user content */
.sidebar .content {
position: absolute;
top: 0;
left: 0;
background: #FFF;
height: 100%;
width: 250px;
left: -50%;
/* will be animated to left: 0, by animation */
animation: slide 0.5s forwards;
}
#keyframes slide {
100% {
left: 0;
}
}
<div class="sidebar">
<div class="blocker"></div>
<div class="content">
Sidebar Content
</div>
</div>
With the above code, you can have a working sidebar.
Check the working code from stackblitz
https://allenhwkim.medium.com/mobile-friendly-sidebar-in-few-minutes-7817b5c5239f
https://stackblitz.com/edit/medium-sidebar-1-eevvax?file=style.css,index.js
You can't animate between display:block (when .sidebar has .visible applied to it) and display:none (when .visible is removed from .sidebar).
display:none turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements (i.e. .blocker and .content) also have their display turned off.
The reason you get an animation upon adding .visible is that .sidebar now "exists" and so .sidebar-content also exists and as such animates. As soon as you remove .visible, .sidebar ceases to exist again and so it and its descendants disappear instantaneously.
You are along the right lines using transforms but you need to remove display:none as the method for hiding the sidebar. Something like the below is a good starting point. You may need to change some values to get it looking exactly as you wish. I have added a working codepen to show the result.
.sidebar {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
padding: 0;
background: rgba(0, 0, 0, .5);
z-index: 99999;
transform: translateX(-100%); // new property - will move the element off the left hand side of the screen
transition: transform .5s ease-in-out; // new property - will make the sidebar slide in in a similar manner to your animation
}
.sidebar.visible {
transform: translateX(0); // new property - makes sidebar sit in its natural position (i.e. taking up the whole viewport)
}
.sidebar .blocker {
position: absolute;
width: 100%;
height: 100%;
}
.sidebar .content {
position: absolute;
top: 0;
left: 0;
background: #FFF;
height: 100%;
width: 250px;
}
This is my the link of website http://www.expresskerala.com. In this website i need to make header sticky. Is there any way to make that sticky.I had tried this code.
.site-header {
background: #e5e5e5 none repeat scroll 0 0;
position: fixed;
width: 100%;
z-index: 99 !important;
}
But when i use this code, the other content will go down. Is there any solution for this. This should be also responsive.
Since a position:fixed element is taken out of the document flow, you need to add a top margin equal to the height of the .site-header to the next element. You also need to add top:0 to fix the .site-header to the top of the document.
.site-header {
background: #e5e5e5 none repeat scroll 0 0;
position: fixed;
width: 100%;
z-index: 99 !important;
top: 0;
}
.site-header + * {
margin-top: 240px;
// you should change this using media queries if the site-header height changes
}
Something like this:
#media only screen and (min-width: 1024px) {
.site-header {
position: fixed;
z-index: 1;
}
#main > .container {
padding-top: 250px;
}
}
you can add these css to get better result
body {
padding-top: 240px;
}
.site-header {
background: #e5e5e5 none repeat scroll 0 0;
position: fixed;
width: 100%;
top: 0;
z-index: 999;
}
add this additional css in your file
.fixed-header {
position: fixed;
top:0;
}
than use also this script:
$(window).scroll(function(){
if ($(window).scrollTop() >= 140) {
$('nav').addClass('fixed-header');
}
else {
$('nav').removeClass('fixed-header');
}
});
/* scrollTop() >= 140
Should be equal the height of the header
*/
Try this one:
JS
$(window).scroll(function(){
if ($(window).scrollTop() >= 240) {
$('body').addClass('sticky-header');
}
else {
$('body').removeClass('sticky-header');
}
});
CSS
body.sticky-header {
padding-top: 239px;
}
body.sticky-header header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999
}
header {
transition:all ease .3s
}
Hope this may help you.
Use sticky position W3schoolor use jquery with fixed
I have a problem trying to keep some help text associated with a "?" image positioned appropriately horizontally. Although it works as I would like most of the time, when the "?" moves too close to the left of the screen (either because the "?" is close to the left in the first place, or a width reduction wraps it there), the help gets chopped off
I like it to appear in a box 15rem wide, as high as it needs to be, positioned above and extending to the left of the "?", and to be visible on either a hover or click. That works fine.
What I can't figure out is how to move the help to the right by just as much as is necessary to avoid it extending off the left-hand side of the screen whenever that is necessary.
I have added another class (not shown) to those tips that I know are near the left, that extends them right instead of left. However it's not a good solution, relying on me finding them, and not coping with window resizing very well.
What I have so far is:
HTML And CSS:
.tooltip {
position: relative;
}
.tooltip > img {
vertical-align: middle;
margin-left: 0.5rem;
height: 20px;
}
.tooltip .tooltiptext {
visibility: hidden;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 0.5rem;
position: absolute;
z-index: 1;
bottom: 125%;
width: 15rem;
right: 0;
margin-right: 1rem;
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext, .tooltip:active .tooltiptext {
visibility: visible;
opacity: 1;
}
<div>
<input type="text" name=xx size="40" placeholder="xxxxxx">
<span class="tooltip">
<img src="static/help.png" alt="help">
<span class="tooltiptext">Some help text for this.</span>
</span>
</div>
I'm guessing the key is dynamically determining the position of tooltiptext and adjusting left/right accordingly but I'm at a loss to know how to do that. I'm limited to CSS & JS (i.e. not JQuery).
Any help gratefully accepted.
Thanks, Chris
Here is not quite well solution, but it gives you some useful thoughts.
let tooltips = document.querySelectorAll('.tooltip');
[].forEach.call(tooltips, (el) => {
el.addEventListener('mouseover', showTooltip, this);
});
function setDefaultPosition(element) {
element.style.top = 'auto';
element.style.right = 'auto';
element.style.bottom = 'auto';
element.style.left = 'auto';
}
function showTooltip(event) {
let tooltip = event.currentTarget.querySelector('.tooltiptext')
setDefaultPosition(tooltip);
let {top:bodyTop, right:bodyRight, bottom:bodyBottom, left:bodyLeft} = document.body.getBoundingClientRect();
let {top:tooltipTop, right:tooltipRight, bottom:tooltipBottom, left:tooltipLeft} = tooltip.getBoundingClientRect();
if (bodyTop < tooltipTop) {
tooltip.style.top = '100%';
}
if (bodyBottom < tooltipBottom){
tooltip.style.bottom = '100%';
}
if (bodyRight < tooltipRight) {
tooltip.style.right = '100%';
}
if (bodyLeft > tooltipLeft){
tooltip.style.left = '100%';
}
};
Example here
I think there is more than on CSS solution. It could be done with flexbox:
https://codepen.io/anon/pen/ZJpQWE
.wrapper {
margin-top: 10rem;
width: 100%; /* adjust the with to your needs */
display: flex;
position: relative;
}
.some-input {
width: 100%;
}
.tooltip > img {
vertical-align: middle;
height: 20px;
}
.tooltip .tooltiptext {
visibility: hidden;
background-color: #555;
color: #fff;
text-align: center;
position: absolute;
z-index: 1;
bottom: 125%;
width: 100%;
right: 0;
opacity: 0;
transition: opacity 1s;
padding: .5rem;
box-sizing: border-box;
border-radius: 6px;
}
.tooltip:hover .tooltiptext, .tooltip:active .tooltiptext {
visibility: visible;
opacity: 1;
}
I have an element that has pointer events set to none, this is so hover styles for child elements don't show.
However when this element is clicked on I want to do something with JavaScript. Using an onclick event in JavaScript does not seem to work because pointer-events is set to none.
Is there a way around this so that I can have an element with no pointer events that can still trigger a JavaScript event?
[data-drawer="open"] {
.site-drawer {
transform: translateX(0);
transition: all .2s ease;
}
.site-container {
transform: translateX(-27.5rem);
// Disabling pointer events disables styles hover styles on below elements
// But also disables clicking on container to remove it.
pointer-events: none;
transition: all .2s ease;
&:after {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,.75);
content: "";
}
}
}
JavaScript:
this.siteContainer.addEventListener('click', (e) => {
console.log('site container clicked');
if(document.body.hasAttribute('data-drawer')) {
document.body.removeAttribute('data-drawer');
}
});
Cheers
You can use this work around. Set pointer-events: none to the element that has the hover effects, And add a wrapper div to the elements that still needs to be triggered on click.
$(".cant-click-this").on("click", function(ev) {
console.log("You cant trigger the element, and it has no hover effects.");
});
$(".click-me-instead").on("click", function(ev) {
console.log("You can trigger click through the wrapper.");
});
.cant-click-this {
pointer-events: none;
}
.cant-click-this:hover {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click-me-instead">
<button class="cant-click-this"> Try to click me</button> <br>Hovering is futile.
</div>
As I mentioned in the comments, you can achieve this by adding a non-clickable overlay on top of your content using pseudo-elements and z-index
Essentially you have four layers.
the content of the website (white)
the overlay that covers the content of the website while the modal
is open (grey)
the modal (red)
the layer that covers the modal contents. (transparent)
Result: user can't click inside the modal but can click outside anywhere on layer #2
Rough example:
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
pointer-events: none;
background: rgba(0, 0, 0, .5)
}
.close {
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
display: none;
z-index: 1;
position: fixed;
cursor: default;
}
.modal-content:after {
content: "";
left: 0;
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.modal:target {
opacity: 1;
pointer-events: auto;
}
.modal:target>.close {
display: block;
}
.modal>div {
width: 300px;
text-align: center;
padding: 40px;
z-index: 2;
position: relative;
background: red;
}
.wrap,
.modal {
display: flex;
align-items: center;
justify-content: center
}
<div class="wrap">
<button>You can click me!</button>
<div id="M" class="modal">
<div class="modal-content">
<button>But not me!</button>
</div>
</div>
</div>
I'm newbe in jQuery, please do not judge strictly. I want header become fixed when I scroll page 300px. And remove fixed if <300px. And I want to animate it, slide down when I scroll down, and slide up when I scroll top. Something like this Some site, scroll down and you'll see what I want.
My html like that
<div class="heading-wrapper">
1
2
3
4
5
</div>
Css
.heading-wrapper {
width: 100%;
height: 65px;
background: #000;
position: relative;
}
.heading-wrapper.fixed {
position: fixed;
top: -80px;
left: 0;
right: 0;
}
and jQuery
$(window).scroll(function() {
if ($(this).scrollTop() > 300){
$('.heading-wrapper').addClass("fixed");
$('.heading-wrapper.fixed').animate({'top' : '0px'}, 800);
}
else{
$('.heading-wrapper.fixed').animate({'top' : '-80px'}, 800);
setTimeout(function(){
$('.heading-wrapper').removeClass("fixed");
},800);
}
});
It dont work like what I want.
If scrolling by pressing down mouse whell - it dont animate..
Animation appears at once only..
Slide up animation never appears..
If I scrolling fast up and down, the whole structure breaks down, no styles are added where necessary))
Please, help me to fix this, and remember, do not judge strictly! :)
JsFiddle link
Demo
js
$(document).ready(function () {
$("header").before($("header").clone().addClass("animateIt"));
$(window).on("scroll", function () {
$("body").toggleClass("down", ($(window).scrollTop() > 100));
});
});
css
body, html {
margin:0;
padding:0;
}
header {
position: relative;
width: 100%;
height: 60px;
line-height: 60px;
background: #000;
color: #fff;
}
header.animateIt {
position:fixed;
top:-60px;
left: 0;
right: 0;
z-index:999;
transition:0.4s top cubic-bezier(.3, .73, .3, .74);
}
body.down header.animateIt {
top:0;
}
.content {
padding: 0 20px 20px;
background: #fff;
line-height: 1.5;
color: #333;
}
html
<header>
1
2
3
4
5
</header>
Here's how I would do it.
First, depending on the browsers you're supporting, you could add this CSS :
.heading-wrapper {
position: fixed;
top: -80px;
transition: top 1s linear; /*as you wish*/
[...]
}
.heading-wrapper.relative {
position: absolute;
top: 0px;
}
.heading-wrapper:not(.relative).fixed {
top: 0px;
}
Then in Javascript :
var $wrapper = $(".heading-wrapper");
var $win = $(window);
var doc = document.documentElement, body = document.body;
var top = 0;
$wrapper.clone().appendTo("body").addClass("relative");
$win.scroll(function () {
top = (doc && doc.scrollTop || body && body.scrollTop || 0);
if( top > 300)
setTimeout(function(){$wrapper.addClass("fixed");},0);
else if( $wrapper.hasClass("fixed") )
setTimeout(function(){$wrapper.removeClass("fixed");},0);
});
I updated your JSFiddle.
EDIT : Added a cloned menu, absolute.