Jump to content

Search the Community

Showing results for tags 'Tab spud display'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Trumba Product Support
    • Your Calendars and Events
    • Publishing, Sharing, and Emailing Calendars
    • Synchronizing, Importing, and Exporting
    • Public Calendars and Add To My Calendar (ATMC)
    • Pre-purchase questions
  • Trumba Web Developer Forum and Knowledgebase
    • Trumba Web Developer Forum
    • Pre-release (beta) features
    • Trumba Knowledgebase
  • Trumba Connect Transition

Found 1 result

  1. To display a calendar in a section of a page, such as a tab or drop-down, that is hidden when the page first loads: Use a call to the $Trumba.addSpud() method to load the calendar spud when a viewer first displays the hidden section. For example, in the case of a tab control, use an event handler to make the call. Provide the ID of the div (the tab, drop-down, or other section) that contains the spud by including the spudId argument in the $Trumba.addSpud() method. For a demonstration of how to display a calendar in a tab, view the commented source code. JQuery Tools tab control <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">'>http://www.w3.org/1999/xhtml"> <head> <title>JQuery Tools Tab Sample</title> <link rel="stylesheet" href="http://jquerytools.org/media/css/tabs.css"/> <link rel="stylesheet" href="http://jquerytools.org/media/css/tabs-panes.css"/> <style type="text/css">.panes div { height: auto; }</style> <script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js" type="text/javascript"></script> </head> <body> <script type="text/javascript" src="http://www.trumba.com/scripts/spuds.js"></script>'>http://www.trumba.com/scripts/spuds.js"></script> <script type="text/javascript"> var calendarLoaded = false; function addSpudToTab() { $Trumba.addSpud({ webName: "trumbauevents", spudType: "main", spudId: "divSpud" }); calendarLoaded = true; } $(function () { $("ul.tabs").tabs("div.panes > div", { onClick: function (event, tabIndex) { if (tabIndex == 1 && !calendarLoaded) addSpudToTab(); } }); }); </script> <!-- the tabs --> <ul class="tabs"> <li><a href="#">Tab 1</a></li> <li><a href="#">Calendar Tab</a></li> </ul> <!-- tab "panes" --> <div class="panes"> <div>First tab contents.</div> <div id="divSpud"></div> </div> </body> </html> JQuery UI tab control <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JQuery UI Tab Sample</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" type="text/css" media="all" /> <style type="text/css">.panes div { height: auto; }</style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js" type="text/javascript"></script> </head> <body> <script type="text/javascript" src="http://www.trumba.com/scripts/spuds.js"></script> <script type="text/javascript"> var calendarLoaded = false; function addSpudToTab() { $Trumba.addSpud({ webName: "trumbauevents", spudType: "main", spudId: "divSpud" }); calendarLoaded = true; } $(function () { $("#tabs").tabs({ select: function(event, ui) { if (ui.index == 1 && !calendarLoaded) addSpudToTab(); } }); }); </script> <div id="tabs"> <ul> <li><a href="#tabs-1">Tab 1</a></li> <li><a href="#tabs-2">Calendar Tab</a></li> </ul> <div id="tabs-1"> <p>First tab contents.</p> </div> <div id="tabs-2"> <div id="divSpud"></div> </div> </div> </body> </html> How the spud code works and how to customize it
×