Embedded Event Lists code taking up full page

Question

When I embed the code provided by EventBrite to show the events that I have organized on my site, the page loads normally but then the JavaScript expands to take up the whole page.

How do I stop this from happening? I have put in my organizer ID and API key. Below is the example code provided:

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type='text/javascript' src="http://evbdn.eventbrite.com/s3-s3/static/js/platform/Eventbrite.jquery.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
  Eventbrite({'app_key': $APP_KEY}, function(eb){
    eb.organizer_list_events( {'id': 561037966, 'statuses': "live,started"}, function( response ){
      document.write(eb.utils.eventList( response, eb.utils.eventListRow ));
    });
  });
});
</script>

score 2 · Accepted Answer · answered Apr 04 '13 at 21:20

This has nothing to do with the Evenbrite javascript API. The layout is determined by the markup and css styling of your page. The eventList method returns HTML, so you can put that into a specific element and style it appropriately. For example:

<head>
  <script>
    $(document).ready(function(){
      Eventbrite({'app_key': $APP_KEY}, function(eb){
        eb.organizer_list_events( {'id': 561037966, 'statuses': "live,started"}, function( response ){
          var event_list_html = eb.utils.eventList( response, eb.utils.eventListRow );
          $("#event-list").html(event_list_html);
        });
      });
    });
  </script>

  <style>
    #event-list {
      width: 400px;
      border: 1px solid black;
    }   
  </style>
</head>

<body>
  <div id="event-list"></div>
</body>

Embedded Event Lists code taking up full page

1 Answers1