jQuery: scroll to the top, to a specific container and to the bottom of a page

Tweet

Some time ago I wrote an article where we discussed how to use JavaScript to create a smooth scroll to the top of the page.
Today we are going to see how to do it with jQuery, and we are going to do it in order to scroll to the top of the page and even to the bottom of the page. After that we are going to create a simple jQuery function that will scroll to a specific element of the page.

Interested? Ok... follow me.

ASP: pass a variable to JavaScript

Tweet

One of the most often asked question in forums is "how do I pass an ASP variable to JavaScript?"
It is quite common to find out that people ask the question the other way round: "How do I pass a JavaScript variable to ASP?"
Ok, the two things are completely different and they involve completely different solutions.

First of all, let me explain something you might already know. ASP (or to be precise VBScript) is a server side language, while JavaScript is a client side language. The two work on different levels: ASP is executed before the page is completely loaded, while JavaScript works only after that. For that reason we cannot pass a JavaScript variable to ASP without reloading the page.

JavaScript: how to use external files

Tweet

As we already know, because we saw it in the past here on the web thought or elsewhere, we can use JavaScript snippet by placing the code in the head and/or the body of our documents.
However, it's good practise to create external JavaScript files, especially when we use standard functions all over our web site.

In this short article, we are going to see how to do it.

jQuery: menu plugin and ideas

Tweet

If you want to create menus using jQuery, here is a good list of plugins and ideas to consider.

NavDock jQuery Plugin 1.2
"NavDock is a jQuery plugin that transforms your menu into a dock style menu." 

jQuery.tn34.facets 

jOrbital menu
"Group objects with similar functionality into one button. Save space and give users more interaction. Move your mouse over the share button to see what I mean."

jMenu : Horizontal navigations with unlimited dropdown sub-menus
"Menu is a jQuery plugin that enables us to create horizontal navigations with unlimited sub-menus.
Besides jQuery, it also requires jQuery UI and supports all the effects of this library (like fadeIn or slideDown).
The markup of the menu is pretty clean as it makes use of nested lists.
The look and feel of the output is set in a CSS file so updating it without touching the JS code is possible."

Drop Menu
"With this script you can make nice and interactive drop down menus. The advantage of this script is that it not only gives you the ability to make list drop down menu. You can also use a div as drop down element."

jQuery and CSS3 Awesome Slide Down Box Menu 
"we will create a unique sliding box navigation. The idea is to make a box with the menu item slide out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left or to the right depending on which menu item we are hovering."

Apple Navigation with CSS3 
"Apple is known for very clean design and if you have been to their website in the last few years you’ve seen their primary navigation. It’s a staple of the apple website and today I wanted to take a crack at recreating the Apple navigation using CSS3 techniques."

JavaScript: innerHTML

Tweet

In the following short post, we are going to take advantage of JavaScript and its innerHTML method.

Every DOM element can be manipulated using JavaScript. With the use of jQuery we can do great things, but if we need to do something more basic, it is probably better to use JavaScript directly, without the help of the aforementioned great library.

We can manipulate any DOM element using its id as selector together with document.getElementById. The advantage is that we can manipulate the inner html part of the element.
Let's see some example.

JavaScript: void(0) and links that do nothing

Tweet

What is a web page after all? Isn't it a bunch of information linked to something else?

As you know, web sites without links don't exist. And if they exist they are basically dead. When we insert a link in a page, we generally want people to click on it and go somewhere else. However, some times we need to create links that do nothing. Or to better say, links that do not take the user somewhere else.

With JavaScript we can create links which can perform different action from actually linking to another page.
However this is not new to us. We already know the possibility of using links to show or hide DOM elements (jQuery is a great tool in that matter and it's JavaScript as well).
On the other side, here we are talking about something different. We will see how to use void(0), but we will see something else and we will make some considerations about it.

HTML: IDs and classes

Tweet

As I said in the last post, it's quite interesting to explore the differences between IDs and classes in CSS.

First of all, they are both selectors. But they are very different:
1) IDs are unique identifiers;
2) classes are not unique.

The above first difference is quite important because we can give a unique identifier to just one page element, while we can give a class to more than one element.

JavaScript: syntax checker

Tweet

In this short post I'm going to share some really useful JavaScript syntax checker.

When programming we surely need to check what it's been done. It's better to verify the code when still in production, during the so-called test period. When published, a web site could still contain errors, but what we surely need to avoid is those annoying syntax errors.

There are specific programs freely available that we can use to do so. Here we are going to see 3 tools that we should carefully consider.

jQuery: image gallery plug-ins

Tweet

 jQuery image gallery plugins! You all know there are so many of those plug-ins, however, here's a list of the best... in my opinion...



bxGallery
"bxGallery is jQuery image gallery plugin that contains automatic thumbnail generation."

Galleriffic
"Galleriffic is a jQuery plugin that provides a rich, post-back free experience optimized to handle high volumes of photos while conserving bandwidth. I am not so great at spelling, and it was much later that I realized that the more appropriate spellings would be Gallerific or Gallerrific, but is too late now for a name change, so Galleriffic remains."

Pikachoose
"Pikachoose is a lightweight jQuery slideshow plugin, with tons of great features! jCarousel integrates smoothly with PikaChoose to give your gallery simple and effective carousel. PikaChoose now has API hooks for integrating lightboxes and other things."

YoxView
"YoxView is a free Lightbox-type media and image viewer jQuery plugin. It's easy to use and feature-rich."

GalleryView
"My goal with GalleryView is to provide an extensive set of options to the user. Not only will the user be able to adjust photo and thumbnail sizes, and transition speeds, but he will also have the ability to choose from a selection of element positions, transition styles and other features."

FlexSlider 2
"The best responsive slider. Period."

wmuSlider
"wmuSlider, a jQuery responsive slider"

ResponsiveSlides
"ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slider using list items inside <ul>. It works with wide range of browsers including all IE versions from IE6 and up. It also adds css max-width support for IE6 and other browsers that don't natively support it. Only dependency is jQuery (1.4 and up supported) and that all the images are same size."

AD Gallery
"...It’s a gallery plugin that’s a bit different than plugins like Thickbox and Lightbox."

jQuery: snow effects for Christmas!

Tweet

As I did last year, here is a quick collection of Christmas effects. In particular we are talking about snow effects made exclusively with jQuery.

Ready for the holiday season? Here we go:

jQuery snow falling plugin
"Idea is to create one snowflake initially, clone that snowflake at some time interval and add random values for properties for each of them. And it’s done in less than 1kb minifed."

jQuery font flake / snow flake experiment
"was bored one night, had an hour charge left in the laptop, challenged myself with this."

jQuery Snowfall 1.5 update now with snow buildup!

jQuery Snow
"This extension decorates your webpage with falling snow."

Beautiful Christmas Santa Snow Falling Greetings with html5 css3 and jquery
"Hey, Still using old Flash Christmas Greetings ? For this Christmas, We are Introducing a Snow Fall Animation with HTML5 CSS3 and Jquery."

jQuery: get and set information for DOM elements

Tweet

jQuery is a great tool when we need to manipulate elements in our web page.
Today I would like to focus your attention on some useful methods that allow us to get or set information of DOM elements.
We are talking about:
1) .text()
2) .html()
3) .val()
4) .attr()

Let's see them one by one.

JavaScript & XML: validate an XML document

Tweet

I think we all know how to use XML documents. For example RSS feeds are basically XML files, as well as sitemaps. Those files may be very important when managing a web site, but those examples are just a small part of the common use of XML documents. Just to make things clear, another example: when you export a Blogger blog, the file you get is an XML file.
When I've written the article on how to create an RSS feed, I discovered a very useful JavaScript snippet that helps us to validate an XML file.
Unfortunately I don't remember where I got it, but, even if I surely rearranged it, if you know the original source, please let me know so that I can give due credit to the author.
Ok, said that, let's see how to do it.

JavaScript: validate an URL

Tweet

I've already posted an article on how to validate forms with Regular Expression. But, have you ever needed to valid an URL?
We can do it quite easily using Regular Expressions and JavaScript. Specifically we are going to use the .test method.

The code
The first thing we need to do is set two variables: one is the URL to be validated, the second is the Regular Expression.

<script type="text/javascript">
var url = "http://www.google.com/";
var urlCheck = /^http:\/\/(www\.)?[a-zA-Z0-9-]{3,}\.[a-zA-Z]{2,}(\/)?$/;

JavaScript: document.lastModified with a trick

Tweet

Again another JavaScript article...
This post in fact might be interesting for some of you. We are talking about those fancy lines we sometimes find at the end of a web page where we are informed about the document last modification date. Something like:


How do we do it automatically? And... that is not an European date, is it? If so, how can we manipulate it in order to make it European?

JavaScript: check the mime type and charset

Tweet

I always underestimated JavaScript. I know it has been a problem for me, because I've really missed lots of interesting things until I decided to explore the programming language.
In the following article I will show one of the useful things we can do with JavaScript: discover the charset and mime type of a web page.
You might wonder what's the use of it. Well... as usual try to broaden your view and consider the fact that every visitor is visiting your beloved web site from somewhere in the wide world, sitting on a different kind of chair (if not standing or lying), with a different piece of technology or device, and finally (but I could go on forever) with a specific browser ... ... type and version (the mixture of the two is a deadly issue for any web developer).
Ok, said that, don't you think that knowing the mime type and charset of a page might be useful?
Let's see how to do the magic.

jQuery and JavaScript: generate and read a QR Code

Tweet

Hello everybody!
today we are going to see something really interesting that someone in the past asked me via email.
We are going to generate a QR code using a jQuery plug in and then we are going to use a JavaScript library to read the very same QR code.
What do you think, is it interesting enough?

jQuery: hide and show DOM elements

Tweet

I've recently talked with a friend of mine about jQuery. I soon realised that some common methods are not so easy to understand, especially for beginners.
That's why I decided to write this short post. We are going to see how to hide and show a DOM element. Not very complicated, but that's what beginners usually start to do the first time they use jQuery. Understanding the following tricks, will simplify the whole understanding of jQuery.
Follow me...

jQuery: dNotify - A simple user notification plugin for jQuery

Tweet

Today we are going to talk about dNotify, a simple user notification plugin for jQuery.
The way this simple plugin works is very interesting. Because I usually hate when popup message start to - well - pop up all over the web site, I've found dNotify quite unobtrusive. Moreover, we should consider the use of dNotify in web applications, where we do need to interact with the user more than in other situations.
What makes the plugin almost unique is the fact we can control everything about the notification.
Let's see how we can use it.

DOM: the document.getElement[s]By

Tweet

I can feel that the summer is almost over and it's time to get to serious things again.
In the following post, we are going to see how to manipulate the DOM elements with document.getElement[s]By.
As you may know we have different way of manipulating DOM elements and here we will see all of them:
1) document.getElementById;
2) document.getElementsByClassName;
3) document.getElementsByName;
4) document.getElementsByTagName;

As you can see there are 4 possible way of using the document.getElement[s]By[something].
Are you ready?

DocHub: a reference to almost all programming things

Tweet

Today I would like to share a web site I recently found and which might be of interest for many of you.

The place is called DocHub - Instant Documentation Search and has references to all things in programming CSS, HTML, JavaScript, DOM, JQuery, PHP and Python.
Well, as you can see ASP is not there (while there's PHP and Python) but the resource is really incredible and it is a quick and complete guide to the above programming languages.

The site is made of two panels: the left one allow us to search the wanted term (and it's a free search box), while on the right panel the searched information are made available when selected.
Believe me when I say the database is very well done and it has many valuable information either for the experienced programmer or the newbie.

So... what you're waiting for? Go there and have a look for yourself!