We develop extensions for Chrome, Firefox and Safari. We want to add context menus to our extensions that will show when right clicking on any form element which is HTML-editable.
Is it possible to define such a context menu?
I noticed that the editable context menu in Chrome works for every editable form element but we want to enable it only for form elements where the user can insert HTML. I also noticed that in many of these form elements, the base element has the attribute [contenteditable="true"] (or [contenteditable=""]).
Are there HTML-editable elements without this attribute? And if not, is it possible to target this attribute in our context menu?
We don't want the context menu to appear in regular text fields or text areas, only in those when the user can insert HTML. But if there is an element with [contenteditable="false"] with a parent with [contenteditable="true"], we do want the context menu also for this element.
Related
My use case is a traditional form page. My page contains a few buttons on the top right followed by form input fields.
When using mouse-less navigation and pressing tab, the standard behavior is exhibited where first focus is set on the browser tab and the browser URL and then into my actual web page in the order of elements (buttons on the top right into the form fields).
However, it seems better accessibility would have pressing tab on the last form field jump straight to the "Save" button on the top right of the page instead of having to loop through the browser tab and then browser URL again. So essentially, I want to "skip" the traditional order of focus on elements after pressing tab on a specific element (the last focusable element on my page which is the last form field) so that it goes to another specific element I want. Is there a way to set this behavior using HTML/CSS/JS?
There are two ways to handle this.
The first is with tabindex. You can control the order of all elements but you have to be very careful. It can make the tab order more confusing. The bigger the tabindex, the higher precedence the element has in the tab order. So you could put tabindex='2' on all your form elements and tabindex='1' on your buttons and leave the rest of the elements on the page without a tabindex. (Multiple elements can have the same tabindex value. The browser will tab through them in their respective DOM order.)
The second way to handle this is with the DOM order itself and then use CSS to move the elements where you want them. So the DOM could have the form elements first and then the buttons second. You can then use CSS to put the buttons in the upper right. This would be the preferred method because it's not as "dangerous" as tabindex.
I have 6 <div> which act as different applications. Each <div> contains a menu and each menu contains child menus which is an unordered list.
Each child menu contains <img> and <p> tag.
I have created a back button as I will be traversing between each of these <div>, menu and child menus. All these elements will be having an Id.
I have created an array to store history of all the list of elements, which I will be visiting using
var pageHistory = { "History": [] };
On click of each <div>, menu and child menu, I am adding them to pageHistory array using pageHistory.History.push(menu);
This is working fine.
But when I click on back button and go from one <div> to another <div>, then the CSS of the child menu of earlier selected <div> gets applied to the child menu of newly selected <div>.
Also, the selected menu is not highlighted when I click on back button.
I want to change the CSS of each element as it is and highlight the selected menu and child menu on click of back button.
Modern web applications often load data or changes in the document object model (DOM) via AJAX without leaving the original page, to create a desktop-like experience. To do that we can take advantage of the URL hash value and the benefits it give us, including less bandwidth used by the client, faster response time and eventually a more interactive application feeling. By inserting a hash character into the URL we can pick up the string following it and use it as a value in AJAX requests. We can also create a listener event to check for a hash being added to a URL and use it to activate a custom JavaScript.
So for that please use hash change and activate your custom css using js
I have a form that has two radio buttons. When one of the radio buttons is clicked, JavaScript is used to set a group of sub-fields using display: block.
How can I make it so the selected radio button and sub-fields will expand when clicking the back button in IE? This issue does not occur in Webkit or Firefox.
It needs to work with plain JavaScript, so no jQuery!
One popular methods is to use a URL-hash to represent the UI state. As the UI changes, you build up a hash:
document.location.hash = "R1=true;R2=false"
When you re-load the page, look at the hash and use JavaScript to set the relevant UI elements. How you represent your elements is up to you.
I have the need of determining, via Javascript, if a drop box is expanded or collapsed.
When the user clicks on the drop box, it gets focus and expands, while after selecting an option is keeps focused but looks collapsed. I don't care about the focus, I need to test for collapsing.
How can I do that?
Thank you
[Edit] I'm using a plain old <select> tag
How about checking the visible children of dropbox div ?
In Firefox (with the Firebug extension installed), see what CSS classes are applied to the combobox when it is expanded and collapsed. If there's a class unique to when the box is in its collapsed state, you can use Javascript to check when the combobox has that class.
Or, if you're controlling the combobox yourself, you can add or remove a CSS class to let you know what the state is of the box.
Basically, I'm building a mobile site with LOTS of content. I have a header, then a menu with three buttons that I need to open select menus so that the iPhone's select wheel will appear. Any ideas? So far my searching says not possible...
two ideas spring to mind.
Use CSS style properties to set the select tags to Display:none. Use javascript to change to display:block when the button is pressed.
Have a place holder div and inject the select tag using .innerHTML.
In both cases you will need to set the focus to the appropriate select tag.