I have also posted this question to Codiqa support some time ago, so I am not trying to turn stackoverflow into a Codiqa support center, just know alot of the guys supporting Codiqa are on here, but let me know if I am not allowed to be asking for support for a product on this site...
That aside, I have a select box with size="5" attribute that displays a max of 5 options that are populated via for loop with information from a database. The idea is for this select box to act as a listbox to show the user said information in the select box. However, Codiqa or maybe jquery mobile in general, converts any select box into a button that only can view the content when clicked on. This adds an extra and unnecessary step for my client in this instance. How can I force Codiqa or jquery mobile to honor my size attribute, so the user can see the populated information without having to click to view?
Thank you!
Chrome Browser
Codiqa
Creator of Codiqa here. This is jQuery Mobile behavior that you can disable by telling it to not enhance that form element:
<label for="foo">
<select name="foo" id="foo" size="5" data-role="none">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
We don't have a way to do this right inside of Codiqa yet, but it would be easy enough to add.
Working example: http://jsfiddle.net/bagz8/
You can programatically force select to open itself when page is available:
$(document).on('pagebeforeshow', '#index', function(){
$( "#select-choice-4" ).selectmenu( "open" );
});
This would be a workaround.
EDIT :
Then force jQuery Mobile not to style select boxes. There are several solutions but this one is probably the best: http://jsfiddle.net/bagz8/1/
$(document).bind('mobileinit',function(){
$.mobile.page.prototype.options.keepNative = "select";
});
Warning, mobileinit event MUST be initialized before jQuery Mobile is loaded. You can see it in my example.
There are several other solutions of enhancement prevention and you can find theme here, just look for a chapter: Methods of markup enhancement prevention
Related
I am here asking how is it possible for my chrome extension to be able to "survive" throughout the user refreshing the page and changing page after selecting a feature.
For an example let's use a rather generic background color changing setting which changes the background color of a desired site. Once ticking the enable box and having the background changed to the option selected, it does not stay persistent after changing page or refreshing. I am here asking if someone could possibly help me with some sort of helpful resources which are more helpful than the developer.chrome site.
EDIT: for much better example of my question which is my bad. If anyone of you are aware of such extensions like "BetterTTV" for Twitch, it has a menu of options. One of these options is the "night" option which mentioned prior turns the entire site to "night colors" such as whites to black and black text to light. This option once enabled is seen through the entire site and even once Chrome is closed is still enabled to be producing changes next time opened. If i am correct in understanding what has been said, using Chrome storage will preserve such actions enabled by the user to be produced on the page till disabled.
Thank you.
A content script can survive for the same time that a webpage remains in the tab (i.e. not through refresh, or navigating to a new page). You can not make this longer. A background script can exist for the time that Chrome is running from starting Chrome through exiting. If you want to save settings, you can use chrome.storage, or store the setting in the background page. You can then read the settings, or get them from the background page, when your content script starts again when the page is refreshed, or the user navigates to a new page. Using chrome.storage will allow you to persist the option until turned off. Using chrome.storage, even if Chrome is exited and restarted later, the option information will still be available. If you just store the data in a variable in the background page, it will not persist through exiting and restarting Chrome.
If you are changing a setting in a content script it will live only as long as the content script unless you get the information somewhere will it will persist longer. That means chrome.storage or messaging the information to a background script. Either way, if you want to have the setting active when the content script next runs (refresh, navigating) you will have to get the setting back (e.g. reading from chrome.storage or receiving a message from a background script).
In general, changing options in the content script is, probably, not a good idea. It is uncommon for such to be done in the content script. On the other hand, depending on what you are doing, changing some of your extension's options in a content script may be the most appropriate.
How best to organize this depends on what you are doing. To go further really requires more information from you (e.g. code that shows what you are doing). There are many examples around of having settings persist, although usually not changed from a content script. Settings are mostly changed from options pages, popups, etc.
If your function is as simple as "ticking the enable box and having the background changed to the option selected", having the selection take place in the content script is not a good idea. In that case, you should have a browser_action button which is either a toggle, or that brings up a popup where a checkbox could be ticked (if you have multiple options). The background script would then inject the content script using chrome.tabs.executeScript() only when the feature was enabled.
Update:
Based on the new information you have added to your question, it sounds like you should use a popup which will allow you to have multiple options, or a list of sites on which your add-on is enabled. If you are looking for an example, you can take a look at the Chrome developer options page example. You can have that as a popup with a `browser_action button in addition to being an options page by adding the following to your manifest.json
"browser_action": {
"default_icon": {
"48": "myIcon.png"
},
"default_title": "Show panel",
"default_popup": "options.html"
},
If interested, my answer to this question shows using a single page as both an options page and popup. It shows how to get the data from the options page into chrome.storage and read it back. It is a bit more complicated than potentially desired as it shows four slightly different methods of communicating the information from the popup to a background page. It is tested and working in both Chrome and Firefox.
Here is an example of reading data (useDirect and emailAddress) from chrome.storage and placing the information in the DOM (to show the current value on an options page/popup):
// Restores select box and input using the preferences
// stored in chrome.storage.
function useStoredOptionsForDisplayInDOM() {
chrome.storage.local.get({
useDirect: 0,
emailAddress: '',
enabled: false
}, function(items) {
//Store retrieved options as the selected values in the DOM
document.getElementById('useDirect').value = items.useDirect;
document.getElementById('email').value = items.emailAddress;
document.getElementById('enabled').checked = items.enabled;
});
}
This is how those same values are stored in chrome.storage:
function saveOptions() {
let useDirectValue = document.getElementById('useDirect').value;
useDirectValue = +useDirectValue; //Force to number, not a string
let email = document.getElementById('email').value;
let functionEnabled = document.getElementById('enabled').checked;
chrome.storage.local.set({
useDirect: useDirectValue,
emailAddress: email,
enabled: functionEnabled
});
}
And the <body> of the HTML:
<body>
<div id="optionsArea">
Use direct method:
<select id="useDirect">
<option value="0">Option 0</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">option 3</option>
</select>
<div>Email:
<input id="email"></input>
</div>
<label>
<input type="checkbox" id="enabled">
Enable functionality.
</label>
</div>
<script src="options.js"></script>
</body>
I need to remove the browser's autofill/suggestion feature.
This autofill is disabled using autocomplete="off" in Textfield component. once I do that this brings browser's auto fill feature
In Edge, If I turn off the "Save and fill the personal info" option in "Settings/Profile/Personal info" the above suggestion is not shown. Is there any way without turning off that setting I can remove the autofill feature using Material UI TextField property or CSS property "input:-webkit-autofill"
If autocomplete fails to work, most likely it's a bug or for some reason, react is preventing the attribute from being modified.
However, I know a simple way to bypass by changing the type attribute to something random, where the browser can't understand what it should ask from the user and therefore, the browser can't prompt an autofill.
For example on a standard HTML input tag:
<input type="inputText"/>
This will still treat it as an input field, however, it will not attempt to autofill.
Its browser functionality which you cant handle from code level. If you want to prevent it than you have to made setting changes in browser
Turning Off Autofill in Chrome
Click the Chrome menu icon. (Three dots at top right of screen.)
Click on Settings.
In the "Autofill" section, expand the area for which you wish to disable Autofill.
Toggle the setting OFF if it is on. The system will automatically save your settings.
More details found here => https://support.iclasspro.com/hc/en-us/articles/218569268-How-Do-I-Disable-or-Clear-AutoFill-AutoComplete-Information-
So for html you can simply put autocomplete="new-password" in your
Auto-complete="off" can also be used nut it has some drawbacks.
Banks and other security institutes turn auto complete off .Problem is user change frequently their passwords and fields and use simple passwords to remeber.So auto complete is good feature in these cases.
But you can try this solution if you want .I hope it will work fine
<input type="password" autocomplete="new-password">
you can add autocomplete="off" to your form or input but many modern browsers do not support autocomplete="off" for login fields
but you can prevent it using autocomplete="new-password"
Preventing autofilling with autocomplete="new-password"
for more information check this link
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#the_autocomplete_attribute_and_login_fields
Its most likely a bug, the solution I've found works best is to have auto-complete have a hard coded random value which will prevent a user from using auto-complete...
Try this:
<input type='password' name='pass' autocomplete='password' />
In terms of the auto-complete value you can have anything you want there.
New edit:
<script>
// Execute this code when page is
// totally loaded
$(document).ready(function () {
/* Setting the autocomplete of
input field to off to make
autofill to disable */
$("#name").prop("autocomplete", "off");
});
</script>
I just wanted to know if blockUI provide any support for differently-abled / blind users ?
For example, when loading spinner is visible on screen, an announcement should be made for screen reader users eg. 'alert loading content' or something similar.
Please let me if same is already implemented or not?
<span aria-live="assertive" id="" class="sr-only" role="alert" style="display:none;">something is loading</span>
this span should be shown if loading spinner is visible
Just using a demo, the plugin is not completely accessible. It would require extra work since the modal dialog does not properly handle all keyboard interaction at all. A user should be able to close the dialog with the Escape key. As well, clicking on the 'shade' area should close the dialog, and there's no close button for the pop-up. The user is forced into a choice.
Speaking to the animation specifically, I would suggest following the guidelines for timed media specific to video-only since there's an animation, and provide a clear explanation of the loader, but I would avoid using this method if at all possible. There are much clearer and cleaner methods for modals that are WCAG Compliant and still actively supported.
Time-Based Media: https://www.w3.org/TR/WCAG21/#time-based-media
I currently have a form like so:
<form action="#">
<select {if $isPostRequest}disabled="disabled" {/if}size="1" name="locale"
onchange="location.href={if $languageToggleNoUser}'{$currentUrl|escape}{if strstr($currentUrl, '?')}&{else}?{/if}setLocale='+this.options[this.selectedIndex].value{else}('{url|escape:"javascript" page="user" op="setLocale" path="NEW_LOCALE" source=$smarty.server.REQUEST_URI}'.replace('NEW_LOCALE', this.options[this.selectedIndex].value)){/if}" class="selectMenu">{html_options options=$languageToggleLocales selected=$currentLocale}</select>
</form>
It currently causes a WCAG 2.0 error, as all forms need a submit button.
I'm wondering how I could change this code to include a submit button. The code for the onchange option is quite convoluted, and I don't understand it.
Thanks.
WCAG 2.0 does not require to have a submit button. What you link to is a technique, which is informative (not normative), and it’s only one of possibly many ways to achieve the guideline 3.2.2.
So it can be conforming to have no submit button, for example when
the user has been advised of the behavior before using the component
Related technique: G13: Describing what will happen before a change to a form control that causes a change of context to occur is made
The important thing to note here is that a change of content does not immediately mean a change of context.
From a 3.2.2 guideline perspective, your select box is highly likely to be perfectly fine.
A change of context means a really drastic change. Something like when the user selects an option in the select box, focus is shifted to a different section of the page. Also things like causing a full page refresh or opening a new tab will also fail this criterion.
WCAG "change of context" definition
major changes in the content of the Web page that, if made without user awareness, can disorient users who are not able to view the entire page simultaneously
Changes in context include changes of:
user agent;
viewport;
focus;
content that changes the meaning of the Web page.
Note: A change of content is not always a change of context. Changes in content, such as an expanding outline, dynamic menu, or a tab control do not necessarily change the context, unless they also change one of the above (e.g., focus).
Example: Opening a new window, moving focus to a different component, going to a new page (including anything that would look to a user as if they had moved to a new page) or significantly re-arranging the content of a page are examples of changes of context.
So if all you are doing is modifying some content elsewhere on the page and not messing around with the users focus point, you are doing everything just fine from a 3.2.2 guideline perspective.
You are currently failing in another way though
There is one thing that is causing your select box to fail accessibility. It is lacking a label. This is a fail against guideline 2.4.6 Headings and Labels. The lack of a label means that users will not know what the select box is for.
<form action="#">
<label for="unique-id">Label for select box</label>
<select id="unique-id" {... all that other junk ...}>
{...<option> elements...}
</select>
</form>
If we use a simple HTML Select element:
<select>
<option>One</option>
<option>Two</option>
<option>Three</option>
<option>Four</option>
<option>Five</option>
<option>Six</option>
<option>Seven</option>
</select>
And view this element in IE10+ on a Windows 8 touch-enabled tablet, we find that when the user presses on the drop-down the list repeats, starting at the top of the list again. I understand this is the default functionality but I've been asked to disable it, and stop/snap to the last element. Despite my research and efforts I haven't been able to disable the repeating scroll.
I tried -ms-scroll-chaining but that didn't work (further found that it doesn't apply to my situation), per this link "-ms-scroll-chaining ...prevents the entire page from swiping when the scroll area is fully at one end." Other examples discuss XAML solutions (e.g., updating a combobox ItemPanelTemplate elements CarouselPanel to StackPanel) which doesn't help me because my issue is in an MVC web-page using HTML and CSS.
I think that such behavior is going to be expected by W8-touch users and it should not be prevented.
I doubt that there is an option just for that. If that really bothers you (or your client) you should be able to "solve it" by using javascript-based <select>-replacement solutions like Select2.