How should I build a privacy drop-down (select) menu? - javascript

I'm trying to build something similar to Facebook's privacy selection menu, except without the 'custom' option. It will only list a few options such as 'show to all', 'show to friends only', or 'completely hidden'. Right now I'm thinking of using simple JavaScript to change a hidden input field to the new value they click on, so if they clicked on the division for 'show to friends only' it would change the corresponding field, say 'email_privacy', to 1. Is there a better way to do this or am I pretty much on track?
P.S. I am not planning on using a select element, I was planning on building a custom drop-down menu using CSS since select elements are so highly non-customizable. I'm doing it this way to save space, rather than having this massive selection menu at the right which takes up a bunch of space.
Note: I'm not really interested in using jQuery, that's just extra libraries and crap that I don't want to load. I can do it in JavaScript just as easily so I might as well use that.

It sounds like you're on the right track. If you're planing on doing a POST when the user clicks the submit button containing (amongst other things) the privacy value, then you'll need to pack it in the POST data somehow, and a hidden field is a way to do it.
Alternatively if you were interested in making use of jQuery (which I know you said you weren't but just putting it out there) you can perform asynchronous POST requests passing along with it arbitrary data, such as in this instance the privacy setting, without needing to 'copy' it into a hidden field.
Both options work just fine though.

Related

Read Only equivalents for other inputs in html/JS

Background
I have a basic CRUD form/webapp. It happens to be react/redux but for our purposes it doesn't matter much. I'm pretty sure this is an HTML question.
The form itself represents a 'legal document' a bit, and multiple users log in to view/edit it at once. (think kinda google docs ish)
Some users can only view, some can edit.
The Problem
I want my edit users to be able to use the form elements (input/select etc) to modify the data, and my view users to see that same data as similarly as possible.
I want my view users to be able to copy and paste from the screen.
The disabled and readOnly flags won't quite work.
Failed Solutions
Disabled: With a little CSS magic is looks perfect, and the view users don't get onclick reactions they shouldn't. BUT you can't copy and paste the text. This is the current state of the app.
ReadOnly: Isn't supported by many of the inputs I have (select, radio, etc) although it's pretty much perfect for text and texarea.
The Question
Is there a reasonable or elegant way to achieve behaviour like ReadOnly but across all HTML elements?
Clarifications
Since the current view of the page is exactly what I want my view users to see (it's made to look like a paper form a little) If I chose to use 'view mode' spans for my components or a 'view page' mode I would end up having a to make them look as much like my current inputs as possible. It feels weird/bad to try and make a precise recreation of what I have out of spans and divs instead of making what I have behave correctly. Still... it's the backup plan.
We are using all kinds of inputs. Selects and dates and checkboxes oh my. Text and Texarea are well behaved, but the rest get less well behaved.
Readonly propperty is only supported by input and textarea, check caniuse.
As it has been said in a comment, replace input elements by others that don't allow insert data and re-style the elements to look similar if that's what you want.

Advanced Custom Fields - Toggleable Options for the Backend?

I'm building a website using the ACF plugin (Version 5 Pro), and I'm setting up a button on a page template, which by itself isn't the problem. The problem is that depending on the specific content of each individual page using that template, the button can have one of several different appearances. What I'm trying to do is set things up so that I can upload all the buttons into the default value section of the ACF field ahead of time, and then every time I make a new page using that template, simply select the appropriate button from a radio button, a dropdown menu, or something similar on the backend of the page. I plan to be constantly uploading small amounts of content using this template, so not having to manually select the appropriate images on each page would save me a lot of time.
I've googled around and there wasn't a good answer I could find anywhere, so I'm hoping one of you more knowledgeable folks could help me out!
(And before anyone proposes this as a solution, no, the content of each page isn't something I can define just using programming. It's a little more abstract and needs human input. If all else fails I can just make multiple templates and simply select the appropriate one when I go to make a page, but the way I'm trying to do it now would be a lot cleaner).
You can try ACF Flexible Content:
https://www.advancedcustomfields.com/add-ons/flexible-content-field/
Using Flexible Content field, you will be able to create multiple fields (button 1, button 2, etc) including a WYSIWYG editor and build the buttons HTML adding the default value of the field.
You can read:
https://support.advancedcustomfields.com/forums/topic/html-default-values/
However, I think you'll get in trouble making your buttons dynamic with this approach... so I'd suggest it will be better if you keep some parts of the buttons (like URLs) dynamic, using an extra field to enter the URL, anchor, etc.

MVC Razor ListBoxFor customize/restrict selections

I have a ListBoxFor and the first item is All Values. I already have the list box set to allow multiple selections. I would prefer to make it so that if a user selects the All Values option they are either asked if they want to clear out all other selections (Use All Values) or keep their current selections (De-select All Values). I would be ok without the user dialog asking them what to do and just automatically clearing out selections, but that is less preferable.
At first glance it seems that Javascript/jQuery is the best route to go about for this. I wanted to check to see if anyone knew of built in functionality for ListBoxFor that does this. The other option that I see is building a custom html extension. Even with this I still only see JS/jQuery being built and auto generated.

Accessible javascript alternatives to select elements

I am developing some javascript code that will replace a standard select element with a javascript controlled dropdown menu which will redirect users to a particular page. The standard select element must work when JS is disabled
An example of what I want to achieve is here: www.play.com
What I have noticed with this site is that they simply position the select element behind the javascript alternative. This means that both controls are available to screen readers and keyboard users.
Does anyone have any experience of setting such functionality up and have any suggestions for the best methods to ensure accessibility?
Plain links would be your starting setup, as they work to take users to new pages without any additional scripting required.
You can put them in a container ul, and then use javascript in a 'progressive enhancement' way to turn the list into a dropdown (by re-writing the html) for the people who've got it turned on. This way, a user without javascript turned on will have no problems, and the majority of users will see your drop-down menu.
Even better, don't use a select menu for navigation. It's not really semantically correct, and requires more work to make it operable and robust.
Try something like the Suckerfish drop-down menus which are based on nested lists: http://www.htmldog.com/articles/suckerfish/ or if you want a bit of jQuery fun: http://users.tpg.com.au/j_birch/plugins/superfish/#sample1

Make javascript mandatory in web application?

I am building a web application that will have a fair bit of forms. The html forms are generated using php.
One of the things I came across is this:
I have a drop down box for the user to select his country. Once he selects the country, a call is made to the server to fetch a list of states within that country and populate it in a drop down box.
Initially, I thought I could provide 2 options:
An enhanced jquery version where ajax is used to fetch the states and the populate it in a drop down.
Where javascript is not availiable, the whole page is submitted to the server and then rerendered with the new states in the drop down.
However, onChange() requires javascript. So if someone where to visit the form without javascript enabled, there's no way we can deal with the second option, since javascript is required to submit a form using onChange().
What are some ways to deal with this? My only solution at the moment is to just make javascript mandatory. Users without javascript enabled will see a message saying that the page will not work properly.
Some sites:
Hotmail.com - Refuses to show anything except a "javascript is required message"
Facebook.com - Tells us we should use the mobile version of the site.
Google Maps - Does not work. No message to say javascript is required.
Gmail - Falls back to basic html.
Google account - Does not work. No message to say javascript is required.
Is it acceptable to require users to have javascript enabled at the current state of the web (august 2011)?
Just came across this possible solution:
http://cita.disability.uiuc.edu/html-best-practices/auto/onchange.php
I could perhaps add a button which the user can use to select their country. This should allow us to reload and render the form with the states drop down without any javascript.
You can provide a drop-down of states and tell the user to leave it blank if not applicable. If JavaScript is enabled, it can remove the drop-down until a country where it is applicable is selected.
No, it is not acceptable to require JavaScript; many security-conscious users use NoScript, for example, and would prefer not to turn it off.
By default you should load all possible values into the second dropdown, then clear them out on page load with Javascript. That way people without Javascript enabled can still choose the correct option.
I'm guaranteed to take flak for this, but whether you support no-JS or not should be your call. If you think your userbase is likely to have a sizeable portion of people who disable JS, then you should give them a site that works, but not optimally. If you think most of them will be running with "normal" (air quotes are important there) browsers, then you may consider dropping support for no-JS users.
I am NOT a professional developer, so take my input accordingly. Here are my observations:
I support a website for a wedding cake vendor. Upon observing the competition, all the more appealing sites are embellished (tastefully) with slideshows, dropdowns, animations, interactive form validation, etc.
When scouting for methods to incorporate these features into our site, I found that mostly every classy method was based in javascript.
Figuring it was better to present ourselves as the classy act we are (humble smile), I have decided to require users to have javascript enabled. We've been up for 7 years, and I have not received any complaints. All work on mobile devices.
A compromise option is to start with your State drop-down populated with the states of whatever country your business is in, e.g., all US states, with an extra option (preferably at the top of the list) that says "Other, non-[yourcountrynamehere]". Next to the State drop-down have a text input where the user can type the name of their state if it's not in the list. If JavaScript is enabled then on document-ready you can hide the text input and go with your Ajax solution. Without JavaScript the user has a fully functional page that doesn't even need a reload.
What I ended up doing is to add a button beside the drop down that says "select country". Users without javascript will see this button. Upon clicking it, the page will reload with the list of states rendered.
For users without javascript, this button is hidden, and selecting a country will automatically render a new drop down containing the relevant states.

Categories

Resources