jQuery Forum

Tab B is created by clicking on tab A. How to keep B selected.
[2Replies]
- 10-Sep-2012 02:26 PM
- Forum: Using jQuery UI
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.
1. /**
2. * Callback for the select event of the tabs
3. */
4. selectTab = function(event, ui) {
5. // Just to check whether the clicked tab is the one to add a new tab
6. if (ui.panel.id == 'addTab') {
7. return addTab(event, ui);
8. }
9. };
1. /**
2. * Adds new tab
3. */
4. addTab = function(event, ui) {
6. // Get name for new tab
7. var newTabName = prompt('Name for the new tab:');
9. if (newTabName) {
10. // Content for new tab
11. tabs.append('<div id="' + newTabName + '"><textarea></textarea></div>');
13. // Adds new tab from previous content, at the position of the current last tab (the "add new tab" tab) so that this one will keep being the last.
14. var currentLastPos = ui.index;
16. // HERE'S WHERE I SELECT THE NEWLY CREATED TAB. However the "add new tab" tab will become selected when the js interpreter gets back to jquery ui.
17. tabs.tabs('add', '#' + newTabName, newTabName, currentLastPos).tabs('select', currentLastPos);
19. }
20. else return false; // ignore adding new tab if no name entered
21. };
Any help would be greatly appreciated.

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?

Problem with hover in pop up menu
[4Replies]
- 01-Nov-2011 06:27 PM
- Forum: Using jQuery
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.

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)?

hover() issue
[3Replies]
- 06-May-2010 02:37 PM
- Forum: Getting Started
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.

What should I do to avoid this?

This is the code I made:
1. $('#wrapper .form_button').hover(
2. function() {
3. $('#hand').fadeIn('fast');
4. },
5. function() {
6. $('#hand').fadeOut('fast');
7. });

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