You Are Here Home > Web Design

Web Design

PHP: Problem With Displaying French Accented Characters; black diamond…

If you have this problem and your accented characters are being replaced by black diamonds with question marks in them and you tried EVERYTHING you could find and nothing worked and no one seems to know what’s going on and you think it’s PHP or Apache that is causing this issue and you tried changing their configuration directives and you are pulling your hair out then this could be your editor!

Go to it’s preferences, most of them have a section for font encoding, for example in Komodo Edit, go to:

Preferences > Fonts and Colors > Under the Fonts tab > There is the font encoding, choose UTF-8

After this step you might have to change the encoding of the current file, again most editors should be able to do this, refer to your editor’s docs for more info on this, but here is how to do this in Komodo Edit:

Open File > Edit > Current File Settings > In File Settings Box > Change Encoding To UTF-8 > Save

and Viola!

PHP: Problem With Displaying French Accented Characters; black diamond…
Comments (0)   Filed under: Komodo Edit, PHP, Web Design, Web Development   Posted by: Codehead

jQuery: How To Check If An Object Exists

   if ($('#myDiv').length)
      $('#myDiv').show();

Source:
http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_test_whether_an_element_exists.3F

jQuery: How To Check If An Object Exists
Comments (0)   Filed under: JavaScript, Web Design, Web Development, jQuery   Posted by: Codehead

jQuery: Scroll Window To The Top Of An Object

Here is how to do this:

var offset = $('#OBJECT-ID').offset().top;
$('html,body').animate({
   scrollTop: offset
}, 500);
jQuery: Scroll Window To The Top Of An Object
Comments (0)   Filed under: JavaScript, Web Design, Web Development, jQuery   Posted by: Codehead

How To Create WordPress Widgets

No need for a huge fancy post, here is a very simple Wordpress widget:

You must paste this code into your theme’s functions.php file located at: /wp-content/themes/YOUR_THEME

class My_Simple_Widget {
 
   function control(){
      $data = get_option('My_Simple_Widget_data');
      ?>
         <p><label>Title:</label> <input name="My_Simple_Widget_title" type="text" value="<?php echo $data['title']; ?>" /></p>
         You can have whatever you want here, even a huge form with any kind of form field you want...
      <?php
      if (isset($_POST['My_Simple_Widget_title'])) {
			$data['title'] = attribute_escape($_POST['My_Simple_Widget_title']);
			update_option('My_Simple_Widget_data', $data);
      }
   }
 
   function widget($args) {
		$data = get_option('My_Simple_Widget_data');
		echo $args['before_widget'];
		echo $args['before_title'] .$data['title'] .$args['after_title'];
		echo 'Here you can have whatever you can imagine...';
		echo $args['after_widget'];
   }
 
}
 
wp_register_sidebar_widget('My_Simple_Widget_ID', 'My Simple Widget Title', array('My_Simple_Widget', 'widget'));
wp_register_widget_control('My_Simple_Widget_ID', 'My Simple Widget Title', array('My_Simple_Widget', 'control'));

This widget will show up in your dashboard under Appearance > Widgets and you can add it to your sidebar.

I hope this helps :)

How To Create WordPress Widgets
Comments (0)   Filed under: PHP, Programming, Web Design, Web Development, Wordpress   Posted by: Codehead

The Best Overall Code Editor Ever: Komodo Edit

A while back I wrote a post about what I think is the best Python code editor but I decided to write an update and write a little more about Komodo Edit…

I use Dreamweaver to write HTML/CSS/JavaScript/PHP code and a few days ago I decided to open Komodo Edit and see how it does with PHP.

I did try other editors for PHP but their support for HTML and CSS was lame and I’m so used to Dreamweaver’s comprehensive code completion features.

Well, I was surprised that Komodo Edit has all those features (& more) and handles PHP/CSS/HTML/JavaScript beatuifully, open a new PHP file and after ?> type:

<a

And then hit space, it will suggest everything Dreamweaver suggests and more! then write:

style=”

And again it will suggest every CSS property, then type:

:

It will suggest all the possible values, more than Dreamweaver…

The other thing is that it will show you function descriptions for all the functions and that could be very handy.

I have to say that I don’t know if I’m going to pay for Dreamweaver ever again and if you are looking for a free and excelent code editor, try Komodo Edit.

I have no affiliation with ActiveState and what I said above is my personal thoughts and ideas and an attempt to show this excellent/free/open-source product to others.

Happy Coding.

The Best Overall Code Editor Ever: Komodo Edit
Comments (1)   Filed under: CSS, HTML/XHTML, JavaScript, Komodo Edit, PHP, Web Design, Web Development   Posted by: Codehead

To Validate Or Not To Validate Your Markup

To be honest, I personally think that as long as my pages work fine and look the same on all the major browsers, I’m fine. But for me, it is also very important to properly balance all my tags and try to keep the pages as close to be valid as possible.

But here is something interesting, these are screenshots of my attempt to validate some of the major Internet players such is Google, Facebook, Twitter etc.

(Click on the images to see them in full size)

(You can try this tool here: http://validator.w3.org/)

It doesn’t look like these guys care either but at the end, it’s up to you to decide if it’s worth it for you to validate your markup and write perfect HTML/XHTML/CSS…

To Validate Or Not To Validate Your Markup
Comments (3)   Filed under: CSS, HTML/XHTML, Web Browsers, Web Design, Web Development   Posted by: Codehead

Rotate Text Using CSS

This is not a standard property yet but here it is:

.THE_TEXT_CLASS {
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* IE */
   -webkit-transform: rotate(-90deg);
   -moz-transform: rotate(-90deg);
   -o-transform: rotate(-90deg); /* Opera */
}

For now, it’s best if you use images instead…

Rotate Text Using CSS
Comments (0)   Filed under: CSS, HTML/XHTML, Web Design, Web Development   Posted by: Codehead

A Way To Send A Message To Apple About Flash

Here is what can be done, someone could write a piece of JS code and make a big Flash banner, big I mean very big and then the JavaScript could check for iPad and iPhone and try to show the banner to them…

You can then urge web developers and web masters to put it on their websites and blogs so that every iPhone or iPad user would see a big giant empty box with a message like “Your browser doesn’t support …”.

A Way To Send A Message To Apple About Flash
Comments (0)   Filed under: Actionscript, Annoying Stuff, Apple, Flash, JavaScript, Web Design, Web Development   Posted by: Codehead

jQuery UI Dialog And The Enter – Return Key Problem

This is another post for my ‘Annoying Stuff’ collection and this one is very, so very annoying…

The problem is that jQuery UI, supports forms in dialogs but the problem is that a user can’t hit ‘Enter’ to submit the form, it will break everything, a user has to actually hit the ‘Submit’ (or whatever) button manually. This make the whole thing completely useless unless you make some changes that are basically tweaking the internals of jQuery UI, which is ugly and can break if they change things around but sadly this is the only solution for now.

Assuming that you use the same syntax jQuery UI suggests to create your form, the fix is something like this:

$('.dialog').find('input').keypress(function(e) {
	if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
		$(this).parent().parent().parent().parent().find('.ui-dialog-buttonpane').find('button:first').click(); /* Assuming the first one is the action button */
		return false;
	}
});

You might have to modify it a tiny bit, if that’s the case, you most likely have to change the part $(‘.dialog’) so that it selects the right container that wraps the form…

jQuery UI Dialog And The Enter – Return Key Problem
Comments (0)   Filed under: Annoying Stuff, JavaScript, Programming, Web Design, Web Development, jQuery   Posted by: Codehead

onMouseOut fix on nested elements – JavaScript

When you have nested elements and you add an onMouseOut event handler to the parent element, browsers trigger onMouseOut event when mouse pointer hovers it’s child elements.
While this is a standard behaviour, for one project I needed to write a code to override this behaviour.
With this code, when you mouse over the child elements, onMouseOut event will be ignored.

You can download this code here:
http://images.code-head.com/code/javascript/fixOnMouseOut.zip

You can test it here:
http://images.code-head.com/code/javascript/fixOnMouseOuttest.html

This code is cross browser and here is how to use it:

<script language="javascript" type="text/javascript" src="fixOnMouseOut.js"> </script>
<div onMouseOut="fixOnMouseOut(this, event, 'JavaScript Code');">
   So many child elements
</div>
onMouseOut fix on nested elements – JavaScript
Comments (7)   Filed under: JavaScript, Web Design, Web Development   Posted by: Codehead
Older Posts »