I have made bootstrap accordion for my website. Everything works perfect except in Safari.
I'm trying to figure out what's wrong.
If you are running Safari you can see the problem here
Also, the small piece of css code that I added to this accordion is:
.collapsing {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
-webkit-transition-duration: .35s;
-o-transition-duration: .35s;
transition-duration: .35s;
-webkit-transition-property: height, visibility;
-o-transition-property: height, visibility;
transition-property: height, visibility;
}
The problem wasn't in above code because I tested accordion without it and still I had the same problem in Safari.
Any kind of help will be appreciated.
.collapse {
-webkit-transition: height 0s ease;
-moz-transition: height 0.35s ease;
-o-transition: height 0.35s ease;
transition: height 0.35s ease;
}
Related
Css Transition effects on my website don't work in safari (tested on latest version). And transition is working well in others browser tested in Chrome, firefox, and Opera.
My code is the following:
.navbar-inverse ul a{
overflow: hidden;
-webkit-transition: color 0.5s;
-o-transition: color 0.5s;
-moz-transition: color 0.5s;
transition: color 0.5s;
}
.navbar-inverse ul a::before{
-webkit-transition: top 0.5s;
-o-transition: top 0.5s;
-moz-transition: top 0.5s;
transition: top 0.5s;
}
How to fix it? After that transition works in safari too.
The problem is that you placed the transition property for the element with the pseudo element before. Try placing the transition property for the element itself. This is what I mean:
.navbar-inverse ul a{
overflow: hidden;
-webkit-transition: color,top 0.5s;
-o-transition: color,top 0.5s;
-moz-transition: color,top 0.5s;
transition: color,top 0.5s;
}
I am creating a monotone Wordpress blog where images and iframes (Youtube) change from monotone to colour on hover.
http://amitoooldforclubbing.co.uk/
I've had no problem for the images:
img {
-webkit-filter: grayscale(100%);
z-index: -9999999999999999999999999px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
img:hover {
-webkit-filter: grayscale(0%);
z-index: -9999999999999999999999999px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
This works fine.
However when I try to do the same for iframes, it doesn't work. Changing it to greyscale does - but the hover effect does not work.
Any idea?
iframe {
-webkit-filter: grayscale(100%);
z-index: -9999999999999999999999999px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
iframe:hover {
-webkit-filter: grayscale(100%);
z-index: -9999999999999999999999999px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
Thanks
James
You simply forgot to set the hover filter grayscale on the iframe back to 0: -webkit-filter: grayscale(0%);. Tested it out on your site and it works now. However you might want to add a class that sets the grayscale to 0 on click as well since you lose the iframe color while the video is playing on hover out. Also, just in case you might not know -webkit-filter is only used by some modern browsers: http://caniuse.com/#feat=css-filters
I would create another empty div inside your iframe, color it grey with opacity and position it absolute top bottom left and right 0, so it's the same size as your iframe. Then, use javascript to change the div on mouseenter and mouseleave to display none, display block respectivly. Yes, it required another DOM element, but it's more widely supported than grayscale()
so something like this:
note: if the div makes the video too hard to see you can do the same thing, with jquery, just replace display: none, and dipslay: block with your greyscale() and axe the extra div tag
HTML
<iframe>
<div>
</div>
</iframe>
CSS
iframe{
position: relative; //this is important so the position absolute references the iframe
}
div{
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
}
Jquery
document.ready(function(){
$('iframe').mouseenter(function(){
$('div').css('display', 'none');
});
$('iframe').mouseleave(function(){
$('div').css('display', 'block');
});
});
here's the documentation for mouseenter and mouseleave
I have a website where I am working with a Wordpress theme that I am trying to modify. If you go the site
http://66.147.244.132/~dokkanca/
and scroll down to where it says, "Ramadan specials through August 10th", you'll notice that the title bar which is in the form of a ribbon wraps to the next line. I don't want this, but I can't figure out how to prevent this. I've spent a lot of time trying to change parameters within my relevant CSS code but unfortunately I have not been successful. Can someone please show me how to correct this so that the ribbon around the title goes straight across, and NOT wrap to the next line? In my wordpress options, this title within the ribbon is referred to as, "Bottom slider title". Below is my relevant CSS code:
.home-title{width:265px;color:#ffffff;font-family:'Merienda One', sans-serif;font-size:18px;text-shadow: 0 1px 0 rgba(30, 30, 30, 0.6);position:relative;padding:0px 0px 4px 10px;margin:0;}
.home-img{margin:10px 0px 10px 0px;display:block;overflow: hidden;border:2px solid #e9e9e9;}
.home-img .mask{width: 100%;height:100%;position: absolute;overflow: hidden;top:0;left:0;}
.home-img span.link-img {background:url("images/link-img.png") no-repeat 0 0;
display:block;
width:31px;
height:37px;
text-indent:-9999px;
margin-left:45%;
-webkit-transform: translateY(-160px);
-moz-transform: translateY(-160px);
-o-transform: translateY(-160px);
-ms-transform: translateY(-160px);
transform: translateY(-160px);
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
}
.home-img:hover span.link-img{-webkit-transform: translateY(45px);
-moz-transform: translateY(45px);
-o-transform: translateY(45px);
-ms-transform: translateY(45px);
transform: translateY(45px);
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;}
.home-img, .post_image img, .img-left-post img{-webkit-transition: border-color 0.5s ease;-moz-transition: border-color 0.5s ease;-o-transition: border-color 0.5s ease;transition: border-color 0.5s ease;display: block;position: relative;}
.home-img:hover, .post_image:hover img, .img-left-post img:hover{-webkit-transition: border-color 0.5s ease;-moz-transition: border-color 0.5s ease;-o-transition: border-color 0.5s ease;transition: border-color 0.5s ease;}
.home-img .mask, .post_image .mask2{background-color: rgba(0, 0, 0, 0.2);-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.3s ease-out 0.3s;-moz-transition: all 0.3s ease-out 0.3s;-o-transition: all 0.3s ease-out 0.3s;-ms-transition: all 0.3s ease-out 0.3s;transition: all 0.3s ease-out 0.3s;}
.home-img:hover .mask, .post_image:hover .mask2{-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);opacity: 1;-webkit-transition: all 0.3s ease-out 0s;-moz-transition: all 0.3s ease-out 0s;-o-transition: all 0.3s ease-out 0s;-ms-transition: all 0.3s ease-out 0s;transition: all 0.3s ease-out 0s;}
.home-bottom{margin-top:30px;}
.text-right{float:right;display:block;}
.home-bottom .home-title{margin-bottom:40px;}
.home-time{font-size:11px;color:#858585;font-family:Georgia, "Times New Roman", Times, serif; font-style:italic;}
.home-post-title{padding:0;margin-bottom:5px;}
.home-post-title a{font-size:14px;}
Thanks in advance to all who reply.
It's wrapping because you set .home-title to have width:265px;. Increase the value and it will solve your problem.
Edit: to not disturb the other elements with .home-title, see if you can assign that element a second class, with a new width value, > 265px.
Yet another option would be a rule like: .container .span8 .home-title {width: put new width here}
I've started using transitions to "modernise" the feel of a site. So far, :hover transitions are working great. Now I'm wondering if it's possible to trigger a transition based on other things, such as when a class changes.
Here's the relevant CSS:
#myelem {
opacity: 0;
display: none;
transition: opacity 0.4s ease-in, display 0.4s step-end;
-ms-transition: opacity 0.4s ease-in, display 0.4s step-end;
-moz-transition: opacity 0.4s ease-in, display 0.4s step-end;
-webkit-transition: opacity 0.4s ease-in, display 0.4s step-end;
}
#myelem.show {
display: block;
opacity: 1;
transition: opacity 0.4s ease-out, display 0.4s step-start;
-ms-transition: opacity 0.4s ease-out, display 0.4s step-start;
-moz-transition: opacity 0.4s ease-out, display 0.4s step-start;
-webkit-transition: opacity 0.4s ease-out, display 0.4s step-start;
}
The JavaScript to trigger the change is:
document.getElementById('myelem').className = "show";
But the transition doesn't seem to be happening - it's just jumping from one state to the other.
What am I doing wrong?
It does work when you remove the display properties.
#myelem {
opacity: 0;
transition: opacity 0.4s ease-in;
-ms-transition: opacity 0.4s ease-in;
-moz-transition: opacity 0.4s ease-in;
-webkit-transition: opacity 0.4s ease-in;
}
#myelem.show {
opacity: 1;
transition: opacity 0.4s ease-out;
-ms-transition: opacity 0.4s ease-out;
-moz-transition: opacity 0.4s ease-out;
-webkit-transition: opacity 0.4s ease-out;
}
JSFiddle.
The reason for this is that only CSS properties with numbers can be transitioned. What do you think the "50% state" should be between "display: none;" and "display: block;"? Since that can't be calculated, you can't animate the display property.
You cannot use the display property for transitioning between states.
The answer provided by #MarcoK including the comments shows already the right direction. Setting display property hinders transition.
A better practice is though to put the unprefixed (standards) version after the browser-vendor prefixed ones, in order to be future-proof. The latter properties overwrite the former.
Other improvements:
As #Charmander pointed out, -ms-transition isn't supported by any Internet Explorer
There's also Opera's vendor prefixed -o-transition for Op 10.5-12 & Op Mobile 10-12, which currently is probably supported by less than .1% of global browser. I'll put it in for completion
CSS:
#myelem {
opacity: 0;
-webkit-transition: opacity .4s ease-in;
-moz-transition: opacity .4s ease-in;
-o-transition: opacity .4s ease-in;
transition: opacity .4s ease-in;
}
#myelem.show {
opacity: 1;
-webkit-transition: opacity .4s ease-out;
-moz-transition: opacity .4s ease-out;
-o-transition: opacity .4s ease-out;
transition: opacity .4s ease-out;
}
It is possible to animate show and hide elements in css, just instead of:
display: none;
/* and */
display: block;
use:
overflow: hidden;
max-height: 0;
/* and */
max-height: 9999999px;
Since you replace this properties, you are able to animate any css value with transition.
working example:
https://jsfiddle.net/utyja8qx/
I've encountered a problem with CSS transitions. I'm designing a CSS gallery for my portfolio and I need my images to fade in on hover.
I've been playing around with this for over an hour and I was hoping someone could point me into the right direction.
Here is a simplified version to it with JSFiddle
I recommend you to use an unordered list for your image gallery.
You should use my code unless you want the image to gain instantly 50% opacity after you hover out. You will have a smoother transition.
#photos li {
opacity: .5;
transition: opacity .5s ease-out;
-moz-transition: opacity .5s ease-out;
-webkit-transition: opacity .5s ease-out;
-o-transition: opacity .5s ease-out;
}
#photos li:hover {
opacity: 1;
}
This will do the trick
.gallery-item
{
opacity:1;
}
.gallery-item:hover
{
opacity:0;
transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
-webkit-transition: opacity .2s ease-out;
-o-transition: opacity .2s ease-out;
}