Html - Barattalo

Nov 07 2011

Unobtrusive javascript to add an overlay banner

Category: Html,Javascript — Giulio Pons @ 12:40 pm

If you have to add an overlay to a site, here is a fast way to do it with an unobtrusive javascript. Add this file to your site, just before the closing body tag, and customize the overlay() function inside the js file.

This code adds a div to cover your page with an opaque layer (you can customize the color and the opacity in the css, it’s the ovContainer0 div).

After the opaque layer which made unclickable and opaque the page, it’s inserted another div over it, which is not opaque and is used to center the overlay and contain the desidered HTML (your banner or anything else). Inside this div (which is called ovContainer) there is also another div (ovBox) that is, finally, used to contain the button whit an X to close it (ovClose) and your code. The ovBox div is dinamycally centered vertically.

You can customize the CSS of the opaque layer and the overlay box, probably you will never need to customize the CSS of the ovContainer.

Here is the function that overlay the layer that you have to customize inside the overlay.js file:

function overlay() {
	// CUSTOMIZE CSS
	ov_css (
		"#ovContainer0 {background-color:#FFF;position:absolute; width:100%; height:100%; top:0px; left:0px; z-index:10000; "+
		"opacity: .70;filter: alpha(opacity=70);-ms-filter: \"alpha(opacity=70)\";-khtml-opacity: .70;-moz-opacity: .70;}"+
		"#ovContainer {background-color:transparent;position:absolute; width:100%; height:100%; top:0px; left:0px; z-index:10000; }"+
		"#ovBox { position:relative; width:500px; min-height:150px; border:1px solid #FF9900; background-color:#FFFFCC; }"+
		"#ovContainer > #ovBox { position:fixed; }"+
		"#ovBox #ovClose { display:block; position:absolute; top:10px;right:10px;margin:5px;  padding:3px; border:1px solid #FF9900; font:12px arial; text-transform:uppercase; text-align:center; color:#000; background-color:#FFCC66; text-decoration:none; }"
	);
	// CUSTOMIZE HTML and GO!
	ov_add(
		"<a href='http://www.ecomondo.com/' target='_blank'><img src='/web/common/img/BANNER.jpg'/>"
	);
}

Download here the overlay.js file soure or use the minified version here.

You can see an example here.

Tags: banner, center div vertically, js, modal container, modal window, overlay

Comments (0)

Feb 16 2010

How to capture enter key pressed in a form (JavaScript)

Category: Html,Javascript — Giulio Pons @ 12:08 pm

Suppose you have a login form and you want to send the form when user press enter on his keyboard and not only by clicking on the submit button.
This can be achieved capturing a specific event when the user is typing. We have to capture the keypress event and listen to trigger an action when the enter key is pressed.
In the html form we have to add the “onkeypress” attribute that will contain a call to a javascript fnction that to the job.
The javascript function receive also a string parameter, so you can customize and reuse this code (it’s the ‘formid’ parameter).
The “evt” and “thisObj” parameters return the event handler and the object (the input type) that made the call to the function. The event parameter is important, the object that calls the fnction is not important as parameter since it’s used only to blur the input field.

Here is the javascript function that handle the event:

<script type="text/javascript">
	function submitonenter(formid,evt,thisObj) {
		evt = (evt) ? evt : ((window.event) ? window.event : "")
		if (evt) {
			// process event here
			if ( evt.keyCode==13 || evt.which==13 ) {
				thisObj.blur();
				document.getElementById(formid).submit();
			}
		}
	}
</script>

This is the html form with the “onkeypress” listener:

<form id='formlogin' action='file.php' method='post'>
	<input type='text' name='username' />
	<input name='pass' type='password' onkeypress="submitonenter('formlogin',event,this)" />
	<input type='submit' value='login'/>
</form>

Tags: event, events, events handller, keypress, login, login form

Comments (0)

Feb 03 2010

Fix html tags, close tags, repair bad quotes and more

Category: Html,Php — Giulio Pons @ 2:31 pm

This class can solve many problems coming from user generated html content or to fix html content before making some hard work with your bots! (It’s specially usefull for web sites without the Html Tidy module of PHP).

Hre is a quick list of the magic things it can do.

delete closed tags without their opening tag
fix open tag without close, closing them automatically
check bad nesting and fix them (if you have a bold inside a bold… or a paragrah that contains a table…)
fix bad quotes in attributes (open quotes where missing…)
merge different styles attributes in the same tag
remove html comments
remove empty tags and more bad tags

It works ina complex way since it analyzes the html code char by char and search for tags. When a tag is found start the work of cleaning attributes, then store data found in a matrix and search for the closing tags.
The data saved in the matrix are later used to re-build the correct fixed html.

EXAMPLE:
It’s very simple to use, suppose you have a variable with the dirty html:

$a = new HtmlFixer();
$clean = $a->getFixedHtml($dirty_html);

You can download the class from the HTML FIXER page.

Tags: bad tags, empty tags, html fix, html tidy, preg_replace, regular expressions, repair html

Comments (6)