Javascript: Active Content
If you look at any solution involving tabs, you will notice two things:
- When you click on a tab, content is grabbed through ajax for the clicked tab.
- Or it is made visible which was previously hidden.
As you might have guessed, it is better to go with the later approach because for the interface involving tabs, ajax doesn’t seem to be logical or fast solution. You click on a tab, content should be visible at the same time.
Well, the idea for the solution is simple:
You put all your content within the document inside some containers like DIVs and giving each DIV a unique ID which javascript needs to load the correct content based on the tab clicked. Also, you make the content for the first tab to be visible when page is loaded and hide rest of the DIVs. Finally, you use javascript to do the trick.
I have made a generic javascript solution that you can import into your page and use it straight away. Here is what you need to do to make your content always active:
- Import the active content JS file into your file:
<script type="text/javascript" src="active_content.js"></script>
- Where you generate your tabs, put links like this:
<a href="#" onclick="show_content('div_1'); return false;">One</a>
<a href="#" onclick="show_content('div_2'); return false;">Two</a>
<a href="#" onclick="show_content('div_3'); return false;">Three</a>
As an example, when above links are clicked, they will show below divs:
<div align="center" id="div_1" class="active_content"> <h3 style="color:#FF0000;">Div One</h3> <p style="width:400px;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus non risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p> </div> <div align="center" id="div_2" class="active_content"> <h3 style="color:#FF0000;">Div Two</h3> <p style="width:400px;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus non risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus non risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus non risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p> </div> <div align="center" id="div_3" class="active_content"> <h3 style="color:#FF0000;">Div Three</h3> <p style="width:400px;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus non risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p> </div>
Here is the active content javascript code:
//////////////////////////////////////////////////////////////////
// - ACTIVE CONTENT - //
//////////////////////////////////////////////////////////////////
// Created By ; //
// SARFRAZ AHMED CHANDIO //
// sarfraznawaz2005@gmail.com //
// //
// Create Date: 30 Jan 2009 //
// Last Update Date: N/A //
//////////////////////////////////////////////////////////////////
// Please keep this notice intact if you are using this file. //
//////////////////////////////////////////////////////////////////
addLoadListener (init_dynamic_tabs);
function init_dynamic_tabs()
{
var items = getElementsByAttribute("class", "active_content");
var counter = 0;
for (var i = 0; i < items.length; i++)
{
counter++;
// make all items invisible except for the first one
if (counter != 1)
{
items[i].style.display = "none";
}
}
}
function show_content(id)
{
var items = getElementsByAttribute("class", "active_content");
// hide all items
for (var i = 0; i < items.length; i++)
{
items[i].style.display = "none";
}
// show required item now
document.getElementById(id).style.display = "block";
}
/* Very useful function for getting elements by their attributes */
function getElementsByAttribute(attribute, attributeValue)
{
var elementArray = new Array();
var matchedArray = new Array();
if (document.all)
{
elementArray = document.all;
}
else
{
elementArray = document.getElementsByTagName("*");
}
for (var i = 0; i < elementArray.length; i++)
{
if (attribute == "class")
{
var pattern = new RegExp("(^| )" +
attributeValue + "( |$)");
if (pattern.test(elementArray[i].className))
{
matchedArray[matchedArray.length] = elementArray[i];
}
}
else if (attribute == "for")
{
if (elementArray[i].getAttribute("htmlFor") ||
elementArray[i].getAttribute("for"))
{
if (elementArray[i].htmlFor == attributeValue)
{
matchedArray[matchedArray.length] = elementArray[i];
}
}
}
else if (elementArray[i].getAttribute(attribute) ==
attributeValue)
{
matchedArray[matchedArray.length] = elementArray[i];
}
}
return matchedArray;
}
// this will run the specified function on document load
function addLoadListener(fn)
{
if (typeof window.addEventListener != 'undefined')
{
window.addEventListener('load', fn, false);
}
else if (typeof document.addEventListener != 'undefined')
{
document.addEventListener('load', fn, false);
}
else if (typeof window.attachEvent != 'undefined')
{
window.attachEvent('onload', fn);
}
else
{
var oldfn = window.onload;
if (typeof window.onload != 'function')
{
window.onload = fn;
}
else
{
window.onload = function()
{
oldfn();
fn();
};
}
}
}
Proceed to download the Active Content.
Google Wave is Out
Google Wave, one of the most anticipated applications has made its debut. A flood of invites that is 100,000 has already begun for testing phase. Each invited person can invite five people for testing. Be little patient though, sooner or later your number will come to start using this highly acclaimed application. Can’t wait? request an invite here.
.
.
What is Google Wave?
Google Wave is an online tool for real-time communication and collaboration. A wave can be both a conversation and a document where people can discuss and work together using richly formatted text, photos, videos, maps, and more. See the video below for more information about it.
.
Using Google Wave
Mashable has made a wonderful Google Wave guide, check it out here.
.
Google Wave Screenshot
.
.
.
Turn Damn IE Into Google Chrome
As we all hate IE, so does Google. That’s true, google has found a solution for it; Google Chrome Frame. Even though we all hate IE but we still can not ignore it as it is unfortunately used by the most users from around the globe.
Google Chrome Frame is basically a plugin to be added into IE which will then turn IE into Chrome. In other words, you will enjoy the Chrome’s functionality inside of the IE. The plugin’s size is said to be around 500KB which means it won’t create any overhead issues too. The Google Chrome Frame can be used inside IE6, IE7 and IE8.
According to tests run by Computerworld, Internet Explorer 8 (IE8) with the plug-in was 9.6 times faster than IE8 on its own. Computerworld ran the SunSpider JavaScript benchmark suite three times each for IE8 with Chrome Frame, and IE8 without the plug-in, then averaged the scores.
.
.
According to Google official blog:
“Google Chrome Frame makes life easier for web developers as well as users. For users, installing Google Chrome Frame will allow them to seamlessly enjoy modern web apps at blazing speeds, through the familiar interface of the version of IE that they are currently using.”
.
To start using Google Chrome Frame, developers need to add a single tag:
<meta http-equiv="X-UA-Compatible" content="chrome=1">
.
Google Chrome Frame Video
.
Here is the Microsoft’s response to Google Chrome Frame:
“With Internet Explorer 8, we made significant advancements and updates to make the browser safer for our customers. Given the security issues with plug-ins in general and Google Chrome in particular, Google Chrome Frame running as a plug-in has doubled the attack area for malware and malicious scripts. This is not a risk we would recommend our friends and families take.”
.
.
Which is the Best PHP Framework?
Headings With Paragraphs
As you might all know heading tags (H1 through H6) are very useful in terms of search engine optimization (SEO). The SEO guys usually put the title of the page inside these heading tags or sometimes the important keywords also.
A SEO guy at our company approached me and described a problem he was not able to find the solution to even after discussing it with a senior developer. The problem he told me was that he was not able to put the heading tags along the same line as paragraph. Now this is sort of ridiculous question for those who know how to resolve this problem but don’t forget that it is not ridiculous for those who don’t know about it. You see sometimes you know all big things but not the minor fixings. For example, at school, I used to be almost perfect at spelling but once I was astonished to see that I used to wrongly spell the word idea as idia. I stopped and said to myself how come i have not been able to spell that word correctly when I was able to spell the most complex words correctly. I found the reason, I considered the word idea to be negligible so I never paid attention to it.
Same must have been the case with the senior developer who was asked to resolve this problem who couldn’t do so.
The Solution?
You need to know that heading tags are block level elements or in CSS’s words, you can specify as follows:
h1
{
display:block;
}
Because they are block level elements, they can not show at the same line as that of paragraphs. For this reason, we need to make them inline elements to be able to appear at the same line as paragraphs. The word Inline speaks for itself, it makes elements appear at the same line. Therefore, here is how you can make headings tags appear along the same line as the paragraphs.
/* make the heading appear on the same line */
h1, h2, h3, h4, h5, h6
{
display:inline;
}
Here is the demo.
Deleting Table Rows Using JQuery and PHP
In this tutorial, I will show you how you can delete table rows from database using JQuery and PHP. The interesting thing here is that we will be able to delete the rows without reloading the page and present some cool animations while deleting those rows. You will also learn table stripping or alternate row coloring technique using JQuery.
Here is the heart of the entire logic coded with JQuery:
$(document).ready(function()
{
$('table#delTable td a.delete').click(function()
{
if (confirm("Are you sure you want to delete this row?"))
{
var id = $(this).parent().parent().attr('id');
var data = 'id=' + id ;
var parent = $(this).parent().parent();
$.ajax(
{
type: "POST",
url: "delete_row.php",
data: data,
cache: false,
success: function()
{
parent.fadeOut('slow', function() {$(this).remove();});
}
});
}
});
// style the table with alternate colors
// sets specified color for every odd row
$('table#delTable tr:odd').css('background',' #FFFFFF');
});
Let’s find out what’s happening here using divide and rule methodology.
$(document).ready(function()
This is JQuery’s function which runs as soon as document becomes ready. This is similar to onload event but JQuery’s function is far more faster than that. So we want to be able to run this code when page is ready.
$('table#delTable td a.delete').click(function()
If you have worked on CSS selectors then above line should not be much of mystery to you. You can use the same syntax to target elements using JQuery. Basically it says that table with id delTable and TD inside it that has hyperlink with class delete when clicked runs the code specified within this function. So when hyperlink with class named delete within TD within table with id delTable is clicked then code specified will execute.
if (confirm("Are you sure you want to delete this row?"))
We want to be able to confirm if user really wants to delete a row.
var id = $(this).parent().parent().attr('id');
var data = 'id=' + id ;
var parent = $(this).parent().parent();
Please keep in mind that in JQuery, the $(this) always refers to the target element which in our case is hyperlink with class delete. attr is used to get or set attributes of the tags. So the id variable refers to the parent of this hyperlink which is TD and then this TD’s parent which is TR. So here we get the id attribute of this TR. In HTML code, we will assign each row’s primary key field to these TRs to identify and delete records. The data variable makes data to be sent as part of the ajax request made using JQuery. The parent variable refers to each TR containing the target element which is hyperlink with class delete.
$.ajax(
{
type: "POST",
url: "delete_row.php",
data: data,
cache: false,
success: function()
{
parent.fadeOut('slow', function() {$(this).remove();});
}
});
The $.ajax function is used to send ajax requests. Amongst its arguments, the type refers to method of request whether it POST or GET, url refers to script which will get the ajax request data and return some response, data refers to data to be sent as part of the ajax request similar to query string form, cache controls whether cache will be on or off for the request because in IE requests are cached and success function which is also attribute of the $.ajax function runs the code inside it if the request went successful.
parent.fadeOut('slow', function() {$(this).remove();});
As explained before parent refers to the TRs in our case. fadeOut function needs two arguments; animation speed and function to execute. So what this line does is that it removes parent by fading it out and then the target link by using the remove() method. In this way entire row is gone and with the help of ajax request, the record from database is also deleted. Here we have used the fadeOut animation function of JQuery but there are more animations available.
$('table#delTable tr:odd').css('background',' #FFFFFF');
This line means that apply background style to each odd TR of the table with id delTable. Now because our code executes when page is ready, therefore our table will have alternate colors for each odd row.
So that’s all there is to it.
Wasn’t that awesome? It definitely was ! The good thing is that everything was so easy to implement.
Here is the demo.
You can download it here.
.
.
Web Vision Solutions
Today I am going to introduce to you our web solutions website. It is named Web Vision Solutions. It provides solutions such as e-commerce websites, website design, CMS, web development, logo design, flash animation, search engine optimization, facebook apps, joomla, wordpress blogs, oscommerce, zencart, opencart and more web-related solutions at comparatively cheap rates. So if you are looking for any of the above mentioned solutions, Web Vision Solutions may be the right choice for you.
.
.
Debugging Ajax Requests
Being able to actually debug an ajax request is not that easy but there is an incredible firefox addon named FireBug which provides a number of amazing options beneficial to developers as well as designers. One of the such cool options lets you debug the ajax requests too. Here are steps to debug an ajax request:
1 - Click on the FireBug icon located at lower right position of the FF status bar.
2 - Click on the Net tab
3 - Click on the XHR tab present below the Net tab.
4 - Execute your ajax request
5 - You will see ajax request link getting generated there. Click or expand that link.
Just below that link you can click any of the available tabs for relevant information. For example, if you click the Response tab, you will come to know what response was sent by the script. Similarly you can use the Params, Headers, Cache, HTML and Server tabs as well.
Quick Personal Emailer
Today I am going to share with you a very interesting program, the Personal Emailer. In fact, the Personal Emailer was my first project on the .NET platform. Personal Emailer let’s you send emails using google account credentials. You can add attachments as well. The most apparent advantage of this program is that it is fast and easily available on the desktop. It can be useful to those who are not allowed to open any emailing websites too.
Once you download it, run the program, click the Settings button and in the SMTP server address type smtp.gmail.com and port should be set to 587. Finally enter your google account username and password.
Note that you should have .Net framework installed. Enjoy 
Download the Personal Emailer.
Creating Dropdown Menu Using CSS
If you have been creating facebook applications, you know in a FBML application, the traditional javascript code is not allowed. The facebook platform has its own implementation of the javascript named FBJS (FaceBook JavaScript). The FBJS is very limited as compared to traditional javascript. So you would find yourself in trouble if you wanted to create a dropdown menu using FBJS. Now because traditional javascript is not allowed in a FBML application and FBJS is troublesome when it comes to creating menus, we will have to find some other solution to creating the dropdown menu. Well, CSS exhibits great flexibility to solve this problem. The CSS’s display property is used effectively to create the dropdown menu.
Here is the CSS code:
/* Drop Down Menu Start */
#container
{
width: 760px;
margin:0 auto;
font-size:11pt;
background:#edeff4;
font-size:12px;
font-family:tahoma, verdana, arial;
}
#menu{position:absolute; z-index:1; border-top:1px solid #f6f6f6; font-weight:bold; margin-bottom:0px; left:0px; margin-left:0px; margin-top:-15px; color:#3b5898; font-size:11px; font-family:tahoma; } /* adjust margin property if needed */
#menu ul .item{display:none;}
#menu ul:hover .item{display:block;background:#edeff4;padding:5px;margin:1px; color:#3b5898;cursor:pointer; font-weight:normal;}
#menu ul:hover .item a{color:#000000;text-decoration:none; font-size:11px; font-family:tahoma;cursor:pointer;}
#menu ul:hover .item a:hover{color:#3b5898;cursor:pointer;}
#menu ul:hover{color:#3b5898;background:#3b5898;color:#ffffff;}
#menu ul{width:150px;float:left;margin:0px;padding:1px;background:#edeff4;list-style:none;cursor:pointer;}
.clear{clear:both;height:10px;}
/* Drop Down Menu End */
And here is the html code for the dropdown menu:
<div id="container" style="background:#edeff4; width:760px; position:relative; margin:auto;" align="center"> <div id="menu"> <ul id="item1"> <li class="top" style="padding:6px;">Take Action <img border="0" align="absmiddle" src="img/drop-down-arrow.gif" /></li> <div align="left"><li class="item"><a href="#">My ECO Footprint</a></li></div> <div align="left"><li class="item"><a href="#">Reduce My Impact</a></li></div> <div align="left"><li class="item"><a href="#">Play Green Challenge</a></li></div> <div align="left"><li class="item"><a href="index.php?page=invite" style="outline:none;">Spread The Word</a></li></div> <div align="left"><li class="item"><a href="#">Green Ideas</a></li></div> <div align="left"><li class="item"><a href="#">ECO Products</a></li></div> </ul> <ul id="item2"> <li class="top" style="padding:6px;">My Green World <img border="0" align="absmiddle" src="img/drop-down-arrow.gif" /></li> <div align="left"><li class="item"><a href="#">Check My World</a></li></div> <div align="left"><li class="item"><a href="#">Visit Other Worlds</a></li></div> <div align="left"><li class="item"><a href="#">Green Rankings</a></li></div> <div align="left"><li class="item"><a href="#">My Green Badge</a></li></div> </ul> <ul id="item3"> <li class="top" style="padding:6px;">The Stores <img border="0" align="absmiddle" src="img/drop-down-arrow.gif" /></li> <div align="left"><li class="item"><a href="#">Green My World</a></li></div> <div align="left"><li class="item"><a href="#">Send Green Gifts</a></li></div> <div align="left"><li class="item"><a href="#">Get Green Coins</a></li></div> <div align="left"><li class="item"><a href="#">Get Carbon Reductions</a></li></div> </ul> <ul style="background:#edeff4; width:113px; cursor:default;"> <li style="padding:6px;background:#edeff4;"> </li> </ul> <ul id="item4"> <div align="right"><li class="top" style="padding:6px;">About <img border="0" align="absmiddle" src="img/drop-down-arrow.gif" /></li></div> <div align="left"><li class="item"><a href="#">Global Warming?</a></li></div> <div align="left"><li class="item"><a href="#">About Greenbook</a></li></div> <div align="left"><li class="item"><a href="#">Contact Us</a></li></div> </ul> </div>
See the demo here.
Recent Comments