tag:blogger.com,1999:blog-86461514580371137642022-05-09T01:30:37.589+07:00Web design, tutorial, blogger, blogspot, wordpress, template free, premium, software, downLượm nhặt những bài có ích cho mình trên mạng internet về lưu trên đây để khi cần có thể xem được hehe!Blogger Blogspothttp://www.blogger.com/profile/10711341003772554009noreply@blogger.comBlogger59125tag:blogger.com,1999:blog-8646151458037113764.post-67661984396968072782011-09-28T16:26:00.001+07:002011-09-28T16:26:47.812+07:00One-pixel table border with CSS<h4><strong>Problem <br /></strong>I want to have a one-pixel one-color solid border around a table and its cells. Adding <code>border="1"</code> to the <code>table</code> tag isn’t suitable, because it looks horrific in most of the browsers.</h4> <p><strong>Solution <br /></strong>To make the CSS code easier to maintain, we can first set the border color for both table and td and then set the differing part separately. If you later want to change the border color, you only need to change it in one place.</p> <p>Here is our final code:</p> <pre class="brush: xml;"><style type="text/css"><br />/* <![CDATA[ */<br /><br />table, td<br />{<br /> border-color: #600;<br /> border-style: solid;<br />}<br /><br />table<br />{<br /> border-width: 0 0 1px 1px;<br /> border-spacing: 0;<br /> border-collapse: collapse;<br />}<br /><br />td<br />{<br /> margin: 0;<br /> padding: 4px;<br /> border-width: 1px 1px 0 0;<br /> background-color: #FFC;<br />}<br /><br />/* ]]> */<br /></style><br /><br /><table><br /><tr><br /> <td>Cell 1</td><br /> <td>Cell 2</td><br /></tr><br /><tr><br /> <td>Cell 3</td><br /> <td>Cell 4</td><br /></tr><br /></table></pre> <div class="blogger-post-footer">View more detail at: http://website20.blogspot.com</div>subhttp://www.blogger.com/profile/14422629553615373642noreply@blogger.com0tag:blogger.com,1999:blog-8646151458037113764.post-78295157429037118622011-08-31T09:22:00.001+07:002011-08-31T09:23:41.382+07:00How to disable skype plugin for one phone number on website using javascript?<p><a href="http://lh4.ggpht.com/-z_zV5W718A4/Tl2bJxSjeTI/AAAAAAAAABM/tVrTTvXkKLs/s1600-h/skype_phone%25255B3%25255D.jpg"><img style="border-bottom: 0px; border-left: 0px; margin: 0px 10px 0px 0px; display: inline; border-top: 0px; border-right: 0px" title="skype_phone" border="0" alt="skype_phone" align="left" src="http://lh3.ggpht.com/-4GTWcE-FeSg/Tl2bK2ZS2CI/AAAAAAAAABQ/vcddSDnckvY/skype_phone_thumb%25255B1%25255D.jpg?imgmax=800" width="244" height="182" /></a> </p> <p>CSS trick for Web Developers to DISABLE phone number detection by Skype browser addon (e.g. AVOID "Skype Call" buttons): <br />Just insert invisible <span> with "_" inside phone number: <br /><strong>+123 456 <font color="#ff0000"><span style="display:none;">_</span></font> 789 <br /></strong>Simple!</p> <div class="blogger-post-footer">View more detail at: http://website20.blogspot.com</div>subhttp://www.blogger.com/profile/14422629553615373642noreply@blogger.com0tag:blogger.com,1999:blog-8646151458037113764.post-16487716492066839862011-08-29T17:06:00.001+07:002011-08-29T17:06:33.162+07:00MySQLi Tutorial<p>Moving from a procedural system to object-oriented can be a daunting task. One feature to assist you is the MySQLi class, which allows for an object-oriented approach to database manipulation. This tutorial gives insight into the structure and basic usage of the MySQLi class. If PDO isn’t an option for you, then try MySQLi!</p> <p><strong><a href="http://us2.php.net/mysqli">MySQLi</a></strong> stands for MySQL Improved, and is available from MySQL versions >= 4.1.3 and must be compiled in PHP with –with-mysqli=/path/to/mysql/bin/mysql_config.</p> <p>There are three hierarchical classes with MySQLi:</p> <ol> <li>mysqli – Represents a connection between PHP and a MySQL database </li> <li>mysqli_stmt – Represents a prepared statement </li> <li>mysqli_result – Represents the result set obtained from a query against the database </li> </ol> <p>Each one of these classes represent a different situation. The mysqli class is absolutely necessary because you will be communicating only through this class. It contains the connection to the other two classes (mysqli_stmt and _result). For instance, if you were executing a SELECT statement to pull cities from the states table, you would do something like the following:</p> <pre class="brush: php;"><?php<br />$mysqli = new mysqli('hostname','username','password','database');<br />//This is where we will query the database and pull using the cities/states SELECT statement<br />// If the result returns true<br />if ($result = $mysqli->query("SELECT city FROM state WHERE state='AL'")) {<br />// So the result returned true, let's loop and print out each city.<br />// The number of rows returned is assigned to the property "num_rows" in the mysql_result class<br />echo 'For the state of AL, there are '.$result->num_rows.' cities.<br />';<br />// The "fetch_object()" method is the equivalent of the old mysql_fetch_object() function. It allows access to the returned rows within the resouce object ($result in this case).<br />while ($row = $result->fetch_object()) {<br />echo 'City Name: '.$row->city.'<br />';<br />}<br />} else {<br />// Notice below that the errors are still contained within the mysqli class. This means that each result will affect a single "error" property. In otherwords, if your result fails, the error returned from MySQL is assigned to the property "error".<br />// This means the query failed<br />echo $mysqli->error;<br />} // end else<br />$mysqli->close();<br />?></pre><br /><p>Before we go any further, let’s look at each one of the methods and parameters of the mysqli and mysqli_result class. This tutorial will not cover the mysql_stmt class, as this will be “Part 2″, which will cover prepared statements, and will be available within the next week.</p><br /><p>Part 3 of the mysqli tutorial will cover transactions using the InnoDB engine.</p><br /><p><strong>mysqli Class Methods:</strong></p><br /><ul><br /> <li><strong>mysqli</strong> – construct a new mysqli object </li><br /> <li><strong>autocommit </strong>- turns on or off auto -commiting database modifications </li><br /> <li><strong>change_user </strong>- changes the user of the specified database connection </li><br /> <li><strong>character_set_name </strong>- returns the default character set for the database connection </li><br /> <li><strong>close </strong>- closes a previously opened connection </li><br /> <li><strong>commit </strong>- commits the current transaction </li><br /> <li><strong>connect </strong>- opens a new connection to MySQL database server </li><br /> <li><strong>debug </strong>- performs debugging operations </li><br /> <li><strong>dump_debug_info </strong>- dumps debug information </li><br /> <li><strong>get_client_info </strong>- returns client version </li><br /> <li><strong>get_host_info </strong>- returns type of connection used </li><br /> <li><strong>get_server_info </strong>- returns version of the MySQL server </li><br /> <li><strong>get_server_version </strong>- returns version of the MySQL server </li><br /> <li><strong>init </strong>- initializes mysqli object </li><br /> <li><strong>info </strong>- retrieves information about the most recently executed query </li><br /> <li><strong>kill </strong>- asks the server to kill a mysql thread </li><br /> <li><strong>multi_query </strong>- performs multiple queries </li><br /> <li><strong>more_results </strong>- check if more results exist from currently executed multi -query </li><br /> <li><strong>next_result </strong>- reads next result from currently executed multi -query </li><br /> <li><strong>options </strong>- set options </li><br /> <li><strong>ping </strong>- pings a server connection or reconnects if there is no connection </li><br /> <li><strong>prepare </strong>- prepares a SQL query </li><br /> <li><strong>query </strong>- performs a query </li><br /> <li><strong>real_connect </strong>- attempts to open a connection to MySQL database server </li><br /> <li><strong>escape_string </strong>- escapes special characters in a string for use in a SQL statement, taking into account the current charset of the connection </li><br /> <li><strong>rollback </strong>- rolls back the current transaction </li><br /> <li><strong>select_db </strong>- selects the default database </li><br /> <li><strong>set_charset </strong>- sets the default client character set </li><br /> <li><strong>ssl_set </strong>- sets ssl parameters </li><br /> <li><strong>stat </strong>- gets the current system status </li><br /> <li><strong>stmt_init</strong> – initializes a statement for use with mysqli_stmt_prepare </li><br /> <li><strong>store_result </strong>- transfers a resultset from last query </li><br /> <li><strong>thread_safe </strong>- returns whether thread safety is given or not </li><br /> <li><strong>use_result </strong>- transfers an unbuffered resultset from last query </li></ul><br /><br /><p><strong>mysqli Class properties:</strong></p><br /><ul><br /> <li><strong>affected_rows </strong>- gets the number of affected rows in a previous MySQL operation </li><br /> <li><strong>client_info </strong>- returns the MySQL client version as a string </li><br /> <li><strong>client_version </strong>- returns the MySQL client version as an integer </li><br /> <li><strong>errno </strong>- returns the error code for the most recent function call </li><br /> <li><strong>error </strong>- returns the error string for the most recent function call </li><br /> <li><strong>field_count </strong>- returns the number of columns for the most recent query </li><br /> <li><strong>host_info </strong>- returns a string representing the type of connection used </li><br /> <li><strong>info </strong>- retrieves information about the most recently executed query </li><br /> <li><strong>insert_id </strong>- returns the auto generated id used in the last query </li><br /> <li><strong>protocol_version </strong>- returns the version of the MySQL protocol used </li><br /> <li><strong>server_info </strong>- returns a string that represents the server version number </li><br /> <li><strong>server_version </strong>- returns the version number of the server as an integer </li><br /> <li><strong>sqlstate </strong>- returns a string containing the SQLSTATE error code for the last error </li><br /> <li><strong>thread_id </strong>- returns the thread ID for the current connection </li><br /> <li><strong>warning_count </strong>- returns the number of warnings generated during execution of the previous SQL statement </li><br /></ul><br /><p>The best way to explain the usage of the mysqli class is to show by example. There are too many methods and properties to go over in this tutorial, so I will only give examples of some.</p><br /><p>It’s important to note that some of these methods listed, aren’t methods at all. For instance, if you wanted to get the client library version of MySQL, you would use mysqli_get_client_version(), which returns the integer version. Here is an example:</p><br /><pre class="brush: php;"><?php<br />printf("Client version: %d\n", mysqli_get_client_version());<br />?></pre><br /><p>You are forced to use the functions since there is no need for the connection to the actual database.</p><br /><p>You have already seen the usage of the mysql_result connection from the mysqli class, so let’s go over some more examples:</p><br /><p><strong>Getting some info on the result from the mysql database:</strong></p><br /><pre class="brush: php;"><?php<br />$mysqli = new mysqli('localhost','db_user','my_password','mysql');<br />// Get all the MySQL users and their hosts<br />$sql = "SELECT user, host FROM user";<br />// If the query goes through<br />if ($result = $mysqli->query($sql)) {<br />// If there are some results<br />if ($result->num_rows > 0) {<br />// Let's show some info<br />echo 'There were '.$result->num_rows.' rows returned.<br />';<br />echo 'We selected '.$result->field_count.' fields in our query.<br />';<br />echo 'Our thread ID is '.$mysqli->thread_id.'<br />';<br />// Ok, let's show the data<br />while ($row = $result->fetch_object()) {<br />echo 'Username: '.$row->user.' :: Host: '.$row->host.'<br />';<br />} // end while loop<br />} else {<br />echo 'There are no results to display. Odd how we connected to this database and there are no users.';<br />} // end else<br />} else {<br />// Notice the error would be within the mysqli class, rather than mysql_result<br />printf("There has been an error from MySQL: %s",$mysqli->error);<br />} // end else<br />// Close the DB connection<br />$mysqli->close();<br />?></pre><br /><p>Here we used some common methods and properties to test and display information. Next week we will go over prepared statements and how they might assist in your scripts.</p><br /><p>If you have any questions regarding MySQLi, please feel free to put comments and I will answer them soon.</p><br /><p>– Will</p> <div class="blogger-post-footer">View more detail at: http://website20.blogspot.com</div>subhttp://www.blogger.com/profile/14422629553615373642noreply@blogger.com0tag:blogger.com,1999:blog-8646151458037113764.post-76260831940888673782011-07-22T10:37:00.001+07:002011-07-25T11:02:27.002+07:00WordPress Quick Tip: Remove The Dashboard Update Message<p><a href="http://lh6.ggpht.com/-sn2-tO_KCDg/TijwhxfihhI/AAAAAAAAAA8/O5d_r7dVs_A/s1600-h/update200x200%25255B5%25255D.jpg"><img style="border-right-width: 0px; margin: 0px 10px 0px 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="update200x200" border="0" alt="update200x200" align="left" src="http://lh3.ggpht.com/-9bnzfrs8Gvo/TijwizcD3kI/AAAAAAAAABA/sEOFyIu6alA/update200x200_thumb%25255B3%25255D.jpg?imgmax=800" width="204" height="204" /></a> A particularly useful function of WordPress is that it informs you when a new update is available to download. This is displayed at the top of your WordPress admin panel and provides a link to the update page where you can automatically install the new available version. </p> <p>Updating your WordPress installation is important because the latest version will likely contain security updates and will give you access to any new functionality that has been developed. </p> <p>However, there are occasions where you might not want this message to displayed – for example, if you’re building a WordPress site for a client, you might want to remove the message to stop them from updating the site themselves. </p> <p><a href="http://lh3.ggpht.com/-1oyJcFTVGGg/TijwjjPoriI/AAAAAAAAABE/tYlmnu47TXI/s1600-h/update%25255B4%25255D.jpg"><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="update" border="0" alt="update" src="http://lh4.ggpht.com/-AdtrImLND5o/Tijwk9lw3pI/AAAAAAAAABI/SsQQiE-kZPw/update_thumb%25255B2%25255D.jpg?imgmax=800" width="317" height="304" /></a> </p> <p>This is because sometimes it’s best to initially test the effects of a new WordPress update locally to ensure that it doesn’t cause the site any problems – it’s not unusual to have configuration issues with plugins that cause the website not to display or work properly. </p> <p>Removing the update message is very straightforward to do – simply add the following lines of code to your functions.php file:</p> <pre class="brush: php;">remove_action('wp_version_check', 'wp_version_check');<br />remove_action('admin_init', '_maybe_update_core');<br />add_filter('pre_transient_update_core', create_function( '$a', "return null;"));</pre><br /><br /><br /><p>With wordpress 3.x, we should be using an other way:</p><br /><p>go to: <strong>wp-admin/includes/update.php</strong></p><br /><p>Search:</p><br /><pre class="brush: php;">add_action( 'admin_notices', 'update_nag', 3 );</pre><br /><p>Replace to:</p><br /><pre class="brush: php;">//add_action( 'admin_notices', 'update_nag', 3 );</pre><br /> <br /><br /><p>Then check your WordPress admin panel and you should see that the message has disappeared. </p><br /><p>Whilst this removes the update message, please make sure that you still update to the latest version when it becomes available. Not doing so can leave you vulnerable to security risks, so make sure you’re aware of when new versions are released and ensure that you apply the update. </p><br /><p>I hope you found this tip helpful – let me know if you have any questions or comments. </p><br /><div class="blogger-post-footer">View more detail at: http://website20.blogspot.com</div> <div class="blogger-post-footer">View more detail at: http://website20.blogspot.com</div>subhttp://www.blogger.com/profile/14422629553615373642noreply@blogger.com0tag:blogger.com,1999:blog-8646151458037113764.post-71383944707341298152011-04-13T17:23:00.000+07:002011-04-13T17:23:23.322+07:00Install Mac OS X On Toshiba Satellite A205-S5804<a href="http://1.bp.blogspot.com/_MJuNNxlTQKY/SVl0c3TusMI/AAAAAAAAAIg/rvuF0JTNctM/s1600-h/Satellite+A205-S5804.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5285383676927848642" src="http://1.bp.blogspot.com/_MJuNNxlTQKY/SVl0c3TusMI/AAAAAAAAAIg/rvuF0JTNctM/s320/Satellite+A205-S5804.jpg" style="cursor: pointer; float: left; height: 250px; margin: 0pt 10px 10px 0pt; width: 320px;" /></a><br />Hopefully i can do this here...<br /><br />It’s finally here! Down to earth, simple to read, simple to understand tutorial on how to install Mac OS X on Toshiba Satellite A205-S5804 model. If you read my previous article on this subject, you know that it is possible mainly because of Apple’s move to Intel chips. (Wait, did I write about it before?) Anyway, I did a lot of research and have come to believe that Toshiba Satellite is one of the easiest laptops to get Mac OS X working. And by working I mean full video support, sound, Wi-Fi, Ethernet, usb ports, sound adjuster, battery meter, restart and shutdown. Plus, you can run it all on vanilla kernel (original apple kernel).<br /><br />Toshiba laptops are relatively cheap. Besides, if you want to spend lots of money just to create ‘hackintosh’, I suggest you buying a real Mac instead. Why? Simply because OS X was designed to run on Apple hardware. You won’t have any issues or problems if you run major software update straight from the Apple Software Update. But if you do the same thing on the Toshiba for example, you might get ‘spinning circle of death’ (ha ha, you never heard of the term 'spinning cirlce of death?; you heard 'blue screen of death', havent you?) after reboot. Some can argue that it’s not a big deal if you use modified updates from hackers (good ones) however, you must be willing to spend some time getting your system up to date. (Honestly, it’s not a big deal.)<br /><br />This tutorial is for educational purposes only. You, of course, assume all responsibility for choosing to follow this tutorial. Also, OS X EULA states that you can run Leopard on Apple labeled hardware only.<br /><br />Let’s get to work. As I said I use Toshiba Satellite A205-5804. A little of specifications won’t hurt. So here you go, download it from <a href="http://www.mediafire.com/?ygkfm98yuht" rel="nofollow" target="_blank">here.</a><br /><br />You will need a modified OS X installation DVD with modified boot loader. It will allow you to load, and install OS X with no problems. This is the result of BIOS not being able to recognize Retail OS X DVD as bootable. For this install, I use ‘leo4allv3’.<br /><b><br />Here is what you need:</b><br />• Leo4allv3 (Google it)<br />• Drivers (Kext) – <a href="http://www.mediafire.com/?ydocxxut1zp" rel="nofollow" target="_blank">here.</a><br />• Kalyway 10.5.3 Combo Update with Kernel package (dont ask me where to find it, Google it)<br /><br /><b>1. Burn your leo4allv3 ISO to a DVD</b><br /><b><br />2. Changing BIOS Settings:</b><br />• In BIOS settings, make sure DVD drive is selected as the first booting device. This is required in order to install OS X. No need to change anything else.<br /><b><br />3. Booting/Installing leo4allv3:</b><br />• Place your leo4allv3 DVD into DVD drive and turn on/restart your laptop.<br />• At the Darwin prompt, you will read this: “Press any key to start from CD-Rom, or press F8 to enter start up options…” You need to press F8 and type ‘-v’ (without ‘) and press ‘Enter’ to load OS X in verbose mode. After few minutes you should see a window with a choice of different languages. Choose your own and click on ‘next’ button.<br />• After you see a ‘Welcome Screen’, make sure you don’t click on ‘Continue’ button yet. You need to format your hard drive first. Go to ‘Utilities → Disc utility’. (You should be able to see ‘Utilities’ option on the top bar.)<br />• Select your hard drive at the top left corner and click on ‘Erase’ tab (located in the middle of the window).<br />• Choose ‘Mac OS Extended (Journaled)’ from the drop down menu of ‘Volume Format’ and click on ‘Erase’ button. Confirm the erase command.<br />• Click on ‘Partition’ tab and in the ‘Volume Scheme’ drop down menu choose – 1 Partition. In the Name field type ‘OSX’. Leave the format option to ‘Mac OS Extended (Journaled).<br />• Now, click on ‘Options’ button at the bottom left corner and choose ‘Master Boot Record’ (MBR), click on OK and hit ‘Apply’ at the main ‘Disk Utility’ window. Confirm the creation of the ‘OSX’ partition. Wait few moments as ‘Disk Utility’ works its way through.<br />• Close ‘Disk Utility’ by clicking on the red dot at the top of the ‘Disk Utility’ window. You are back to the ‘Welcome’ screen.<br />• Click on ‘Continue’ button and hit ‘Agree’.<br />• Select destination hard drive – OSX and click on ‘Continue’.<br />• Click on ‘Customize’ button just before you click on ‘Install’ at 'Install Summary' window.<br />• Choose these packages: Under Audio, choose Azalia Audio; under Chipset, don’t select anything; under Kernel option, choose 9.2.0 sleep; under (SMBIOS), choose Apple SMBIOS 667; under Video choose GMAX3100; under Applications, choose all; select Remove Firewire; select Power Management for laptops; select About This Mac; Click on ‘Done’ button.<br />• After you get back to ‘Install Summary’, click on ‘Install’ (you can skip checking install DVD by hitting ‘skip’ button).<br />• Installing - wait. At some point it will look like the installation process got stock, its normal. Just wait.<br />• After you see ‘Install Succeeded’ window, click on ‘Restart’ button.<br /><br /><b>4. Fixing minor bugs:</b><br />Note: Don’t let OS X boot normally, it will most likely get stuck on a cycled reboot at ‘Transfer Your Information Window’ later, during account setup. Instead Press F8 at Darwin boot prompt and type: -v –s (hit enter);<br />• After you see ‘root#’, type ‘/sbin/fsck –fy’ and hit ‘Enter’ Type /sbin/mount -uw / and hit ‘Enter’ again. (it’s going to take a little time to run script, wait)<br />• Type ‘touch /var/db/.AppleSetupDone’ and hit Enter;<br />• You will need to set up password for root, type: passwd (yes, passwd) and hit enter; choose your password.<br />Note: when you log in for the first time, your user name will be: root and password is the one you set up.<br />• Now, after you log in, set up your personal account. (It’s not recommended to use ‘Root Account’) Under Settings User Account, you will have an option of creating an account, do that.<br />• As you see, you DVD drive don’t show up, you will have to fix it. There is a driver in ‘Driver Folder’ you downloaded earlier called ‘IOATAFamily.kext_V1.1’, open it and install it with KextHelper. (Google it)<br />• If you want to change default Verbose Loading mode to Regular, do this: go to /Library/Preferences/SystemConfiguration/com.apple.Boot.plist. Open it with BBEdit delete ‘-v’ from the list and it will boot normally.<br />• To fix Wi-Fi, install rtl8187b drive from the Drivers folder. Restart if needed. Go to 'system/library/extensions folder and find rtl8187.kext' Open it with TextMate and find this line: <integer>33161</integer> and change numbers to 33175. Restart your computer. (Don’t freak out if you don’t see your Wi-Fi connection yet, you will have to install 10.5.3 combo update to make it work as it should!)<br /><br /><b>5. Updating to 10.5.3:</b><br />• Open your folder with Kalyway 10.5.3 Combo Update, and double click on Kalyway UpdCombo10.5.3.pkg to initiate install. Confirm it by entering your password. Note: Do not click on ‘Restart’ after successful install, as it most likely give you lots of problems on boot. Rather leave the window open and navigate to ‘Kalyway10.5.3 Kernel’ (it should have been in the same folder with kalyway combo update). Double click on it to open the installer, and install it WITHOUT selecting any kernel versions. Close the window, get back to 10.5.3 Combo Update window and click on ‘Restart’. (You should be able to restart successfully)<br />• Power management will not work after 10.5.3 update. To make it work, install Power Management 10.5.3 fix from drivers’ folder.<br /><br /><b>6. Updating to 10.5.4:</b><br />• Navigate to Apple Software Update from your desktop by clicking on ‘Apple’ logo at the top left corner and choosing ‘Software Update’. It will check if your system is up to date, which of course not, so it will show you that 10.5.4 is available. Install it and reboot. Now you should have completely working ‘Mac’ running on latest OS X.<br /><br />Congratulations on your 100% working ToshiMac!!! If you found this article interesting, please leave a comment. By the way comments are always welcome, so please take 30 seconds of your time to write one. If you want to share your experience, please do so by writing below.<div class="blogger-post-footer">View more detail at: http://website20.blogspot.com</div>Blogger Blogspothttp://www.blogger.com/profile/10711341003772554009noreply@blogger.com0tag:blogger.com,1999:blog-8646151458037113764.post-15499314298152528982011-02-17T10:11:00.001+07:002011-02-17T10:11:32.645+07:00Simple Bookmark Script using jQuery<h4>Introduction:</h4> <p>Below is the simple Bookmark script, which has been implemented using jQuery, this might help most of the people to bookmark your respective webpages / blogs. I have tested the application in Mozilla Firefox (Latest Version – 3.0.10), IE 7 & 8, Google Chrome. Simple code to understand and to implement, I am sure its going to help most of the people to save your website / blog url to their favorites. For this to achieve we need jQuery library file, so please download the same from jQuery Site that is <a href="http://www.jquery.com">http://www.jquery.com</a></p> <h4>jQuery Code:</h4> <pre class="brush: xml;"><script language="javascript" type="text/javascript"><br />$(document).ready(function(){<br />$("a.jQueryBookmark").click(function(e){<br /> e.preventDefault(); // this will prevent the anchor tag from going the user off to the link<br /> var bookmarkUrl = this.href;<br /> var bookmarkTitle = this.title;<br /> <br /> if (window.sidebar) { // For Mozilla Firefox Bookmark<br /> window.sidebar.addPanel(bookmarkTitle, bookmarkUrl,"");<br /> } else if( window.external || document.all) { // For IE Favorite<br /> window.external.AddFavorite( bookmarkUrl, bookmarkTitle);<br /> } else if(window.opera) { // For Opera Browsers<br /> $("a.jQueryBookmark").attr("href",bookmarkUrl);<br /> $("a.jQueryBookmark").attr("title",bookmarkTitle);<br /> $("a.jQueryBookmark").attr("rel","sidebar");<br /> } else { // for other browsers which does not support<br /> alert('Your browser does not support this bookmark action');<br /> return false;<br /> }<br />});<br />});<br /></script></pre><br /><h4>HTML Code</h4><br /><pre class="brush: xml;"><h2>Click on the respective links below to bookmark the same</h2><br /><a href="http://www.tailoc.net" title="tailoc.net" class="jQueryBookmark">Website Design</a></pre> <div class="blogger-post-footer">View more detail at: http://website20.blogspot.com</div>Blogger Blogspothttp://www.blogger.com/profile/10711341003772554009noreply@blogger.com0tag:blogger.com,1999:blog-8646151458037113764.post-41646196104078671712011-02-01T11:41:00.001+07:002011-02-01T11:41:24.944+07:0033 Powerful jQuery Slideshow (Sliders) Plugins and Tutorials<p><strong>jQuery</strong> has overpowered Flash in a lot of web uses becoming a very powerful tool for web designers. One of these uses that I’m referring to is the<strong> image slider</strong>. Implementing this feature in your site will definitely count as a big plus so don’t waste your time and download the available jQuery plugins in this <strong>30 Powerful jQuery Slideshow (Sliders) Plugins and Tutorials</strong>.</p> <p>You’ve probably noticed that a lot of websites lately have a featured area with content that slides or changes in some way. This is a great technique to show several pieces of content in a limited amount of space and a good way to engage the user.Content sliders are a great way to show large amount of content or images on a smaller area in a website or blog. They are commonly used in portfolio sites, corporate sites or blogs. You may probably heard that jQuery isn’t very hard to learn. If you are interested in implementing a content slider in your website please check our jQuery tutorials and plugins collection.</p> <h4>Powerful jQuery Slider Plugins and Tutorials</h4> <h5>Minimalistic Slideshow Gallery</h5> <p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="slider_1" border="0" alt="slider_1" src="http://lh4.ggpht.com/_0PvhOKqmvtI/TUeO5NNgiaI/AAAAAAAABXo/IQRFHH4rgCg/slider_1%5B6%5D.jpg?imgmax=800" width="475" height="200" /> </p> <p>In this tutorial we will create a simple and beautiful slideshow gallery that can be easily integrated in your web site. The idea is to have a container with our slideshow and the options to view a grid of thumbnails, pause the slideshow, and navigate through the pictures. The thumbnail grid will slide out from the top and allow the user to navigate through a set of thumbnails.</p> <p><a href="http://tympanus.net/codrops/2010/07/05/minimalistic-slideshow-gallery/">Slider Details</a> <a href="http://tympanus.net/Tutorials/MinimalisticSlideshowGallery/MinimalisticSlideshowGallery.zip">Download Script</a></p> <hr /> <h5>Advanced jQuery background image slideshow</h5> <p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="slider_2" border="0" alt="slider_2" src="http://lh6.ggpht.com/_0PvhOKqmvtI/TUeO6IdKNjI/AAAAAAAABXs/FpF7NM1h5Z8/slider_2%5B5%5D.jpg?imgmax=800" width="479" height="204" /> </p> <p>With the use of transparent PNG’s, some HTML, pretty nifty CSS and jQuery, we can make this technique work. Read the rest of this article to learn how to create a beautiful advanced jQuery background image slideshow.</p> <p><a href="http://www.marcofolio.net/webdesign/advanced_jquery_background_image_slideshow.html">Slider Details</a> <a href="http://www.marcofolio.net/downloads/webdesign/jquery_background_image_slideshow/download.html">Download Script</a></p> <hr /> <h5>Fancy transitions effects</h5> <p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="slider_3" border="0" alt="slider_3" src="http://lh3.ggpht.com/_0PvhOKqmvtI/TUeO7L4n-gI/AAAAAAAABXw/8hZ1n01yxlA/slider_3%5B5%5D.jpg?imgmax=800" width="479" height="204" /> </p> <p>Main idea was to build some ’strip curtain’ effect and I start from that. But, while I was building this some other effects just pop up and I decided to adjust code and include some of those effects. Now, there are ‘wave’, ‘zipper’ and ‘curtain’ effect, plus options that can be used for custom effect. </p> <p><a href="http://workshop.rs/2009/12/image-gallery-with-fancy-transitions-effects/">Slider Details</a> <a href="http://workshop.rs/projects/jqfancytransitions">Slider Demo</a> <a href="http://code.google.com/p/jqfancytransitions/downloads/list">Download Script</a></p> <hr /> <h5>jQuery Blinds</h5> <p><a href="http://blog.tailoc.net"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="slider_4" border="0" alt="slider_4" src="http://lh4.ggpht.com/_0PvhOKqmvtI/TUeO8LH8lXI/AAAAAAAABX0/YWbPH7be2cQ/slider_4%5B6%5D.jpg?imgmax=800" width="479" height="204" /></a> </p> <p>jQuery Blinds Slideshow using CSS Sprites.</p> <p><a href="http://www.littlewebthings.com/projects/blinds/">Slider Details</a> <a href="http://www.littlewebthings.com/projects/blinds/">Slider Demo</a> <a href="http://www.littlewebthings.com/projects/blinds/">Download Script</a></p> <hr /> <h5>Making a Mosaic Slideshow With jQuery & CSS</h5> <p><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="slider_5" border="0" alt="slider_5" src="http://lh6.ggpht.com/_0PvhOKqmvtI/TUeO8iw8ZZI/AAAAAAAABX4/HXa5zpaeFGo/slider_5%5B5%5D.jpg?imgmax=800" width="479" height="204" /> </p> <p>When designing a product page, it is often necessary to present a number of images in a succession, also known as a slideshow. With the raise of the jQuery library and its numerous plugins, there is an abundance of ready-made solutions which address this problem.</p> <p><a href="http://tutorialzine.com/2010/03/mosaic-slideshow-jquery-css/">Slider Details</a> <a href="http://demo.tutorialzine.com/2010/03/mosaic-slideshow-jquery-css/demo.html">Slider Demo</a> <a href="http://demo.tutorialzine.com/2010/03/mosaic-slideshow-jquery-css/demo.zip">Download Script</a></p> <hr /> <h5>The Lof JSiderNews Plugin</h5> <p><a href="http://landofcoder.com/our-porfolios/jquery-plugins/item/10-the-lof-jsidernews-plugin.html"><img alt="Powerful jQuery Slider Plugins and Tutorials" src="http://media.themeflash.com/powerjquery/slider_6.jpg" /></a></p> <p>Base on the Jquery Framework and the Easing Plugin, The JSiderNews Plugin is a slideshow plugin that displaying images or type of content and support favious navigation to previous|next items.</p> <p><a href="http://landofcoder.com/our-porfolios/jquery-plugins/item/10-the-lof-jsidernews-plugin.html">Slider Details</a> <a href="http://landofcoder.com/demo/jquery/lofslidernews/index2.html">Slider Demo</a> <a href="http://landofcoder.com/download.html?task=view.download&cid=9">Download Script</a></p> <hr /> <h5>Blinds-effect Slideshow</h5> <p><a href="http://blog.olicio.us/2009/07/25/floom/"><img alt="Powerful jQuery Slider Plugins and Tutorials" src="http://media.themeflash.com/powerjquery/slider_7.jpg" /></a></p> <p>There are two ways of setting Floom up. One is the object way, where you specify the image url and the caption using the key-value notation.</p> <p><a href="http://blog.olicio.us/2009/07/25/floom/">Slider Details</a> <a href="http://nouincolor.com/floom/1.1/Demos">Slider Demo</a> <a href="http://github.com/oskarkrawczyk/floom/">Download Script</a></p> <hr /> <h5>Slideshow plugin for the Tabs</h5> <p><a href="http://flowplayer.org/tools/demos/tabs/slideshow.html"><img alt="Powerful jQuery Slider Plugins and Tutorials" src="http://media.themeflash.com/powerjquery/slider_8.jpg" /></a></p> <p>Here you can see a slideshow plugin in action. Click on the arrow buttons, navigator or the content area to navigate through the slides. You can also enable the automatic slideshow by pressing the “play” button below the slides.</p> <p><a href="http://flowplayer.org/tools/demos/tabs/slideshow.html">Slider Details</a> <a href="http://flowplayer.org/tools/demos/tabs/slideshow.html">Slider Demo</a> <a href="http://flowplayer.org/tools/demos/tabs/slideshow.html">Download Script</a></p> <hr /> <h5>Slideshow plugin for the Tabs</h5> <p><a href="http://jqueryglobe.com/article/multiple-image-cross-fade"><img alt="Powerful jQuery Slider Plugins and Tutorials" src="http://media.themeflash.com/powerjquery/slider_9.jpg" /></a></p> <p>we learn how to fade list of images through each other in continuous loop. We will also add captions and tooltips to make it more usable. This simple effect is ideal for portfolio websites, galleries or magazines where images need to be seen. </p> <p><a href="http://jqueryglobe.com/article/multiple-image-cross-fade">Slider Details</a> <a href="http://jqueryglobe.com/labs/fading_images/">Slider Demo</a> <a href="http://jqueryglobe.com/labs/fading_images/fading_images.zip">Download Script</a></p> <hr /> <h5>loopedCarousel</h5> <p><a href="http://nathansearles.com/loopedcarousel/"><img alt="Powerful jQuery Slider Plugins and Tutorials" src="http://media.themeflash.com/powerjquery/slider_10.jpg" /></a></p> <p><a href="http://nathansearles.com/loopedcarousel/">Slider Details</a> <a href="http://nathansearles.com/loopedcarousel/example-4.html">Slider Demo</a> <a href="http://github.com/nathansearles/loopedCarousel/">Download Script</a></p> <hr /> <h5>Supersized 2.0</h5> <p><a href="http://buildinternet.com/2009/05/supersized-20-full-screen-imagebackground-slideshow-jquery-plugin-w-transitions-and-controls/"><img alt="Powerful jQuery Slider Plugins and Tutorials" src="http://media.themeflash.com/powerjquery/slider_11.jpg" /></a></p> <p><a href="http://buildinternet.com/2009/05/supersized-20-full-screen-imagebackground-slideshow-jquery-plugin-w-transitions-and-controls/">Slider Details</a> <a href="http://buildinternet.com/project/supersized/default.php">Slider Demo</a> <a href="http://github.com/nathansearles/loopedCarousel/">Download Script</a></p> <hr /> <h5>jQuery Carousel</h5> <p><a href="http://thomlx.free.fr/jquery/jquery_carousel.htm"><img alt="Powerful jQuery Slider Plugins and Tutorials" src="http://media.themeflash.com/powerjquery/slider_12.jpg" /></a></p> <p><a href="http://thomlx.free.fr/jquery/jquery_carousel.htm">Slider Details</a> <a href="http://thomlx.free.fr/jquery/jquery_carousel.htm">Slider Demo</a> <a href="http://thomlx.free.fr/js/jquery.carousel.min.js">Download Script</a></p> <hr /> <h5>Create a jQuery Carousel with WordPress Posts</h5> <p><a href="http://armeda.com/how-to-create-a-jquery-carousel-with-WordPress-posts/"><img alt="Powerful jQuery Slider Plugins and Tutorials" src="http://media.themeflash.com/powerjquery/slider_13.jpg" /></a></p> <p><a href="http://armeda.com/how-to-create-a-jquery-carousel-with-WordPress-posts/">Slider Details</a> <a href="http://demo.armeda.com/">Slider Demo</a> <a href="http://wordpress.org/extend/themes/wordousel-lite">Download Script</a></p> <hr /> <h5>Create a Simple Infinite Carousel with jQuery</h5> <p><a href="http://www.queness.com/post/923/create-a-simple-infinite-carousel-with-jquery"><img alt="Powerful jQuery Slider Plugins and Tutorials" src="http://media.themeflash.com/powerjquery/slider_14.jpg" /></a></p> <p>This tutorial will show you how to create a infinite carousel script with jQuery. It also have a simple autorotate script that will rotate items in the carousel. </p> <p><a href="http://www.queness.com/post/923/create-a-simple-infinite-carousel-with-jquery">Slider Details</a> <a href="http://www.queness.com/resources/html/carousel/index.html">Slider Demo</a> <a href="http://www.queness.com/resources/archives/jquery-carousel.zip">Download Script</a></p> <hr /> <h5>jQuery Infinite Carousel-version 2</h5> <p><a href="http://www.catchmyfame.com/2009/12/30/huge-updates-to-jquery-infinite-carousel-version-2-released/"><img alt="Powerful jQuery Slider Plugins and Tutorials" src="http://media.themeflash.com/powerjquery/slider_15.jpg" /></a></p> <p><a href="http://www.catchmyfame.com/2009/12/30/huge-updates-to-jquery-infinite-carousel-version-2-released/">Slider Details</a> <a href="http://www.catchmyfame.com/2009/12/30/huge-updates-to-jquery-infinite-carousel-version-2-released/">Slider Demo</a> <a href="http://www.catchmyfame.com/jquery/jquery.infinitecarousel2.zip">Download Script</a></p> <hr /> <h5>Agile Carousel</h5> <p><a href="http://www.agilecarousel.com/"><img alt="Powerful jQuery Slider Plugins and Tutorials" src="http://media.themeflash.com/powerjquery/slider_16.jpg" /></a></p> <p>Agile Carousel is a JQuery Plugin. The JQuery AJAX function is used to deliver settings to the included PHP script “make_slides.php”, which you do not need to modify. The PHP script uses the requested settings to custom-build an image carousel. The carousel html is then placed to the html document within the container you specify.</p> <p><a href="http://www.agilecarousel.com/">Slider Details</a> <a href="http://www.agilecarousel.com/">Slider Demo</a> <a href="http://agile-carousel.googlecode.com/files/jquery.agile_carousel-beta.2.0.zip">Download Script</a></p> <hr /> <h5>jQuery Multimedia Portfolio</h5> <p><a href="http://www.openstudio.fr/jQuery-Multimedia-Portfolio.html?lang=en"><img alt="Powerful jQuery Slider Plugins and Tutorials" src="http://media.themeflash.com/powerjquery/slider_17.jpg" /></a></p> <p>This plugin for jQuery will automatically detect the extension of each media and apply the adapted player.</p> <p><a href="http://www.openstudio.fr/jQuery-Multimedia-Portfolio.html?lang=en">Slider Details</a> <a href="http://www.openstudio.fr/jquery/">Slider Demo</a> <a href="http://www.openstudio.fr/download/jquery.multimedia-portfolio.zip">Download Script</a></p> <hr /> <h5>Ajax Search – Carousel</h5> <p><a href="http://www.billwscott.com/carousel/updates.html#downloading"><img alt="Powerful jQuery Slider Plugins and Tutorials" src="http://media.themeflash.com/powerjquery/slider_18.jpg" /></a></p> <p><a href="http://www.billwscott.com/carousel/updates.html#downloading">Slider Details</a> <a href="http://www.billwscott.com/carousel/updates.html#downloading">Slider Demo</a> <a href="http://www.billwscott.com/carousel/carousel-1.0.zip">Download Script</a></p> <hr /> <h5>Create a Simple Slideshow using Mootools / JQuery</h5> <p><a href="http://www.nitinh.com/2010/03/how-to-create-a-simple-slideshow-using-mootools-jquery/"><img alt="Powerful jQuery Slider Plugins and Tutorials" src="http://media.themeflash.com/powerjquery/slider_19.jpg" /></a></p> <p>In this post i’ll walk you through the process of making a very simple(minimilistic) slideshow using Mootools / Jquery.</p> <p><a href="http://www.nitinh.com/2010/03/how-to-create-a-simple-slideshow-using-mootools-jquery/">Slider Details</a> <a href="http://www.nitinh.com/static/SlideShow/jquery.html">Slider Demo</a> <a href="http://www.nitinh.com/static/SlideShow/SlideShow-JQuery.zip">Download Script</a></p> <hr /> <h5>Lateral Slider</h5> <p><a href="http://www.lateralcode.com/lateral-slider/"><img alt="Powerful jQuery Slider Plugins and Tutorials" src="http://media.themeflash.com/powerjquery/slider_21.jpg" /></a></p> <p>Slider – The easiest known way to showcase your images and photos on the web in style.</p> <p><a href="http://www.lateralcode.com/lateral-slider/">Slider Details</a> <a href="http://codecanyon.net/item/lateral-slider-jquery-plugin-with-13-transitions/full_screen_preview/109908?ref=system32">Slider Demo</a> <a href="http://codecanyon.net/item/lateral-slider-jquery-plugin-with-13-transitions/109908?ref=system32">Download Script</a></p> <hr /> <h5>Horinaja</h5> <p><a href="http://www.davidmassiani.com/horinajapro/"><img alt="Powerful jQuery Slider Plugins and Tutorials" src="http://media.themeflash.com/powerjquery/slider_22.jpg" /></a></p> <p>Horinaja is a slide-show ready-to-use for scriptaculous/prototype or jQuery.</p> <p><a href="http://www.davidmassiani.com/horinajapro/">Slider Details</a> <a href="http://www.davidmassiani.com/horinajapro/">Slider Demo</a> <a href="http://www.davidmassiani.com/horinajapro/download.php">Download Script</a></p> <hr /> <h5>Gradually</h5> <p><a href="http://holyshared.github.com/Gradually/index.html"><img alt="Powerful jQuery Slider Plugins and Tutorials" src="http://media.themeflash.com/powerjquery/slider_23.jpg" /></a></p> <p>Gradually offers API, a slide show, and a thumbnail gallery using ImageDrawer.</p> <p><a href="http://holyshared.github.com/Gradually/index.html">Slider Details</a> <a href="http://holyshared.github.com/Gradually/index.html">Slider Demo</a> <a href="http://github.com/holyshared/Gradually/zipball/2.0">Download Script</a></p> <hr /> <h5>Simple jQuery slideshow bubble messages</h5> <p><a href="http://breakthebit.org/post/467761889/simple-jquery-slideshow-bubble-messages"><img alt="Powerful jQuery Slider Plugins and Tutorials" src="http://media.themeflash.com/powerjquery/slider_24.jpg" /></a></p> <p><a href="http://breakthebit.org/post/467761889/simple-jquery-slideshow-bubble-messages">Slider Details</a> <a href="http://breakthebit.org/post/467761889/simple-jquery-slideshow-bubble-messages">Slider Demo</a> <a href="http://breakthebit.org/post/467761889/simple-jquery-slideshow-bubble-messages">Download Script</a></p> <hr /> <h5>Sexy Slider</h5> <p><a href="http://s3.envato.com/files/351371/index.html"><img alt="Powerful jQuery Slider Plugins and Tutorials" src="http://media.themeflash.com/powerjquery/slider_25.jpg" /></a></p> <p>SexySlider is a JQuery plugin that lets you easily create powerful javascript Sliders with very nice transition effects. Enhance your website by adding a unique and attractive slider!</p> <p><a href="http://s3.envato.com/files/351371/index.html">Slider Details</a> <a href="http://codecanyon.net/item/sexy-slider/full_screen_preview/87148?ref=system32">Slider Demo</a> <a href="http://codecanyon.net/item/sexy-slider/87148?ref=system32">Download Script</a></p> <hr /> <h5>siteFeature</h5> <p><a href="http://s3.envato.com/files/376136/index.html"><img alt="Powerful jQuery Slider Plugins and Tutorials" src="http://media.themeflash.com/powerjquery/slider_26.jpg" /></a></p> <p>siteFeature is an unobtrusive jQuery plugin that simplifies the creation of an interactive “Featured Items” widget.</p> <p><a href="http://s3.envato.com/files/376136/index.html">Slider Details</a> <a href="http://codecanyon.net/item/sitefeature/full_screen_preview/53896?ref=system32">Slider Demo</a> <a href="http://codecanyon.net/item/sitefeature/53896?ref=system32">Download Script</a></p> <hr /> <h5>DDSlider – 10 Transitions – Inline Content Support</h5> <p><a href="http://s3.envato.com/files/339668/index.html#"><img alt="Powerful jQuery Slider Plugins and Tutorials" src="http://media.themeflash.com/powerjquery/slider_27.jpg" /></a></p> <p>DDSlider introduces a new easy-to-go slider with 9 different unique transitions (+fading & random—11 total) that support Inline Content. You can also have multiple sliders in the same page</p> <p><a href="http://s3.envato.com/files/339668/index.html#">Slider Details</a> <a href="http://codecanyon.net/item/ddslider-10-transitions-inline-content-support/full_screen_preview/104797?ref=system32">Slider Demo</a> <a href="http://codecanyon.net/item/ddslider-10-transitions-inline-content-support/104797?ref=system32">Download Script</a></p> <hr /> <h5>AviaSlider – jQuery Slideshow</h5> <p><a href="http://s3.envato.com/files/339088/index.html"><img alt="Powerful jQuery Slider Plugins and Tutorials" src="http://media.themeflash.com/powerjquery/slider_28.jpg" /></a></p> <p>AviaSlider is a very flexible and easy to use Image slideshow plugin for jQuery with a set of really unique transitions that were nver available before, as well as some basic transitions, so the slider will fit into every project.</p> <p><a href="http://s3.envato.com/files/339088/index.html">Slider Details</a> <a href="http://codecanyon.net/item/aviaslider-jquery-slideshow/full_screen_preview/105090?ref=system32">Slider Demo</a> <a href="http://codecanyon.net/item/aviaslider-jquery-slideshow/105090?ref=system32">Download Script</a></p> <hr /> <h5>jQuery Banner Rotator / Slideshow</h5> <p><a href="http://s3.envato.com/files/1088592/index.html"><img alt="Powerful jQuery Slider Plugins and Tutorials" src="http://media.themeflash.com/powerjquery/slider_29.jpg" /></a></p> <p>This is a jQuery banner rotator plugin featuring multiple transitions. The thumbnails and buttons allow for easy navigation of your banners/ads. The banner rotator is also re-sizable and configurable through the plugin’s parameters. </p> <p><a href="http://s3.envato.com/files/1088592/index.html">Slider Details</a> <a href="http://codecanyon.net/item/jquery-banner-rotator-slideshow/full_screen_preview/109046?ref=system32">Slider Demo</a> <a href="http://codecanyon.net/item/jquery-banner-rotator-slideshow/109046?ref=system32">Download Script</a></p> <hr /> <h5>TinySlider</h5> <p><a href="http://forum.leigeber.com/index.php?app=downloads&showfile=8"><img alt="Powerful jQuery Slider Plugins and Tutorials" src="http://media.themeflash.com/powerjquery/slider_30.jpg" /></a></p> <p>This super lightweight (1.5 KB) sliding Javascript slideshow script can easily be customized to integrate with any website through CSS. You can add any content to it, not just images, and it gracefully degrades without Javascript support.</p> <p><a href="http://forum.leigeber.com/index.php?app=downloads&showfile=8">Slider Details</a> <a href="http://sandbox.leigeber.com/tinyslider/">Slider Demo</a> <a href="http://forum.leigeber.com/index.php?app=downloads&module=display&section=download&do=confirm_download&id=8&s=cb75d43990d938566b0af01561c1d662">Download Script</a></p> <hr /> <h5>Slideshow 2</h5> <p><a href="http://www.electricprism.com/aeron/slideshow/"><img alt="Powerful jQuery Slider Plugins and Tutorials" src="http://media.themeflash.com/powerjquery/slider_31.jpg" /></a></p> <p>Slideshow 2! is a javascript class for Mootools 1.2 to stream and animate the presentation of images on your website. This page features some examples of how Slideshow might be used to enhance the presentation of images on your website. Please view the source of this page for usage information.</p> <p><a href="http://www.electricprism.com/aeron/slideshow/">Slider Details</a> <a href="http://www.electricprism.com/aeron/slideshow/">Slider Demo</a> <a href="http://code.google.com/p/slideshow/">Download Script</a></p> <hr /> <h5>BlogSlideShow </h5> <p><a href="http://demo.dsheiko.com/blogslideshow/"><img alt="Powerful jQuery Slider Plugins and Tutorials" src="http://media.themeflash.com/powerjquery/slider_32.jpg" /></a></p> <p>BlogSlideShow is a free open-code JQuery plugin that enhances your blog pages with fancy image viewer, which provides nice transition effects including CSS3/HTML5-related ones.</p> <p><a href="http://demo.dsheiko.com/blogslideshow/">Slider Details</a> <a href="http://demo.dsheiko.com/blogslideshow/">Slider Demo</a> <a href="http://demo.dsheiko.com/blogslideshow/">Download Script</a></p> <hr /> <h5>PictureSlides</h5> <p><a href="http://www.robertnyman.com/picture-slides/"><img alt="Powerful jQuery Slider Plugins and Tutorials" src="http://media.themeflash.com/powerjquery/slider_33.jpg" /></a></p> <p>PictureSlides is a plugin for jQuery, and it is a highly customizable JavaScript-based way to easily turn your images into a collection viewable as a slideshow, and with fading effects, if desired.</p> <p><a href="http://www.robertnyman.com/picture-slides/">Slider Details</a> <a href="http://www.robertnyman.com/picture-slides/demo-packages/gallery/index.html">Slider Demo</a> <a href="http://code.google.com/p/pictureslides/downloads/list">Download Script</a></p> <hr /> <h5>CSS3 enhanced zoom-in zoom out slideshow </h5> <p><a href="http://www.fabulant.com/downloadcenter/imgzoomcss3/imgzoomcss3.html"><img alt="Powerful jQuery Slider Plugins and Tutorials" src="http://media.themeflash.com/powerjquery/slider_20.jpg" /></a></p> <p>This free copy and paste script adds a stylish CSS3 effect to your slideshow. Simply by setting the style attributes you can apply corners to any or all four image-corners, furthermore you can apply shadows. </p> <p><a href="http://www.fabulant.com/downloadcenter/imgzoomcss3/imgzoomcss3.html">Slider Details</a> <a href="http://www.fabulant.com/downloadcenter/imgzoomcss3/imgzoomcss3.html">Slider Demo</a> <a href="http://www.fabulant.com/downloadcenter/imgzoomcss3/imgzoomcss3.html">Download Script</a></p> <hr /> <p></p> <p></p> <p>[www.themeflash.com]</p> <div class="blogger-post-footer">View more detail at: http://website20.blogspot.com</div>Blogger Blogspothttp://www.blogger.com/profile/10711341003772554009noreply@blogger.com0tag:blogger.com,1999:blog-8646151458037113764.post-2243023258706905062011-01-20T10:04:00.001+07:002011-01-20T10:04:51.861+07:00Step By Step To Create Content Slider using jFlow, A Minimalist jQuery Plugin<p>There are a lot of free scripts to create a content slider. One of the example is <a href="http://smoothgallery.jondesign.net/">SmoothGallery by JonDesign</a>. But, if you are using jQuery and don’t want to install another JavaScript library, then you may need to consider jQuery slider plugin.</p> <p>Today, i am going to provide a tutorial on using jFlow, a minimalist jQuery plugin to create a content slider. Readers are required to have basic XHTML/CSS and JavaScript skills. I will provide a download link after this tutorial. This is the first tutorial post on WebDesignBooth, and i will write more tutorials in future.</p> <p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="content-slider" border="0" alt="content-slider" src="http://lh4.ggpht.com/_0PvhOKqmvtI/TTemI5MJwPI/AAAAAAAABXk/8BzSy-fRi2A/content-slider%5B6%5D.jpg?imgmax=800" width="500" height="209" /> </p> <p>So, let’s start to create our content-slider now. Download both <a href="http://www.jquery.com">jQuery</a> and <a href="http://www.gimiti.com/kltan/wordpress/?p=46">jFlow</a> before you proceed.</p> <p>1. Create a style.css file, and insert the following code into the file: </p> <pre class="brush: css;">#jFlowSlide{ background:#DBF3FD; font-family: Georgia; }<br />#myController { font-family: Georgia; padding:2px 0; width:610px; background:#3AB7FF; }<br />#myController span.jFlowSelected { background:#43A0D5;margin-right:0px; }<br /><br />.slide-wrapper { padding: 5px; }<br />.slide-thumbnail { width:300px; float:left; }<br />.slide-thumbnail img {max-width:300px; }<br />.slide-details { width:290px; float:right; margin-left:10px;}<br />.slide-details h2 { font-size:1.5em; font-style: italic; font-weight:normal; line-height: 1; margin:0; }<br />.slide-details .description { margin-top:10px; }<br /><br />.jFlowControl, .jFlowPrev, .jFlowNext { color:#FFF; cursor:pointer; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px; }<br />.jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover { background: #43A0D5; }</pre><br />2. Open your main document and include the style.css, jQuery, and jFlow in the <head> tag. <br /><br /><pre class="brush: xml;"><link rel="stylesheet" href="style.css" type="text/css" media="screen" /><br /><script language="javascript" type="text/javascript" src="jquery-1.3.2.min.js"></script><br /><script language="javascript" type="text/javascript" src="jquery.flow.1.2.js"></script></pre><br /><p>3. Then add this simple JavaScript code to define the settings for jFlow</p><br /><pre class="brush: js;"><script type="text/javascript"><br />$(document).ready(function(){<br /> $("#myController").jFlow({<br /> slides: "#slides", // the div where all your sliding divs are nested in<br /> controller: ".jFlowControl", // must be class, use . sign<br /> slideWrapper : "#jFlowSlide", // must be id, use # sign<br /> selectedWrapper: "jFlowSelected", // just pure text, no sign<br /> width: "610px", // this is the width for the content-slider<br /> height: "235px", // this is the height for the content-slider<br /> duration: 400, // time in miliseconds to transition one slide<br /> prev: ".jFlowPrev", // must be class, use . sign<br /> next: ".jFlowNext" // must be class, use . sign<br /> });<br />});<br /></script></pre><br /><p>Think <strong>#slides</strong> as a container, which contain all slides, while <strong>.jFlowControl</strong> is the controller which let us go to the individual slide. As you can see from the <strong>style.css</strong>, we have 300px .slide-thumbnail to display our image, <strong>290px .slide-details</strong> to display our title and description. Besides these, we have 10px margin-left for the .slide-description and 5px padding for the .slide-wrapper. So totally we need <strong>610px width</strong>. For the “height” setting, you need to estimate the maximum height for your content. Here, i will use <strong>235px</strong> as an example. </p><br /><p>4. Now is the turn to create the individual slide. The slide is contained in the #slides div. Here, i will conly show one slide. You may refer the source code for more info.</p><br /><pre class="brush: xml;"><div class="slide-wrapper"><br /> <div class="slide-thumbnail"><br /> <!-- image here --><br /> </div><br /> <div class="slide-details"><br /> <h2><!-- title here --></h2><br /> <div class="description"><br /> <!-- description here. --><br /> </div><br /> </div><br /> <div class="clear"></div><br /></div></pre><br /><p>5. We will wrap everything in a <strong>.slide-wrapper</strong> class, and float our thumbnail to the left while our content to the right. Don’t forget to clear the floats also. Replace image, title, and description with your own content. </p><br /><p>After that, we may add controls to the slides, which are resides in a #myController div.</p><br /><pre class="brush: xml;"><span class="jFlowPrev">Prev</span><br /><span class="jFlowControl">1</span><br /><span class="jFlowNext">Next</span></pre><br /><p>The <strong>.jFlowPrev</strong> and <strong>.jFlowNext</strong> are necessary controls to go to previous and next slides, while <strong>.jFlowControl</strong> is a “button” to jump to any particular slide. The number of <strong>.jFlowControl</strong> span is depends on the number of slides you have.</p> <div class="blogger-post-footer">View more detail at: http://website20.blogspot.com</div>Blogger Blogspothttp://www.blogger.com/profile/10711341003772554009noreply@blogger.com0tag:blogger.com,1999:blog-8646151458037113764.post-38011932186279349202010-12-23T15:07:00.001+07:002010-12-23T15:07:41.436+07:00Add and Remove items with jQuery<p>jQuery has been around for a while but only about a year ago I started to use it and understanding how easier life can be when using and implementing solutions with jQuery. <br />Creating web apps nowadays means creating something the user can control and many times that means letting them create, add and remove something from the interface you conceived.</p> <p>Today I’m sharing a short and simple tutorial that will teach how to add and remove items from your HTML code using the functions appendTo(); and remove(); from jQuery. <br />For this particular example I’m not going to be careful creating valid markup although I recommend you to always follow the W3C directives.</p> <h4>Creating the markup</h4> <p>In this example I’m going to create text field and 2 buttons that will allow me to add and remove text fields. Similar to online apps that allow you to create web form.</p> <pre class="brush: xml;"><a href="#" id="add">Add</a><br /><a href="#" id="remove">Remove</a><br /><br /><p><input type="text" value="1" /></p></pre><br /><p>The <p> around the input is just to add a new line when I add now input’s.</p><br /><h4>Applying jQuery to the markup</h4><br /><p>First you need to get jQuery. You can download it from the official <a href="http://jquery.com/">jQuery website</a> or use the link from Google Code: http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js</p><br /><p>Now you need to call jQuery in the <head> section of you HTML Template using the script tag:</p><br /><pre class="brush: js;"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">&lt/script></pre><br /><p>Now you need to add the jQuery under the script you just called:</p><br /><pre class="brush: js;"><script type="text/javascript"><br /><br />$(function() { // when document has loaded<br /><br /> var i = $('input').size() + 1; // check how many input exists on the document and add 1 for the add command to work<br /><br /> $('a#add').click(function() { // when you click the add link<br /> $('<p><input type="text" value="' + i + '" /></p>').appendTo('body'); // append (add) a new input to the document.<br />// if you have the input inside a form, change body to form in the appendTo<br /> i++; //after the click i will be i = 3 if you click again i will be i = 4<br /> });<br /><br /> $('a#remove').click(function() { // similar to the previous, when you click remove link<br /> if(i > 1) { // if you have at least 1 input on the form<br /> $('input:last').remove(); //remove the last input<br /> i--; //deduct 1 from i so if i = 3, after i--, i will be i = 2<br /> }<br /> });<br /><br /> $('a.reset').click(function() {<br /> while(i > 2) { // while you have more than 1 input on the page<br /> $('input:last').remove(); // remove inputs<br /> i--;<br /> }<br /> });<br /><br />});<br /></script></pre><br /><p>Here you have it a simple . You need to keep in mind that every time you refresh the page the items will be gone. You’ll need more codding in order to keep the variables on a database. This is just to cover the basic add / remove functions from jQuery.</p> <div class="blogger-post-footer">View more detail at: http://website20.blogspot.com</div>Blogger Blogspothttp://www.blogger.com/profile/10711341003772554009noreply@blogger.com0tag:blogger.com,1999:blog-8646151458037113764.post-12305847414875827852010-12-23T14:14:00.001+07:002010-12-23T14:14:22.089+07:00Compress CSS files using PHP<p>In order to save your precious bandwidth, you should compress your css files. Doing so is not hard at all using this snippet.</p> <pre class="brush: php;">header('Content-type: text/css');<br />ob_start("compress");<br />function compress($buffer) {<br /> /* remove comments */<br /> $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);<br /> /* remove tabs, spaces, newlines, etc. */<br /> $buffer = str_replace(array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $buffer);<br /> return $buffer;<br />}<br /><br />/* your css files */<br />include('master.css');<br />include('typography.css');<br />include('grid.css');<br />include('print.css');<br />include('handheld.css');<br /><br />ob_end_flush();</pre><br /><h4>Usage</h4><br /><p>Paste the code in a file named <em>style.php</em>. Don’t forget to include your css files (As seen on line 11 in the example). Once done, open your HTML document and import <em>style.php</em> as you’ll import a css stylesheet:</p><br /><pre class="brush: php;"><link rel="stylesheet" href="style.php" type="text/css" media="all"></pre><br /><p><em>style.php</em> will contain all your css stylesheets, compressed.</p> <div class="blogger-post-footer">View more detail at: http://website20.blogspot.com</div>Blogger Blogspothttp://www.blogger.com/profile/10711341003772554009noreply@blogger.com0tag:blogger.com,1999:blog-8646151458037113764.post-36342059924747701632010-12-22T09:04:00.001+07:002010-12-22T09:04:06.060+07:00PHP Date Range by week and by month<p>Get date range by this week, last week, this month, and last month options by providing offsets.</p> <pre class="brush: php;"><?php<br />function getWeekRange(&$start_date, &$end_date, $offset=0) {<br /> $start_date = '';<br /> $end_date = ''; <br /> $week = date('W');<br /> $week = $week - $offset;<br /> $date = date('Y-m-d');<br /> <br /> $i = 0;<br /> while(date('W', strtotime("-$i day")) >= $week) { <br /> $start_date = date('Y-m-d', strtotime("-$i day"));<br /> $i++; <br /> } <br /> <br /> list($yr, $mo, $da) = explode('-', $start_date); <br /> $end_date = date('Y-m-d', mktime(0, 0, 0, $mo, $da + 6, $yr));<br />}<br /> <br /> function getMonthRange(&$start_date, &$end_date, $offset=0) {<br /> $start_date = '';<br /> $end_date = ''; <br /> $date = date('Y-m-d');<br /> <br /> list($yr, $mo, $da) = explode('-', $date);<br /> $start_date = date('Y-m-d', mktime(0, 0, 0, $mo - $offset, 1, $yr));<br /> <br /> $i = 2;<br /> <br /> list($yr, $mo, $da) = explode('-', $start_date);<br /> <br /> while(date('d', mktime(0, 0, 0, $mo, $i, $yr)) > 1) {<br /> $end_date = date('Y-m-d', mktime(0, 0, 0, $mo, $i, $yr));<br /> $i++;<br /> }<br />}<br /><br />getWeekRange($start, $end);<br />echo "$start $end";<br /><br />getMonthRange($start, $end);<br />echo "$start $end";<br /><br />?></pre> <div class="blogger-post-footer">View more detail at: http://website20.blogspot.com</div>Blogger Blogspothttp://www.blogger.com/profile/10711341003772554009noreply@blogger.com0tag:blogger.com,1999:blog-8646151458037113764.post-73359033831633911782010-12-10T11:15:00.001+07:002010-12-10T11:15:55.315+07:00Simple jQuery Timeout<p>I needed <a href="http://jquery.com/">jQuery</a> to fadeout an item after a certain timeout, and I found it odd that I couldn’t find a native <a href="http://jquery.com/">jQuery</a> way to do it.</p> <p>Whatever. <a href="http://jquery.com/">jQuery</a> is so awesome that it doesn’t matter, because here’s what I came up with.</p> <pre class="brush: js;">(function($){<br /> $.doAfter = function(time,f) {<br /> $('body').animate({ opacity: 1 }, time, f);<br /> };<br />})(jQuery);<br />$(document).ready(function(){<br /> $.doAfter(2500,function() {<br /> $('.fadeout').fadeOut('slow');<br /> });<br />});</pre> <div class="blogger-post-footer">View more detail at: http://website20.blogspot.com</div>Blogger Blogspothttp://www.blogger.com/profile/10711341003772554009noreply@blogger.com0tag:blogger.com,1999:blog-8646151458037113764.post-58663771525740117892010-12-08T10:19:00.001+07:002010-12-08T10:19:16.115+07:00Easy payments using Paypal IPN<p>There are several PHP scripts and classes to process PayPal payments using their native IPN (Internet payment notification) feature. Because the whole process is based on the data you need to send via a web form to the PayPal payment processor these script look very similar.</p> <p>The payment / notification process is shown via the following graphic:</p> <p><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="paypal-graphic" border="0" alt="paypal-graphic" src="http://lh6.ggpht.com/_0PvhOKqmvtI/TP75MtwJhrI/AAAAAAAABXY/heU4o6k7pyU/paypal-graphic%5B6%5D.jpg?imgmax=800" width="480" height="240" /> </p> <p>Inside the form there are several required values to process a payment. PayPal gives the advice to post them all to get everything working. The following variables get some special attention:</p> <blockquote> <p><strong>business </strong>= your PayPal email address <br /><strong>cmd </strong>= single payments or subscription service (_xclick or _xclick-subscriptions) <br /><strong>return </strong>= the URL where the buyer get back after the payment is processed <br /><strong>cancel_return</strong> = the URL where the buyer get back if he has cancelled the payment <br /><strong>notify_url</strong> = the location where your IPN script is located <br /><strong>rm </strong>= how you need the data submitted from PayPal to your IPN script (1=get, 2=post) <br /><strong>currency_code</strong> = the currency you accept for your payment <br /><strong>lc </strong>= the country version of PayPal where your buyer is send to</p> </blockquote> <p><a href="https://www.moneybookers.com/app/?rid=1048238"><img style="display: inline; margin-left: 0px; margin-right: 0px" border="0" align="left" src="http://www.moneybookers.com/images/logos/mb_logos/mb_140x91px.gif" /></a>There are much more variables, but we think that the other variables (product, order and shipment information) speak for themselves. Find a complete form provided with the example files.</p> <p>To run some IPN enabled payment process we need a small script which will double check if the data which is send to the IPN script is valid according the data which is stored on the PayPal server. This feature is very important if your e-commerce accepts automatic payments.</p> <p>The following code is able to check if the payment is valid against the PayPal server. Use this test to decide if the payment is valid or not.</p> <pre class="brush: php;">$url = 'https://www.paypal.com/cgi-bin/webscr';<br />$postdata = '';<br />foreach($_POST as $i =&gt; $v) {<br />$postdata .= $i.'='.urlencode($v).'&amp;';<br />}<br />$postdata .= 'cmd=_notify-validate';<br /> <br />$web = parse_url($url);<br />if ($web['scheme'] == 'https') {<br />$web['port'] = 443;<br />$ssl = 'ssl://';<br />} else {<br />$web['port'] = 80;<br />$ssl = '';<br />}<br />$fp = @fsockopen($ssl.$web['host'], $web['port'], $errnum, $errstr, 30);<br /> <br />if (!$fp) {<br />echo $errnum.': '.$errstr;<br />} else {<br />fputs($fp, "POST ".$web['path']." HTTP/1.1\r\n");<br />fputs($fp, "Host: ".$web['host']."\r\n");<br />fputs($fp, "Content-type: application/x-www-form-urlencoded\r\n");<br />fputs($fp, "Content-length: ".strlen($postdata)."\r\n");<br />fputs($fp, "Connection: close\r\n\r\n");<br />fputs($fp, $postdata . "\r\n\r\n");<br /> <br />while(!feof($fp)) {<br />$info[] = @fgets($fp, 1024);<br />}<br />fclose($fp);<br />$info = implode(',', $info);<br />if (eregi('VERIFIED', $info)) {<br />// yes valid, f.e. change payment status<br />} else {<br />// invalid, log error or something<br />}<br />}</pre><br /><p>As mentioned before there are some complete solutions available on the internet. If your e-copmmerce site doesn’t have a complex product catalog you should use some static code from the PayPal website. For this guide we checked the <a href="http://sourceforge.net/projects/paypal">PHP toolkit</a> provided by PayPal.</p><br /><p><strong>Code condition</strong><br /> <br />The first thing I noticed the code is not very clean and is using a coding style which is based on older PHP versions (f.e. for systems using register globals = On)</p><br /><p><strong>Implementation</strong><br /> <br />After some code clean-up it was possible to use the included file together with my <a href="http://www.tailoc.net">shopping cart script</a>. Static variables are defined in one central configuration file and dynamic files are posted via the form in your web application.</p><br /><p><strong>IPN features</strong><br /> <br />This script is written to handle the IPN validation process with different methods: cURL, fsockopen, and libcURL. I tried only the fsockopen option because this method looks good to me and should work on almost every web platform.</p><br /><p><strong>Documentation</strong><br /> <br />There is a “Readme” file with the information about the most important features. A complete guide is not included and the information about subscription payments is missing in all files and documents. If you decide to start with the original files you should check also the comments within the configuration and example files.</p> <div class="blogger-post-footer">View more detail at: http://website20.blogspot.com</div>Blogger Blogspothttp://www.blogger.com/profile/10711341003772554009noreply@blogger.com0tag:blogger.com,1999:blog-8646151458037113764.post-64301381137496944732010-12-08T09:49:00.001+07:002010-12-08T09:49:06.765+07:00Parse html with PHP preg_match_all()<p>For the most of the PHP developer which are using preg_match or <a href="http://www.php.net/preg_replace">preg_replace</a> frequently is the function <a href="http://www.php.net/preg_match_all">preg_match_all</a> a smaller advantage, but for all others it’s maybe hard to understand. The biggest difference between preg_match_all and the regular preg_match is that all matched values are stored inside a multi-dimensional array to store an unlimited number of matches. With the following example I will try to make clear how its possible to store the image paths inside a web page:</p> <pre class="brush: php;">$data = file_get_contents("http://www.finalwebsites.com");<br />$pattern = "/src=[\"']?([^\"']?.*(png|jpg|gif))[\"']?/i";<br />preg_match_all($pattern, $data, $images);</pre><br /><p>We take a closer look to the pattern:</p><br /><p><code>"/<strong>src=[\"']?</strong>([^\"']?.*(png|jpg|gif))[\"']?/i"</code></p><br /><p>The first part and the last part are searching for everything that starts with src and ends with a optional quote or double quote. This could be a long string because the outer rule is very global. Next we check the rule starts within the first bracket:</p><br /><p><code>"/src=[\"']?<strong>([^\"']?.*</strong>(png|jpg|gif))<strong>[\"']?</strong>/i"</code></p><br /><p>Now we are looking inside this long string from the outer rule for strings starting with an optional quote or double quote followed by any characters. The last part inside the inner brackets is the magic:</p><br /><p><code>"/src=[\"']?([^\"']?.*<strong>(png|jpg|gif))</strong>[\"']?/i"</code></p><br /><p>We are looking next for a string that is followed by a file extension and match we get all the paths from the html file.</p><br /><p>We need all the rules to isolate the string parts (image paths) from the rest of the html. The result looks like this (access the array $images with these indexes, or just use print_r($images)):</p><br /><p><code>$images[0][0] -> src="/images/english.gif"<br /> <br />$images[1][0] -> /images/english.gif<br /> <br />$images[2][0] -> gif</code></p><br /><p>The index 1 is the information we need, try this example with other part of html code for a better understanding.</p> <div class="blogger-post-footer">View more detail at: http://website20.blogspot.com</div>Blogger Blogspothttp://www.blogger.com/profile/10711341003772554009noreply@blogger.com0tag:blogger.com,1999:blog-8646151458037113764.post-26756877779591804072010-12-07T17:19:00.001+07:002010-12-07T17:21:46.864+07:00Create custom backups from your website using cURL<p>These days I needed a script to backup only a part of a customers website using a CRON. Most of the control panels I know allow only a complete website backup and this is not what I needed. While plaaning the script, I thought about a solution for webmaster without full SSH access to their hosting account. A typical situation could be:</p> <ul> <li>A shared hosting account that allows only backups for the whole site incl. database, emails and other settings </li> <li>No administration rights via SSH </li> <li>A FTP host for the storage of the the backup files </li> <li>Support for cURL and a default PHP5 configuration (sorry no more code for PHP4). </li> </ul> <p>First of all we need to create a variable to define the local source directory on your website where you like to start the backup from:</p> <pre class="brush: php;">define('BASEPATH', $_SERVER['DOCUMENT_ROOT'].'/');</pre><br /><p>The next code is to create a new class including the constructor function and some variables used in that class:</p><br /><pre class="brush: php;">class Curl_ftp_backup {<br /> <br /> public $basePath, $errors, $ftp_server, $ftp_user_pw , $msg, $email;<br /> <br /> public function __construct($ftp_server, $ftp_userpw, $email_adr) {<br /> $this->basePath = BASEPATH;<br /> $this->errors = '';<br /> $this->ftp_server = $ftp_server;<br /> $this->ftp_user_pw = $ftp_userpw;<br /> $this->email = $email_adr;<br /> $this->msg = '';<br /> }<br />}</pre><br /><br /><p>Our class will store file and directories on the remote FTP server, the next function will create a directory if it not already exists:</p><br /><br /><pre class="brush: php;"> private function curl_create_ftp_directory($name, $curr_dir = '') {<br /> $ch = curl_init();<br /> curl_setopt($ch, CURLOPT_URL, $this->ftp_server);<br /> curl_setopt($ch, CURLOPT_USERPWD, $this->ftp_user_pw);<br /> curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);<br /> $cmd = array();<br /> if ($curr_dir != '') $cmd[] = 'CWD '.$curr_dir;<br /> $cmd[] = 'MKD '.$name;<br /> curl_setopt($ch, CURLOPT_POSTQUOTE, $cmd);<br /> curl_exec ($ch);<br /> return;<br /> }</pre><br /><p>The following function will open a file and uploads the data to specified directory on the target server. For each file that is not stored the error number is returned, this information is used later to build up an error string.</p><br /><pre class="brush: php;"> private function curl_put_file($path) {<br /> $ch = curl_init();<br /> $fp = fopen($this->basePath.$path, "r");<br /> curl_setopt($ch, CURLOPT_URL, $this->ftp_server.$path);<br /> curl_setopt($ch, CURLOPT_USERPWD, $this->ftp_user_pw);<br /> curl_setopt($ch, CURLOPT_UPLOAD, 1);<br /> curl_setopt($ch, CURLOPT_INFILE, $fp);<br /> curl_setopt($ch, CURLOPT_INFILESIZE, filesize($this->basePath.$path));<br /> curl_exec ($ch);<br /> $error = curl_errno($ch);<br /> curl_close ($ch);<br /> if ($error != 0) $this->errors .= $path.PHP_EOL;<br /> return;<br /> }</pre><br /><p>Now we need a function that will loop through the specified base directory and will switch between directories and files; the previous functions will create the directory or upload the file.</p><br /><pre class="brush: php;"> public function backupfiles($directory) {<br /> if ($handle = opendir($this->basePath.$directory)) {<br /> $this->curl_create_ftp_directory($directory);<br /> while (false !== ($file = readdir($handle))) {<br /> if (is_file($this->basePath.$directory.$file) &amp;&amp; $file != '.htaccess') {<br /> $this->curl_put_file($directory.$file);<br /> } elseif ($file != '.' &amp;&amp; $file != '..' &amp;&amp; is_dir($this->basePath.$directory.$file)) {<br /> $this->backupfiles($directory.$file.'/', $directory);<br /> }<br /> }<br /> closedir($handle);<br /> if ($this->errors != '') {<br /> $this->msg = 'Missing files: '.PHP_EOL.$this->errors;<br /> } else {<br /> $this->msg = 'FTP upload successful.';<br /> }<br /> } else {<br /> $this->msg = 'Can\'t open local directory.';<br /> }<br /> }<br /> <br /> public function send_emailmsg() {<br /> if ($this->msg != '') {<br /> $body = PHP_EOL.'Backup result:'.PHP_EOL.PHP_EOL.$this->msg;<br /> mail($this->email, 'Your Backup on '.date('Y-m-d H:i:s'), $body);<br /> }<br /> }</pre><br /><p>At last there is a tiny function that will send you some short email message about the backup result. You can call the class in your PHP script:</p><br /><pre class="brush: php;">$cb = new Curl_ftp_backup('ftp://ftp.yourserver.com/source_folder/', 'user:password', <a href="mailto:'your@email.com');$cb->backupfiles('includes/');$cb->send_emailmsg">'your@email.com');<br />$cb->backupfiles('includes/');<br />$cb->send_emailmsg</a>();</pre><br /><p>Thats all, now you need to create a CRON job for the file that will execute the backup. If your hosting provider doesn’t provide CRON jobs, just google for “free cron jobs”.</p><br /><p><strong>Disclaimer:</strong><br /> <br />We tested the script “successful” on two modern Linux web servers with ~100 files between 10kb and 300MB. If you have a backup with a lot of files you should think about a different solution. With every file or directory a new CURL function is called, this could result in a high server load. We are not responsible for any damage and/or data loss as the result off using this script.</p> <div class="blogger-post-footer">View more detail at: http://website20.blogspot.com</div>Blogger Blogspothttp://www.blogger.com/profile/10711341003772554009noreply@blogger.com0tag:blogger.com,1999:blog-8646151458037113764.post-58705694833860376672010-12-07T16:23:00.001+07:002010-12-07T16:26:44.412+07:00FTP Upload via cURL<p>FTP hosting is often much cheaper than regular web hosting. The upload with an ftp client is for sure the most common way, but could be a problem for people behind a firewall or without enough rights (capabilities) to install a FTP client. For those a upload via a web form is the best solution.</p> <h5>Upload limitations by your web server</h5> <p>The default value for file uploads within PHP is 2MB, if you need to upload bigger files you need to change your PHP configuration or need to create a .htaccess file with this code to upload files of max. 16MB:</p> <pre class="brush: php;">php_value upload_max_filesize 16M<br />php_value post_max_size 20M</pre><br /><p>The value for the post_max_size is larger than the value for the upload_max_size because we want to be able to upload more than just a file (also other data via text fields or text areas). The .htaccess file needs to be in the same directory than your upload script.</p><br /><h5>Using cURL for file transmissions</h5><br /><p>cURL is a great library for file transmissions via different types of protocols. The library supports the transport via POST, GET, FTP upload and much more. cURL is also able to authenticate on the target server or website.</p><br /><p>In this tutorial we want to upload a file to some (password protected) remote FTP server via a web form.</p><br /><pre class="brush: xml;"><form action="curlupload.php" method="post" enctype="multipart/form-data"><br /><div><br /><label for="upload">Select file</label><br /><input name="upload" type="file" /><br /><input type="submit" name="Submit" value="Upload" /><br /></div><br /></form></pre><br /><p>The form is simple and has only one file field and the submit button. Don’t forget to protect this kind of pages.</p><br /><p>Next we need some PHP code to handle the upload and opens a stream to send the file via cURL to the remote FTP server (place this code above the html code):</p><br /><pre class="brush: php;">if (isset($_POST['Submit'])) {<br /> if (!empty($_FILES['upload']['name'])) {<br /> $ch = curl_init();<br /> $localfile = $_FILES['upload']['tmp_name'];<br /> $fp = fopen($localfile, 'r');<br /> curl_setopt($ch, CURLOPT_URL, 'ftp://ftp_login:password@ftp.domain.com/'.$_FILES['upload']['name']);<br /> curl_setopt($ch, CURLOPT_UPLOAD, 1);<br /> curl_setopt($ch, CURLOPT_INFILE, $fp);<br /> curl_setopt($ch, CURLOPT_INFILESIZE, filesize($localfile));<br /> curl_exec ($ch);<br /> $error_no = curl_errno($ch);<br /> curl_close ($ch);<br /> if ($error_no == 0) {<br /> $error = 'File uploaded succesfully.';<br /> } else {<br /> $error = 'File upload error.';<br /> }<br /> } else {<br /> $error = 'Please select a file.';<br /> }<br />}</pre><br /><p>After the user has selected a file, the data is uploaded to the web server. We open the temp file with <strong>fopen</strong> and the cURL session is initialized. Together with the URL for the remote FTP server, we send the FTP login and password to the target location. The other cURL settings are required to send the file via the FTP protocol to the target server. If the returned error code is equal “0″, the upload was successful.</p><br /><p>This small PHP snippet is responsible for the upload to some remote FTP server. We suggest using more validation routines in a production environment.</p> <div class="blogger-post-footer">View more detail at: http://website20.blogspot.com</div>Blogger Blogspothttp://www.blogger.com/profile/10711341003772554009noreply@blogger.com0tag:blogger.com,1999:blog-8646151458037113764.post-11669406164864848612010-12-07T16:20:00.001+07:002010-12-07T16:20:04.130+07:00Uploading a file using Curl in PHP<p>Here's how to upload files using curl in php: (it's very easy)</p> <p>notice the @ infront of the file path, this is the magic part.</p> <pre class="brush: php;"><?php<br /> $ch = curl_init();<br /> curl_setopt($ch, CURLOPT_HEADER, 0);<br /> curl_setopt($ch, CURLOPT_VERBOSE, 0);<br /> curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);<br /> curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/4.0 (compatible;)");<br /> curl_setopt($ch, CURLOPT_URL, _VIRUS_SCAN_URL);<br /> curl_setopt($ch, CURLOPT_POST, true);<br /> // same as <input type="file" name="file_box"><br /> $post = array(<br /> "file_box"=>"@/path/to/myfile.jpg",<br /> );<br /> curl_setopt($ch, CURLOPT_POSTFIELDS, $post); <br /> $response = curl_exec($ch);<br />?></pre> <div class="blogger-post-footer">View more detail at: http://website20.blogspot.com</div>Blogger Blogspothttp://www.blogger.com/profile/10711341003772554009noreply@blogger.com0tag:blogger.com,1999:blog-8646151458037113764.post-16226229473315490282010-12-01T09:45:00.001+07:002010-12-01T09:45:29.657+07:00PHP: Random string with numbers and letters<p>I thought that some of you might find it useful to learn how to generate a <strong>random string</strong> or a <strong>random number</strong> with PHP. I wrote a quick function to use PHP to <strong>generate random</strong>. See it below :</p> <pre class="brush: php;">function genRandomString() {<br /> $length = 10;<br /> $characters = ’0123456789abcdefghijklmnopqrstuvwxyz’;<br /> $string = ”; <br /><br /> for ($p = 0; $p < $length; $p++) {<br /> $string .= $characters[mt_rand(0, strlen($characters))];<br /> }<br /><br /> return $string;<br />}</pre> <div class="blogger-post-footer">View more detail at: http://website20.blogspot.com</div>Blogger Blogspothttp://www.blogger.com/profile/10711341003772554009noreply@blogger.com0tag:blogger.com,1999:blog-8646151458037113764.post-57419625095714598942010-11-29T09:26:00.001+07:002010-11-29T09:26:05.927+07:00Date function parameters for RSS formated date (pubDate)<pre class="brush: php;"><?php<br />$pubDate = date("D, d M o G:i:s T",time());<br />?></pre> <div class="blogger-post-footer">View more detail at: http://website20.blogspot.com</div>Blogger Blogspothttp://www.blogger.com/profile/10711341003772554009noreply@blogger.com0tag:blogger.com,1999:blog-8646151458037113764.post-29764075762472775772010-11-23T10:51:00.001+07:002010-11-23T10:51:06.001+07:0010 jQuery Custom Scrollbar Plugins<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="jquery-custom-scrollbars" border="0" alt="jquery-custom-scrollbars" src="http://lh5.ggpht.com/_0PvhOKqmvtI/TOs6DtdLZII/AAAAAAAABW4/-5EjTjRUU28/jquery-custom-scrollbars%5B6%5D.jpg?imgmax=800" width="570" height="200" /> </p> <p>If you ever wanted to add some custom scrollbars to your website, to scroll the contents and the default browser scrollbars just doesn’t match up with your design, than make sure you check this list of 10 jQuery custom scrollbar plugins. Hope you find the following information helpful.</p> <h4><a href="http://www.kelvinluck.com/projects/jscrollpane-custom-cross-browser-scrollbars/">1. jScrollPane – custom cross-browser scrollbars</a></h4> <p>Kelvin Luck’s jScrollPane was originally developed in December 2006. It is a jQuery plugin which provides you with custom scrollbars which work consistently across all modern browsers. You can style the scrollbars using simple CSS and they degrade gracefully where JavaScript is disabled.</p> <p><a href="http://lh4.ggpht.com/_0PvhOKqmvtI/TOs6ESKfXfI/AAAAAAAABW8/0bpCuPKG3g4/s1600-h/jscrollpane%5B4%5D.gif"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="jscrollpane" border="0" alt="jscrollpane" src="http://lh4.ggpht.com/_0PvhOKqmvtI/TOs6F0Z1ELI/AAAAAAAABXA/b4GreY4VOT0/jscrollpane_thumb%5B2%5D.gif?imgmax=800" width="570" height="220" /></a> </p> <h4><a href="http://www.creamama.fr/Plugin-JQuery-Scrollbar.html">2. Plugin JQuery : Scrollbar</a></h4> <p>This page is written in french so use Google’s translate service to translate this page to your preferred language. Download is available for the plugin. <br />The purpose of this plugin is to add a scrollbar to the item of your choice, to view any content which is larger than the size – vizible space of a div for example. It is aimed to the people who don’t want a default scrollbar. Whell scroll management is also included in this but is not activated.</p> <p><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="plugin-jquery-scrollbar" border="0" alt="plugin-jquery-scrollbar" src="http://lh4.ggpht.com/_0PvhOKqmvtI/TOs6IMhozpI/AAAAAAAABXE/mHjdkLTZrnY/plugin-jquery-scrollbar%5B5%5D.gif?imgmax=800" width="570" height="174" /></p> <h4><a href="http://baijs.nl/tinyscrollbar/">3. Tiny Scrollbar – A lightweight jQuery plugin</a></h4> <p>Tiny Scrollbar can be used for scrolling content. It was built using the javascript jQuery library. Tiny scrollbar was designed to be a dynamic lightweight utility that gives webdesigners a powerfull way of enhancing a websites user interface. It can scroll vertical or horizontal, supports scrolling by wheel, thumb, or track and the mimified the size is 2,29 kb</p> <p><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="tinyscrollbar-jquery" border="0" alt="tinyscrollbar-jquery" src="http://lh3.ggpht.com/_0PvhOKqmvtI/TOs6JXV2XyI/AAAAAAAABXI/NpBAPN4HCnA/tinyscrollbar-jquery%5B5%5D.gif?imgmax=800" width="570" height="220" /> </p> <h4><a href="http://manos.malihu.gr/jquery-custom-content-scrolle">4. jQuery Custom Content Scroller</a></h4> <p>A custom content scroller created with jquery and css that supports mousewheel, scroll easing and has a fully customizable scrollbar. The script utilizes jQuery UI and Brandon Aaron jquery mousewheel plugin. Very easy to configure and style with css.</p> <p><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="jquery-custom-scrollbar" border="0" alt="jquery-custom-scrollbar" src="http://lh3.ggpht.com/_0PvhOKqmvtI/TOs6KMLTNnI/AAAAAAAABXM/qiNP9VdEGy4/jquery-custom-scrollbar%5B5%5D.gif?imgmax=800" width="570" height="210" /> </p> <h4><a href="http://www.aplweb.co.uk/jQuery/Scrollbars/">5. jQuery Scrollbar replacements</a></h4> <p>These scrollbars are fully themable allowing their behaviour to be determined as well as their look. This script uses the ‘jquery.corner’ plugin for the lovely cross-browser rounded corners and ‘jquery.drag’ for more reliable drag event registering.</p> <p><img alt="jQuery Scrollbar replacements" src="http://www.net-kit.com/wp-content/uploads/2010/10/jquery-scrollbar.gif" width="570" height="220" /></p> <h4><a href="http://plugins.jquery.com/project/scrollbarpaper">6. Scrollbar Paper</a></h4> <p>Scrollbar Paper does not replace browser’s default scrollbar. <br />Instead, it covers it with a custom scrollbar, like paper on a wall: that is why it is called Scrollbar Paper. <br />The benefit of this approach is that the way browser’s default scrollbar behaves is not modified: mouse wheel support, text selection and scrolling performance are the same as usual.</p> <p><img alt="jQuery Scrollbar Paper" src="http://www.net-kit.com/wp-content/uploads/2010/10/scrollbar-paper-jquery.jpg" width="570" height="187" /></p> <h4><a href="http://flowplayer.org/tools/demos/rangeinput/scrollbar.html">7. A custom scrollbar for a DIV</a></h4> <p>This tool brings HTML5 range input to all browsers in such a way that you can make it look and behave like you want. This small candy weights only 2.2 Kb. Here the rangeinput is used to control scrolling of a DIV. A little more coding and you can present your products like Apple does.</p> <p><img alt="A custom scrollbar for a DIV jQuery" src="http://www.net-kit.com/wp-content/uploads/2010/10/div-custom-scrollbar.gif" width="570" height="153" /></p> <h4><a href="http://jebaird.com/blog/shortscroll-jquery-ui-google-wave-style-scroll-bar">8. ShortScroll – A jQuery UI Google Wave style scroll bar</a></h4> <p>Jesse Baird has developed this custom scrollbar as a jQuery UI widget after seeing the scroll bar in Google Wave, which added functionality and style making much better than the browser default scroll bar..CSS3 background gradients to do all of the fancy background stuff so if you plan to support Internet Explorer and care about eye candy, plan on creating your own background images.</p> <p><img alt="ShortScroll - A jQuery UI Google Wave style scroll bar" src="http://www.net-kit.com/wp-content/uploads/2010/10/shortscroll-jquery-ui-scrollbar.gif" width="570" height="201" /></p> <h4><a href="http://github.com/thomd/jquery-scroll/">9. jQuery Scroll</a></h4> <p>A jQuery plugin which renders a custom, CSS styleable vertical scrollbar.</p> <p><img alt="jQuery Scroll Custom" src="http://www.net-kit.com/wp-content/uploads/2010/10/jquery-scroll-custom.gif" width="570" height="185" /></p> <h4><a href="http://www.simonbattersby.com/blog/vertical-scrollbar-using-jquery-ui-slider/">10. Vertical scrollbar using jQuery UI slider</a></h4> <p>The code assumes a single div with fixed height (#scroll-pane in my example) which contains an absolutely positioned div (#scroll-content) which contains the content for scrolling. </p> <p><img alt="Vertical scrollbar using jQuery UI slider" src="http://www.net-kit.com/wp-content/uploads/2010/10/vertical-scrollbar-jquery.gif" width="570" height="185" /></p> <p></p> <strong>[net-kit.com]</strong> <div class="blogger-post-footer">View more detail at: http://website20.blogspot.com</div>Blogger Blogspothttp://www.blogger.com/profile/10711341003772554009noreply@blogger.com2tag:blogger.com,1999:blog-8646151458037113764.post-40217296430330098192010-11-05T14:33:00.001+07:002010-11-05T14:33:59.671+07:00ISAPI Rewrite 3.0 REQUEST_URI work around<p>Helicon Tech have taken quite a different approach with the release of ISAPI Rewrite 3 in that they have adopted a structure that is very much like mod_rewrite for Apache. ISAPI Rewrite 3 now can read rewrite rules directly from Apache .access files without the user needing to do a thing. Although ISAPI Rewrite 3 is very similar to mod_write for Apache now, there are a few things that do not work the same. Take the REQUEST_URI server variable for instance which doesn't work with IIS as IIS doesn't allow the modification of server variables. What Helicon did here was make their own variable called HTTP_X_REWRITE_URL which does allow the modification of server variables. The only drawback is that this then requires you to replace REQUEST_URI with HTTP_X_REWRITE_URL in all you code, or does it?</p> <p>Replacing REQUEST_URI with HTTP_X_REWRITE_URL in all your code is certainly one way to do it, but it isn't very practical and also makes your code platform dependent because of ISAPI Rewrite 3. Another way to do it is to use the "<strong>auto_prepend_file</strong>" directive in php.ini to run some code prior to each script to assign the value of HTTP_X_REWRITE_URL to REQUEST_URI. To do this create a file called "<strong>request_uri.php</strong>" or similar and enter the following code into it;</p> <pre class="brush: php;"><?php<br />if (isset($_SERVER['HTTP_X_REWRITE_URL']))<br />{<br />$_SERVER['REQUEST_URI'] = $_SERVER['HTTP_X_REWRITE_URL'];<br />}<br />?></pre><br /><br /><p>Next, open your php.ini file and find the following directive;<br /> <br /><code>auto_prepend_file =</code><br /><br /> <br />Now set the value to the full path to the php file you just created, for example;<br /><br /> <br /><code>auto_prepend_file = D:\php\request_uri.php</code><br /><br /> <br />Restart IIS and you should now have the REQUEST_URI variable available to all of your PHP scripts without altering a single line of code which is very handy. For instance the Drupal CMS uses REQUEST_URI when testing for clean URL compatibility, and with the above set Drupal finally passes this test when hosted on IIS.</p> <div class="blogger-post-footer">View more detail at: http://website20.blogspot.com</div>Blogger Blogspothttp://www.blogger.com/profile/10711341003772554009noreply@blogger.com0tag:blogger.com,1999:blog-8646151458037113764.post-57356068091272279112010-10-23T09:33:00.001+07:002010-10-23T09:34:46.610+07:00Disable Javascript Errors<p>This simple script will prevent javascript errors from being displayed in your visitor's browser</p> <pre class="brush: js;"><script type="text/javascript"><br />function noError(){return true;}<br />window.onerror = noError;<br /></script></pre><br /><p><strong>Or jQuery:</strong></p><br /><pre class="brush: js;">$(window).error(function(){<br /> return true;<br />});</pre><br /><p>The functionality is very simple: create a function that always returns <b>true</b>, and then whenever an error occurs, call this function (returning <b>true</b> and suppressing the error).</p><br /><p>Shamefully, this script is only tested in IE.</p> <div class="blogger-post-footer">View more detail at: http://website20.blogspot.com</div>Blogger Blogspothttp://www.blogger.com/profile/10711341003772554009noreply@blogger.com0tag:blogger.com,1999:blog-8646151458037113764.post-13938625350622570442010-10-13T08:57:00.001+07:002010-10-13T08:57:00.951+07:00URLLoader Error #2032: Stream Error<p>This error can be caused by requesting a URL that is over the <a href="http://www.brighthub.com/link/header.aspx?u=http%3a%2f%2fsupport.microsoft.com%2fkb%2f208427&p=53220&isHubfolio=1&returnUrl=%2fhubfolio%2fmatthew-casperson%2fblog%2farchive%2f2009%2f10%2f23%2furlloader-error-2032-stream-error.aspx">maximum length supported by Internet Explorer</a>, which is 2083. This can be confusing, because if you copy a URL you are trying to load in Flex with a URLRequest into Internet Explorer, IE will truncate the URL itself, and appear to load properly.</p> <p>This is especially important for REST API's that can take a long string variable.</p> <p>The following code will avoid this issue.</p> <pre class="brush: cpp;">var URL_MAX_LENGTH:int = 2083;<br />var request:URLRequest = new URLRequest(url.substr(0, URL_MAX_LENGTH));</pre><br /><p>[www.brighthub.com]</p> <div class="blogger-post-footer">View more detail at: http://website20.blogspot.com</div>Blogger Blogspothttp://www.blogger.com/profile/10711341003772554009noreply@blogger.com0tag:blogger.com,1999:blog-8646151458037113764.post-58591589234173958322010-10-12T17:02:00.001+07:002010-10-12T17:02:03.149+07:00Detect Window Resize<p>When I try that - it works fine for me and I get the alert.  I am also using IE6 on WinXP.  My body tag looks like this:</p> <pre class="brush: xml;"><body onResize="alert('body resize');"></pre><br /><p>There is another way to do the same thing, and perhaps that method may work for you when this one doesn't for some reason.  Put a script tag in your page like this:</p><br /><pre class="brush: js;"><script language="Javascript"><br />document.body.onresize = function (){<br /> alert("Thanks for resizing!");<br />}<br /></script></pre><br /><p>That method also works for me, and it may work for you too.</p> <div class="blogger-post-footer">View more detail at: http://website20.blogspot.com</div>Blogger Blogspothttp://www.blogger.com/profile/10711341003772554009noreply@blogger.com0tag:blogger.com,1999:blog-8646151458037113764.post-86569973207239846822010-10-11T11:32:00.001+07:002010-10-11T11:32:04.655+07:00Database Class using PHP<p>Hi PHP Developers, <br />I wrote a Database utility class, which is used mostly in any projects. If you've this class, then you don't need to write queries each & every time when a new project comes. You can just copy this file & paste it in your class directory & can call it anytime. The class written below is very simple & it can be understood to the novice also. There will be a way to minimize the functions & statements inside the class too, if so, don't regret to post it in comments.</p> <p> </p> <pre class="brush: php;"><?php<br />/*-----------------------------------------------------------------------<br />Created By: Sathish Kumar.R<br />Date: 30 July 2010<br />E-mail: smart2raise[at]gmail[dot]com<br />Purpose: Database Manipulation<br /><br /><br />Functions Available:<br />db: Constructor (for mysql connect)<br />query: Executing query(mysql_query)<br />num_rows: Finding total rows(mysql_num_rows)<br />fetch_object: Fetch results in Object (mysql_fetch_object)<br />fetch_array: Fetch results in Array (mysql_fetch_array)<br />fetch_assoc: Fetch results in Array (mysql_fetch_assoc)<br />insert: Insert query (Insert into...)<br />insert_id: Gets last inserted ID (mysql_insert_id)<br />update Update query (Update ...)<br />delete Delete query (Delete ...)<br />countof: Count function in mysql<br />maxof: Max function in mysql<br />sumof: Sum function in mysql<br />avgof: AVG function in mysql<br />last_query: Displays the query which you executed last<br />throw_error: If any mysql error occurs & you set $debug = true then it will show the query & the mysql error<br />-------------------------------------------------------------------------*/<br />class db{<br />var $debug = false;<br />var $query = array();<br />var $prefix = "";<br />function db($server,$username,$pwd,$db){<br /> mysql_connect($server,$username,$pwd) or die('Please check your database connection');<br /> mysql_select_db($db);<br />}<br />function query($qry){<br /> $this->query[] = $qry;<br /> $res = mysql_query($qry);<br /> if(mysql_error()){<br /> $this->throw_error();<br /> }<br /> return $res;<br />}<br />function num_rows($res){<br /> return mysql_num_rows($res);<br />}<br />function fetch_object($res){<br /> $fet = mysql_fetch_object($res);<br /> return $fet;<br />}<br />function fetch_array($res){<br /> $fet = mysql_fetch_array($res);<br /> return $fet;<br />}<br />function fetch_assoc($res){<br /> $fet = mysql_fetch_assoc($res);<br /> return $fet;<br />}<br />function insert($val,$table){<br /> $query = 'INSERT INTO '.$table.' (';<br /> foreach ($val AS $key => $value)<br /> $query .= '`'.$key.'`,';<br /> $query = rtrim($query, ',').') VALUES (';<br /> foreach ($val AS $key => $value){<br /> if(get_magic_quotes_gpc())<br /> $query .= '\''.$value.'\',';<br /> else<br /> $query .= '\''.mysql_real_escape_string($value).'\',';<br /> }<br /> $query = rtrim($query, ',').')';<br /> return $this->query($query);<br />}<br />function insert_id(){<br /> return mysql_insert_id();<br />}<br />function update($val,$table,$con){<br /> if($con!=""){<br /> $where = "where ";<br /> $lastitem = end($con);<br /> foreach ($con AS $key => $value){<br /> if($value!=$lastitem){<br /> if(get_magic_quotes_gpc())<br /> $where .= $key."='".$value."' && ";<br /> else<br /> $where .= $key."='".mysql_real_escape_string($value)."' && ";<br /> }<br /> else{<br /> if(get_magic_quotes_gpc())<br /> $where .= $key."='".$value."'";<br /> else<br /> $where .= $key."='".mysql_real_escape_string($value)."'";<br /> }<br /> }<br /> }<br /> else<br /> {<br /> $where = "";<br /> }<br /> $query = 'update '.$table.' set ';<br /> foreach ($val AS $key => $value){<br /> if(get_magic_quotes_gpc())<br /> $query .= $key."=".'\''.$value.'\',';<br /> else<br /> $query .= '\''.mysql_real_escape_string($value).'\',';<br /> }<br /> $query = rtrim($query, ',')." ".$where;<br /> return $this->query($query);<br />}<br />function delete($table,$con){<br /> if($con!=""){<br /> $where = "where ";<br /> $lastitem = end($con);<br /> foreach ($con AS $key => $value){<br /> if($value!=$lastitem){<br /> if(get_magic_quotes_gpc())<br /> $where .= $key."='".$value."' && ";<br /> else<br /> $where .= $key."='".mysql_real_escape_string($value)."' && ";<br /> }<br /> else{<br /> if(get_magic_quotes_gpc())<br /> $where .= $key."='".$value."'";<br /> else<br /> $where .= $key."='".mysql_real_escape_string($value)."'";<br /> }<br /> }<br /> }<br /> else {<br /> $where = "";<br /> }<br /> return $this->query("delete from {$table} {$where}");<br />}<br />function countof($col,$table,$con="",$group=""){<br /> if($con!=""){<br /> $where = "where ";<br /> $lastitem = end($con);<br /> foreach ($con AS $key => $value){<br /> if($value!=$lastitem){<br /> if(get_magic_quotes_gpc())<br /> $where .= $key."='".$value."' && ";<br /> else<br /> $where .= $key."='".mysql_real_escape_string($value)."' && ";<br /> }<br /> else{<br /> if(get_magic_quotes_gpc())<br /> $where .= $key."='".$value."'";<br /> else<br /> $where .= $key."='".mysql_real_escape_string($value)."'";<br /> }<br /> }<br /> }<br /> else {<br /> $where = "";<br /> }<br /> if($group!="")<br /> $groupby = "group by ".$group;<br /> else<br /> $groupby = "";<br /> $query = $this->query("select count({$col}) from {$table} {$where} {$groupby}");<br /> $fet = $this->fetch_array($query);<br /> return $fet[0];<br />}<br />function maxof($col,$table,$con="",$group=""){<br /> if($con!=""){<br /> $where = "where ";<br /> $lastitem = end($con);<br /> foreach ($con AS $key => $value){<br /> if($value!=$lastitem){<br /> if(get_magic_quotes_gpc())<br /> $where .= $key."='".$value."' && ";<br /> else<br /> $where .= $key."='".mysql_real_escape_string($value)."' && ";<br /> }<br /> else{<br /> if(get_magic_quotes_gpc())<br /> $where .= $key."='".$value."'";<br /> else<br /> $where .= $key."='".mysql_real_escape_string($value)."'";<br /> }<br /> }<br /> }<br /> else {<br /> $where = "";<br /> }<br /> if($group!="")<br /> $groupby = "group by ".$group;<br /> else<br /> $groupby = "";<br /> $query = $this->query("select max({$col}) from {$table} {$where} {$groupby}");<br /> $fet = $this->fetch_array($query);<br /> return $fet[0];<br />}<br />function sumof($col,$table,$con="",$group=""){<br /> if($con!=""){<br /> $where = "where ";<br /> $lastitem = end($con);<br /> foreach ($con AS $key => $value){<br /> if($value!=$lastitem){<br /> if(get_magic_quotes_gpc())<br /> $where .= $key."='".$value."' && ";<br /> else<br /> $where .= $key."='".mysql_real_escape_string($value)."' && ";<br /> }<br /> else{<br /> if(get_magic_quotes_gpc())<br /> $where .= $key."='".$value."'";<br /> else<br /> $where .= $key."='".mysql_real_escape_string($value)."'";<br /> }<br /> }<br /> }<br /> else {<br /> $where = "";<br /> }<br /> if($group!="")<br /> $groupby = "group by ".$group;<br /> else<br /> $groupby = "";<br /> $query = $this->query("select sum({$col}) from {$table} {$where} {$groupby}");<br /> $fet = $this->fetch_array($query);<br /> return $fet[0];<br />}<br />function avgof($col,$table,$con="",$group=""){<br /> if($con!=""){<br /> $where = "where ";<br /> $lastitem = end($con);<br /> foreach ($con AS $key => $value){<br /> if($value!=$lastitem){<br /> if(get_magic_quotes_gpc())<br /> $where .= $key."='".$value."' && ";<br /> else<br /> $where .= $key."='".mysql_real_escape_string($value)."' && ";<br /> }<br /> else{<br /> if(get_magic_quotes_gpc())<br /> $where .= $key."='".$value."'";<br /> else<br /> $where .= $key."='".mysql_real_escape_string($value)."'";<br /> }<br /> }<br /> }<br /> else {<br /> $where = "";<br /> }<br /> if($group!="")<br /> $groupby = "group by ".$group;<br /> else<br /> $groupby = "";<br /> $query = $this->query("select avg({$col}) from {$table} {$where} {$groupby}");<br /> $fet = $this->fetch_array($query);<br /> return $fet[0];<br />}<br />function last_query(){<br /> return end($this->query);<br />}<br />function throw_error(){<br /> if($this->debug==true){<br /> $qry = "<span style="color: rgb(0, 0, 0);">".end($this->query)."</span><br />";<br /> }<br /> else{<br /> $qry = "";<br /> }<br /> die("<div style='width:500px; margin:auto; text-align:left; color:red; font-size:12px;border:2px solid #FFD700;vertical-align:middle; line-height:19px;background:#FFFFDD;font-family:verdana;padding:3px;'>".$qry."Mysql Error: ".mysql_error());<br />}<br />}<br />?><br /><br /><?php<br />//Usage of Class:<br /><br /><br />$hostname = "hostname";<br />$username = "username";<br />$password = "";<br />$database = "dbname";<br />$db = new db($hostname,$username,$password,$database);<br />$db->debug = true;<br />//If it is set to true, then mysql error will shown the query which throws the error.<br /><br />$qry = $db->query("select columnname from tablename"); //Executing query<br />$db->num_rows($qry); //Finding total rows<br /><br />$val = array("a"=>123,"b"=>"sathish","c"=>"kumar");<br /><br />$a = $db->insert($val,"tablename");<br />/*Note: $val should be an array, else it will throw error Key in an array should be the column name in the table & value can be any value */<br /><br />$db->insert_id(); //returns the last inserted ID in the database<br /><br />$val1 = array("a"=>123,"b"=>"Sathish","c"=>"Kumar");<br /><br />$db->update($val1,"tablename",array("id"=>2));<br />/*<br />Update query same as insert query, you can pass multiple conditions in the 3rd argument i.e array("id"=>2,"a"=>'123')<br />*/<br /><br />$db->delete("tablename",array("id"=>4));<br />//You can pass multiple conditions in 2nd argument<br /><br /><br />$db->countof("id","tablename",array("a"=>123123));<br /><br /><br />$db->maxof("id","tablename",array("a"=>123123));<br /><br /><br />$db->avgof("id","tablename",array("a"=>123123));<br /><br />/*<br /> for countof(),maxof(),avgof() you can pass additional argument group by<br /><br /><br />$db->countof("id","tablename",array("a"=>123123),"c");<br /><br />this will result as "select count(id) where a = '123123' group by c"<br />*/<br /><br />$db->last_query() //This will return last executed query<br />?></pre> <div class="blogger-post-footer">View more detail at: http://website20.blogspot.com</div>Blogger Blogspothttp://www.blogger.com/profile/10711341003772554009noreply@blogger.com0