You are using Internet Explorer. Have you considered upgrading?
You have here in this article a number of 65 interesting Wordpress hacks or articles that will teach you in detail how to edit your WP theme like a Wordpress rockstar.
In today’s article I’m going to take a look at 5 pseudo-classes that will simplify our design process and reduces a lot of time to create a certain visual effects. You will also find demonstration below each point.
Even though CSS3 is still in the development stages, it is the new craze that many web developers are excited about. CSS3 is something that will take web…
My journey into Dojo javascript has been exciting and I’m continuing to learn more as I port MooTools scripts to Dojo. My latest experiment is porting a simple new scroller from MooTools to Dojo. The code is very similar!
The news items are placed into list items. The UL will be the element that’s animated.
#news-feed { height:200px; width:300px; overflow:hidden; position:relative; border:1px solid #ccc; background:#eee; }
#news-feed ul { position:absolute; top:0; left:0; list-style-type:none; padding:0; margin:0; }
#news-feed ul li { min-height:180px; font-size:12px; margin:0; padding:10px; overflow:hidden; }
The absolute positioning is essential to proper animation. Unlike my MooTools example, this example no longer requires a fixed height for each news item. I did add a minimum height so only one item shows up within the scroller window at a time.
dojo.require('dojo.NodeList-fx');
dojo.addOnLoad(function() {
/* settings */
var list = dojo.query('#news-feed ul'),
items = list.query("li"),
showDuration = 3000,
scrollDuration = 500,
scrollTopDuration = 200,
index = 0,
interval;
/* movement */
var start = function() { interval = setInterval(move,showDuration); };
var stop = function() { if(interval) clearInterval(interval); };
var reset = function() {
list.anim({ top: 0}, scrollTopDuration, null, start);
};
/* action! */
var move = function() {
list.anim({ top: (0 - (dojo.coords(items[++index]).t)) }, scrollDuration, null, function(){
if(index == items.length - 1) {
index = 0-1;
stop();
setTimeout(reset,showDuration);
}
});
};
/* stop and start during mouseenter, mouseleave */
list.onmouseenter(stop).onmouseleave(start);
/* go! */
start();
});
This is where I have the epic description…but the above code (at least for MooTools users) should look familiar. The logic is exactly the same but the code uses dojo.* methods instead of MooTools’ Fx, $$, $, and Element.Dimensions methods.
window.addEvent('domready',function() {
/* settings */
var list = $('news-feed').getFirst('ul');
var items = list.getElements('li');
var showDuration = 3000;
var scrollDuration = 500;
var index = 0;
var height = items[0].getSize().y;
/* action func */
var move = function() {
list.set('tween',{
duration: scrollDuration,
onComplete: function() {
if(index == items.length - 1) {
index = 0 - 1;
list.scrollTo(0,0);
}
}
}).tween('top',0 - (++index * height));
};
/* go! */
window.addEvent('load',function() {
move.periodical(showDuration);
});
});
The above code was taken from my original post. Take a moment to compare the Dojo and MooTools code.
What do you think? Three Dojo posts in — what are your thoughts about Dojo to this point?
Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!
Create a Simple News Scroller Using Dojo
Related posts:
This article with the title 30 amazing css ajax form will explain the various techniques, tutorials, examples relating to the form.
jQuery has made our life easier to achieve great result. It’s time to show you something cool. Check out the these websites, they all are using pretty amazing animation and intensive javascript effects!
I wanted to bring attention to an outstanding presentation given by MooTools Core Developer Christoph Pojer. Given at FOSDEM 2010, Christoph provides an overview of what MooTools is, who should use it, how it should be used. Examples are given throughout the presentation.
I highly recommend MooTools users of all experience levels watch this video, as well as jQuery or Dojo users looking to simply understand what this framework is about.
Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!
“MooTools as a General Purpose Application Framework” by Christoph Pojer
Related posts:
With numerous lightbox scripts I have used so far, I often found myself spending much more time in setting up things then I wanted. On almost all of them you first need to mark up your thumbnail gallery, then paste some images, then paste some CSS, then initiate JavaScript functions…This article is all about simplifying the process!
Margins and padding are some of the most widely used styles in CSS, but are often the source of frustration in cross-browser compatibility.
The best firefox addons for every day use which help you in getting your work done easily.
Authors
