Advanced Custom Fields - Toggleable Options for the Backend? - javascript

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.

Related

Django custom page based CMS

I am searching for django CMS that allows me to create something like custom pages build from predefined components.
Every page should be builded from custom "inpage" components like:
carousel with images
gallery with images
richtext field
plain text field
So as a developer I will build a template for every page of a website from this components and assing a CSS file for the given page. For example one page can look like:
plain text field (heading)
plain text field (some kind of page abstract)
richtext field (part of the text)
gallery with images (few specified images with some style)
richtext field (another part of the text)
Another page could be build in a different way. The key idea is, that every page will have predefined unique layout (template) that is not breakable by users in CMS.
The CMS I would like to use, should allow the user to change content of the particular componets for particular page. So the CMS should create form to change the content of the particular components for a given page (heading, text, images in carousel).
The changable content of the page (form fields) can be stored in database of files, it does not really matter.
The main idea behind this concept is to prevent user from changing the layout provided by designer and enforce the correct styles and correct "content type" for every part of every page.
Note: I used a Mezzanine for last few years and it seems to me easier to code the proposed CMS from scratch rather than use the Mezzanine somehow in this way.
My questions:
does something like exist?
has this type of CMS a common name?
Sorry for being too broad, but I do not really how I can search such a thing (in case it already exists - or at least something similar). Any hint, comment or advice will be more than welcome.
your question is too broad but to answer it quickly:
I don't know that anything like this exactly already exists
There's no common name for this as far as I know.
You're asking two things - one, you want to create a website and give each user some control over the content they create (I suppose you're creating some blogging system or something). second, you want to use a CMS.
The problem with that, I think, is these two things are inherently unrelated. It feels like it's similar - you manage your content with the CMS, just like your users manage their content, but it's actually completely different. One is a tool for developers to quickly build a website, the other is a limited set of tools within an existing website that's exposed to the user. You will never want to expose any part of the CMS to your users, you'll want to have control over that, so it really doesn't matter if you use a CMS or not.
in short - sure, you can use any CMS to build your website, and you can build it from scratch. I'd prefer the latter cause I like building stuff from scratch, but it's really irrelevant to what you're trying to build.

How do I create select menu in an external file and embed it in html to show the menu

My website has individual pages for members, but I have a select menu used to scroll from one member to the other. I have the select menu coded in the html on every page, but I need a better solution since my membership is growing.
I need to be able to create that same select menu in a separate file with the ability, when selected to jump to another member page, have that embedded in the body where I need it so that all I have to do is alter/ update the external file and it'll be done for all the member pages.
I've looked into javascripting it, mysqling it, but can't find (looking on youtube) a code to exactly help me in what I need.
My typical code for the select
//(select.....
//(option value="http:www.website-Profile-blahblah.html.... so on and so forth.
I need to pull this from an external file to use across the board and place it in the body where I need it.
thanks for any help you can offer.
In general this sounds like something you should be using a back end rendering engine for. As far as the select goes, this would be a great place to use a dropdown menu such as the one provided by bootstrap since clicking a select won't actually move you to another page.
If you dont want to use/can't use a back end rendering engine to render the options, I would suggest looking at angular.js which has a great ng-repeat and ng-option feature that would allow you to dynamically build the select/dropdown with as many users as you want.
angular ng-repeat page: https://docs.angularjs.org/api/ng/directive/ngRepeat
bootstrap dropdown: http://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp (note the a tags could go directly to the user's page)
From experience in cases like this, it is much easier to have an SQL table to store the links you would like to use. The next thing to do is to have your back-end send you the list of links. With this, you can dynamically create the option tag and append it to your select tag. functions like newOptionTag.setAttribute('value', 'url'),document.createElement('option') and selectElement.appendChild(newOptionTag) should help you on your way
If you really want to use a seperate file, you could store the membernames and links in a json file. On document load get the file, parse it, then use the object to build the options.
The w3schools website (though frowned upon by some) has a json tutorial and an example that is already halfway there.
EDIT: I see it actually uses mysql to build the json file...

Searching, sorting, paginating and filtering DIVs using Jquery/AJAX/Javascript

I'm working on the front-end of my project and doing the back-end later. I've ran into a snag though. I have a list of DIVs (want them to be collapsible as well) that are suppose to show various apartments around a given zip code. Problem is, I don't know where to go to look for these things:
Firstly, I wish to sort these divs by name or ranking.
Secondly, I
want to be able to search these results and toss out the ones that
they do not want, i.e. I type in A, all apartments that begin with
letters B-Z disappear in the list. I think in p after A, all Aa-Az
letters disappear from the list, etc.
Thirdly, should I use jQuery to paginate my results or should I use PHP instead?
Lastly, I have a filter box. I want to do the same as above except with different selectable options (on the fly using AJAX). User selects, 1 to 3 bedroom apartments, no pets,
and hits filter... boom, list of apartments with values.
Is there anything that I can use using jQuery/Javascript to speed up this process that also degrades when Javascript's disabled? I know this sounds like a lot, but any help would be greatly appreciated.
Well for this to work without javascript, and still behave like you want, i guess you have to build this in pure old html (with form post's / links) and then add jquery ajax functionality to make it prettier and faster when javascript is enabled.
If i were doing this, i would build it with form post's that return the whole page (when javascript is disabled) and add jquery events on page load to prevent default form post and instead use ajax post to only partial load your pages and aply transition effects.
One last thing, if you have a lot of data to show on page use pagination and sorting at database level, return only the visible content of your page. This will work with and without javascript, and is scalable (with lots of results it becomes unmanageable to it in javascript)

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.

Browser back button and dynamic elements

I have a page that uses jQuery to create a number of <input> DOM elements dynamically based on what user picks from a <select> box.
Let's say the user picks 4 from the select box, my script dynamically shows 4 input boxes.
The problem is when the user refreshes or goes back to this page (with the browser back button). The elements that are created dynamically are not repopulated to their last values, while all the other 'static' elements are.
I was thinking I could create a hidden input that would be serialized through javascript with the contents of the dynamic boxes, then read from it on $document.ready and then repopulate my boxes.
Is there a better way?
legenden - there are a number of possible solutions to this, I would check out these history plugins for one:
History Remote
jQuery History plugin
Deep Linking plugin
They are a little fidgety, but you should be able to hack up something positive. I will also add, that this can probably be done by storing the dynamically elements in a cookie(s) and somehow repopulating. Check out the jQuery Cookie plugin. Hope that helped you get started.
You need to manage history yourself if you want things to work in this way. You need Really Simple History.

Categories

Resources