THINK Academy – IBM

23. June 2014 by admin
Tags: app, cms, dojo, grunt, home, html, html5, IBM, javascript, jquery, json, mobile, MOOC, sass, website, wordpress | Leave a comment

THINK Exchange – IBM

23. June 2014 by admin
Tags: app, buddypress, cms, css, home, html, html5, IBM, javascript, jquery, mobile, mysql, php, website, wordpress | Leave a comment

html5 banners, various clients

19. February 2016 by admin
Tags: animation, banner, css, home, html5, javascript | Leave a comment

animated twitterfeed js class

 <script type="text/javascript">
                               
                                var twitter_test = new TwitterFeed();
                                twitter_test.search("anything", 4,"orange");
                        
                        </script>

function TwitterFeed(){
    
    this.searchPrefix = "http://search.twitter.com/search.json?q=";
    this.searchTerm = "";
    this.maxTweetRetrieve = 5;
    this.tweetData = null;
    this.itemHeight = 0;
    this.linkClass = "#000000";
    this.maxTweets = 10;
    this.displayTweets = [];
    
    // how often do you want to get the tweets? (seconds)
    this.updateInterval = 5;
    
    // the latest tweet is hidden initially. How many seconds after loading do you
    // want it to appear?
    this.initialAnimDelay = 1;
    this.firstrun = true;
    this.getTweetsInt = null;
    this.animInterval = .1;
    this.checkInterval;
    this.intervalSet = false;
    this.maxAttempts = 5;
    this.attemptDelay = 1.5;
    this.attempts = 0;

    this.setupComplete = false;

    this.failCopy = "Sorry, Twitter appears to be down:-(";
    this.progressCopy = "Retrieving Twitter Feed...";
    
    this.carouselHolderIdPrefix = "carouselholder_";
    this.carouselIdPrefix = "carousel_";
    
    this.query = "";

}

TwitterFeed.prototype.search = function(_term, _maxDisplay, _linkClass){
    // alert("search");
    if (!this.setupComplete) {
        this.searchTerm = _term;
        this.displayTweets = _maxDisplay;
        this.linkClass = _linkClass;              
        this.maxTweets = _maxDisplay + 1;
        this.linkColor = _linkClass;
         
        var _html = "<div id='"+this.carouselHolderIdPrefix + _term + "' class='tcarousel-holder'><div id='"+this.carouselIdPrefix + _term + "' class='tcarousel'></div></div>";
        document.write(_html);
        
        this.setupComplete = true;
    }

    var _query = this.searchPrefix + _term + "&callback=?&rpp=" + this.maxTweets;
    var self = this;
    $(document).ready(function() {
        jQuery.getJSON(_query, function(data) {
            self.callback(data);
        });
    });
}

TwitterFeed.prototype.callback = function(_tweets){
    
    if (_tweets.results.length > 0) {
                
        var _totalTweets = _tweets.results.length;
        var _results = _tweets.results;
        this.tweetData = [];
       
        for (i = 0; i < _totalTweets; i++) {
            var _data = this.parseResult(_results[i]);
            this.tweetData.push(_data);
            this.addResult(_data.string);
        }
        
        this.itemHeight = Math.ceil(document.getElementById(this.carouselIdPrefix + this.searchTerm).offsetHeight / _results.length);
        document.getElementById(this.carouselHolderIdPrefix+ this.searchTerm).style.height = this.itemHeight * this.displayTweets + "px";
        this.drawList(this.tweetData, 1);

    } else {
        if (!this.intervalSet) {
            this.intervalSet = true;
            // alert("intervalSet: " + intervalSet);
            this.checkInterval = setInterval("reattempt()", this.attemptDelay * 1000);
            this.emptyDisplay(this.progressCopy);
        }
    } 
}

TwitterFeed.prototype.reattempt = function() {

    this.attempts++;
    if (this.attempts < this.maxAttempts) {
        this.search(this.searchTerm, null, null);
    } else {
        window.clearInterval(this.checkInterval);
        this.emptyDisplay(this.failCopy);
    }
}


TwitterFeed.prototype.emptyDisplay = function(_copy) {
        
    var _holder = document.getElementById(this.carouselHolderIdPrefix+ this.searchTerm);
    var _footer = document.getElementById("thefooter");

    _holder.innerHTML = "<div class='tcarousel-item invisible'>" + _copy + "</div>";
    _holder.style.marginTop = "0px";
    _holder.style.height = "auto";

    var _windowHeight = (typeof window.innerHeight != 'undefined' ? window.innerHeight : document.body.offsetHeight);

    _holder.style.height = (_windowHeight - findPosY(_holder) - 112) + "px";

}


TwitterFeed.prototype.parseResult = function(_obj) {

    var _message = this.parseLink(_obj.text);
    _message = this.parseHash(_message);

    var _user = _obj.from_user;
    var _created = _obj.created_at.replace(/(\+\d*\s)/g, "");

    var _date = new Date(_created);
    var _newDateString = this.relativeTime(_date);

    var _id = _obj.id;
    var _string = "<div class='tcarousel-item class='invisible''>" + _message + "<div class='tweet-extras'>" + _user + " <span class='time'>(" + _newDateString + ")</span></div></div>";


    // now put it all into a model
    var _dataObject = new Object();
    _dataObject.originalObject = _obj;
    _dataObject.message = _message;
    _dataObject.user = _user;
    _dataObject.id = _id;
    _dataObject.dateOriginal = _obj._date;
    _dataObject.dateString = _newDateString;
    _dataObject.string = _string;

        
    return _dataObject;
}

TwitterFeed.prototype.drawList = function(_data, _numAdded) {
    
    var _feed = document.getElementById(this.carouselIdPrefix + this.searchTerm);
       
    _feed.innerHTML = "loading...";
   
    var _margin = -this.itemHeight * _numAdded;
    _feed.style.marginTop = _margin + "px";
    
    for (i = 0; i < _data.length; i++) {
        this.addResult(_data[i].string);
    }
   
    if (this.firstrun == false) {
        this.bringToTop();
        for (i = 0; i < _numAdded; i++) {
            this.tweetData.pop();
        }
    } else { 
        
        this.firstrun = false;
        this.initTimers();
        var _self = this;
        setTimeout(function(){
            _self.bringToTop();
        }, this.initialAnimDelay * 1000);
    }
}

TwitterFeed.prototype.initialReveal = function() {
    bringToTop();
}

TwitterFeed.prototype.bringToTop = function() {
    $('#'+this.carouselIdPrefix + this.searchTerm).animate( {
        marginTop : '0px'
    });
    
}

TwitterFeed.prototype.addResult = function(_string) {
    var _feed = document.getElementById(this.carouselIdPrefix + this.searchTerm);
       
    if ( _feed.innerHTML == "loading..."){
        _feed.innerHTML = "";
    };
    
    _feed.innerHTML += _string;

}

TwitterFeed.prototype.parseLink = function(_s) {
    return _s.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
        return "<a href='" + url + "' >" + url + "</a>";
    });
}

TwitterFeed.prototype.parseHash = function(_s) {
     
    var _new = _s.replace("#" + this.searchTerm, "<a href='http://twitter.com/search?q=%23" + this.searchTerm + "' class='" + this.linkClass + "' target='_blank'>#" + this.searchTerm + "</a>");
    return _new;
}

TwitterFeed.prototype.K = function() {
    var a = navigator.userAgent;
    return {
        ie : a.match(/MSIE\s([^;]*)/)
    };
}

TwitterFeed.prototype.relativeTime = function(a) {
    var b = new Date();
    var c = new Date(a);
    /*
         * if (navigator.userAgent.match(/MSIE\s([^;]*)/)) { c =
         * Date.parse(a.replace(/( \+)/, ' UTC$1')) }
         */
         
    if (this.K.ie) {
        c = Date.parse(a.replace(/( \+)/, ' UTC$1'));
    }
       
    var d = b - c;
    var e = 1000;
    var minute = e * 60;
    var hour = minute * 60;
    var day = hour * 24;
    var week = day * 7;
        
        
    if (isNaN(d) || d < 0) {
        return "";
    }
       
    if (d < e * 7) {
        return "right now";
    }
    if (d < minute) {
        return Math.floor(d / e) + " seconds ago";
    }
    if (d < minute * 2) {
        return "about 1 minute ago";
    }
    if (d < hour) {
        return Math.floor(d / minute) + " minutes ago";
    }
    if (d < hour * 2) {
        return "about 1 hour ago";
    }
    if (d < day) {
        return Math.floor(d / hour) + " hours ago";
    }
    if (d > day && d < day * 2) {
        return "yesterday";
    }
    if (d < day * 365) {
        return Math.floor(d / day) + " days ago";
    } else {
        return "over a year ago";
    }
      
};

TwitterFeed.prototype.initTimers = function() {
    if (!this.getTweetsInt) {
        var _self = this;
        this.getTweetsInt = setInterval(function(){
            _self.getTweets();
        }, this.updateInterval * 1000);
    }
   
}

TwitterFeed.prototype.getTweets = function() {
    // alert("getTweets " + this)
    
    var _query = this.searchPrefix + this.searchTerm + "&callback=?&rpp=" + this.maxTweetRetrieve;
   
    // alert("_query: " + _query) 
    var _self = this;
    $(document).ready(function() {
        jQuery.getJSON(_query, function(data) {
            _self.callback2(data);
        });
    });
}

TwitterFeed.prototype.callback2 = function(_twitter) {
    //alert("callback2 " + this)
    var _totalNew = 0;

    for (i = _twitter.results.length - 1; i >= 0; i--) {
        var _data = this.parseResult(_twitter.results[i]);
        var _exists = false;

        for (j = 0; j < this.tweetData.length; j++) {
            if (this.tweetData[j].id == _data.id) {
                _exists = true;
            }

            // need to update the relative time for all tweets
            var _updatedData = this.parseResult(this.tweetData[j].originalObject);
            this.tweetData[j] = _updatedData;
        }
                
        if (!_exists) {
            this.tweetData.unshift(_data);
            _totalNew++;
        }

    }
    this.drawList(this.tweetData, _totalNew);
}

TwitterFeed.prototype.bind = function(scope) {
    var _function = this;
  
    return function() {
        return _function.apply(scope, arguments);
    }
}

TwitterFeed.prototype.findPosX = function(obj) {
    var curleft = 0;
    if (obj.offsetParent)
        while (1) {
            curleft += obj.offsetLeft;
            if (!obj.offsetParent)
                break;
            obj = obj.offsetParent;
        }
    else if (obj.x)
        curleft += obj.x;
    return curleft;
}

TwitterFeed.prototype.findPosY = function(obj) {
    var curtop = 0;
    if (obj.offsetParent)
        while (1) {
            curtop += obj.offsetTop;
            if (!obj.offsetParent)
                break;
            obj = obj.offsetParent;
        }
    else if (obj.y)
        curtop += obj.y;
    return curtop;
}

27. March 2013 by admin
Tags: css, html, html5, javascript, jquery, twitter | Leave a comment

Brightcove videoplayer accessibility plugin

package {
	import com.adobe.swffocus.SWFFocus;

	import flash.accessibility.AccessibilityProperties;
	import flash.accessibility.Accessibility;
	import flash.display.Sprite;
	import flash.events.Event;
//	import com.richardengland.utils.Tabbing;
	import flash.display.DisplayObjectContainer;
	import flash.display.DisplayObject;
	import flash.utils.getDefinitionByName;
	import flash.utils.getQualifiedClassName;


	public class SWFFocusFix extends Sprite {
		public function SWFFocusFix() {
			if (stage) {
				init();
			} else {
				addEventListener(Event.ADDED_TO_STAGE, init);
			}
		}

		private function init(event:Event = null):void {
			trace("SWFFocusFix.init");

			var player:Object = parent;
			var counter:Number = 0;

			var buttonContainer:Object;

			while (player.parent) {
				for (var i:uint = 0; i < player.numChildren; i++) {
					var child:DisplayObject = player.getChildAt(i);
					var childClass = getQualifiedClassName(child);

					if (childClass.indexOf("BEMLContainer") != -1) {
						//then this is where we want the tabbing focus to be
						buttonContainer = child;
					}

				}

				player = player.parent;
				counter++;

				if (buttonContainer) {
					break;
				}
			}

			traceDisplayList(DisplayObjectContainer(player));

			if (player) {
				trace("Found player.stage! | " + player.stage);
				if (player.stage) {
					if (hasEventListener(Event.ADDED_TO_STAGE)) {
						removeEventListener(Event.ADDED_TO_STAGE, init);
					}
					/*
					if (buttonContainer) {
					var tabbing = new Tabbing(DisplayObjectContainer(buttonContainer));
					}
					*/
					if (buttonContainer) {
						
							SWFFocus.init(buttonContainer.stage);
					}
				}
			} else {
				if (stage) {
					trace("Using local stage.");
					SWFFocus.init(stage);
				}
			}
		}

		private function traceDisplayList(container:DisplayObjectContainer, indentString:String = ""):void {
			var child:DisplayObject;
			for (var i:uint=0; i < container.numChildren; i++) {
				child = container.getChildAt(i);
				if (child.accessibilityProperties) {
					trace(child.accessibilityProperties.name, child.accessibilityProperties.description );
				}
				trace(indentString, child, child.name);


				if (container.getChildAt(i) is DisplayObjectContainer) {
					traceDisplayList(DisplayObjectContainer(child), indentString + "    ");
				}
				
				
				var childClass = getQualifiedClassName(child);
				//adjustment for the closedCaptions BG
				//if (child.name == "instance137" && childClass.indexOf("GlowingButton") != -1) {
					if (childClass.indexOf("GlowingButton") != -1){
						if (getQualifiedClassName(child.parent.parent.parent).indexOf("CaptionControls") != -1){
							trace("******* removed child " + child.name);
							//child.parent.removeChild(child);
							child.alpha = 0;
							
						}
				}

			}
		}

	}
}

<SWFLoader depth="2" width="10" height="10" source="https://www.yourdomain.com/swf/SWFFocusFix.swf"/>

<Runtime>
  <Labels>
    <label key="controls play">PLAY button labeled via BEML</label>
    <label key="controls pause">PAUSE button labeled via BEML</label>
  </Labels>
  <Theme name="Deluxe" style="Light"></Theme>
  <Layout boxType="vbox">
    <ChromelessVideoPlayer id="videoPlayer" useOverlayMenu="false">
      <ChromelessControls boxType="vbox" visible="{!videoPlayer.menu.open}" backgroundImage="https://www.yourdomain.com/images/bc_chromelessBG.png">
        <Spacer width="1"/>
        <HBox hAlign="center" height="10">
          <Playhead id="playhead" height="10" mediaController="{videoPlayer}" useTimeToolTip="true" enabled="{videoPlayer.video}"/>
        </HBox>
        <HBox hAlign="center" height="50">
          <HBox id="defaultView" gutter="0" padding="0" vAlign="middle" maxWidth="820">
            <ToggleButton id="playButton" showBack="false" tabIndex="0" width="65" iconName="play" toggledIconName="pause" accessibleName="acc play pause name" tooltip="controls play tooltip" toggledTooltip="controls pause tooltip" click="{videoPlayer.play()}" toggledClick="{videoPlayer.pause()}" toggled="{videoPlayer.playing}" enabled="{videoPlayer.video}"/>
            <Canvas height="50">
              <HBox gutter="4" vAlign="middle" padding="10">
                <Canvas width="40">
                  <Label id="durationLabel" y="-1" style="font-weight:bold;" tabIndex="1" text="{format(videoPlayer.mediaDuration, SecondsTimecodeFormatter)}" vAlign="middle" hAlign="left" alpha=".75"/>
                </Canvas>
              </HBox>
            </Canvas>
            <CaptionControls hoverMenu="true" id="captionsButton" showBack="false" tabIndex="2" width="50" height="50" accessibleName="Closed captions button. Use spacebar to toggle " iconName="cc-on" toggledIconName="cc-off" tooltip="acc cc showcaptions" toggledTooltip="no CC" click="{videoPlayer.enableCaptions(true)}" toggledClick="{videoPlayer.enableCaptions(false)}" toggled="{videoPlayer.captionsEnabled}" includeInLayout="{videoPlayer.captionsAvailable}"/>
            <VolumeControl id="volumeButton" showBack="false" tabIndex="3" width="50" height="50" accessibleName="acc volume name" mediaController="{videoPlayer}" useOverlayLayer="false" iconName="volume" mutedIconName="muted" tooltip="mute tooltip" mutedTooltip="unmute tooltip" useZeroWidth="true" horizontalPadding="10" popupGutter="3" popupHeight="100" sliderHeight="20"/>
            <ToggleButton id="fullscreenButton" showBack="false" tabIndex="4" width="50" height="50" accessibleName="acc fullscreen name" iconName="maximize" toggledIconName="minimize" tooltip="controls maximize tooltip" toggledTooltip="controls minimize tooltip" click="{videoPlayer.goFullScreen(true)}" toggledClick="{videoPlayer.goFullScreen(false)}" toggled="{videoPlayer.fullscreen}"/>
            <SWFLoader depth="2" width="10" height="10" source="https://www.yourdomain.com/swf/SWFFocusFix.swf"/>
          </HBox>
        </HBox>
      </ChromelessControls>
    </ChromelessVideoPlayer>
  </Layout>
</Runtime>

<cross-domain-policy>
  <allow-access-from domain="*.yourdomain.com"/>
<allow-access-from domain="admin.brightcove.com" />
<allow-access-from domain="sadmin.brightcove.com" />
</cross-domain-policy>

/**
* Cross browser tabbing solution/engine for Flash projects
* 
* Released under MIT license:
* http://www.opensource.org/licenses/mit-license.php
* 
* @author Richard England 2011
* @see http://www.richardengland.co.uk
* @version 0.1
*/


var lastAction = ""; //store last "click" selection (useful for toggle states for example - e.g. play/pause - remembers focus)
var index = 0;
var flashObj; // the flash player object
var firstInput; // the first input object
var shifted = false;

function playerReady( obj ){
	flashObj = obj;
	//get the flash object's "top" CSS value
	var topV = $("#flashplayer").offset().top;
	//add a form to the document and places it at same top offset as flash player object
	$("body").prepend('<form name="form1" id="form1" style="position:absolute; top:'+topV+'px; left:-1500px;"></form>');

	//flashObj returning no name for some reason?
	t = thisMovie("flashplayer");
	t.refreshTabbingList();
	
}

doOnce = false;
function stealFocus( shiftKeyDown ){
	//INSERT YOUR JS FUNCTIONS, or bind to window event:
	
	//are we tabbing backwards or forwards?
	if (shiftKeyDown){
		$(window).trigger("VIDEO_SHIFT_TAB");
	}else{
		$(window).trigger("VIDEO_TAB");
	}
	
	if(!doOnce){
		//alert("steal the focus");
		doOnce = true;
	}
	
}

function addFormField( name, accessName, accessDesc, tabIndex, theTop) {
	//trace("tabbing: addFormField");

	var id = document.getElementById("id").value;
	var accesskey = "";
	if(accessDesc == "") accessDesc = accessName;
	if(index == 0) accesskey = " accesskey='q' "; //for first item only - keyboard shortcut
	var field = $("#form1").append("<div class='temp' id='row" + id + "'><label for='txt" + id + "'>" + accessDesc + " <input tabindex='"+tabIndex+"' type='button' size='20' name='" + name + "' id='"+ name + "' value='"+accessName+"' alt='"+accessName+"' title='"+accessName+"' onfocus='sendFocus( this ); ' onclick='doAction( this );' " + accesskey + "></label></div>");
	
	//set the position so scroll will work properly with tabbing
	$("#row" + id).css( 
              { 
			  "position"	: "absolute",
              "top"			: theTop + "px" ,
              "display"		:"block" 
              }
	)
	id = (id - 1) + 2;

	document.getElementById("id").value = id;
	
}

function addTextField( name, accessName, accessDesc, tabIndex, theTop ) {
	//trace("tabbing: addTextField");

	var id = document.getElementById("id").value;
	if(accessDesc == "") accessDesc = accessName;
	$("#form1").append("<div class='temp' id='row" + id + "' style='position:absolute; top:" + theTop + "px; left:0px;'><label for='txt" + id + "'>" + accessDesc + " <input tabindex='"+tabIndex+"' type='text' size='20' name='" + name + "' id='"+ name + "' value='' alt='"+accessName+"' title='"+accessName+"' onfocus='sendFocus( this ); ' onclick='doAction( this );' onkeyup='doTextUpdate(this)' style='position:absolute;' ></div>");

	id = (id - 1) + 2;

	document.getElementById("id").value = id;
	
}

function removeAllFormFields() {
	//trace("tabbing: removeAllFormFields");
	$(".temp").remove();
	
	document.getElementById('form1').innerHTML = '<input type="hidden" id="id" value="1">';
}

function removeFormField(id) {

	$(id).remove();

}


//receives a new tabbing list object/array from Flash and generates the form by looping through the list
function newTabbingList( obj ){
	//trace("tabbing: newTabbingList");
//alert("newTabbingList");
	removeAllFormFields();

	var i = 0;
	var highestTabIndex = 0;
	var isLastActionStillAvailable = false;

	var lowestTabIndex = 10000;
	while(i < obj.length ) {
		if(obj[i].tabIndex < lowestTabIndex) {
			firstInput = obj[i].name;
			lowestTabIndex = obj[i].tabIndex;
		}
		if(lastAction == obj[i].name)  isLastActionStillAvailable = true;
		if(obj[i].isText){
			addTextField(obj[i].name, obj[i].accessibilityName, obj[i].accessibilityDesc, obj[i].tabIndex, obj[i].theY);
		} else {
			addFormField(obj[i].name, obj[i].accessibilityName, obj[i].accessibilityDesc, obj[i].tabIndex, obj[i].theY);
		}
		if(obj[i].tabIndex > highestTabIndex) highestTabIndex = obj[i].tabIndex;
		i++
	}
	
	
	if(lastAction != "" && isLastActionStillAvailable){
		
		$("#" + lastAction).focus();
	} else {
		
		$("#" + firstInput).focus();
	}

	addFormField("blank", "blank",  "blank", highestTabIndex + 1, 0);
	
	
	index = i;
}

function doPlayFocus(){
	//trace("tabbing: doPlayFocus");
	t = thisMovie("flashplayer");
	t.setFocusTo("playButton", false);
}

//sends text input back to text input in Flash object
function doTextUpdate( inputFocus ){
	
	id = inputFocus.id;
	t = thisMovie("flashplayer");
	t.sendTextUpdate (id , {txt: inputFocus.value});
	lastAction = id;
	
	//alert("doTextUpdate " + inputFocus.value);
}


function doAction( inputFocus ){
	//trace("tabbing: doAction");	
	id = inputFocus.id;
	t = thisMovie("flashplayer");
	t.sendTabAction (id , false);
	lastAction = id;
	
	//alert("doAction " + inputFocus.id);
	//$("#" + lastAction).focus();
}

function thisMovie(movieName) {
	 if (navigator.appName.indexOf("Microsoft") != -1) {
		 return window[movieName];
	 } else {
		 return document.getElementById(movieName);
	 }
 }
 
function sendFocus( inputFocus ) {
	//trace("tabbing: sendFocus");	
	id = inputFocus.id;
	t = thisMovie("flashplayer");
	if(id == "blank") {
		//fix for IE focus
		$("#" + firstInput).focus();
	} else {
		t.setFocusTo(id, false);
	}
	
	
}

16. July 2014 by admin
Tags: accessibility, actionscript, brightcove, home, javascript, video | Leave a comment

AT&T Network Transformation microsite

23. June 2014 by admin
Tags: css, html, html5, javascript, website | Leave a comment

Crossborders – custom cms with flash front-end

23. June 2014 by admin
Tags: actionscript, cms, css, flash, html, javascript, jquery, mysql, php, website | Leave a comment

custom javascript gallery

23. June 2014 by admin
Tags: css, html, javascript | Leave a comment

animated web banner in html5

23. June 2014 by admin
Tags: banner, canvas, css, home, html, html5, javascript | Leave a comment

I need SPACE: browsing FTP host by directory size

27. March 2013 by admin
Tags: home, html, html5, javascript, jquery, php | Leave a comment

bouncing ball in canvas

23. June 2014 by admin
Tags: canvas, home, html, html5, javascript | Leave a comment