I need some help with this. Basically I’ve created a menu bar using a combination of JQuery and css and it's not collapsing or hiding the way it should in Safari (I'm using 6.1.6).
I'll start with the code first
CSS Code
#menuHolder
{
width:200px;
height:30px;
background:#CCC;
position:fixed;
top:10px;
border: thin ridge #333;
}
#menuItem1
{
margin:0.15em;
display:table;
float:left;
width:150px;
height:25px;
background:#666;
}
#menuDiv
{
background-color:#FFF;
height:100px;
width:150px;
opacity:1;
visibility:hidden;
-webkit-transition: all 0.5s ease-out-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
position:absolute;
top:34px;
margin-left:.1em;
}
#menuItem1:hover
{
background:#06F;
}
#menuItem1:hover #menuDiv
{
opacity:1;
visibility:visible;
background-color:#F00;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#menuContents
{
font-size:10px;
}
.ui-menu
{
width: 150px;
}
HTML
<body>
<div id="menuHolder">
<div id="menuItem1">
Menu 1
<div id="menuDiv">
<ul id="menuContents">
<li>Main Menu 1
<ul>
<li>Mid Menu 1
<ul>
<li>Sub Menu 1.1</li>
<li>Sub Menu 1.2</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
Javascript
$(function() {
$( "#menuContents" ).menu();
});
The Issue
As you can see from the code, when the mouse pointer goes to the menuItem1 div it will highlight the div and unhide the menuDiv that holds the jQuery menuContents. This works all fine and well, until you click on any of the submenu items.
In other browsers (Opera, Mozilla, Chrome) when you click the submenus, the menus collapse normally, menuDiv fades away, and menuItem1 unhighlights. In Safari, the mid and submenus fade away, but menuDiv never fades away, and menuItem1 remains highlighted as if there is still a mouse pointer triggering the css.
I am unsure if this is a CSS issue, a jQuery issue, or a browser version issue. Any help or guidance would be appreciated.
Looks like the issue was solved when I upgraded to Yosemite which means it was a Safari issue after all. All the menus collapse normally with no issues. –
Related
I have an image slider, it's going to the next/previous image fine.
The problem is that when you click the previous image button, the animation takes longer than when you click in the next image button, and the animation is the same for both!Can you tell me why is this happening?
JSFIDDLE:
http://jsfiddle.net/v6d16jza/
HTML:
<div id="slider">
<div id="setas-navegacao" style="position:absolute;height:100%;width:100%;">
<i class="sprite-slider_ant" style="z-index:1;position:absolute;left:1.7%;top:50%;color:#ffa500;font-size:15pt;"><</i>
<i class="sprite-slider_prox" style="z-index:1;position:absolute;right:68.5%;top:50%;color:#ffa500;font-size:15pt;">></i>
</div>
<div class="slide slide_ativo" style="background-image:url('http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images-540x303.jpg');">
</div>
<div class="slide" style="background-image:url('http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg');">
</div>
<div class="slide" style="background-image:url('http://7-themes.com/data_images/out/42/6914793-tropical-beach-images.jpg');">
</div>
</div>
CSS:
html{
overflow: hidden;
width:100%;
}
div#slider{
position:relative;
overflow: hidden;
width: 300%;
height:300px;
}
.slide{
position:relative;
width:33.3%;
height:100%;
float:left;
background-size: cover;
-webkit-transform: translateZ(0);
-webkit-transition: margin-left 0.9s ease-out;
-moz-transition: margin-left 0.9s ease-out;
-o-transition: margin-left 0.9s ease-out;
transition: margin-left 0.9s ease-out;
}
jQuery:
$(".sprite-slider_prox").on("click", function(){
if($(".slide_ativo").next().is(".slide")){
$(".slide_ativo").css("margin-left", "-100%").removeClass("slide_ativo").next().addClass("slide_ativo");
}
});
$(".sprite-slider_ant").on("click", function(){
if($(".slide_ativo").prev().is(".slide")){
$(".slide_ativo").removeClass("slide_ativo").prev().css("margin-left", "0%").addClass("slide_ativo");
}
});
You are adding more margin than it's actually needed to shift the image to the left.
You can see what's happening with the Chrome inspector, hovering the images while they change (raising the animation time to some higher value will help you). You will notice that the delay before the slider starts moving back is spent removing the extra margin.
I recorded a video of the debugging.
If you change:
.css("margin-left", "-100%")
to:
.css("margin-left", "-33.333%")
the animation will work correctly (see the fiddle)
Also, note that I had to remove the padding and margin from html and body elements to achieve the correct shifting.
I have a similar issue as CSS Transition not firing when adding class to body (Firefox) but I can seem to find a way to solve it targeting the element in different ways or removing classes.
Here is what I have:
Markup:
<div class="ball b40 first">
<a class="ffx-fx" href="javascript:void(0)">
</a>
</div>
css:
.ffx-fx {
-webkit-transition: all 1.5s ease-in-out;
-moz-transition: all 1.5s ease-in-out;
-o-transition: all 1.5s ease-in-out;
-ms-transition: all 1.5s ease-in-out;
transition: all 1.5s ease-in-out;
}
.b40 a {
width:220px;
height:220px;
background: url(../images/temp/1_a.jpg) center center;
background-size: 100% 100% !important;
}
.b40 .b40-rotated {
width:220px;
height:220px;
background: url(../images/temp/1_b.jpg) center center !important;
}
js:
window.setInterval(function() {
$( ".b40 .ffx-fx" ).toggleClass( "b40-rotated" );
}, 5000);
I don't believe you can switch out background-images with transitions. At least I haven't tried it. How I usually handle this situation is have two inner divs--one with the on hover class and one with the off class. Then on hover, I change opacity. Opacity transition works. Sooo something like this...
HTML
<div class="container">
<a href="">
<div class="off_state"></div>
<div class="on_state"></div>
</a>
</div>
CSS
.container{position:relative;}
.off_state, .on_state{
position:absolute;
top:0;
left:0;
transition: all 1s;
}
.off_state, .container:hover .on_state{opacity:0.0;filter:alpha(opacity=0);}
.container:hover .on_state{opacity:1.0;filter:alpha(opacity=100);}
It's a rough version, but that's how I've always done it.
NOTE: jQuery UI also has the ability to add a class slowly. You can view it here: http://jqueryui.com/addClass/. It would probably be easier to use.
I have an animation on my page that slides a div into the screen, pushing the current div in the screen out. While it is animating, an ajax request is sent to grab a page and put it into the div.
For some reason, my code works OK on Firefox but stutters using Chrome.
Here is the page: (try clicking the left eye)
http://www.uvm.edu/~areid/homesite/index.html
What I want to do (as per recommendation of #jfriend00) is add an event listner to the slideOut() function to make it so the ajax request won't start until the slideOut() has finished. Separating the ajax call and the animation should lessen the load of the code and therefore prevent Chrome from stuttering as it does now.
here is my slide out function:
JAVASCRIPT:
function SlideOut(element) {
var opened = $(".opened"),
div = $("#" + element),
content = $("#content");
opened.removeClass("opened");
div.addClass("opened");
content.removeClass().addClass(element);
}
CSS:
#content {
margin: 0 auto;
position:relative;
left:0;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
transition: all 0.9s ease;
}
#content.right {
left:-1150px;
}
#content.left {
left:1150px;
}
#content.bottom {
top:-300px;
}
#content.top {
top:1100px;
}
#content div {
cursor:pointer;
#left {
padding:0;
margin:0;
position:absolute;
top:0;
left:-1800px;
height:100%;
width:1750px;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
transition: all 0.9s ease;
background-color: #1a82f7;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, left top, right top, from(#C6421F), to(#2F2727));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(right, #C6421F, black);
/* Firefox 3.6+ */
background: -moz-linear-gradient(right, #C6421F, black);
/* IE 10 */
background: -ms-linear-gradient(right, #C6421F, black);
/* Opera 11.10+ */
background: -o-linear-gradient(right, #C6421F, black);
}
#left.opened {
left:0;
}
#left-content{
margin-left:70px;
position:relative;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
transition: all 0.9s ease;
}
HTML:
<html>
<body>
<div id="fullContainer">
<div id="right">
<div class="return-right">
<p>click me</p>
</div>
<div id="resume">
</div>
</div>
<div id="left">
<div class="return-left">
<p>click me</p>
</div>
<div id="left-content">
</div>
</div>
<div id="top">
<div class="return">
<p>click me</p>
</div>
</div>
<div id="bottom">
<div class="return">
<p>click me</p>
</div>
</div>
</div>
<div id="centerContainer">
<div id="relativeContainer">
<div id="content" class="center">
</div>
</div>
</div>
</body>
</html>
It might be best just to use firebug on the actual site.
Thanks!
You're going to want to use the transitionend event to track when #left's transitions complete. You will have to check for browser prefixes which I've done below. After that we can use the designated prefix and listen. Once fired, you can make your ajax call.
Javascript:
var myDiv, transition;
myDiv = document.getElementById('left');
if('ontransitionend' in window) {
// Firefox
transition = 'transitionend';
} else if('onwebkittransitionend' in window) {
// Chrome/Saf (+ Mobile Saf)/Android
transition = 'webkitTransitionEnd';
} else if('onotransitionend' in myDiv || navigator.appName == 'Opera') {
// Opera
// As of Opera 10.61, there is no "onotransitionend" property added to DOM elements,
// so it will always use the navigator.appName fallback
transition = 'oTransitionEnd';
} else {
// IE - not implemented (even in IE9) :(
transition = false;
}
myDiv.addEventListener(transition, function(){
//make ajax call here.
}, false);
I'm using the following code.
By clicking on div id="popUpPane", the div and it's childs should appear and slowly fade in.
By clicking on the div again, it should slowly fade out and then disappear.
Firefox and Chrome (which is webkit too) behave that way and I know Safari did in an earlier version, too. But right know on Safari and on Safari Mobile nothing happens at all when I click on "popUpPane".
Is this a bug in Safari or is there something I could change to come back to the intended behaviour?
One addition: If I set -webkit-transition to -webkit-transition: opacity .5s ease-in-out; it works fine but the transition only appears on the first click. There's no transitions after that first one... If I delete the opacity-part in the java-script the opo-up works but there's no transition.
All other transitions on my site are working. But they all use only opacity and no visibility.
Here's my code:
CSS:
#popUpPane {
white-space:normal;
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
text-align:center;
vertical-align:middle;
visibility:hidden;
z-index:90;
}
#greyOut {
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
background-color:#000;
opacity:0;
}
#popUpPicCanvas {
position:relative;
top:50%;
margin-top:-325px;
display:inline;
opacity:0;
z-index:100;
}
.fade {
-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;
}
HTML:
<div id="popUpPane" onClick="noPopUp()">
<div id="greyOut" class="fade"> </div>
<canvas id="popUpPicCanvas" width="1000" height="650" title="Bastian Beuttel" class="fade"></canvas>
</div>
Javascript:
var popUpPane = document.getElementById("popUpPane"),
greyOut = document.getElementById("greyOut"),
popUpPicCanvas = document.getElementById("popUpPicCanvas"),
popCanvasContext = popUpPicCanvas.getContext("2d");
var doPopUp = function(source,x,y){
var popUpPic = document.getElementById("pic"+source);
popCanvasContext.canvas.width = x;
popCanvasContext.canvas.height = y;
popCanvasContext.drawImage(popUpPic, 0, 0,x,y);
popUpPane.style.visibility = "visible";
greyOut.style.opacity = "0.7";
popUpPicCanvas.style.opacity = "1";
};
var noPopUp = function(){
greyOut.style.opacity = "0";
popUpPicCanvas.style.opacity = "0";
popUpPane.style.visibility = "hidden";
};
I hope someone can help me.
Thanks for your responds!
Yep, there is a bug in mobile Safari with simultaneous transition for opacity+visibility.
You can fix it using something except for visibility: in your case setting the width and height to 0 would help. However you must add the delay, so they would change not instantly.
Here is a dabblet with the working example: http://dabblet.com/gist/1642110
/**
* Delayed alternative for visibility
*/
a {
display: inline-block;
background: #888;
color:#FFF;
padding: 1em;
}
div {
width: 100px;
height: 100px;
background: lime;
transition: opacity 1s;
}
a:hover+div {
width: 0;
height: 0;
opacity: 0;
transition: width 0s 1s, height 0s 1s, opacity 1s;
}
Thank you!
Since this bug is now removed from the latest releases of webkit the problem is gone for safari and chrome.
i started to have problems since the position of my div also was transitioned so I wrote it like this:
.dofade {
-webkit-transition: visibility .5s ease-in-out, opacity .5s ease-in-out;
-moz-transition: visibility .5s ease-in-out, opacity .5s ease-in-out;
-o-transition: visibility .5s ease-in-out, opacity .5s ease-in-out;
transition: visibility .5s ease-in-out, opacity .5s ease-in-out;
}
My problem..
I have a number of images (inside hyperlinks), and I want each to darken on mouseover (i.e. apply a black mask with high opacity or something), and then go back to normal on mouseout . But I can't figure out the best way to do it.
I've tried..
Jquery color animate and some javascript references.
Setting the opacity of the image with javascript.
I don't want..
Image start at 80% opacity then go to 100% on mouseover (that's easy).
To swap between 2 images (one light & one dark), forgot the mention this sorry..
To reiterate..
I want in image (inslide a hyperlink) to darken on mouseover and then lose its darkness on mouseout.
Thoughts?
UPDATE :
This is my progress from suggestions. Looks fine in IE8, but not in FF3
<html>
<body>
<a href="http://www.google.com" style="background-color:black; opacity:1;filter:alpha(opacity=100)">
<img src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="200"
style="opacity:1;filter:alpha(opacity=100)" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60" />
</a>
</body>
</html>
Thoughts?
-- Lee
ANSWER
I'm going with this (seems to work in IE8 & FF)
<html>
<head>
<style type="text/css">
.outerLink
{
background-color:black;
display:block;
opacity:1;
filter:alpha(opacity=100);
width:200px;
}
img.darkableImage
{
opacity:1;
filter:alpha(opacity=100);
}
</style>
</head>
<body>
<a href="http://www.google.com" class="outerLink">
<img src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="200"
class="darkableImage" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60" />
</a>
</body>
</html>
Or, similar to erikkallen's idea, make the background of the A tag black, and make the image semitransparent on mouseover. That way you won't have to create additional divs.
CSS Only Fiddle (will only work in modern browsers)
JavaScript based Fiddle (will [probably] work in all common browsers)
Source for the CSS-based solution:
a.darken {
display: inline-block;
background: black;
padding: 0;
}
a.darken img {
display: block;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
a.darken:hover img {
opacity: 0.7;
}
And the image:
<a href="http://google.com" class="darken">
<img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200">
</a>
Make the image 100% bright so it is clear.
And then on Img hover reduce it to whatever brightness you want.
img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
img:hover {
-webkit-filter: brightness(70%);
filter: brightness(70%);
}
<img src="http://dummyimage.com/300x150/ebebeb/000.jpg">
That will do it,
Hope that helps
I realise this is a little late but you could add the following to your code. This won't work for transparent pngs though, you'd need a cropping mask for that. Which I'm now going to see about.
outerLink {
overflow: hidden;
position: relative;
}
outerLink:hover:after {
background: #000;
content: "";
display: block;
height: 100%;
left: 0;
opacity: 0.5;
position: absolute;
top: 0;
width: 100%;
}
How about this...
<style type="text/css">
div.frame { background-color: #000; }
img.pic:hover {
opacity: .6;
filter:alpha(opacity=60);
}
</style>
<div class="frame">
<img class="pic" src="path/to/image" />
</div>
Put a black, semitransparent, div on top of it.
Create black png with lets say 50% transparency. Overlay this on mouseover.