Tuesday, October 27, 2009

How to hide multiple column from different rows with javascript?

The table shows only three columns and hide the rest.... if you click the &gt:>> this shows the hidden rows on your right and <<< shows the hidden rows on your left.
It can be useful in creating a table that shows only a minimum number of columns to the user but the user can still see all the columns if he/she wanted to.
This is html code...

<html> 
<head> 
<title> Table</title> 
<link rel="stylesheet" type="text/css" href="mycss.css"/> 
<script type="text/javascript" src="myjs.js"> 
</script> 
</head> 
<body> 
<table class="table_class" id="table_id"> 
<tr> 
<th class="hideColumn"> Header 1</th> 
<th class="hideColumn"> Header 2</th> 
<th class="hideColumn"> Header 3</th> 
<th class="hideColumn"> Header 4</th> 
<th> Header 5</th> 
<th> Header 6</th> 
<th> Header 7</th> 
</tr> 
<tr> 
<td class="hideColumn"> Content 1a</td> 
<td class="hideColumn"> Content 2a</td> 
<td class="hideColumn"> Content 3a</td> 
<td class="hideColumn"> Content 4a</td> 
<td> Content 5a</td> 
<td> Content 6a</td> 
<td> Content 7a</td> 
</tr> 
<tr> 
<td class="hideColumn"> Content 1b</td> 
<td class="hideColumn"> Content 2b</td> 
<td class="hideColumn"> Content 3b</td> 
<td class="hideColumn"> Content 4b</td> 
<td> Content 5b</td> 
<td> Content 6b</td> 
<td> Content 7b</td> 
</tr> 
<tr> 
<td class="hideColumn"> Content 1c</td> 
<td class="hideColumn"> Content 2c</td> 
<td class="hideColumn"> Content 3c</td> 
<td class="hideColumn"> Content 4c</td> 
<td> Content 5c</td> 
<td> Content 6c</td> 
<td> Content 7c</td> 
</tr> 
<tr> 
<td class="hideColumn"> Content 1d</td> 
<td class="hideColumn"> Content 2d</td> 
<td class="hideColumn"> Content 3d</td> 
<td class="hideColumn"> Content 4d</td> 
<td> Content 5d</td> 
<td> Content 6d</td> 
<td> Content 7d</td> 
</tr> 
<tr> 
<td class="hideColumn"> Content 1e</td> 
<td class="hideColumn"> Content 2e</td> 
<td class="hideColumn"> Content 3e</td> 
<td class="hideColumn"> Content 4e</td> 
<td> Content 5e</td> 
<td> Content 6e</td> 
<td> Content 7e</td> 
</tr> 
</table> 
<div> 
<span onclick="hideLastColumn();" style="cursor: pointer; background-color: red; color: white; padding: 0 10px;"> <<<</span>     
<span onclick="hideFirstColumn();" style="cursor: pointer; background-color: red; color: white; padding: 0 10px;"> >>></span> 
</div> 
</body> 
</html>


This is  the css code.

.table_class {
border: 1px solid black;
}
.table_class tr {
border: 1px solid black;
}
.table_class tr td {
border: 1px solid black;
padding: 0 10px;
}
.table_class tr th {
border: 1px solid blue;
padding: 0 10px;
}
.hideColumn {
display: none;
}
.showColumn {
border: 1px solid blue;
}



this is the javascript code. i named it myjs.js as you can see in the header of the html.



var firstColumnIndex = 0;
var lastColumnIndex = 0;
var columnLength = 0;
var no_action = false;

//function for hiding the visible first column of the table
function hideFirstColumn(){
        //get the table object
var table_obj = document.getElementById('table_id');
//if the firstColumnIndex and the lastColumnIndex is 0 then set the no_action variable to true
if(firstColumnIndex == 0 && lastColumnIndex == 0){
no_action = true;
}
//if the no_action variable is not true then perform the getting of the columns
if(no_action != true){

for(var x = 0; x < table_obj.rows.length; x++){
table_obj.rows[x].cells[firstColumnIndex].className = "showColumn";
table_obj.rows[x].cells[lastColumnIndex].className = "hideColumn";
}
                //increment the firstColumnIndex and the lastColumnIndex by 1
firstColumnIndex = firstColumnIndex + 1;
lastColumnIndex = lastColumnIndex + 1;
}

}

//function for hiding the visible last column of the table
function hideLastColumn(){
//get the table object
var table_obj = document.getElementById('table_id');
        //set the no_action variable to false
no_action = false;
if(firstColumnIndex == table_obj.rows[1].cells.length){
                /* if you came to the very last column of the table your firstColumnValue will be set to the limit so you need to decrement it by 1 so that it will hide the last column again */
firstColumnIndex = firstColumnIndex - 1;
lastColumnIndex = lastColumnIndex - 1;
} else if(firstColumnIndex == 0 && lastColumnIndex == 0){
        /*if the firstColumnIndex and lastColumnIndex is zero get the length of the cell and subtract it to one  to hide the lastColumn*/
firstColumnIndex = table_obj.rows[1].cells.length - 1;
lastColumnIndex = firstColumnIndex - 3;

} else if(lastColumnIndex == 0) {
                  // if the first column of the table can be seen, take no action
} else {
               /*if the firstColumnIndex and the lastColumnIndex has a value that is not zero decrement it until it reaches the firstColumn*/
firstColumnIndex = firstColumnIndex - 1;
lastColumnIndex = lastColumnIndex - 1;
}
        //show all the column inside all the rows by looping on each row
for(var x = 0; x <= table_obj.rows[1].cells.length; x++){
table_obj.rows[x].cells[firstColumnIndex].className = "hideColumn";
table_obj.rows[x].cells[lastColumnIndex].className = "showColumn";
}

}

There it is. I know it is still unpolished it is because I have just created that code at this time. You can refactor that code if you like. 
Posted by at 1 comment:

Monday, October 26, 2009

How to create a simple accordion using Javascript and Css?

this code will show you how to create a simple accordion using javascript and css. 
here is the html code.....








<html>
<head>
<title;gt;Accordion sample</title>
<link rel="stylesheet" type="text/css" href="toggle.css" /> 
<script type="text/javascript" src="toggle.js" >
</script>
</head>
<body>
<h1>Accordion Sample</h1>
<div class="accordion_tab" onclick="showTab('accordion_1_body', 'accordion_2_body');">
<span gt;Accordion Tab 1</span>
</div>  
<div id="accordion_1_body" class="hide_tab">
<span style="color: white">You can put your content here</span>
</div>
<div class="accordion_tab" onclick="showTab('accordion_2_body', 'accordion_1_body');">
<span>Accordion Tab 2</span>
</div>
<div id="accordion_2_body" class="hide_tab">
<span style="color: white">You can put your content here</span>
</div>
</body>
</html>


here is the css code. you can name this file anything you want. for me, i named it toggle.css






.accordion_tab {
background-color: #780000; 
border: 1px solid #E00000;
cursor: pointer;
}
.accordion_tab span {
color: white;
font-weight: bold;
padding: 5px 10px;
}


.hide_tab {
background: black;
display:none;
}
.show_tab {
background-color: #F00000;
height: 150px;
}


here is the javascript code.....
i named it toggle.js....








function showTab(show_id, hide_id){
        
var show = document.getElementById(show_id);
if(show.className == "show_tab"){
document.getElementById(show_id).className = "hide_tab";
} else {
document.getElementById(show_id).className = "show_tab";
}


}




In that code everytime the html div tab is clicked it calls the javascript showTab() function which as you can see checks for the name of the class of the certain div. if the class is named show_tab then it alters the class name into hide_tab and vice versa.  As you can see, its really that simple to create an accordion using javascript and css.

Posted by at No comments:

Friday, October 23, 2009

How to put a SELECT expression within a SELECT expression in postgreSQL

Have you ever been into a situation where you wanted to get the datas from a certain table where your condition will come from another table in postgreSQL? One of the methods to do that is to create a select statement inside a select statement. Here is a little demonstration of the code.

Suppose you had a table named table1 and you have the fields
id
first_name
middle_name
last_name
in there.

and in another table named table 2 you have the fields
id
table1_id
full_name
address

let us suppose that you wanted to get all the first_name from table1 where the table1 id is not equal to the id from the table2. I guess there are several ways to do this but the one that I will show to you is the NOT IN expression. You can also use the IN expression which is the opposite of the NOT IN.

Here is the code....

SELECT first_name FROM table1 WHERE id NOT IN (SELECT id FROM table2);

This may be a simple code but it can help you when the time comes.....



Posted by at No comments:

Thursday, October 22, 2009

How to join tables that has two datasources in coldfusion

Hey, did you know that you can join two tables with different datasources in coldfusion. To those people who are searching on how to do that maybe this little tutorial could help.


Example you had a two table with the column name below.
table 1
name: table_sample1
columns:
        column_1
        columna_2,
        columna_3,
        columna_4




table 2
name: table_sample2
columns:
        column_1
        columnb_2,
        columnb_3,
        columnb_4,




Suppose that the common column between table_sample1 and table_sample2 was the column named column_1
create a query for the first table
<cfquery datasource="datasource1" name="table1" >

      SELECT *
      FROM table_sample1

<cfquery >





create a query for the second table
<cfquery datasource="datasource2" name="table2" >

      SELECT *
      FROM table_sample2

<cfquery >



now here is the code for joining the two tables together.
<cfquery dbtype="query" name="joined_tables" >

              SELECT * 
              FROM 
                  table1, 
                  table2
             WHERE 
                 table1.first_name = table2.first_name

<cfquery >


Thats it guys, hope that works for you.








Posted by at No comments:

Sunday, October 18, 2009

Getting the values of the form with an array of input field name using Coldfusion

Well actually it is not really an array but I am trying to behave it like one. This is the code...............

//this is the sample form ............

<form method="post" action="coldfusion_handler.cfm">
    <input type="text" name="first_name_1" />
    <input type="text" name="first_name_2" />
    <input type="text" name="first_name_3" />
    <input type="submit" value="SUBMIT" />
</form>

// this would be your coldfusion page................

<cfif IsDefined('form.submit')>
  
    <cfloop index="x" from="1" to="3">
  
        <!--- set a string with with the value form.first_name_ and concatenate the index of your loop
        , note the form.first_name_ is the name of the input field from your form --->
        <cfset form_value="form.first_name_"&x>
      
        <!--- the coldfusion evaluate function takes a string argument and convert it into an object,
         in this case the value of the form_value is a string that contain something like this "form.first_name_1",
        then the Evaluate function calls that string and turns it into an object, in this case it behaves like this        
         #form.first_name_1#",  which as you can see calls the value of the form with the name .first_name_1 --->
        <cfoutput>#Evaluate(value)#</cfoutput>
    </cfloop>

</cfif>

well there it is. hope that helps.







Posted by at No comments:
Labels: , , , , ,

Friday, October 16, 2009

How to create a dropdown menu using javascript and css.

heres a the code that creates the dropdown menu using javascript and css.

<html>
    <head>
        <title>Dropdown Sample</title>
        <link rel="stylesheet" type="text/css" href="css.css"/>
        <script type="text/javascript">
       
           //this function is the one who is responsible in displaying the submenu
            function showSub(){
                document.getElementById('subMenuDiv').style.display = "";
            }
            //this function is the one who is responsible in hiding the submenu
            function hideSub(){
                document.getElementById('subMenuDiv').style.display = "none";
            }
           
        </script>
    </head>
    <body>
        <div id="menuDiv">
            <ul>
                <li onmouseover="showSub();" onmouseout="hideSub();"><a href="#">Menu 1</a>
                   < !-- the display:none is responsible for hiding the submenu when the page is newly opened -- >
                    <div id="subMenuDiv" style="display: none;">
                        <ul class="subMenu">
                            <li><a href="#">Sub Menu 1</a></li>
                            <li><a href="#">Sub Menu 2</a></li>
                            <li><a href="#">Sub Menu 3</a></li>
                        </ul>
                    </div>
                </li>
                <li><a href="#">Menu 2</a></li>
                <li><a href="#">Menu 3</a></li>
            </ul>
        </div>
    </body>
</html>


#menuDiv ul{
    margin: 0px;
    padding: 0px;
}

#menuDiv ul li {   
    list-style: none;
    display: inline;
    margin: 0 5px;
    padding: 0;
    background-color: #A80000;
}

#menuDiv ul li a{
    text-decoration: none;
    font-weight: bold;
    padding: 0 10px 0 10px;
    background-color: #A80000;
    color: #FFF;
}

#subMenuDiv {
    padding: 0px;
    position: absolute;
}


/*heres a little css hack*/
* html #subMenuDiv {
    position: absolute;
    margin-top: 18px;
    margin-left: -82px;
}

#subMenuDiv ul{
    margin: 0px;
    padding: 0px;
}

#subMenuDiv ul li{
    display: block;
    border: 1px solid #B0B0B0;
    padding: 0px;
}

#subMenuDiv ul li a{
    background-color: #D00000;
    padding: 0 10px;
}
#subMenuDiv ul li a:hover {
    background-color: #E00000;
}



there you have it folks. I really hope that that code helps you.


Posted by at No comments:
Labels: , , , ,

Thursday, October 15, 2009

validating size of the image before uploading with javasript

Here is the code on how to check the size of the image before uploading it to the server using javascript.
First you must create a form...............


<form method="post" action="yourBackEndPath" >

<!-- create the input type file -->
<input type="file" name="inputname" onchange="setImage();" id="fileId">

<!-- create the submit button -->
<input type="submit" value="Upload">

</form>

<!-- create an image tag without any source and make it hidden -->
<img src="" style="display: none;" id="imageSrcId" />

After creating the form create the javascript file size validator...........

// create the function that sets the image
function setImage(){

//get the value of the image from the file
var image = document.getElementById('fileId').value;

//set that value to the image tag
document.getElementById('imageSrcId').src = image;

//call the function that gets the size of the image
setTimeout('getSize()', 10);

}

//create the function that gets the size of the image
function getSize(){

//set the size of the image
var size = document.getElementById('imageSrcId').fileSize;

//now you can see the size of the image that you want to upload
alert('This is the size of the image that I want to upload '+size);


}

If the getSize function doesn't work you can also try this.

//only works on netscape and internet explorer
function getSize(){


if(navigator.appName == "Netscape"){


var image = document.getElementById('imageSrcId');
var size = image.files[0].fileSize;

//heres the size of the image
alert('This is the size of the image '+size);


} else if (navigator.appName == "Microsoft Internet Explorer") {


var size = document.getElementById('imageSample').fileSize;

//heres the size of the image
alert('This is the size of the image '+size);


}

}


There you have it. After you choose the image that you want to save an alert button will show you how the size of the image that you want to upload. Having a knowledge on the size of the image that you want to upload using javascript helps you a lot. You can filter the image that you want to upload in any size that you want before going to the backend. I know that there's a lot of security issues on it but you try that script and filter it again on the server side if you like. Hope this script did help you.

That code was only tested on mozilla firefox and internet explorer.





Posted by at No comments:
Labels: , , , ,
Subscribe to: Posts (Atom)

Feeds

Sonic Run: Internet Search Engine javascript, coldfusion, programming, simple programming teckniques, css, html Webfeed (RSS/ATOM/RDF) submitted to http://www.feeds4all.nl Web Development & Design Blogs DigNow.net

Search Engine Optimization and SEO Tools
javascript, coldfusion, programming, simple programming teckniques, css, html