Search jQuery

jQuery Forum

Screen name:
yourtechadvisors
About Me:
I have quite a bit of vision loss, but I still love to design websites. :) I work as a website administrator for 3 sites so far.

yourtechadvisors's Profile

3 Posts

20 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Is ARIA compatible with jQuery events?
[11Replies]
- 11-Apr-2016 07:22 PM
- Forum: Using jQuery
Hello,
I would like to know if ARIA is compatible with jQuery events? This is above my level of skill and I don't have time to look through documentation.

I am trying to get this sub menu accessible. I have tried this code with ARIA, but it is not working. Any pointers?
1. <script type="text/javascript">
  jQuery(document).ready(function($) {
  
  $('.bbp-admin-links:even').css({position: 'absolute', right: '380px'});
  
  $('.bbp-meta ul.bbp_custom_links_menu li.parent > a').click(function(e) {
  
  var options = $(this).closest('.bbp_custom_links_submenu');
  
  if (options.attr('aria-expanded') == 'true') options.attr('aria-expanded', 'false');
  else options.attr('aria-expanded', 'true');
  
  $(this).next('.bbp_custom_links_submenu').toggle();
  e.preventDefault();
  })
  .on('mouseup touchend', function(e) {
  e.stopPropagation();
  });
  
  $(document).on('mouseup touchend', function(e) {
  
  if (!$(e.target).closest('.bbp_custom_links_submenu').length) {
  $('.bbp_custom_links_submenu').hide();
  $('.bbp_custom_links_submenu').attr('aria-expanded', 'false');
  }
  });
  });
  </script>
This code works fine to open and close the menu, but NVDA is not picking up that there is any ARIA there. It does not say when the menu is opened or closed. So my question, is my code wrong, or can you even use ARIA with jQuery events?

Thanks.

Alex S
Website administration is my dream job!
http://yourtechadvisors.com

Insert cursor on click of a button

[17Replies]

10-Apr-2016 05:38 PM
Forum: Using jQuery

Hello,
The code below puts the Reply form and Topic form for BBPress in a slide out. I would like the cursor to be automatically inserted on these conditions.

User clicks Create Topic button, slide out opens, cursor is inserted in the Title field.

User clicks Reply, slide out opens, cursor is inserted in to Reply field/textarea.

Can you please help me modify my code so it does this?

Code in functions.php of my WordPress theme:

/*Add reply form slide out on BBPress*/
function show_form_on_click() {
    $classes = get_body_class();

    if ( is_user_logged_in() && !bbp_is_topic_closed() ) {

        if (in_array('single-forum',$classes)) { ?>
            <script type="text/javascript">
                jQuery( document ).ready(function() {
    jQuery( '<a class="custom-newtopic-button">Create Topic</a>' ).insertBefore( '#new-topic-0' );
                    jQuery('.custom-newtopic-button').click(function(){
                        jQuery('.custom-newtopic-button').hide();
                    });
                    jQuery('.custom-newtopic-button').click(function(){
                        jQuery('.bbp-topic-form').show();
                    });
                });
            </script>
        <?php } elseif(in_array('single-topic',$classes)) { ?>
            <script type="text/javascript">
                jQuery( document ).ready(function() {
                    jQuery( '<a class="custom-reply-button">Reply</a>' ).insertAfter( '.bbp-pagination' );
                    jQuery('.custom-reply-button, .d4p-bbt-quote-link').click(function(){
                        jQuery('.custom-reply-button').hide();
                    });
                    jQuery('.custom-reply-button, .d4p-bbt-quote-link').click(function(){
                        jQuery('.bbp-reply-form').show();
                    });
                });
            </script>
        <?php }
    }
}
add_action( 'wp_footer', 'show_form_on_click' );

Thanks.

Alex S
Website administration is my dream job!
http://yourtechadvisors.com

How to close menu when clicking on page whitespace?
[13Replies]
- 04-Apr-2016 08:06 PM
- Forum: Using jQuery
Hello,
I have a custom menu that a few nice people helped me build to hold all the admin links for the BBPress plugin for WordPress. Currently, if you click the Options button, it will open, click it again, it will close. I would like to add some additional jQuery to make it close when a user selects a place outside of the menu container/page whitespace.

Here is my code.
1. /*Custom BBPress admin links menu*/
  function wpmudev_bbp_admin_links_in_menu($retval, $r, $args) {
     if ( is_user_logged_in() ) {
     $menulinks = '<ul id="bbp_custom_links_menu-' . $r["id"] . '" class="bbp_custom_links_menu">';
      $menulinks .= '<li class="parent"><a href="#bbp_custom_links_menu-' . $r["id"] . '">Options</a>';
      $menulinks .= '<ul class="bbp_custom_links_submenu">';
      foreach($r['links'] as $key => $val) {
          $menulinks .= "<li>{$val}</li>";
      }
      $menulinks .= '</ul></li></ul>';
  
      echo $r['before'] . $menulinks . $r['after'];
      }
  }
  add_filter('bbp_get_topic_admin_links', 'wpmudev_bbp_admin_links_in_menu', 10, 3);
  add_filter('bbp_get_reply_admin_links', 'wpmudev_bbp_admin_links_in_menu', 10, 3);
  
  add_action( 'wp_footer', 'overflow_overriding' );
  function overflow_overriding() {
      if ( !is_user_logged_in() ) {
      }else{
      ?>
      <script type="text/javascript">
  jQuery( document ).ready(function() {
  jQuery('.bbp-admin-links:even').css({"position": "absolute", "right": "380px"});
  });
  jQuery(".bbp-meta ul.bbp_custom_links_menu li.parent > a").click(function(e) {
  jQuery(this).next('.bbp_custom_links_submenu').toggle();
  e.preventDefault();
  });
  </script>
  
       <?php
      }
  }
Can you please help me modify the code so that clicking outside of the menu container will close the menu on desktops and smartphones? I tried this code already, but then the menu would not close at all on phones.
1. ```
jQuery(document).mouseup(function (e)
{
var container = jQuery(".bbp_custom_links_submenu ");

if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.hide();
}
});
```
Any suggestions?

Thanks for your help.

Alex S
Website administration is my dream job!

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend