Categories
Uncategorized

Top 5 jQuery image galleries

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.

This article is old. Please view 10 top jQuery plugins for images in 2011

I have collected some jQuery image galleries for you to choose your preferred one. Each one is working in different way than the other.
Here is the list of the top 5 jquery image galleries:

Categories
Browsers CSS Design DHTML Free Stuff HTML Java Script Jquery Misc Web & Programming Web Browsers XHTML

Scroll window smoothly using jQuery

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.

Using jQuery animate() function to do a smooth scrolling:

I have also created a div as follow:


<div id="scrollToHere">
Scroll to here
</div>

You need something to run your script. Create a button like this:

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.


<input type="button" onclick="scollWin();" value="Scroll up" />

The jQuery Code will be like this:


function scrollWin(){
$('html,body').animate({
scrollTop: $("#scrollToHere").offset().top
}, 800);
}

Here is something to try:

now jQuery window scrolling is done with animation.

Enjoy it..

Categories
Browsers CSS Design DHTML Misc Web & Programming XHTML

Web page transparency for all browsers

Every browser has different CSS properties for less-used actions like: transparency or opacity.
It was something weird to do transparency on your web page because there are lot of different web browsers. To make that easy, I have collected information and generated a CSS class that will work on most of the browsers.
See the Code below:


.transparent {
	filter:alpha(opacity=75);
	-moz-opacity:0.75;
	-khtml-opacity: 0.75;
	opacity: 0.75;
}

filter:alpha(opacity=75); is used for Internet Explorer.
-moz-opacity:0.75; is used for Mozilla, Firefox, Netscape browsers (old versions).
-khtml-opacity: 0.75; is used for old versions of Safari.
opacity: 0.75; is used as a standard CSS property for browsers like Firefox 2+ and Safari 3+ and Opera

Categories
Uncategorized

Image lightbox (imageflow) and image enlargement with Jquery

While I was looking for a way to make a good lightbox with Javascript, I found a better way to do that. A simple code with a absolute result.

I used many ways to create this lightbox or as some people call “Image Flow”, but this way is a better way in my openion.
I used Jquery plugin and generated some code to get a great result.

Here is the explanation and the demo code for this script:

Increase your Website PageRank on Google

Google Page rank is based on back links. Back links are Links pointing to your website from another website. The more back links you have the higher your PR will be.

1. Join forums, forums are a great way to achieve links to your website. In most forums you are allowed to have a signature and in your signature you can put a link to your website. But another important note to look on is making sure the forum is somewhat related to your website. You will still get credit if it’s not, but if it’s related to your website than you will be accomplishing two tasks at once.

You will be advertising for your website (bringing in targeted traffic) You will also be building your websites presence.

Categories
Uncategorized

Learn AJAX, AJAX tutorial

What’s AJAX?

AJAX (Asynchronous JavaScript and XML) is a newly coined term for two powerful browser features that have been around for years, but were overlooked by many web developers until recently when applications such as Gmail, Google suggest, and Google Maps hit the streets.

The two features in question are that you can:

  • Make requests to the server without reloading the page
  • Parse and work with XML documents

Step 1 – say “Please!” or How to Make an HTTP Request

In order to make an HTTP request to the server using JavaScript, you need an instance of a class that provides you this functionality. Such a class was originally introduced in Internet Explorer as an ActiveX object, called XMLHTTP. Then Mozilla, Safari and other browsers followed, implementing an XMLHttpRequest class that supports the methods and properties of Microsoft’s original ActiveX object.

As a result, in order to create a cross-browser instance (object) of the required class, you can do:


if (window.XMLHttpRequest) { // Mozilla, Safari, ...
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}

(For illustration purposes, the above is a bit simplified version of the code to be used for creating an XMLHTTP instance. For a more real-life example, see step 3 of this article.)

Some versions of some Mozilla browsers won’t work properly if the response from the server doesn’t have an XML mime-type header. To satisfy this, you can use an extra method call to override the header sent by the server, just in case it’s not text/xml.


http_request = new XMLHttpRequest();
http_request.overrideMimeType('text/xml');

Categories
Uncategorized

Web browsers, Known and unknown browsers.

There are more browsers than you are aware of. Apart from Firefox, Opera and Internet Explorer there is a number of promising alternatives which can improve your flexibility, increase your productivity and enrich your browsing experience.

In fact, there are over 100 existing (although not widely used) browser applications. Most of them make use of the rendering engines Trident (Internet Explorer), Gecko (Mozilla Firefox), WebCore (Safari) and Presto (Opera 7 and above). However, some of them offer large fields for experiments and exploration — e.g. 3D Engines, but also really useful browsers with advanced functionalities such as desktop-tools integration.

Recently we’ve selected over 20 Win/Mac/Linux-browsers, installed most of them, tested them, compared them and now present the results below. Let’s take a closer look at some rather unknown, forgotten, advanced or experimental browsers. What else do we have on the horizon? What should we use? And what might we be willing to use? Apparently, between Firefox, Opera and Internet Explorer there is enough room for creative and unusual approaches.

Categories
AJAX Browsers DHTML Free Stuff HTML Java Script Misc Web & Programming Web Browsers XHTML XML

Better way to load XML document with Javascript

The better way to load XML document on all browsers is to use AJAX technique.

After testing XML with Javascript. I fount that Safari (on Mac OSX 10) does not support XML with Javascript.
So, How to load it then?

Crop image in PHP.

You can download the uploader.class.php file from this link:
http://www.freelancer-id.com/uploader.class-1.2
This class can:
– Upload images and files.
– Resize images.
– Crop images.

I was looking for a simple way to crop part of an image using PHP code. The idea of this is to create image thumbnail for large images uploaded. These large images could be used for previews, screen shots, wallpapers.. etc.

And because we don’t have an exact ratio between Image width and height, we should crop part of the original image to use it as a thumbnail.

Note: we can find the ratio between width and height and then resize the image. But this won’t work prefect, so we better use cropping to get the size we need.
Also, we can crop part of resized image to use it as a thumbnail.

Let me now explain the code used to crop part of image.


// Receiving image.
$image = $_FILES["image"]["tmp_name"];
// Creating temp image as a source image (original image).
$src = imagecreatefromjpeg($image);

// Create new image with a new width and height.
$dest = imagecreatetruecolor($width, $height);

// Copy new image to memory after cropping.
imagecopy($dest, $src, 0, 0, $left, $top, $width, $height);

$path="images/croppedImage.jpg";
$compress = 60;

// Creating new image cropped image as JPG and save it to $dest
imagejpeg($dest,$path,$compress);

// Freeing up memory.
imagedestroy($dest);
imagedestroy($src);

Hope this will be helpful.

Also, you can download the the latest class from: http://www.freelancer-id.com/upload-crop-resize-in-php

Categories
Uncategorized

What’s jQuery?

jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML. It was released January 2006 at BarCamp NYC by John Resig.

Dual licensed under the MIT License and the GNU General Public License, jQuery is free and open source software.

Both Microsoft and Nokia have announced plans to bundle jQuery[1] on their platforms, Microsoft adopting it initially within Visual Studio[2] and use within Microsoft’s ASP.NET AJAX framework and ASP.NET MVC Framework whilst Nokia will integrate it into their Web Run-Time platform.