How can I set the easing of the element in the HTML? Here is what I have now. The movement is very choppy and I am hoping that setting the easing to linear will solve this.
<div id="backgrounds"
style="background:url(http://forevereverlandfestival.com/wp-content/themes/live-forever/FEEL15-BG-Full-Sized-Web.jpeg)"
data-live-color="rgba(<?php echo hex2rgb($bg_color)?>,0.8)"
data-smooth-scrolling="on" data-easing="linear"
data-top="background-position:0px 0px;" data-10000="background-position:-5800px 10000px;">
Related
I'm using Vuetify trying to approach this textfield style. I'm using outlined textfield provided them with a simple custom style, but I can't change its label position. Is there any way I could change the label position and the "interval" where the line starts and ends?
I was trying searching in their documentation and found this session, but no luck while changing $text-field-outlined-label-position-x or $text-field-outlined-label-position-y.
edit: this is the best I could reach, which is actually the default outlined textfield with rounded borders.
Thanks in advance!
I figured it out by myself.
We can change the margins on the Vuetify classes of v-text-field to change its position. Just change it by your own margin and everything works!
.v-text-field__slot {
margin-left: 20px;
}
.v-input__slot > fieldset > legend {
margin-left: 20px;
}
I created a hamburger menu toggle, which i am trying to make it change its color when 'dark mode' is active.
Unfortunately it isn't quite working.
the pseudo elements aren't switching back once they changed. The '.hamburger' does.
.hamburger,
.hamburger::before,
.hamburger::after {
//background: var(--clr-accent); <--- original
background-color: var(--clr-ham-toggl);
width: 2em;
height: 3px;
border-radius: 1em;
transition: transform 250ms ease-in-out;
}
.to('.hamburger', {backgroundColor: '#f6f6f6', duration: duration * 2}, 0)
.to(CSSRulePlugin.getRule('.hamburger::before'), {backgroundColor: '#f6f6f6', duration: duration * 2}, 0)
.to(CSSRulePlugin.getRule('.hamburger::after'), {backgroundColor: '#f6f6f6', duration: duration * 2}, 0)
really appreciated, if someone could point me in the right direction.
EDIT: So, it is now working via its own variable. Like so:
<button class="nav-toggle" aria-label="toggle navigation">
<span class="hamburger"></span>
</button>
.to('.nav-toggle', {"--clr-ham-toggl": "#f6f6f6"}, duration * 0.5)
There are a couple of issues here. First, you are trying to get the rule for the backgroundColor but in CSS you have a rule for background. You should animate the same rule so that the rules don't conflict.
Second, you're applying a CSS transition but then trying to animate it with GSAP. This will cause performance issues because the transition will try to apply each update when it doesn't need to.
Additionally, I highly recommend that you use GSAP's defaults because it makes using timelines even easier.
Putting those changes together, it animates!
However, as mentioned in the comment above, we at GreenSock do not recommend that you use the CSSRulePlugin for animating pseudo-elements in most cases these days because CSS variables are easier to animate and have pretty good support. If the support is good enough for your use case use this approach instead.
FYI you're more likely to get an even faster reply over on the GreenSock forums.
I am making a simple fixed SoMe sharing button set for a blog. Everything is fine and dandy except in Safari. Hovering over one of the buttons changes the background-color of the siblings to a color I do not specify anywhere in my CSS. This behavior goes away as soon as I change the wrapper from fixed to relative/static/absolute.
Has anyone ever run into this?
Am I doing something wrong?
If not, is there a hack/fix/workaround?
HTML:
<div id="share-links">
<a class="share-twitter" href="#">a</a>
<a class="share-facebook"href="#">a</a>
<a class="share-linkedin" href="#">a</a>
</div>
CSS:
#share-links{
left:0;
top:5em;
position:fixed;
}
#share-links a{
display:block;
height:2em;
width:2em;
color:white;
background-color:#a16159;
}
#share-links a:hover{
background-color:#8a392e;
}
Fiddle: https://jsfiddle.net/u6vzq192/26/
I discovered this problem in a slightly different situation. I have pagination dots in a fixed div using links like you have set up. I am adding a class to the links with Javascript which in turn changes the background color. Every time this happens the background colors of all the other links go crazy. I believe that it is a rendering bug in Safari inverting the background of the links when one changes.
After much experimentation with your example I discovered that it stops if either the links themselves are much larger or the container is much larger. Since setting the links to be giant buttons affects design, it seems the best solution is to set the container to be larger. Since your example is a vertical set of links you would set the height of the container to be something much larger than the links. I used height: 100%; but a large px should work too. If you had links laid out horizontally you might need to make that width: 100%; instead.
CSS:
#share-links{
left:0;
top:5em;
position:fixed;
height: 100%;
}
#share-links a{
display:block;
height:2em;
width:2em;
color:white;
background-color:#a16159;
}
#share-links a:hover{
background-color:#8a392e;
}
I encountered a similar problem. As well as being fixed, one of the inside elements had transform:rotate 90 deg and had a hover effect that changed its position slightly (pulled out from the side of the screen). The background color of this element and its sibling were the same, and both would flicker randomly when elements on the page were changed / rendered.
I finally found a combination of styles that stopped the background colour flickering altogether.
I added the following to the parent element from here: https://stackoverflow.com/a/27863860/6260201
-webkit-transform:translate3d(0,0,0);
-webkit-transform-style: preserve-3d;
That stopped the flickering of the transformed/sliding element.
And I added the following to the remaining element from here: https://stackoverflow.com/a/19817217/6260201
-webkit-backface-visibility: hidden;
This then stopped the flickering of the background colour for the sibling element.
I have a container in the center of window. And my logo goes out from container to the left. I split my logo in 2 pieces. Right piece i added in my container with no-repeat. And left piece i have to add in my body background and somehow stick it to containers div.
i have drawn my issue:
how to manage that issue ?
I would do it somehow different. You can always set background of #logoimage div to your logo with gradient, or simply put an image inside. One image is enough with full logo object.
style:
#container{
display:block;
width:400px;
height:800px;
margin:auto;
background:#abc;
position:relative;
}
#logoimage{
display:block;
width:170px;
height:80px;
margin:auto;
background:#aaa;
position:absolute;
left:-70px;
top:30px;
}
html:
<div id="container"><div id="logoimage"></div></div>
live example here
What's the most important of this is:
position:relative style of container element
position:absolute style of logo element
The idea generally is that in position absolute, you can set x,y relatively to element with position relative.
does anyone know how to create a loading mask over a XUL panel with JQuery or normal Javascript?
i am developing a firefox extension and i need the loading mask over some of the panels to avoid the user from making any further input while information is being submitted.
First of, i don't really know if mozilla supports loading masks over XUL panels because all the JQuery scripts i tried so far make the panel disappear instead of masking it.
thanks for reading
XUL uses box layout which makes typical techniques from HTML like absolutely positioned divs malfunction. You should use a XUL <stack> tag (see https://developer.mozilla.org/en/XUL/stack) and put both your content and your half-transparent layer as its children. When you make the half-transparent layer visible it will appear on top of the content. For example:
<stack flex="1">
<hbox id="content" align="center" pack="center">
<button label="Click here" oncommand="document.getElementById('busy').hidden = false;"/>
</hbox>
<hbox id="busy" hidden="true"/>
</stack>
And some CSS code:
#busy {
background-color: black;
opacity: 0.5;
}