Develop Reference

JQuery is not triggering atbar button

I am working on a large project and need to fix some accessibility issues.
These is a section which has been generated by https://www.atbar.org/ in a JS format I am not familiar with. The user clicks buttons to change font size, background colour and other html elements to assist them with reading content.
When you click on the buttons with your mouse they work fine. This is an example of how the buttons appear:
<li class=“access-button">
<a title="Decrease Text Size" id="block_accessibility_dec" tabindex=“0">A-</a>
</li>
If I focus my Chrome inspector on the link element I can see there is an event listening for my click:
This appears to trigger the change in font size. I found the code that triggers this click, it is in a JS format that I am not familiar with:
M.block_accessibility = {
init: function(Y, autoload_atbar, instance_id) {
this.defaultsize = M.block_accessibility.DEFAULT_FONTSIZE;
// This event triggers after clicking
Y.all('#block_accessibility_textresize a').on('click', function(e) {
if (!e.target.hasClass('disabled')) {
M.block_accessibility.changesize(e.target);
}
});
// This is the function it runs, it has many cases for all the different buttons.
changesize: function(button) {
Y = this.Y;
switch (button.get('id')) {
case "block_accessibility_dec":
Obviously this is just snippets of the code with comments I added.
What I require is the user to be able to change the font size using just tab and enter, so I added the following JQuery:
$("#block_accessibility_dec").keyup(function(event) {
if (event.keyCode === 13) {
$('#block_accessibility_textresize #block_accessibility_dec').click();
}
});
This is not triggering the change in font size. Yet when I click on the button it does? There is probably a really simple solution here but I've been stuck for ages. I tested the .click() on other elements on the screen and it works for them so the JS is definitely executing.
I have also tested:
$(this).click();
But to no avail.

Try to trigger the click event by the native way:
$('#block_accessibility_textresize #block_accessibility_dec')[0].click();
Source: I tried their demo page together with the chrome inspector and couldn't get the click working with JQuery.
But with the native click event it suddenly worked.
Unfortunately I can't really explain to you, why JQuery doesn't work here. Maybe something with their version (1.11)?

Replace your code with the following code and add the keyup event. This should work when you press the enter key.
Y.all('#block_accessibility_textresize a').on('click keyup', function(e) {
if (e.keyCode == 13 || e.keyCode ==9) {
if (!e.target.hasClass('disabled')) {
M.block_accessibility.changesize(e.target);
}
}
});

You should use the following Jquery:
$('#block_accessibility_textresize #block_accessibility_dec').trigger("click");
Please let me know if this doesn't work.

jQuery on change using a select dropdown with ajax search

Firstly, here is my code:
<script>
$(document).ready(function(){
$("#search_dropdown").on('change', function() {
ajax_search();
});
});
function ajax_search(){
var search_this = $("#search_dropdown").val();
$.post("../includes/db-search-properties.php", {searchit : search_this}, function(data){
$("#display_results").html(data);
});
}
</script>
What I am trying to achieve here is quite simple. I have a select dropdown with a list of clients. On click, the select changes the data table (called #display_results) without the need of pressing a button and that is why the change function is used.
This works, how ever you can only click the select dropdown twice and then it will not drop down again unless the page is refreshed. The event also causes my other jQuery events to break (such as my menu accordion to go up and down repeatedly) and I don't know how to tell this script to only focus on the task at hand.
Even though i've removed the login script, you can view the errors via this link:
https://www.summersproperty.com/dashboard3/directory/search-properties.php
Click the drop down on the right a few times and it will stop working, click the navigation menu items afterwards and they will bounce.

I would try stopping the event from propagating further. Like so:
$(document).ready(function(){
$("#search_dropdown").on('change', function(e) {
ajax_search();
e.stopPropagation();
});
});
Documentation

It does appear after much trial and error a bug with Chrome, as it works wonders in all other browsers but stops after a few clicks in Chrome.

$(document).ready(function(){
$("#search_dropdown").on('change', function() {
var search_this = $(this).find('option:selected').val();
if(search_this !=''){
$.post("../includes/db-search-properties.php", {searchit : search_this}, function(data){
$("#display_results").html(data);
});
}
else{ console.log("no value found"); }
return false; # optional
});
});
Have you tried this ? passing the value of current selection to your ajax call ?
for running example check this

Trigger event on a select when the value is the same

I am triggering a event when the user changes a selection in a select menu. As you would imagine it works when the user selects a option that is different than what is already there but when it is the same nothing happens. I have tried changing it to a click event but that doesnt seen to work.
If anyone has a work around for this it could greatly be appreciated.
I have found some solutions to this issue but none of them seem to work for me.
I am also using backbone if this makes a difference to you
My event looks like this:
'change .js-select' : 'show_colours',
UPDATE:
Thanks for the feedback
My scenario is this.
I have four select menus with 0, 1 and 2 as the options. If the user selects anything but zero a block of colour tiles will appear below it so the user can click on a colour. This is the same for all of the select menus.
Now due to lack of space the user can only have one block of colours open at a time. So if the user wants to go back and change a colour on a closed block of colours they need to select a different option than what they already have because if they select the same the event to open the block of colours will not fire.
I hope that is clear.

You can try something like this:
var open = false;
$('select').on('mouseup', function () {
if (open) alert(this.value);
open = !open;
});
http://fiddle.jshell.net/6LYbu/1/
Update
Since this will not work on touchdevices, we should listen for the change-event too:
var open = false;
$('select').on('mouseup change', function (e) {
if (open || e.type === 'change') alert(this.value);
open = !open;
});

How can I put a button in the down state?

Suppose I have a button, which goes into a down state when someone clicks on it, but before the mouse is released.
Now suppose instead that someone presses the 'a' key, I want the button to go into the down state, until the key is released, at which point it is triggered. Is this possible?

After dooing some research here is the final answer I got:
You can trigger mousedown or mouseup events on a button element using keyup and keydown
if your button is programmed to change its style according to these events than you are good to go.
See this fiddle example: http://jsfiddle.net/FwKEQ/15/
Note that if you use jQuery's UI components than it does work. But for standard buttons there is no way that you can move them to their pressed state using javascript
html:
<button id="jQbutton">Press 'A' to move me to pressed state</button>
Javascript:
<script>
$( "#jQbutton" ).button();
$(document).keydown(function(event) {
if ((event.keyCode === 97)||(event.keyCode === 65))
$("#jQbutton").mousedown();
});
$(document).keyup(function(event) {
if ((event.keyCode === 97)||(event.keyCode === 65))
$("#jQbutton").mouseup();
});
</script>
EDIT:
There might be a hack that we could utilize:
using accesskey for the button element and then try to simulate the accesskey press (that i am not sure if possible)
here is where i'm at so far http://jsfiddle.net/FwKEQ/28/
EDIT 2:
So looking further into this topic i have found the following:
Default buttons (without styles) are rendered by the OS, I was not able to find a formal proof for that but if you try to load the same page using a mac OS you'll get mac OS style buttons while in windows you will get the "ugly" gray button.
Because the default buttons are rendered by the OS they comply to OS events meaning events that are sent by the browser and are trusted.
this is not true for custom styled buttons as they comply to CSS an JS to change their appearance on press that is why the JQ button is affected by JS.
so to summarize you would need a trusted press event to fire on a default button to change its style and that cannot be done due to security constraints.
read a bit more about trusted events here: http://www.w3.org/TR/DOM-Level-3-Events/#trusted-events
and if someone could find a formal reference with regards to the default buttons being rendered by the OS please comment or edit this answer.

Unfortunately the rendering of the active state on default buttons neither
is a simple matter of css styling nor can be easily changed by applying
javascript.
An option to do this on default buttons is to use the hotkeys jquery plugin: https://github.com/jeresig/jquery.hotkeys or implement alternative key codes for different browsers.
and to apply 50% opacity to the default button when pressed (to indicate the keydown).
(To me it seems almost perfect ;-) It probably is as good as it can easily get to work across platforms and browsers using default buttons.
jsfiddle DEMO
and the code ...
html:
<button id="test">Test Button</button>
Selected: <span class="selected" id="out"></span>
javascript:
$('#test').click(function () {
fn_up();
});
fn_down = function(event){
$('#test').css("opacity", 0.5);
$('#test').focus();
event.preventDefault();
}
fn_up = function(event){
$('#test').css("opacity", 1);
$('#out').append(" test");
event.preventDefault();
}
//to bind the event to the 'a' key
$(document).bind('keydown','a', fn_down);
$(document).bind('keyup','a', fn_up);
//to get the same effect with the 'space' key
$(document).bind('keydown','space', fn);
$(document).bind('keyup','space', fn2);
In the fiddle I apply it to the space button and the mousedown/up to achieve the same effect with all events (but you could just use it with the 'a' key ... this is a matter of taste).

Here is a jsfiddel that shows how it's done using jQuery: http://jsfiddle.net/KHhvm/2/
The important part:
$("#textInput").keydown(function(event) {
var charCodeFor_a = 65;
if ( event.which == charCodeFor_a ) {
// "click" on the button
$('#button').mousedown();
// make the button look "clicked"
$('#button').addClass('fakeButtonDown');
// do some stuff here...
// release the button later using $('#button').mousedown();
}
});
The button event is triggered when entering "a" in the input field. But as Mark pointed out you need to fake the styling for the clicked button because the browser doesn't do it.
Edit: I'm not sure if you're using jQuery in your project. I just wanted to show that it is possible at all. If it can be done with the jQuery library there is also a way to do it in pure javascript. ;)

Firing up a tooltip

Ok so i have this page and if you look at the second dropdown...i want to fire up a tooltip or something when the user tries to select the second dropdown before the fire...otherwise i do the slidetoggle
$('.real_business_select .trigger').click(function(){
if($("#industry_category_id").val() != ""){
$(this).parent().parent().toggleClass('select-active');
$(this).parent().parent().children('.drop-down').slideToggle();
}else{
//fire some tooltip....any ideas
}
return false;
});
any ideas on a good simple solution....im trying to find a good solution that will only fire when i need it too and not everytime the user hovers over the element..any ideas

You might want to take a look at qtip2. It's a jQuery addon that does wonderful things. You could provide any event as tooltip activators.