SimcoMedia Professional Web Design » JQuery

Hide Email Address From Spam Harvesters with JQuery

SimcoMedia Design — Thu, 26 May 2011 00:02:55 +0000

I used to scramble email addresses embedded into web pages so the spam harvesters wouldn’t snag them by searching the source code for the mailto: tag. Then I came across this great and simple way of using JQuery’s Ajax functionality to do the trick.

Basically the concept is to summon the email address using an Ajax function so that it displays in the specified location on your web page. The email address itself is kept in a separate file. Therefore it’s not part of the source code that the spambots cruise through to snag email addresses. Here’s how it works:

First Step: The External File

This step is simple. Create an HTML page with only one item in the body section… the email address! That’s going to look like this:

mailto:email@mydomain.com

Step Two: The JQuery Code

This is also simple since it’s one function. Here’s the JQuery code:

Let’s explain a little on how this is going to work within your page. The element we’re looking for in your target web page is the item with the .email class name. Once JQuery locates that it’s going to load the content in the parentheses which in this case is our external file that we named email_address.htm (code posted above). Essentially JQuery, as soon as the document is ready, finds the .email class item and loads that content into it. The location where this will be inserted can be located anywhere on your page. Here’s the HTML tag you will need for that to happen:

Step Three: The Target HTML

This is very simple. Place this tag where you want the email address to display:

JQuery will insert the email file between those two span tags and keep it out of the hands of those nasty spammers

Share on Facebook

Share and Enjoy:

CSS and JQuery Zebra Stripes

SimcoMedia Design — Fri, 13 May 2011 21:00:29 +0000

Looking for an easy way to create that striped look for your tables? Plus, add a little excitement with some hover effects? Well, here’s a quick example of how easy that is to do with a bit of CSS, HTML and good ‘ol JQuery!

For the purposes of this tutorial we’re using some very basic methods of table creation, CSS and very simple JQuery methods to accomplish our goals. What we will be doing is adding a stripe to every other row and then adding a hover effect to the others. This tutorial is only designed to show you how these actions can be implemented. You can redo the CSS and table layout any way you wish.

The HTML

Let’s start with a basic table. But, for our purposes, we are using all the necessary table tags like tbody, tfoot and theadso we can further isolate exactly what rows we want to have striped. This makes it easier for JQuery to differentiate between those rows in the area that you may wish to be excluded.




Example Title
Example Title
Example Title




Some Content Here
Some Content Here
Some Content Here


Some Content Here
Some Content Here
Some Content Here


Some Content Here
Some Content Here
Some Content Here


Some Content Here
Some Content Here
Some Content Here


Some Content Here
Some Content Here
Some Content Here


Some Content Here
Some Content Here
Some Content Here


 
Zebra Stripe Demo

Zebra Stripe Demo
Example Title	Example Title	Example Title
Some Content Here	Some Content Here	Some Content Here
Some Content Here	Some Content Here	Some Content Here
Some Content Here	Some Content Here	Some Content Here
Some Content Here	Some Content Here	Some Content Here
Some Content Here	Some Content Here	Some Content Here
Some Content Here	Some Content Here	Some Content Here

Notice that I gave the table an ID of ‘zebra’. This is so you can specify this particular table in the event you have others on your page or even on other pages since JQuery will apply its magic to any table unless specified.

The CSS

This is pretty simple and the body styling is just for the demo purposes and not necessary for the JQuery to do its thing.

body { 	font-family: Arial; font-size: 10pt; }

.zebra { 	background-color: #9CF; 	color: #fff; }

caption { 	font-weight: bold; color: #ff0000; font-size: 14pt; }

#zebra td { padding: 5px; }

.grey { background-color: #ddd; }

The JQuery Code

And, finally, the JQuery code that identifies the table ID, sorts through the elements to identify just those that we wish to apply the changes to, and works its magic. I’ll explain below.

JQuery works off the ID and class names of your elements and CSS. So let’s walk through it. First, we’ve asked it to identify the even table rows bu only inside the tabled with the ID of zebra and only the ones within the tbody tag. This excludes the thead area in case you wish to format that differently than the rest. What we want to do is add a CSS ‘class’ to those even rows. Using JQuery’s addClass function alllows us to do just that. The result is the even rows ONLY within the

tag have the blue background applied. The odd rows remain untouched.

Now we thought it would be fun to add a hover effect to the other rows. For this we add a function that sorts through the ODD rows and uses the mouseover JQuery function and the addClass function to accomplish. Now, keeping in mind that this works on the mouseover, we need to add a mouseout function to return it to normal. Otherwise the mouseover effect will be permanent, the background will remain grey. A true hover effect would change the color then return it to normal after the mouse leaves. So what we’ve done is simply apply the removeClass on mouseover function. Mouse on… mouse off!

Demo

You can view the demo by clicking here

Share on Facebook

Share and Enjoy:

Mega Web Buttons Pack #1

SimcoMedia Design — Mon, 25 Apr 2011 17:48:38 +0000

This awesome set of highly usable icon styled buttons is powered by JQuery and free! I came across this great article showing how to create the rollover effects and the proper way to implement these into your design.

Mega Web Buttons Pack #1.

Share on Facebook

Share and Enjoy:

JQuery Toggle Panel

SimcoMedia Design — Tue, 16 Mar 2010 21:10:36 +0000

UPDATED!

More examples provided in the demo

Sometimes we’re convinced that certain special effects we see in web pages are some sort of cult voodoo and appear mysterious. The ‘slide toggle’ effect is one of those. We’re going to show you just how easy it is to use this cool feature for revealing hidden content.

We’re going to make a simple panel slider using the JQuery toggle function. Here’s how the code will look:

Code Explanation

Let’s break this down to show how simple it is using JQuery

$(document).ready(function() {: Our standard JQuery statement declaring that when the document is fully loaded we can execute the following
$(“.trigger”).click(function(){: Here we are stating that our page element with the class ‘trigger’ is going to do something when it’s clicked on
$(“.panel”).slideToggle(“slow”);: Here we see the details of our instructions for when the ‘trigger’ is clicked. Essentially telling the div with the class name ‘panel’ to ‘slide – Toggle’ open. The ‘Toggle’ part means that it will open when clicked then close when clicked again.

The HTML

The HTML is relatively simple. First, though, we need a little styling for our elements

Followed by our HTML which is entirely up to you how you want it to look. For our demo purposes we’re using just the standard Lorem Ipsum text jargon:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Section 1.10.32 of de Finibus Bonorum et Malorum, written by Cicero in 45 BC

The standard Lorem Ipsum passage, used since the 1500s

Live Demo

To get a live view of the sliding/toggling panel Click Here

Share on Facebook

Share and Enjoy:

Using JQuery’s Ajax Functions

SimcoMedia Design — Tue, 16 Mar 2010 18:58:42 +0000

AJAX methods can be way over used but at the same time can provide a great way to consolidate related content into a confined space. JQuery provides an easy way to use their AJAX functionality with some simple code and, of course, the JQuery library. Here’s a simple example.First we have to understand the way JQuery works. Once we’ve done that then modifying this code becomes much simpler.JQuery is a library of functions that you can call upon to perform various tasks. The ones we will be working with today are the ‘load’ and ‘onClick’ functions. Our goal is to summon an external file ( .txt, .html, etc.) into an element in our page, preferably a div element. The functions will be called when someone clicks on a hyperlink (or, an image could be used or even a button). Here’s the basic code:

$(document).ready(function(){
  $("#link1").click(function() {
  $('#text').load('latin.txt');
});
  $("#link2").click(function() {
  $('#text').load('latin2.txt');
});
  $("link3").click(function() {
  $('text').load('latin3.txt');
  });
});

Ok, what we’ve created here is a series of functions that specify the id’s of 3 hyperlinks (shown below) that, when clicked, will ‘load’ the external pages referenced (latin.txt, latin2.txt and latin3.txt) into the same div element with the id of ‘text’. Here’s the HTML:






This text will be replaced when you click the hyperlinks below

Link One
Link Two
Link Three

Explaining The Code

JQuery is pretty easy to learn once you get the hang of how the functions flow. Here’s some tidbits about this simple AJAX call:

$(document).ready(function(){: JQuery uses the $(document).ready(function() { to ensure that the document is fully loaded and ready to provide you with the ability to execute your code
$(“#link1″).click(function(){: We are stating here that the hyperlink with the #id of link1 should perform a function when it is clicked. So, basically, if you read it like a sentence it states “when someone clicks on the #link1 do the following”.
$(‘#text’).load(‘latin.txt’);: The function we want to perform is to insert content into a specific div element in our page. The first part, $(‘#text’) identifies the element by using it’s id tag #text, the id of our target div. The second part, .load(‘latin.txt’);, tells what content to load into that location. So, reading it like a sentence it says: “find the div with the id of ‘text’ and load this file into that location”.

I’ve repeated the process three times in order to identify the 3 different links. The hyperlinks can be placed anywhere on your page and point to your target div. The content you summon can be a wide variety of formats including txt, html, images, etc..

For our external files they reside in my public folder and contain the standard Lorem Ipsum text for this demo. Here is the ‘live’ example of how this would look when arriving at your page.

Link One | Link Two | Link Three

This text will be replaced when you click the hyperlinks below

Clicking on the links will summon the different content without having to refresh the page. This saves on load time and at the same time allows you to designate a specific area for as much content as you’d like to cycle through instead of having a new page for each one.

Live Demo

To see this work Click Here

Share on Facebook

Share and Enjoy:

Recent Ajax Projects

SimcoMedia Design — Sat, 12 Dec 2009 19:46:59 +0000

Two recent projects involved extensive use of Ajax for displaying content. One of the great features about using Ajax is the ability to pull in external pages that can be pre-formatted with any time of content into the containing div using a common menu. Here are examples of how we’ve deployed Ajax in different ways to assist with the navigation of client websites:

Example #1 – Using Ajax in the Main Menu

When we say ‘main menu’ we are referring to the main method of navigation for the website. This is usually a horizontal or vertical menu (in this case a vertical unordered list styled with CSS) that is present on every page of the site. This image below illustrates how the site was laid out to accommodate the display of the external content into the container div (click to enlarge):

Ajax menu by SimcoMedia

Example #2 – Using Ajax in a Sub-menu

In this example the site has a main menu horizontally to provide navigation to all the various sections of the site. Within those sections are sub-menus that allow the related content to be displayed via Ajax into a container div located to the right of the sub-menu. This is extremely helpful in keeping the visitor ‘on topic’ while reviewing your site content. The image below illustrates the layout (click to enlarge):

Ajax menu by SimcoMedia

Ajax can be used in a variety of ways to improve the speed and ease of navigation for your website. Overuse of Ajax can be a site killer. For more information on how Ajax could be integrated into your website please contact us.

Share on Facebook

Share and Enjoy: