How can I remove the "≥" link button (and the line it occupies) which appears above my thumbnails when using Lightbox2? I have checked through the CSS which accompanies the js and cannot find it anywhere.
In the lightbox2 CSS sheet the images that attach to those white next link buttons can be found in this block of code. Don't forget to remove it from the states like a:hover. You can always go to other websites for similar png files to change the slider options for nav left and right.
.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 {
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;
}
Related
I'm having problems understanding nesting in styled components, i have a code i need to implement in my project but i don't fully understand how to write the same stuff with styled-comp. due to nesting of classes..
CSS:
#cf {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.top:hover {
opacity:0;
}
HTML:
<div id="cf">
<img class="bottom" src="/images/Cirques.jpg" />
<img class="top" src="/images/Clown%20Fish.jpg" />
</div>
I've been using styled-components for couple of weeks, so i understand the basics, i'm just having problems writing 2 nested objects like it's shown in css...
If u got time to explain it a bit, would be great :)
it becomes:
import Styled from 'styled-components';
const MyDiv = Styled.div`
position:relative;
height:281px;
width:450px;
margin:0 auto;
img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
&.top:hover{
opacity:0;
}
}
`
Render
<MyDiv />
Working example
https://codesandbox.io/s/xj3y2qz87q
Looking at the documentation for Pseudoelements, pseudoselectors, and nesting, you could use your existing CSS as is as that would be how you would apply effects such as :hover anyway. Here is what that would look like applying your existing CSS to a styled-component:
const Foo = styled.div`
#cf {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.top:hover {
opacity:0;
}
`;
Usage of the styled-component:
<Foo>
<div id="cf">
<img className="bottom" src="https://via.placeholder.com/200/0000FF/808080" />
<img className="top" src="https://via.placeholder.com/200/FF0000/FFFFFF" />
</div>
</Foo>
Here is an example in action.
Hopefully that helps!
When you implement your style rules, you might be surprised when they are not applied as expected. The reason is how the styled_components works behind the scenes:
it creates a <style> tag with attribute data-styled="active" and adds it to the <head> element
it adds a random class name to the element being styled before any class names that you have added
then it adds the style rules to its own <style> element, preceded by the random class name
This results in the style rule selector that works only for selector components that are in your element or children of your element.
But say you need to override a style rule in another stylesheet, that has a component with an id (i.e. preceded by #) from a parent DOM element. You cannot use that #{some-id} selector in the rule you add to the styled component, because the order of the selector created for you begins with that random class name. In this case, to get the selector to have the precedence required, you will have to nest another element (probably a div) with an #id, and use that #id in your style rule.
In this below example
http://plnkr.co/edit/IzimSVsstarlFviAm7S7?p=preview
<div class="container">
<div ui-view></div>
when i am clicking on home or about button the view part is loading directly. But i need to move the current page(home) from right to left and new page(about) should load from right to left(transition effect)
How can this possible?
I have fixed the issue by using ng-animate, added below css in to my code
[data-ui-view].ng-enter, [data-ui-view].ng-leave {
position: absolute;
left: 0;
right: 0;
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
}
[data-ui-view].ng-enter {
opacity: 0;
-webkit-transform:translate(960px);
-moz-transform:translate(960px);
transform:translate(960px);
}
[data-ui-view].ng-enter-active {
opacity: 1;
-webkit-transform:translate(0px);
-moz-transform:translate(0px);
transform:translate(0px);
}
[data-ui-view].ng-leave {
opacity: 1;
/*padding-left: 0px;*/
-webkit-transform:translate(0px);
-moz-transform:translate(0px);
transform:translate(0px);
}
[data-ui-view].ng-leave-active {
opacity: 0;
/*padding-left: 100px;*/
-webkit-transform:translate(-960px);
-moz-transform:translate(-960px);
transform:translate(-960px);
}
when I view my website on different screen sizes, the button and equalizer move to different points. so how to make it's position fixed on any screen size?
button html code:
<div id="player" class="player">
<i id="playback" class="fa fa-play fa-3x"></i>
</div>
<audio controls loop style="display:none">
<source src="http://streaming.radionomy.com/MSTC-CHI" type='audio/ogg'>
<source src="http://streaming.radionomy.com/MSTC-CHI" type='audio/mpeg'>
</audio>
css code:
#playback {
position: absolute;
top: 30%;
left: 40%;
width:auto;
color:white;
}
#player:after {
position: absolute;
content: '';
width: 150px;
height: 150px;
left: 0;
color:white;
border-radius: 50%;
-webkit-transform: rotate(4deg);
transform: rotate(-75deg);
}
#playback {
position: absolute;
color:white;
left:29.7%;
top:46.25%;
text-shadow: 0 0 40px #fff;
}
.fa-stop{
margin-left:-0.46%;
}
#player{
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
#player:hover{
box-shadow: 0 0px 20px #fff;
}
I've tried to make the display block, margin auto, position absolute, and determine top and left position.
#player {
display: block;
margin: 0 auto;
top: 46%;
left: 30%;
position: absolute;
}
#music-bar {
display: block;
margin: 0 auto;
top: 75%;
left: 58%;
position: absolute;
}
but still not working. any idea how to fix this issue?
thanks in advance.
Try to use following snippet.
position:absolute;
top: 50;
right:0;
In your example you use percentages. I think what you should use is absolute numbers (in pixels for example).
The element will be placed at the top right with 50 pixels distance to the top.
I am currently developing a heavy angular-driven homepage for an agency. Now I am at the state-change. I added a page transition with a simple fade effect. Now the problem I have is, that the new ui-view that is being added when the state changes is prepended before the first ui-view. Everything alright, but as the first ui-view is fading out the second is already added and the transition looks just crappy. So, I want to have the new ui-view added after the first ui-view.
IMPORTANT: I am using parallax effects, so the solution with a page-container and absolute positioning isn't possible.
This image is showing what I want to have afterwards.
I had faced similar issue, it was because I had animation on both enter and leave.
You dont need animation on both enter and leave.
You can have animation only on leave or only on enter
E.g.
.ng-enter {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
opacity: 0;
}
checkout the easing in animation in this PLUNKER
OR if you want animation in both enter and leave, then add a delay in animation
add delay to your transitions:
.ng-enter{
-webkit-transition: all 2s ease 1s;
-moz-transition: all 2s ease 1s;
-o-transition: all 2s ease 1s;
transition: all 2s ease 1s;
}
.ng-leave {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
Building off of #HarishR's answer:
http://plnkr.co/edit/pzsDd1zPvHgdZe099upi?p=preview
We have 2 transitions:
IN:
.ng-enter {
transition: opacity 1s ease; // autoprefixer
opacity: 0; // start animating
}
.ng-enter-active {
opacity: 1; // end animating
}
OUT:
.ng-exit {
transition: opacity 1s ease; // autoprefixer
opacity: 1; // start animating
}
.ng-exit-active {
opacity: 0; // end animating
}
This will take 1 second to fade in and out the blocks. When there's only 1 block, it fades in immediately over 1 second. What if there are two blocks though (transitioning from one to another?). We can use delays and some nifty css:
// Selector only matches if 2 sibling animating elements exist
.ng-animate + .ng-animate {
// Avoid pushing around DOM
// Property disappears once the first sibling leaves
position:absolute;
// Delay fade-in until first sibling leaves
transition-delay: 1s; // autoprefixer
}
Without this fancy selector, the first time you open a view you'd have a 1s delay before anything happens.
I'm using ngAnimate to animate max-height for a simple slide-toggle effect, and there's something a bit strange happening: when hiding, it seems that setting the transition property on the setup class (.xxx-hide) doesn't work--the height snaps to 0 immediately:
.controls-hide {
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
max-height: 5em;
opacity: 1;
}
.controls-hide.controls-hide-active {
max-height: 0em;
opacity: 0;
}
But setting it on the active class (.xxx-hide.xxx-hide-active), the animation works just fine:
.othercontrols-hide {
opacity: 1;
max-height: 5em;
}
.othercontrols-hide.othercontrols-hide-active {
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
max-height: 0em;
opacity: 0;
}
(Here's the whole fiddle.)
Even more strangely, the opacity animates just fine in both cases. What's going on here?
I just follow the instructions at this site: http://www.nganimate.org/angularjs/ng-repeat/appear
And I got this fiddle working: http://jsfiddle.net/WXWSu/2/
What I changed was set the transtion tag to all changes (transition: 1s linear all;), and set the start properties at the main class:
.exercise-controls {
overflow: hidden;
border: 1px solid black;
height: 5em;
opacity: 1;
}