A prime usage example of QueryDisplay would be with our CalcStack. As you know, CalcStack can pass a calculated answer to another page, with the calculated answer appended as a query string. So it would be feasible to collect an answer from a user in CalcStack and pass it onto a page hosting QueryDisplay. Based on what answer a user has provided, you could then display a particular product or service; which you feel might be best suited for the customer. An optional 'display all' button can be setup, so that it would still be feasible for the customer to view all possible products or services.

Examples

Here are some examples of QueryDisplay you can try.
 
Well done! Your browser address bar contained the parameter and value cat=true, so here is a random picture of a cat to make your day better:


cat
Good job! Your browser address bar contained the parameter and value answer=7, so here is the number 7:
7
Nice work! Your browser address bar contained the parameter and value weight=2. The number 2 is equal to or less than 10, so we can assume this would be a lighter item to ship, so we would charge less for it. Light items are classed as any item with a weight equal to or less than 10.
Nice work! Your browser address bar contained the parameter and value weight=16. The number 16 falls between 11 and 20, so we can assume this would be a medium item to ship, so we would charge our medium shipping rate for it. Medium items are classed as any item with a weight between 11 and 20.
Nice work! Your browser address bar contained the parameter and value weight=36. The number 36 is greater than 21, so we can assume this would be a heavy item to ship, so we would charge our heavy shipping rate for it. Heavy items are classed as any item with a weight greater than 21.
Your browser address bar contained the parameter and value lang=latin. So here is some content written in latin:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue egestas nisi. Nunc ullamcorper nec urna in congue. Vestibulum vitae risus accumsan, fringilla lacus vel, auctor orci. Morbi vel molestie diam, eget pellentesque libero. Nam risus leo, tristique quis felis at, blandit consequat odio. Nullam in leo felis. Proin eu convallis risus, nec dignissim justo. Vivamus ac vestibulum mi. Donec finibus neque imperdiet, bibendum mauris at, porta nunc. In hac habitasse platea dictumst. Aenean id tempor purus.

Donec sollicitudin urna at enim elementum elementum. Nam et viverra libero, ut vehicula sapien. Mauris vitae congue justo. Ut id odio vel tellus volutpat consectetur ac eu justo. Pellentesque leo lacus, laoreet in lectus non, scelerisque scelerisque tortor. Cras venenatis ex nunc, a interdum mauris rhoncus a. Phasellus ac volutpat leo. Maecenas tincidunt mauris dolor, et dictum odio venenatis eget. Duis arcu lacus, laoreet ac risus sit amet, dignissim pharetra ex. Phasellus est velit, pharetra at sollicitudin nec, pretium nec nunc. Sed facilisis in massa eu volutpat. Etiam ante risus, sodales vitae enim et, efficitur placerat massa. Suspendisse in mauris vitae sapien venenatis porta sit amet nec libero. Donec rutrum ligula quam, in semper sem venenatis eget. Phasellus pulvinar quis orci nec suscipit. Phasellus augue nisi, feugiat vitae auctor quis, venenatis non diam.

Nullam et enim in orci semper dictum. Maecenas ac augue faucibus diam dictum tincidunt id vel nibh. Proin mollis dapibus massa non placerat. Maecenas aliquet mauris vel nibh elementum mollis. Proin congue ipsum a gravida volutpat. Donec semper lacus venenatis, condimentum dui eu, suscipit velit. Nam aliquet nunc quis nunc pharetra bibendum. Cras a tortor molestie, ornare justo elementum, condimentum purus. Integer malesuada, nunc nec tempus volutpat, arcu diam dapibus est, at cursus nisi tellus ac metus. Phasellus vitae sollicitudin sapien. Nam luctus eros est, sit amet consequat metus malesuada at. Mauris elit turpis, dictum nec sapien eget, ultricies fermentum mi. Sed sodales diam sit amet elit ultrices dapibus. Morbi sodales sit amet massa vel lacinia. Sed laoreet tortor et odio varius auctor. Integer blandit finibus eros, nec laoreet orci consequat in.
No matching query string was detected in your browser address bar. Please try one of the example links below instead!
 
Example links:

Setup

Follow these quick instructions to get QueryDisplay working on a page in your website
  1. Download the stack and install it into Stacks / RapidWeaver
  2. Open the Stacks library and drag and drop a copy of QueryDisplay onto your webpage. Only add a single QueryDisplay to each webpage
  3. Click the blue '+' button to add a new condition. A condition can be an exact phase / keyword, a numerical value or a range between two numerical values. Add as many conditions that you need
  4. Select the main QueryDisplay stack to configure an optional message displayed if no conditions are met
  5. Preview your page in a normal web browser window or publish it online to test.

Important: QueryDisplay cannot be tested inside RapidWeaver preview, because RapidWeaver does not have a browser address bar and therefore cannot pass query strings from one page onto another. Please preview your page in a normal web browser window (like Chrome, Firefox, Opera or Safari) or publish it online to test.

How can I create my own links or buttons with query strings?

Query strings are universally supported in all major web browsers, and across all platforms. You start with a standard webpage link like this. It does not matter if the address ends with a file name, extension or forward slash:
https://example.com/index.html

Now you apply a question mark, to determine the start of the query string:
https://example.com/index.html?

Then add a parameter keyword and equals sign:
https://example.com/index.html?colour=

Then the value of the parameter after the equals sign (a value can either be a word or a number):
https://example.com/index.html?colour=pink

If you want to add additional parameters and values, just separate them with an & ampersand entity:
https://example.com/index.html?colour=pink&size=medium&weight=16&units=kg

Parameters are case sensitive, but normally you would just use all lowercase. A value can either be a word or a number. Do not use spaces or special characters in either parameters or their values. Query strings are safe to use in all web browsers, together with PDF files, documents and emails. You should avoid sending sensitive information (like contact details, passwords, email addresses or credit card information) as query strings, as these this content could be intercepted or incorrectly routed to another website. Query strings are best used for enhancing the user experience and for website automation.

Creating a button to force the display of all QueryDisplay content boxes

It is possible to create a button that can be used to override QueryDisplay and force all the content boxes to display. To accomplish this, add a button or link to your page. Give it a class attribute with a value of queryDisplayAll. Now when the button is clicked or tapped, all of the items within QueryDisplay will become visible.

Forcing the browser to jump to a specific part of the webpage

You can continue to use anchor hashes, to make the web browser 'jump' to a certain part of the page, when the link is clicked. Simply append a hash character and the name of the anchor or ID after the query string like this:
https://stacks4stacks.com/querydisplay/?cat=true#cat-container

The free Anchor Point stack from RWExtras is ideal to use, for splitting a longer webpage up into named sections, you can link to.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.
Bookmark or share this page
Baidu 百度
Blogger
Delicious
Digg
Facebook
Google+
LinkedIn
LiveJournal
MySpace
Одноклассники
Reddit
Renren 人人网
StumbleUpon
Tumblr
Twitter
ВКонтакте
Weibo 微博
XING
Contact Us
Email This Page
Print This Page
PS: This bookmarking and sharing popup is powered using our brilliant SocialPopup stack!

Cookies

Like a lot of websites, Stacks4Stacks uses cookies to help enhance your browsing experience and handle things like purchases. We take your privacy seriously, and welcome you to freely opt-out of nonessential cookies at any time by reviewing your preferences on this page.