Almost two years back, devongovett published a small JQuery plugin on his blog. The goal of this plugin was to allow developers to add the ‘text-overflow: ellipsis’ behavior to their websites in all browsers using JQuery. This CSS3 feature adds an extra option to the ‘text-overflow’ property that allows developers to automatically add three ending dots (e.g. ‘…’) to website content that is to large to fit their container. All browsers except FireFox support this new CSS3 feature and it was suspected that this feature would therefor be added to FireFox 3.1 (released June 30, 2009 under version number 3.5). Currently, I am running the most recent stable version of FireFox (being 3.6) and developers are still waiting for Mozilla to include this feature in their browser. For one of my current projects I also required the ‘text-overflow: ellipsis’ behavior so I rewrote the script from devongovett to work with MooTools 1.3. Read more »
Tag Archives: "mootools"
Recently, MooTools released a brand new version of their JavaScript library with new exciting features like the new Slick engine. Though I was at first very excited about this, my excitement was gone within seconds when I noticed that all JavaScript parts of my website did not function properly anymore when using the backward compatible version of MooTools 1.3. After some research, I noticed that calls using Request.JSON were failing on the whole website, attempting to call the ‘onFailure’ method I defined in the options. Realizing this must have been one of the ‘big changes’ that would break backward compatibility, I browsed to the blog with information about the new MooTools 1.3 release. But after reading the whole page I could not find a mention of the issue I had: the issue is not mentioned in the ‘Notable changes in 1.3′-list, neither is it discussed in the blog itself. I realized the new documentation would have to help me out and after some playing with the code I figured it out. Read more »
The last week I have been working on various projects for ScanYours and some of its customers. For ScanYours, I was working on a few features for the website which will be released in the coming weeks. One of this features includes a box with several summaries from our news section that did not fit properly within the page. To make the box fit, I reduced its height and wrote a script to let the items scroll in the containing box. The script below scrolls down one item at the time with an interval of five seconds (5000 milliseconds), while the scrolling itself takes one full second (1000 milliseconds) to make the scrolling look smooth and fancy. Read more »
In an old version of XirtCMS, I have been using a multiple select-field in the administration panel for quite a long time. A few months back, a colleague of me commented on it and told me that the list was not really user friendly. The most common problem with the multiple select-field is that the selection of options might get lost when a user clicks on one item by mistake, without holding the [Shift]-button. Last week, I was rewriting one of the configuration panels using a multiple select-field and I decided to come up with a solution for the problem mentioned. On the Internet, I found a nice script that did more or less what I wanted: replace the multiple select-field in such a way that functionality was maintained, while eliminating the option to accidentally deselect the options. The script was written for an older version of MooTools (v 1.11) and in the repository I could only find a bad port (though working) for MooTools v1.2. In addition, the script did have some flaws which made it hard for me to implement it in the current version of my application. I therefor decided to rewrite the whole class using the ideas from the mentioned script, while taking care of some of the flaws. Read more »
As promised, I made a rather simple example using the mentioned CSS (level 3) syntaxes. The demo has been build using a very simple login screen (two fields) with a leading text introducing the demo. In total, only one image has been used for the background of the fieldset (the gradient) as all other effects were created using CSS (level 3). While you could use one background image including a shadow and rounded corners for the inner box in some cases, I do not recommend this as this is not flexible enough when you are loading dynamic content (thus varying the height of the box). Read more »
You might still remember the messy, colorful and static pages that were common in the nineties when the Internet became available for the majority of the public. The styling of these pages was mostly (if not always) done through HTML-tags and attributes with limited capabilities. With the introduction of CSS (level 1) and CSS (level 2.1) in 2009 it became easy to separate complex styles and code from each other, which enabled developers to create richer designs fitting the specific needs for the website developed. Although CSS (level 3) is still under development, some aspects of this new version of the markup language are already being used on many websites using workaround and images. Examples can be found on many Web 2.0 websites in the form of rounded corners, box-shadows and opacity. In two blogs, I will describe how you can use the new features of CSS (level 3) in such a way that the website will still be viewable in all A-grade browsers (though probably less fancy in non-supporting browsers). Read more »
ScanYours Weblog
ScanYours is your partner for internet consultancy. We focus on eStrategy, online marketing, design and creation, market research, and web development. Our goal: to increase online turnover and to improve online services. ScanYours works with motivated people, broad knowledge and effective tools. We combine fun and energy to deliver the best job possible.
On our weblog we write about the developments and stories that keep us inspired. Subscribe to our RSS-feed or follow us on Twitter or Facebook to receive the latest updates.