I know this probably cannot be done without javascript but I dont mind using it.
I have a div that grabs the width percentage with PHP.
All I need to do is that on page load I would like the bar ( Div ) to start at 0px width and transition to the correct width percentage.
I can do it fine of course on a Hover or Active state but cant seem to get it right with page load.
Do you use jQuery? Theres a built-in document ready function. Inside of that, add a class to the div. Then in your CSS you can style the two different states of the div to accommodate the transition
Javascipt
$(function(){
$('.bar').addClass('.ready');
});
CSS
.bar {
width: 0;
transition: width 500ms;
}
.bar.ready {
width: 100%;
}
Related
I want to have a button that takes me to a specific part of my horizontal scrolling website.
I am using Wordpress. I am willing to use any theme (or customizing any theme) as I've already tried several.
I tried using id, elementor menu anchors, 'page to scroll id' plugin...
Everything works only as long as the website scrolls vertically.
I add custom CSS in WP Customizer to make it horizontal. It works only when scrolling with the mouse.
However, the ids, or anchor links don't make the page scroll horizontally when you click the button (or text, or whatever takes you to the #id_name).
I know it has to do with the CSS, and that I probably need to use a js scrollbar, or something like that, but I can't find something that works so far.
I am using Astra Theme and Elementor.
This is the extra CSS i used:
.elementor-inner {
width: 100vh;
height: 100vw;
overflow-x: hidden;
overflow-y: scroll;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
position: absolute;
scrollbar-width: none;
-ms-overflow-style: none;
}
.elementor-section-wrap {
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
display: flex;
flex-direction: row;
width: 600vw;
}
.section {
width: 100vw;
height: 10vh;
}
::-webkit-scrollbar {
display: none
}
My solution is not specific to a Wordpress theme, but I hope it will help you out nonetheless. If you want to post your HTML markup, I can give a more specific answer for your scenario :)
Assuming your page layout is already set up with horizontal scrolling, here are the steps you'll need to take to get that anchor functionality working:
Set an ID on the element you wish to scroll to.
Set a click listener on the button/link you'd like to trigger this scroll from.
On click of the button, get the offsetLeft property of the element you'd like to scroll to.
Set the parent container's scrollLeft property to that value from above.
HTML:
Scroll to Element!
<!-- your existing markup -->
<div id="my-element">
<p>Content would go here</p>
</div>
<!-- /your existing markup -->
Note: I'm using an anchor <a> tag with an href attribute here, since we should keep this in line with the web accessibility guidelines. You're welcome to use a <button> and maybe a data attribute, if needed.
JavaScript:
// (These class names would be specific to your case)
const myButton = document.querySelector(".my-button");
const scrollContainer = document.querySelector(".scroll-container");
myButton.addEventListener("click", event => {
// Prevents the link's default behavior:
event.preventDefault();
// Gives us the string: "#my-element":
const link = this.href;
// Finds the corresponding element:
const element = document.querySelector(link);
if (element) {
const leftPosition = element.offsetLeft;
// This line actually takes us to the element:
scrollContainer.scrollLeft = leftPosition
}
});
Couple things here:
You will need to change the various class names here, based on what your HTML markup looks like.
The only requirement for the offsetLeft property to be accurate, is that the scroll container has relative positioning.
Animation?
As a bonus, you could animate the scrolling, so it's not just an instant "jump". I would be happy to outline how to do that as well, just let me know.
If I get you right you want to scroll horizontally, to do so you can do it using jQuery:
<script>
$elementToScrollTo = $('#scroll-to');
$whereToScroll = $elementToScrollTo.offset().left - 30; // 30px just to give some space before the element
window.scrollBy($whereToScroll, 0);
</script>
First line to select the element you want to scroll to
Second line to get the offset left (how far is the element from the left [in px])
Third line is to tell window to scroll in X coordinates
I am using css transitions to lay out a bunch of divs on top of each other. At any point, one of the divs may collapse. And all of the divs below it are supposed to move up to fill its spot.
Here is a codepen that describes the situation.
The css I am using is the following:
div {
height: 100px;
width: 100px;
margin: 15px;
}
.top {
background-color: red;
transform-origin: top;
animation: move 2s infinite;
}
.bottom {
background-color: blue;
}
#keyframes move {
0% {
transform: rotateX(0deg);
}
50% {
transform: rotateX(90deg);
}
}
With this, the top div will expand and contract. I want the divs below it to move up as the top one collapses.
If I switch transform for height, like this:
#keyframes move {
0% {
height 0;
}
50% {
height: 100px;
}
}
The bottom divs do move, but this is not a good solution for me because in the actual application, each div has a dynamically calculated size.
How can the bottom divs move smoothly with the top div?
With transform you won't be able to do that, as when an element is transformed, the surrounding elements won't see any change in the DOM, as DOM-wise nothing have happened.
What you can do to optimize it all, is to prepare the browser that the height will change, with the property will-change: height
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
This new CSS property aim's to do what transform does, make smoother and more optimized animations.
Do note though:
will-change is intended to be used as a last resort, in
order to try to deal with existing performance problems. It should not
be used to anticipate performance problems.
Another possible solution (read hack), is to trick the browser to use GPU instead of CPU, shown in this answer (see its p.1):
CSS `will-change` - how to use it, how it works
Updated
In case of the height is auto, or similar, this will work with the max-height trick, and here is a couple of answers of mine, showing how-to:
CSS Animation on max-height change
Can't use the same animation in reverse for class toggle
CSS transition auto width
And the last resort, if none of the above is applicable, is to use a small script and either create a styles dynamically (links below), or set them inline.
Dynamically styling pseudo-elements using jQuery or Javascript
How to prevent css from getting converted to inline css
I am using Angular Material and I am using tabs in an md-dialog. When navigating through the tabs the dialog height is scaling really smooth according to the content of the tab. However, when using an ng-if to show or hide content, the dialog height changes but there is no smooth animation. Is there a way to animate the change in height when showing and hiding elements inside dialog?
This is a codepen of the tabs with a checkbox for adding content:
http://codepen.io/csteur/pen/zvjgRr?editors=101
You'll need to use animation yourself to show and hide the new content. It doesn't look like ngIf works well with material dialogs, but ngShow works fine:
http://codepen.io/anon/pen/zvaYEy
I added CSS and modified your HTML. It seems that ngAnimate behaves a little different in material dialogs, so I had to add the transition on the main class and 2 extra classes that you don't normally use to the HTML:
CSS Addition:
.animate-show {
height: 0;
background: white;
overflow: hidden;
transition: all 0.5s;
}
.animate-show.ng-hide-add, .animate-show.ng-hide-remove {
transition: all 0.5s;
}
.animate-show:not(.ng-hide) {
height: 60px;
}
HTML Change:
<p ng-show="addText" class="animate-show ng-hide ng-hide-animate">
I'm using this a link accordion menu to create a FAQ. Problem is that height is fixed, so whenever text is too long (or on mobile devices), text is cut us.
I've tried to use height: auto, overflow: hidden; min-height, !important and all the tags to make the height responsive, but whenever I do this, If I click on the tabs, the scrolling accordion effect doesn't work or it jumps to top page.
How can I solve this? I'd prefer not using JS or Jquery...thanks!
Here's the css
.ac-container input:checked ~ article.ac-small {
height: 140px;
}
All you need to do is Setting height:auto for the below property.
.ac-container input:checked ~ article.ac-small {
height: auto;
}
which is the one deciding height of the according body.
Plese find the link for the updated code.
The solution you use is CSS only.
A CSS3 animation needs a defined height value to generate the transition – that's why the solution you used offers 3 different predefined heights.
Another approach would be to use the max-height-trick which works for linear animations only though.
The most common solution would be to toggle the animation via jQuery's slidetoggle().
So I'm trying to create an animation on a webpage and am trying to figure out a way to do it using CSS3, but am quite confused as to how I can do it.
What I need to have happen is when users click on a link element I want a div to expand and be populated with content specific to the link element clicked. For example, when a user clicks on a link titled "About", a div below the link element will expand and have some content appear. THEN, when they click another link, say "Contact", the content specific to "About" will disappear and content specific to "Contact" will appear as the div re-sizes to fit the new content.
I think I can do this pretty easily with Javascript, but can someone tell me if it might be easier to do/possible with CSS3?
Thanks all.
As already mentioned, JavaScript is your best friend for this. But since you asked if it would be possible with CSS3 I had to give it a try. Basically what I’ve done is I’ve used the target selector to trigger the animation. So when you click a link, a div expands with some content and if you click another link a new div, with some new content (positioned in the same place) expands, creating the illusion that it’s the same div expanding.
It’s not an optimal solution and I made this example really quick so it’s not working exactly as you wanted, but it gives you at least a picture on how it could be done with just CSS.
Hope that helps!
Here's a demo and here's the code from my example:
HTML
Box<br />Box two
<div id="box">Hello</div>
<div id="boxtwo">Hello again,</div>
CSS
#box, #boxtwo{
position: absolute;
top: 50px;
left: 50px;
width: 0px;
height: 0px;
background-color: #e3e3e3;
color: transparent;
}
#box:target {
-webkit-animation: expand 1.0s ease-in forwards;
}
#boxtwo:target {
-webkit-animation: expand 1.0s ease-in forwards;
}
#-webkit-keyframes expand {
0% {width: 0px; height: 0px; color: transaprent;}
50% {width: 100px; height: 100px; color: transparent;}
100% {width: 100px; height: 100px; color: #000000;}
}
The simplest way for a click to trigger an animation is to add a CSS class to an object upon the click and have an CSS3 transition or animation configured for any object with that class.
Your second class to hide the item can then remove that class name from the same object.
All the details of the animation/transition would be specified in CSS3 style rules. Only the add/remove of the class name would be done with javascript.
CSS3 all by itself can trigger animations/transitions with the :hover pseudo selector, but isn't a lot more capable than that and can't trigger an animation based on a click.
I don't think this is a CSS3 vs. JavaScript question. Even if you use CSS3 for the animations, you're likely to need JavaScript to trigger the animations based on a click event.
Based on what you need to do, I see a couple of main options:
As #jfriend00 said, add or remove CSS classes which perform the animation.
Use jQuery's show, hide, fadeIn, fadeOut, and animate APIs.
What you need is some juery to spice up whatever you are developing... If am not wrong you want some thing like this: CSS3 vs Jquery
Get the jquery library and reference it in your page.
here is a snippet to jump start you.
<a id="home" href="home.html">Home</a>
<a id="about" href="about.html">About</a>
<div id="home_div"></div>
<div id="about_div"></div>
<script type="text/javascript">
$('#home').click(function () {
$('html').animate({ scrollTop: 500 }, 1000);
$('#home_div').animate().show('slow');
$('#about_div').animate().fadeOut('slow');
return false;
});
$('#about').click(function () {
$('html').animate({ scrollTop: 500 }, 1000);
$('#home_div').animate().fadeOut('slow');
$('#about_div').animate().show('slow');
return false;
});
</script>
You can change the effects to other available ones.