I've made a tabs set so that there is one last tab with a simple label like this: + (which means "add new tab"). When the user clicks on this tab, a new one must be created. Everything works right, except that at the end, the "add new tab" tab is selected, even after selecting the new added tab just after being added. I want to prevent it from being selected at the end.
/**
* Callback for the select event of the tabs
*/
selectTab = function(event, ui) {
// Just to check whether the clicked tab is the one to add a new tab
I'm trying to create a hover effect on a world map. It works ok (except for some small glitch I mention later) in both Chrome and Firefox. However it doesn't in IE, at least in IE8. The hover effect, replaced later with mouseenter/mouseleave getting the same results, creates an annoying blinking undesired effect.
Why is this happening in IE while it doesn't in FF/Chrome? and what could I do to fix it?
You can browse the involved code, which is in the same html document. Anyway I'm putting it here for clarity:
var imgTag;
$(document).ready(function() {
imgTag = $('#mapamundi img');
$('#mapamundi .area').each(function() {
$(this).mouseenter(
function() {
var region = $('#mapamundi a#region-' + $(this).attr('id'));
As, you will check, I'm using an HTML map to trigger the events, and one transparent png (png-8 since png-24 looked awfully in IE) per continent, placed over its location on the map image, and initially hidden. When the mouse enters an area, its corresponding png is fade in just after all the png's are faded out.
It seems an easy process. There is something I'm doing wrong though.
Even in Chrome/FF I see that sometimes the mouseleave effect doesn't work as expected.
I'm creating the backend part of a slideshow of pictures. It has no slide initially, and the form at first has to display the fieldset for just one slide.
There is a button for "add new slide" that will display more fieldsets for new slides. So I want to copy the original one and append it to the container.
The problem is that all the fields have an index, in order to identify which slide they belong to.
What's the proper way to implement this?
This is the code I wrote. I've cut it short a lot since there are more fields within the fieldset and don't want to bore anyone:
As you can see, the submenus need to have a small margin between them, and this is what is causing me the problem. The way I implemented the jQuery code, when I want to go from a level to a child sublevel, I have to rush before the hide effect ends if I want to keep the child submenu visible in order to navigate through its items.
Having that div#nav has a relative position and all the submenus, not the first level, initially have absolute position through CSS, this is JS the code I'm using:
$.noConflict(); jQuery(document).ready(function($) { // Position submenus from level 2 on (0-based) $('.subsubmenu').each(function() { var theWidth = $(this).width(); var theHeight = $(this).parent().css('top') - $(this).parent().innerHeight(); $(this).css({'position': 'absolute', 'right' : -1* theWidth - 10 + 'px', 'top' : theHeight}); });
I'd like to keep the menu open when passing from one level to another.
Two ideas buzz around my head:
To place it all in a transparent cointainer which keeps the menu open while the mouse pointer is over it. I don't think this is a good choice because there would be large blank areas which would keep it open.
To somehow delay the triggering of the fade out effect. I tried the delay() function, but it only did that: to delay the triggering action. The submenu still wanted to fade out, a few millisecs after, when the mouse pointer was over it already. The fade in effect turns around the fade out before it is completed though.
I've just made a pop up menu so that when you hover on a menu item with a submenu, this one is faded in.
The problem is that each new submenu block has a small margin from its parent. So, when I navigate through one menu to its nested submenus, everything is faded out just when the mouse is over one of these margins. Only if I move the mouse quickly, the fade out effect is cancelled.
I'm not sure what to do in order to keep the menu displayed everytime except if I leave an item its nested submenus will fade out, or if I click on an item.
I have to create a form in which the first elements are two radio buttons. Depending on which one is selected, a few more fields will be available for the user, something like an extended version of the form, or they will disappear again like in the beginning. I'm doing this with JQuery of course.
So my question is: if I send the short version of the form, will I also send the fields which aren't available now whatever value they might have previously stored (or not)?
I want to create a button and whenever a user moves the mouse over it, an image of a hand, previously hidden, will fade in over the button. I mean a custom image made by me, not the hand cursor. Next when the user moves the mouse out, this hand will fade out.
Everything works ok if I move the mouse over an edge of the button. If I however move the mouse over the button and the mouse pointer is matching up with the area where the hand will appear, just when the hand fades in, the mouseout event for the button will be triggered, thus making the hand to fade out. When it fades out, the mouseover event will be triggered, and so on, constantly fading in/out.
I'd like to implement a button and whenever the user moves the mouse over it, an image of a hand (not the cursor pointer but a custom made image) fades in, and when the user moves the mouse out, it fades out.
This is the code I implemented for it:
$('#wrapper .form_button').hover(
function() {
$('#hand').fadeIn('fast');
},
function() {
$('#hand').fadeOut('fast');
});
When the hand fades in, if the mouse is not over the hand, but over any other part of the button, the behavior is as I desired. The problem with this is when the hand fades in and the mouse is over it. Then this is interpreted as a mouseout from the button, and then the hand continually fades out/in.