The following happens in Safari Version 7.0.1 and IE8.
Steps to reproduce the problem:
http://goo.gl/lP3Ky1
Problem:
The row's hover state remains after dismissing the popup menu, and it will not go away no matter where the mouse is, until you hover over it again.
What is the expected behavior?
The row's hover state should go away after dismissing the popup menu.
Does anybody know a fix for Safari Version 7.0.1 and IE8? I would be okay with some manual way to "untrigger" the css hover state.
This was an interesting issue to solve. And while the solution is a bit hacky, it works. After setting the HTML to "boo" we clone the entire row, insert it, and remove the old one:
$(function() {
$("table").on("click", "td", function() {
$("#menu")
.clone()
.one("click", function() {
var $td = $(this).closest("td"),
$tr = $td.parent();
$td.html("boo");
$tr.clone(/* true */).insertAfter($tr);
$tr.remove();
return false;
})
.appendTo(this)
.show();
});
});
http://jsfiddle.net/ryanwheale/3BUaT/26/
Here is a workaround - http://jsfiddle.net/3BUaT/11/ . After going through many stackoverflow posts, understood that it is not possible to remove css pseudo class from javascript. So definitely a work around was necessary.
I'm using
tr.hovered td {
background-color: lightblue;
}
instead of regular CSS hover state.
The problem is that when you click on an li in menu, it's not exactly triggering mouseout event from CSS in safari. Technically speaking, you did not actually took your mouse out of the element. It's just that the element was removed. This seems like a bug in safari.
Its not browser's fault. Its yours. You are appending the menu list to the row. So the menu list is a child of the row. So if you hover over child, the parent will also be in hover state.
I've updated your jsfiddle:
Jsfiddle;
$(function() {
$("td").on("click", function() {
$("#menu")
.clone()
.one("click", function() {
// this is key to reproduce it.
$(this).closest("td").html("boo");
return false;
})
.appendTo($(this).parent().parent().last())
.show();
});
});
You are appending the div #menu to the td with your function. Now the CSS is going to apply the hover state to the td when you mouseover either the td or the appended menu. Hovering over the menu applies the tr:hover td css, because the menu is now part of the td.
OK, so here is my proposed solution which takes the points from my comments (on Tejas Jayasheel's answer) into account: JSFiddle
The differences are:
#menu is not cloned and not added to the table cell, but instead just repositioned (so the element is also only displayed once)
CSS hover only applied if the 'no-js' class is present in the HTML element (need to be added in your original file)
otherwise hover effect is achieved by applying the class "clicked" to the cell
additionally when menu is already visible the hover effect is "disabled" by toggling another class on all TD's
clicking outside the menu on the already "clicked" cell will close/hide the menu without any further action
.no-js td:hover,
td.hover-enabled:hover,
td.clicked {
background-color: lightblue;
}
What is the expected behavior? The row's hover state should go away after dismissing the popup menu.
Maybe ...! But keep in mind that you are heavily "confusing" the browser by removing the hovered element from DOM. I guess that Safari and IE 8 simply "do not recognize" that former hovered part isn't hovered anymore. This may or may not be a "bug". But at least it is "bad practice/ writing style" and should simply be avoided!
Does anybody know a fix for Safari Version 7.0.1 and IE8? I would be okay with some manual way to "untrigger" the css hover state.
The "fix" is shown in my example. It is a common recommendation to add, remove or toggle classes when it comes to scripting and hover. By doing so you avoid the "problem" at all. Because even in future versions of any browser the behaviour in such cases is "unpredictable" at best.
Related
I'd like to show a modal dialog using a 3D flip effect, exactly like the "3D flip (horizontal)" example in the Effeckt.css library.
However I really don't need the whole Effeckt library, since I just want this one effect. So I've tried to strip out the relevant bits of the library into free-standing CSS and JavaScript.
This is my attempt, but it's not working: http://jsfiddle.net/eJsZx/
As the JSFiddle demonstrates, it's only showing the overlap - not the modal itself. This is odd, because the element inspector suggests that the modal should be visible - it has display: block, visibility: visible and zindex: 2000 (higher than the overlay element).
This is the JavaScript:
$('button').on('click', function() {
$("#effeckt-modal-wrap").show();
$("#effeckt-modal-wrap").addClass('md-effect-8');
$("#effeckt-modal-wrap").addClass("effeckt-show");
$('#effeckt-overlay').addClass("effeckt-show");
$(".effeckt-modal-close, .effeckt-overlay").on("click", function() {
$("#effeckt-modal-wrap").fadeOut();
$('#effeckt-modal-wrap').removeClass("effeckt-show");
$("#effeckt-modal-wrap").removeClass('md-effect-8');
$('#effeckt-overlay').removeClass("effeckt-show");
});
});
What am I doing wrong?
There were a couple of issues in the code.
First, your styles were missing the following:
.effeckt-show .effeckt-modal {
visibility: visible;
}
This was causing the modal to remain invisible.
Once the dialog was visible, the dialog would rotate in just fine, however when being dismissed it would not rotate out. This was due to the following line:
$("#effeckt-modal-wrap").removeClass('md-effect-8');
If you want to remove this class, it would need to be done after the animation is complete otherwise the 3d effect is lost. It doesn't necessarily need to be removed, but that depends on what the rest of your content needs.
The final issue was that the wrapper, on completion of the fadeout, was getting its local style set to display: none. Because of this, the second time showing the dialog would cause it to simply appear because it was moving from display: none to display: block. There are a couple of options here.
Use CSS to animate the fade in/out.
Use window.setTimeout after calling $.show on the element to give the dom a chance to update.
The final result: Working Fiddle
First, please take a look at this pen showing just the menu + the code (preview the menu here).
Coming to the point: In the navbar that you see, clicking on the "Channels" menu shows the menu item sliding out. The problem is, the menu's background doesn't represent its active state (i.e. #fff background and #222 color).
Setting the background-color when the mouse is hovered on the menu, is easy. But this one's tricky. I did try, :active selector to no avail. Any ideas?
SCREENSHOTS:
You could add a class to the li once the menu is open and remove it again.
BTW: :active works for the moment you click on it.
Since it appears as though using jQuery to add/remove a class is the only way to go, I went ahead with it. Here's the code I used.
jQuery(document).ready(function($){
$('.menu-item > a').click(function(){
$(this).toggleClass('selected');
});
});
The code finds the link element a one level down the element with .menu-item class (li in my case), and adds/removes class .selected to the link element.
Here's a fork of the original pen with the menu functioning the way I intended it to. You can preview the new and functioning menu here.
(Full credit to the code provided in this question. More info in the official jQuery documentation.)
UPDATE: You might find this answer extremely helpful (a better, simpler solution).
Example code:
jQuery(document).ready(function($){
$('.collapse').on('show hide', function () {
$(this).siblings("a").toggleClass('selected');
});
});
JSFiddle (The *:focus rule is to illustrate which element is marked as having focus.)
What I'm wondering is why, when I click a menu item, it gets the focus... but clicking a menu item does not give it focus.
What's wrong with the CSS to make it behave this way?
focus is generally only for elements that can receive keyboard or other input, so by this heuristic lis don't qualify. This question has more about it..
In the specs, CSS doesn't explicitly define what elements can be in those states, so it's hard to come up with a set rule for what can and can't be set to focus.
What might work for your purposes is active, which you can view here.
There is a small trick - if you want an item which not have focus anabled by default you should make it tabbable by seting its tabindex="N" - N is a number. As simple as that. if you add tabindex to your clickable items they will get focus when you click. If a tag can be tabbed it have to be able to get focus. Adding tabindex attribute to all nodes of the menu is very simple if you have jQuery loaded:
$(function() {
$('#navbar *').attr('tabindex', '1');
});
end everithing comes in place. You can do it using pure JavaScript of course.
I may be trying to get too fancy on this one.
I have a pair of radio-like buttons in a row with a divider between them with background images. When one of the 'buttons' is clicked, I change its class. The CSS for the divider is keyed to the classes of the buttons on either side to select a background image. I am doing this with CSS 'sibling' selectors.
I have jQuery .click events tied to the 'buttons'. the first thing they do is clear the 'selected' class from the other button and set it on the button that was clicked.
For example, if the LEFT button class='selected' and the RIGHT button is not, the divider between them will get a blue background. Click on the RIGHT button and it gets class='selected' while the LEFT button's class is cleared. The divider turns red.
This works in IE, FF, Safari, etc. But IE is odd (IE7) - it will only reflect the divider background change when I mouse OFF the button I clicked! That is, in the example, the RIGHT button gets class='selected' and changes immediately on the click. But the divider stays blue until I mouse off the button, then it turns red.
The class itself IS changing and the button's appearance changes as a result. It's only the neighboring stuff that doesn't!?
It reminds me of my old VB6 days when you had to periodically call 'DoEvents' to get Windows to make UI changes. Could there be something similar here for IE?
I have no idea why this helps, but adding .hide().show() to a selector that includes the stuff that changed class seems to make it update.
I've read that using setAttribute to change the class will force IE7 to re-render the styles. Try that, and if it still fails, I've solved a similar IE7 problem by rewriting the html, which forced IE7 to re-render (using jquery):
if ($("html").hasClass("ie7")){
var tempHolder = $("#ajaxresults").html();
$("#ajaxresults").html(tempHolder);
}
As for giving the html or body tag the ie7 class, I recommend taking a look at html5boilerplate.com. If for some reason you can't use their solution, the jquery for it is:
if ($.browser.msie){
if ($.browser.version < 8){
$("html").addClass("ie ie7");
}
else {
$("html").addClass("ie");
}
}
Something strange afoot, here:
An instance of Datepicker is showing up in a weird place as a single bar in the upper left hand corner of this page.
I'm using both jQuery UI's Datepicker and Accordion on a page. In the CSS for the UI, the display:none for Datepicker seems to be overridden by the display:block for the Accordion, at least according to Firebug (see img below).
Then, once the Datepicker trigger is clicked in the 'catering/event room' tab (click one of the buttons to show div with Datepicker,) the display:none seems to then work.
Here's what the bad div looks like:
and here's the Firebug panel:
I had the same problem and while some of the above solutions work, the easiest fix of all is to add this to your css:
#ui-datepicker-div {display: none;}
This basically hides the realigned datepicker element when it cannot be binded to an existing invisible element. You hide it, but it will be initialized again when you click on an element that needs to display the datepicker. Upon re-initialization, the datepicker element with id #ui-datepicker-div will have the correct position.
In my case, I use the session "$(document).ready(function(){" of JQuery in my favor.
As I have a JavaScript file that is loaded in all pages of my system, I just added the following line on it.
$('#ui-datepicker-div').css('display', 'none');
For me, it appears a clear and elegant solution because I did not have to change its library.
Best of all, it is working fine on all browsers. :)
The problem could be that you're binding the datepicker to something that is not visible, that would explain the odd positioning (trying to offset from something that doesn't exist will degenerate to offsetting from (0,0)). The datepicker <div> should have at least a table inside it so maybe the datepicker is getting confused and throwing an exception before it finishes initializing itself. When you click on one of the bound inputs, it is probably initializing itself again (or at least properly finishing the initialization) and everything works fine after that.
Try binding the datepicker when the date input becomes visible:
Remove the $(".date_picker").datepicker({ disabled: false });
Add an id="cater" to <input type="text" name="cater"/>
Call $('#cater').datepicker(); when the "reserve event room" button is pressed.
If that works then you'd have to add similar hacks for other datepickers. If it doesn't work then I'm probably wrong. If my guess turns out to be right then you might want to report a bug to the jQuery-UI people.
BTW, in Safari I can only see the first two tabs, I had to switch to Firefox to see the "catering" tab. Oddly enough it works just fine in Chrome. This is probably unrelated but I thought I'd let you know anyway.
The problem is down to the element the datepicker is being binded to not yet being available.
The solution I found was to initalize the datepicker when the actual element has been clicked and then showing it straight after initalization. This ensures the element is available before the datepicker has been binded to it and initalized.
$(function() {
$(".date_input").click(function() {
$(this).datepicker();
$(this).datepicker("show");
});
});
....
<input type="text" class='date_input' />
I had a similar problem in Chrome and I solved it editing jquery-ui1.7.2.custom.css
from:
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
to:
.ui-helper-hidden-accessible { position: absolute; left: -9999999px; }
There's probably too many nines for Chrome.
Try moving the last block to the bottom of the page (right before you close the body tag). You can read more about why you want to do this here:
http://webdevel.blogspot.com/2008/09/place-javascript-code-at-bottom-of-page.html
BTW: Cool idea for a menu. I like it.
Sometimes it has to do with the z-index of another item on the page being higher. Setting the z-index to a very high number solved my issue.
#ui-datepicker-div {z-index:11111;}