Placed in: Home arrow Programming arrow Webdesign comprar viagra en espaƱa
comprar viagra online
comprar viagra generico barato
comprar cialis generico online
comprar cialis online seguro
Webdesign
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
 
jSlickmenu: A jQuery plugin for slick CSS3 menus

After releasing several jQuery scripts, I wanted to take the whole jQuery programming to another level. For that reason, I'm proud to release my first jQuery plugin for everyone to use.

The plugin called jSlickmenu, creates, well, slick menus with jQuery. Combined with some great CSS3 features likes rotation and shadows, this plugin can really lift up your design. It's fairly easy to use, highly customizable and pretty cool (and fun!) to see.

jSlickMenu

As usual, you can freely use and modify this script where you want and I hope it can be of use in your next (web)project.

IMPORTANT NOTE:
Sadly, CSS3 and HTML5 aren't the standards (yet) these days (when will it ever be?). Since this demo is using CSS3, not all browsers will be able to show off the full effect. Because of this, it only works on Apples Safari and Google Chrome as they are the only browsers supporting the Transform and Box-Shadow property of CSS3 via the -webkit- prefix. Mozillas Firefox 3.5 is getting these properties too (with the -moz- prefix). So, for now, this is just for fun - Other browsers will display the menu, but (sadly) in a whole different way.

Demo jSlickmenu   Download jSlickmenu

The plugin has been made as extensible as possible, so you can also view a demo with advanced settings. Make sure you check out the video demo and how to use the plugin.


Tags:  jslickmenu plugin jquery css3 menu slick
 
20+ Wicked Proof of Concepts for Better use of jQuery/CSS

As you might know, I really love proof of concepts (and experiments). Just showing to others that you can create that crazy idea is a very good thing. Both for you (you just showed that you actually can create is), but especially for others (that can probably use your idea in another, maybe more useful and better way). Since the sky is the limit with several webdesign techniques, programmers can get really creative and innovative

I created a roundup containing 20+ Wicked Proof of Concepts for Better use of jQuery/CSS, showing off some crazy experiments found on the web. Most of them are just really for fun or just beautiful to watch. They all don't have any real practical use (yet) and really seek some better use.

20+ Wicked Proof of Concepts for Better use of jQuery/CSS

Noura Yehia from the popular Noupe allowed me to place the article over at their website (Thanks Noura!). If you want to check out this amazing roundup, make sure you read the (guest)article on Noupe.

It was really fun putting this list together. Some of the techniques just show a nice effect and don't have any practical use. Other techniques are way more useful and have a lot more potential of actually using in webdesign/webdevelopment work these days. Always look for new opportunities using the language, technique or framework that you use.


Tags:  noupe proof of concept experiement roundup jquery css
 
A fancy Apple.com-style search suggestion

Apple is known to create beautiful products (next to the needed functionality of course). I already wrote several articles on how you can transfer some amazing iPhone designs to your webbrowser, I own a MacBook Pro (which also looks pretty sleek) and many other products from Apple are well known for their amazing design.

The website from Apple isn't less: The layout is simple yet beautiful. Yet, one of the most awesome things about the website is the search functionality. It gives you suggestions (with images) about the several products they offer, making it really user-friendly.

Today, we're trying to recreate the effect from that website by creating a fancy apple.com-style search suggestion. Make sure you check out the demo (or visit Apple.com) to see this awesome effect work.

A fancy Apple.com-style search suggestion

This example makes use of several techniques: MySQL (for the database), HTML/CSS for styling, PHP for retrieving the data and jQuery for the AJAX request. How about that for some nice way of combining powerful techniques to create something nice like this. You do need some basic knowledge about these techniques to fully understand this tutorial.

Demo Apple.com-style search suggestion   Download Apple.com-style search suggestion

IMPORTANT NOTE:
As you can see, the demo is located on another server. The reason for this is, that every time a user presses on his keyboard, a call is made to the MySQL database. When loads of users do loads of calls (at the same time), this could result in slowing down the database. The answer for this would that the results should be cached - Something that isn't implemented right now.

Safari, Chrome and Opera are currently the only webbrowsers that support the drop shadow effect around the the search results. Other browsers will simply display the results without the drop shadow.

This technique would be great if it were converted to a plugin for a CMS (WordPress/Joomla/Drupal etc.), but also just very cool to have on your website.


Tags:  apple.com search suggestion mysql php jquery ajax
 
The iPhone Contacts App with CSS and jQuery

Remember that I created "the iPhone unlock screen" and "the iPhone springboard" in xHTML, CSS and jQuery? Today, I'm bringing you another chapter of transferring some of the beautiful iPhone layouts to the webbrowser.

The design of the Contacts app will be used and displayed in your browser. Funny fact is that this is the first "iPhone to CSS/jQuery conversion" that I created (before the unlock and springboard screen). I'll try to give you the real iPhone feeling with these tutorials.

iPhone Contacts App with CSS and jQuery

OK, maybe not fully the "feeling" (look and feel) from the iPhone, since I can't make any webbrowser react to placing your finger on the screen, but your mouse will do the trick.

Demo Scrolling box - iPhone contacts style   Download Scrolling box - iPhone contacts style

Features:

  • XHTML and CSS valid.
  • "Top indicator" changes character while scrolling (Just like the iPhone).
  • Including "Search" on the right (Just like the iPhone).
  • Pretty sleek interface, including see-through elements (Just like the iPhone).
  • Falls back nicely when the user has JavaScript disabled.
  • Combined with the unlock and springboard screen, it looks like the real deal.
  • Tested and working on Firefox 3, Internet Explorer 7 (With fixes) and Safari 3.

Known issues

  • The "top indicator" doesn't always show the correct character, especially when using the search.
  • The "top indicator" is placed on top of the scrollbar of the browser.
  • I wrote some pretty damn ugly JavaScript (Hey, it works).
  • Works crappy on an actual iPhone.
  • Only works correct when browser doesn't scroll. For people with a small screen resolution, here's a smaller demo (I just changed the CSS and images to 50% of the original size).

Other than those minor issues, it works as expected. Make sure you check it out!


Tags:  iphone mac screen jquery xhtml css
 
The iPhone Springboard in xHTML, CSS and jQuery

Last week, I wrote an article on how to create the iPhone Unlock Screen using xHTML, CSS and jQuery. As stated in the article, I would really love to tranfer more of the sleek iPhone design to a webpage. The next obvious step for me, was to create the iPhone Springboard in xHTML, CSS and jQuery.

The iPhone Springboard in xHTML, CSS and jQuery

Chris Coyier from CSS-Tricks allowed me to place the article over at his website (Thanks Chris!). If you want to know how I created the iPhone Springboard, make sure you read the article on CSS-Tricks.

Demo The iPhone Springboard in xHTML, CSS and jQuery   Download The iPhone Springboard in xHTML, CSS and jQuery

I'm planning to make some more of these "iPhone style" webpages, so subscribe to the feed if you want to keep updated.


Tags:  iphone mac springboard jquery xhtml css
 
<< Start < Prev 1 2 3 4 5 6 7 Next > End >>

Results 13 - 18 of 37