I am going to demo the simplest and easiest way of creating a asynchronous upload file function with JavaScript and PHP. It is really easy but i take a VERY long time figuring out the method since all the goggling tutorial makes this look complicated and long. The objective is to keep thing simple, VERY SIMPLE.
Concept
Let's face the fact that Ajax cannot do a file upload asynchronously. But let's not go into argument that it can or cannot be done. The method used in this tutorial will be iframe method which is really very easy (slap myself) but i take like few hours to understand what are these people writing with so many unrelated codes. Basically we use a iframe to upload the file instead of the main window to upload it. The sideback of this method is that we cannot monitor the progress of the upload which is why Ajax come into handle in this case but i will not go into detail with the progression monitor of the upload.
Requirement
HTML file - for display purposes
PHP file - for the handling of the upload file
JavaScript - for assisting the whole process
READ
HTML
The HTML part is really very simple as shown below,
I just placed the main code required, the other files can be view overall from the demo attached below. I believe everyone will know what is the above code trying to accomplished. It basically create a iframe, upload box and a button. These 3 item will be wrap around the form so that it can be uploaded by either iframe or uploadbox upon clicked of the button.
P.S: The iframe is not hidden yet, so you guys can see that it has been uploaded over there.
JavaScript
Think asynchronous upload is difficult in the JavaScript part? Think again.
function redirect()
{
document.getElementById('my_form').target = 'my_iframe'; //'my_iframe' is the name of the iframe
document.getElementById('my_form').submit();
}
This is the only function required function you need for Asynchronous upload or ajax upload whatever you call it. What it does is to change the target upload responsible to the iframe instead of the main window frame. Thus, the iframe refresh instead of the main display screen upon the click of the button. ( why do people have to complex stuff, sigh..)
PHP
I believe this part is just about handling the data, so here goes,
The above doesn't place constraint on the type of files that is allowed to be placed into the server. You should always add that to avoid unnecessary problem to your application. The above code will move the uploaded file to the upload folder as directed.
Demo
The files did not move the files to any location it will just print out and delete away once it has output successful to the iframe. The demo files can be downloaded from here. You must have to setup a web server to test on it. You can view the demo here.
This is another method for jQuery zoom effect that you can apply. Unlike the previous tutorial on zoom effect which is pretty simple and straight forward, this approach tend to be more complex. The previous method mention has
Illustrator isn't just used for sketching and drawing, it can also be used for drawing maps and floor plans! Adobe Illustrator CS4 is pretty neat for close-to-accurate illustrations as it has dynamic smart guides to speed up positioning and alignment of objects.
Anyway, recently, I had to do a floor plan for one of my assignments in my university. My current assignment is to perform a safety audit with my group members, on the biochemistry laboratory in my school.
Since the floor plan was not available, we had to manually draw it by ourselves.
I thought Adobe Illustrator is quite useful and efficient for this task.
I just scanned in the hand-sketched plan into my computer, placed it in the first layer, and drew over it on the second layer. Pretty fast and easy!
The final product:
I realised, it can also be good for drawing maps! For example if you wanted to lead someone to your home, but it’s not very well known to be recognised in google map like other landmarks, you can easily use the same technique i used above to illustrate a map to your destination.
For example, my house is the one circled in red above and I wanted to lead people there because I am having this majorly awesome party. Problem is, no one knows how to get there because it’s in the middle of nowhere.
Just print screen that map in satellite format in google maps, and place it the first layer in Illustrator.
Open up a new layer and place this above the map layer. Draw major landmarks, highways, housing areas, major buildings and ignore bushland and terrain. Oh and remember to label what you draw.
Add in arrows to give direction.
After you’re done, just delete the first layer, and you have your map!
In this tutorial, i will explain the concept and ways of making a fold effect in jQuery. Such effect can be apply to different context such as image gallery or even just add on effect for your design work.
Concept
Depending on whether you wish to fold away your content or you wish to fold out your content. Folding in your content will be to pull up the content and slide it outward while folding out your content will be to push your content out and slide it downwards. There are two way of achieving this effect. One is to use the viewport technique which will lengthy your code and complex your stuff but generally give you a better visualize effect than the next effect. The next effect that can achieve this with only few lines of code is typically using CSS and animate function in jQuery.
Coding
On the HTML part, you will most likely will only required the following set of div block
On the CSS coding, you will most likely need the following
body{
margin: 0 auto; /*align the header at the center*/
text-align: center; /*align the header at the center*/
}
div.image
{
width: 600px; /* width of each container*/
height: 350px; /* height of each container*/
position: absolute; /* instructure each container to obey the position absolutely*/
float: left; /* float all the container so that they overlapped each other*/
left: 27%; /* align them to the center of the screen */
z-index: -1;
}
div#box1
{
background: #66A666 url('../images/blue.png');
}
div#box2
{
background: #E37373 url('../images/green.png');
}
div#box3
{
background: #B2B2B2 url('../images/orange.png');
}
div#box4
{
background: #A51515 url('../images/red.png');
}
this is all you required. What i did is basically add an event handler to each div block and perform an animate function to adjust the height of the effect to a certain visible amount and slide the height to 0 once the height animate has completed which will gives us a nice fold effect. Once the fold effect has been completed, i push the image back to the queue by setting its z-index and return its original size. This way is much better than using a view port which will block the next image and create a not very impressive fold effect.
You can visit the demo site for this fold effect tutorial. The tutorial files can be retrieve from jquery-fold-effect-tutorial
The kind words from some of you guys really makes me wanted to write more advance tutorial but i really have limited time. Nonetheless, i will try my best to write at least 1 tutorial in the most easiest and detail form as much as i can. In this tutorial, i will show you a more advance trick to perform a opening/closing door effect. This tutorial will deal with viewport to perform such effect and may get a little confusing. The demo is as usual at the bottom of the tutorial. If you would like to view the demo first before reading, please proceed to the bottom of this tutorial instead.
Concept
Imagine you have a sliding door, one left and one right. In order to open/close this particular door, we have to pull or push both door so that it will open or close completely. This is the usual case for a door to open and close which required two image of door left and right. How can this be done? The concept behind this technique is not similar to the zoom tutorial i did previously. But let's just concentrate on what is a viewport. A viewport is just a viewable area on the screen to the user, anything outside the viewport is considered unseen by the user. Using viewport, we will try to hide the two sliding door left and right outside the viewport and when the user clicks on the image, the door will automatically be called in and closed the door to create a nicely done closed door effect. The opening door effect will be exactly the same with the additional step to open the door after the door is closed.
CSS and HTML
I believe the CSS and HTML structure should be the same as the shuffle effect tutorial i wrote previously.
Coding
The coding part may get a bit confusing for the viewport technique. But i will try my best to cover it with simplicity as much as i can. If there is any doubt you may have you can really comment below and i will try to reply you within the day if possible. On the CSS Coding,
body{
margin: 0 auto; /*align the header at the center*/
text-align: center; /*align the header at the center*/
}
div.image
{
width: 600px; /* width of each container*/
height: 350px; /* height of each container*/
position: absolute; /* instructure each container to obey the position absolutely*/
float: left; /* float all the container so that they overlapped each other*/
left: 27%; /* align them to the center of the screen */
z-index: -1;
}
div#box1
{
background: #66A666 url('../images/blue.png');
}
div#box2
{
background: #E37373 url('../images/green.png');
}
div#box3
{
background: #B2B2B2 url('../images/orange.png');
}
div#box4
{
background: #A51515 url('../images/red.png');
}
Notice that everything above are images and if images are not displayed yet, a color will be shown instead. Other important stuff are self explained on the comment i wrote in the code. For the HTML structure,
There will only be the container in the HTML structure similar to the shuffle effect tutorial. Supposely, it should have more than just 4 block of div as we need a viewport for each container. But for simplicity, i will just write 4 block here and leave all the complex stuff with jQuery. On the jQuery side,
//below here preload the image in the simplest form
$(function(){
for(i = 1; i < 5;i++)
{
var img = new Image();
img.src = 'images/images/d_left_'+i+'.png';
$(img).load();
}
var i = -1; //deep of the image
var no = 0; //image number
//attach event handler on each container/image
$('div.image').click(function(){
var Obj = $(this);
no++;
if(no > 4)
no = 1;
// viewport structure
Obj.wrap('
<div id='viewport'></div>
');
Obj.css({left: 0+'px'});
$('#viewport').css('overflow','hidden');
$('#viewport').width(Obj.width());
$('#viewport').height(Obj.height());
$('#viewport').css('left','27%');
$('#viewport').css('position','absolute');
// left door structure
$('#viewport').append('
<div class='GrpEffectDiv' id='doorLeft'/>');
$('#doorLeft').css('position', 'absolute');
$('#doorLeft').css('background', '#000 url('images/images/d_left_'+no+'.png')');
$('#doorLeft').width(Obj.width()/2);
$('#doorLeft').height(Obj.height());
$('#doorLeft').css('left', '-'+300+'px');
//right door structure
$('#viewport').append('
<div class='GrpEffectDiv' id='doorRight'/>');
$('#doorRight').css('position', 'absolute');
$('#doorRight').css('background', '#000 url('images/images/d_right_'+no+'.png')');
$('#doorRight').width(Obj.width()/2);
$('#doorRight').height(Obj.height());
$('#doorRight').css('left', 600+'px');
// left door animation
$('#doorLeft')
.animate({left: 0+'px'},1000,
function(){
Obj.css('z-index', i);
$(this).remove();
});
//right door animation
$('#doorRight')
.animate({left: 300+'px'},1000,
function(){
$(this).remove();
Obj.css({left: '27%'});
$('#viewport').replaceWith(Obj);
});
i--;
});
})
Seriously, looking at the code i am starting to wonder whether i will be able to explain it in a simple term. Anyway, what the above code done is as follow,
create a viewport around the container and became the parent of the container
create the left door and append into the viewport ( doors became neightbour of the container)
create the right door and append into the viewport
animate both left and right door to close the door
remove both door and subsituate the viewport back to the container with the original settings
I have also commented the code above so that you are clear what i am doing on the code itself. So how does the viewport be created by the code above? If you have read my sliding tutorial previously, it is similar to the frame concept, where there is a frame (viewport) to cover the outside of the viewport. If i remove the most important thing for the viewport to work which is
$('#viewport').css('overflow','hidden');
You will see that the left and right box is standing by on the right and left side ready to charge at the container to close the door.
without overflow hidden
Notice the right and left image which i made? These are the door of the next image, this way we can create a very nice effect as shown in the demo
.
Improvement
There maybe people who will disagree with this tutorial that all the styling is placed on the jQuery script itself when we can actually just add a class on an external script and give the class to the div block object itself instead. You can definitely do that to simplify the efficiency and flexibility of the code. The purpose why it is done this way is to avoid any complexity on the CSS section. Personally, it will just confuse me going to look up and down on the post to feature out what i am doing. So i place it in a chunk of code indent it nicely for me and everyone to understand.=) The other thing you can do to improve the above code is to apply chaining which i always did in a whole straight line. Imagine if i do it in my tutorial? won't be that nice to read isn't it? Another thing is the preloader in this tutorial, it is just pure load image and may not do as well as other great pre loader but it basically how preloader work in jQuery. Thus, you may see black door on the first time during your loading instead of the image of the door until it cache the image to your browser that it! =X You can do this for gate closing and opening effect as well, we just have to do it on the top and bottom instead of left and right. Anyway, hope you like this tutorial as well =)
File
You can find the tutorial files by saving the page on the demo site. But if you feel lazy, you can download from jquery-closing-opening-door-effect
