How to make the direction nav constant on flexslider? - javascript

I want the little hover grey arrows to be display block and not animate when hovering over the thumbnail navigation. You can see the demo here. I have been wading through the javascript for the plugin and cannot for the life of me work out where it is animating the arrows. If I could, I would just comment out that code. So can anyone else?

This confused me for a little while, but it turns out the arrow animation isn't actually in the plugins javascript. It's in the CSS using -webkit-transition: all .3s ease;. If you look at the default CSS file and go to line 52 you need to remove the above out of .flex-direction-nav a. So the line should look like the below.
.flex-direction-nav a {
width: 30px;
height: 30px;
margin: -20px 0 0;
display: block;
background: url(images/bg_direction_nav.png) no-repeat 0 0;
position: absolute;
top: 50%;
z-index: 10;
cursor: pointer;
text-indent: -9999px;
opacity: 0;
}

I recently ran into this issue and solved it (with the help of this question/answer) by overriding the following styles:
.flex-direction-nav a {
...
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
}
with these styles in my own css:
.flexslider .flex-direction-nav a.flex-prev,
.flexslider .flex-direction-nav a.flex-next {
...
-moz-transition: none;
-webkit-transition: none;
transition: none;
}
I'm a big fan of not modifying source code provided by a library, so I think this is a better and more complete solution.

It is very simple, just change the following css code like this:
.flexslider .flex-direction-nav .flex-next {
right: 5px; /* adjust offset to match the hover style */
opacity: .8; /* adjust opacity to match the hover style */
}
.flexslider .flex-direction-nav .flex-prev {
left: 5px; /* adjust offset to match the hover style */
opacity: .8; /* adjust opacity to match the hover style */
}

Make your own arrows: disable directionNav and use manualControls.

Related

Is it possible to animate a strikethrough? CSS / JS

I am trying to get the text decoration to appear from left to right, as if it is being crossed out with a pen.
Is there a way to do this without making changes to the text behind it?
Thanks in advance!
document.querySelector('h1').addEventListener('click', (e) => {
e.target.classList.toggle('strikethrough')
})
.strikethrough {
text-decoration: line-through;
text-decoration-style: wavy;
text-decoration-thickness: 15%;
animation: strike 3s linear;
}
#keyframes strike {
0% {width: 0;}
100% {width: 100%;}
}
<h1>CROSS ME OUT</h1>
If you are willing to accept using a straight line as the strike through (instead of depending on the font's own strikethrough styles), then it is just a matter of overlaying a div on top of the <h1> element and offsetting it 100% to the side using transform: translateX(-100%). We give it a top border whose width is font-size dependent (i.e. use em units), and a color whose value is dependent on the current font color (i.e. use currentColor).
You can use CSS transitions set the duration and easing function of the entry of this line. When the .strikethrough class is added, the offset is simply set to transform: translateX(0).
A caveat is that this trick only works for non-breaking lines. If your h1 element will render across multiple lines, then it wouldn’t work.
See proof-of-concept example below:
document.querySelector('h1').addEventListener('click', (e) => {
e.target.classList.toggle('strikethrough')
});
h1 {
display: inline-block;
position: relative;
overflow: hidden;
}
h1::after {
position: absolute;
top: calc(50% - 0.05em);
left: 0;
width: 100%;
content: '';
display: block;
border-top: 0.1em solid currentColor;
transform: translateX(-100%);
transition: transform .25s ease-in-out;
}
h1.strikethrough::after {
transform: translateX(0);
}
<h1>CROSS ME OUT</h1>

No exit animation applied - Polymer

I have a paper-icon-button that animates (spin & opacity) when I hover an image using on-mouseenter and on-mouseleave.
The animations occur properly on-mouseenter, but the paper-icon-button simply disappears on-mouseleave rather than repeating the animation.
Can anybody help?
HTML
<img id="avatar" class="userAvatar" src="../images/hipster.png" slot="item-icon" on-mouseenter="cogSpin" on-mouseleave="cogSpin"></img>
<paper-icon-button id="cogSpin" icon="settings" class="cog" on-click="doSomething"></paper-icon-button>
CSS
.cog {
position: fixed;
color: white;
top: 129px;
left: 64px;
opacity: 0;
transition: opacity 1s, transform ease-in-out 1s;
visibility: hidden;
}
.cogOn {
visibility: visible;
opacity: 1;
transform:rotate(360deg);
}
JS
cogSpin : function() {
// css class only applied if the drawer containing it has been expanded
if(this.$.drawer.classList.contains('drawerExpand')) {
this.$.cogSpin.classList.toggle('cogOn');
}
}
That's because visibility:hidden; and it's counterpart is not an animatable CSS property. (See dev docs regarding interpolation)
Change your CSS rule to:
.cog {
position: fixed;
color: white;
top: 129px;
left: 64px;
opacity: 0;
transition: opacity 1s, transform ease-in-out 1s;
}
.cogOn {
opacity: 1;
transform:rotate(360deg);
}
The visibility property is unnecessary in any case thanks to your use of opacity.

Jquery evenly resize anchor text

I am trying to evenly increase and then decrease the font size of anchor text inside a paragraph without moving the paragraph text. This way the anchor text will look as if it is coming toward the user and then receding back into its original place. The font-size also appears as if it is growing from the lower left corner as opposed to what I want which is evenly from all sides.
HTML:
<p>
<a>[D]</a>I've been workin' on the railroad,
<a>[G]</a>all the live long <a>[D]</a>day.
<a>[D]</a>I've been workin' on the railroad,
just to <a>[E]</a>pass the time a<a>[A]</a>way.
</p>
CSS:
p {
white-space: pre-wrap;
}
a {
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
color:red;
}
.increase-font {
font-size: 30px;
background:#FFF;
}
Jquery/Javascript:
$('a').on('click',function(e){
e.preventDefault();
var el = this;
$(el).addClass('increase-font');
setTimeout(function(){
$(el).removeClass('increase-font');
},1000);
});
Here is the fiddle:
https://jsfiddle.net/scooke/ro2tyf6h/
To achieve this, the anchor texts need to be somewhat independent from the parent. Inserting the anchor text with CSS :before or :after selectors will solve the problem. See my example and adjust as needed.
$('a').on('click', function(e) {
e.preventDefault();
var el = this;
$(el).addClass('increase-font');
setTimeout(function() {
$(el).removeClass('increase-font');
}, 1000);
})
p {
white-space: pre-wrap;
padding-left: 30px;
display: inline-block;
width: 100%;
position: relative;
}
a {
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
color: red;
display: inline-block;
position: relative;
width: 30px;
height: 10px;
}
a:before {
content: "[D]";
position: absolute;
left: 0;
text-align: center!important;
width: 100%;
top: -5px;
}
.increase-font {
font-size: 30px;
background: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> <a></a>I've been workin' on the railroad,</p>
<p><a></a>all the live long <a></a>day.</p>
<p><a></a>I've been workin' on the railroad, just to <a></a>pass the time a<a></a>way.</p>
Suggestions:
Restructuring your HTML will be a good start
Adding a background to the :hover state will help keep it clean
and distinguishable.
It's relatively simple - just wrap the anchor tags in span tags:
<p><a><span>[D]</span></a>I've been workin' on the railroad,</p>
<p><a><span>[G]</span></a>all the live long <a><span>[D]</span></a>day.</p>
<p><a><span>[D]</span></a>I've been workin' on the railroad, just to <a><span>[E]</span></a>pass the time a<a><span>[A]</span></a>way.</p>
Set the anchor's position to relative (with a margin to give its children spans room), whilst also setting span tags to absolute:
a {
position: relative;
max-height: 0px;
max-width: 0px;
margin-right: 25px;
}
span {
position: absolute;
top: 0;
left: 0;
}
Then just swap the jQuery event handler from registering on all anchor tags to all span tags:
$('span').on('click',function(e){
e.preventDefault();
var el = this;
$(el).addClass('increase-font');
setTimeout(function(){
$(el).removeClass('increase-font');
},1000);
})
Seeing as absolute elements are removed from the DOM flow, resizing the spans doesn't effect the elements around it. Full code here:
https://jsfiddle.net/ro2tyf6h/5/

Vertically center a button inside a responsive container with pure CSS?

So I want to make this thumbnail effect.
$(window).resize(setThumbHeight);
$(window).resize(centerBtn);
SEE HERE
As you can see I wrote some JQuery to set the container height and center the btn, which I think is pretty dumb.
I have a few questions:
1. How can I maintain the aspect ratio of the container without using JQuery.
2. How could I center the button vertically inside the container using pure CSS? (It seems someone had it done with table and table-cell)
3. Why background url is not working? (I have the line commented out in the CSS.)
Thanks guys.
Here's a simple cross-browser method to achieve what you're looking to do:
http://codepen.io/aecend/pen/KEvBa
I didn't bother with any of the CSS transitions, just focused on the centering. To maintain the container dimensions, only set the width of the outer thumbnail container, the height will automatically flex to fit. Also, the background url does seem to be working, the image itself was covering the background in your fiddle.
HTML
<div class="thumbnail">
<img src="http://placekitten.com/300/200">
<div class="mask center-in-container"></div>
<button class="button center-in-container">Enter</button>
</div>
CSS
.thumbnail {
width: 30%;
position: relative;
}
img {
display: block;
width: 100%;
height: 100%;
}
.center-in-container {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.button {
width: 50px;
height: 30px;
display: none;
}
.mask {
background-color: rgba(0,0,0,0.3);
display: none;
}
.thumbnail:hover .button {
display: block;
}
.thumbnail:hover .mask {
display: block;
}
You can center an element vertically with this trick:
change value of margin if you change width or height of your button.
-17px is half of height and -30px is half of width
.thumbnail-mask .btn{
position:absolute;
top:50%;
left:50%;
margin:-17px -30px;
}
and for zoom on picture you can use this:
.my-thumbnail:hover img{
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
-o-transform:scale(1.5);
-ms-transform:scale(1.5);
transform:scale(1.5);
}
and if you want display your picture with background css property, you must have height on your container .my-thumbnail.
Hashbug,
Aside from a JavaScript method, which, you have employed - there are no dynamic, cross-browser compatible solutions for what you are attempting to do.
If you still do not wish to use JavaScript, and are O.K. with this not working cross-browser, then you may want to take a look at CSS3's flexbox. As I said the flexbox is not supported by all browser versions yet, you can find out which here: caniuse.com. I made a fiddle to show your solution updated with flexbox here:
http://jsfiddle.net/jpatterson69/z8uCK/
.thumbnail-mask {
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
width: 100%;
height: 100%;
text-align: center;
background: rgba(0,0,0,0.4);
opacity: 0;
-webkit-transition: opacity 0.3s ease-out;
-moz-transition: opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-out;
-ms-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
}
I did not include any of the "hacks" as other users have posted because they generally will cause you much more strife than is needed - your solution is the easiest compared to these. May I ask why you need to use the flexbox?

how can I achieve this hover effect? Tried several methods with no luck [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
Hey guys how can I achieve a hover effect like the one used on the site below?
http:// minimalmonkey .com/
My current HTML:
http://pastebin.com/jCiy0ghX
And my CSS:
http://pastebin.com/WeQBDx8b
Tried lots of different methods such as borders on hover & width change on hover but didn't have any luck..
Thanks in advance, Luke.
I tried to make it similar, there is couple of things to have in mind according to details:
when it grows content don't move from position - that's why
padding is affected
Column tends to growing around its center - margin and border altered at the same time to accomplish that.
Outer columns seems to fade into background - opacity changes because of that for them.
Apart from creating a container to wrap columns, everything is plain CSS
modified CSS:
/* Column Styling CSS */
#left-column{
background-color: #27ae60;
left:0;
border-color:#27ae60;
}
#centre-column{
background-color: #e67e22;
left: 33.33%;
border-color:#e67e22;
}
#right-column{
background-color: #c0392b;
left: 66.66%;
border-color:#c0392b;
}
div[id$="column"]{
width: 33.33%;
height: 100%;
position: absolute;
}
.columns{
background-color: #333;
width: 100%;
height: 100%;
position: absolute;
}
.columns:hover div{
/*
transition for animation in modern browsers
*/
transition: opacity linear .2s;
opacity:0.3;
}
div[id$="column"]:hover{
/*
transition for animation in modern browsers
*/
transition: border ease-out .1s,margin ease-out .1s,padding ease-out .1s;
z-index:200;
margin-left:-20px;
padding-left:20px;
border-right:solid 20px;
opacity:1;
}
I have used transition property w/out prefixes. You should go for the one that works for you. Check demo here: http://jsfiddle.net/pixshatterer/Zf6VU/
Here's how you can do it with just CSS: http://jsfiddle.net/4v3GE/5/
NOTE: I added a column container.
.column {
width: 33.33%;
height: 200px;
float: left;
-webkit-transition: width .2s ease-in-out;
-moz-transition: width .2s ease-in-out;
-o-transition: width .2s ease-in-out;
transition: width .2s ease-in-out;
}
.column--left{
background-color: #27ae60;
}
.column--center {
background-color: #e67e22;
}
.column--right {
background-color: #c0392b;
}
/* Hover styling */
.columns:hover .column {
width: 25%;
}
.columns .column:hover {
width: 50%;
}

Categories