Create a dynamic content animated footer ad for your site in just 9 jQuery lines – 17 lines version

Some days ago I showed you how to create a dynamic content animated footer ad for your site in just 9 jQuery lines.

Now it’s time to write eight more lines to add two important features:

The first, as suggested in a comment, is allowing to set a delay before the ad appears.

The second is using a cookie to let the ad appear only once in a session. This means if you refresh the page, the ad won’t appear again, until you close the browser window and open it again.

This is what we’ll get… the ad appears after three seconds, and only once in a session.

Now let’s see the new lines added: Read more

March 10, 2010 | Filed Under Javascript | 1 Comment 

Create a dynamic content animated footer ad for your site in just 9 jQuery lines

Have you ever seen those ads sliding up from the bottom of your page when you are visiting a website? We are going to create a simple one in just 9 jQuery lines.

Moreover, with this script you will need to add just one line to your site to display the ad.

Just to make it easier to understand, I am showing you for free the principles some “companies” sell at more than $40. According to such sites, ads like the one we are about to make should increase your conversions, have more readers sign up to your newsletter, and make you live in harmony. All in one-

Unfortunately, I am only showing you how to create such ad in a bunch of jQuery lines.

This is what we are going to make: Watch the example.

Ready for the recipe? Here we go:

A web page

Obviously, you need a webpage. Any webpage will fit, as long as you include

<div id="triqui_ad"></div>

just before the </body> tag.

jQuery

Then it’s time to add the power of jQuery to the page: insert this script between <head> and </head> Read more

March 3, 2010 | Filed Under Javascript | 6 Comments 

Placing ads before a game loads with jQuery

When you run a Flash game portal or a Flash game official site, you normally place ads everywhere hoping someone will notice it.

Obviously the most interesting place where to place ads is already taken by the game itself, so we are going to create a javascript preloader that will show an ad for 15 seconds before the game starts loading.

In order to do it, you need jQuery and swfobject

Now let’s suppose the game has to be embedded in a div called the_game, just like I did in my BarBalance official site.

Just create the div this way:

<div id = "the_game">
	<h1>BarBalance game is loading</h1>
	<SCRIPT language="Javascript">
	var cpmstar_rnd=Math.round(Math.random()*999999);
	var cpmstar_pid=10016;
	document.writeln("<SCR"+"IPT language='Javascript' src='http://server.cpmstar.com/view.aspx?poolid="+cpmstar_pid+"&script=1&rnd="+cpmstar_rnd+"'></SCR"+"IPT>");
	</SCRIPT>
</div>

I used some SEO like an h1 tag and relevant content, and a CPMStar because it’s animated and we suppose won’t bore the player during the 15 seconds.

If you don’t have a CPMStar account, feel free to use my code :)

Then the jQuery part:

<script type="text/javascript">
	$(document).ready(function(){
		setTimeout(function(){
			$("#the_game").fadeOut(2000,function(){
				swfobject.embedSWF("barbalance.swf", "the_game", "640", "480", "9.0.0");
			}); 
		},15000);
	}); 
</script>

It’s just a 15000 milliseconds timeout fading out with a callback replacing the existing content with the Flash game.

Look at BarBalance official site to see it working.

I can’t wait to know this ad eCPM… did you already use something similar?

December 30, 2009 | Filed Under Javascript, Monetize | 6 Comments 

JQuery powered lights off effect

A couple of days ago a fan of my Facebook page asked me for a script to make the effect you see on this page.

Obviously simply reverse-engineering the script wouldn’t be enough for me, so I decided to create a lights off effect that make any content in a given div remain highlighted while the rest of the page fades to black (or to any color).

I used JQuery to manage the fade effect because it’s the best Javascript library available at the moment.

As a developer, I also tried MooTools and scriptaculous but believe me JQuery is some steps ahead.

Now let’s see this script: Read more

October 12, 2009 | Filed Under Css, Html, Javascript | 7 Comments 

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<!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 | 2 Comments 

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 | 4 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:

Try to click on a photo now…

You pointed on x =
– y =

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<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 | 66 Comments 

Next Page →

flash games company