Event widget - ESchrade - Kevin Schroeder

by Kevin Schroeder | 2:46 pm

Ever wanted to show your blog’s visitors upcoming webinars and events? Well now you can with the E-Schrade feed widget! At Zend we try to keep a list of webinars and PHP-based events up to date on our website. This information is also available via RSS feeds. So what I’ve done is provided a feed that reads those RSS feeds and turns them into nice JSON. That way your visitors can load them asynchronously using JavaScript on your blog. There are two ways to install it.

Download and install this WordPress extension.
Copy and paste this JQuery-based code into your blog’s layout

<script type="text/javascript"> 
if (!jQuery) { 
 document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js\"></scr" + "ipt>"); 
} 
</script> 
<style> 
.webinarPopout { 
 font-size: 12px; 
 position: absolute; 
 width: 260px; 
 border: 1px solid #AEAEAE; 
 padding: 4px; 
 background-color: #EEEEEE; 
 -moz-box-shadow: 2px 3px 4px #666; 
 -webkit-box-shadow: 2px 3px 4px #666; 
 box-shadow: 2px 3px 4px #666; 
 overflow: hidden; 
 z-index: 999; 
} 
</style> 
<div id="zendFeed"> 
<h2>Upcoming Events</h2> 
<ul id="zendFeedElements"> 
</ul> 
</div> 
<script type="text/javascript"> 
 
$(document).ready(function(){ 
 $.ajax({ 
 url:"http://www.eschrade.com/zend.feed.jsonp.php?feed=events&lang=en", 
 dataType: "jsonp", 
 jsonpCallback: "printZendWebinars" 
 }); 
}); 
 
function printZendWebinars(data) { 
 for (var item in data) { 
 var title = data[item]["title"]; 
 var link = data[item]["link"]; 
 var content = data[item]["content"]; 
 $("#zendFeedElements").append('<li class="page_item"><a href="'+link+'" id="zflink-'+item+'">'+title+'</a></li>'); 
 $("#zflink-" + item).data("content", content); 
 $("#zflink-" + item).data("item", item); 
 $("#zflink-" + item).mouseover(function(){ 
 var currentMo = $(this).data("item"); 
 var item = $('<div class="webinarPopout" id="zfcontent-'+currentMo+'">' + $(this).data("content") + '</div>'); 
 item.data("item", $(this).data("item")); 
 item.mouseover(function(){ 
 var moItem = $("#zflink-" + $(this).data("item")); 
 moItem.data("mo", "set"); 
 }); 
 item.mouseout(function(){ 
 var moItem = $("#zflink-" + $(this).data("item")); 
 moItem.data("mo", ""); 
 $(this).remove(); 
 }); 
 item.css( 
 { 
 left: $(this).position().left - 260, 
 top: $(this).position().top 
 } 
 ); 
 $("#zendFeed").append(item); 
 }); 
 $("#zflink-" + item).mouseout(function(){ 
 setTimeout($.proxy(function(){ 
 var mo = $(this).data("mo"); 
 if ( mo != "set") { 
 var itemId = $(this).data("item"); 
 var item = $("#zfcontent-"+itemId); 
 item.remove(); 
 } 
 }, this), 100); 
 }); 
 } 
} 
</script>

Speaking, Webinar

Comments

No comments yet...

Comments

Leave a Reply Cancel reply

Note