Disable Link with Javscript and CSS

September 1st, 2010

I was using a Bubble Tool Tips script on a project to display description info when the mouse rolled over the title of an item pulled from the database. The problem is that the Bubble Tool Tip I was using only worked when used in links (a tag with href=”something” and title=”something”). So to get around this, I need to do two things A) Style the link to look like text, and B) Disable the link from doing anything when you click it.

So here is how you can do it yourself:

For the css I decided to use a class of bubble in the link (See Below). The CSS I included in my default style.css as follows:

.bubble{
text-decoration:none;
color:#000000;
cursor:default;
}

I’m not really a JavaScript coder, I just started learning about it in any kind of detail last week or so. I do remember reading something along the lines of onclick=”someFunction(); return false;” though. Sure enough, just having the “return false;” is enough to start the link from even reloading the page when clicked.

So my link looks like this:

<a href="#" title="Description of Item For Tool Tip" class="bubble" onclick="return false;">Link Text</a>

This in effect makes the text between an <a> & </a>tag appear normal. Ultimately, no matter how you dress it up the browse is always going to see it as a link. When you mouse over it, you may still see a url in your browsers status bar, but clicking it will do nothing and it will appear just like all your other text.

Good luck with your programming endeavor!

PHP, XML, CDATA – Adding file(s) / BLOB to CDATA in XML formatted document

August 31st, 2010

I have a project in which the user may import and export their profile data.  I decided that I would like to try XML as the structure I use to save information. The problem here is that I also have files I would like to save inside of the XML file – Pictures, Zip files and text files.

I pulled file content from some files and placed it between the CDATA markers. This did not work. I though I had to find some “binary to something” converter. The good news is that you don’t need to find some converter, you use base64_encode, and base64_decode to encode or decode your file content.

For example, let’s assume that you have files in a mysql database. The column should be of “blob”, “longblob”, etc depending on how big of a file you are saving in the database. So here is an example of how to encode a file or other related data into an XML document:


<?php
header("Content-Type: text/xml");
echo "<?xml version=\"1.0\" encoding=\"UTF-8\" ?".">"; // XML document

$gd = mysql_query("SELECT * FROM contact_pictures WHERE pic_contactid='$contact_id'");
$cgd = mysql_num_rows($gd);
if($cgd > 0){
while($agd = mysql_fetch_array($gd)){
extract($agd); // pic_id pic_contactid pic_title pic_caption pic_content pic_filename pic_filetype
echo "<pictures type=\"".htmlspecialchars($pic_filetype)."\">\n";
echo "  <title>".htmlspecialchars($pic_title)."</title>\n";
echo "  <filename>".htmlspecialchars($pic_filename)."</filename>\n";
echo "  <caption>".htmlspecialchars($pic_caption)."</caption>\n";
echo "  <content><![CDATA[".base64_encode($pic_content)."]]></content>\n";
echo "</pictures>\n\n";
}
}
echo "</profile>\n";
}
?>

If you notice the line:

echo “  <content><![CDATA[".base64_encode($pic_content)."]]></content>\n”;

You can clearly see how to encode file content, weather from a database, file_get_contents, or CURL – They can all work with this the same way.

When you parse your XML Document (import), you will need to base64_decode, probably need to save the file name and/or file type and save it back to a file, or database, etc.

Goodluck!

Finally Learning Javascript

August 27th, 2010

It is only just recently that I have had an interest in Javascript, after running into that Animation Library. I decided it is time to just dive in and see what it can do and how it’s used. I jumped head first into W3C’s Introduction: Javascript.  Right away I found a familiar feel to it’s structure in declaring and executing functions, and a quickly recognized 90% of the javascript I had seen in so many other websites  before….But now I got to see what all the different functions did!

My first order of business was to add some spunk to an HTML / PHP form. I wanted the value of selected option to place itself into the next <input type=”text”[...] /> tag. I finally figured it out, though it is not quite how I want it, it will suffice for now. I am thinking I might give JQuery / Ajax a go over next and see if they can better assist my needs.

So anyways, I just wanted to share: I’m leaning Javascript.

Hazza!