I edited my theme so the tags would show on the drop down box(?) at the bottom of the posts (that should be for the source as you can see on the original) but now it doesn't drop slowly like before, it appears instantly, i tried changing all the transition values but it doesn't work... Is there a way to fix it?
• my theme [ http://joltikillua.tumblr.com/ ]
• static preview of the original theme [ http://yukoki-th.tumblr.com/th29 ]
And another question, is there a way to add a "reblog" link on the side of the posts like on this one: [ 34kojin.tumblr.com/ ]? And maybe the option to add the permalink too?! like a small menu floating on the side?!
So my theme would have the tags on the drop down box and the links on the side of the post when on mouseover?
I hope this makes sense, I don't understand much about html/css and my english is bad but i would appreciate any help!
Hard to look through your code.
I've made a small example for you how to correctly make a your expanding box grow with pure CSS animation.
Here: http://jsfiddle.net/okwky7qL/
Please change order of -webkit-transition: ... and so on to the order like I have it here:
#permalink, .preblog {
font-family: bitxmap;
font-size: 10px;
color: {color:permalink text};
background-color: {color:permalink bg};
overflow: hidden;
padding: 0 10px;
-webkit-transition: 0.8s ease-in-out;
-moz-transition: 0.8s ease-in-out;
-o-transition: 0.8s ease-in-out;
transition: 0.8s ease-in-out;
}
#permalink { line-height: 22px;}
.preblog {
padding: 0 0;
height: 22px;
}
{block:if1column}.posts:hover .preblog {height: 55px;}{/block:if1column}
Check your code in the CSS again with the code in my example.
Related
Using hover with transition ease-in for an image, taking cursor out of the image makes it unpleasant
i've tried :after ,but i'm not sure if thats what i need, if it is , i didn't figure it out (i'm a noob)
this is the code i'm using for hovering
.movies img:hover
{
border: 7px solid white;
padding: 0px;
width: 230px;
transition: all 0.1s ease-in;
}
How to add a transition(or something else to smooth it)to make the new border created by the hover disappear with a transtion ?
I guess you can smooth it (as you named it) by throwing out
transition: all 0.1s ease-in;
to your .movies img class, but I'm not sure if that's the solution you're looking for.
Have you got a codepen project for this problem?
Is there a way to collapse the the Bootstrap Collapse plugin from horizontally instead of vertically? Looking at the code this ability doesn't seem to be built in, but I'm hoping I'm just missing something...
Any help will be greatly appreciated. Thanks!
I figured out how to do this very easily without modifying or adding any javascript.
First you define the following CSS after all Twitter Bootstrap CSS:
.collapse {
height: auto;
width: auto;
}
.collapse.height {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height 0.35s ease;
-moz-transition: height 0.35s ease;
-o-transition: height 0.35s ease;
transition: height 0.35s ease;
}
.collapse.width {
position: relative;
width: 0;
overflow: hidden;
-webkit-transition: width 0.35s ease;
-moz-transition: width 0.35s ease;
-o-transition: width 0.35s ease;
transition: width 0.35s ease;
}
.collapse.in.width {
width: auto;
}
.collapse.in.height {
height: auto;
}
Next, on the target element (where you define the .collapse class) you need to add the class .width or .height depending on what property you want to animate.
Finally, you must wrap the contents of the target element and explicitly define its width if animating the width. This is not required if animating the height.
You can find a working example here -> http://jsfiddle.net/ud3323/ZBAHS/
With bootstrap 3.0.0, you just need to add the width class to the target element and then the following css if you want it to animate.
.collapse.width {
height: auto;
-webkit-transition: width 0.35s ease;
-moz-transition: width 0.35s ease;
-o-transition: width 0.35s ease;
transition: width 0.35s ease;
}
Updated 2019
Bootstrap 4.x
Bootstrap 4 horizontal collapse transition is basically the same, expected the visible class is now .show instead of .in. It also may help to specify display:block since many elements are now display: flex.
.collapse.show {
visibility: visible;
}
4.x horizontal collapse demo
4.x sidebar demo
Also see:
Bootstrap horizontal menu collapse to sidemenu
How to slide nav bar from left instead from top?
Bootstrap 3.3.7 (original answer)
None of the existing answers worked for me. To make the collapse animation horizontal in the latest versions you need to set both transition to width, and also use visibility.
.collapse {
visibility: hidden;
}
.collapse.in {
visibility: visible;
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition-property: height, visibility;
transition-property: height, visibility;
-webkit-transition-duration: 0.35s;
transition-duration: 0.35s;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
.collapsing.width {
-webkit-transition-property: width, visibility;
transition-property: width, visibility;
width: 0;
height: auto;
}
3.x demo
In my version of bootstrap 3 (using LESS), I simply had to include this in my global less file:
.collapsing.width {
width: 0;
height: auto;
.transition(width 0.35s ease);
}
The extra class has to be width since the collapse.js looks for this class for the transition. I tried everyone else's suggestions, but they didn't work for me.
It doesn't appear to be an option for that particular plugin. It looks like you may need to modify it or hook into it somehow to get it to work that way...
After looking at the JS file for a bit I noticed a couple things. First thing is that it looks like it might be using bootstrap-transition.js ,which appears to be using CSS3 transitions. So it might be possible to write a new transition. I am not 100% certain if that is how it is working though.
Option One
My suggestion would be to either poke around in the bootstrap-collapse.js plugin file for a while and see if you can figure out how it is working.
In particular I would look at this part... bootstrap-carousel.js
this.$element[dimension](0)
this.transition('addClass', $.Event('show'), 'shown')
$.support.transition && this.$element[dimension](this.$element[0][scroll])
It looks like .transition is a callback from bootstrap-transition.js
Option Two
My second suggestion would be to just write something of your own.
My Answer
And finally my answer is that from looking at the bootstrap documentation it doesn't appear to be an option.
Some additional info:
This website seems to be doing similar stuff with CSS3 transitions.
http://ricostacruz.com/jquery.transit/
i think translateX(-100%) and translateX(0) might be the way to go rather than animating width as uses hardware acceleration correctly when supported
Good answers here, but I had to make some modifications for a cleaner, two-way transition:
.collapse.width, .collapsing {
height: 25px; /* depending on your element height */
overflow: hidden;
-webkit-transition: width 0.25s ease;
-moz-transition: width 0.25s ease;
-o-transition: width 0.25s ease;
transition: width 0.25s ease;
}
Setting a fixed height also helped prevent page "jump" as the element collapsed and expanded.
Trying to make userface more userfriendly i want to implement following:
I have a table with some alert above it. Take a look at this example
When I close alert table 'jumps' to the top. I want it to slide smoothly. I want to use pure css. I've read about transition and animation but i think that's not what i need, or maybe i am wrong.
Any ideas? Thanks in advance!
K, so you can do it with pure css. Bootstrap removes the in class from the alert at the beginning of the fade out. We can use that to apply css to the alert before it's removed from the page.
.fade {
max-height: 400px;
-webkit-transition: .3s;
-ms-transition: .3s;
transition: .3s;
}
.fade:not(.in) {
max-height: 0;
}
See it in action: http://jsfiddle.net/McHUc/92/
I have a table, making use of the following CSS and HTML:
.price {
position:relative;
display:block;
text-align:center;
}
.detail {
background: none repeat scroll 0 0 #EEEEEE;
color: #333333;
min-width:200px;
width:auto;
height: 0;
overflow:hidden;
left: 0;
position: absolute;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.price:hover > .detail, .price:hover > .notmuchdata > .detail {
display:block;
overflow:auto;
left:0px;
width: 120px;
height:60px;
z-index:10;
}
<table>
<tr>
<td class="price" style="background-color:white;text-decoration: line-through">1.56
<div class="detail">1.7% # 1.6</div></td>
</tr>
</table>
The desired behaviour of this code is that when the user moves the mouse over the crossed-out numerical value, a div appears with further data.
In most cases, this code seems to function exactly as expected. However, occasionally a user reports that mouseovers are having no effect - the div is not appearing.
It has been difficult to replicate the issue successfully. However, on one occasion I was able to open up Chrome Developer Tools and inspect the cell. On this occasion, I used 'Force Element State' on the cell and set it to ':hover'. Having done so, the hidden div did appear.
So I suppose my general question is, why might the :hover pseudo-class not work (but only occasionally)? And yet demonstrate the expected behaviour when using the Dev Tools to force the hover state?
EDIT 1
In trying to make the problem as concise and clear as possible, I did not include the additional detail that the page makes use of AJAX requests in another area of the page. These have occasionally not returned the pure JSON they were intended to, causing a javascript error to appear on the console.
Difficult to say as I cannot reproduce it, but I would start by eliminating all non-essential CSS declarations (and making a class for the strikethrough -- though it's probably not the issue):
.price {
text-align: center;
}
.strike {
background-color: white;
text-decoration: line-through;
}
.detail {
background: none repeat scroll 0 0 #EEEEEE;
color: #333333;
min-width: 200px; /* <-- why min-width:200px here, but width: 120px on hover? */
height: 0;
overflow:hidden;
left: 0;
position: absolute;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.price:hover .detail {
width: 120px;
height: 60px;
}
<table>
<tr>
<td class="price strike">1.56
<div class="detail">1.7% # 1.6</div></td>
</tr>
</table>
My Original Question
In my original question above, I tried to simplify the details of the issue as much as possible, in the interests of clarity.
More Details
However, I have now added the fact that AJAX is made use of elsewhere in the page.
I think this may be relevant because of the 'occasional' nature of the problem...
The AJAX request is used to call a PHP page that is meant to send back pure JSON, which is then processed in order to display a graph on the page.
Usually this worked as normal, but occasionally there was an error on this php page, and instead of sending back pure JSON, the AJAX request sent a string that included a warning message. This resulted in an error message appearing in the 'JavaScript Console' part of Chrome Developer Tools (and of course the graph not displaying as it should).
I had discounted this behaviour as not being relevant to my issue above, because when I noticed it happening, the hovers seemed to be working normally. That is, it only seemed to be affecting the graphs.
However, as I have said, the 'occasional' nature of this problem makes me wonder if there is in some way a connection.
The Cause?
My theory is that when problems were encountered in the JavaScript code (due to the AJAX request sometimes not returning pure JSON), this in turn caused problems in executing the CSS hover behaviour that should have been activated when the mouse was over the cell.
Specific Actions Taken
So the action I have taken is the following:
I have added error_reporting(E_ERROR); to the beginning of the php file that provides the response to the AJAX request. This should hopefully ensure that the file only ever sends back the pure JSON that my page expects.
In the interests of completeness, I feel I should also mention that I have set the z-index of the div when in hover 'mode' to a large number (100), although I am doubtful that this should make a difference.
Did It Fix the Problem?
As noted above, the 'hard to reproduce' nature of this problem makes it hard to know whether this action has succeeded, but it has been a few days now and the problem has not been reported again.
Alright Google isn't helping me out much here.
The aim of the game is to have a button, which is a custom png, and upon mouse rollover it 'slides upwards', remaining in the same spot but transitioning to the rollover by means of sliding.
Preferably I'd like to get this sorted using CSS3, the page already has a bit of an OTT fest of JQuery.
Currently I've only managed to get it to slide from the left side. Downwards is fine too.
Code is about as simple as it comes, the HTML looks like this (Just a basic DIV):
<div id="Abutton"><a draggable="false" title="A button n' stuff"></a></div>
The CSS:
#Abutton a {
background: url(mediafolder/Abutton.png) no-repeat 0% 0px;
display: block;
height: 32px;
width: 86px;
cursor: pointer;
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
-webkit-transition: background .25s ease-in-out;
}
#Abutton a:hover {
background-position: -86px 0%;
}
(Plus a further # for the positioning and size etc..)
If it makes for any complications the button is also tied to a JQuery file that upon clicking, smooth scrolls to a different point in the page (Props to the awesome chap that helped me out with that last night!).
Thanks in advance!
I think what you're asking is a slot machine display type feel?
Just use an image sprite, which you pretty much already are trying to do, and put a css animation on it, and it will look what you want (which i think is what you want?) Best of luck
.animate {
-webkit-transition: all 0.250s -in-out;
-moz-transition: all 0.250s ease-in-out;
-o-transition: all 0.250s ease-in-out;
transition: all 0.250s ease-in-out;
}