Skip to main content

Horizontal scrolling with jQuery

Learn how to easily make horizontal anchors with jQuery

Posted in Code snippets, Tutorials, jQuery, JavaScript

I've got a freelance job from a Brazilian company few days ago. The project is fine, nothing so different than the usual. Except for one thing: They want the page to scroll horizontally.

The clients are getting creative these days...

My biggest problem is the main menu: If the page would be normal I could use anchor. But I can't since anchors don't work on the horizontal.

Fortunatelly the solution is easy: .scrollLeft()

What .scrollLeft() does is simple: It returns the position of the horizontal scroll bar. And if we pass a parameter it will set the scroll bar where we want.

I have an example on how it's done. Let's walk through it:

HTML

Very simple, no problem at all. Only one navigation and a couple of divs just to give something to work with:

<header>
    <nav>
        <ul>
            <li><a class="nav-item1" href="#">Item 1a>li>
            <li><a class="nav-item2" href="#">Item 2a>li>
            <li><a class="nav-item3" href="#">Item 3a>li>
        ul>
    nav>
header>
<section>
    <div class="item item1">Item 1div>
    <div class="item item2">Item 2div>
    <div class="item item3">Item 3div>
section>

CSS

The CSS is very basic, just to give some formatting:

<style type="text/css">
    nav { position: fixed; z-index: 1030; }
    section { width: 3600px; top: 100px; position: relative; overflow: auto; }
    .item{ float: left; position: relative; width: 900px; height: 500px; font-size: 200px; }
    .item1 { background: #f00; }
    .item2 { background: #0f0; }
    .item3 { background: #00f; }
style>

Javascript

Since we have 3 items I've created a function which groups everything. In that way I am able to keep the code clean, without repeating important parts:

function horizontalNavigation(position, event) {
    $('html').scrollLeft(position);
    event.preventDefault();
}

And here is where the magic happens:

$('.nav-item1').click(function (event) {
    horizontalNavigation(0, event);
});
$('.nav-item2').click(function (event) {
    horizontalNavigation(900, event);
});
$('.nav-item3').click(function (event) {
    horizontalNavigation(1800, event);
});

See the working example.

There is only one problem with this code: What if I want to have a smoothly horizontal scrolling? For that we can use .animate(). Solution in bold bellow:

function horizontalNavigation(position, event) {
    $('html').animate({scrollLeft: position}, 800);
event.preventDefault(); }

See the working example.

As you can see it is not so complicated as it looks. Just a bit of work, but quite easy.

Did you like the article?

You can subscribe and get them as soon they are online, share using the buttons bellow or leave a comment.

And you also can share using your favorite social network:

How to uncheck all radio buttons and checkboxes using jQuery

Learn how to use jQuery to reset all radio buttons and checkboxes AT ONCE in a page

Posted in Code snippets, Tutorials, jQuery, JavaScript

- UPDATE -

My friend Wellington sent me this code right after I've published this post:

$('input:checked').removeAttr('checked');

This should get all the checked items and remove the "checked" attribute.

- Original post -

Recently I have come across a very interesting problem in a project I am working on. I had to uncheck all checkboxes at once. It was fine by using a simple .each on jQuery. After that the requirements changed and I had to add radio buttons and they weren't working with the code I already had. That was fixed with one more line. Let's see how it was done.

Suppose I have 3 checkboxes and I want to clear all of them at once. Normally I would do something like this:

$('#clear-all').click(function () {
	$(':checkbox').each(function () {
		$(this).removeAttr('checked');
	})
});

Very simple, very generic and it works like a charm. However, suppose that I have to add some radio buttons. The code above will not work with radio buttons, as mentioned before. If you want to uncheck all the radio buttons and checkboxes you will need to add one single line (in bold):

$('#clear-all').click(function () {
	$(':checkbox').each(function () {
		$(this).removeAttr('checked');
		$('input[type="radio"]').prop('checked'false);
	})
});

According to jQuery website the .prop is gets the value of a property for the first element in the set of matched elements or set one or more properties for every matched element. In another words it will look for the "checked" property and, if you want, it can change its value as well.

Easy, simple and clean.

Did you like the article?

You can subscribe and get them as soon they are online, share using the buttons bellow or leave a comment.

And you also can share using your favorite social network:

How to insert many records into the database using Entity Framework (bulk insert)

It's using SqlBulkCopy but as both Entity Framework and SqlBulkCopy belong to ADO.NET...

Posted in Code snippets, Tutorials, Entity Framework

Entity Framework (EF) is a Microsoft ORM which allows programmers to develop against a conceptual data model instead of developing anything inside the database. In this way any change done in this conceptual data model must be persisted as this is not done automatically. For EF we have to use SaveChanges.

To understand EF is simple: A SQL script is generated for every action done against the conceptual model. For example: In case we want to add some record into the User table. For that we would have to use the AddObject method and pass the properties of the User (name, surname, etc) along. Behind the scenes the EF will generate an INSERT and will execute it in the database with the properties of User.

And what about inserting 3.000 records at once?

In this case we have 2 options:

  1. We do a loop and use AddObject for every one of the 3.000 records (not recommended)
  2. We use a class called SqlBulkCopy (deeply recommended)

But why?

The EF doesn't have a native method in case we want to make a bulk insert but, as it was built on top of ADO.NET, there is no problem to use SqlBulkCopy. Not to mention the performance gain if we compare with the multiple INSERTs.

An example of SqlBulkCopy:

Let's just hope Microsoft will add a similar feature into the Entity Framework in the future.

Did you like the article?

You can subscribe and get them as soon they are online, share using the buttons bellow or leave a comment.

And you also can share using your favorite social network:

How to drive a web developer crazy in 20 easy steps

Be sure this works all the time. But don't do it unless you want people to hate you

Posted in Misc, Career

Let me tell you something: Once upon a time, I wanted to be a biologist. That was a long time ago. Then things changed and I became a programmer. Not bad for someone who wanted to make research the whole day but did not have enough patience for the results.

Little I knew about the problems I would face as programmer. In addition, they are quite different when you move from desktop to web development. A very common problem for web developers is dealing with the design team. We understand they follow the requests of the client but in 100% of the cases they just think we can do miracles with their graphics while creating the website.

Rafael Mumme, from the .net magazine, wrote an amazing article about the 20 things that drive web developers crazy. They are so real that I’ve seen at least 20 of them in the last 2 projects I was working on:

  1. Add rounded corners to every single element on the page. While you're at it, add shadows and gradients too.
  2. Use the same PSD as a starting point for every project. Hide unused layers, but don't delete them. Make sure your PSD is at least 100MB.
  3. Use sIFR on every piece of text. Bonus points if you choose a font that's very similar to Arial.
  4. Never use the same dimensions on elements. Give each a different font size and colour (for black, use #000000, #111111, #121212 ...).
  5. Use a lot of breakout images with transparency. Web developers love graphics breaking out of boxes and columns. Bonus points if you add text wrapping around images.
  6. Add a modal window. At least half the site should happen in a modal window.
  7. Add a Facebook Connect button. It's just a button. How hard can it be to implement?
  8. Hide important PSD layers. Later, tell the developer that they missed a hidden element.
  9. Create buttons with rollover, active and clicked states. Then don't tell anyone you've done this. Create a separate file for them and send it on at the last minute. We love surprises.
  10. Tell the developer about some fancy functionality you read about somewhere on a blog. Then tell them to build it, because, if you saw it somewhere, clearly it's possible.
  11. Add a carousel. Oh yeah, and make sure it's a full-screen carousel.
  12. Use Lorem Ipsum instead of real copy. And make sure the reserved space is not big enough for real copy.
  13. Randomly merge PSD layers. Why not? (But don't merge too many. It'll take you further away from the magic 100MB target).
  14. Name all your files 'final', plus a date and a random letter (final-2010-12-01a.psd, final- 2010-12-01r.psd, final-2010-12-02b.psd).
  15. Don't worry about making changes once everything is signed off. When we're done with a page, send another, completely different version of it. And tell us that those changes are necessary and essential for user experience.
  16. Don't name or organize your PSD layers and folders.
  17. If you're designing a form, forget about error and success states. We'll squeeze that stuff in somewhere. We love guessing your intentions.
  18. When you're designing a website, don't invite any developers for brainstorming or design meetings. Make sure we're the last ones to see the layout. Show it to the client first, so it will be too late to introduce even a modicum of sanity into your work.
  19. We should hang out more, so during QA don't use bug tracking software. Come sit with us for an entire day and point out changes you want made over our shoulders. Use the opportunity for some impromptu design updates as well.
  20. And finally, this is the most important thing: don't learn anything about HTML, CSS, JavaScript or browser issues. The less you know about it, the more important we seem.

Image from ShinyShiny.tv

Did you like the article?

You can subscribe and get them as soon they are online, share using the buttons bellow or leave a comment.

And you also can share using your favorite social network:

My opinion about Windows 8 RTM

What's changed in Windows 8? What makes it better than the previous versions?

Posted in Reviews, News, Metro, Windows

I’ve been using Windows 8 RTM since its release (August 15th) as main OS on my notebook due my TechNet subscription. That means: I have installed everything I need to “survive” in my computer. I mean things like Office, Visual Studio, SQL Server, few games (The Sims 3) and few other utilities. So, what do I think about Windows 8 so far? Let’s start from the beginning.

Installation

First of all: If you plan to make a clean installation it’s better to keep the serial key in a piece of paper beside you. The reason is that Windows 8 asks for the serial during the installation process but, unlike Windows 7, it doesn’t allow us to skip.

I have chosen to make a clean install and it ran very nicely except by one thing: When I was creating the disk partitions the installer threw me an error related with UEFI. As result I couldn’t format them. To solve this problem I had to restart my notebook, go to the BIOS and disable the UEFI. After the installation I turned that on and everything is working perfectly fine. I don’t really know how and what that would affect the installation but… It’s working without any problems here.

At the end of the installation process you are required to enter your Windows Live ID or create one if you don't have. It’s important since some apps will need the information stored there. But be aware that you can’t change the Windows Live ID you entered there at first unless you create another user in your computer.

Lock screen

We've got a very beautiful lock screen which shows the battery status , email/messages counter and other things if we want (it's customizable!). And it’s really "locked" since there is no button to press, absolutely nothing. Windows Phone users will naturally swipe to type the password, but it isn’t necessary: We can just click or type to make the lock screen slides up right away.

Start Menu aka Modern UI (former Metro)

The classic Start button we all know and love is gone for good. Microsoft has replaced the Start Menu by a very cool UI called Modern UI (before called Metro, but changed due legal problems). The Modern UI is much more than a fancy menu, it is a whole system which works in parallel with the classic desktop we are used to know (let’s call it “Desktop mode”). It comes with its own applications (Weather App, News App, Sports App, etc.) and we can install much more through the Windows Store (which is growing).

Of course nothing is going to prevent you to install your favorite software, even if they seem redundant with the apps Windows 8 has by default. For example the Photos app (images). It’s very limited if we compare with XnView since I can’t resize or convert the images I need. Or the Reader app (pdf) in comparison with Adobe Reader or Foxit Reader.

And why do we have such limited apps?

Remember few lines above when I said that Modern UI is a system which works in parallel with the classic desktop? The Windows 8 will come in 3 flavors: Windows 8, Windows 8 Pro and Windows 8 RT. The RT version carries only the Modern UI (and all of its apps) installed in the Surface, the tablet Microsoft is bringing to the market until the end of this year. It basically means that we will have the basic of everything we need to use the tablet. But I believe that soon or later the companies with desktop version of their productivity softwares are going to create apps for the tablet.

Changes in the Desktop mode

The Desktop mode has got some nice changes as well. One of them was the drop of Aero Glass. For those who are unaware of the name, the Aero Glass is that translucent effect which Windows 7 had. This gives you a much more flat impression, which fits quite well with the Modern UI. We also got the menus and toolbars changed by the ribbon, which was seen for the first time in the Office 2007. It was a very nice change, indeed.

But one of the things I really appreciated was the new Task Manager. Now it shows the processes in a much more detailed way, highlighting which process is using more memory or processor with different colors. I would like also to point the addition to the tab App history which shows all apps you have used so far.

The gadgets we had on Windows Vista and 7 were dropped. The reason seems logical: Since we now have the Apps used in Modern UI there was no need to pollute the desktop with things which would do basically the same thing (Weather App, for example).

Compatibility and Administrator mode

So far everything I am using is working but let’s keep in mind that we don’t have anything for Windows 8 yet. For the very few applications which don’t work properly on the fly we have 2 options:

  • Use the Windows 7 compatibility mode: Right-click on the shortcut, go to Properties, choose the tab Compatibility, tick “Run this program in compatibility mode for” and choose Windows 7;
  • Run the program as Administrator: Right-click on the shortcut, click on “Run this program as Administrator”.

I’ve used both solutions to run HostsMan and The Sims 3 on Windows 8. For the first, I couldn’t access the HOSTS file to make the changes I needed. For the second, I couldn’t load and save the configurations. I am not sure if the Administrator thing is intentional (I hope so) but I couldn’t find any article talking about this.

As for the drivers, the Windows 7 version works perfectly fine. No voodoo necessary to make it work.

Less battery usage

It’s important to mention that everything which isn’t used ends up suspended. In practical terms the app or software is still open and running, but not using any of the system resources. This, among the end of Aero Glass, helps the OS to use less battery than the others which is very important these days.

Verdict

It takes some time to get used to the whole Modern UI/Desktop thing but everything becomes very smoothly after 1 week using non-stop. And since some keyboard shortcuts will help you to be as productive as with any Windows version I would recommend you to take a look at them.

There are few small bugs but it’s expected since it’s the very first version. Not even Windows 7 was perfect on its release. But still, the idea of integrating all of systems (videogame, mobile phone, computer and tablet) is amazing. Those who have Windows Phone and Xbox will enjoy a lot. As I do.

One tiny addition: Credits to Alena who discovered and taught me about clicking on the lock screen, change the temperature of the Weather App to Celsius (right-click inside the app, bottom bar) and also define a picture standard for the Photos App (right-click on the open image, Set as, App tile).

Did you like the article?

You can subscribe and get them as soon they are online, share using the buttons bellow or leave a comment.

And you also can share using your favorite social network: