jQuery Forum

Need help with hover issue on an html map
[5Replies]
- 10-May-2012 09:54 AM
- Forum: Using jQuery
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:
1. var imgTag;
2. $(document).ready(function() {
3. imgTag = $('#mapamundi img');
4. $('#mapamundi .area').each(function() {
5. $(this).mouseenter(
6. function() {
7. var region = $('#mapamundi a#region-' + $(this).attr('id'));
8. if (region.hasClass('oculto')) {
9. $('#mapamundi a').hide('fast', function() {
10. $(this).addClass('oculto');
11. });
12. $('#mapamundi a#region-' + $(this).attr('id')).fadeIn('fast', function() {
13. $(this).removeClass('oculto');
14. });
15. }
16. }).mouseleave(
17. function() {
18. var region = $('#mapamundi a#region-' + $(this).attr('id'));
19. if (! region.hasClass('oculto')) {
20. region.fadeOut('fast', function() {
21. $(this).addClass('oculto');
22. });
23. }
24. }
25. );
26. });
27. });
This is the link:
http://www.sonia-sa.com/distribuidores

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.

Please your help would be greatly appreciated.

Alternative to each() in the middle of a chain when there's only one element
[3Replies]
- 03-Dec-2011 05:14 AM
- Forum: Using jQuery
An example will help:
1. tabContent.css('width', '0')
2. .css('opacity', '0')
3. .filter(':eq(0)')
4. .css('opacity', '1')
5. .parent()
6. .find('.one-tab')
7. .addClass('active')
8. .css('cursor', 'default');
Now I want to apply the parent of tabContent a width, only if a condition is true. I do this, and works, but I don't consider this is a proper way:
1. tabContent.css('width', '0')
2. .css('opacity', '0')
3. .filter(':eq(0)')
4. .css('opacity', '1')
5. .parent()
6. .each(function() {
7. if (/*condition is true*/) {
8. $(this).width(aWidth + 'px');
9. }
10. $(this).find('.one-tab')
11. .addClass('active')
12. .css('cursor', 'default');
13. });
Is there a better way instead of using each() which is actually made for loops? In this case there is only one element

How to copy a part of a form, with indexed names to dintinguish each other
[2Replies]
- 20-Nov-2011 09:24 AM
- Forum: Using jQuery
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:
1. <div id="slides_wrapper">
2. <?php
3. for ($i = 0; $i < $num_slides; $i++):
4. ?>
5. <fieldset class="slide_wrapper">
6. <label>Name</label>
7. <input type="file" name="image_<?php echo $i+1; ?>" id="slide_<?php echo $i+1; ?>" value="" /><br />
8. <label>Text in slide</label><br />
9. <input type="text" name="text_<?php echo $i+1; ?>" value="<?php if (isset($images[$i])) echo $images[$i]->text; ?>" /><br />
10. </fieldset>
11. <?php
12. endfor;
13. ?>
14. </div>

Help with a floating menu
[3Replies]
- 12-Nov-2011 06:17 AM
- Forum: Using jQuery
I've made a menu like in the following pic:

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:
1. $.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});
              });
  
              // Hide submenus initially
              $('.submenu, .subsubmenu').hide();
  
              // Menu actions
              $('div#nav ul li').hover(
                  function() {
                      $(this).children('ul').each(function() {
                          $(this).fadeIn(100);
                      });
                  },
                  function() {
                      $(this).children('ul').each(function() {
                          $(this).fadeOut(100);
                      });
                  }
              ).click(function() {
                  $(this).children('ul').each(function() {
                      $(this).fadeOut(100);
                  });
              });
          });
I'd like to keep the menu open when passing from one level to another.

Two ideas buzz around my head:
1. 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.
2. 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.
What would you suggest to fix this?

Question about form fields disabled wilth JQuery
[5Replies]
- 24-May-2010 04:35 PM
- Forum: Using jQuery
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)?

issues regarding .hover()
[3Replies]
- 06-May-2010 10:20 AM
- Forum: Using jQuery
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:
1. $('#wrapper .form_button').hover(
2. function() {
3. $('#hand').fadeIn('fast');
4. },
5. function() {
6. $('#hand').fadeOut('fast');
7. });
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.

What should I do to avoid this?

Response title

Attachments

jQuery Forum

Activity Trend