Bright Cherry » Ajax http://www.brightcherry.co.uk/scribbles Fri, 27 Aug 2010 18:00:38 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Ajax JQuery – Rotating Image Script http://www.brightcherry.co.uk/scribbles/2010/08/27/ajax-jquery-rotating-image-script/ http://www.brightcherry.co.uk/scribbles/2010/08/27/ajax-jquery-rotating-image-script/#comments Fri, 27 Aug 2010 18:00:38 +0000 Maruf http://www.brightcherry.co.uk/scribbles/?p=241 I can’t remember for the life of me where I got this code from, but if I could, I’d give the author the credit. I didn’t write this code, but it’s something I wanted to share because it’s pretty cool.

There are HUNDREDS of image rotating scripts out there, but I like this one in particular because the code is light and it’s a lot smoother than a lot I’ve seen. Additionally, unlike a lot of the examples out there, this method doesn’t require a heavy jQuery extension. This is pure JQuery (and a tiny bit of CSS).

Here’s an example of what this code will do:

Here’s the code:

View Code HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

/*** set the width and height to match your images **/
 
#slideshow {
	position:relative;
	height:330px;
}
 
#slideshow img {
	position:absolute;
	top:0;
	left:0;
	z-index:8;
	opacity:0.0;
}
 
#slideshow img.active {
	z-index:10;
	opacity:1.0;
}
 
#slideshow img.last-active {
	z-index:9;
}
 
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript"> 
function slideSwitch() {
var $active = $('#slideshow .active');
if ( $active.length == 0 ) $active = $('#slideshow img:last');
	var $next =  $active.next().length ? $active.next()
	: $('#slideshow img:first');
 
	$active.addClass('last-active');
 
	$next.css({opacity: 0.0})
		.addClass('active')
    //adjust value to change the time taken to fade between images
		.animate({opacity: 1.0}, 3000, function() {
		$active.removeClass('active last-active');
	});
}
 
$(function() {
    //adjust value to change the interval between each image change
		setInterval( "slideSwitch()", 4000 );
});
</script>  
 
<div id="slideshow">
  <!-- the active class is for the image you want to show on page load --> 
	<img src="images/rotate/1.jpg" class="active" alt="" title="" /> 
	<img src="images/rotate/2.jpg" alt="" title="" /> 
	<img src="images/rotate/3.jpg" alt="" title="" /> 
</div>

Download

Download JQuery Rotating Image Script

]]> http://www.brightcherry.co.uk/scribbles/2010/08/27/ajax-jquery-rotating-image-script/feed/ 0 Ajax – Rotating Text http://www.brightcherry.co.uk/scribbles/2010/03/29/ajax-rotating-text/ http://www.brightcherry.co.uk/scribbles/2010/03/29/ajax-rotating-text/#comments Mon, 29 Mar 2010 19:51:50 +0000 Maruf http://www.brightcherry.co.uk/scribbles/?p=219 I just implemented a new feature on Property Investment for the Landlord, which shows a box rotating through various text blocks. Just for clarification, this code doesn’t just apply to rotating “text”, you can put images or anything you want in there.

This is just a flat image example:

Rotating Text Image

I used the excellent Jquery Innerfade Plugin to get the smooth transitional affect. The speed of the rotation time can be tweaked, as can the live time for each text block.

Why I like this method

Ok, there are actually TONNES of ways you can rotate block elements- I’ve seen and tested so many different pieces of code. It can actually be done with a few lines of pure Javascript, as opposed to using an entire JQuery extension. However, what I like about the code i’m using is that it works with fluid/elastic websites. For example, if I run this code on a fluid website, the container of the rotating text reduces as I make the browser window smaller, and the rotation doesn’t mess up. Moreover, the text continues to align properly.

For a clearer picture of what I mean, go to Property Investment and make your browser window narrower and you will see that the rotating block remains perfectly fluid while it still rotates. A lot of the examples I tried didn’t seem to be able to handle fluid layouts. The rotating either stopped/acted weird, or it didn’t act fluid.

Download

I’ve quickly put together a working version which you can download here.

]]> http://www.brightcherry.co.uk/scribbles/2010/03/29/ajax-rotating-text/feed/ 0 Ajax JQuery / PHP – Refresh Table When Inserting Row Into a MySQL Database http://www.brightcherry.co.uk/scribbles/2010/03/09/ajax-jquery-php-refresh-table-when-inserting-row-into-a-mysql-database/ http://www.brightcherry.co.uk/scribbles/2010/03/09/ajax-jquery-php-refresh-table-when-inserting-row-into-a-mysql-database/#comments Mon, 08 Mar 2010 23:01:15 +0000 Maruf http://www.brightcherry.co.uk/scribbles/?p=209 I’ve had a few people asking me how to refresh a table (not the entire page) when inserting rows into a MySQL database, so I thought I’d quickly put together a small demo.

Here’s a basic demo of what I’m talking about. If you populate the form and press “Submit” you’ll notice the table updates without the entire page refreshing.

Refresh Table When Inserting Row Into a MySQL Database

Demo

Ajax JQuery / PHP – Refresh Table Demo.

I’ve put a limit of 20 entries on the demo version, to save myself from being abused!!

Download

Download Ajax JQuery / PHP – Refresh Table

Please note, I have merely provided a guide. You are strongly advised to implement your own server and client side error checking.

I hope you find the code useful :)

]]> http://www.brightcherry.co.uk/scribbles/2010/03/09/ajax-jquery-php-refresh-table-when-inserting-row-into-a-mysql-database/feed/ 4 JQuery- Auto Refresh Div Every X Seconds http://www.brightcherry.co.uk/scribbles/2009/02/26/jquery-auto-refresh-div-every-x-seconds/ http://www.brightcherry.co.uk/scribbles/2009/02/26/jquery-auto-refresh-div-every-x-seconds/#comments Thu, 26 Feb 2009 10:12:40 +0000 Maruf http://www.brightcherry.co.uk/scribbles/?p=141 I’ve recently been working on a e-commerce site (online store) for a client. One of the features required was to show the most recently viewed items on the homepage. For that to work, I need to write a script to query a DB every 10secs or so. Youtube actually has something similar, where on the homepage they display “videos that are being viewed now”. I don’t know how they do, but this is how I do it…

Obviously it’s an AJAX affect; as always, I’ll be using the JQuery library (my personal favourite).

Here’s the OUTDATED code (find updated code below this example)…

View Code JS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<html>
<head>
<!-- For ease i'm just using a JQuery version hosted by JQuery- you can download any version and link to it locally -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
 
<script>
var refreshId = setInterval(function()
{
     $('#responsecontainer').fadeOut("slow").load('response.php').fadeIn("slow");
}, 10000);
</script>
</head>
<body>
 
<div id="responsecontainer">
</div>
</body>

As you can see, the JS code in the header is calling a file called response.php. That’s the file which will refresh every 10 seconds. Just change the value to increase/decrease the refresh period. The #responsecontainer div is where the response.php will be displayed.

It’s as easy as that.

If anyone uses the code, let me know how you get on :)

UPDATE- Load content immediately on page load & I.E Fix

I’ve had a LOADS of people emailing us asking how to get the content in the data.php file to load immediately on pageload, and then start the refreshing process. Also, a lot of people had issues with this code in I.E. I believe I’ve managed to deal with both problems. Here’s the code for that:

View Code JS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<html>
<head>
<!-- For ease i'm just using a JQuery version hosted by JQuery- you can download any version and link to it locally -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
 $(document).ready(function() {
 	 $("#responsecontainer").load("response.php");
   var refreshId = setInterval(function() {
      $("#responsecontainer").load('response.php?randval='+ Math.random());
   }, 9000);
});
</script>
</head>
<body>
 
<div id="responsecontainer">
</div>
</body>

Click here for an example (page should start reloading after 5 secs or so- you’ll notice the number changing). You can download the working files here.

I hope that helps! If anyone tries this updated code, please let me know if it works ok. Thanks a lot :)

]]> http://www.brightcherry.co.uk/scribbles/2009/02/26/jquery-auto-refresh-div-every-x-seconds/feed/ 71 Ajax Jquery Contact Form With Validation http://www.brightcherry.co.uk/scribbles/2008/12/11/ajax-jquery-contact-form-with-validation/ http://www.brightcherry.co.uk/scribbles/2008/12/11/ajax-jquery-contact-form-with-validation/#comments Thu, 11 Dec 2008 22:02:12 +0000 Maruf http://www.brightcherry.co.uk/scribbles/?p=124 I’ve put together a simple AJAX contact form, using the Jquery library (my personal favourite).

What does this all mean? Well, it’s basically a contact form which validates and submits an email without the page refreshing. You can see an example on our contact page.

The example i’m providing for download is extremely simple. If you know HTML/PHP it’s extremely easy to modify and adjust to your own personal needs.

Download

Ajax Jquery Contact Form With Validation

Quick Notes

  • Please checkout the submitemail.php file. In there you need to update certain variables. E.g where you want the email to go, and the subject line
  • I advice you not to alter the PHP code unless you actually know PHP
  • If the script generates a “Warning: mail()” error, it means your PHP server needs to enable the mail() function. It is not a scripting error.
]]> http://www.brightcherry.co.uk/scribbles/2008/12/11/ajax-jquery-contact-form-with-validation/feed/ 14