Archive for the ‘Scripting’ Category

December 8, 2011 2

Mouse wheel in Flash Player not working in Chrome/Firefox

I had a swf which allowed the user to zoom in and out of an image using the mouse wheel – the same sort of functionality they have for zooming on Google Maps. It worked perfectly in IE, but I noticed that it didn’t work when I viewed it in Chrome.

It transpires that this is a bug in the recommended JavaScript method for embedding your swf and by defining a value for the wmode attribute (which I had set to wmode=”obaque”), using the mouse wheel would no longer work in Chrome or Firefox.

I solved the issue by just deleting the wmode entry all together, but if you require a wmode value to be defined, Adobe have provided a solution on their Adobe Developer Connection site.

Tags: Adobe Flash, Chrome, Firefox, IE, JavaScript

October 26, 2011 Off

Flex Twitter Widget

By Pete in Knowledge Base, Scripting

At work, we are developing a teaching resource which is utilising the Adobe Flex framework for deploying content through the browser. This is my first foray into Flex so I have spent quite some time reading about and watching tutorials on the workflow between Adobe Illustrator, Adobe Flash Catalyst and Adobe Flash Builder, to create online applications.

I earlier spent some time creating a simple Twitter Widget, so decided I would continue with this theme, and try and recreate a similar widget for a website, but this time using Flex.

I found a very useful series of video tutorials from gotoAndLearn which I have listed below. These tutorials helped me understand how to take mock-up artwork drawn in Illustrator, convert it quickly and easily into an interactive component in Catalyst (without even having to look at any code!), and finally hooking up an http Twitter search to it in Flash Builder to create a fully functioning Twitter widget.

The gotoAndLearn tutorials take you through how to create a searchable twitter widget, but I wanted to create a widget that only displayed tweets from my account (PeterPickthall) that contained a specific hashtag (#mm), like the twitter widget displayed here, on the left-hand-side of my blog.
To achieve this I merely substituted the query “flash”, specified in the tutorial with, ”#mm from:PeterPickthall”, which I also used in the Simple Twitter Widget tutorial. to create your own custom Twitter compatible search string, you can use the Advanced Twitter Search creator here.

An example of my final, rough, prototype can be seen working here.

It goes without saying that I need to spend more time on the design and aesthetics of the widget, and I also need to add extra functionality such as making the hastags, @usernames and profile picture clickable links, but I am impressed at how quickly I was able to produce a working model with very little need to get involved with the code!

Tags: Adobe, Flash Builder, Flash Catalyst, Flex, Twitter

October 20, 2011 Off

Tutorial | Simple Twitter Widget

By Pete in Knowledge Base, Scripting, Tutorials

Firstly, in the <body> create a <div> where you would like the Tweets to appear on the page.

<div id="tweet" class="tweets"></div>

In the <head> we need to link to a couple of JavaScript files. The first is the Google Ajax open-source Javascript Library and the second is the Ajax JavaScript plugin which you can download at the bottom of this tutorial.

<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script language="javascript" src="tweet.js" type="text/javascript"></script>

Next we need to create the CSS to style the Twitter Feed. I would normally put this in an external stylesheet, but for ease, I am placing it in the <head>. Style to your requirements.

<style type="text/css">
/* loading text */
.tweets{
font-size: 14px;
font-family: Arial;
}
 
/* tweet list container */
.tweet_list {
font-size: 12px;
font-family: Arial;
width:400px;
list-style: none;
margin: 0;
padding: 0;
overflow-y: hidden;
background-color: #F5F5F5;
}
 
/* Tweet list */
.tweet_list li {
overflow-y: auto;
overflow-x: hidden;
padding: 0.5em;
}
 
/* Tweet list links*/
.tweet_list li a {
color: #0C717A;
}
 
/* Tweet list alternating background colour */
.tweet_list .tweet_even {
background-color: #EDEDED;
}
 
.tweet_list .tweet_avatar {
padding-right: .5em; float: left;
}
 
.tweet_list .tweet_avatar img {
vertical-align: middle;
}
</style>

This last bit of JavaScript here contains all the settings for the Widget itself. Delete or change any elements as required.

<script type='text/javascript'>
jQuery(function($){
  $("#tweet").tweet({
	// display up to this number of tweets
	count: 10,
	// search string to pass to Twitter - advanced search strings can be generated here https://twitter.com/#!/search-advanced
	query: "#mm from:PeterPickthall",
	 // size in pixels of the avatar
	avatar_size: 32,
	// refresh rate in seconds to check for new tweets
	refresh_interval: 60,
	// this function filters out @replies
	filter: function(t){ return ! /^@\w+/.test(t["tweet_raw_text"]); },
	// text string to display while searching
	loading_text: "searching twitter..."
  })
  // forces all links in tweets to open in a new window
  .bind("loaded",function(){$(this).find("a").attr("target","_blank");})
  // displays this text if no tweets are returned that match your query
  .bind("empty", function() { $(this).append("No matching tweets found"); });
});
</script>

The whole thing should look like this

<html>
<head>
<title>Twitter Widget</title>  
 
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script language="javascript" src="tweet.js" type="text/javascript"></script>
 
<script type='text/javascript'>
jQuery(function($){
  $("#tweet").tweet({
	// display up to this number of tweets
	count: 10,
	// search string to pass to Twitter - advanced search strings can be generated here https://twitter.com/#!/search-advanced
	query: "#mm from:PeterPickthall",
	 // size in pixels of the avatar
	avatar_size: 32,
	// refresh rate in seconds to check for new tweets
	refresh_interval: 60,
	// this function filters out @replies
	filter: function(t){ return ! /^@\w+/.test(t["tweet_raw_text"]); },
	// text string to display while searching
	loading_text: "searching twitter..."
  })
  // forces all links in tweets to open in a new window
  .bind("loaded",function(){$(this).find("a").attr("target","_blank");})
  // displays this text if no tweets are returned that match your query
  .bind("empty", function() { $(this).append("No matching tweets found"); });
});
</script>
 
<style type="text/css">
/* loading text */
.tweets{
font-size: 14px;
font-family: Arial;
}
 
/* tweet list container */
.tweet_list {
font-size: 12px;
font-family: Arial;
width:400px;
list-style: none;
margin: 0;
padding: 0;
overflow-y: hidden;
background-color: #F5F5F5;
}
 
/* Tweet list */
.tweet_list li {
overflow-y: auto;
overflow-x: hidden;
padding: 0.5em;
}
 
/* Tweet list links*/
.tweet_list li a {
color: #0C717A;
}
 
/* Tweet list alternating background colour */
.tweet_list .tweet_even {
background-color: #EDEDED;
}
 
.tweet_list .tweet_avatar {
padding-right: .5em; float: left;
}
 
.tweet_list .tweet_avatar img {
vertical-align: middle;
}
</style>
 
</head>
 
<body>
<div id="tweet" class="tweets"></div>
</body>
 
</html>

An example of this simple widget can be seen working here.

All source files for this tutorial can be downloaded here

Tags: CSS, JavaScript, jQuery, Twitter

October 20, 2011 Off

Simple Twitter Widget

By Pete in Knowledge Base, Scripting, Tutorials

I’ve been looking for a very simple way of displaying tweets containing specific keywords (or hashtags) from a specific Twitter account, on a webpage.

Twitter, very helpfully, provide a Widget Creator which will generate the code needed to produce such a widget for your website. You can customize many preferences such as, colour scheme, widget dimensions and the specific search query to match you requirements. You then just paste the generated code into the relevant place on your website, and you have a fully functioning Twitter Widget, simple!

Although this solution would be the quickest and easiest solution for me, I wasn’t keen on the Twitter branded design of this widget, I was after something a lot simpler with a less intrusive and more “stripped down” design.

After a bit more searching, I found exactly what I was looking for. Many thanks to the guys at seaofclouds.com for providing such a comprehensive list of example Twitter feeds which take advantage of a simple JavaScript plugin for jQuery. I was able to combine features from a number of their example widgets to produce exactly what I needed.

You can see the resulting source code in this Simple Twitter Widget Tutorial.

An example of this simple widget can be seen working here.

Tags: CSS, JavaScript, jQuery, Twitter

October 9, 2011 Off

Advanced Flash Player detection

By Pete in Scripting

At work I’ve been helping in the development of an online homework and assessment platform. Content is delivered to the customer through the Adobe Flash player in their browser.

Much of the functionality and content of the website relies on the user having at least Flash Player version 10.1 installed and JavaScript enabled. I have been working on a script that checks this using HTML, CSS and JavaScript.

The script that I developed fulfils three main functions:

- Flash detection: This targets a user-defined minimum version number. It allows us to screen customers by their Flash Player version number.

- Displaying different content based on three scenarios: This allows us to target customers with the most relevant content. The three scenarios are: if correct version of Flash Player is detected; if correct version of Flash Player is not detected; and, if JavaScript is disabled. We have utilised this function by only displaying the log in form to the customer when the correct Flash Player Version is detected and JavaScript is enabled.

- Preventing swf from caching: This ensures that the most recent version of any Flash content is always presented to the customer.

If you’re interested, you can see the code for this Flash Detection script in a tutorial I wrote here.

Tags: Adobe Flash, CSS, JavaScript

September 29, 2011 Off

Submitting a form using Enter in IE, bug!

By Pete in Knowledge Base, Scripting, Tutorials

I don’t know about you, but when I fill in a web form, I like to be able to hit the Enter key to finally submit the form.

While working on the Advanced Flash Player Detection script I came across a rather annoying IE bug which meant users were not able to do this!

IE doesn’t attach the “enter to submit” functionality to any forms that are hidden on page load! This was problematic for me because I was using the Advanced Flash Player detection script to hide a login form to a website unless the user had the correct version of the Flash Player installed!

Thankfully I found this very informative article and easy JavaScript solution by Jesse Skinner which worked a treat.

function addInputSubmitEvent(form, input) {
    input.onkeydown = function(e) {
        e = e || window.event;
        if (e.keyCode == 13) {
            form.submit();
            return false;
        }
    };
}
 
window.onload = function() {
    var forms = document.getElementsByTagName('form');
 
    for (var i=0;i < forms.length;i++) {
        var inputs = forms[i].getElementsByTagName('input');
 
        for (var j=0;j < inputs.length;j++)
            addInputSubmitEvent(forms[i], inputs[j]);
    }
};