Placed in: Home arrow Programming arrow Webdesign viagra australia
viagra online
viagra sale
cialis online
cialis australia
Webdesign
jQuery DJ Hero - CSS3 and jQuery fun

Remember jTypingHero? This was a fun little game to test your typing skills based on the ever popular Guitar Hero. Lately, I came across some news about a new "Hero" game: DJ Hero. Since I really love Proof of Concepts/experimenting, I wanted to bring the vinyl to the browser. That's why I present to you: jQuery DJ Hero.

By combining CSS3 and jQuery, I created two records that you can start spinning (faster and slower) and even scratching is enabled. In a future version, this could be used together with some real sound (this version has no sound).

jQuery DJ Hero - CSS3 and jQuery fun

To achieve the desired effect, I made use of jQuery, Animate CSS Rotation and Scale jQuery Patch and the jQuery Easing library. The picture of the vinyl has been taken from stock.xchng.

Demo jQuery DJ Hero - CSS3 and jQuery fun   Download jQuery DJ Hero - CSS3 and jQuery fun

Since we're using CSS3's transform property (to rotate the vinyls), this example only works in browsers that support CSS3 (Currently, the latest versions of Safari, Firefox and Chrome support this). I've added a video for those people that don't use those browsers and still want to see how the effect looks like. Make sure to check out the demo and let's see how you can create that yourself.


Tags:  dj jquery css3 proof of concept experiment webdevelopment
 
Browser size aware content scaling

Just recently, I noticed something pretty cool at Google Images: When you resize your browser, search results are hidden/shown, depending if it makes a full row. It does really have a big advantage: you'll never have any "empty spots" on your website. The grid is always fully filled and results that don't fit in the grid, are simply hidden.

I wanted to recreate this technique using jQuery. Just like Google Images, it check how many images fit in each row and hides the one that fall off (depending on the browser size).

Browser size aware content scaling

The difference between my HTML and the one Google, is that Google uses a table to display the image. My version uses floating images (but essentially, they work the same). Just make sure to check out the demo.

Demo Browser size aware content scaling   Download Browser size aware content scaling

Now let's take a deeper look at the problem, the solution and how you create your own browser size aware content scaling.


Tags:  content scaling google images jquery webdevelopment webdesign
 
Create a mouse follower with smokey trail in Silverlight

Last week, I started experimenting with Microsoft Silverlight. I've never worked with the technique before, but after using it, I was impressed. It works pretty good and the separation of the XAML and CS file is great.

Today, we're going to create a Smokey Mouse Follower in Silverlight. This was my first experiment too and pretty fun to see. I have to admit that the layout can be improved in loads of ways, but this tutorial is intended to be for beginner Silverlight users.

Mouse Follower

We'll be using Microsoft Expression Blend 3 in this tutorial. Visual Studio will probably give the same effect, but I haven't tested it. We're going to create the program using Visual C#. The images (cursors) I used are from IconFinder.

Demo Smokey Silverlight Mouse Follower   Download Smokey Silverlight Mouse Follower

Make sure to check out the demo to see what we're going to create! As you can see, it's not really that useful, but pretty fun to see. Also, it's a great way to get in touch with Silverlight. Let's start!


Tags:  silverlight expression blend mouse follower smoke tutorial
 
Create a better jQuery stylesheet switcher

Style Sheet switchers (or "colour theme choosers") are not really that new. Apart from that fact, they still are pretty fun to use and cool to see. I was wondering how jQuery could help me achieve this technique. While searching, I came across several solutions.

There is a problem when using these techniques, which I will explain later. I created a little work-around to create a better jQuery stylesheet switcher. We'll simply change some colours for the user!

jQuery stylesheet switcher

Make sure to check out the demo to view what we're trying to accomplish.

Demo jQuery stylesheet switcher   Download jQuery stylesheet switcher

The cute little monsters used in the demo are created by Fast Icon (Dirceu Veiga). Now, let's take a look at how you can create something like this yourself!


Tags:  css stylesheet switcher jquery webdevelopment
 
Theatrical movie trailer with jQuery

Don't you wonder sometimes, when looking at something, how you can create something like that yourself? I have to admit that I do. This is why I came up with the Skype for Mac and the iPhone examples in your webbrowser. Today, we're trying something new in this Proof of Concept category: creating a theatrical movie trailer with jQuery

Theatrical movie trailer with jQuery

This technique could be really well used when creating a slide-show that just needs some text. Using the CSS letter-spacing property, we can really make it look like the movies.

Demo Theatrical movie trailer   Download Theatrical movie trailer

I'll leave out the CSS in this tutorial, since not much really important stuff is going on there. This example works best in Firefox - Although it works in Safari and Opera too, the letter-spacing CSS property gets rounded up (or down) and you won't be able to see the full effect. Also, you'll need to imagine the sound effects yourself.


Tags:  trailer jquery example proof of concept
 
jQuery Code Expander

There is a problem on the web. Displaying actual programming code takes away a lot of space of the webpage (especially the longer ones). You can split up the code in several parts, but that's really hard to read for programmers. You can leave it "as it is" and users would have to scroll a lot if they're not interested in the code itself. And scrollbars in code-examples - that's just horrible (and yes - that's what I have on this website).

I created a solution for this problem and call it the jQuery Code Expander. It does exactly what you think it does - Expand any code you want to place online using jQuery.

jQuery Code Expander

But, before you can expand anything, it has to be cropped. That's where the CSS kicks in. It's like a combination of using scrollbars and fully showing the code!

Demo jQuery Code Expander   Download jQuery Code Expander

This script only changes those elements that needs to be expanded and doesn't touch those who don't. An additional overlay image is added, just to show the user that it can expand the code example. Check out the demo and read below what the secret of this technique is.


Tags:  code expander jquery webdevelopment
 
<< Start < Prev 1 2 3 4 5 6 7 8 9 Next > End >>

Results 19 - 24 of 52
Subscribe

Subscribe to Marcofolio