Web Design tips

Crashing most browsers:

2008-08-22T11:48:00.000-07:00

The following code is one I made to cause browsers to loop forever, and either crash, or cause an irritation to the user. In safari and other browsers, every few seconds the "Slow Script" dialogue box shows, which means that window can not be used.

Here is the code, I submitted it to some browsers, namely safari and firefox and I either received no reply, or nothing happened. This is one of the many variations that can be made, I've chosen the easiest one to understand:

function m(){
i=0;
while(i<10000){
try{
document.write("Hello World
");
delete m();
document.write("Hello World
");
}
catch(e){
new m();
i++;
}
}
}
m();

How it works.
while(i<10000){
This makes the script loop ten thousand times, while(true) may also work, but I haven't tried.

try{stuff here}catch(e){stuff here}
The try statement checks if there is an error or exception in the code it holds, if there is it uses code in the catch statement. So if a too many recursions, stack overflow (or what ever you want to call it) error occurs, the code inside catch gets executed (see below).

document.write("Hello World
");
delete m();
document.write("Hello World
");
This writes "Hello World" on the page, and "deletes" the function m.

new m();
This creates a new instance of the function m, when the original one is stopped by the browser because of the too many recursions error. Because it is a new instance, it is not prevented from executing because, even though it is a clone object of the original, it is starting executing from scratch. When that new instance is stopped, then the catch creates a new instance of the object and that is then executed.

(NOTE: in the above example, the new m() just creates a new instance of m, which (to my knowledge) is not executed, the original m is executed.

Don't select that!

2008-07-24T15:12:00.000-07:00

Sometimes you don't want a user to be able to select a part of your website, look at the below? You may not be able to select the h1 element:

Don't Select!

This is achieved by the following:

<style type="text/css">
h1{
 -moz-user-select:none;
 -moz-user-focus:ignore;
 cursor:pointer;  /* There's no point in having a 
text cursor if you can't select the text */
}
h1::selection{
 background:inherit;
 color:inherit;
}
</style>

The above works in two ways. First off, if the users browser uses a gecko layout engine, then -moz-user-select:none prevents the user from selection text, and -moz-user-focus prevents the dragging of the text in firefox 3.

In other browsers (*i think* KHTML and/or webkit) if the users browser supports the CSS 3 psuedo selector ::selection, e.g. Apple Safari browser, then the colour of the text which is selected is the same as the colour when it is not selected(this is due to the color property being set to inherit). This is the same for the background property.

Just a note, notice it is ::selection, not :selection. This is because ::selection is a CSS 3 psuedo elements, and it has been decided within the CSS 3 specification that psuedo elements are identified by two colons (::).

Furthermore it is now a good time to point out that if a psuedo element is used which a browser does not recognise, e.g. ::-moz-selection (gecko equivalent to the ::selection) in a non-gecko browser, then the whole block is ignored, for instance:


h1::-moz-selection, h1::selection {}

this will result in the whole block being ignored by all browsers [that support the selection psuedo], due to the fact that they will only support one or the other, and W3C specs say that this is the case.

Finally, getting the no select to work in IE. Internet explorer doesn't support any of the above selection-preventing CSS, so instead we have to use IE specific events: ondragstart and onselectstart.

To these events, we add "return false", so we have:


<h1 ondragstart="return false" onselectstart="return false">
 Don't Select!</h1>

Outline

2008-07-03T08:12:00.000-07:00

When users click links, like this, depending on the browser an outline will be rendered around the link. This is great for accessibility, however graphic intense components of web pages can look poor when user clicks of them, for example navigation bars. To get around this, you can use the following CSS:


a:focus, a:active{
   outline:none;
}

This works in mozilla firefox, and although I haven't checked it should work in opera too.

Why am I making this blog

2008-07-03T08:10:00.001-07:00

In my spare time, I sometimes do some web developing, and in doing so I come across some good tips and tricks and create new, helpful codes that many people will find useful. So in this I will share some (hopefully useful) stuff you can use on your site.