Tag Archives: trigger

How to Trigger a jQuery UI Accordion Click Action Tips, Tricks and Tutorials 30 AUG 2013

jqueryui logoThe Accordion jQuery UI widget is a great way to present lots of data in a limited space through the use of collapsible panels.

If your panels are fairly large, or perhaps you have a quite a few of them in the accordion, then sometimes it would be nice to use a row of central links or buttons to trigger the collapsible pattern, basically saving the user the effort of scrolling all the way down the page to get to the last panel.

In other words you want to programmatically click a panel heading in order for it to show.

Thankfully, jQuery UI’s accordion API makes it a pretty simple task – essentially you just need to set the ‘active’ option to the desired index of the zero-indexed list of panels. In other words, if you have three panels and you want to open up the second panel, then you’ll need to set the active option to 1.

In practice – First, the HTML:

<div style="text-align:center;padding:5px;"><span class="activelink link">Active</span> | <span class="internallink link">Internal</span> | <span class="closedlink link">Closed</span></div>
<div id="accordion">
<h3>Active</h3>
<div>Bla bla bla 1</div>
<h3>Internal</h3>
<div>Bla bla bla 2 </div>
<h3>Closed</h3>
<div>Bla bla bla 3</div>
</div>

Now the JavaScript:

$(document).ready(function() {
                var myaccordion = $('#accordion').accordion();

                $('.activelink').click(function() {
                    $('#accordion').accordion("option", "active", 0);
                });
                $('.internallink').click(function() {
                    $('#accordion').accordion("option", "active", 1);
                });
                $('.closedlink').click(function() {
                    $('#accordion').accordion("option", "active", 2);
                });
            });

Solved.

Related Link: http://jqueryui.com/accordion/

JavaScript: How To Trigger at a Specific Time CodeUnit 23 JAN 2013

Sometimes you want your web page to do something at a specific time. For example, perhaps you want your page to force a reload at midnight, say if it is being used as a monitor screen and you want to reload it in order to reset browser memory usage.

Anyway, triggering at a specific time using JavaScript turns out to be a fairly simple task, thanks to the useful timing function, setTimeout.

The trick is simple enough. On page load, grab the current timestamp using the Date() object. Then create a new Date() object and manually set its hour and minutes to match the time you want your event to trigger. The difference between the two objects’ times expressed in milliseconds is then used to create a setTimeout event, which naturally will trigger when those milliseconds are up.

Clever.

The following example forces a page reload just before midnight:

//the window reload function. you could of course do anything here
function forceMidnightPageReload() {
        window.location.reload(true);
}

//helper function to build up the desire time trigger
function forceMidnightPageReloadGetTargetTime(hour,minute) {
  var t = new Date();
  t.setHours(hour);
  t.setMinutes(minute);
  t.setSeconds(0);
  t.setMilliseconds(0);
  return t;
}

//get your offset to wait value
var timetarget = forceMidnightPageReloadGetTargetTime(23,59).getTime();
var timenow =  new Date().getTime();
var offsetmilliseconds = timetarget - timenow;

//if it isn't midnight yet, set a timeout.
if (offsetmilliseconds &gt;= 0){
setTimeout(function(){forceMidnightPageReload();}, offsetmilliseconds);
}

Useful.

How to Trigger a Click Event using jQuery CodeUnit 28 MAY 2010

This seems a little silly to even mention here, but some people don’t now how to actually trigger events for which they’ve sculpted all that nifty jQuery code functionality for.

It’s actually really simple to be honest. You know that $(‘#button’).click(function(){ alert(‘button clicked!’); }); code you just wrote into your page?

Well try running $(‘#button’).click(); – yes that’s right, the function you previously wrote just got triggered, didn’t it?

And this applies for most events which you create actions for. Calling the event function with a parameter basically means you are creating a handle for when that event is triggered. Calling the event function without any parameters is tantamount to triggering that event.

Simple, but missed by a surprisingly large amount of people! :)