Jox Technology

Online resource of games, gadgetm and web development

Advertisement

Archive for the ‘ Javascripts/jQuery ’ Category

Simple Jquery Animation Effects

December 14, 2009 | Comments Off | Javascripts/jQuery

Just made some jquery effects which is totally simple to use. click here for the demo and download the code below.

The effects ive used are the fade in/ fade out , slide and a combination of the three. The code is very simple which the jquery implies to write less do more.

$(document).ready(function(){

$(”p:#v”).toggle(function(){

$(”.stuff”).animate({ height: ‘hide’, opacity: ‘hide’ }, ’slow’);

},function(){

$(”.stuff”).animate({ height: ’show’, opacity: ’show’ }, ’slow’);

});

$(”p:#ah”).toggle(function(){

$(”.stuff2″).fadeOut(”slow”);

},function(){

$(”.stuff2″).fadeIn(”slow”);

});

$(”#go”).toggle(function(){

$(”.stuff3″).animate({

width: “70%”,

opacity: 0.1,

marginLeft: “6in”,

fontSize: “3em”,

borderWidth: “10px”

}, 1500 );

},function(){

$(”.stuff3″).animate({

width: “70%”,

opacity: 100,

marginLeft: “0in”,

fontSize: “3em”,

borderWidth: “10px”

}, 1500 );

});

});

Demo | Download the source code

<script type=”text/javascript”>
$(document).ready(function(){
$(”p:#v”).toggle(function(){
$(”.stuff”).animate({ height: ‘hide’, opacity: ‘hide’ }, ’slow’);
},function(){
$(”.stuff”).animate({ height: ’show’, opacity: ’show’ }, ’slow’);
});
$(”p:#ah”).toggle(function(){
$(”.stuff2″).fadeOut(”slow”);
},function(){
$(”.stuff2″).fadeIn(”slow”);
});
$(”#go”).toggle(function(){
$(”.stuff3″).animate({
width: “70%”,
opacity: 0.1,
marginLeft: “6in”,
fontSize: “3em”,
borderWidth: “10px”
}, 1500 );
},function(){
$(”.stuff3″).animate({
width: “70%”,
opacity: 100,
marginLeft: “0in”,
fontSize: “3em”,
borderWidth: “10px”
}, 1500 );
});
});
</script <script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(”p:#v”).toggle(function(){
$(”.stuff”).animate({ height: ‘hide’, opacity: ‘hide’ }, ’slow’);
},function(){
$(”.stuff”).animate({ height: ’show’, opacity: ’show’ }, ’slow’);
});
$(”p:#ah”).toggle(function(){
$(”.stuff2″).fadeOut(”slow”);
},function(){
$(”.stuff2″).fadeIn(”slow”);
});
$(”#go”).toggle(function(){
$(”.stuff3″).animate({
width: “70%”,
opacity: 0.1,
marginLeft: “6in”,
fontSize: “3em”,
borderWidth: “10px”
}, 1500 );
},function(){
$(”.stuff3″).animate({
width: “70%”,
opacity: 100,
marginLeft: “0in”,
fontSize: “3em”,
borderWidth: “10px”
}, 1500 );
});
});
</script>

Creating Pie Chart in PHP

November 2, 2009 | Comments Off | Javascripts/jQuery

Here’s a simple way to create a pie chart from PHP. Thanks to rasmus of peters1.dk

Required from PHP-installation:
This script requires GD 2.0.1 or later to be installed on your webserver.
This script requires JPG Support enabled.

Sample Output

PHP Pie Chart

Include the chart in your site just by calling the script like a picture, with parts and labels as attributes:

img src=“chart.php?data=60*20*15*16&label=Google*Yahoo *MSN*Yehey”>

PHP capitalizing first letter in every word

November 2, 2009 | Comments Off | Javascripts/jQuery

A time saving function of PHP in capitalizing first letter in every word. ucwords() is a very helpful function that can be used in content titles.

Sample Code:
$title = “a quick brown fox jumps over the lazy dog”;
$newTitle = ucwords($title);
echo “Title – $newTitle”;

Output :
Title – A Quick Brown Fox Jumps Over The Lazy Dog

PHP/MySql get next and previous record

November 2, 2009 | Comments Off | Javascripts/jQuery

Here’s a simple but effective way to get the next or previous record on your mysql database.

Next Record
$idd = 10; // supposed this is the current/selected record
$qry2 = mysql_query(”select * from product where product_id > $idd order by product_id asc”);
$rr = mysql_fetch_array($qry2);
$nxt= $rr['product_id'];

Previous record

$idd = 10; // supposed that this is the current/selected record
$qry2 = mysql_query(”select * from product where product_id < $idd order by product_id desc”);
$rr = mysql_fetch_array($qry2);
$prv= $rr['product_id'];

PHP Display HTML tags on page

November 2, 2009 | Comments Off | Javascripts/jQuery

Here’s a simple way to display HTML tags/formating on your php page.
You can use the htmlspecialchars().

Example:

Hello this is bold This is italic This is normal this is a double quote ” this is & this is less than < this is greater than >

The html part of the above line is here

<b>Hello this is bold</b> <i>This is italic</i> This is normal this is a double quote ” this is & this is less than < this is greater than >

Now to display the code for the above line formatted in different style we have to use htmlspecialchars funciton like this

$contents=”<b>Hello this is bold</b> <i>This is italic</i> This is normal this is a double quote ” this is & this is less than < this is greater than >”;
echo htmlspecialchars($content);

PHP Get string between tags

November 2, 2009 | Comments Off | Javascripts/jQuery

Here’s a very basic function but a very useful one if you need to get text/string between html tags using PHP.

<?php
function getTextBetweenTags($string, $tagname)
{
$pattern = “/<$tagname>(.*?)<\/$tagname>/”;
preg_match($pattern, $string, $matches);
return $matches[1];
}

$str = “<b>123456</b>987″;
$txt = getTextBetweenTags($str,”b”);
echo $txt;
?>

How to replace the first occurrence of a string (PHP)

November 2, 2009 | Comments Off | Javascripts/jQuery

Wondering how to replace in php the only first occurrence of the string?

just copy and paste this code.
<?
function str_replace_count($search,$replace,$subject,$times)
{
$subject_original=$subject;
$len=strlen($search);
$pos=0;
for ($i=1;$i<=$times;$i++) {
$pos=strpos($subject,$search,$pos);
if($pos!==false) {
$subject=substr($subject_original,0,$pos);
$subject.=$replace;
$subject.=substr($subject_original,$pos+$len);
$subject_original=$subject;
} else {
break;
}
}
return($subject);
}?>


Wondering how to replace in php the only first occurence

of the string?

just copy and paste this code.

World Clock Script

November 2, 2009 | Comments Off | Javascripts/jQuery

This is program in javascript that shows the time around the world just by selecting a country or a specific city. The system will display the time in that area. Everybody can use this script in their web sites its free and open source so users can modify it.

Installation

  • Upload this script in your server.Put this tag in the header of your page this will call the function that will be used by the clock.
  • set the server time in the clock.js. You should identify first the time zone on your server so that it will always be correct coz even though this is created in javascript which is client side this is modified to get the serve time and use it to processed the clock so the time displayed will based on the server and not on the users time in their computers.
  • You can customize the world map and place the time and country of your choice, just add this div tag coz this is where the time will display and put the country name on the div id.

DOWNLOAD HERE

Flash Peel Ads for your sites

November 2, 2009 | Comments Off | Javascripts/jQuery

Use this to have a cool flash ads on the corner of your page.  This could really attract users coz of its animation and you can use different images so the limit is just your imagination.

Installation and modification

  • Upload the peeler folder on your your server and place this line of code on your html head.
  • <script src=”http://www.joxtechnology.com/blackbox/peeler/AC_OETags.js” language=”javascript”></script>
    <script src=”http://www.joxtechnology.com/blackbox/peeler/AC_OETags.js” language=”javascript”></script>
    <script src=”http://www.joxtechnology.com/blackbox/peeler/pageear.js” type=”text/javascript”></script>
    <script src=”http://www.joxtechnology.com/blackbox/peeler/pageear.js” type=”text/javascript”></script>
  • Place this script just before the the end of you BODY tag
  • <script type=”text/javascript”><!–
    writeObjects();
    // –></script>
  • You can modify the speed of the animations and the behavior of the peel ads. Open the pageear.js, place the link where you want the users to be redirected when they click the ads in this variable.

var pagearBigImg = ‘http://joxtechnology.com/peeler/pageear_b.jpg’;
var pagearSmallImg = ‘http://joxtechnology.com/peeler/pageear_s.jpg’;

DOWNLOAD HERE

Ticker-Sliding Text Content Script

November 2, 2009 | Comments Off | Javascripts/jQuery

This is a very good sliding/ticker script made out of javascript using jquery. Smoothly slide contents or automatically roll the contents with this code.

Installation

  • download the script here and upload on your server.
  • Paste this line of code on the header of your page.
    <link href=”http://yourdomain.com/qscroller.css” rel=”stylesheet” type=”text/css” />
    <script type=”text/javascript” src=”http://yourdomain.com/mootools.js”></script>
    <script type=”text/javascript” src=”http://yourdomain.com/qscroller.js”></script>
  • The script can be used for text and text with image contents.

DOWNLOAD HERE