Website Builders Resource » jQuery http://websitebuildersresource.com Your Web Development Source Mon, 25 Jan 2010 21:53:56 +0000 http://wordpress.org/?v=2.9 en hourly 1 jQuery AJAX News Ticker http://websitebuildersresource.com/2010/01/15/jquery-ajax-news-ticker/ http://websitebuildersresource.com/2010/01/15/jquery-ajax-news-ticker/#comments Fri, 15 Jan 2010 23:43:40 +0000 builderadmin http://websitebuildersresource.com/?p=806 There are several jQuery News Tickers available but I needed one that I could control the output from PHP and add a slight blank delay between news items. This demo does not have the delay between items but you can add sleep() to ticker.php if needed. This script could be modified to create the data source (ticker.php) via MySQL or RSS feeds.

This script calls ticker.php for the first item to set in the ticker <div> and also set the total count for the javascript to loop through then calls the appropriate indexed item from the $json array in ticker.php.

For the impatient:
Demo of the jQuery AJAX News Ticker

PHP: ticker.php

if ($_GET['r'] == 1)
{
    // Removing browser caching
    header( "Expires: Mon, 20 Dec 1998 01:00:00 GMT" );
    header( "Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT" );
    header( "Cache-Control: no-cache, must-revalidate" );
    header( "Pragma: no-cache" );
}

$json = array();

$json[] = array(
	'url' => '#1',
	'text' => 'First Item Text'
);

$json[] = array(
	'url' => '#2',
	'text' => 'Second Item Text'
);

$json[] = array(
	'url' => '#3',
	'text' => 'Third Item Text'
);

$json[] = array(
	'url' => '#4',
	'text' => 'Fourth Item Text'
);

if ($_GET['r'] == 1)
{
    echo json_encode(array($json[((int)$_GET['i'] - 1)]));
}

jQuery

<?php
// Call the ticker.php script to grab the first item and total items
require('ticker.php');
?>

var total = <?php echo count($json); ?>;
var current = 1;

$(document).ready(function(){
	setInterval("get_ticker()", 3000); // Change this to your specified need time, in milliseconds
});

function get_ticker()
{
	// Increment the counter
	if (current != total)
	{
		current  ;
	}
	else
	{
		current = 1;
	}

	// Get the data
	$.ajax({
		type: "GET",
		dataType: "json",
		cache: false,
		url: "ticker.php?i="   current   "&r=1",
		timeout: 2000,
		error: function() {
			alert("Failed to submit");
		},
		success: function(data) {
			$.each(data, function(i, j){
				$("#ticker-link").attr("href", j.url);
				$("#ticker-link").text(j.text);
			});
		}
	});
}

HTML

<div id="ticker">
	<!-- Display the first item -->
	<a href="<?php echo $json[0]['url']; ?>" id="ticker-link"><?php echo $json[0]['text']; ?></a>
</div>

Demo/Download

Download
Demo of the jQuery AJAX News Ticker

Digg This  Reddit This  Stumble Now!  Buzz This  Vote on DZone  Share on Facebook  Bookmark this on Delicious  Kick It on DotNetKicks.com  Shout it  Share on LinkedIn  Bookmark this on Technorati  Post on Twitter  

Related Posts

  • No Related Post
]]> http://websitebuildersresource.com/2010/01/15/jquery-ajax-news-ticker/feed/ 0 jQuery Innerfade with Separate Link Region http://websitebuildersresource.com/2010/01/14/jquery-innerfade-with-separate-link-region/ http://websitebuildersresource.com/2010/01/14/jquery-innerfade-with-separate-link-region/#comments Thu, 14 Jan 2010 17:37:28 +0000 builderadmin http://websitebuildersresource.com/?p=789 Was working on a project and the client needed a fading news rotator with a link to each article at the bottom of the news box. The jQuery Innerfade plugin can handle the fading rotation but requires some modification to update another <div> that includes the link from the fading news article.

Here is demo that might help explain:
jQuery Innerfade with Separate Link Region Demo

jQuery

Place this in your <head> section:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.innerfade.js"></script>

<script type="text/javascript">
	$(document).ready(function(){
		$('#fade').innerfade({
			speed: 1000,
			timeout: 4000,
			type: 'sequence'
		});
	});
</script>

To change the HTML elements you need to apply the HREF to open jquery.innerfade.js and go to Line 79-84. You can comment out the debug text.

// Set the news link
var this_element = $(elements[current]);
var matches = /<a\s [^>]*href="([^"]*)"[^>]*>(.*)<\/a>/i.exec(this_element.html());
var url = matches[1];
$("a#news-link").attr("href", url);
$("div#news-link-debug").html("Debug Item HREF: " + url);

HTML

<ul id="fade">
	<li><a href="#1">Item 1</a></li>
	<li><a href="#2">Item 2</a></li>
	<li><a href="#3">Item 3</a></li>
	<li><a href="#4">Item 4</a></li>
</ul>

<div id="news-link"><a href="#1">Click Here</a></div>
<div id="news-link-debug"></div>

Demo/Download

Download
jQuery Innerfade with Separate Link Region Demo

Digg This  Reddit This  Stumble Now!  Buzz This  Vote on DZone  Share on Facebook  Bookmark this on Delicious  Kick It on DotNetKicks.com  Shout it  Share on LinkedIn  Bookmark this on Technorati  Post on Twitter  

Related Posts

  • No Related Post
]]> http://websitebuildersresource.com/2010/01/14/jquery-innerfade-with-separate-link-region/feed/ 0 jQuery <select> Manipulation, Multiple Selects with JSON, Set Defaults, Oh My http://websitebuildersresource.com/2009/02/07/jquery-select-manipulation-multiple-selects-json-default/ http://websitebuildersresource.com/2009/02/07/jquery-select-manipulation-multiple-selects-json-default/#comments Sat, 07 Feb 2009 18:12:32 +0000 Jason Maletsky http://websitebuildersresource.com/?p=599 HTML element. Multiple selects, set multiple selects after post and set the default selected value on page load.]]> The following examples cover some of the basics when working with a <select> HTML element.

Fill multiple selects with JSON data onchange

This example fills a second (or more) <select> HTML element with data from a JSON request. Useful in those situations where the selection of the previous <select> element determines what needs to go in the next <select> such as car manufacturers, makes, year, models, etc.

View Example

Fill multiple selects with JSON data onchange and set the default for secondary <select> on post

This exmaple is similar to the above but by default the second <select> will lose it’s selected value after a POST. This example will remedy that problem.

View Example

Set the default selected value for a <select> HTML element onload

This example will show how to set the default selected value on page load.

View Example

Download

Download source code for all examples above

Digg This  Reddit This  Stumble Now!  Buzz This  Vote on DZone  Share on Facebook  Bookmark this on Delicious  Kick It on DotNetKicks.com  Shout it  Share on LinkedIn  Bookmark this on Technorati  Post on Twitter  

Related Posts

]]> http://websitebuildersresource.com/2009/02/07/jquery-select-manipulation-multiple-selects-json-default/feed/ 1 Copy Form Input Data to Another Input Field with jQuery http://websitebuildersresource.com/2009/02/05/copy-form-input-data-to-another-input-field-with-jquery/ http://websitebuildersresource.com/2009/02/05/copy-form-input-data-to-another-input-field-with-jquery/#comments Thu, 05 Feb 2009 16:57:17 +0000 Jason Maletsky http://websitebuildersresource.com/?p=583 This is a very simple example how to copy form input data to other form fields. This is useful when the same information entered can be used in other fields such as shipping and billing address forms.

jQuery

$(document).ready(function(){
	$("input#same").click(function(){
		if ($("input#same").is(':checked'))
		{
			// Checked, copy values
			$("input#shipping-email").val($("input#email").val());
			$("input#shipping-name").val($("input#name").val());
			$("input#shipping-phone").val($("input#phone").val());
		}
		else
		{
			// Clear on uncheck
			$("input#shipping-email").val("");
			$("input#shipping-name").val("");
			$("input#shipping-phone").val("");
		}
	});
});

HTML

<form>
Billing
Email:<input id="email" name="email" type="text" value="test@example.com" />
Name:<input id="name" name="name" type="text" value="John Smith" />
Phone:<input id="phone" name="phone" type="text" value="(123) 456-7890" />

Shipping
Same?:<input id="same" name="same" type="checkbox" />
Email:<input id="shipping-email" name="email" type="text" />
Name:<input id="shipping-name" name="name" type="text" />
Phone: <input id="shipping-phone" name="phone" type="text" />
</form>

Demo and Download

View a demo here

Download

Digg This  Reddit This  Stumble Now!  Buzz This  Vote on DZone  Share on Facebook  Bookmark this on Delicious  Kick It on DotNetKicks.com  Shout it  Share on LinkedIn  Bookmark this on Technorati  Post on Twitter  

Related Posts

]]> http://websitebuildersresource.com/2009/02/05/copy-form-input-data-to-another-input-field-with-jquery/feed/ 3 jQuery Show and Tell http://websitebuildersresource.com/2009/01/08/jquery-show-and-tell/ http://websitebuildersresource.com/2009/01/08/jquery-show-and-tell/#comments Fri, 09 Jan 2009 04:00:16 +0000 Jason Maletsky http://www.websitebuildersresource.com/?p=485 up on hover() and slide down the same
on blur(). This script uses the jQuery UI visual control library.]]> This jQuery code will slide up a hidden <div> up on hover() and slide down the same <div> on blur(). This script uses the jQuery UI visual control library.

JavaScripts

Place the following in the section of your code.

Locally.

<script src="js/jquery.js"></script>
<script src="js/jquery.effects.core.js"></script>
<script src="js/jquery.effects.slide.js"></script>

Or you can call the scripts directly from jQuery.

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>
<script src="http://ui.jquery.com/latest/ui/effects.slide.js"></script>

HTML


<div id="splash-image">
	<img src="images/mercedes-c63-amg.jpg" alt="" />
</div>

<div class="tab-text tab-1">1</div>
<div class="tab-text tab-2">2</div>
<div class="tab-text tab-3">3</div>
<div class="tab-text tab-4">4</div>

<div id="splash-tabs">
	<div class="splash-tab"><a class="tab-text" rel="1" href="#">First</a></div>
	<div class="splash-tab"><a class="tab-text" rel="2" href="#">Second</a></div>
	<div class="splash-tab"><a class="tab-text" rel="3" href="#">Third</a></div>
	<div class="splash-tab"><a class="tab-text" rel="4" href="#">Fourth</a></div>
</div>

jQuery Code

$(document).ready(function(){
	$("div.splash-tab").hover(
		function () {
			$(this).addClass("splash-tab-hover");
		},
		function () {
			$(this).removeClass("splash-tab-hover");
		}
	);

	$("a.tab-text").hover(
		function () {
			var tab = $(this).attr("rel");
			$("div.tab-" + tab).show("slide", { direction: "down" }, 500);

		},
		function () {
			var tab = $(this).attr("rel");
			$("div.tab-" + tab).hide("slide", { direction: "down" }, 500);

		}
	);
});

Demo and Download

View a demo here

Download

Resources

jQuery UI Documentation

Digg This  Reddit This  Stumble Now!  Buzz This  Vote on DZone  Share on Facebook  Bookmark this on Delicious  Kick It on DotNetKicks.com  Shout it  Share on LinkedIn  Bookmark this on Technorati  Post on Twitter  

Related Posts

]]> http://websitebuildersresource.com/2009/01/08/jquery-show-and-tell/feed/ 6 Dynamic Javascript Variables http://websitebuildersresource.com/2009/01/04/dynamic-javascript-variables/ http://websitebuildersresource.com/2009/01/04/dynamic-javascript-variables/#comments Sun, 04 Jan 2009 19:51:35 +0000 Jason Maletsky http://www.websitebuildersresource.com/?p=467 To create dynamic variables in JavaScript use the eval() function. Of course eval() can be for other dynamic JavaScript creation as well.

function dynamic(id)
{
	// Create dynamic variable and set the value
	eval("var test_" + id + " = \"value goes here\";");

	// Return the value
	return eval("test_" + id);
}

// Call function
var test = dynamic(123);

// Display the value
document.write(test);

Demo

View a demo here

Digg This  Reddit This  Stumble Now!  Buzz This  Vote on DZone  Share on Facebook  Bookmark this on Delicious  Kick It on DotNetKicks.com  Shout it  Share on LinkedIn  Bookmark this on Technorati  Post on Twitter  

Related Posts

]]> http://websitebuildersresource.com/2009/01/04/dynamic-javascript-variables/feed/ 1 Show Partial Content, Slide Animate with jQuery http://websitebuildersresource.com/2008/12/20/show-partial-content-slide-animate-with-jquery/ http://websitebuildersresource.com/2008/12/20/show-partial-content-slide-animate-with-jquery/#comments Sun, 21 Dec 2008 05:18:12 +0000 Jason Maletsky http://www.websitebuildersresource.com/?p=363 and allow the user to click a link from the title or a link at the bottom to view the rest of the content with a sliding action.]]> This plugin will show a partial amount of content from a <div> and allow the user to click a link from the title or a link at the bottom to view the rest of the content with a sliding action.

This is based on the original post/code by Chris Pollock. Thanks Chris for the inspiration.

Demo and Sources

Click here to view a demo

Download

Digg This  Reddit This  Stumble Now!  Buzz This  Vote on DZone  Share on Facebook  Bookmark this on Delicious  Kick It on DotNetKicks.com  Shout it  Share on LinkedIn  Bookmark this on Technorati  Post on Twitter  

Related Posts

]]> http://websitebuildersresource.com/2008/12/20/show-partial-content-slide-animate-with-jquery/feed/ 9