Anyone with firefox browser can you open up this fiddle.
The issue I have is with this checkbox button I have, it requires multiple clicks to turn it off and my question is how can I stop this from happening? I know its the posistion:relative which is causing this but I need this so that every time I click on a button, it does not go to the top of the page. I just want the button to turn on and off in one click, not multiple clicks
(See comments below the question - now I know what happens to you)
Ahhh - you cannot solve this without Javascript: quick (double?) click on the TEXT ITSELF is interpreted as "select text" by the browser, and it does not send the event to the checkbox when that happens. With Javascript you can force "un-select" of the text on click.
Click "slowly" - avoiding double click text selection - and it will work (just to show the cause of the problem, no solution without Javascript or proprietary CSS).
Try adding this: Prevent text selection after double click
Maybe you should use a full Javascript Checkbox-Button solution instead of trying to accomplish it with just CSS.
Related
I am trying to navigate through a webpage using just my keyboard. Through the use of my tab key I can enter in data into several input boxes, and press several submit buttons.
However I run into a problem when trying to set focus to an image element on the page. For some reason it does not allow me to select it with the tab key. I can click on it with my mouse and then a popup appears but this really slows down efficiency.
I have considered creating a script in VBA to do this but right now I would prefer a quick-fix without having to spend hours developing a macro.
NOTE: I did quickly try to assign the reference to the <img> element and use the Click and Focus methods in VBA but that didn't work. I don't get an error, the code runs fine but nothing happens on the webpage. This leads me to think that this will be a bigger project than it appears, hence my reluctance to go down that path.
I did a bit of research and it seems that tabindex is not supported by the <img> element. Does that mean what I am trying to accomplish is impossible with the keyboard? Is code my only option?
If anyone knows anything that could help in VBA by all means I will take your advice into consideration.
Unfortunately the webpage is password protected and its a company account therefore I cannot post it.
After right-clicking inspect element in my Chrome browser this is what I see:
<img alt="View Quantities At Other Locations" src="/WebOrder/Images/CheckQtys.gif"
title="View Quantities At Other Locations" class="popup"popupdirection="upperleft"
popupwidth="380" popupcontent="#ProductQuantitiesForAccessibleBranches"
onbeforepopupcreate="onBeforePopupCreate_GetProductQuantitiesForAccessibleBranches(this)"
popupajaxformid="GetProductQuantitiesForAccessibleBranches"
onbeforepopupajaxpost="onBeforePopupAjaxPost_GetProductQuantitiesForAccessibleBranches(this)"
oncompletepopupajaxpost="onCompletePopupAjaxPost_GetProductQuantitiesForAccessibleBranches(this)"
productguid="00000000-0000-0000-0000-000000058927" displayitem="732899500"
brandguid="00000000-0000-0000-0000-000000000000" brandname="" brandsku="">
Does anyone have any ideas how I can set focus to this element (either with my keyboard or VBA)?
You can focus on a div using <div tabindex=0> Stuff Here </div>. Place the image inside the div and use the div to manipulate it.
My page has a popup that becomes visible when you click on a button.
Although I can manually manipulate the fields on the popup when it is visible, when I inspect any of the fields, they're showing up "grayed out" / inactive in firebug.
This didn't used to be the case, and since it's started happening, I'm unable to use Watir to select any of the fields on the popup.
How do I get around this?
The HTML is here
I need to set the checkbox that you see near the bottom of that code in blue highlighting.
I used to select it with:
$browser.table(:id => "productSelectTable")[1][0].click
but now that all of the HTML above is showing up as grayed out when I inspect it, that doesn't work any more.
$browser.td(:class, "tableCell centerCell).hidden.click
Take a look at this sample: http://jsbin.com/imivek/1/edit
Clicking the text field, which is part of the label, behaves oddly in Firefox (tested in v17.0.1):
Clicking it once will give it focus for a very brief period of time, after which the focus moves to the radio button.
Clicking it twice shortly after each other will maintain focus.
Focusing it by other means (f.e. tab) will work fine and as expected.
Handling the text field's click event and preventing it from bubbling up (e.stopPropagation() in jQuery terms) doesn't change anything.
Who can explain this behavior and recommend how to best work around it?
You may have only one form control inside a label. You have two. Your HTML is invalid so weird behaviour is to be expected as browsers attempt to compensate for your mistake.
Clicking it once will give it focus for a very brief period of time, after which the focus moves to the radio button.
You clicked on the label. That sets the focus to the radio button (since the label appears to be a label for it).
Clicking it twice shortly after each other will maintain focus.
Probably some sort of error recovery
Focusing it by other means (f.e. tab) will work fine and as expected.
You aren't clicking the label then
Handling the text field's click event and preventing it from bubbling up (e.stopPropagation() in jQuery terms) doesn't change anything.
It is native functionality, not scripted functionality.
Write valid HTML.
Why do you have two <input>'s in the same <label>? What are you trying to do? A label is supposed to be bound to one input element and act as a caption for it, so that when you click it, the input takes focus.
This is a FF bug
https://bugzilla.mozilla.org/show_bug.cgi?id=213519
Reported in 2003, still not fixed!
I am developing a Chrome extension with browser action. I want to make some action on clicking on browser action icon (it is easy, not a problem), and show popup if user clicks on down arrow at the right side of the icon (that is a problem). So, we will receive a functionality similar to the firefox toolbarbutton from XUL. Is it possible to do such thing with Google Chrome?
Just want to make button, like that:
button
If it is pressed on the main part - it will do something, if on the right "drop-down" part - it will show quick settings page.
But I see only single button possibility.
The entire browserAction button works as a single button. There is no way to detect if a specific area was clicked. The best you can do is either have multiple extensions each having their own button for different actions or have options in the popup that the user selects with a second click.
I am creating a small form where the user
Enters some text in an input box
Chooses from a bunch of options
regarding the actions that need to
be taken with the data
Clicks a submit button
Disconnect does something similar in a better way:
you can click on any of the five divisions here. This is wonderful because it makes it easier for users to perform the same task and simplifies choose and click to click.
What technology is used to display such a menu?
A nice way of doing this is - which doesn't need javascript - is to use radio buttons, but make them invisible. The clickable text and icon go inside of the label for each radio button, so you can click the label or icon to select the radio button.
This ensures a few important things:
Only one item can be selected
The selection is passed back with the form
The browser's native form handling still works
Accessibility options still work
You do have to be careful to make the labels obviously clickable, since you lose the visual cue of having the radio buttons visible.
IE6 & 7 also require a hack - they have a weird behaviour that a display:none or visibility:hidden radio button or checkbox cannot be selected by clicking its label.
Here's an example: http://www.spookandpuff.com/examples/clickableToggles.html
(I haven't included the icons - you can easily add these by setting them as the background in CSS for each item (don't use <img> tags).
Edit Oh man - I just read the question properly! Sorry, you want the behaviour to be 'choose' rather than 'choose and submit'... An easy way to do this is to add some javascript to the inputs to have them auto-submit the forms when they're selected. I've updated the example to show this.
Looks like JavaScript: https://github.com/disconnectme/disconnect.me