Basic AJAX connection using the POST method to retrieve content
Hello guys,
I have been working on a project for school which used AJAX and I just wanted you guys to have this code for reference. This code basically makes a call to a PHP script which gets Zip Code information (city and state) and then adds them into your web page. I used a span tag with id of ???zipinfo??? to act as a holder for the content that was going to be retrieved. Hopefully this helps some of you in your projects.
//Get Zip Code Information
function zipInfo(zipcode) {
fieldValue = ???connection=zipInfo&zip=???+zipcode;
var url=???includes/management.php???;
httpRequest(???POST???, url, true, fieldValue, function(result){
document.getElementById(???zipInfo???).innerHTML = result;
});
}
//AJAX Request
function httpRequest(reqType, url, asynch, fieldValue, callback) {
request = new XMLHttpRequest();
request.open(reqType,url,asynch);
request.setRequestHeader(???Content-type???, ???application/x-www-form-urlencoded???);
request.setRequestHeader(???Content-length???, fieldValue.length);
request.setRequestHeader(???Connection???, ???close???);
request.send(fieldValue);
request.onreadystatechange = function() {//Call a function when the state changes.
if(request.readyState == 4 && request.status == 200) {
callback(request.responseText);
}
}
}
Basic Content Management System
If you are a Web Developer like me, then you are always working from different locations, different machines, etc. You do not want to go and look for that client information every time to gain access via FTP to do a small change. There is where a good content management system comes in place. What this is going to allow you to do is to give you the ability to edit any file from any location and from any machine as the editor will be sitting right on the server.
Here is a copy of my Content Management System, which you can just drop in any folder and edit or delete any file in it.
Download My Content Management System
Once you download it, just unzip it and try it in one of your folders. This is a basic management system all that you need to do to install it is to upload, there are a PHP file that is the one doing all the work, and the Tiny MCE folder, which contains all of the required files for the text editor skin, you can delete this if desired. You can also get an updated version by doing a Google search of Tiny MCE.
Please give me your comments and suggestions,
Gilberto Cortez
———————————-
Got termites? Fumigations are the only primaryξrecommendationξgiven by the state. Any other solutions are only secondary and temporary.
Simple JavaScript Image Gallery
Hello guys, I had to work on a website this weekend and I came up with an issue, I did not have any image JavaScript gallery that would just change the image and have a previous and next button. So I decided to create this. Here is a basic gallery, I have commented the script for easier understanding.
<script>
//Create variables
var i = 0;
var prev;
var next;
var images = new Array;
//Set Image File Name
images = [
“firstimage”,
“secondimage,
“thirdimage”
];
//Go directly to image function
function imgPresent(src){
var change = document.getElementById(???imgBig???);
//Change main picture source and alt fields
change.src =images[src]+???.jpg???;
change.alt = images[src];
}
// link function to switch image backward
function prev(){
if(i==0){
//Set maximum number in array
i = 2;
} else {
i = i-=1;
}
//CHange Main Image
var change = document.getElementById(???imgBig???);
change.src = images[i]+???.jpg???;
change.alt = images[i];
}
// link function to switch image forward
function next(){
//Set Max Number
if(i==2){
i = 0;
} else {
i = i+=1;
}
//Change Main Image
var change = document.getElementById(???imgBig???);
change.src = images[i]+???.jpg???;
change.alt = images[i];
}
</script>
On the direct images links, which can be your thumbnails all you need to do is onclick=???imgPresent(i)???, where var i = the number of the file you want inside the image array created in the script. And for your next button the action would be onclick=???next()???. For the previous button the action would be onclick=???prev()???.
Like always, please feel free to contact me or leave me any comments behind or questions,
Thank You,
Gilberto Cortez
Using Loops to Check for Empty Fields
I???ve been noticing lately how many student are creating multiple functions or if statements to do something that is possible in just a couple of lines, in this post I will try to explain how to use Arrays and Loops to validate a form, checking that it does not have any empty fields.
First you need to set up your form, here is the code for a simple log in form:
<form method="post" name="myform" action="login.php"> Username: <input type="text" id="username" name="username"/><br /> Password: <input type="password" id="pass" name="pass"/><br /> <input type="button" value="Log Me In" onClick="validate();"/> </form>
You might have noticed that at the end of the form, instead of using ???submit??? for the type I used ???button??? instead. I do this to be 100% sure that the form will not be submitted unless it passes the JavaScript Validation. Please be aware that this method will bring a User Experience problem if he or she has JavaScript disabled, for this post please disregard the issue.
After you create your form, then we need to dive into the JavaScript code:
<script type="text/javascript" language="javascript">
function validate(){
//Create Fields Array
var fields = new Array;
var fields = [document.getElementById('username'),document.getElementById('pass')];
//Create Variable to Keep Track of Errors
var err = 0;
//Start Validation Loop
for (i=0;i<fields.length;i++){
//Check Fields in Array to Make Sure they are not Empty
if (fields[i].value == ""){
err++;
}
}//Close Loop
//Check That There are No Errors
if (err === 0){
//Submit Form
document.myform.submit();
}else {
//If there are errors, return false and alert the user
alert("Please Fill Out All Of The Fields");
return false;
}
}
</script>
So there it is guys, all you have to do now is to add more fields to the fields array and it will loop around all of them to check them for empty spaces.
Here is a little more explanation on the script. The first thing that I did is to store my variables, I used an array for the fields being that they have a similar job in common and it will be easire to check them all like this. (An array is created when you have multiple objects with similar properties. For example you could make an array of Car Makes, Car Types, Regular Customers. This is more efficient than creating a different variable for each single item, now you just have to work with one.
After this we start the validation, this is done by looping trough that array to check that the fields are not empty. Let me explain how to create the loop, which is using the for statement. The first line will define where your loop starts, and how many time it will be runned.
Code: for (i=0;i<fields.length;i++) Explanation: for(variable that will be keeping track of how many loops have passed ; how many times will the loop run (the .length property only gives out the array size, so that we can run it that many times ; and finally this step will add one to the loop variable for the next run)
Every time the loop runs, the code between the brackets it???s what is run multiple time. In this case we did an if statement to check the field value. if it finds an empty field it will add one to theξerr variable. After the loop is completed,ξ then we do anotherξif statement to check that there are no errors, if they are none then the form is submitted, is there is an error then it will alert the user and return false.
Hope this helped you out, please leave any comments or suggestions below.
Gilberto Cortez
www.GilbertoCortez.com // Interactive Solutions and Web Development
Resize iFrame for 100% Height
Today I was asked to create an iFrame to set up a private reporting system. Well when I tried to make it 100% height, it will only go for about 200px and the rest of the screen will be blank. Well here is the solution for that problem:
<!DOCTYPE html PUBLIC ???-//W3C//DTD XHTML 1.0 Transitional//EN???ξ???http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd???>
<html xmlns=???http://www.w3.org/1999/xhtml???>
<head>
<meta http-equiv=???Content-Type??? content=???text/html; charset=utf-8??_ />
<title>Reputation Managers Reporting System</title>
<script type=???text/javascript??? language=???javascript???>
function resize(){
var w = screen.width;
var h = window.innerHeight ??? 25;
var repsystem = document.getElementById(???repsystem???);
repsystem.height= h;
}
</script>
</head>
<body onload=???resize()??? onresize=???resize()???>
<table height=???100%??? width=???100%???>
<tr><td>
<iframe src=???iframe.php??? id=???repsystem??? height=???480px??? style=???width:100%; border: 0px solid #ffffff;???>
<p>Your browser does not support iframes.</p>
</iframe>
</td></tr></table>
</body>
</html>
Simple jQuery Slider
There are many jQuery sliders in the internet but many of them are really hard toξunderstand. This slider is very basic and very easy to change to your specs. Just change the fade effect to the one of your preference and you are set. You can find more information about the different functions at the jQuery website, they have a lot of helpful information there.
Here is the css that you will need to attach:
#slideshow { position:relative; height:323px; z-index:-9999; max-height:323px; }
#slideshow IMG { position:absolute; top:0; left:0; z-index:8; }
#slideshow IMG.active { z-index:10; }
#slideshow IMG.last-active { z-index:9; }
Here is the code for a simple jQuery slider, add this to a .js file and attach it to the page where you will have your slider. However you have to be sure to attach the main jQuery file before this one. I have created this from scratch and used it in many client websites. All you have to do is to put the images on a div with an id and class of ‘slideshow’.
var mainInterval;
var started = false;
var count = 0;
$(function(){
$('.slideshow img:gt(0)').hide();
function init() {
if ( started == false ) {
mainInterval = setInterval(function(){
$('.slideshow :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.slideshow');},
5000);
}
}
$('#nextSlideShow').click(function() {
count++;
clearInterval(mainInterval);
init();
$('.slideshow :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.slideshow');
});
$('#backSlideShow').click( function() {
count--;
clearInterval(mainInterval);
init();
$('.slideshow :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.slideshow');
});
// Stop The Slide Show
$('#stopSlideShow').click(function() {
clearInterval(mainInterval);
started = false;
});
init();
});
Here is a sample of how the HTML will look like:
<div id="slideshow">
<img src="./images/free-simple-slider.jpg" alt="jQuery Slider First Image" />
<img src="./images/working-this.jpg" alt="Slider Image 2" />
<img src="./images/thisWouldBeAnotherImage.jpg" alt="Slider Image 3" />
</div>
You can also add a stop, back and next button if you like just use an id of ‘stopSlideShow’ for the stop button; an if of ‘backSlideShow’ for the back button and an if od ‘nextSlideShow’ for the next button.
I hope that this jQuery slider helps you in your project and please leave me any questions or comments down below and I will be more than happy to answer them!
Simple jQuery Drop Down Menu
There are many jQuery sliders created already. This is the one that I developed from scratch which only has the minimum needed features to work very light and efficiently on any type of web development project. You will need to have the original jQuery script attached to your page before adding this code and make sure to add all the required code.
Here is the jQuery code that is required:
$(document).ready(function () {
$(‘#nav li’).hover(
function () {
//show submenu
$(“ul”, this).slideDown(100); },
function () {
//hide submenu
$(“ul”, this).slideUp(100); } );
});
$(document).ready(function() {
$().piroBox_ext({
piro_speed : 700,
bg_alpha : 0.5,
piro_scroll : true
});
});
Here is the CSS code that is required:
/* submenu, it’s hidden by default display:none; */
.nav li ul { display:none; position:absolute; top:68px; left:30px; margin:0 0 0 -1px; list-style:none; background-color:#0CF; -moz-border-radius: 8px; border-radius: 8px; padding-top:8px; padding-bottom:8px; width:200px; opacity:0.96; }
.nav li ul li { padding-bottom:0px; width:170px; float:left; border-top:1px solid #fff; display:block; font-size:15px; margin-top:5px; margin-left:15px; background:none; padding-left:0px; ; }
.nav li ul li a { text-decoration:none; }
.nav li ul li a:hover { color:#FFF; }
#devNav { position:absolute; left:150px;}
Here is the HTML code that is required:
<ul class=”nav” id=”nav”>
<li><a href=”‘mainNav.php”>Main Navigation Item</a>
<ul class=”subnav”>
<li><a href=”‘submenu1.php”>Sub Menu Item 1</a></li>
<li><a href=”submenu2.php”>Sub Menu Item 2</a></li>
</ul>
</li></ul>
I hope that this simple jQuery slider helps you out in any of your project and as always please feel free to leave any comments or questions in the area below.
