The table shows only three columns and hide the rest.... if you click the >:>> 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...
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.
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.
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.....
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 *
// 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 --->
//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; }
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.
Posts
