Embedded Event Lists code taking up full page

StackOverflow https://stackoverflow.com/questions/15722374

  •  30-03-2022
  •  | 
  •  

Вопрос

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>
Это было полезно?

Решение

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>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top