Stacks Image 631

Little Mouse

Click him and he'll run straight for the cheese.

scroll down
Get Everything Bundle Deal
Stacks Image 902

Little Mouse

Place a piece of cheese anywhere in the page. Click to send him scrolling to his tasty morsel.

Overview.

So if you clicked the little mouse in the header above, you were scrolled to this section because we placed a piece of cheese right at the top of this section for the little mouse to scroll down to.

So what is little mouse, and what is the cheese exactly? Well they both exist in one stack. You can switch between mouse mode and cheese mode in the settings. You add a mouse mode stack where you want the clickable link to be displayed, and you add a cheese mode stack somewhere else in the page you'd like to scroll to when the little mouse is clicked.

You don't have to display the little mouse animation. One click in the settings and you only see a text link instead. This behaves exactly the same way though, scrolling straight to the piece of cheese you place somewhere else in the page for him, when clicked.

Instant download.

Version : 1.0.4

Responsive : Yes

First released : 25/8/2016

Last Updated : 1/9/2016

Stacks V 3.0 or greater.
Fit My Video Tag

Live demo.

You can see a few live examples of the stack in action below.

You place the little mouse anywhere in the page. You place another little mouse somewhere else in the page, and switch it to cheese mode. Now when you click any of the little mice, they will scroll directly to the piece of cheese that belongs to them.

settings
edit mode
faq
buy now

You don't always have to show the mouse.

One click in the settings turns off the mouse icon, and leaves just the text, which now matches your themes body text size and style. The links still behave in exactly the same way though, scrolling directly to the piece of cheese that belongs to them.

Settings
Edit mode
FAQ
Buy now

NEW - Or even use your own little mouse or any other image.

You have the option to provide your own image to replace the default little mouse animation. You can optionaly choose to display your custom image at a small, medium, or large size.

Edit mode
FAQ
Buy now

What if I don't give little mouse any cheese?

You may want to just have little mouse scroll to a position where the little mouse it's self is just out of the top of the screen, revealing the very next content below in full. To do this is simple. Just don't give this little mouse a cheese stack that belongs to him.

scroll to the bottom of me
Stacks Image 822

New feature.

You can now link to a piece of cheese from anywhere at all. Any link anywhere on the web can link to and scroll to any piece of cheese on the page.

Just add this to the end of your external link url and now when the link is clicked and page with your cheese loads it will scroll directly to the piece of cheese that has the ID you have added in the "find cheese" parameter. ?findcheese=1

Example below : The URL you'd normally use to link to a page.

http://www.yoursite.com/yourpage.index.html

Example below :Now just add the Little Mouse parameter to the end like this. Where the 1 in the below example link url is the Mouse ID of the piece of cheese you want to scroll to.

http://www.yoursite.com/yourpage.index.html?findcheese=1

Note: If your URL already has at least one parameter attached to the end of it, then you can add the cheese hunting parameter like this instead.

http://www.yoursite.com/yourpage.index.html?someotherparamater=somevalue&findcheese=1

You can test this feature by accessing this page from this link, which will bring you directly to this section : https://www.doobox.co.uk/stacks_store/demos/littlemouse.html?findcheese=99

Stacks settings.

In this section we have provided a comprehensive list of available settings, and a full description of what each of the settings does for the stack.

Stacks Image 243
Stacks Image 738
Mode

There are two modes to choose from:

  • Mouse.
  • Cheese.
When in mouse mode, you set the properties of the clickable link the user sees (the little mouse).

When in cheese mode, all you need do is set the id of the cheese to match the id of a little mouse on your page, an place the cheese where you'd like the little Mose to scroll to when clicked.

Mouse size

Choose between preset small, medium and large mouse sizes.

Custom mouse

When selected you are given an image drop zone below to add your own custom image to be displayed in place of the little mouse.

Mouse ID

Mouse ID is available in both mouse, and cheese mode. You may have as many little mice as you like scroll to one of the stacks in cheese mode when clicked. All you need to do is ensure that the ID of the mouse and the cheese you'd like him to scroll to match.

Label

If you have opted to show the mouse icon, the label displays below the mouse. If you opt to turn off the mouse icon, the little mouse then displays as just a text link. The text will then match the text size and style of your theme, and the behaviour remains exactly the same.

Colours

Set the normal and hover state colours of the little mouse and label.

Show

You can choose to show or hide either the mouse icon or the label here.

Align

Aligns the little mouse within the container you placed it.

Cheese offset

This defaults to 20px. To explain, lets say you set this to 0px, and placed the cheese directly over a paragraph of text. When the little mouse scrolled to the text, the text would be perfectly flush with the top of the screen. 20px just gives it a little breathing space.

Also, if you have fixed type navigation, you may need to adjust this offset by the height of your navigation bar. We do that here in the demo page, where we have or offsets set to 100px, to accommodate the navigation bar height, and 40px breathing space.

Stacks edit mode.

We pay great attention to how we approach the editing interface of every stack, to ensure intuitive ease of use.

Stacks Image 297

This is how the stack looks in edit mode, when set to mouse mode.

Stacks Image 741

This is how the stack looks in edit mode, when set to cheese mode.

Stacks FAQ.

Important information that is pertinent to this stack. Please read, as there may well be something here that is essential to the deployment of this stack.

Browser support

This stack is supported in all modern browsers. Any exception to this rule will be listed below.

Safari

Chrome

Firefox

Explorer

Known compatibility issues

There are no known compatibility issues with this stack.

Stack installation

Download.

After purchase, you will be sent an email containing a download link for the stack.
Download the zip file from the link, and unzip it to reveal the stack inside.
You should now see the stack as a logo style icon.

Normal installation.

Double click the un-zipped stack file (the one that looks like a piece of lego).
This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Installation where more than one version of Rapidweaver is installed.

Sometimes if there is more than one version of Rapidweaver installed on your system, the double click method launches the wrong version of Rapidweaver to install the stack. To ensure the it is installed into the version you want to install to, you can, instead of double clicking the stack, just drag and drop it onto the appropriate Rapidweaver app icon in your dock at the bottom of your screen.

This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Secure checkout.

We trust PayPal as our secure checkout provider.

Don't have a PayPal account? No worries. PayPal allows you to pay with your credit card if you do not have an account set-up.

Instant download.

Stacks Image 589

One more thing.

Little Mouse also works in reverse.

Below is a little Mouse, and we placed his cheese right at the top of this page.

Back to top of page.
Little Mouse Stack

© 2018 Doobox Software. Building premium Software Mac & RapidWeaver™

Little Mouse Stack