Articles Tagged with css
You are currently browsing 6 articles tagged with css.
How to Create a Scrolling Twitter Feed Using jQuery
Published Friday 24th of June 2011
In this tutorial I'll explain how to create one of those scrolling twitter feed boxes that are quite common on many websites today.
I'll be using jQuery as well as Remy Sharp's Silky Smooth Marquee plug-in.
The HTML
Most of the code will be generated with JS. But we'll add a container and a little "Loading..."-text directly in the HTML.
<div id="twitter">
<h2>Latest tweets</h2>
<p>Loading...</p>
<noscript>This feature requires JavaScript</noscript>
</div>I'll also use the noscript element to inform users without JS that they need to turn it on in order to see the tweets.
You could fetch the tweets using PHP and CURL but that makes your entire page halt until the tweets are loaded so I prefer the JS-approach.
The CSS
You can style it any way you like really but this CSS will make it look kind of like in the image above.
/* The container for the module */
#twitter {
background: #f1f2f8;
width: 600px; /* Up to you but remember to change the div width below as well if you change it */
padding: 0 10px;
overflow: hidden; /* clearfix */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}
#twitter h2 {
float: left; /* We'll make the heading sit on its own line next to the tweets */
width: 85px; /* Might wanna change this depending on the text in the heading */
margin: 0;
padding: 6px 0; /* I'll set the top and bottom padding here rather than in the container so as not to cut off any text */
font-size: 12px;
color: #4b9fff;
line-height: 1;
}
/* The marquee plug-in turns a marquee element into a div */
#twitter p,
#twitter marquee,
#twitter div {
float: left;
width: 505px; /* Container width - heading width - 10px (for some right padding) */
margin: 0;
padding: 6px 0; /* Again we set the padding in here so as not to cut text */
line-height: 1;
}
/* All the tweets will be links pointing to your page on twitter */
#twitter marquee a,
#twitter div a {
margin: 0 10px 0 0;
color: #333;
text-decoration: none;
}
/* The i is used to display the date of the tweet */
#twitter marquee a i,
#twitter div a i {
font-style: normal;
color: #999;
}The JavaScript
Now for the interesting bits.
var Twitter = {
init: function () {
// Pass in the username you want to display feeds for
this.insertLatestTweets('realjknoxville');
},
// This replaces the <p>Loading...</p> with the tweets
insertLatestTweets: function (username) {
var limit = 5; // How many feeds do you want?
var url = 'http://twitter.com/statuses/user_timeline.json?screen_name=' + username + '&count=' + limit + '&callback=?';
// Now ajax in the feeds from twitter.com
$.getJSON(url, function (data) {
// We'll start by creating a normal marquee-element for the tweets
var html = '<marquee behavior="scroll" scrollamount="1" direction="left">';
// Loop through all the tweets and create a link for each
for (var i in data) {
html += '<a href="http://twitter.com/' + username + '#status_' + data[i].id_str + '">' + data[i].text + ' <i>' + Twitter.daysAgo(data[i].created_at) + '</i></a>';
}
html += '</marquee>';
// Now replace the <p> with our <marquee>-element
$('#twitter p').replaceWith(html);
// The marquee element looks quite shite so we'll use Remy Sharp's plug-in to replace it with a smooth one
Twitter.fancyMarquee();
});
},
// Replaces the marquee-element with a fancy one
fancyMarquee: function () {
// Replace the marquee and do some fancy stuff (taken from remy sharp's website)
$('#twitter marquee').marquee('pointer')
.mouseover(function () {
$(this).trigger('stop');
})
.mouseout(function () {
$(this).trigger('start');
})
.mousemove(function (event) {
if ($(this).data('drag') == true) {
this.scrollLeft = $(this).data('scrollX') + ($(this).data('x') - event.clientX);
}
})
.mousedown(function (event) {
$(this).data('drag', true).data('x', event.clientX).data('scrollX', this.scrollLeft);
})
.mouseup(function () {
$(this).data('drag', false);
});
},
// Takes a date and return the number of days it's been since said date
daysAgo: function (date) {
// TODO: Fix date for IE...
if ($.browser.msie) {
return '1 day ago';
}
var d = new Date(date).getTime();
var n = new Date().getTime();
var numDays = Math.round(Math.abs(n - d) / (1000 * 60 * 60 * 24));
var daysAgo = numDays + ' days ago';
if (numDays == 0) {
daysAgo = 'today';
}
else if (numDays == 1) {
daysAgo = numDays + ' day ago';
}
return daysAgo;
}
};
Twitter.init();And there you have it. View the scrolling twitter feed in action here.
Join 33 others and post a comment
SASS is Brilliant
Published Monday 18th of April 2011
I've used my own CSS constants parser for a few years now and I can't imagine writing CSS without it nowadays.
I wrote the parser years ago when I had more time for my own projects and since then I've come up with loads of things I've been wanting to add to it.
Quite recently TB recommended SASS to me in the comments to my CSS Wish List article and for a recent project I gave it a go.
SASS has got everything on my todo-list for my own parser + loads more. Its @mixins are almost identical to my own take on constants but SASS' @mixins has support for many things I have yet to add to my own parser.
SASS also comes with variables and a bunch of super handy color functions.
It doesn't merge every file in the CSS-dir like mine, but instead loops through @import directives and pulls all the code in to the same file.
I'm going to convert all my handy CSS constants to SASS @mixins shortly and I've also looked into Compass' collection of @mixins based on popular CSS frameworks.
Writing CSS without @mixins (or similar) is not an option for me anymore and with all the other handy functionality SASS comes with it's an obvious choice for me.
Thus I will be deprecating my own parser and start using SASS exclusively from now on. It's an added bonus that other smart people are constantly improving it as well.
Now if I could only find a substitute for aFramework... :)
Join 2 others and post a comment
Vendor Prefixes are Getting Ridiculous
Published Friday 15th of April 2011
$chat-user-box {
background-color: #e9f2f8;
background-image: -moz-linear-gradient(top, #e9f2f8, #dae9f4); /* FF3.6 */
background-image: -ms-linear-gradient(top, #e9f2f8, #dae9f4); /* IE10 */
background-image: -o-linear-gradient(top, #e9f2f8, #dae9f4); /* Opera 11.10+ */
background-image: -webkit-gradient(linear, left top, left bottom, from(#e9f2f8), to(#dae9f4)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #e9f2f8, #dae9f4); /* Chrome 10+, Saf5.1+ */
background-image: linear-gradient(top, #e9f2f8, #dae9f4);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#e9f2f8', EndColorStr='#dae9f4'); /* IE6–IE9 */
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
-o-background-clip: padding-box;
-ms-background-clip: padding-box;
background-clip: padding-box;
position: relative;
margin: 0 0 4px;
padding: 5px 5px 5px 45px;
border: 1px solid #a3b5d9;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-o-border-top-right-radius: 5px;
-o-border-bottom-right-radius: 5px;
-ms-border-top-right-radius: 5px;
-ms-border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}FFS
Join 1 others and post a comment
How to Create a Carousel with CSS and jQuery
Published Saturday 19th of March 2011
Almost every website I visit nowadays has one of those fancy carousel's in the top to display the most valuable content to visitors.
In this article I'll explain how you can create one yourself using jQuery, the jQuery.scrollTo-plug-in and CSS.
First, we'll start with the HTML.
Join 1 others and post a comment
CSS Wish List
Published Friday 18th of March 2011
CSS keeps getting better and better and browser vendors implement more and more every year (except for you-know-who that tend to wait a little more like 5 years) but there's always stuff missing I wish it'd had.
Photo by Francesco MarinoHere's a few things I wish they'd add in the future.
Join 4 others and post a comment
Accessible, Stylish Modal Windows With Modern CSS
Published Wednesday 12th of August 2009
With this tutorial I will try to show you a way to do accessible, stylish modal windows (complete with an overlay-div) without using a single image and just a couple of div-elements.
Our goal is to create a generic modal that can be re-used and that has these basic features:
Modals should be hidden by default, except if the user has JavaScript disabled
The modal should be centered in the view port, even as the user scrolls
The modal should have those semi-transparent, rounded corners I've been seeing a lot of lately :)
There should (obviously) be an overlay behind the modal, preventing the user from interacting with anything behind it
Clicking outside the modal (i.e. on the overlay) should hide the overlay as well as all open modals (could be optional)
Clicking a link pointing to a modal (a[href=#login] for example) should open the modal and display the overlay
Don't use any images and keep it accessible!
You can check out the example here. We'll kick off simple with the HTML.
Join 7 others and post a comment