Placed in: viagra australia
viagra online
viagra sale
cialis online
cialis australia
Art
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
 
The Polaroid Photo Viewer - Non-Full Screen

Pretty fast after I placed the Polaroid Photo Viewer with CSS3 and jQuery example online, I received loads of e-mails and comments requesting another feature. The original example was only full-screen, but people wanted it to "stick" to a box (Placing it inside a <div>).

By making a couple of changes to the original code, I managed to make this work too. So today, I present you the non-full screen version of the popular Polaroid Photo Viewer with CSS3 and jQuery.

The Polaroid Photo Viewer - Non-Full Screen

Try dragging the polaroids around in the demo. You'll be able to do so, but the surrounding division seems to prevent the user from actually dragging it outside it's container.

Demo The Polaroid Photo Viewer - Non-Full Screen   Download The Polaroid Photo Viewer - Non-Full Screen

Just like with the original example, this example only works on modern browsers supporting CSS3 (Safari, Chrome and Firefox 3.5). This probably would work with Opera too, but I haven't tested it.

Now to show you which small changes are made to the original script to make this one work.


Tags:  polaroid photo viewer css3 jquery webdevelopment
 
The Mac Skype App menu with CSS3 and jQuery

If you're a regular visitor of Marcofolio, you know I love to create (and share) some wicked Proof of Concepts (For example: the Polaroid photo viewer and the iPhone Contacts App). They are nothing more than showing some amazing potential of certain techniques.

Today, I wanted to transfer the amazing slick Skype (for Mac) layout to your own webbrowser. Not the full layout: Only the menu where all your friends are listed. For the nifty layout we're going to use CSS3 and for the extra functionality (ofcourse) jQuery.

The Mac Skype App menu with CSS3 and jQuery

Features:

  • Expanding and hiding the contact details.
  • Nifty layout using CSS3.
  • Extra info (behind each name that is not expanded) is added through jQuery.

Demo Mac Skype App menu   Download Mac Skype App menu

Sadly, just like all other CSS3 examples placed here, not all browsers support this functionality. Only browsers that support the -webkit prefix (Safari and Chrome) and the latest version of Firefox (3.5 through the -moz prefix) are fully working. Other browsers will show the menu without the extra markup.

OK, here we go! Let's see how you can create one of these wicked Skype menu's yourself. The users listed in the demo are the friends of Marcofolio (same that are placed in the footer) with their Twitter profile picture and links.


Tags:  skype css3 jquery mac how-to tutorial
 
Advanced keypress navigation with jQuery

A while ago, an article called "A fancy Apple.com-style search suggestion" was placed here. Many people loved it and already used the search suggestion in their latest web project.

Still, readers gave some criticism about the script. According to Jape, Simon and others the script was missing one vital element which the Apple search does have: keypress navigation (keyboard accessibility). For that reason, I'm presenting you a way you can improve that script yourself using advanced keypress navigation with jQuery.

Advanced Keypress Navigation

Check out the demo so you can try it yourself: There is a simple menu displayed which reacts to the Up and Down arrows, as well as Enter (or Return) to follow the link.

Demo Advanced keypress navigation   Download Advanced keypress navigation

The script is (a bit) advanced because of the extra functionality when the user combines the mouse hover and keypresses. Want to know how to create it yourself? Check out the source code or follow these steps in this tutorial.


Tags:  keypress navigation jquery webdevelopment
 
<< Start < Prev 1 2 3 4 5 6 7 8 9 10 Next > End >>

Results 43 - 48 of 106
Subscribe

Subscribe to Marcofolio