News

TWITTER ANALYSIS – THE ARCHIVIST

Francisca Manuel

Visualizations are graphic representations of the data your archives. You can see what types of visualizations The Archivist creates below. Use The Archivist to help you understand trends such as the number of Tweets over time, top users and words, sentiment, and more.

What’s The Archivist?

The Archivist is a service that lets you search Twitter for Tweets. Then you can create an archive, analyze, export and share the tweets. The Archivist is brought to you by Microsoft’s MIX Online team.

How do I start archiving Tweets?

Simply sign in to Twitter and associate your account with The Archivist; then, you can save an archive and we’ll start monitoring Twitter for you. You can choose to keep that search private. Or, you can share your results with friends, colleagues or the world, too.

How often are archives and visualizations updated?

Archives and visualizations are updated at different intervals depending on how active the archive is. See this lab note for a further discussion of the topic.

Is it okay to open the file in Excel despite the message Excel throws?

Yes. The file is just a tab delimited file and Excel throws that warning, but then it opens the file just fine.…

News

THE HTML5 REPOSITORY

Francisca Manuel

We follow html5 as it gathers speed.

Reference

What is html5 ? the markup

Source: html5 WikiPedia
HTML5 introduces a number of new elements and attributes that reflect typical usage on modern websites. Some of them are semantic replacements for common uses of generic block (<div>) and inline (<span>) elements, for example <nav>(website navigation block) and <footer> (usually referring to bottom of web page or to last lines of html code). Other elements provide new functionality through a standardized interface, such as the multimedia elements <audio> and <video>. Some deprecated elements from HTML 4.01 have been dropped, including purely presentational elements such as <font> and <center>, whose effects are achieved using Cascading Style Sheets. There is also a renewed emphasis on the importance of DOM scripting (e.g., JavaScript) in Web behavior.

The HTML5 syntax is no longer based on SGML despite the similarity of its markup. It has, however, been designed to be backward compatible with common parsing of older versions of HTML. It comes with a new introductory line that looks like an SGML document type declaration, <!DOCTYPE html>, which enables standards-compliant rendering in all browsers that use “DOCTYPE sniffing”.

HTML5 also incorporates Web Forms 2.0, another WHATWG specification.

html5 resource links

  1. html5 BoilerPlate
  2. html5 Rocks
  3. html5 Reset

New Api’s

New APIs

In addition to specifying markup, HTML5 specifies scripting application programming interfaces (APIs). Existing document object model (DOM) interfaces are extended and de facto features documented. There are also …

News

BUBBLEUP – JQUERY PLUGIN

Francisca Manuel

BubbleUp is a jQuery plugin released from a jQuery tutorial Learning jQuery: Your First jQuery Plugin, BubbleUP which helps you to create your first jQuery plugin. It’s not just for demonstration, it’s useable. With BubbleUP, images in a list will enlarge with a smooth animation when you move your mouse over it. Then, if you move the mouse out, it will reset to the original size with the same smooth animation. Imagine the Mac Dock effect, although this plugin’s effect is not awesome like that, it’s light weight for such a similar zooming effect.

 Enjoyed this post? Subscribe to our RSS feeds!
Share on Twitter

Features:

  • Your menu will be scaled in any size via the option.
  • You decide to enable the tooltip or not.
  • The tooltip would be customizable by font, size and color.
  • The speed of the transition (in/out) can be controlled.

Usage

Make sure you already implement jQuery library. I recommend to use jQuery hosted from Google:

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

Now you need to link the javascript file that you created above into your web page. For this, we use this code:

<script type="text/javascript" src="js/bubbleup.jquery.js"></script>

To make the plugin work, we need to use this code below. You can insert it anywhere you want as long as its inside the or tags:

<script type="text/javascript">
$(function(){
    $("ul#menu li img").bubbleup();
});
</script>

Another example with option enable:

<script type="text/javascript">
$(function(){
    $("div#demo ul#menu li img").bubbleup({tooltip: true, scale:64});
});
</script>
…
News

SEARCHBOX FILTER WITH DROPDOWN JQUERY AND CSS3

Francisca Manuel

Today we will show you some more UI elements: a search box with a filter and a large drop down menu. We will use jQuery in both elements for the effect. We will also use plenty of CSS3 properties to create some slick looking details.

On Click Search Box Drop Down

This search box reveals a drop down menu after the user clicks into the input field. The menu is meant to act as a filter with several checkbox options that allow the user to select specific categories for his search. When the user hovers out of the input or the filter box, the drop down will disappear.

 Enjoyed this post? Subscribe to our RSS feeds!
Share on Twitter
…
News

LATEST TWEETS TOOLTIPS

Francisca Manuel

If you have a news website, it might be interesting for you to allow your users to see the latests tweets about a topic. Here is a jQuery plugin for showing the latest tweets about a certain word or phrase.

For this plugin we are using the jQuery Twitter Search Plugin.

 Enjoyed this post? Subscribe to our RSS feeds!
Share on Twitter

Words or phrases that you want to be searched for in Twitter, are wrapped with the following span:

	<span class="twitter_search">Some search term</span>

The popup box that appears can be dragged and resized. Clicking on the cross will make it disappear. The tweets are constantly being loaded in a predefined time span. This loading stops when the user hovers over the tooltip box.

If you want to configure and restyle the tooltip, you will need to have a look at the configurations of the Twitter Search Plugin. Many parameters can be set here, from style to timings.

You can call the plugin like this:

	$(function() {
	    $('#article').find('.twitter_search').twitterpopup();
	});

where #article should be replaced by the ID of your container.

…

News

TUBELOOP – YOUTUBE API ( ALPHA )

Francisca Manuel

We feature Nirvana Tikkus new TubeLoop site

TubeLOOP using the YouTube API

Nirvana Tikku, whom we have featured in the past has created a new site, using his own code and harnassing the power of the new YouTUBE API. In the guise of TubeLoop.

Exceptional coding skills, will surely make this site and the coder a winner. Check it out yourself.

 Enjoyed this post? Subscribe to our RSS feeds!
Share on Twitter
…
News

ANIMATED TABLES JQUERY

Francisca Manuel

This plugin allows you to animatedly sort a table based on a column’s s, or on the content/value of a child/descendant element within those s. The various

s fly to their new homes, giving a nice effect. It also supports sorting on REGEXP matches. You can also control whether row relationships are maintained, whether it sorts on ascii or numeric and ascending or descending.

Usage & parameters

Call tableSort(params) on a table returned by a jQuery selector.

$(selector).tableSort(params);

…where params is an object of property/value pairings, including:

onCol (int, required) – the index of the column in your table to sort on (not zero-indexed)

keepRelationships (bool, default: false) – if true, row relationships wil be maintained. That is, the sibling <td>s will move also

regexp (RegExp, default: null) – a string representing a regular expression (/pattern/) to sort on instead of the complete contents of the <td>. Useful with regexpIndex – see below.

regexpIndex (int, default: 0) – if sorting on a regular expression, this is the index of the returned array of matches to use for the sort, should it return more than one match. See below for an example of this, where a regexp sub-pattern is used.

child (string) – sort on the content/value of a child/descendant element within each <td>, rather than on the <td>s themselves. This should be a selector string to match that element. See notes for more info.

sortType (string, default: ascii) – either ‘ascii’ or, if wanting to sort numerically, ‘numeric’

sortDesc (bool, …

News

SIMPLE THUMBS, JQUERY GALLERY

Francisca Manuel

This plugin works with minimal markup and is easy to instantly configure. The image that appears in the gallery window must be pointed at in the HREF attribute of each thumbnail. The thumbnail that is currently displayed will have an “active” class on it. You must configure most of the styles yourself, as there is minimal interference from the plugin.

Simple Thumbs, jQuery Gallery

You can also create buttons to start, stop, or toggle an automatic slideshow. By default these elements can be inserted with a #start-cycle, #stop-cycle, and #toggle-cycle id to them, without requiring additional JavaScript configuration. You can also indicate “next” and “previous” buttons with a #next-image and #prev-image ID. These buttons will stop an automatic slideshow if it is occuring. So with the same script as above, you could do this:

<div id="imageview">
    <img src="images/sample1.jpg" alt="example" />
</div>
<div id="thumbnails">
    <a href="images/sample1.jpg" class="active"><img src="images/thumbnails/sample1.jpg" alt="" /></a>
    <a href="images/sample2.jpg"><img src="images/thumbnails/sample2.jpg" alt="" /></a>
    <a href="images/sample3.jpg"><img src="images/thumbnails/sample3.jpg" alt="" /></a>
    <a href="images/sample4.jpg"><img src="images/thumbnails/sample4.jpg" alt="" /></a>
    <a href="images/sample5.jpg"><img src="images/thumbnails/sample5.jpg" alt="" /></a>
</div>
<script type="text/javascript">
    jQuery(document).ready(function() {
        $('#thumbnails').simplethumbs({slideshow: '#imageview'});
    });
</script>
…
News

JQUERY READ MORE “TEXT ABBREVIATOR” PLUGIN

Francisca Manuel

If you have a lot of user-generated content that you don’t limit the length on, so it can grow very large. To combat this, there is the UI pattern: a “read more” link available to show the remaining text for the long-winded texts, while just showing a snippet otherwise. Jquery.readmore is an easy way to do this.

Default Usage

<p class="short">
  (long text here)
</p>
$(".short").readmore();

Resulting Demo

Setting substring length

<p class="short">
  (long text here)
</p>

// adjust per call
$(".short").readmore({ substr_len: 50 });

// or permanently for all calls
$.fn.readmore.defaults.substr_len = 50;
$(".short").readmore();

This delimits the text shown to 50 characters, and is appended with the read more tag.…

Popup Builder Wordpress
Site Help
Powered by  GDPR Cookie Compliance
Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.