12 · 15

SnapTell Explorer - iTunes App of the Week - December 15, 2008

Snap a picture of the cover of any book, DVD, CD, or video game and within seconds get a rating, description and links to Google, YouTube, Wikipedia, IMDb, eBay, Barnes & Noble and more. Use this app while shopping in a store to quickly find more information, compare prices, buy the product, or to remember to look at the product later. Only books, DVDs, CDs, and video games sold in the US are currently supported, but they are soon adding support for international items and more product categories. This unique application uses advanced image recognition technology developed by SnapTell to instantly match an image against millions of product images.  For faster results, use a WiFi connection if available.  Download SnapTell App Today!
About the Author Kyle Reddoch is a Web Development Expert and Internet Guru located in Amarillo, TX. To learn more about him you can visit his site at KyleReddoch.com
12 · 10

A Simple JavaScript Drop Down Menu

This is an extremely versatile drop down menu script for ordinary links on your page, including image links. It can be activated either onMouseover or onClick. The menu intelligently determines whether the dropped menu is too close to the browser's edge, adjusting its positioning so it's always in view.

This script works in all the major DHTML browsers- IE4+, NS6+, and Opera7+. You can specify a valid default URL for each link for other browsers to navigate to. Cool!

This may look long but bear with me. It will pay off in the end!

Step 1

Insert the following style sheet and script into the <head> section of your page:

<style type="text/css"> #dropmenudiv{ position:absolute; border:1px solid black; border-bottom-width: 0; font:normal 12px Verdana; line-height:18px; z-index:100; } #dropmenudiv a{ width: 100%; display: block; text-indent: 3px; border-bottom: 1px solid black; padding: 1px 0; text-decoration: none; font-weight: bold; } #dropmenudiv a:hover{ /*hover background color*/ background-color: yellow; } </style> <script type="text/javascript"> //Contents for menu 1 var menu1=new Array() menu1[0]='JavaScript Kit' menu1[1]='Freewarejava.com' menu1[2]='Coding Forums' menu1[3]='CSS Drive' //Contents for menu 2, and so on var menu2=new Array() menu2[0]='CNN' menu2[1]='MSNBC' menu2[2]='BBC News' var menuwidth='165px' //default menu width var menubgcolor='lightyellow'  //menu bgcolor var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds) var hidemenu_onclick="yes" //hide menu when user clicks within menu? /////No further editting needed var ie4=document.all var ns6=document.getElementById&&!document.all if (ie4||ns6) document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>') function getposOffset(what, offsettype){ var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop; var parentEl=what.offsetParent; while (parentEl!=null){ totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop; parentEl=parentEl.offsetParent; } return totaloffset; } function showhide(obj, e, visible, hidden, menuwidth){ if (ie4||ns6) dropmenuobj.style.left=dropmenuobj.style.top="-500px" if (menuwidth!=""){ dropmenuobj.widthobj=dropmenuobj.style dropmenuobj.widthobj.width=menuwidth } if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover") obj.visibility=visible else if (e.type=="click") obj.visibility=hidden } function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function clearbrowseredge(obj, whichedge){ var edgeoffset=0 if (whichedge=="rightedge"){ var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15 dropmenuobj.contentmeasure=dropmenuobj.offsetWidth if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure) edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth } else{ var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18 dropmenuobj.contentmeasure=dropmenuobj.offsetHeight if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up? edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either? edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge } } return edgeoffset } function populatemenu(what){ if (ie4||ns6) dropmenuobj.innerHTML=what.join("") } function dropdownmenu(obj, e, menucontents, menuwidth){ if (window.event) event.cancelBubble=true else if (e.stopPropagation) e.stopPropagation() clearhidemenu() dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv populatemenu(menucontents) if (ie4||ns6){ showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth) dropmenuobj.x=getposOffset(obj, "left") dropmenuobj.y=getposOffset(obj, "top") dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px" dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px" } return clickreturnvalue() } function clickreturnvalue(){ if (ie4||ns6) return false else return true } function contains_ns6(a, b) { while (b.parentNode) if ((b = b.parentNode) == a) return true; return false; } function dynamichide(e){ if (ie4&&!dropmenuobj.contains(e.toElement)) delayhidemenu() else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget)) delayhidemenu() } function hidemenu(e){ if (typeof dropmenuobj!="undefined"){ if (ie4||ns6) dropmenuobj.style.visibility="hidden" } } function delayhidemenu(){ if (ie4||ns6) delayhide=setTimeout("hidemenu()",disappeardelay) } function clearhidemenu(){ if (typeof delayhide!="undefined") clearTimeout(delayhide) } if (hidemenu_onclick=="yes") document.onclick=hidemenu </script>

Step 2

Having done the above, all that's left is setting up your link(s) so a menu drops down. The below sample HTML demonstrates two links, one with the menu dropping down onMouseover, and the other, onClick:

Somewhere | Somewhere2 (onclick)
The dropdownmenu() function accepts 4 parameters as shown:
dropdownmenu(this, event, menuarray, 'width')
Only customize the last two parameters (menuarray and 'width'), where: 3) Menuarray- The array contents you wish the menu to display (see code of Step 1). 4) Width- The width of the menu (pass in "" if you simply wish to use the default menu width). And that's about it!

More information on customizing the menu

Inside the code of Step 1, a few items are available for customization. Firstly, the style sheet can be used to add additional visual styling to the menu, excluding default menu width and background color, which are controlled by two variables within the script that follow. You can also specify the disappearance delay of the menu when the mouse moves out of it.
About the Author Kyle Reddoch is a Web Development Expert and Internet Guru located in Amarillo, TX. To learn more about him you can visit his website at KyleReddoch.com.
12 · 09

Protecting email addresses on web pages from spambots

This tip will help you in protecting your email address from spambots. Avoiding spam is not easy and there are several steps you can take to stop spam. However, this tip describes just one of ways of protection against it. The tip describes how to prevent spambots from picking your email address from your web site.

What is 'spam' and how to they get your email from a web page?

SPAM is unsolicited email. It's something you never asked for and most of the times, it's garbage! When you include a mailto tag in a web page, you expose your email to spammers. Getting an email address from a mailto tag is quite easy. You would have noticed that email addresses follow a set format. Spambots are spider like programs that move around on the internet checking HTML documents for this format. When they find it, they extract the email address and store it for their diabolical needs. But there is a way to fool spambots. If you write the email address as a series of special characters, instead of alphabet, it's highly unlikely that spambots would be able to pick it up. Each lowercase alphabet has a corresponding special character that we call a Character Entity. In addition to lowercase alphabet, there are special characters for @, the underscore, the period and the hyphen. You can find the full list of HTML Special Characters of Character Entities here. Each special character starts with an ampersand sign, followed by a hash, then a specific numeric value and ends with a semicolon. Thus, the special character for a is &#97; for b is &#98; and so on. Now if you have an email address like bard@somewhere.com, you should write it as a series of special characters: &#98;&#97;&#114;&#100;&#64;&#115;&#111;&#109;&#101;&#119;&#109;&#101; &#114;&#101;&#46;&#99;&#111;&#109; This looks really messed up.. but that's the price you have to pay to protect yourself from spam. However, the above method is not foolproof. Addition of a few lines of code to the spambot can ensure that the script searches for email addresses in both human and character entity formats. The safest way to display an email address on a page is to use it as an image or a Flash file. However, with images if you use mailto, the purpose is lost. So a Flash file would be the best. Update: Google search engine can now read flash files so I guess spambots would be able to read these too (if not now then sometime in the near future). So what are you left with? - Use HTMl forms and server-side programming to receive visitor inputs.
About the Author Kyle Reddoch is a Web Development Expert and Internet Guru located in Amarillo, TX. To learn more about him you can visit his site at KyleReddoch.com.
12 · 08

Pandora - iTunes App of the Week - December 8, 2008

Pandora Radio is your own FREE personalized radio now available to stream music on your iPhone. Just start with the name of one of your favorite artists, songs or classical composers and Pandora will create a "station" that plays their music and more music like it. Already a Pandora user? Even easier. Just log in. Pandora on the iPhone is fully integrated with Pandora on the web. Enjoy all your existing stations - and create new ones right from your iPhone or iPod Touch. Download the Pandora Radio App Today!
12 · 07

Creating Add to Favorites link with JavaScript

Have you ever been to a site that has a link to add the site to your favorites? Have you ever wondered how that works? Here, I will explain how to make a quick and efficient "Add to Favorites" link with JavaScript. Let us first see the advantages of adding such a link: If visitors really like your site, they can easily add it to their favorites list through the normal process - Under Internet Explorer, click on the "Favorites" menu item and then on "Add to Favorites...". However, they might just forget about this or they just might feel lazy (...you now what I mean). If you have an "Add To Favorites" link, you not only remind the visitors of the favorites folder but also prompt them to add your site and this just takes one click. Here we use a little JavaScript and tie it up to the HREF tag of the link and here is the JavaScript function code:
function addfav()
   {
   if (document.all)
      {
      window.external.AddFavorite
      ("http://www.webdevelopersnotes.com","WebDevelopersNotes")
      }
   }
Note: The javascript statement "window.external.AddFavorite(..." should be a single line The part in red color in the above code is the URL and the blue is the Name you want to give to the link. The function can be placed inside the document head or an external .js file and will be called from the link as:
This creates the "Add to Favorites" link to your site and allows people to add it to their favorites. I hope you have enjoyed this quick and simple JavaScript tutorial! Share it with your friends!
About the Author Kyle Reddoch is a Web Development Expert and Internet Guru located in Amarillo, TX. To learn more about him you can visit his site at KyleReddoch.com.
Kyle Reddoch

I am an aspiring Web Developer, Android Fanatic, Family Man, and all around Web Geek! I also do Freelance Development work.

About

My Journey through the Interwebs!