Articles Tagged with jquery
You are currently browsing 9 articles tagged with jquery.
jQuery 3D Circle
Published Monday 12th of December 2011
I wanted to learn more about CSS 3D transforms so I started experimenting with the login page on SleekPHP.
It all turned into a jQuery Plugin called "3D Circle". I haven't uploaded it to the site yet but you can find both the CSS and the JS (beta) on Google code.
There's also a demo you can try out here (only tested in Chrome).
It's just a save of the HTML, CSS and JS on that page so you won't actually be able to sign up or do anything else. That's not the point of the demo though so.
I've only tried it in Chrome but use all vendor prefixes in the CSS so if your browser supports them all it should work in it too.
It took me a while to get everything the way I wanted it. The circle is automatically generated based on the items on the page. So if you add or remove items the circle adapts.
First I tried calculating the positions myself using sin and cos and apply them to the item's translateX and translateZ values. This worked fine before I started rotating the items as well. Without rotation the items were all facing the screen but they were at least in a circle.
When I started rotating the items all hell broke lose and nothing looked right. After some debugging I noticed that the rotation's origin is always from the 0, 0, 0 position. So the item would no longer rotate around itself but around the point at 0, 0, 0.
Thanks to this, though, it was much easier than having to calculate the circle positions myself. All I needed to do was place all the items at z: radie and then rotate them by 360 deg / num items.
Doing that placed all my items in a nice circle. Now to rotate this circle all I needed to do was rotate the parent element of all the items.
The problem with this, though, is that some items will be "in front" of the 0 z pane. That means they will look pretty much twice their size and that's not what we want.
My first thought was to simply move the wrapper of the items in the z pane, but doing that introduced the same problem I had before with the items themselves; now the rotation of the wrapper would go around its 0, 0, 0 position while it's sitting at 0, 0, -radie.
The only solution I could come up with was to wrap the circle in yet another element used only to move the circle in x, y or z.
So the final HTML requires quite a lot of wrapping elements. If you're doing this to a list of elements though you'll already have a
uland possibly a wrappingnavorsectionso you'd only need to add one extra element.The outer wrapper is the "stage" for the circle. It contains the perspective and perspective-origin properties. Without these the transforms will all be flat.
The second wrapper is the "mover" for the circle. It is only used for moving the entire circle its radie in the z pane. This way we avoid having elements twice their size.
The third wrapper is the actual circle and its direct descendants are the circle items.
As you can see the demo is from SleekPHP's login page, you can check out SleekPHP's logger at the bottom of the page. I've got loads of other work atm so progress has been a bit slow lately.
Be the first to post a comment
New Project; SleekMobile
Published Monday 22nd of August 2011
Like I've mentioned before I've been working a little with jQuery Mobile lately and there's a few things I feel can be done differently.
jQuery Mobile requires you to put a lot of extra attributes in your HTML elements and it also injects a bunch of divandspanelements in your code.That's why I started writing my own. And instead of data-attributes or .classes SleekMobile is built using SASS @mixins.
Head over to the documentation to find out more.
Join 1 others and post a comment
Thoughts on jQuery Mobile
Published Monday 22nd of August 2011
I've been working with jQuery Mobile a bit lately and while it's a really great lib with awesome developers behind it, I felt that there's a few things that could be done differently.
For one it requires you to write a lot of extra HTML. Here's an example of a connected list of buttons with icons:
<!-- Normal HTML -->
<nav>
<a href="#">Item 1</a>
<a href="#">Item 2</a>
</nav>
<!-- jQuery Mobile -->
<nav data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button" data-icon="arrow-r" data-theme="c">Item 1</a>
<a href="#" data-role="button" data-icon="arrow-r" data-theme="d">Item 2</a>
</nav>As you can see there's quite a lot more code in the jQM version, and most of it has only to do with styling.
jQuery Mobile then runs through your HTML and injects
spananddivelements here and there. Here's an example of a list of links:<!-- Normal HTML -->
<ul>
<li><a href="#">Link</a></li>
</ul>
<!-- jQuery Mobile -->
<ul data-role="listview" data-inset="true" data-theme="c">
<li><a href="#">Link</a></li>
</ul>
<!-- After jQuery Mobile's finished -->
<ul data-role="listview" data-inset="true" data-theme="c" class=" ui-listview ui-listview-inset ui-corner-all ui-shadow ">
<li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
<a href="#" class="ui-link-inherit">Link</a>
</div>
<span class="ui-icon ui-icon-arrow-r"></span>
</div>
</li>
</ul>This can get somewhat confusing when you're trying to script or even style elements and suddenly your HTML structure is completely different.
It's particularly annoying when it comes to forms and updating form elements that have been turned into
divs andspans.Also, I felt it wasn't entirely straight forward on how to best override some of jQM's default settings for paddings/margins and even themes.
What are your thoughts on jQuery Mobile?
Be the first to post a comment
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
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
New jQuery Plug-in
Published Tuesday 4th of January 2011
I recently wrote a little plug-in that helps with creating progressively enhanced Google maps.
The way it works is that you, as a user, create a static Google map using the Google Static Maps API and then simply run the plug-in on a parent-element of said static map which will in turn replace the static map with a dynamic one.
Setting up a static map is as simple as creating an img element and setting the src attribute to the static map API's URL:
<img src="http://maps.google.com/maps/api/staticmap?center=59.33961,18.080712&zoom=15&size=440x200&sensor=false&markers=59.33961,18.080712" alt="" />Doing it this way assures even users without JavaScript gets a map and you only have to do it once. The plug-in reads the attributes found in the src of the img and generates the JS-map based on those.
It's still in beta and doesn't support everything but do have a look.
Be the first to post a comment
Some New jQuery Plug-ins
Published Thursday 30th of September 2010
Since I'm back at work that means I'm also back at writing jQuery plug-ins.
I've added a couple new to the jQuery page today. More will be added shortly.
'ta luego
Join 1 others and post a comment
How to Build an aFramework Module
Published Friday 16th of April 2010
As a follow up to "How aFramework Works" I thought I'd explain how to build your own modules for aFramework.
It's actually very simple. Of course you'll need to know the languages you'll be writing but I assume you do. The simplest modules consist of nothing but HTML.
Be the first to post a comment
New jQuery Plug-in; Slide Presentation
Published Monday 22nd of March 2010
I'm trying to put together a little intro/demo for aFramework so I built this slide plug-in for jQuery.
Ultimately I didn't feel it was what I was after with the aFramework intro but perhaps someone will find it useful.
Run it on a container of a list of images with text and the plugin will slide through all the images, stopping on each to display all the paragraphs of text.
The HTML needs to be:
div: container
ul
li: the first step in the slide
img: the image to be displayed in this step
p: first paragraph of text to be displayed
p: second paragraph of text...
li: the first step in the slide
img: the image to be displayed in this step
p: first paragraph of text to be displayed
p: second paragraph of text...
li: the first step in the slide
img: the image to be displayed in this step
p: first paragraph of text to be displayed
p: second paragraph of text...And then simply run the plugin on the container and it'll do the rest. You can override the default width/height settings, their styling is only on a single class (.jquery-slide-presentation) so target your container's ID instead and you're gtg.
Be the first to post a comment