Interesting jQuery effect

You know I am trying to use Gallery theme for triqui.com

Yesterday I played a bit with the theme and I completely screwed everything… something like “how to destroy a complex theme in a matter of minutes”.

Then I decided to code something similar by myself. That’s the only way I know to custom everything whenever I want.

One of the best features of Gallery theme is the slider effect, so I played a bit with jQuery until I achieved something similar.

I have to say I tried to make it with Scriptaculous but for these simple effects nothing beats jQuery in my opinion.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
 
<head>
     <script type="text/javascript" src="jquery.js"></script>
     <script>
          $(document).ready(function(){
               $("#text").stop().fadeTo("slow",0);
               $("#container").mouseover(function(){
                    $("#block").stop().animate({"marginTop": "-30px"}, "fast","linear",function(){$("#text").stop().fadeTo("slow",1);});
               });
               $("#container").mouseout(function(){
                    $("#text").stop().fadeTo("slow",0);
                    $("#block").stop().animate({"marginTop": "0px"}, "fast");
               });
          });
     </script>
     <style type="text/css"> 
     #container{
          border:1px solid black;
          width:100px;
          height:100px;
          overflow:hidden;
     }
     #block{
          padding:0px
     }
     #text{
          font:normal 10px verdana;
     }
     </style>
</head>
 
<body>
     <div id = "container">
          <div id="block">
               <img src = "image.png">
               <div id ="text">
                    Not the classic "Lorem Ipsum"
               </div>
          </div>
     </div>
</body>
 
</html>

Line 6: importing jQuery library

Line 8: we can call it a listener for the document to be ready. When it’s ready, it executes the function

Line 9: fading the content of the text element to transparent. This way I am starting with a transparent text. Obviously I can set this from the css declaration, but I wanted to do it with jQuery because it’s cool :)

Line 10: this is a listener for the container element. Listens for the mouse to be over it.

Line 11: stopping previous animations and moving the block element (the image with the text) up by 25 pixels and once the animation finishes, fades in the text element. This replicates the Gallery rollover effect, and I can display text on multiple rows. The overlow:hidden style at line 24 gives the feeling the image is sliding like a garage door and not simply moving.

Do not use relative positioning in block element or it won’t work on IE7 (yet anohter IE7 bug…)

Line 13: listener for the mouse leaving the container element

Line 14: fading away text element and moving the block element to its original position

And this is the result. As you can see it’s pretty similar to the original Gallery effect.

Move the mouse on the image and see

Download the source code with jQuery compressed library.

May 25, 2009 | Filed Under Javascript | 1 Comment

GameJS and gameQuery: two javascript libraries for game developers

During late 90’s web games as we know them did not exist.

At that time Javascript was the only language used to make some simple browser games.

Years passed, and Flash became the leading tool to make Flash games. Anyway, I want to point you to two javascript libraries made for game developers.

While you can’t obviously compare the games you can make to modern Flash action games, I am sure you can code some decent puzzle games. Some months ago I made a Sokoban prototype using Javascript and the game worked pretty well, being Javascript only.

GameJS: A 2d game development framework in JavaScript by Tommy Maintz

It’s a Javascript port of the Microsoft XNA Framework using Canvas as the rendering device.

As the author says, « Obviously JavaScript and Canvas isnâ€™t the best combination to write browser games with. Flash will be the best platform for this for a long time. But this was all about fun, experimenting with new HTML features and learning game development. In Tetris a high FPS isnâ€™t really important, but with a filled game field, which already is 10 x 18 textures every frame, I still managed to get 25fps in FF and Chrome. This means that if you would use the framework to write games like Pacman and Super Mario, you would probably get 50+ fps on a decent computer, since they both probably have less then half the amount of textures at the same time on the screen. »

Read more information at the official page, where you can play Tetris.

I have to say, at the moment the game is giving me an error, but yesterday I managed to play from another computer.

gameQuery: a Javascript game engine with jQuery

gameQuery is a jQuery plug-in to help make javascript games easier to develop by adding some simple mechanism and commodity.

It’s still in a very early stage of development and may change a lot in the versions to come.

There is an interesting game (with a detailed tutorial) you can play: a Money Idol Exchange clone called Mechalchemist

I think it would be interesting to develop a Javascript game, maybe to be embedded as a Facebook application… yes… I am playing with FB… stay tuned…

March 5, 2009 | Filed Under Game design, Javascript, Links | 2 Comments

Developing hex map concept

Some months ago I released some tutorials about hexagonal tiles (and I developed an Halloween game based upon Hex maps creation and rollover and Finding adjacent cells in an hex map 1 and 2).

Later, Douglas Huskins told me 10 years ago he wrote a collection of functions that would help a person navigate hex maps. The functions included: Identifying the adjacent hexes, identifying the shortest path between two hexes, the relative position of a hex from the perspective of another hex and the distance between two hexes.

This can be really useful to make some strategy games.

Unfortunately most of the work seems to be lost, but Douglas still wants to share the concept with us, so he is rewriting it in Javascript.

Read what he says:

« I could not find my electronic copy of the source files.

All I have are some old Visual Basic printouts that lacked much documentation. I have recoded it into Javascript and need to test it.

However, here are two of the functions: Move and Range.

The hex map layout this code works for is based on a hex map with the points laying horizontally. The top and bottom of a hex are flat.

Hexes are numbered such that the first set of digits represent the column number and the second half of the hex number’s digits represent the row number.

A typical hex number would be 0132. That would be a hex in the leftmost column and would be the 32nd hex down from the top.

This type of map comes in two flavors. The way to identify the two types of layouts is to compare 0101 with 0201. If 0101 is above 0201, then it is referred to as “Odd Column Up”.

The code is able to support either flavor. There is a variable set at the top of the file (mapOddUp) which will let the code switch between the two layouts.

The unit (ship/car/etc) that sits in a hex will face one of the hex sides. The faces are numbered clockwise using either 0-5 or 1-6. Again, the code supports both numbering systems by treating 0 and 6 as the same direction (straight up). There is a variable at the top of the file (mapIsUp0) that determines which facing number system to use.

The code has the ability to change the map size. There are max and min values that can be set.

If you have any questions, please let me know. I will convert the remaining functions next week. After that, I will properly test everything and add a simple interface for it. In the meantime, this should help you create hex based games. »

Here it is the source code: Read more

October 22, 2008 | Filed Under Game design, Javascript, Users contributions | 2 Comments

Complete Javascript popup opener

Opening popups in JS is simple, but sometimes in the same page we need to open popups with different features. There are several scripts in the net doing this task but, as usual, none of them seemed to fit my needs

I decided to code a complete javascript popup opener in order to have one function that I can use in any situation.

These are the customizable parameters of your popup:

url: the string representing the url of the page you want to open in the popup. Default value: this page.

width: popup width, in pixels. If you enter a value between 0 and 1, it will be parsed as a % of screen width. For example, if you enter 0.5, it will be parsed as 50% of screen width. Default value: half of the screen width.

height: popup height, in pixels. If you enter a value between 0 and 1, it will be parsed as a % of screen height. For example, if you enter 0.5, it will be parsed as 50% of screen height. Default value: half of the screen height.

xpos: x position of the upper left corner of the popup. It can be an integer or “left” or “right”. If you enter “left” your popup will appear in the leftmost part of the screen, if you enter “right” your popup will appear in the rightmost part of the screen. Default value: the one that will center the popup horizontally Read more

September 21, 2007 | Filed Under Javascript | 3 Comments

Javascript Sokoban game script

I’ve always been addicted to logic games and Sokoban is one of them.

From Wikipedia: Sokoban (warehouse keeper) is a transport puzzle in which the player pushes boxes around a maze, viewed from above, and tries to put them in designated locations. Only one box may be pushed at a time, not two, and boxes cannot be pulled. As the puzzle would be extremely difficult to create physically, it is usually implemented as a video game.

In some cases Javascript is not the ideal language to code puzzle games, because the player can read the code and have a clue about the puzzle. Just imagine a Minesweeper game in Javascript… a brief look at the code and you’ll know where the bombs are.

In Sokoban, reading the code is useless because you don’t play in a static level, but level changes as you move your player pushing blocks.

At this time the script is very essential, and contains just one level, but I am going to push (yes, talking about sokoban, I obviously “push”) the script very far away, including level editors, leagues and even more.

Every single line of the script will be explained, as usual, meanwhile you can watch the code from your browser.

Can you solve the level? Can you tell me where did I rip the main sprite?

September 8, 2007 | Filed Under Javascript | 12 Comments

Click image and get coordinates with Javascript

I had to display several photos where the user can click over an interesting point and have its coordinates passed through a form.
Of course, it was a bit more complicated, but this is the code i want to share with you.

Let's assume we have a photo like this:

If you continue to click on the photo, you will see pointer changing its position, same thing with x and y coordinates

How can it be done?

You can try this script, obviously changing path and styles according to your needs

PLAIN TEXT

HTML:

<html>
<head>
<script language="JavaScript">
function point_it(event){
    pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft;
    pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop;
    document.getElementById("cross").style.left = (pos_x-1) ;
    document.getElementById("cross").style.top = (pos_y-15) ;
    document.getElementById("cross").style.visibility = "visible" ;
    document.pointform.form_x.value = pos_x;
    document.pointform.form_y.value = pos_y;
}
</script>
</head>
<body>
<form name="pointform" method="post">
<div id="pointer_div" onclick="point_it(event)" style = "background-image:url('sun.jpg');width:500px;height:333px;">
<img src="point.gif" id="cross" style="position:relative;visibility:hidden;z-index:2;"></div>
You pointed on x = <input type="text" name="form_x" size="4" /> - y = <input type="text" name="form_y" size="4" />
</form> 
</body>
</html>

Tested both on Firefox and Explorer, it seems to work well.

Enjoy and give me feedback.

September 2, 2006 | Filed Under Javascript | 59 Comments

Mouse wheel handler in Javascript

I found this very very interesting script by Adomas PaltanaviÄius to determine if you are using mousewheel.

It returns a delta value, +1 or -1, according to scroll direction.

Scroll mouse wheel to see delta here.

I am publishing it here, and very soon I will start to use it to code games, form handlers, and so on.

Meanwhile, check the original script.

It needs some improvements due to some strange delta values on some browsers.

PLAIN TEXT

HTML:

<html>
<head>
<script type="text/javascript">
function handle(delta) {
    var s = delta + ": ";
    if (delta <0)
        s += "down";
    else
        s += "up";
    document.getElementById('delta').innerHTML = s;
}
 
function wheel(event){
    var delta = 0;
    if (!event) event = window.event;
    if (event.wheelDelta) {
        delta = event.wheelDelta/120; 
        if (window.opera) delta = -delta;
    } else if (event.detail) {
        delta = -event.detail/3;
    }
    if (delta)
        handle(delta);
}
 
/* Initialization code. */
if (window.addEventListener)
    window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
 
</script>
</head>
<body>
<div id="delta">Scroll mouse wheel to see delta here.</div>
</body>
</html>

Do you have an idea about how to use mouse wheel handling? Let me know, and I will (try to) code it.

July 29, 2006 | Filed Under Javascript | 6 Comments

Enhanced country selection with Css and Javascript

How many times you had to choose your country in a form, with a old, simple popup?

Time to change the way you choose your country (or anything else) with a bit of Css and Javascript.

I am showing the example in a iframe not to mess with WordPress styles.

As you can see, when you move the mouse over the text input, a list with (almost) every world country and flag appears, and when you click on a country, its ISO code is displayed into the text input.
When you move the mouse out of the country list, it closes.

How can it be made? Read more

July 23, 2006 | Filed Under Css, Javascript, Tutorials | 12 Comments

Javascript chronometer/stopwatch

I needed a javascript chronometer/stopwatch to be inserted in a project, and I didn't find anything on the web that fit my idea, so I created one almost from scratch, with all functions a chronometer should have, such as milliseconds measurement, start, stop, lap time and so on (well... that's all).

Let's see the javascript Read more

June 4, 2006 | Filed Under Javascript, Tutorials | 15 Comments