CodeJoust Blog

Refractoring a Javascript Background Changer

Protecting images for a website is a cat and mouse game. Trying to elude those who wish to take your images, instead of peacefully view them is difficult, but you can try to be ahead using a few techiques.

1. Use .htaccess rules.

2. Use an image-blocking javascript solution

3. Overlay an image in the same image tag

4. Prevent printing / projection etc. using css rules.

–> @media print,projection { .trans { background:url(’copyright.png’); }  }

–> @media print,projection { img { background:url(’copyright.png’);} }

Advantages of the Javascript Overlay vs the Image Overlay

Automatically is applied upon pageload, on all images, no need to manually change the images on the page.

The javascript overlay follows:

(function($) {
  $.fn.mask = function(){
  	this.each(function(){
  		var img = {
  			src: $(this).attr('src'),
  			bg: 'url('+this.src+')',
  			style: $(this).attr('style'),
  			width: $(this).width(),
  			height: $(this).height(),
  			alt:   $(this).attr('alt')
  		};
  		var div = $(this).wrap('<div>').parent().addClass('img');
  		div.attr({style: img.style, title: img.alt}).css({backgroundImage:img.bg, width: img.width, height: img.height});
                div.bind('contextmenu',function(){return false;});
  		div.find('img').remove();
  	});
  };
})(jQuery);

Which does the overlaying for you, as a dropin plugin.

Usage:

$(window).bind('load',function(){$('img').mask();});

Demo Page.

The ‘Race to Witch Mountain‘, is a Disney movie about two aliens who crash-land on the earth, then try to get back to their ship.
In the beginning scene, a music-video style cut of shaky footage of saucers, stars, and presidential warnings rolls by.
Disney was trying for an action-comedy movie here. They kept well with the explosions and fast pace towards the end.
Their culture and feel were pretty well tuned, and they focused on one theme.

Witch Mountain was an good evil government protryal, but, in my opion, it was too hard to get into.

However, they was little inter-charater friction, and all the conflict was between the attacker, government, and the Jack Bruno, Dr. Alex Friedman, and the two kids. Everything was predictable less than 10 mins. into the movie.

Overall, if you like Sci-Fi or Action, this is a good family movie to watch. If you want a good, interesting, sci-fi movie, this one isn’t quite it.

Q: How do I setup a home webserver?

The best thing to do would probably to get shared hosting if they aren’t big websites, VPS if they are larger.

However, running your own dedicated server is rather tricky, and probably will take up a lot more time than not the long run.

However, if you still want to run your own server, you need to use a service like dyndns.org to foward you home or work internet connection to the internet using a static ip address that can be reached. Most isps use dynamic ip addresses, which change every so often, and when people try to access the website, the website will still point to the old ip address and the site won’t load. Furthermore, you need to check if your current internet connection will allow webhosting on it’s servers.

It’s a good idea to run a server as a seperate computer and make sure it’s up and running well. Using a good preconfigured lamp (linux apache mysql php) stack, through a distribution such as Ubuntu Server and running that is a good idea. It helps to know some basic command line tools and utilities before trying to setup a server, it will save a lot of time.

If the server is behind a firewall (which it should be), you need to enable port fowarding on the firewall which fowards esternal requests to your home network to a certain computer… setting port 80 to go be unblocked and fowarded to the server will allow for that.

If you are using windows, and you want to do this, take a look at this good lifehacker article on the subject.

Recently, when I was developing a PHP facebook application, I came across the need to use a POST form, but I didn’t want the form to show up as a form, with a submit button and such (because all the inputs would be hidden.)

Therefore, I came up with this little trick…

<form action="script.php">
<input type="hidden" name="uid" value="<?php echo $uid; ?>" />
<input type="hidden" name="pref" value="go" />
<input type="hidden" name="action" value="<?php echo $action ?>" />
<input type="hidden" name="sess" value="<?php echo $sesskey; ?>" />
<input type="submit" id="send" class="hide" style="display:none;" name="submit" value="<?php echo $etag; /* Why not? */ ?>" />
<label for="send" class="link">Click me to Print!</label>
</form>

Here, I just hide the submit button, and use a styled label as the target to the hidden submit button.

This way it doesn’t get in the way of the user, and I can ensure their session isn’t duplicated, or a potentially long url is created.

I also personally don’t like the ‘form’ look, so here’s some css to ‘unform’ the looks…

input[type=hidden], .hide { display:none; } /*Firefox Shows Slight Spacing for Hidden Elements (Older versions). */
.link { color:blue; text-decoration:underline; cursor:pointer; }
.link:hover { color:orange; }

I recommend this for ‘print’ pages, because you can post as much data as you want, and it can be linked to the user’s session, so the link can’t be shared

That’s all! If anyone wants a good tutorial on how to write a facebook application, from A to Z, please leave a comment!

Have you ever been stuck with a blank word / openoffice document and no idea what to write. You lost all your thoughts when you stared at the blank screen. It reached out and grabbed your thoughts?

Well, not where is no need to fear becuase, I’ve created a template that will fill your screen until you overwrite it. Smash it. Delete it. Move it. Whatever.

So, here’s the awaited text:

I dislike blank documents immensely.

In fact, I'm just writing this to add to the screen. The screen isn't blank now. There!

Muhaha. Now, this is my 'blank document' template. (vanquishing the blank-screen monster!)

So I'll be tired of deleting this mess every time I create a document. What fun!
But, well. Yes, I still think it's required. Think I'm silly if you will.

~Iain - ~finis

Now just save this as a template (not as a normal document). Then, Goto File>>Template, the right-click it and select, “Set as default template”.
If it annoys you to much, set the old template back as the default template. (the empty, void, cold one! RUN!)