Blogging Tips

Tweet

Would you like to do something like:

Or maybe you prefer it another way, like:




They look the same, don't they? However they are a bit different in the making. Let's see how...

The first way to do such thing is to use the <button> tag:

<button>
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_32.png" />
</button>

The image is just like any text we usually put inside the tag.


Yet there's another way, which uses background-images in CSS. I personally believe that it is a better way of handling the button.
In the above examples, the first is an image (as you can see you can't click on it), while the second is live (it's an actual button you can click but that does nothing).

In order to do it the second way, we need to create a short style, like:

<style>
.btn {
height: 37px;
width: 37px;  
background-image:url('http://www.w3.org/html/logo/downloads/HTML5_Logo_32.png');
background-repeat:no-repeat;
}
</style>

And then, we need to insert our button (assigning the related class) where we want to:

<button class="btn"></button>

And that is all.

Short post, for very very busy days. See you next time!

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.


Top and Bottom
The code is very simple. First of all, include the jQuery library in the head of your document (this is valid for the second example as well):

<script type="text/javascript" src="yourPath/jquery.min.js"></script>

After that, we create two links: one for the scroll-to-top, and one for the scroll-to-bottom. Remember to place them where you need them!

<a href="javascript:scrollToBottom()">Bottom</a>
<a href="javascript:scrollToTop()">Top</a>

Now, again in the head of your document the jQuery script:

<script type="text/javascript">
    function scrollToBottom() {
        $('html, body').animate({scrollTop:$(document).height()}, 'slow');
    }
    function scrollToTop() {
        $('html, body').animate({scrollTop:0}, 'slow');
    }
</script>

And we're done.

Scroll to a specific point
Now... if we need to scroll to a specific point on a page, we can create a target element, like a div:

<div class="scrollTarget">We will scroll to here</div>

Now we insert the "void" link where we need the scroll to be triggered by a click:

<a href"javascript:void(0)" onclick="scrollPageTo('.scrollTarget', 15)">Scroll to div</a>

We pass two parameters to the function: the first is our target and the "." or "#" is needed depending on the type of selector (class or ID) we used (in our case it's a class so "."). The second parameter is used to scroll to a position which is just 15 pixels above the target. The second parameter is optional, but it can be used to make the scroll as perfect as we need it.
The function has to be place in the head of our document:

<script type="text/javascript">
  function scrollPageTo(myTarget, topPadding) {
    if (topPadding == undefined) {
        topPadding = 0;
    }
    var moveTo = $(myTarget).offset().top - topPadding;
    $('html, body').stop().animate({
        scrollTop: moveTo
    }, 1000);
  }
</script>

I must say I've found the above snippet somewhere a long time ago and I can't remember where. I'm sure I've used it more than once in web pages and I have surely modified it somehow.

In any case, there we are.

Take care and see you next time!

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.

Say that, if we need to convert a JavaScript variable to ASP, we need to pass it using the page URL and get the variable or use a form a submit an hidden value. Those are simple solutions, but - I must say - not really elegant solution.
Let's see an example. The JavaScript part (to be inserted in the head of the document) could be something like:

<script language="javascript">
function GetHidden()
{
document.form1.action="http://YourPageName.asp";

document.form1.submit();
}
</script>

The HTML part could be:

<form id="form1" runat="server">
<a href="#" onclick="GetHidden();" >Click Here</a>
<input type="hidden" id="txt1" name="txt1" value="ourTestValue" />
</form>

And finally our ASP code:

<%
dim strVal
strVal=Request.Form("txt1")
%>

What about the other way round: pass an ASP variable to JavaScript. Well, that is much much easier!
Suppose our ASP variable is "ASPVariable" and our new JavaScript variable is "JSVariable", the JavaScript code would be:

<script language=javascript>
var JSVariable = <%=ASPVariable%>
</script>

Simple as that.

I hope you find the post interesting enough. Keep on following the web thought.

PS: this is the 400th post! Wow, I couldn't believe it when I saw it.

Tweet

I've recently needed to create some sort of post-it note for a web site. The general look of the homepage was like a working desk, and it was suggested to add a yellow post-it somewhere in the upper right corner of the viewport.
Because I know that time is money and that we don't really need to reinvent the wheel, I have collected some solutions I've found on the web.
If you're interested, please keep on reading.


Create a Post-it Note with CSS3

The 100% CSS Post-it® Note


Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5
CSS: post it note

Tweet

Today I would like to share something that I've found a long time ago (exactly around 2008). The thing is I still find it useful today while at that time it has saved me in critical situation a lot of times.
It is called DBAdmin and I think you should have a look at it if you administer MS Access databases over the internet.

"StP Database Administrator (DBAdmin below) is a tool that allows you to manage your MS Access databases through your browser, providing various set of functions you can perform with your databases, without having downloading them, changing and uploading again. Most of features needed for database management are included, you can even create a new blank databases on-line."

The things you can do with DBAdmin are incredible and because we don't really want to download-change-upload our mdbs wasting time, the tool is a perfect companion.

Have a quick look at the tool page and let me know what you think.

Tweet

We can use CSS to rotate elements in a web page. You may already know about it, but a friend of mine asked me how to rotate a background image, without rotating the container.
Hmmm... that was a question, but the answer surprised me when I found how to do it.
Are you interested? Well, get into the article and see how to do it.

The basics
As said, we can rotate a container using transform: rotate. Just consider that you element has a class="myContainer". We can rotate it by using a rule like:

.myContainer
{
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  transform: rotate(30deg);
}

With the above we rotate the container by 30 degrees.

To rotate or not to rotate?
We can now consider the above and decide to rotate only the background image inside the container, or to rotate the container but not the image inside it.
Ah! Is it possible? Yes, it is.

Let's see how to rotate the image but not the container.
Considering the above container (class="mycontainer") we can apply any rule to it, but we have to position it in a relative way and hide the overflow.

.myContainer
{
  position: relative;
  overflow: hidden;
}

Now we need to create a pseudo element, position it absolutely with a transformed background:

.myContainer:before
{
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -1;
    background: url(bckImage.jpg) 0 0 repeat;
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
}

Note that we need to set the z-index to -1 in order to make it appear below the container.

What about a fixed background with a rotated container?
We need a pseudo element again. But first we need to rotate the container:

.myContainer
{
    position: relative;
    overflow: hidden;
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
}

Ok. Now we use the pseudo element and we "counter-rotate" the background. Ah! That's the trick!

.myContainer:before
{
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -1;
    background: url(bckImage.jpg) 0 0 repeat;
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    transform: rotate(-30deg);
}

And that's it.

Compatibility?
All the above works perfectly in IE9, Firefox, Chrome, Safari and Opera. We have little trouble with IE8: the transformation is not working, but the background will appear.IE6 and IE7 don't know anything about pseudo elements, so nothing will be applied.

Let me know what you think about the examples, as usual, using the comments section below.

Tweet

Holidays time - short post. I hope you find it useful.
Now on with the calendar and datepicker jQuery plugin parade!

wdCalendar – jQuery Based Google Calendar Clone
"wdCalendar is a jquery based google calendar clone. It cover most google calendar features. User can choose to have a daily view, weekly view or monthly view. User can easily create, update or remove events by drag & drop. It is very simple to to integrate wdCalendar with a database.
wdCalendar is free (open source LGPL license), easy to use, and with great functionalities."

Event Calendar
"Event Calendar is a jQuery and ColdFusion event calendar that works a lot like the Google Calendar system. With Event Calendar, you can share calendar information throughout your organization. There is also a simple user facade, that you can extend, to help control user rights."

jQuery.calendarPicker
"This component is a light-weight calendar/date-picker.
Some features:

• supports internationalization (supports do not necessary means it is implemented:-) )
• supports changing current date
• supports mouse wheel scrolling
• supporting (deferred) callback on date selection
• supports variable number of years, months and days
• supports next/prev arrows"

Date Picker - jQuery plugin 
"Date Picker component with a lot of options and easy to fit in your web application."

FullCalendar
"FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event). It is open source licensed under an MIT license."


jQuery Datepicker
"A jQuery plugin that attaches a popup calendar to your input fields or shows an inline calendar for selecting individual dates or date ranges."

Multiday Calendar Datepicker JQuery Plugin
"Multi-day, multi-month animated datepicker jQuery plugin that weighs in at 14KB with the uncompressed development version."

jQuery Frontier Calendar 
"Full month calendar jQuery plugin that looks like Google Calendar."

jQuery UI datepicker

Calendario
"Today we want to share a flexible calendar concept with you. Calendars can be a very tricky thing when it comes to their layout and responsiveness. This is an experiment for trying out some grid layouts that can be applied to calendars. We’ve created a jQuery plugin for the calendar itself and you can see some examples of how to use it in the demos. The aim is to provide a suitable layout for both, small and big screens and keeping the calendar structure fluid when possible. On large screens we want to show a grid-based layout while on smaller screens, we want to simply stack the days of the month."