Question

I am remaking the old website for my school. Please do not mind all of the css and html mess, since I’m busy doing that. Also, I’m not an expert in javascript, so…

Now, for my problem.

The website uses a Google Calendar for their events, etc. On the homepage, there is a little sidebar with the upcoming events. I’m not planning on changing this every other day, so I came across this jQuery thing that pulls the upcoming events from the calendar directly.
This is loaded on my page:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://www.sint-jozefscollege.be/gallery3/minislideshow/js/jquery.minislideshow.4.0.min.js"></script>
<script src="/jquery.gcal_flow.js"></script>
<script src="/jquery.popupWindow.js"></script>

This is how it looks:

          <div id="gcf-custom-template">
      <div class="gcf-header-block" style=" font-family: verdana; font-size: x-large;">
        <div class="gcf-title-block">
          <a href="/schoolkalender">Agenda</a>
        </div>
      </div>
      <div class="gcf-item-container-block" style=" font-size: 12px; margin-top: 8px;">
        <div class="gcf-item-block">
          <div class="gcf-item-header-block" style=" font-size: 14px; margin-top: 8px;">
<div class="gcf-item-title-block">
              <a class="gcf-item-link"><span class="gcf-item-daterange">00/00</span></a>
              <strong class="gcf-item-title" style=" float: right; width: 150px;">Item Title of Your event
</strong>
            <div style="display: block; clear: both;"></div>
</div>
          </div>
        </div>
      </div>
    </div>

With the above stuff comes this script:

<script type="text/javascript">
  $('#gcf-custom-template').gCalFlow({
  calid: 'jb1p8523dur2d9qtrf0d2demcg%40group.calendar.google.com',
  maxitem: 4,
  mode: 'upcoming',
  daterange_formatter: function (start_date, allday_p) {
  function pad(n) { return n < 10 ? "0"+n : n; }
  return pad(start_date.getDate() + "/" + pad(start_date.getMonth()+1)) + ":";
  }
   });
</script>

Now, I’m trying to get the links that are produced in the “Item Titel Of Your Event” to open in a new tab.
I tried to use this script:

<script type="text/javascript"> 
 $('#link').popupWindow({ 
   height:500, 
   width:800, 
   top:50, 
   left:50 
  }); 
</script>

I modified the jquery.gcal_flow.js file to add ‘id=”link”‘ to the links,
but it won’t work.
If I try it with another link not generated, it works just fine.

Any help would be welcome!
PS: A page with everything: http://www.sint-jozefscollege.be/calendar1.html

EDIT: the implemented solution is available at http://www.sint-jozefscollege.be

Answer 1

I’d say your problem is that the links haven’t been generated when your script to bind the popupWindows runs. Therefore, the event never gets bound. That plugin doesn’t seem to support delegated events, but you could always create the popup window manually, delegating the event by using .on().

$(function() {
    $('body').on('click', '.link', function(e) {
        e.preventDefault();
        new_window = window.open($(this).attr('href'),'','height=500,width=800');
    });
});

You’ll also notice 2 things here. First, is that I put the code in the jQuery ready function. You should always put all jQuery related code in the ready function. Secondly, I used .link instead of #link. IDs should only be used once in a document, if you need to use them multiple times, use classes instead.