background preloader

Tutorials – Tutorialzine - Namoroka

Tutorials – Tutorialzine - Namoroka
Realtime Chat with Node.js By Nick Anastasov | In this tutorial, we are going to build a realtime chat system with Node.js, Express and the socket.io library. Read more My New Favorite Technique ForHiding Overflowing Text By Martin Angelov | In this short tutorial, I will show you my new favorite technique which fades overflowing text gracefully into the background – a perfect addition to your new design.

AviaSlider - a unique jQuery Image slideshow plugin Features of the Avia Image Slider 8 unique transition effects Lots of easy to set options to create your own effects Included Image preloader Autoplay that stops on user interaction Valid HTML5 and CSS 3 Markup Packed version only weights 8kb Supports linked images already prepared to work with prettyPhoto Lightbox works with jQuery 1.32 and higher Browser Support Internet Explorer 6 and higher Safari 3 and higher Firefox 2 and higher Opera 10 and higher Google Chrome 3 and higher Checks for last 3 Browsers performed on Mac & Win Download & Docs

Thumbnails Navigation Gallery with jQuery In this tutorial we are going to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation. We are going to use jQuery and some CSS3 properties for the style. The main idea is to have a menu of albums where each item will reveal a horizontal bar with […] View demoDownload source In this tutorial we are going to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation. We are going to use jQuery and some CSS3 properties for the style. When a thumbnail is clicked it will be loaded as a full image preview in the background of the page. The beautiful photos are from Mark Sebastian’s photostream on Flickr. So, let’s get started! The Markup Our HTML is mainly going to consist of a wrapper and the menu list. Inside of our wrapper we will add the following: The first element is our full preview image. We then add an unordered list where each li element is going to contain a span for its title and the thumbnails wrapper. The CSS

6 Plugin for Impressive HTML Slideshow And Presentation - Javascript Making a presentation with HTML, CSS and Javascript is no longer an impossible task. With the development of CSS3 and support on most modern browsers, the slide transition no longer limited to fading, sliding, blinding. It allows us to achieve cool effects such as rotation, 3D transform and transition. The following is 6 javascript plugins that allow you to do that. You will need latest browsers that support CSS3 3D transform. impress.js It’s a presentation tool inspired by the idea behind prezi.com and based on the power of CSS3 transform and transition in modern browsers. About Kevin Kevin Liew is a web designer and developer and keen on contributing to the web development industry. CSS4 Sneak Peak

Lightbox_me - Stupidly Simple Lightboxing What is it? Have you ever had a DOM element that you wanted lightboxed, but didn't want all the fanciness of all the lightbox-related plug-ins out there? Lightbox_me is for you. Lightbox_me is an essential tool for the jQuery developer's toolbox. Feed it a DOM element wrapped in a jQuery object and it will lightbox it for you, no muss no fuss. Features Lightbox_me handles all of those annoying edge cases that other lightbox solutions do not: Handles overlay resize when the window is resized Handles overlay size in cases where the document is smaller than the window Handles position: fixed in all browsers Position: fixed automatically swaps to position: absolute when the window size is smaller than the modal, so the user can scroll to see the contents In addition it's got these other nice features: Usage Include jQuery and lightbox_me in your web page, then invoke lightbox_me on a jQuery object: $(domobj).lightbox_me(); or $("#id").lightbox_me(); This will lightbox the DOM element immediately.

Beautiful Photo Stack Gallery with jQuery and CSS3 In this tutorial we are going to create a nice and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, we show the images of that album as a beautiful photo stack. In the photo stack view, we can browse through the […] View demoDownload source In this tutorial we are going to create a nice and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, we show the images of that album as a beautiful photo stack. We will use jQuery and CSS3 properties for the rotated image effect. We will also use a bit of PHP for getting the images from each album. So, let’s start! The Markup In our HTML structure we will have several elements. The opacity of the album div is going to be 0 in the beginning, we will then use JavaScript to fade in the columns. The structure for the dark overlay and the preview with the photo stack is going to look like this: The PHP The CSS We will continue with the style of the preview. The JavaScript

Backgrounds & Gradients - A Beginner's Guide to HTML Backgrounds are an important part to CSS as they allow you to easily change the composition of an element. They can be used for decoration while setting the scene within an element. They can provide visual context for an element’s content, enhancing usability. With use cases large and small, backgrounds have a significant impact on the overall design of a website. Adding a background to an element can be accomplished in a few different ways, most often in the form of a solid color, an image, or a combination of the two. With CSS3, new backgrounds and capabilities were introduced, including the ability to include gradient backgrounds and multiple background images on a single element. Adding a Background Color The quickest way to add a background to an element is to add a single color background using the background or background-color property. When declaring a background color you have a few different options as far as what value to use. Adding a Background Image Background Repeat Demo

Signs of a poorly written jQuery plugin So far with every single workshop I’ve given, both for advanced JavaScript and jQuery for Designers, this question (or some variation thereof) has come up: How do you know if the plugin is good to use? It’s always dependant on the problem they’re trying to solve, but in lieu of a better jQuery plugin ranking system, here’s a couple of tips that should raise a red flag. Consider the following: $.fn.myplugin = function () { var me = $(this).each(function() { return $(this).bind('someEvent', function () { // does something }); }); return me;}; Although the code may be perfect once some event has run, most times you don’t have time to read through all the code carefully and you need to make a decision so you can move on to the actual problem you’re trying to solve. In the code above, there’s a number of red flags that have gone up for me, and I tend to look in this area of code first. The inline return $.fn.myplugin = function () { var me = $(this).each(fn); return me;}; Should be written as:

Minimalistic Slideshow Gallery with jQuery In today’s tutorial we will create a simple and beautiful slideshow gallery that can be easily integrated in your web site. The idea is to have a container with our slideshow and the options to view a grid of thumbnails, pause the slideshow, and navigate through the pictures. The thumbnail grid will […] View demoDownload source In today’s tutorial we will create a simple and beautiful slideshow gallery that can be easily integrated in your web site. The idea is to have a container with our slideshow and the options to view a grid of thumbnails, pause the slideshow, and navigate through the pictures. So, let’s start! The Markup The main HTML structure will consist of the main slideshow wrapper that contains a container for the full view image (msg_wrapper) and one for the thumbnails (msg_thumbs): The alt attribute of the thumbnails will contain the path the full view image. The CSS First, we will define the style for the main wrapper: We will remove borders and outlines from the link elements:

Essential tools for every web designer Every web designer requires the right tools to do their job. To create well crafted original designs you certainly need to be inspired to do so. Getting to that point is sometimes the hardest challenge in the field of web design. Luckily enough for us and our fellow design community there are tools available to assist in completing the job quicker and more efficiently. Below, I have outlined a list of tools I recommend for any web designer. Be sure to bookmark these pages so you can utilize them to your advantage like I have! Color Adobe Kuler (free) A great tool offered by Adobe which allows members to upload, create, and edit color schemes of their choice. Pictaculous (free) From the creators of Mailchimp comes a color palette generator different to any other. Colorzilla (free) Dribbble.com (free) Many designers turn to dribbble.com for great inspiration. Hues ($2.99) Interested in native apps rather than web apps? Typography Google Webfonts (free) Font Squirrel (free) Lost Type (from $1)

How to Debug Your jQuery Code In the past 10 years, more and more Web development has moved off the server and migrated to the browser, making a user's experience more responsive. Unfortunately, this transition hasn't been very pleasant for developers, given that any attempt to debug client-side code eventually means resorting to the classic JavaScript alert methods, which we are all accustomed to seeing in code such as the following: <script type="text/javascript"> alert('Alerts are so NOT the Bee\'s knees.\n\n' + 'To the contrary, they are the 3 Ds... \n' + '• Difficult to format\n' + '• Disrupt the timing of JavaScript events\n' + '• Disagreeable to the Nth degree!\n\n' + 'In summary, stay away from the alert statement as a debugging tool.'); </script> (You can view, run, and edit the source code for this example at jsbin.com/opayo/edit. In this article, I’ll describe some techniques to assist you in the debugging process when you are using jQuery in client-side Web development. Getting Started FireFinder 1.

Related: