blogfreakz.com » Mootools

How To Enable Mobile Templates on Blogger

Nancy — Tue, 25 Oct 2011 22:38:30 +0000

Hey Guys,

Make sure that you have enabled your mobile template on blogger, so you can get in touch with your readers while they’re on the go! Just login on your account and setup mobile template for your blog on blogger.

This tutorial uses a new version of blogger, if you are using an older version please upgrade to bloggers advance with a click. (super easy)

1. Login to your blogger account on blogger .com

2. Go to on Main Menu for your blog -

3. In the Template pages, setup on Mobile views

4. Click Setting (gear icons) and enable / checking “Yes. Show mobile Template on mobile devices.”

5. Choose Template for Mobile views and Save configuration.

6. Check your blog using any mobile device:

For example: www.tofu-burger.blogspot.com

Mobile template -> ‘Picture Window’ -> enabled makes everything way easier and faster to search and find posts on mobile devices.

Incoming search terms for the article:

The Wall – Draggable & Endless Content Galleries For MooTools

Mufti Ali — Tue, 12 Jul 2011 16:13:59 +0000

The Wall is plugin for MooTools that enables you to create an endless grid. You choose the number of elements, The Wall will see to the rest. Every moment you may know the position of your wall or move it where you like better by clicking or dragging it.

With The Wall you decide the position of your contents punctually. Every plug is ready to hold your contents, pictures, videos, texts, everything. You are the one who chooses how to show your information.

With The Wall you may have an endless grid or an original draggable coda slider, if you like better. You’re right! The Wall can work in a traditional or draggable coda fuctionality. 2 functions and a new and original interaction system.

Requirements: MooTools 1.3.2+
Demo: http://wall.plasm.it
License: MIT License

Incoming search terms for the article:

MochaUI – Mootools Web Applications User Interface Library

Mufti Ali — Fri, 15 Apr 2011 12:50:10 +0000

MochaUI is a web applications user interface library built on the Mootools JavaScript framework, that you can use for create, web applications, web desktops or widgets.

MochaUI library does not use any images but canvas tags for gradients, rounded-corners or shadows. MochaUI allow us to create horizontally and vertically fluid layout modules with columns and panels easily. Columns and panels can displayed as tabed, panel can be collapsed, expanded, and resized.

Requirements: Mootools framework
Demo: http://mochaui.org/demo/
License: MIT License

Incoming search terms for the article:

CeraBox – Alternative Lightbox for MooTools

Mufti Ali — Thu, 10 Feb 2011 13:19:00 +0000

CeraBox is alternative lightbox build on MooTools 1.3, inspired by Fancybox.net. CeraBox allow us to display images, SWF files or HTML file. It can load iframes and make Ajax requests.

CeraBox can grouping images to be presented as a gallery where they can be browsed with prev-next buttons. CeraBox requires MooTools 1.3 +.

Requirements: MooTools 1.3 +
Demo: http://cerabox.ceramedia.nl/
License: Other License

Incoming search terms for the article:

30 All-Time Greatest MooTools Plugins

jakerocheleau — Mon, 10 Jan 2011 13:34:43 +0000

Alongside jQuery MooTools is possibly one of the most comprehensive JavaScript libraries to date. The package not only offers exceptional documentation but developers are able to create plugins running off MooTools. These have been shared thoroughly around web design blogs and between social networking groups.

Here we have a great collection of the most popular plugins for MooTools. The range includes UI elements, graphs and canvas creation, image cropping, dropdown menus, animation effects, and so much more! For more info check out the MooTools Forge Page on further documentation.

Vertical CSS Show/Hide Menus

The Vertical menu was created with a toggle switch between states. There is an active and hidden view which displays between a calming transition effect. All code is written standard through MooTools and works simply by including the project files.

Skype-style Buttons with MooTools

Here you are able to create a unique Skype-style button set for MooTools. The demo requires just a bit of CSS and some external images to wrap everything together. This effect will allow for great contact fields.

Pamoorama

A very creative JavaScript class built on the mootools framework. Here you create a fielding box to house your image and allow the user to drag and drop positioning. Dragging from right to left will move the view between areas on the picture. This effect only works on larger images and has been tested in mostly all modern browsers.

Kroppr

Ever seen the cropping effects for avatars or profile pictures in social networking applications? These have been developed over time and refined through 3rd party libraries. With Kroppr you are able to add these effects through MooTools and create your own dynamic image cropping script!

MooTools Charts

With MooTools Charts you have the ability to draw data on the fly. These graphics include datasets for digital graphics such as bar, pie, plot-point or tables. The framework is very detailed and contains thorough documentation on their functions.

Mediabox Advanced

I’m sure most are familiar with the popular lightbox plug-in for the jQuery library. Mediabox Advanced is a step up offering huge potential for in-page fade in popups. You can store all types of data and you control all settings for each box. Content includes videos, text, external pages, any many other media types.

AutoCompleter

AutoCompleter is a newer plugin under development in Germany. It allows you to create a search bar autocomplete function which matches that of Google Instant. This promotes growth in many areas and with Ajax calls being easier than ever implementation is a snap.

Facebook Sliders with MooTools

Facebook has offered many custom UI elements since launching its new design just a year or 2 prior. Here David Walsh goes over a very simple tutorial for developing a MooTools plugin for UI elements. The design mirrors that of Facebook’s sliders and gives precise control to user input fields.

SmoothScroll

Smooth scroll is a versatile plugin useful for many web designers. Utilizing DOM functionality in MooTools you can create a smoothing effect with each mouse scroll. This isn’t supported in all browsers, although results produced turn out fantastic in all the demos I’ve tried.

iPhone Checkboxes

Also developed by David Walsh is this great collection of iPhone checkboxes. These are all created using some basic HTML and CSS markup to cleverly decorate form input fields. From here MooTools can check the element’s state and change each from on to off based on a mouseclick event handler.

OmniGrid

Here we have another advanced data grid plugin. This allows you to manipulate input data (even from RSS or Atom feeds) and plug in to dynamic data fields. You are able to create tables on-the-fly with custom scrollbars and sorting functionality for columns.

ImageCaption

Image Caption is a very handy function for all MooTools enthusiasts. You are able to add a unique custom caption beneath each image without wrecking the page flow on your site. Each image is given a small padding area and all content is customized beforehand with careful CSS techniques.

Content Slider Class v2

This is a simple plugin with features allowing to create content sliders in-page. HTML doesn’t offer many solutions and plain JavaScript can get messy. MooTools handles this nicely and with some recent alterations the Slider Class v2 contains many bug fixes and new features.

Ultra-Versatile Slider

Although similar as above this plugin was developed from Antonio Lupetti of Woork. Ultra-Versatile Slider is yet another great content slider plug-in with support for custom HTML elements. All of the code is documented and throughout the post Antonio explains many of the key points at integrating the plugin.

Moogenda

There aren’t many powerful apps allowing you to run your own dynamic calendar online. Moogenda does just this in a very sophisticated way – all through the power of the MooTools framework! The plugin allows for events to be posted and edited and custom scope can be set between year/month/day views.

Custom Missing Image

Most browsers are known for their “image not found” graphics. The small red x from Internet Explorer is the most prominent memory of this. This plugin runs off MooTools to counter the browser’s missing image and replace with one of your own choosing. Although not very practical it can provide a nice branding effect not seen in many sites today.

TwitterGlitter

Here is one of the few plugins to connect into an external API. By pulling data from your Twitter feed you are able to manipulate the tweets into your own board. This plugin works under its own class of functions and can be shared between documents with ease.

Twitter Emulation with MooTools 1.2

Another great Twitter tool based in JavaScript and powered by MooTools. This Twitter emulator not only works quickly but offers extensive documentation into the unknown functionality. I wouldn’t recommend one plugin over another, rather test both out and see which you prefer.

Newsvine-Style News Ticker

We’ve all seen news ticker feeds and open source projects pooling search results. Newsvine is prominently known for showcasing a fastidious and impressive news feed ticker. Using this plugin you are able to create and pull RSS data into a Newsvine-like feed ticker for your own website!

MooFlow

Similar to cover flow for the iTunes store, MooFlow is a clone script creating the same effect. MooTools has a powerful graphics library so manipulating the animation and scroll bar are the only convoluted tasks involved.

Reflections

Yet another great effect taken from the marketing strategies of Apple Computers. Image reflections are popular in web 2.0 design and it’s been created in the past through Flash and Java applets. Now JavaScript allows you to create such a run with the Reflections plugin through MooTools.

Morph Effect On Mouseenter/Mouseleave

Event handlers are some of the most important events for MooTools activists. Here we are checking for a mouse over event which morphs content underneath the container division. This isn’t an entirely useful plugin, but it does provide some nice aesthetics.

Track Outbound Analytics Links

Google Analytics is also another favorite client of mine. Tracking traffic data is simple with this MooTools plugin. You are able to see how many visitors are clicking your links and which are the most popular. This can be combined with other graphics and maths plugins to create your own graph representing website traffic data.

Window Growl

Window Growl is a competitive plugin for MooTools similar to lightbox. This is a much simpler effect which can pop up mid-screen or into a corner of the page with a short amount of information. This is great for letting the user know you’ve saved their profile settings or updated a small piece of the web page.

MIF Tree

Tree structures are very difficult to create in HTML and even with HTML5/CSS3 standards things are still difficult. MIF Tree is a MooTools plugin allowing you to create tree directories on-the-fly. These will display properly in browser and are even open for edits to folders and file names.

mooSocialize

Social media sharing buttons are all the rage. You can see badges sewn across blogs throughout Google and beyond. mooSocialize is a unique plugin which contains all the sharing code needed for dozens of popular social media apps. The sharing widget is powered through MooTools and features custom input functionality.

WP Tools

WP Tools is a great set of DOM effects for manipulating popular WordPress elements. The plugin lets you change site appearance and CSS documents on the fly – or even update them with the passing of each day (morning to night). There are plenty of options and effects to mess around with. Check the documentation link for further info.

Sliding Login Panel

Just another popular sliding login panel. Powered by MooTools many of the animation effects are clean and browser friendly. Although not as popular as the earlier page slider, this does contain more room for visitors to browse while staying unobtrusive to the reader.

MooTools.Floor

Math isn’t always everybody’s favorite task. When developing with math problems often times we ask ourselves why even bother? MooTools.Floor is a revolutionary new platform which allows for complex mathematical manipulation to be performed quickly and efficiently. The project is still under active development and offered free to download.

BySlideMenu

Just another slider menu? Actually here we are working with a simple slide effect which can be used to house menu items. These could also be tabs inside a sliding content box which houses individual page items. Either way give it a try – just remember to install MooTools before activating!

Incoming search terms for the article:

MooPlay – Build Your Own Custom HTML5 Video Player

Mufti Ali — Thu, 09 Dec 2010 03:09:16 +0000

MooPlay is a set of controls, built on top of MooTools that allow Us to build and customize HTML5 Video player. MooPlay support for subtitles which is loaded through an ajax request and synchronized with the video. Supported formats are SubRip (.srt) and SubViewer (.sub). You can also switch the view to fullscreen and vice versa.

Features

a play / pause control
buttons to move inside the video (rewind and fast forward)
an interactive play progress slider
a load progress bar
a volume slider and a mute button
subtitles loaded through an ajax request and synchronized with the video. Supported formats are SubRip (.srt) and SubViewer (.sub)
full page display
current and/or remaining time

The video element methods can be called by other scripts, MooPlay objects will adapt themself to any state changes. About a hundred tests are running on each new step, to make sure all the functionnalities are still available.

Requirements: MooTools, Modern Browser
Demo: http://mooplay.challet.eu/
License: GPL License

Incoming search terms for the article:

MooTune – MooTools Class For Logging Events, Errors & AB Tests

Mufti Ali — Thu, 02 Dec 2010 15:18:08 +0000

MooTune is MooTools class for logging events, errors and AB tests to multiple backends such as Google Analytics, Mixpanel or your own server logs. It can be used to gain insights into the actions your user’s take on your site, the errors they encounter and the affect of variations on the site with their interactions.

To implement MooTune, you need to setup the tracking scripts for the backend services you’d like to use (e.g Google Analytics, Mixpanel). Once you create an instance of MooTune, you can add calls to myMooTune.handleEvent(obj) in your code wherever something happens that you’d like to log to your backend(s). For each call to handleEvent, MooTune will send the appropriate call to all of the backends you have specified.

MooTune supports a simple method for doing A/B (split) testing. Actually, it’s multivariate (as many options as you want). When instantiating MooTune, pass in an array of tests.

Requirements: MooTools Framework, tracking scripts (e.g Google Analytics, Mixpanel)
Demo: https://github.com/3n/MooTune/
License: Other License

Incoming search terms for the article:

MooVES – MooTools Video Enhancement System

Mufti Ali — Sun, 07 Nov 2010 16:23:49 +0000

MooVES is The MooTools Video Enhancement System, a plug-in for MooTools (1.2+ or 1.3+) which allows a preview video from many video types: YouTube, Vimeo, Dailymotion, Blip.tv etc. It supports also HTML5 video tag features. The plug-in is unobtrusive and displays the link to the video and a notice message when JavaScript or Adobe Flash Player are not enabled in the user’s system.

The class is extensible, you can integrate other video sharing websites and network. It is completely customizable.

Requirements: MooTools(1.2+ or 1.3+)
Demo: http://mooves.firebuntu.com
License: MIT License

Incoming search terms for the article:

Purr – MooTools Growl-Style Pop-Up Notifications

Mufti Ali — Fri, 15 Oct 2010 11:15:56 +0000

Purr is an advanced MooTools notifications class that allows you to show growl-style pop-up notifications. It also provides Elements.alert() to allow a notification to be popped above of an existing element.

This notification plugin can be used to show any kind of notifications on web pages using custom positioned modal windows. You can dismiss the message by clicking on it. You can also add extra class on message box for styling purpose.

Requirements: MooTools Framework
Demo: http://re5et.github.com/projects/purr/demo/
License: Free License

Incoming search terms for the article:

Sexy Lightbox – Lightweight and Sexy Lightbox

Mufti Ali — Wed, 08 Sep 2010 06:26:35 +0000

Sexy Lightbox is a more lightweight and sexier clone of the classic Lightbox. It was constructed thinking about web designers, easy installation and use. Sexy Lightbox is compatible with HTML! That means that you can show elements, pages, videos, and all what you want!

Large images (very large images ) are automatically adjusted to window. Sexy Lightbox 2 requires Mootools 1.2.3 or jQuery 1.3.2, and is compatible with all modern browsers (and Internet Explorer).

Requirements: Mootools 1.2.3, jQuery 1.3.2
Demo: http://www.coders.me/ejemplos/sexy-lightbox-2/
License: MIT License