Continuing on from yesterday.  Once the ‘Download Calendar’ button is clicked on, the following image pops up on the screen.

<insert image of popupcalendar>

I use the .insertAdjacentHTML() function in order to insert this image.  As you can see in the code below, I indicate the div where I am inserting the html (#downloadcalendar), and then inside of the .insertAdjacentHTML() function I input the html and css aspects of the image shown above.  All of that is shown in the documentation below.  I’m not going to go into details about the css and html, but if you have any questions let me know.

$j(document).ready(function(){

...else{

  $j('#downloadcalendar')[0].insertAdjacentHTML('beforeend',

    "<div id='popupcalendar' style='position: fixed; display: block; color: white; font-size: 135% ;background-color: #000040; width: 88%; height: 30%; top: 10%; left: 5%; border: 3px solid #1c328c; z-index: 2000; padding: 10px;'>\

    <p>Once you have selected your calendar type below, you will be provided a file to import into your calendar.  Depending on your calendar type, you will be downloading either a csv(Microsoft Outlook, Gmail) or an ics(iCalendar) file.</p>\

    <p>For help on how to import this file, please see the following documentation for <a href='http://docs.info.apple.com/article.html?path=iCal/3.0/en/9870.html' style='color:#ff7004;'>iCalendar</a>, <a href='http://support.microsoft.com/kb/290859' style='color:#ff7004;'>Microsoft Outlook</a>, and <a href='http://support.google.com/mail/bin/answer.py?hl=en&answer=14024' style='color:#ff7004;'>Gmail</a>.</p>\

    <button id='ics' style='width: 150px; background-color: #1c328c; font-size: 110%; color: white;'>iCalendar</button>\

    <button id='csv' style='width: 190px; background-color: #1c328c; font-size: 110%; color: white;'>Microsoft Outlook</button>\

    <button id='ics2' style='width: 150px; background-color: #1c328c; font-size: 110%; color: white;'>Gmail</button>\

    <p style='margin-left: 1.75ex;'>Brought to you by <a href='http://www.flaminglunchbox.net/' style='color:#ff7004;'>FlamingLunchbox<img src='chrome-extension://"+chrome.i18n.getMessage("@@extension_id")+"/final32.png' style='margin-left: .5ex; margin-bottom: -7px;'></img></a></p>\

    <div id='close' style='float:right; margin-right: .5ex; margin-top: -.5ex; font-size: 125%;'>x</div>\

    </div>");...

});

});


Up Next Time: Clicking and file creation