web counter
RapidWeaver Stacks, PlugIns, Themes ...
My Image

All the latest RapidWeaver Stacks reviewed,
plus the most important community news …

Stay up to date with current RapidWeaver developments

Scrollers and Quizzes for RapidWeaver

A new developer has quietly slipped into the RapidWeaver fold with the introduction of two interesting stacks. Stuart Marshall. You may have noticed his name on the forums. He's chosen to name his site 'Shaking the Habitual'. Stuart's first stack – Scroller – is as simple as it is effective.

Scroller is a free stack that provides a fully customisable scroll/progress bar that increases in width (from 0% to 100% of the screen width) as the user moves from the top of the web page to the bottom. It can be pinned to the top or bottom of the page.
In addition, there is the option to add content to the stack. Anything added to Scroller's container will appear above the scroll line. It will work with most navigation bars but it could also be used for text (e.g. page title) or a logo etc.

Once you've added Scroller to your Stack's page, there are just five settings – Place at top [of page]? is activated by default. There are options for two colours for the Progress bar – the bar itself and the background colour. After setting the colours, you can adjust the Height of the bar and the z-index (default 1), finally you can activate Add Content if you wish to add something immediately above Scroller.

Scroller – Shaking the Habitual
Quizzer is a completely different kettle of fish. It fills a need that Stuart was never find a suitable solution to...
… creating an interactive quiz within RW.
After trying to tweak existing form stacks and various online quiz generators but not being able to add the functionality/formatting/ownership of the content that he wanted, Stuart decided to develop his own solution.

Quizzer is a stack that you link to a JSON file (examples are included with download). It is the JSON file that contains the quiz content (questions, answers and feedback). The Quizzer stack then lets you determine the functionality for the actual quiz. This could be randomising questions and answers, showing feedback per question, displaying a score, displaying a ranking etc. There are also numerous configurable options to allow the user to control the formatting of the quiz (header sizes, colour of the buttons, colours of the correct/incorrect feedback etc).

Additionally, using a little html code within the JSON file brings a whole range of options for the user as they can use this to format their text (bold, italics) and add images, videos and links etc.

Some might find the JSON configuration a little tricky, but if you begin by editing an existing quizz, the whole process is much easier than it looks. An extensive pdf guide is also included with the download.

Stuart already began work on an update that will include more formatting options (e.g. removing indent of answers/feedback) and also for functionality (e.g. getting the quiz to show X number of random questions from the full question bank).

Quizzer - Shaking the Habitual
NOTE: Quizzer may not function in preview when the JSON file is online. To preview, you can add the file to the Resources folder.

Like some other developers, Stuart began developing stacks because he couldn't find a stack that did what he wanted. Scroller is a useful addition that many will like, whilst Quizzer is a stack that can add some fun to any site. Keep up the good work Stuart!

Please note that DISQUS operates the forum below.
When you sign in to comment, RWNinja will provide your email, first and last names to DISQUS. That information, along with your comments, will be governed by DISQUS’ privacy policy. By commenting, you are accepting the DISQUS terms of service.
Comments

Cookie Manager – Quarantining Content in RapidWeaver

The EU Data Protection Regulation (GPDR) that comes into effect on May 25, 2018 has caused many Weavers to fall into a state of panic.
When you go online, your IP at the very least, is broadcast to the world and can potentially be [mis]used to identify you. The EU ePrivacy directive of 2012 which stipulates that websites accessible in the EU must display a 'cookie' warning is no longer sufficient to appease the prevalent phishing paranoia. The regulations are getting stricter…

Currently. one of the biggest questions is how can a RapidWeaver user safely, easily and compliantly display content based on user consent?

Take for example some analytics tracking code or a Google map. How can this type of content be configured to load only if a user clicks a button and explicitly opts-in or opts-out?
At present it is almost impossible to do this without some really complicating coding. Although some solutions claim to offer a fix, a quick look in the browser console reveals a horror-show of invasive scripting and tracking cookies continuing to download in the background, irregardless of consent having being granted or not. This is simply not good enough for GDPR compliance!

Stacks4Stacks has a new solution available – CookieManager, a free stack that will quarantine portions of your page until your visitor has given her/his consent to allow cookies.
When you drop CookieManager into a Stacks page, it will initially display a container for True and False content i.e. stacks that may be displayed if the visitor has consented to cookies, or alternate stacks that are displayed if the visitor has declined. So, for instance, you could add a Google Map to the True container and an image of the map to the false container; if your 'Accept' button is clicked the interactive map will be loaded from Google Maps; if 'Decline' is clicked, your non-interactive map is displayed and no information is passed on to Google.

CookieManager's second state allows you to add buttons to modify, accept, or decline user cookies. Multiple instances of CookieManager can be used on the same page, allowing the discriminative display of varying content.

CookieManager – S4S


Stack settings
Setup Mode – Get Cookie (default), Delete Cookie, Modify Cookie, Set Cookie
Cookie Name
Cookie Value – Default 'True'
Cookie Expiration – Mins
Button Label
Button Classes
Reload On Click


Whilst CookieManager isn't the be all and end all solution to the pending GPDR regulations, the free stack goes a long way to making your website more compliant with the new laws that affect us all and will allow many Weavers to sleep better at night.

Please note that DISQUS operates the forum below.
When you sign in to comment, RWNinja will provide your email, first and last names to DISQUS. That information, along with your comments, will be governed by DISQUS’ privacy policy. By commenting, you are accepting the DISQUS terms of service.
Comments

Back To The Top

There are a number of stacks available that can add a button that will beam your visitor back to the top of a RapidWeaver Stacks page. RWExtras just published one with a difference. Apart from being extremely customisable, Back To Top lets you add the button to non-Stacks pages.

RWExtras Back To TopBack To Top is the stack that you'll need if you wish to build attractive buttons to send a user back to the top of a webpage, but don't want to use Photoshop to build sprites and don't want to do any complicated programming .
A choice of customisable options lets you create a button of just about any shape, size, position and colour. And a useful 'view generated source code' setting lets you copy the generated code quickly for reuse in non-Stack pages.

Stack settings

Back To Top General Settings
Placement - Fixed (default) Relative,
Position – Top/Bottom/Left/Right
Margins
Offset – Page scroll before active
Scroll Speed
Vertical (offset)
Z-Index

Back To Top Styling
Content – Font Awesome Icon
Content Colour (Normal/Hover)
Animation – Time ms
Font Size
Line Height
Border Radius
Sizing - Width/Height
Background – None, Colour Fill, Gradient Diagonal 1/2, Gradient Horizontal, Gradient Vertical (default), Gradiant Radial, Image (Dragged and Dropped), Image (Warehoused)
Top/Lower Fill – Normal/Hover
Border Weight
Border – Normal/Hover

The very first checkbox in the Settings panel is View Generated Source Code. When the checkbox is activated, the HTML, the CSS and the JS output for your button for your newly created button will be displayed in preview mode. A single click in any of these fields will allow you to copy the code necessary for your Back To Top button to be included within non-Stacks pages.

Without a doubt, a useful stack to have in your collection!

Comments

RapidWeaver Links Hijacked

Would you like to convert links in your theme navigation menu to do powerful things such as switch languages, print the current page or view a shopping cart? How would you like to have a link on a webpage force a linked image or video to download?
A client recently askedd me to add a Botton to his page to reload the current page. All these things and many, many more are feasible with the ActionHost stack. This powerful stack modifies simple links and anchors; making them do things you never thought were previously possible!

What makes ActionHost innovative is the fact that it doesn't force you to write seriously complicated Javascript code or to try to manipulate links with awkward URLs. Simply tell ActionHost which links to look for, select an 'action' from a pull-down menu and configure the action properties. Within a couple of seconds, you can radically change the behaviour of any conventional links within the webpage.

An eon ago, I purchased ActionHost from Tsooj Media, but found it too complicated to use. Will Woodgate has now reworked ActionHost and added more standard options to those previously available. Will also cleaned up the interface and made it simpler to use.
ActionHost is now available on the S4S website.

An example: You have an RWML page (I think I talked about RWML just recently?). By default, you can add a menu, or a stack (i.e. image) to change languages. You, however, decide that you'd like a simple text link somewhere within the opening text.

With ActionHost this is really simple to do – without knowledge of the necessary parameters. Just add a link to your text 'javascript:void(0)', drop an ActionHost stack onto your page. Set the parameters to look for part of the text contained within your link 'French' for instance, or 'language' (case sensitive!) and tell ActionHost that you wish to change 'lang' – in this case to 'fr'.
If you'd like to have a button in the menu bar that prints your page, or returns your visitor to the previous page, it's as simple as adding the corresponding text to the menu and setting an action as described above.

The following new action types have been added to ActionHost v2:
• Add an HTML5 data attribute and value to the link
• Apply a unique ID selector name to the link
• Force a linked file to download (in newer web browsers) and give it a new file name
• Print the current webpage (or save it as a PDF)
• Reload the current webpage
• Navigate back to the previous webpage, that the user came from
• Switch the website language using RWML v2 (due for release very shortly)
• Execute custom jQuery Javascript code

ActionHost has now morphed into a stack that even I can understand and find useful!

Stack Settings

Trigger Properties
Trigger Type - Link Text, Link URL.
Trigger Condition - Equal To, Contains, Starts With.
Trigger Value - The succession of characters to look for.
Action Properties
15 Options - As listed above, plus options such as View PaySnap Cart, Cartloom etc.
The remaining options are variable, depending upon the action requested.

When ActionHost was originally released, it was a stack with interesting possibilities. However, it required coding skills for most actions.
ActionHost version 2 now has a much cleaner interface and includes options that will be useful to many Weavers.

Comments

CodeBox – an Indispensable Tool For Weavers (And Other Coders)

Years ago, when I found a useful snippet of code, I would copy it, insert it directly into RapidWeaver and rejoice at the results (if it worked). When it came to re-using the snippets, it was case of first remembering the project that I used them in and then trying to isolate them from other snippets that I'd added to said project. Thanks to CodeBox that is no longer the case.

I find CodeBox to be an indispensable tool for my RapidWeaver endeavours. Usually, when you find an HTML snippet, or a CSS snippet they are interconnected, often with a snippet of JavaScript. CodeBox makes it simple to archive the snippets in a way that they can be easily discovered and used over and over again. Just copy the snippets to CodeBox, make sure that they have the same (or similar) name, add the extension HTML, CSS, JS, or even TXT and you can be sure to find the relevant pieces of code again.

The advantage of having a related name is, of course, the search function available in CodeBox. If my related snippets all have the content "curtains" then, if I search CodeBox for "curtains" I will immediately see the CSS, HTML and JavaScripts that are related to the snippet that I added years ago.

CodeBox
You'll notice that with so many of my posts, if you hover over the image above, it will change from the HTML list to the CSS list of CodeBox. If you think that I might be able to remember the code to swap an image when you hover over it, you're mistaken, I'm not a code junkie, I have an acute case of code-phobia! But CodeBox comes to my aid on a daily basis.


Something that is especially useful, is the fact that CodeBox syncs with the cloud!
Recently my hard drive crashed and – not having an adequate backup system in place – I lost a lot of information. Because CodeBox was set to sync with my Dropbox account, however, as soon as I reinstalled the app all of my snippets were immediately available again – The necessary CSS is still in place on my server, so I can still add rollovers or this link enhancement to my blog posts without having to search online for the code again!

CodeBox has a multitude of formatting options, so no matter if your code snippets are destined for Ruby On Rails, or are simply text snippets, they will aways be formatted correctly. And once you've discovered the snippet that you're looking for, just click the 'tick' box beneath the snippet and it is copied to the clipboard for use in the next application.

If you are constantly forgetting which HTML is related to which CSS, or JS snippet, then I can highly recommend CodeBox. It doesn't cost the earth an it is extremely useful.
Oh, and the social icons below — they were also added via CodeBox and I also use CodeBox to store standard replies to various forums that I'm active on ¯\_(ツ)_/¯

Comments

Show more posts

Links to the developers ® All trademarks cited on this page are the property of their respective owners.

Subscribe to Ninja News
or ask a question

Hi, I’m the Ninja Bot. What’s your name?
image/svg+xml
Nice to meet you, [1-1]. Could you tell me your mail address?
image/svg+xml
[1-1], would you like to subscribe to the monthly Ninja Newsletter?

Yes, I would like to receive your monthly newsletter.

No thanks, I’m good for now. I have a different issue.

image/svg+xml
Thanks for your support, [1-1]. Is there anything else I can do for you?
image/svg+xml

[1-1], thanks for subscribing. If you made a further request, I’ll get back to you – typically within 24 hrs.

image/svg+xml
Name: [1-1] [1-2]
Email; [2]

Contacted you via the Siphon form at Ninja News.

I would like to subscribe to the Ninja Newsletter

Message

[4]
I’m sorry tohear that, [1-1]. How may I help you then today?
image/svg+xml

[1-1], thanks for contacting me. I’ll review your mail, and get back to you – typically within 24 hrs.

image/svg+xml
Name: [1-1] [1-2]
Email; [2]

Contacted you via the Siphon form at Ninja News.

I don’t want to subscribe to the Ninja Newsletter right now.

Message

[6]

Thanks again for contacting us. Your request was successfully submitted.

  • Stacks Image 76789
  • Stacks Image 76774
  • Stacks Image 76776
  • Stacks Image 76783
  • Stacks Image 76791
  • Stacks Image 76787

Looking for Inspiration?

Looking for Inspiration for a new site, or need a CTA
really quickly?

The Latest & Greatest

Album for RapidWeaver
Weavium builds stacks that are highly configurable. Album is one of those stacks. The Album settings ...
1LD Mega Menu for RapidWeaver
Over the last twelve months, One Little Designer has produced a number of menu stacks for ...
Tabloid for RapidWeaver
Someone recently commented that Gary at Doobox is on a roll. Well, just to prove the fact, he ...
  • Do you have a question regarding RapidWeaver?

  • Would you like help with your new project?

  • Would you like us to build your new RapidWeaver website?

Contact Information

rjh logo

rjh web design

265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
Thailand 58130

About Us

We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.

Legal

This site uses Cookies to determine the best method of display in combination with your browser.
We do not harvest or sell personal information.
© rjh web design 2010—17

Powered by rjh-design

This website was built with loving care on a Mac using Foundation. For more information, contact me.

Don’t miss a post!

Sign up for our monthly newsletter.

A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.

View previous campaigns.

Subscribe to the Ninja Newsletter

* indicates required