Creating a Newsflash

On top of the timely updates Frank can pull from all your feeds, you might need a way to blast a high visibility announcement or make something 'sticky' on the top of your page. To do this, Frank can display a Newsflash, powered by a custom jQquery script. When a Newsflash is created, users will see a small alert slide into the page. A Newsflash is animated and can be served on a time delay for higher impact. A newsflash has a small 'X' allowing the user to close and hide the Newsflash (at least until a new one is created).

To create a Newsflash, locate the div with the class "newsflash" and change out it's content. For reference, or in case the div has been removed, the "newsflash" div will always rest right on top of the "container" div. For example, the code below is the Newflash from the default Frank demo:

<div class="newsflash">
    <p>This is a "newsflash" alert. They are easy to create and really grab the user's attention.
    For more details, see "<a href="http://clarklab.com/templates/frank/newsflash.html">Creating a
    Newsflash</a>"</p>
</div>

Inside the div I've just placed a paragraph (p) tag containing the alert along with a link to this page. Change the content and link to anything you want and the newsflash script will display it.

Changing the Newsflash

When a user chooses to hide a Newsflash, the script will store a cookie in the user's browser with the unique name of the Newsflash. When the user visits the page, the script will check to see if the user has chosen to hide the alert. If a user has previously closed the alert, it won't be displayed. If the user has not previously closed the alert, it will be displayed.

When you want to make a new Newsflash, you need to update the unique Newsflash name. In the file /js/newsflash.js, the first line is a variable for setting a unique Newsflash name.

var flash = "newsflashexample";

Each time you want to serve up a fresh alert, you can change this variable to make sure all users will see the new alert. When the script checks for the cookie of users who have previously closed an alert, this new unique name is what makes sure the new alert is seen. The unique name can be something literal, like "augustannouncement" or just random gibberish, like:

var flash = "asd93Js982Dsd9";

You can find the Newsflash script in /js/newsflash.js. At the very top of the file you'll find the name variable, followed by the alert itself and then by the cookie check. The cookie function makes use of the wonderful Cookie Plugin for jQuery to easily check and set cookies based on the unique name you've provided. The slight time delay is set in one of the last of the file (the default being 2000). To make it pause longer, raise the number. To make the delay shorter, lower it.