Advanced PHP Tutorial

tag:blogger.com,1999:blog-8472448211262689043Mon, 23 Jan 2012 17:44:19 +0000installimagesattachmentPluginsExportfor loopRequireRegular ExpressionsScrollingUIpollSchemafunctionsEncryptinsertProgress BarincludeFormlocalhostvalidationRequestHTTPAlexaFlashiphoneimage resizeXdebugDebuggingErrorApacheelseifgetCakePHPwhileSMSselectCSSmysqlPDFUTF-8JavascriptsecurityURLHmacXMLDesignHashingMssqlWordslidersWeb servicerotateChatFrameworksArrayDSN-lessdo-whileText Mailbar chartretrievesessionHTMLCMSimage generationRTFCrawlerReading textHtml emailmagic quotescookeisExcelRandomPostAutosuggestDojoTwitterGraphIntroCaptchadynamicDateperlblocking accesssearch enginePagingweb applicationsPage viewsDomainTutorialsAjaxswitchmemcacheconditionalShellHostingRecord lockingelseScriptsHidePasswordswindowsSSLChartJqueryJSONAutocompletefileDirectoriesmenuFacebookMooToolsifdatabaseBoxClasssMobilenavigationImaplogintabsFindconnectloopsRESTIMSIp addressDSNCSVwebsiteThumbnailGoogleSOAPPHPSEOXML-RPCipodLinuxuploadserverAuthenticationTooltiphtaccessPage UrldatakeywordscalculatorAdvanced PHP TutorialAdvanced PHP tutorial is useful for learning php, mysql, ajax, jquery, javascript, HTML, CSS with advanced concepts.http://advancedphptutorial.blogspot.com/noreply@blogger.com (LearnPHP)Blogger209125AdvancedPhpTutorialhttp://feedburner.google.comtag:blogger.com,1999:blog-8472448211262689043.post-300767537575750748Mon, 23 Jan 2012 17:44:00 +00002012-01-23T09:44:19.734-08:00PHPSMSSend SMS (text messages) via PHP script<div dir="ltr" style="text-align: left;" trbidi="on"><br /> <div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">I figured this out the other day and thought it would be a good idea to pass on. SMS messages are just sent to special email addresses, so they can be sent from server to phone with minimal effort. Here is the form and handler, feel free to copy or modify it in any way you see fit:</span></div><a name='more'></a><div style="text-align: justify;"><b><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: large;">The form:</span></b></div><div style="text-align: justify;"><b><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">Code:</span></b></div><div style="text-align: justify;"><b><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /> </span></b></div><br /> <div style="text-align: justify;"><span style="color: blue; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><form id="sms" name="sms" method="post" action="scripts/send_sms.php"></span></div><div style="text-align: justify;"><span style="color: blue; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><table width="400"></span></div><div style="text-align: justify;"><span style="color: blue; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">  <tr></span></div><div style="text-align: justify;"><span style="color: blue; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">    <td align="right" valign="top">From:</td></span></div><div style="text-align: justify;"><span style="color: blue; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">    <td align="left"><input name="from" type="text" id="from" size="30" /></td></span></div><div style="text-align: justify;"><span style="color: blue; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">  </tr></span></div><div style="text-align: justify;"><span style="color: blue; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">  <tr></span></div><div style="text-align: justify;"><span style="color: blue; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">    <td align="right" valign="top">To:</td></span></div><div style="text-align: justify;"><span style="color: blue; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">    <td align="left"><input name="to" type="text" id="to" size="30" /></td></span></div><div style="text-align: justify;"><span style="color: blue; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">  </tr></span></div><div style="text-align: justify;"><span style="color: blue; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">  <tr></span></div><div style="text-align: justify;"><span style="color: blue; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">    <td align="right" valign="top">Carrier:</td></span></div><div style="text-align: justify;"><span style="color: blue; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">    <td align="left"><select name="carrier" id="carrier"></span></div><div style="text-align: justify;"><span style="color: blue; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">      <option value="verizon">Verizon</option></span></div><div style="text-align: justify;"><span style="color: blue; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">      <option value="tmobile">T-Mobile</option></span></div><div style="text-align: justify;"><span style="color: blue; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>  <option value="sprint">Sprint</option></span></div><div style="text-align: justify;"><span style="color: blue; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>  <option value="att">AT&amp;T</option></span></div><div style="text-align: justify;"><span style="color: blue; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>  <option value="virgin">Virgin Mobile</option></span></div><div style="text-align: justify;"><span style="color: blue; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">    </select></td></span></div><div style="text-align: justify;"><span style="color: blue; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">  </tr></span></div><div style="text-align: justify;"><span style="color: blue; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">  <tr></span></div><div style="text-align: justify;"><span style="color: blue; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">    <td align="right" valign="top">Message:</td></span></div><div style="text-align: justify;"><span style="color: blue; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">    <td align="left"><textarea name="message" cols="40" rows="5" id="message"></textarea></td></span></div><div style="text-align: justify;"><span style="color: blue; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">  </tr></span></div><div style="text-align: justify;"><span style="color: blue; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">  <tr></span></div><div style="text-align: justify;"><span style="color: blue; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">    <td colspan="2" align="right"><input type="submit" name="Submit" value="Submit" /></td></span></div><div style="text-align: justify;"><span style="color: blue; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">    </tr></span></div><div style="text-align: justify;"><span style="color: blue; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"></table></span></div><div style="text-align: justify;"><span style="color: blue; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"></form></span></div><div style="text-align: justify;"><span style="color: blue; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /> </span></div><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"></span><br /> <div style="font-weight: bold; text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="font-size: large;">The handler:</span></span></div><div style="font-weight: bold; text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">Code:</span></div><div style="font-weight: bold; text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /> </span></div><br /> <div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;"><?php</span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;">$from = $_POST['from'];</span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;">$to = $_POST['to'];</span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;">$carrier = $_POST['carrier'];</span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;">$message = stripslashes($_POST['message']);</span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;"><br /> </span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;">if ((empty($from)) || (empty($to)) || (empty($message))) {</span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;">header ("Location: sms_error.php");</span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;">}</span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;"><br /> </span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;">else if ($carrier == "verizon") {</span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;">$formatted_number = $to."@vtext.com";</span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;">mail("$formatted_number", "SMS", "$message"); </span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;">// Currently, the subject is set to "SMS". Feel free to change this.</span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;"><br /> </span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;">header ("Location: sms_success.php");</span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;">}</span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;"><br /> </span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;">else if ($carrier == "tmobile") {</span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;">$formatted_number = $to."@tomomail.net";</span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;">mail("$formatted_number", "SMS", "$message");</span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;"><br /> </span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;">header ("Location: sms_success.php");</span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;">}</span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;"><br /> </span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;">else if ($carrier == "sprint") {</span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;">$formatted_number = $to."@messaging.sprintpcs.com";</span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;">mail("$formatted_number", "SMS", "$message");</span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;"><br /> </span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;">header ("Location: sms_success.php");</span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;">}</span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;"><br /> </span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;">else if ($carrier == "att") {</span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;">$formatted_number = $to."@txt.att.net";</span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;">mail("$formatted_number", "SMS", "$message");</span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;">header ("Location: sms_success.php");</span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;">}</span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;"><br /> </span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;">else if ($carrier == "virgin") {</span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;">$formatted_number = $to."@vmobl.com";</span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;">mail("$formatted_number", "SMS", "$message");</span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;"><br /> </span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;">header ("Location: sms_success.php");</span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;">}</span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;">?></span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span style="color: blue;"><br /> </span></span></div><div style="text-align: justify;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">Sending a text message to a cell phone through PHP is just a matter of appending the correct suffix to the number and using the mail() function. If you want to add more carriers, go <a href="http://en.wikipedia.org/wiki/SMS_gateways" target="_blank">here</a> and find the carrier you are looking for. If you do not know the carrier (ie. if you want to add a "not sure" option to the pulldown menu), add @teleflip.com as the suffix. The phone numbers must be 10 digits long (XXX-XXX-XXXX).</span></div><br /> <br /> <br /> </div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/8472448211262689043-300767537575750748?l=advancedphptutorial.blogspot.com' alt='' /></div><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=olBhF8ZDdpM:k9OiAwHaRgE:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=olBhF8ZDdpM:k9OiAwHaRgE:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=olBhF8ZDdpM:k9OiAwHaRgE:-BTjWOF_DHI"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=olBhF8ZDdpM:k9OiAwHaRgE:-BTjWOF_DHI" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=olBhF8ZDdpM:k9OiAwHaRgE:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=olBhF8ZDdpM:k9OiAwHaRgE:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=olBhF8ZDdpM:k9OiAwHaRgE:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=olBhF8ZDdpM:k9OiAwHaRgE:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=olBhF8ZDdpM:k9OiAwHaRgE:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=olBhF8ZDdpM:k9OiAwHaRgE:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=olBhF8ZDdpM:k9OiAwHaRgE:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=olBhF8ZDdpM:k9OiAwHaRgE:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=olBhF8ZDdpM:k9OiAwHaRgE:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=l6gmwiTKsz0" border="0"></img></a> </div>http://advancedphptutorial.blogspot.com/2012/01/send-sms-text-messages-via-php-script.htmlnoreply@blogger.com (LearnPHP)0tag:blogger.com,1999:blog-8472448211262689043.post-8513442816368358959Wed, 18 Jan 2012 17:07:00 +00002012-01-18T09:07:08.580-08:00CSSJquery6 CSS3 and jQuery Loading Animations Solutions<div dir="ltr" style="text-align: left;" trbidi="on"><br /> <div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;">The largest resource of <a href="http://advancedphptutorial.blogspot.com/search/label/CSS" target="_blank">CSS3 </a>and <a href="http://advancedphptutorial.blogspot.com/search/label/Jquery" target="_blank">jQuery </a>Loading animations is now in your hands. You will be surprised to see the amazing animated series as we bring for you the best of the run. Before loading animation was tough and was restricted only to the Gif format but now with powerful technologies and browsers (the canvas and VML), you can also load it with the <a href="http://advancedphptutorial.blogspot.com/search/label/CSS" target="_blank">CSS3 </a>and jQuery . It is highly customizable and the server gives you a smooth processing of the request made by you.</span></div><a name='more'></a><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span><br /> <div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;">There is a total of about <a href="http://advancedphptutorial.blogspot.com/search/label/CSS" target="_blank">CSS3 </a>and jQuery which can load animation but not all of them can work in the older browsers. The JavaScript VML and canvas is supported by spin.js and activity indicator. jQuery plugin  renders spinner using VML or SVG. </span></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;">It has the same functionalities with spin .js other than relying on <a href="http://advancedphptutorial.blogspot.com/search/label/Jquery" target="_blank">jQuery</a>. The script is light weight with alpha transparency, high configuration and is resolution independent. Moreover it works in major browsers and has feature detection possibilities.</span></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;">The canvas loader plugin is useful and better than the typical gif loading animation. The loader is canvas based and has the same width and height. This plugin is useful for developing the mobile apps to be seen on Android. It lets you check the canvas support before replacement. We have Heartcode CanvasLoader using the HTML5 Canvas to customize circular preloaders. </span></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;">This is from the JavaScript UI library. Spin.js supports old browsers and has an UI for customizing your preloader. It has high configuration, supporting the major browsers and is independent of resolution. Spin.js uses VML as an emergency in the old IEs. The Sonic Looping Loader is a JavaScript preloader and helps you create custom loading series of animations. </span></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;">The looping animations works best with it. The only thing is that your browser should support canvas. Other than this the file size is small with ~3k minified and is highly configurable.</span></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;">Ajax load is quite handy and is used for standard animation loading. You can create your desired icons with it by selecting your type of indicator and changing the background and foreground code color. Drop down menu is another solution in the navigation menu with JavaScript. You can also control cookie using JavaScript. </span></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;">Chimply gives you some useful animated circles and it has generated about 18131 images for you. You can get the three dimensional category of circular, horizontal, rectangular, smiley, religion signs and zodiac signs.</span></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: x-large;"><b>CSS3 and jQuery Loading Animations</b></span></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: large;">spin.js</span></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div class="separator" style="clear: both; text-align: center;"><a href="http://fgnass.github.com/spin.js/" target="_blank"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="166" src="http://2.bp.blogspot.com/-sOdJaeJRFYQ/Txb6NqWcL4I/AAAAAAAAAKI/OzC9yjUrddc/s400/spin.jpg" width="400" /></span></a></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: large;">CSS3 Loading Animation Loop</span></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div class="separator" style="clear: both; text-align: center;"><a href="http://www.alessioatzeni.com/blog/css3-loading-animation-loop/" target="_blank"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="166" src="http://3.bp.blogspot.com/-RbbPlsWnmio/Txb6lPDwuPI/AAAAAAAAAKQ/ehXb_ktGXxQ/s400/css3animationloop.jpg" width="400" /></span></a></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: large;">CSS3 Loading Animation</span></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div class="separator" style="clear: both; text-align: center;"><a href="http://www.alessioatzeni.com/blog/css3-loading-animation/" target="_blank"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="166" src="http://3.bp.blogspot.com/-l6EzOuqqMws/Txb63HDKQ3I/AAAAAAAAAKY/uC5TXMIV7J8/s400/css3animation.jpg" width="400" /></span></a></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: large;">CanvasLoader Creator</span></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div class="separator" style="clear: both; text-align: center;"><a href="http://heartcode.robertpataki.com/canvasloader/" target="_blank"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="166" src="http://3.bp.blogspot.com/-ioc-YOK2Z5M/Txb7Jqm4VBI/AAAAAAAAAKg/vi6zPTOnGWk/s400/CanvasLoader.jpg" width="400" /></span></a></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: large;">CSS Loading Animation Circle Style</span></div><div class="separator" style="clear: both; text-align: center;"><a href="http://www.webfroze.com/css/loading-animation-circle-style/" target="_blank"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="166" src="http://4.bp.blogspot.com/-b3tj_ZvWP6w/Txb7Z9fRkWI/AAAAAAAAAKo/Et_jPz7Z6X8/s400/loadingcircle.jpg" width="400" /></span></a></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: large; text-align: left;">Loading CSS spinners and bars generator for AJAX & JQuery</span></div><div class="separator" style="clear: both; text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif;"><a href="http://cssload.net/" target="_blank"><img border="0" height="166" src="http://4.bp.blogspot.com/-CZQbiHmSwLQ/Txb7nn_pHMI/AAAAAAAAAKw/FeuBd2CzgIM/s400/spinners.jpg" width="400" /></a></span></div><div><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><br /> </div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/8472448211262689043-8513442816368358959?l=advancedphptutorial.blogspot.com' alt='' /></div><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=BIlArmS1Evw:tX4Xqvqo4e0:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=BIlArmS1Evw:tX4Xqvqo4e0:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=BIlArmS1Evw:tX4Xqvqo4e0:-BTjWOF_DHI"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=BIlArmS1Evw:tX4Xqvqo4e0:-BTjWOF_DHI" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=BIlArmS1Evw:tX4Xqvqo4e0:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=BIlArmS1Evw:tX4Xqvqo4e0:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=BIlArmS1Evw:tX4Xqvqo4e0:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=BIlArmS1Evw:tX4Xqvqo4e0:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=BIlArmS1Evw:tX4Xqvqo4e0:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=BIlArmS1Evw:tX4Xqvqo4e0:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=BIlArmS1Evw:tX4Xqvqo4e0:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=BIlArmS1Evw:tX4Xqvqo4e0:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=BIlArmS1Evw:tX4Xqvqo4e0:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=l6gmwiTKsz0" border="0"></img></a> </div>http://advancedphptutorial.blogspot.com/2012/01/6-css3-and-jquery-loading-animations.htmlnoreply@blogger.com (LearnPHP)2tag:blogger.com,1999:blog-8472448211262689043.post-985002233626927453Mon, 09 Jan 2012 16:44:00 +00002012-01-09T08:44:49.413-08:00PHPApacheStore Multiple Values for a Key using Apache Collections<div dir="ltr" style="text-align: left;" trbidi="on"><span style="font-family: Arial, Helvetica, sans-serif;"><span style="background-color: white; color: #333333; line-height: 18px;">n common programming we use maps to store key and value pair. They have one-to-one relationship.But, sometimes we need to use one-to-many relationship in order to store multiple values for a particular key.To achieve this we can use a hashmap to store a key and value will be a list.But,Here we'll discuss about Collections API given by Apache to do the trick.</span></span><br /> <a name='more'></a><span style="font-family: Arial, Helvetica, sans-serif;"><span style="background-color: white; color: #333333; line-height: 18px;"><br /> </span></span><br /> <span style="font-family: Arial, Helvetica, sans-serif;"><span style="background-color: white; color: #333333; line-height: 18px;">First of all download the </span><a href="http://commons.apache.org/collections/download_collections.cgi" style="background-color: white; color: #7a3254; line-height: 18px; text-decoration: none;" target="new">Collections API</a><span style="background-color: white; color: #333333; line-height: 18px;"> and keep it in your classpath. Now go through the sample code.</span> </span><br /> <span style="background-color: white; color: #333333; line-height: 18px;"><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></span><br /> <span style="font-family: Arial, Helvetica, sans-serif;"><span style="background-color: white;"><span style="color: blue;"><span style="line-height: 18px;">MultiMap map = new MultiValueMap();// map object with reference to the subclass MultiValueMap map.put("mark","purdue" ); // Adding of values into the map</span><br style="line-height: 18px;" /><span style="line-height: 18px;">map.put("mark", "Isec");</span><br style="line-height: 18px;" /><span style="line-height: 18px;">map.put("mark","sophomore");</span><br style="line-height: 18px;" /><span style="line-height: 18px;">Set set = map.keySet(); // keyset method will fetch all the keys</span><br style="line-height: 18px;" /><span style="line-height: 18px;">for (Object o: set) { // advanced for loop to access all the keys</span><br style="line-height: 18px;" /><span style="line-height: 18px;">System.out.println("Values in "+o+" are: "+map.get(o)); // This will print the set of values for the key</span><br style="line-height: 18px;" /><span style="line-height: 18px;">List list = (List) map.get(o); // List to contain all the values for the key</span><br style="line-height: 18px;" /><span style="line-height: 18px;">Iterator it = list.iterator(); // Iterator to loop through all the values in the list</span><br style="line-height: 18px;" /><span style="line-height: 18px;">    while (it.hasNext())</span><br style="line-height: 18px;" /><span style="line-height: 18px;">    {</span><br style="line-height: 18px;" /><span style="line-height: 18px;">      System.out.println("value: "+it.next()); // to print each value individually</span><br style="line-height: 18px;" /><span style="line-height: 18px;">   }</span><br style="line-height: 18px;" /><span style="line-height: 18px;">}</span></span></span> </span><br /> <span style="background-color: white;"><span style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span style="line-height: 18px;"><br /> </span></span></span><br /> <span style="font-family: Arial, Helvetica, sans-serif;"><span style="background-color: white; color: #333333; line-height: 18px;">If you have any doubt, post it here.</span><br style="background-color: white; color: #333333; line-height: 18px;" /><br style="background-color: white; color: #333333; line-height: 18px;" /><span style="background-color: white; color: #333333; line-height: 18px;">Happy coding.</span></span> </div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/8472448211262689043-985002233626927453?l=advancedphptutorial.blogspot.com' alt='' /></div><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=m-v8Asll7Kc:DNuZpp6_nDU:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=m-v8Asll7Kc:DNuZpp6_nDU:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=m-v8Asll7Kc:DNuZpp6_nDU:-BTjWOF_DHI"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=m-v8Asll7Kc:DNuZpp6_nDU:-BTjWOF_DHI" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=m-v8Asll7Kc:DNuZpp6_nDU:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=m-v8Asll7Kc:DNuZpp6_nDU:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=m-v8Asll7Kc:DNuZpp6_nDU:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=m-v8Asll7Kc:DNuZpp6_nDU:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=m-v8Asll7Kc:DNuZpp6_nDU:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=m-v8Asll7Kc:DNuZpp6_nDU:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=m-v8Asll7Kc:DNuZpp6_nDU:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=m-v8Asll7Kc:DNuZpp6_nDU:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=m-v8Asll7Kc:DNuZpp6_nDU:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=l6gmwiTKsz0" border="0"></img></a> </div>http://advancedphptutorial.blogspot.com/2012/01/store-multiple-values-for-key-using.htmlnoreply@blogger.com (LearnPHP)1tag:blogger.com,1999:blog-8472448211262689043.post-7778803447539824807Sun, 08 Jan 2012 17:01:00 +00002012-01-08T09:01:40.709-08:00PHPMobileShutdown Computer From Mobile Using PHP<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;"><span style="background-color: white; color: #333333; line-height: 18px; text-align: -webkit-auto;">On the Internet there are some tutorials about shutting down a computer from a mobile phone.But, in this tutorial we'll check out a way to shutdown a computer from a mobile phone using PHP.For those who don't know PHP, it is a scripting language in simple words.</span></span></div><a name='more'></a><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span><br /> <div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;"><span style="background-color: white; color: #333333; line-height: 18px; text-align: -webkit-auto;">We are PHP as it is a server side scripting language,platform independent and open source.That means we don't have to worry about whether the system runs on Windows or Linux.The procedure is really simple.All we have to do is to set up a server on the computer with PHP and execute system command to shutdown the computer. </span> </span></div><div style="text-align: justify;"><span style="background-color: white; color: #333333; line-height: 18px; text-align: -webkit-auto;"><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></span></div><br /> <div style="background-color: white; padding-bottom: 15px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;"></div><div style="color: #333333; line-height: 18px; text-align: justify;"><b><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></b></div><div style="color: #333333; line-height: 18px; text-align: justify;"><b><span style="font-family: Arial, Helvetica, sans-serif; font-size: large;">1.SERVER SETUP </span></b></div><div style="text-align: justify;"><span style="color: #333333; line-height: 18px;"><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></span></div><span style="color: #333333; line-height: 18px;"><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;">We'll use XAMPP to set up the server.Believe me it is too easy.</span></div></span><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><span style="color: #333333; line-height: 18px;"><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;">Go to <a href="http://www.apachefriends.org/en/xampp.html" style="color: #7a3254; text-decoration: none;">xampp</a> home page.Download the available package (installer or zip archive). </span></div></span><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><span style="color: #333333; line-height: 18px;"><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;">Now,follow the instruction given on their site to install the server.Actually installation is just unzipping the archive to a directory.The installation will take just around 2 minute.</span></div></span><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><b style="color: #333333; line-height: 18px;"><div style="text-align: justify;"><b><span style="font-family: Arial, Helvetica, sans-serif; font-size: large;">2.PHP code</span></b></div></b><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><br /> <ul style="background-color: white; color: #333333; line-height: 18px; list-style-type: square; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 15px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;"><li style="list-style-type: square; margin-bottom: 0px; margin-left: 20px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;">After installing XAMPP, just open up XAMPP directory.Then you will locate <i>htdocs</i> folder.Open that and create a new directory/folder.You can name it anything you want.Suppose the name of the new folder is <b>shutdown</b>.</span></li> <li style="list-style-type: square; margin-bottom: 0px; margin-left: 20px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;">Open the newly created folder <b>shutdown</b> and create a new file with <b>index.php</b> extension.</span></li> <li style="list-style-type: square; margin-bottom: 0px; margin-left: 20px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;">Now open up index.php file and place the nice little code if you run windows.</span></li> </ul><div style="text-align: -webkit-auto;"><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;"><span style="background-color: #f9f9f9; color: blue; line-height: 18px;"><?php</span><span style="background-color: #f9f9f9; color: blue; line-height: 18px;"> </span></span></div><span style="color: blue; font-family: Arial, Helvetica, sans-serif;"><div style="text-align: justify;"><span style="background-color: #f9f9f9; line-height: 18px;">echo 'Shutting down';</span><span style="background-color: #f9f9f9; line-height: 18px;"> </span></div><span style="background-color: #f9f9f9; line-height: 18px;"><div style="text-align: justify;">exec("shutdown -s -t 30"); //30 means shutdown after 30 seconds </div></span><span style="background-color: #f9f9f9; line-height: 18px;"><div style="text-align: justify;">?> </div></span></span></div><div style="text-align: justify;"><span style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span style="background-color: #f9f9f9; line-height: 18px;"><br /> </span></span></div><div style="text-align: justify;"><span style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span style="background-color: #f9f9f9; line-height: 18px;"><br /> </span></span></div><div style="text-align: -webkit-auto;"><div style="text-align: justify;"><b style="background-color: white; color: #333333; line-height: 18px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: large;">3.Creating URL </span></b></div><div style="text-align: justify;"><span style="color: #333333; line-height: 18px;"><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></span></div><span style="background-color: white; color: #333333; line-height: 18px;"><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;">Go to <a href="http://no-ip.com/" style="color: #7a3254; text-decoration: none;">n</a><a href="http://no-ip.com/" style="text-decoration: none;"><span style="color: blue;">o-ip.com</span></a><span style="color: blue;"> </span><span style="color: #333333;">and register a free sub-domain and point it to the the following</span></span></div></span><div style="text-align: justify;"><span style="color: #333333; line-height: 18px;"><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></span></div><span style="background-color: white; line-height: 18px;"><div style="text-align: justify;"><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">http://YOUR-IP-ADDRESS/shutdown/</span></div></span><div style="text-align: justify;"><span style="color: #333333; line-height: 18px;"><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></span></div><span style="background-color: white; color: #333333; line-height: 18px;"><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;">To find out your ip address just visit any site like <a href="http://checkmyip.com/" rel="nofollow" style="text-decoration: none;" target="new"><span style="color: blue;">http://checkmyip.com/</span></a>.</span></div></span><div style="text-align: justify;"><span style="color: #333333; line-height: 18px;"><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></span></div><span style="background-color: white; color: #333333; line-height: 18px;"><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;">That's it.Now you visit that link with no-ip subdomain from your mobile phone to shut down the computer.</span></div></span></div></div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/8472448211262689043-7778803447539824807?l=advancedphptutorial.blogspot.com' alt='' /></div><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=zBvbEKxImE4:-NI4ZeAgxJs:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=zBvbEKxImE4:-NI4ZeAgxJs:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=zBvbEKxImE4:-NI4ZeAgxJs:-BTjWOF_DHI"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=zBvbEKxImE4:-NI4ZeAgxJs:-BTjWOF_DHI" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=zBvbEKxImE4:-NI4ZeAgxJs:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=zBvbEKxImE4:-NI4ZeAgxJs:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=zBvbEKxImE4:-NI4ZeAgxJs:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=zBvbEKxImE4:-NI4ZeAgxJs:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=zBvbEKxImE4:-NI4ZeAgxJs:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=zBvbEKxImE4:-NI4ZeAgxJs:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=zBvbEKxImE4:-NI4ZeAgxJs:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=zBvbEKxImE4:-NI4ZeAgxJs:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=zBvbEKxImE4:-NI4ZeAgxJs:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=l6gmwiTKsz0" border="0"></img></a> </div>http://advancedphptutorial.blogspot.com/2012/01/shutdown-computer-from-mobile-using-php.htmlnoreply@blogger.com (LearnPHP)0tag:blogger.com,1999:blog-8472448211262689043.post-4548516374342652823Sun, 01 Jan 2012 17:05:00 +00002012-01-01T09:05:05.300-08:00CakePHPPHPJqueryEasy AJAX Pagination Using JQuery CakePHP<div dir="ltr" style="text-align: left;" trbidi="on"><br /> <div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;">I was working with CakePHP's Easy AJAX Pagination Using JQuery. I found this as a great code for sorting and paging with jQuery inCakePHP. But i faced a problem in Mozilla Firefox. It is not working in Mozilla Firefox. While in IE and Crome it works fine for me. </span></div><a name='more'></a><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span><br /> <div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;">For Mozilla Firefox when i debug it, it shows an error like "501 Method Not Implemented". I searched for this error and Google gives the solution likeClearing Cache and Cookie. But neither works for me. Finally i got the issue and the problem is in jQuery load function.</span></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;"><a href="http://bakery.cakephp.org/articles/view/easy-ajax-pagination-using-jquery">http://bakery.cakephp.org/articles/view/easy-ajax-pagination-using-jquery</a></span></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><br /> <div style="text-align: justify;"><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">/** </span></div><div style="text-align: justify;"><span style="color: blue; font-family: Arial, Helvetica, sans-serif;"> * Loads in a URL into a specified divName, and applies the function to</span></div><div style="text-align: justify;"><span style="color: blue; font-family: Arial, Helvetica, sans-serif;"> * all the links inside the pagination div of that page (to preserve the ajax-request) </span></div><div style="text-align: justify;"><span style="color: blue; font-family: Arial, Helvetica, sans-serif;"> * @param string href The URL of the page to load </span></div><div style="text-align: justify;"><span style="color: blue; font-family: Arial, Helvetica, sans-serif;"> * @param string divName The name of the DOM-element to load the data into </span></div><div style="text-align: justify;"><span style="color: blue; font-family: Arial, Helvetica, sans-serif;"> * @return boolean False To prevent the links from doing anything on their own.</span></div><div style="text-align: justify;"><span style="color: blue; font-family: Arial, Helvetica, sans-serif;"> */ </span></div><div style="text-align: justify;"><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">function loadPiece(href,divName) {     </span></div><div style="text-align: justify;"><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">    $(divName).load(href, {}, function(){ </span></div><div style="text-align: justify;"><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">        var divPaginationLinks = divName+" #pagination a";</span></div><div style="text-align: justify;"><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">        $(divPaginationLinks).click(function() {      </span></div><div style="text-align: justify;"><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">            var thisHref = $(this).attr("href"); </span></div><div style="text-align: justify;"><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">            loadPiece(thisHref,divName); </span></div><div style="text-align: justify;"><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">            return false; </span></div><div style="text-align: justify;"><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">        }); </span></div><div style="text-align: justify;"><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">    }); </span></div><div style="text-align: justify;"><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">} </span></div><div style="text-align: justify;"><span style="color: blue; font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;">If you open the above link and look at jQuery load function. They have passed the second parameter as {} for data. So that was the problem in Mozilla Firefox. You can remove the {} from jQuery load function. If you find any problem in this than let me know by comment.</span></div><br /> </div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/8472448211262689043-4548516374342652823?l=advancedphptutorial.blogspot.com' alt='' /></div><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=KXxgS9IMxjE:CQ6jo7Ncfy0:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=KXxgS9IMxjE:CQ6jo7Ncfy0:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=KXxgS9IMxjE:CQ6jo7Ncfy0:-BTjWOF_DHI"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=KXxgS9IMxjE:CQ6jo7Ncfy0:-BTjWOF_DHI" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=KXxgS9IMxjE:CQ6jo7Ncfy0:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=KXxgS9IMxjE:CQ6jo7Ncfy0:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=KXxgS9IMxjE:CQ6jo7Ncfy0:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=KXxgS9IMxjE:CQ6jo7Ncfy0:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=KXxgS9IMxjE:CQ6jo7Ncfy0:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=KXxgS9IMxjE:CQ6jo7Ncfy0:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=KXxgS9IMxjE:CQ6jo7Ncfy0:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=KXxgS9IMxjE:CQ6jo7Ncfy0:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=KXxgS9IMxjE:CQ6jo7Ncfy0:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=l6gmwiTKsz0" border="0"></img></a> </div>http://advancedphptutorial.blogspot.com/2012/01/easy-ajax-pagination-using-jquery.htmlnoreply@blogger.com (LearnPHP)0tag:blogger.com,1999:blog-8472448211262689043.post-9184569372195558548Tue, 27 Dec 2011 16:28:00 +00002011-12-27T08:28:57.903-08:00JavascriptHow to Reload iFrame – Works in FF, Crome, IE, Safari<div dir="ltr" style="text-align: left;" trbidi="on"><br /> <div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;">I was working with one web application and I placed a iFrame in it. I am making ajax call and updating iFrame files. Now I want to refresh only iFrame. I found many solution via Google and I tried many with my own idea to replace iFrame or load iFrame etc etc. </span></div><a name='more'></a><br /> <div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;">But none of them works in all browsers including IE. Some of them are working in FF, some of them in other browsers. I was looking for a solution which works in all browsers. Finally I found the one which works in all browsers.</span></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><b><span style="font-family: Arial, Helvetica, sans-serif;">Works in FF, IE, Crome, Safari :</span></b></div><div style="text-align: justify;"><b><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></b></div><div style="text-align: justify;"><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">document.getElementById("ifr").contentWindow.location.reload(true);</span></div><div style="text-align: justify;"><span style="color: blue; font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span style="background-color: white; color: #4e4e4e; line-height: 19px; text-align: -webkit-auto;"><b><span style="font-family: Arial, Helvetica, sans-serif;">Not Working :</span></b></span></div><div style="text-align: justify;"><span style="background-color: white; color: #4e4e4e; line-height: 19px; text-align: -webkit-auto;"><b><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></b></span></div><div style="text-align: justify;"><span style="background-color: white; line-height: 19px; text-align: -webkit-auto;"><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">document.getElementById("ifr").contentDocument.location.reload(true);</span></span></div><div style="text-align: justify;"><span style="background-color: white; line-height: 19px; text-align: -webkit-auto;"><span style="color: blue; font-family: Arial, Helvetica, sans-serif;"><br /> </span></span></div><div style="text-align: justify;"><span style="background-color: white; line-height: 19px; text-align: -webkit-auto;"><b><span style="font-family: Arial, Helvetica, sans-serif;">EX:</span></b></span></div><div style="text-align: justify;"><span style="background-color: white; line-height: 19px; text-align: -webkit-auto;"><b><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></b></span></div><div style="text-align: justify;"><span style="background-color: white; text-align: -webkit-auto;"><span style="font-family: Arial, Helvetica, sans-serif;"></span></span></div><div style="color: blue; line-height: 19px; text-align: -webkit-auto;"><span style="font-family: Arial, Helvetica, sans-serif;">var fr = document.getElementById("ifr");</span></div><div style="color: blue; line-height: 19px; text-align: -webkit-auto;"><span style="font-family: Arial, Helvetica, sans-serif;">if(fr!=null) </span></div><div style="color: blue; line-height: 19px; text-align: -webkit-auto;"><span style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>document.getElementById("previewiframe").removeChild(fr);</span></div><div style="color: blue; line-height: 19px; text-align: -webkit-auto;"><span style="font-family: Arial, Helvetica, sans-serif;">var iframehtml = '<iframe id="ifr" src="demo/index.php" width="300px" height="453px" style="z-index:-1;margin:auto;text-align:center; padding: 0 0 0 20px; border:none;"></iframe>';</span></div><div style="color: blue; line-height: 19px; text-align: -webkit-auto;"><span style="font-family: Arial, Helvetica, sans-serif;">document.getElementById("previewiframe").innerHTML = iframehtml;</span></div><div style="color: blue; line-height: 19px; text-align: -webkit-auto;"><span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: -webkit-auto;"><span style="font-family: Arial, Helvetica, sans-serif;"><span style="line-height: 19px;">Just changing contentDocument.location.reload() to contentWindow.location.reload() works fine in all browsers. It has problem in IE. iFrame reload was not working in IE but with the first code, it works in IE also. IE iFrame reloads resolved.</span></span></div><br /> </div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/8472448211262689043-9184569372195558548?l=advancedphptutorial.blogspot.com' alt='' /></div><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=Zme4nrSx7rM:zd3FlfWXJGA:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=Zme4nrSx7rM:zd3FlfWXJGA:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=Zme4nrSx7rM:zd3FlfWXJGA:-BTjWOF_DHI"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=Zme4nrSx7rM:zd3FlfWXJGA:-BTjWOF_DHI" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=Zme4nrSx7rM:zd3FlfWXJGA:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=Zme4nrSx7rM:zd3FlfWXJGA:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=Zme4nrSx7rM:zd3FlfWXJGA:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=Zme4nrSx7rM:zd3FlfWXJGA:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=Zme4nrSx7rM:zd3FlfWXJGA:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=Zme4nrSx7rM:zd3FlfWXJGA:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=Zme4nrSx7rM:zd3FlfWXJGA:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=Zme4nrSx7rM:zd3FlfWXJGA:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=Zme4nrSx7rM:zd3FlfWXJGA:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=l6gmwiTKsz0" border="0"></img></a> </div>http://advancedphptutorial.blogspot.com/2011/12/how-to-reload-iframe-works-in-ff-crome.htmlnoreply@blogger.com (LearnPHP)0tag:blogger.com,1999:blog-8472448211262689043.post-4267642809987775291Thu, 22 Dec 2011 16:28:00 +00002011-12-22T08:28:53.826-08:00htaccessBlock Proxy Server via .htaccess<div dir="ltr" style="text-align: left;" trbidi="on"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> I wrote .htaccess code for blocking proxy server. If you want to block proxy server using .htaccess than just write below code in .htaccess file and you rocks.</span><br /> <a name='more'></a><div><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">RewriteCond %{HTTP:VIA} !^$ [OR]</span></div><div><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">RewriteCond %{HTTP:FORWARDED} !^$ [OR]</span></div><div><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">RewriteCond %{HTTP:USERAGENT_VIA} !^$ [OR]</span></div><div><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">RewriteCond %{HTTP:X_FORWARDED_FOR} !^$ [OR]</span></div><div><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">RewriteCond %{HTTP:PROXY_CONNECTION} !^$ [OR]</span></div><div><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">RewriteCond %{HTTP:XPROXY_CONNECTION} !^$ [OR]</span></div><div><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">RewriteCond %{HTTP:HTTP_PC_REMOTE_ADDR} !^$ [OR]</span></div><div><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">RewriteCond %{HTTP:HTTP_CLIENT_IP} !^$</span></div><div><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">RewriteRule ^(.*)$ – [F]</span></div><div><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div><span class="Apple-style-span" style="background-color: white; color: #4e4e4e; line-height: 19px;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Block Proxy Server using .htaccess, Block Proxy Server via .htaccess, Block Proxy using .htaccess, .htaccess code for Block Proxy, .htaccess tricks for Proxy Block.</span></span></div></div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/8472448211262689043-4267642809987775291?l=advancedphptutorial.blogspot.com' alt='' /></div><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=AaB414ft2tA:d6sg4FtIKJw:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=AaB414ft2tA:d6sg4FtIKJw:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=AaB414ft2tA:d6sg4FtIKJw:-BTjWOF_DHI"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=AaB414ft2tA:d6sg4FtIKJw:-BTjWOF_DHI" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=AaB414ft2tA:d6sg4FtIKJw:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=AaB414ft2tA:d6sg4FtIKJw:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=AaB414ft2tA:d6sg4FtIKJw:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=AaB414ft2tA:d6sg4FtIKJw:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=AaB414ft2tA:d6sg4FtIKJw:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=AaB414ft2tA:d6sg4FtIKJw:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=AaB414ft2tA:d6sg4FtIKJw:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=AaB414ft2tA:d6sg4FtIKJw:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=AaB414ft2tA:d6sg4FtIKJw:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=l6gmwiTKsz0" border="0"></img></a> </div>http://advancedphptutorial.blogspot.com/2011/12/block-proxy-server-via-htaccess.htmlnoreply@blogger.com (LearnPHP)0tag:blogger.com,1999:blog-8472448211262689043.post-1535636027352267024Mon, 19 Dec 2011 16:47:00 +00002011-12-19T08:52:07.201-08:00PHPhtaccessHow to remove index.php from url using .htaccess (mod_rewrite)<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">For better <span class="Apple-style-span" style="color: blue;">SEO optimization</span> and make urls more <span class="Apple-style-span" style="color: blue;">search engine friendly</span> , remove index.php from URL and make it easier to read.</span><br /> <a name='more'></a><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Remove index.php from URL can be done by writing only two lines in your .htaccess(<span class="Apple-style-span" style="color: blue;">mod_rewrite in apache</span>) file. Before writing this rule in <span class="Apple-style-span" style="color: blue;">.htaccess</span> , make sure that your mod_rewrite is enabled(On) in your apache server. </span><br /> <span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span><br /> <span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Most probably mod_rewrite is enabled in Linux server but for windows server , you need to contact hosting people to make mod_rewrite enabled. You can check this by looking in <span class="Apple-style-span" style="color: blue;">phpinfo()</span>.</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span><br /> <span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Below is the Rules which will remove index.php from URL using .htaccess. Look at below links for .htaccess rules.</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span><br /> <span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /([^/]+/)*index\.php\ </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">HTTP/ RewriteRule ^(([^/]+/)*)index\.php$ http://www.%</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">{HTTP_HOST}/ [R=301,NS,L]</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"></span><br /> <div><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span><br /> <span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Redirect 301 means Moved Permanently so most search engines will remove index.php from URL.</span></div></div></div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/8472448211262689043-1535636027352267024?l=advancedphptutorial.blogspot.com' alt='' /></div><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=5cZ-n12Y8gQ:7-PFZ1f0t_E:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=5cZ-n12Y8gQ:7-PFZ1f0t_E:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=5cZ-n12Y8gQ:7-PFZ1f0t_E:-BTjWOF_DHI"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=5cZ-n12Y8gQ:7-PFZ1f0t_E:-BTjWOF_DHI" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=5cZ-n12Y8gQ:7-PFZ1f0t_E:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=5cZ-n12Y8gQ:7-PFZ1f0t_E:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=5cZ-n12Y8gQ:7-PFZ1f0t_E:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=5cZ-n12Y8gQ:7-PFZ1f0t_E:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=5cZ-n12Y8gQ:7-PFZ1f0t_E:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=5cZ-n12Y8gQ:7-PFZ1f0t_E:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=5cZ-n12Y8gQ:7-PFZ1f0t_E:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=5cZ-n12Y8gQ:7-PFZ1f0t_E:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=5cZ-n12Y8gQ:7-PFZ1f0t_E:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=l6gmwiTKsz0" border="0"></img></a> </div>http://advancedphptutorial.blogspot.com/2011/12/how-to-remove-indexphp-from-url-using.htmlnoreply@blogger.com (LearnPHP)0tag:blogger.com,1999:blog-8472448211262689043.post-4601278856440383961Thu, 15 Dec 2011 17:08:00 +00002011-12-15T09:08:26.618-08:00mysqlHashingMySQL password hashing<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;"><span class="Apple-style-span" style="background-color: white; color: #4d4d4f; line-height: 18px;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Whenever you upgrade your MySQL installation, make sure to upgrade any client that uses it.</span></span></div><div style="background-color: white; color: #4d4d4f; line-height: 18px; margin-bottom: 15px; margin-left: 0pt; margin-right: 0pt; margin-top: 10px; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; padding-top: 0pt; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">In some cases, clients that use a version prior to 4.1 will have a problem authenticating against the MySQL database if the latter has a post 4.1 version.</span><br /> <a name='more'></a></div><div style="background-color: white; color: #4d4d4f; line-height: 18px; margin-bottom: 15px; margin-left: 0pt; margin-right: 0pt; margin-top: 10px; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; padding-top: 0pt;"></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">The trick is that after 4.1 (i.e. 4.11 and up), MySQL changed the way it stores the passwords in the <strong style="margin-bottom: 0pt; margin-left: 0pt; margin-right: 0pt; margin-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; padding-top: 0pt;">user</strong> table inside the <strong style="margin-bottom: 0pt; margin-left: 0pt; margin-right: 0pt; margin-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; padding-top: 0pt;">mysql</strong> system database.</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span><br /> <span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Password hashes are now 41 bytes long instead of the old 16 bytes.</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="background-color: white; color: #4d4d4f; line-height: 18px; margin-bottom: 15px; margin-left: 0pt; margin-right: 0pt; margin-top: 10px; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; padding-top: 0pt; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">So for example, if your MySQL server is 5.0, while your <strong style="margin-bottom: 0pt; margin-left: 0pt; margin-right: 0pt; margin-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; padding-top: 0pt;">php-mysql</strong> library is 4.1, your web applications will fail to connect to the database. As such, it is recommended that you upgrade the client.</span></div><div style="background-color: white; margin-bottom: 15px; margin-left: 0pt; margin-right: 0pt; margin-top: 10px; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; padding-top: 0pt; text-align: justify;"><div style="color: #4d4d4f; line-height: 18px;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">In any case, MySQL offers a way to change the hash back into the old format. For the sake of argument, assume the user in question is <strong style="margin-bottom: 0pt; margin-left: 0pt; margin-right: 0pt; margin-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; padding-top: 0pt;">john</strong>, and you want to be able to connect using password <strong style="margin-bottom: 0pt; margin-left: 0pt; margin-right: 0pt; margin-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; padding-top: 0pt;">dummy</strong>. In this case, connect to your MySQL server from the prompt (SSH and use ‘mysql -u root -p mysql’ on linux, or go to your mysql/bin windows directory and execute the same query), then issue the following queries:</span></div><div style="color: #4d4d4f; line-height: 18px;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><br /> <span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">update user set Password=OLD_PASSWORD(‘dummy’) where User=’john’;</span></span><br /> <span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">flush privileges;</span></span><br /> <span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><br /> </span></span><br /> <span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"></span></span><br /> <span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">the OLD_PASSWORD() function will generate the old 16 bytes hash. The first query will eventually update the user password to use this hash. The second query is necessary in order for the MySQL service to re-read the new user privileges.</span><br /> <span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span><br /> <span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">PS: if your root password is not working, refer as well to the <a href="http://advancedphptutorial.blogspot.com/2011/12/resetting-your-mysql-root-password.html" target="_blank">guide on resetting it</a><span id="goog_763051767"></span><span id="goog_763051768"></span><a href="http://www.blogger.com/"></a>.</span><br /> <span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span><br /> <span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Alternatively, if your database has many users and you didn’t keep track of them, you can use the following query and it will return usernames that are using the new hash</span><br /> <span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span><br /> <span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">select distinct(User) from User where LENGTH(Password)!=41;</span><br /> <span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><br /> </span><br /> <span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><br /> </span><br /> <br /> </div></div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/8472448211262689043-4601278856440383961?l=advancedphptutorial.blogspot.com' alt='' /></div><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=R16kABIHdKY:ImjYLqN0ZPc:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=R16kABIHdKY:ImjYLqN0ZPc:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=R16kABIHdKY:ImjYLqN0ZPc:-BTjWOF_DHI"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=R16kABIHdKY:ImjYLqN0ZPc:-BTjWOF_DHI" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=R16kABIHdKY:ImjYLqN0ZPc:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=R16kABIHdKY:ImjYLqN0ZPc:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=R16kABIHdKY:ImjYLqN0ZPc:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=R16kABIHdKY:ImjYLqN0ZPc:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=R16kABIHdKY:ImjYLqN0ZPc:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=R16kABIHdKY:ImjYLqN0ZPc:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=R16kABIHdKY:ImjYLqN0ZPc:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=R16kABIHdKY:ImjYLqN0ZPc:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=R16kABIHdKY:ImjYLqN0ZPc:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=l6gmwiTKsz0" border="0"></img></a> </div>http://advancedphptutorial.blogspot.com/2011/12/mysql-password-hashing.htmlnoreply@blogger.com (LearnPHP)1tag:blogger.com,1999:blog-8472448211262689043.post-8355515689917200648Tue, 13 Dec 2011 17:17:00 +00002011-12-13T09:17:29.798-08:00PasswordsmysqlResetting your mysql root password<div dir="ltr" style="text-align: left;" trbidi="on"><br /> <br /> <div style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #2c2c29; margin-bottom: 15px; margin-top: 1px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px; padding-top: 2px; text-align: justify; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">It is quite frequent that an administrator simply forgets his mysql's root password.</span></div><div style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #2c2c29; margin-bottom: 15px; margin-top: 1px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px; padding-top: 2px; text-align: justify; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Luckily, it is quiet easy to reset it, here are the steps:</span></div><a name='more'></a><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span><br /> <ol style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #2c2c29; margin-bottom: 15px; margin-left: 30px; margin-right: 30px; margin-top: 15px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><li style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: justify; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">SSH as root to your machine</span></li> <li style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: justify; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Turn off the mysqld daemon if running</span></li> <ul style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 15px; margin-left: 30px; margin-right: 30px; margin-top: 15px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline; z-index: 30;"><li style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; list-style-image: initial; list-style-position: initial; list-style-type: circle; margin-bottom: 4px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: justify; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">RedHat/Fedora users can do so by executing:Â  service mysqld stop</span></li> </ul><li style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: justify; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Run safe_mysqld by executing:</span></li> <ul style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 15px; margin-left: 30px; margin-right: 30px; margin-top: 15px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline; z-index: 20;"><li style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; list-style-image: initial; list-style-position: initial; list-style-type: circle; margin-bottom: 4px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">safe_mysqld --skip-grant-tables</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">(this will run allow you to connect without a password)</span></div></li> </ul><li style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: justify; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Open a second shell / SSH again and execute:</span></li> <ul style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 15px; margin-left: 30px; margin-right: 30px; margin-top: 15px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline; z-index: 10;"><li style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; list-style-image: initial; list-style-position: initial; list-style-type: circle; margin-bottom: 4px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">mysql mysql</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">(to directly connect and select the mysql database which contains the user authentication data)</span></div></li> </ul><li style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: justify; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">On the mysql prompt, execute:</span></li> <ul style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 15px; margin-left: 30px; margin-right: 30px; margin-top: 15px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline; z-index: 0;"><li style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; list-style-image: initial; list-style-position: initial; list-style-type: circle; margin-bottom: 4px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">update user set password=password('newpassword') where user='root';</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">where newpassword is your newly chosen password.</span></div></li> </ul><li style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: justify; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">That's it! close everything and start your mysql daemon again:</span></li> <ul style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; margin-bottom: 15px; margin-left: 30px; margin-right: 30px; margin-top: 15px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline; z-index: -10;"><li style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; list-style-image: initial; list-style-position: initial; list-style-type: circle; margin-bottom: 4px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: justify; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">service mysqld start</span></li> </ul></ol><br /> </div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/8472448211262689043-8355515689917200648?l=advancedphptutorial.blogspot.com' alt='' /></div><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=mcP1he_MuLg:lMVZegv8M-o:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=mcP1he_MuLg:lMVZegv8M-o:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=mcP1he_MuLg:lMVZegv8M-o:-BTjWOF_DHI"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=mcP1he_MuLg:lMVZegv8M-o:-BTjWOF_DHI" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=mcP1he_MuLg:lMVZegv8M-o:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=mcP1he_MuLg:lMVZegv8M-o:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=mcP1he_MuLg:lMVZegv8M-o:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=mcP1he_MuLg:lMVZegv8M-o:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=mcP1he_MuLg:lMVZegv8M-o:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=mcP1he_MuLg:lMVZegv8M-o:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=mcP1he_MuLg:lMVZegv8M-o:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=mcP1he_MuLg:lMVZegv8M-o:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=mcP1he_MuLg:lMVZegv8M-o:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=l6gmwiTKsz0" border="0"></img></a> </div>http://advancedphptutorial.blogspot.com/2011/12/resetting-your-mysql-root-password.htmlnoreply@blogger.com (LearnPHP)1tag:blogger.com,1999:blog-8472448211262689043.post-1342766304830138518Sun, 11 Dec 2011 16:22:00 +00002011-12-11T08:22:15.115-08:00PHPmysqlSetting up MYSQL Database Replication<div dir="ltr" style="text-align: left;" trbidi="on"><br /> <div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Setting up a database replication is one of many steps that should be taken in order to preserve data, preventing any loss and making disaster recovery easier.Luckily, it’s easy with MySQL. So let’s suppose we have two servers running MySQL, one called host1 and the other host2.</span></div><a name='more'></a><br /> <div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Replication can be either master-master or master-slave. With a master-slave replication, the slave always replicates what the master database is executing. In master-master replication, both databases synchronize with each others.</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">For the purpose of this tutorial, a master-slave (here host1 and host2 respectively) scenario is examined.</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">First of all, open the mysql config file on host1 (usually found at /etc/my.cnf on linux, and c:\windows\my.ini on windows), and uncomment (remove the hash of) the following line:</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">#skip-networking</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Secondly, you need to specify the file where the master (host1) should log (write) the queries it’s executing. This will enable the slave (host2) to read these queries and execute them as well. As such, add a line such as:</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">log-bin = /path/to/mysql-bin.log</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">where the value above is the path to file where MySQL should be doing the logging. You could very well create a separate directory or use the default mysql installation directory (such as c:\program files\mysql\ on windows or /var/lib/mysql on linux)</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Then, you need to specify the name of the database in question. So if you’re setting up replication for one of your MySQL databases called ‘work_data’, then, this is the line you need to add to your MySQL config:</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">binlog-do-db = work_data</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Finally, you need to specify a server id, which says that this is the master server</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">server-id=1</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Save the config file and exit.</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Now you need to give host2 the permission to replicate the data. As such, a MySQL query needs to be issued on the master.</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">So on host1, login to the MySQL prompt (mysql -u root -pyour_root_password) (or PHPMyAdmin, etc… whatever you use), and issue the following statement:</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">grant replication slave on *.* to ‘username’@'%’ identified by ‘password’;</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Make sure to replace username and password with a credential of your choice. Do keep the single quotes though.</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">The % sign means that the slave can connect from any host. If you want it to be more secure, replace that with host2 (the slave’s hostname).</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">After all the above is done, restart the MySQL service (service mysqld restart (linux) or, net stop mysql, net start mysql (on windows)).</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">If the database had data earlier, make sure you dump it and load it on the slave before doing any of the above. Dumping data is easy and can be done by cd’ing to the MySQL bin directory and issuing:</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">mysqldump -Q -u root -pyour_root_password databasename > database_dump.sql</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">(replace the password and database name with the correct login). The whole database will now be in the file called database_dump.sql</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>To import it on host2, cd to the mysql bin directory and issue:</b></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">mysql -u root -pyour_root_password databasename < /path/to/the/file/database_dump.sql</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>The MySQL config file on host2 should have the following lines:</b></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">server-id=2</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">master-host = host1</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">master-user = username</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">master-password = password</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">master-port = 3306</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">where host1 is the master’s hostname/IP, and username and password are the credentials you used when granting replication access a few steps above. 3306 is the port MySQL is running on (which is the default)</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>Then start the slave process on host2 by issuing at the MySQL prompt:</b></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">start slave;</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>To make sure replication is working, issue the following SQL query on host1:</b></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">show slave status \G</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">(Slave_SQL_Running and Slave_IO_Running should report ‘Yes’)</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Good luck</span></div></div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/8472448211262689043-1342766304830138518?l=advancedphptutorial.blogspot.com' alt='' /></div><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=Rv1BjpAOCS0:WRfJg9-wWGM:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=Rv1BjpAOCS0:WRfJg9-wWGM:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=Rv1BjpAOCS0:WRfJg9-wWGM:-BTjWOF_DHI"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=Rv1BjpAOCS0:WRfJg9-wWGM:-BTjWOF_DHI" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=Rv1BjpAOCS0:WRfJg9-wWGM:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=Rv1BjpAOCS0:WRfJg9-wWGM:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=Rv1BjpAOCS0:WRfJg9-wWGM:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=Rv1BjpAOCS0:WRfJg9-wWGM:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=Rv1BjpAOCS0:WRfJg9-wWGM:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=Rv1BjpAOCS0:WRfJg9-wWGM:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=Rv1BjpAOCS0:WRfJg9-wWGM:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=Rv1BjpAOCS0:WRfJg9-wWGM:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=Rv1BjpAOCS0:WRfJg9-wWGM:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=l6gmwiTKsz0" border="0"></img></a> </div>http://advancedphptutorial.blogspot.com/2011/12/setting-up-mysql-database-replication.htmlnoreply@blogger.com (LearnPHP)1tag:blogger.com,1999:blog-8472448211262689043.post-4624049573775546334Wed, 30 Nov 2011 16:56:00 +00002011-11-30T08:56:23.195-08:00ExportPHPCSVmysqlExcelExport MYSQL data into Excel/CSV via php<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">Today i came across a functionality where i need to Export the MYSQL data into CSV/Excel file via PHP function/script. There are such requirement where client needs to Export the MYSQL data (Order data,Member data,Newsletter emails etc) into Excel sheet or CSV file for future reference or need to send to other team for future work. </div><a name='more'></a><br /> <br /> <div style="text-align: justify;">You can give a button or link from where client can click on it and get a Excel or CSV file with all data from MYSQL database tables using(through) PHP.</div><div style="text-align: justify;"><br /> </div><div style="text-align: justify;">Here i am sharing a function using which you can easily export the MYSQL data into Excel/CSV with a single click on button or link. If you are looking to export the filtered data than you can pass parameters into function and make a sql query accordingly. Do you know <a href="http://advancedphptutorial.blogspot.com/2011/11/import-csvexcel-data-into-mysql.html" target="_blank">how to Import CSV/Excel data into MYSQL </a>?</div><div style="text-align: justify;"><br /> </div><div style="text-align: justify;"></div><span class="Apple-style-span" style="color: blue;"><?php</span><br /> <span class="Apple-style-span" style="color: blue;">function export_excel_csv()</span><br /> <span class="Apple-style-span" style="color: blue;">{</span><br /> <span class="Apple-style-span" style="color: blue;">    $conn = mysql_connect("localhost","root","");</span><br /> <span class="Apple-style-span" style="color: blue;">    $db = mysql_select_db("database",$conn);</span><br /> <span class="Apple-style-span" style="color: blue;">    $sql = "SELECT * FROM table";</span><br /> <span class="Apple-style-span" style="color: blue;">    $rec = mysql_query($sql) or die (mysql_error());</span><br /> <span class="Apple-style-span" style="color: blue;">    $num_fields = mysql_num_fields($rec);</span><br /> <span class="Apple-style-span" style="color: blue;">    for($i = 0; $i < $num_fields; $i++ )</span><br /> <span class="Apple-style-span" style="color: blue;">    {</span><br /> <span class="Apple-style-span" style="color: blue;">        $header .= mysql_field_name($rec,$i)."\\t";</span><br /> <span class="Apple-style-span" style="color: blue;">    }</span><br /> <span class="Apple-style-span" style="color: blue;">    while($row = mysql_fetch_row($rec))</span><br /> <span class="Apple-style-span" style="color: blue;">    {</span><br /> <span class="Apple-style-span" style="color: blue;">        $line = '';</span><br /> <span class="Apple-style-span" style="color: blue;">        foreach($row as $value)</span><br /> <span class="Apple-style-span" style="color: blue;">        {                                            </span><br /> <span class="Apple-style-span" style="color: blue;">            if((!isset($value)) || ($value == ""))</span><br /> <span class="Apple-style-span" style="color: blue;">            {</span><br /> <span class="Apple-style-span" style="color: blue;">                $value = "\\t";</span><br /> <span class="Apple-style-span" style="color: blue;">            }</span><br /> <span class="Apple-style-span" style="color: blue;">            else</span><br /> <span class="Apple-style-span" style="color: blue;">            {</span><br /> <span class="Apple-style-span" style="color: blue;">                $value = str_replace( '"' , '""' , $value );</span><br /> <span class="Apple-style-span" style="color: blue;">                $value = '"' . $value . '"' . "\\t";</span><br /> <span class="Apple-style-span" style="color: blue;">            }</span><br /> <span class="Apple-style-span" style="color: blue;">            $line .= $value;</span><br /> <span class="Apple-style-span" style="color: blue;">        }</span><br /> <span class="Apple-style-span" style="color: blue;">        $data .= trim( $line ) . "\\n";</span><br /> <span class="Apple-style-span" style="color: blue;">    }</span><br /> <span class="Apple-style-span" style="color: blue;">    $data = str_replace("\\r" , "" , $data);</span><br /> <span class="Apple-style-span" style="color: blue;">    if ($data == "")</span><br /> <span class="Apple-style-span" style="color: blue;">    {</span><br /> <span class="Apple-style-span" style="color: blue;">        $data = "\\n No Record Found!\n";                        </span><br /> <span class="Apple-style-span" style="color: blue;">    }</span><br /> <span class="Apple-style-span" style="color: blue;">    header("Content-type: application/octet-stream");</span><br /> <span class="Apple-style-span" style="color: blue;">    header("Content-Disposition: attachment; filename=reports.xls");</span><br /> <span class="Apple-style-span" style="color: blue;">    header("Pragma: no-cache");</span><br /> <span class="Apple-style-span" style="color: blue;">    header("Expires: 0");</span><br /> <span class="Apple-style-span" style="color: blue;">    print "$header\\n$data";</span><br /> <span class="Apple-style-span" style="color: blue;">}</span><br /> <span class="Apple-style-span" style="color: blue;">?></span><br /> <br /> <b>What you need to do is…</b><br /> 1) Copy above function and paste it into your file.<br /> 2) Change MYSQL connection settings in mysql_connect("localhost","root","").<br /> 3) Change database name in mysql_select_db("database",$conn)<br /> 4) Change table name in $sql = "SELECT * FROM table".<br /> 5) Thats it.<br /> <br /> Let me know your thoughts for the same. If you face any problem in this than let me know via comment<br /> </div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/8472448211262689043-4624049573775546334?l=advancedphptutorial.blogspot.com' alt='' /></div><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=BAfT4w-oyGw:K8D1Ma1ICPs:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=BAfT4w-oyGw:K8D1Ma1ICPs:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=BAfT4w-oyGw:K8D1Ma1ICPs:-BTjWOF_DHI"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=BAfT4w-oyGw:K8D1Ma1ICPs:-BTjWOF_DHI" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=BAfT4w-oyGw:K8D1Ma1ICPs:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=BAfT4w-oyGw:K8D1Ma1ICPs:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=BAfT4w-oyGw:K8D1Ma1ICPs:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=BAfT4w-oyGw:K8D1Ma1ICPs:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=BAfT4w-oyGw:K8D1Ma1ICPs:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=BAfT4w-oyGw:K8D1Ma1ICPs:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=BAfT4w-oyGw:K8D1Ma1ICPs:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=BAfT4w-oyGw:K8D1Ma1ICPs:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=BAfT4w-oyGw:K8D1Ma1ICPs:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=l6gmwiTKsz0" border="0"></img></a> </div>http://advancedphptutorial.blogspot.com/2011/11/export-mysql-data-into-excelcsv-via-php.htmlnoreply@blogger.com (LearnPHP)0tag:blogger.com,1999:blog-8472448211262689043.post-6803570953065146817Sun, 27 Nov 2011 17:01:00 +00002011-11-27T09:01:29.527-08:00PHPCSVmysqlExcelImport CSV/Excel data into MYSQL database via PHP<div dir="ltr" style="text-align: left;" trbidi="on"><br /> <div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Today i came across a functionality where i need to import the CSV/Excel file in to <a href="http://advancedphptutorial.blogspot.com/search/label/mysql" target="_blank">MYSQL </a>database via <a href="http://advancedphptutorial.blogspot.com/search/label/PHP" target="_blank">PHP </a>script. There is a special requirement from client where he can upload the CSV/Excel file in file upload field in HTML form and all data from CSV/Excel must import into <a href="http://advancedphptutorial.blogspot.com/search/label/mysql" target="_blank">MYSQL</a> database table through <a href="http://advancedphptutorial.blogspot.com/search/label/PHP" target="_blank">PHP</a>.</span></div><a name='more'></a><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">You can import data of <b>CSV/Excel</b> into <b>MYSQL </b>via <b>PHP </b>using <span class="Apple-style-span" style="color: blue;">fgetcsv()</span> function along with some file handling functions. Here i would like to share that script with all of you. I hope that in future this article will be helpful to you when you need to implement this type of functionality.</span></div><br /> <div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><br /> <div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">if(isset($_POST['SUBMIT']))</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">{</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">     $fname = $_FILES['sel_file']['name'];</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">     $chk_ext = explode(".",$fname);</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">     if(strtolower($chk_ext[1]) == "csv")</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">     {</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">         $filename = $_FILES['sel_file']['tmp_name'];</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">         $handle = fopen($filename, "r");</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">         while (($data = fgetcsv($handle, 1000, ",")) !== FALSE)</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">         {</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">            $sql = "INSERT into user(name,email,phone) values('$data[0]','$data[1]','$data[2]')";</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">            mysql_query($sql) or die(mysql_error());</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">         }</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">         fclose($handle);</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">         echo "Successfully Imported";</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">     }</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">     else</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">     {</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">         echo "Invalid File";</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">     }    </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">}</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><form action='<?php echo $_SERVER["PHP_SELF"];?>' method='post'></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">    Import File : <input type='text' name='sel_file' size='20'></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">    <input type='submit' name='submit' value='submit'></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"></form></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><br /> <div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Above code will first check for <b>valid csv file</b>. If it is valid csv file than with the use of <span class="Apple-style-span" style="color: blue;">fopen()</span> function , uploaded file will be opened in read mode. Now using <span class="Apple-style-span" style="color: blue;">fgetcsv()</span> function , you will have a line by line data from csv file. </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Each line you will get is an array with all column values.  So now you have all data from csv file. You can play with them according to your needs. I have shown an example to insert 3 data in database table user. If your csv file contains more data than you will get in <span class="Apple-style-span" style="color: blue;">$data[0]</span> , <span class="Apple-style-span" style="color: blue;">$data[1]</span>, <span class="Apple-style-span" style="color: blue;">$data[2],$data[3]</span> and so on..</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Thats it. Let me know your thoughts for the same. If you face any problem in this than let me know via comme</span>nt</div><br /> </div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/8472448211262689043-6803570953065146817?l=advancedphptutorial.blogspot.com' alt='' /></div><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=5o-_gX3sj3o:osKl-NAZbh0:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=5o-_gX3sj3o:osKl-NAZbh0:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=5o-_gX3sj3o:osKl-NAZbh0:-BTjWOF_DHI"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=5o-_gX3sj3o:osKl-NAZbh0:-BTjWOF_DHI" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=5o-_gX3sj3o:osKl-NAZbh0:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=5o-_gX3sj3o:osKl-NAZbh0:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=5o-_gX3sj3o:osKl-NAZbh0:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=5o-_gX3sj3o:osKl-NAZbh0:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=5o-_gX3sj3o:osKl-NAZbh0:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=5o-_gX3sj3o:osKl-NAZbh0:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=5o-_gX3sj3o:osKl-NAZbh0:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=5o-_gX3sj3o:osKl-NAZbh0:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=5o-_gX3sj3o:osKl-NAZbh0:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=l6gmwiTKsz0" border="0"></img></a> </div>http://advancedphptutorial.blogspot.com/2011/11/import-csvexcel-data-into-mysql.htmlnoreply@blogger.com (LearnPHP)0tag:blogger.com,1999:blog-8472448211262689043.post-6610049090400092169Sun, 27 Nov 2011 16:49:00 +00002011-11-27T08:49:13.792-08:00CSSForce a vertical scroll bar in non-IE browsers to avoid page jump<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 24px;">Webpages that don’t fit vertically in the browser window have a vertical scroll bar, pages that do fit in the browser window don’t have this scroll bar. All is great until you click from a short page to a tall page and the content ‘jumps’, in order to make room for the scroll bar. </span></span></div><a name='more'></a><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span><br /> <div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 24px;">If you’re a developer you’re used to this and probably don’t even notice it. I’ve had multiple clients ask me why the page jumps and have had to explain the reasoning, just to hear </span><em style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-style: initial; border-top-width: 0px; line-height: 24px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto; vertical-align: baseline;">“oooh that’s weeeird, isn’t it???”</em><span class="Apple-style-span" style="line-height: 24px; text-align: -webkit-auto;">. </span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 24px; text-align: -webkit-auto;"><br /> </span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 24px; text-align: -webkit-auto;">No, I just explained it. Anyway, to avoid this conversation, add the following CSS to your style sheet. This code forces the vertical scroll bar, and </span><em style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-style: initial; border-top-width: 0px; line-height: 24px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto; vertical-align: baseline;">voila</em><span class="Apple-style-span" style="line-height: 24px; text-align: -webkit-auto;">, no more page jumps or calls from the client.</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 24px; text-align: -webkit-auto;"><br /> </span></span></div><div style="text-align: justify;"></div><pre style="text-align: -webkit-auto;"><span class="Apple-style-span" style="color: blue;">html { overflow-y: scroll }</span></pre><pre style="text-align: -webkit-auto;"><span class="Apple-style-span" style="color: blue;"> </span></pre><pre style="text-align: -webkit-auto;"><span class="Apple-style-span" style="color: blue;"> </span></pre></div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/8472448211262689043-6610049090400092169?l=advancedphptutorial.blogspot.com' alt='' /></div><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=jcaAKzmXUK0:oGlVxlgGtCg:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=jcaAKzmXUK0:oGlVxlgGtCg:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=jcaAKzmXUK0:oGlVxlgGtCg:-BTjWOF_DHI"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=jcaAKzmXUK0:oGlVxlgGtCg:-BTjWOF_DHI" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=jcaAKzmXUK0:oGlVxlgGtCg:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=jcaAKzmXUK0:oGlVxlgGtCg:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=jcaAKzmXUK0:oGlVxlgGtCg:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=jcaAKzmXUK0:oGlVxlgGtCg:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=jcaAKzmXUK0:oGlVxlgGtCg:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=jcaAKzmXUK0:oGlVxlgGtCg:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=jcaAKzmXUK0:oGlVxlgGtCg:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=jcaAKzmXUK0:oGlVxlgGtCg:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=jcaAKzmXUK0:oGlVxlgGtCg:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=l6gmwiTKsz0" border="0"></img></a> </div>http://advancedphptutorial.blogspot.com/2011/11/force-vertical-scroll-bar-in-non-ie.htmlnoreply@blogger.com (LearnPHP)0tag:blogger.com,1999:blog-8472448211262689043.post-187269562550987823Tue, 22 Nov 2011 16:38:00 +00002011-11-22T08:38:56.500-08:00TwitterAdd the New Twitter Follow Button to Your Website<div dir="ltr" style="text-align: left;" trbidi="on"><br /> <div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Now your website users can follow you on Twitter with one click, instead of needing to visit your actual Twitter webpage and potentially lose track of your website.</span></div><a name='more'></a><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span><br /> <div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">The process of embedding the new Twitter follow button on your website or blog is extremely easy. Click here to get your own code. Once you get the code for your Twitter name simply embed it into your website or blog (template PHP files if you’re using WordPress), and upload your files. The end result will look like this (try it out!):</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-YsZYCSeQWXQ/TsvQETJIfiI/AAAAAAAAAJo/eBnPjQJOty0/s1600/twitter-follow-button1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="253" src="http://3.bp.blogspot.com/-YsZYCSeQWXQ/TsvQETJIfiI/AAAAAAAAAJo/eBnPjQJOty0/s400/twitter-follow-button1.jpg" width="400" /></a></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div></div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/8472448211262689043-187269562550987823?l=advancedphptutorial.blogspot.com' alt='' /></div><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=jomKjF53ruE:BXy1EhJLdd4:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=jomKjF53ruE:BXy1EhJLdd4:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=jomKjF53ruE:BXy1EhJLdd4:-BTjWOF_DHI"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=jomKjF53ruE:BXy1EhJLdd4:-BTjWOF_DHI" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=jomKjF53ruE:BXy1EhJLdd4:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=jomKjF53ruE:BXy1EhJLdd4:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=jomKjF53ruE:BXy1EhJLdd4:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=jomKjF53ruE:BXy1EhJLdd4:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=jomKjF53ruE:BXy1EhJLdd4:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=jomKjF53ruE:BXy1EhJLdd4:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=jomKjF53ruE:BXy1EhJLdd4:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=jomKjF53ruE:BXy1EhJLdd4:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=jomKjF53ruE:BXy1EhJLdd4:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=l6gmwiTKsz0" border="0"></img></a> </div>http://advancedphptutorial.blogspot.com/2011/11/add-new-twitter-follow-button-to-your.htmlnoreply@blogger.com (LearnPHP)1tag:blogger.com,1999:blog-8472448211262689043.post-5726644060875623729Sun, 20 Nov 2011 17:01:00 +00002011-11-20T09:01:16.059-08:00DomainSEOhtaccessURLForce WWW onto Domain Name URLs for SEO with .htaccess<div dir="ltr" style="text-align: left;" trbidi="on"><br /> <div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">You can get to a website by typing http://mydomain.com or by typing http://www.mydomain.com. So should this matter to you as a developer? Yup. Google doesn’t like when you have duplicate content on a website.</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"></span></div><a name='more'></a><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span><br /> <div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">To make sure that Google doesn’t consider the content, or traffic, to the ‘non-www’ and the ‘www’ versions the same, it’s a good idea to either force the www, or to force remove the www from the URL when people enter the site. This way no matter what people enter as the URL, the effect is the same to your site.</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">So which to use? It’s up to you. From personal experience I’ve found that business owners tend to want the www if givin the choice, where people that actually know what they’re talking about  like shorter URLs and prefer to remove the www. </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">I HATE seeing the ‘www’, both in URLs, and while we’re at it in any type of advertising, business cards, etc. The ‘.com’ implies the ‘www’, duuuh.</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Below is the code you’ll need to add to your .htaccess file to either remove or to add the www to the URL.</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"></div><pre style="text-align: -webkit-auto;"><span class="Apple-style-span" style="color: blue;"># ---------------------------------------------------------------------- # Start rewrite engine # ---------------------------------------------------------------------- <IfModule mod_rewrite.c> RewriteEngine On </IfModule> # Option 1: # Rewrite "www.domain.com -> domain.com" <IfModule mod_rewrite.c> RewriteCond %{HTTPS} !=on RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC] RewriteRule ^(.*)$ http://%1/$1 [R=301,L] </IfModule> # ---------------------------------------------------------------------- # Option 2: # To rewrite "domain.com -> www.domain.com" uncomment the following lines. # <IfModule mod_rewrite.c> # RewriteCond %{HTTPS} !=on # RewriteCond %{HTTP_HOST} !^www\..+$ [NC] # RewriteCond %{HTTP_HOST} (.+)$ [NC] # RewriteRule ^(.*)$ http://www.%1/$1 [R=301,L] # </IfModule></span></pre><pre style="text-align: -webkit-auto;"><span class="Apple-style-span" style="color: blue;"> </span></pre><pre style="text-align: -webkit-auto;"><span class="Apple-style-span" style="color: blue;"> </span></pre><pre style="text-align: -webkit-auto;"><em style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-style: initial; border-top-width: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 24px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline; white-space: normal;">code from <a href="http://html5boilerplate.com/" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-style: initial; border-top-width: 0px; color: #0167ab; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;">html5boilerplate.com</a></em></pre><pre style="text-align: -webkit-auto;"></pre><pre style="text-align: -webkit-auto;"></pre><br /> </div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/8472448211262689043-5726644060875623729?l=advancedphptutorial.blogspot.com' alt='' /></div><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=TaxoywrR7H8:oYj8Yg6g8rc:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=TaxoywrR7H8:oYj8Yg6g8rc:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=TaxoywrR7H8:oYj8Yg6g8rc:-BTjWOF_DHI"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=TaxoywrR7H8:oYj8Yg6g8rc:-BTjWOF_DHI" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=TaxoywrR7H8:oYj8Yg6g8rc:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=TaxoywrR7H8:oYj8Yg6g8rc:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=TaxoywrR7H8:oYj8Yg6g8rc:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=TaxoywrR7H8:oYj8Yg6g8rc:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=TaxoywrR7H8:oYj8Yg6g8rc:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=TaxoywrR7H8:oYj8Yg6g8rc:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=TaxoywrR7H8:oYj8Yg6g8rc:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=TaxoywrR7H8:oYj8Yg6g8rc:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=TaxoywrR7H8:oYj8Yg6g8rc:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=l6gmwiTKsz0" border="0"></img></a> </div>http://advancedphptutorial.blogspot.com/2011/11/force-www-onto-domain-name-urls-for-seo.htmlnoreply@blogger.com (LearnPHP)4tag:blogger.com,1999:blog-8472448211262689043.post-1670104233001144049Sun, 06 Nov 2011 16:39:00 +00002011-11-06T08:39:27.640-08:00PHPTwitterJqueryEmbed a Twitter Feed on your website with jQuery<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 24px;">In a </span><a href="http://advancedphptutorial.blogspot.com/2011/11/how-to-embed-twitter-feed-on-your.html" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-style: initial; border-top-width: 0px; color: #0167ab; line-height: 24px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto; text-decoration: none; vertical-align: baseline;" target="_blank">previous post</a><span class="Apple-style-span" style="line-height: 24px; text-align: -webkit-auto;"> I showed possibly the easiest way to embed a Twitter feed on your website. This brought up a couple of questions from some users.</span></span></div><a name='more'></a><br /> <div style="text-align: justify;"><span class="Apple-style-span" style="line-height: 24px; text-align: -webkit-auto;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></span></div><span class="Apple-style-span" style="line-height: 24px; text-align: -webkit-auto;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"></span></span><br /> <div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>1. Can you make a background behind individual Tweets?</b></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>2. Can you put the date on it’s own separate line?</b></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">As the case goes with a lot of things these days jQuery to the rescue!</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">The jQuery and CSS code to make this happen came from Chris over at CSS-Tricks. I slimmed down and edited it to make it work for me. Here is a zip of the files used for the demo so you can download and edit it as you want.</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://webdesignandsuch.com/posts/jQuery-twitter/jQuery-twitter.zip" target="_blank">Click Here to Download</a></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">You’ll see in the head of the index page the jQuery which makes it work. The line you need to change is the following:</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">http://twitter.com/status/user_timeline/ilz_.json?count=5&callback=?</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"></span><br /> <div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">First replace the part I highlighted in Blue “ilz_” with your Twitter user name.</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Next, replace “count=5? with the number of tweets you want to show up on your page.</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Other than that, you should be able to style the rest of the text, links, etc. as long as you know basic CSS. Enjoy!</span></div><br /> <div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">For More Details : <a href="http://webdesignandsuch.com/embed-a-twitter-feed-on-your-website-with-jquery/" target="_blank">Click  Here</a></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><br /> </div></div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/8472448211262689043-1670104233001144049?l=advancedphptutorial.blogspot.com' alt='' /></div><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=1DvKfg0UJuM:X-B6MKoYmdk:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=1DvKfg0UJuM:X-B6MKoYmdk:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=1DvKfg0UJuM:X-B6MKoYmdk:-BTjWOF_DHI"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=1DvKfg0UJuM:X-B6MKoYmdk:-BTjWOF_DHI" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=1DvKfg0UJuM:X-B6MKoYmdk:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=1DvKfg0UJuM:X-B6MKoYmdk:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=1DvKfg0UJuM:X-B6MKoYmdk:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=1DvKfg0UJuM:X-B6MKoYmdk:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=1DvKfg0UJuM:X-B6MKoYmdk:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=1DvKfg0UJuM:X-B6MKoYmdk:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=1DvKfg0UJuM:X-B6MKoYmdk:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=1DvKfg0UJuM:X-B6MKoYmdk:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=1DvKfg0UJuM:X-B6MKoYmdk:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=l6gmwiTKsz0" border="0"></img></a> </div>http://advancedphptutorial.blogspot.com/2011/11/embed-twitter-feed-on-your-website-with.htmlnoreply@blogger.com (LearnPHP)0tag:blogger.com,1999:blog-8472448211262689043.post-1923098301370192765Thu, 03 Nov 2011 17:28:00 +00002011-11-03T10:32:32.003-07:00PHPTwitterHow to embed a Twitter Feed on your website<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">One of the great things about Twitter is that you rarely ever go to the actual site. You can use a program like Tweetie or TweetDeck to send all your Tweets. Another great thing is the ability to embed your recent Tweets onto other websites. It’s a rather simple process, so check out my demo and then keep reading to learn how you can embed your Tweets on your page.</div><a name='more'></a><span class="Apple-style-span" style="color: blue;"><br /> </span><br /> <span class="Apple-style-span" style="color: blue;"><script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script></span><br /> <span class="Apple-style-span" style="color: blue;"><script type="text/javascript" src="http://twitter.com/statuses/user_timeline/learnphp123.json?callback=twitterCallback2&count=3"></script></span><br /> <span class="Apple-style-span" style="color: blue;"><br /> </span><br /> <br /> Copy the above code and paste it right into your XHTML code on your webpage, (right in the body).<br /> <br /> All you need to do is replace where I have “<span class="Apple-style-span" style="color: blue;">learnphp123</span>”. That is my Twitter user name, replace it with yours.<br /> <br /> The other thing you get to decide is how many of the most recent posts you want to show. Change the part where it says “count=1? to however many Tweets you want to show up.<br /> <br /> So that’s all there is to it.. how you style the text, links, and surrounding environment for the feed is up to you and your creativity.<br /> <br /> </div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/8472448211262689043-1923098301370192765?l=advancedphptutorial.blogspot.com' alt='' /></div><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=XIC_eM_aHk8:MDv4B0TPOKk:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=XIC_eM_aHk8:MDv4B0TPOKk:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=XIC_eM_aHk8:MDv4B0TPOKk:-BTjWOF_DHI"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=XIC_eM_aHk8:MDv4B0TPOKk:-BTjWOF_DHI" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=XIC_eM_aHk8:MDv4B0TPOKk:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=XIC_eM_aHk8:MDv4B0TPOKk:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=XIC_eM_aHk8:MDv4B0TPOKk:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=XIC_eM_aHk8:MDv4B0TPOKk:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=XIC_eM_aHk8:MDv4B0TPOKk:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=XIC_eM_aHk8:MDv4B0TPOKk:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=XIC_eM_aHk8:MDv4B0TPOKk:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=XIC_eM_aHk8:MDv4B0TPOKk:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=XIC_eM_aHk8:MDv4B0TPOKk:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=l6gmwiTKsz0" border="0"></img></a> </div>http://advancedphptutorial.blogspot.com/2011/11/how-to-embed-twitter-feed-on-your.htmlnoreply@blogger.com (LearnPHP)0tag:blogger.com,1999:blog-8472448211262689043.post-3598552670857548778Thu, 27 Oct 2011 16:11:00 +00002011-10-27T09:11:48.360-07:00PHPJqueryEmbed a Flickr feed on your website with jQuery<div dir="ltr" style="text-align: left;" trbidi="on">Looking for a quick way to pull your Flickr photos onto your website? Using a lil bit of jQuery and the code below you can pull the latest photos right onto your webpage.<br /> <a name='more'></a><br /> <br /> <div class="separator" style="clear: both; text-align: center;"><img border="0" height="200" src="http://4.bp.blogspot.com/-IsrgAbOj6dU/Tql6M0rgldI/AAAAAAAAAJY/C-ezUHf5msU/s400/flickr.jpg" width="400" /></div><br /> Here’s the code you need to add to your head. Don’t forget to link to jQuery of course.<br /> <br /> <br /> <pre style="text-align: -webkit-auto;"><span class="Apple-style-span" style="color: blue;"><script type="text/javascript" charset="utf-8"> $(document).ready(function() { $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=50856633@N07&format=json&jsoncallback=?", function(data) { var target = "#flickr-div"; // Name of div surrounding images. for (i = 0; i <= 9; i = i + 1) { // Loop through the 10 most recent, [0-9] var pic = data.items[i]; var liNumber = i + 1; // Add class to each LI (1-10) $(target).append("<a title='" + pic.title + "' href='" + pic.link + "'><img src='" + pic.media.m + "' /></a>"); } }); }); </script></span></pre><pre style="text-align: -webkit-auto;"><span class="Apple-style-span" style="color: blue;"> </span></pre><pre style="text-align: -webkit-auto;">Replace <b>50856633@N07</b> with your Flickr account number. You can also change the number of images being pulled onto the page.</pre><pre style="text-align: -webkit-auto;"></pre><pre style="text-align: -webkit-auto;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 24px; white-space: normal;">*original code from </span><a href="http://css-tricks.com/snippets/jquery/show-most-recent-flickr-uploads/" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-style: initial; border-top-width: 0px; color: #0167ab; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 24px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline; white-space: normal;">CSS-TRICKS</a></pre><pre style="text-align: -webkit-auto;"></pre><pre style="text-align: -webkit-auto;"></pre></div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/8472448211262689043-3598552670857548778?l=advancedphptutorial.blogspot.com' alt='' /></div><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=R7xKslMRGIo:nnPi4ORiDKg:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=R7xKslMRGIo:nnPi4ORiDKg:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=R7xKslMRGIo:nnPi4ORiDKg:-BTjWOF_DHI"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=R7xKslMRGIo:nnPi4ORiDKg:-BTjWOF_DHI" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=R7xKslMRGIo:nnPi4ORiDKg:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=R7xKslMRGIo:nnPi4ORiDKg:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=R7xKslMRGIo:nnPi4ORiDKg:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=R7xKslMRGIo:nnPi4ORiDKg:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=R7xKslMRGIo:nnPi4ORiDKg:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=R7xKslMRGIo:nnPi4ORiDKg:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=R7xKslMRGIo:nnPi4ORiDKg:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=R7xKslMRGIo:nnPi4ORiDKg:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=R7xKslMRGIo:nnPi4ORiDKg:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=l6gmwiTKsz0" border="0"></img></a> </div>http://advancedphptutorial.blogspot.com/2011/10/embed-flickr-feed-on-your-website-with.htmlnoreply@blogger.com (LearnPHP)0tag:blogger.com,1999:blog-8472448211262689043.post-5545875959773014872Tue, 25 Oct 2011 16:38:00 +00002011-10-25T09:38:29.673-07:00Using Smooth Scroll with Page Anchors and Javascript<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: left;"></div><div class="separator" style="clear: both; text-align: left;">Using page anchors is a pretty basic web design technique. If you want to link to a certain part of a page you create an “Anchor” at that part of the page. This anchor is what you point your link at. You can link to an anchor on the current page, or to an anchor on a certain part of another page. </div><a name='more'></a><br /> <br /> <div class="separator" style="clear: both; text-align: left;">Useful, but not all that exciting. There is, however a quick way to make even the simple act of scrolling up and down a page more visually appealing. It’s called Smooth Scroll. Check out my demo to see this in action, and then keep reading to learn how to add Smooth Scroll to your website.</div><div class="separator" style="clear: both; text-align: left;"><br /> </div><br /> <div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-rfIgIPEQ7vA/TqbkRvg_pTI/AAAAAAAAAJQ/Hk1wYoeewOc/s1600/smooth-scroll.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="http://4.bp.blogspot.com/-rfIgIPEQ7vA/TqbkRvg_pTI/AAAAAAAAAJQ/Hk1wYoeewOc/s400/smooth-scroll.jpg" width="400" /></a></div><div class="separator" style="clear: both; text-align: left;"><br /> </div><div class="separator" style="clear: both; text-align: left;">So lets start with the basics. To add an anchor on your page add the following in the place that you want you page to scroll to.</div><div class="separator" style="clear: both; text-align: left;"><br /> </div><div class="separator" style="clear: both; text-align: left;"><span class="Apple-style-span" style="color: blue;"><a name=”bottom” id=”bottom”></a></span></div><div class="separator" style="clear: both; text-align: left;"><span class="Apple-style-span" style="color: blue;"><br /> </span></div><div class="separator" style="clear: both; text-align: left;"></div><div class="separator" style="clear: both; text-align: left;">Then to point your link at this anchor, use the following. (This is to point to an anchor on the same page as the link.)</div><div class="separator" style="clear: both; text-align: left;"><br /> </div><div class="separator" style="clear: both; color: blue; text-align: left;"><p><a href=”#bottom”>Bottom of the page</a></p></div><div class="separator" style="clear: both; color: blue; text-align: left;"><br /> </div><div class="separator" style="clear: both; text-align: left;">In case you were wondering, the following is how to point at an anchor on a different page.</div><div class="separator" style="clear: both; color: blue; text-align: left;"><br /> </div><div class="separator" style="clear: both; color: blue; text-align: left;"><p><a href=”pageName.html#bottom”>Bottom of the page</a></p></div><div class="separator" style="clear: both; text-align: left;"><br /> </div><div class="separator" style="clear: both; text-align: left;">All you need for the Javascript Smooth Scroll effect is to link to the JS file, it does everything else for you.</div><div class="separator" style="clear: both; text-align: left;"><br /> </div><div class="separator" style="clear: both; text-align: left;"></div><div class="separator" style="clear: both; text-align: left;">You’ll see the zip has all original files for the Smooth Scroll. Now I give credit where it’s due, this entire zip is from <a href="http://www.dezinerfolio.com/" target="_blank">DezinerFolio</a>. Make sure you check those guys out for some great freebies and code.</div><div class="separator" style="clear: both; text-align: left;"><br /> </div><div class="separator" style="clear: both; text-align: left;">To link to the Javascript file, put the following in your head.</div><div class="separator" style="clear: both; text-align: left;"><br /> </div><div class="separator" style="clear: both; text-align: left;"><span class="Apple-style-span" style="color: blue;"><script type=”text/javascript” src=”smooth.pack.js”></script></span></div><div class="separator" style="clear: both; text-align: left;"><br /> </div><div class="separator" style="clear: both; text-align: left;">Download the Javascript file by <a href="http://webdesignandsuch.com/posts/smooth-scroll/df_smooth_scroll.zip" target="_blank">Click Here</a></div><br /> Credits : <a href="http://webdesignandsuch.com/using-smooth-scroll-with-page-anchors-and-javascript/" target="_blank">Web Design and Such</a><br /> <br /> <br /> </div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/8472448211262689043-5545875959773014872?l=advancedphptutorial.blogspot.com' alt='' /></div><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=pIR3M5aPR7o:A9WdIy_yOdo:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=pIR3M5aPR7o:A9WdIy_yOdo:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=pIR3M5aPR7o:A9WdIy_yOdo:-BTjWOF_DHI"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=pIR3M5aPR7o:A9WdIy_yOdo:-BTjWOF_DHI" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=pIR3M5aPR7o:A9WdIy_yOdo:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=pIR3M5aPR7o:A9WdIy_yOdo:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=pIR3M5aPR7o:A9WdIy_yOdo:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=pIR3M5aPR7o:A9WdIy_yOdo:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=pIR3M5aPR7o:A9WdIy_yOdo:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=pIR3M5aPR7o:A9WdIy_yOdo:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=pIR3M5aPR7o:A9WdIy_yOdo:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=pIR3M5aPR7o:A9WdIy_yOdo:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=pIR3M5aPR7o:A9WdIy_yOdo:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=l6gmwiTKsz0" border="0"></img></a> </div>http://advancedphptutorial.blogspot.com/2011/10/using-smooth-scroll-with-page-anchors.htmlnoreply@blogger.com (LearnPHP)0tag:blogger.com,1999:blog-8472448211262689043.post-4737274224158988189Tue, 04 Oct 2011 18:13:00 +00002011-10-04T11:13:11.281-07:00PHPimagesCSSJqueryCreate a fading magnifying glass overlay on image hover with jQuery and CSS3<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;"><span class="Apple-style-span" style="line-height: 24px;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">A common method for setting up a quick image gallery on a website is to have small thumnbnail images which when clicked on pop open larger versions of the image <em style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-style: initial; border-top-width: 0px; font-style: italic; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">(using a script like Fancybox)</em>. It’s a good idea to have some sort of effect on the smaller thumbnail images when they are hovered over to make it more user friendly <em style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-style: initial; border-top-width: 0px; font-style: italic; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">(in the same way you might change the color of a text link when hovered over)</em>. </span></span></div><a name='more'></a><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><div style="text-align: justify;"><br /> </div></span><br /> <div style="text-align: justify;"><span class="Apple-style-span" style="line-height: 24px;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">One simple method is to put a colored border around the image with CSS and change the color of the border when hovered over. Another more exciting option is to apply a background shadow behind the image with CSS3 when hovered over. I’ve used both of these methods on multiple websites, but wanted a more exciting solution.</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="line-height: 24px;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></span></div><div class="separator" style="clear: both; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="161" src="http://2.bp.blogspot.com/-UNLG1KYFIz8/TotLbcX82eI/AAAAAAAAAJI/CuHESFhT32E/s320/magnifying-glass-jquery-rollover.jpg" width="320" /></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="line-height: 24px;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 23px;"></span></span></div><h3 style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-style: initial; border-top-width: 0px; color: #2d2d2d; line-height: 1em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 5px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: justify; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: large;">The Idea</span></h3><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-style: initial; border-top-width: 0px; line-height: 24px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 10px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: justify; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">What I decided to create was a transparent image overlay when hovered on. So when you hover over the image you would see a magnifying glass icon over a transparent black background. This would make it easy for the user to see where they are on the page. Another reason this method is better than simply changing the border color is that the magnifying glass gives an indication that the image will zoom in or expand when clicked on. I’ve create two ways of accomplishing this effect, one used jQuery, and the other uses only CSS3.</span></div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-style: initial; border-top-width: 0px; line-height: 24px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 10px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: justify; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><h3 style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-style: initial; border-top-width: 0px; color: #2d2d2d; line-height: 1em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 5px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: justify; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: large;">The Solution</span></h3><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div class="separator" style="clear: both; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="244" src="http://3.bp.blogspot.com/-izb0TyNg9LY/TotLkIRJrHI/AAAAAAAAAJM/kd1Wv6lMYp0/s320/jquery-fade1.jpg" width="320" /></span></div><span class="Apple-style-span" style="line-height: 24px;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Both methods use similar techniques, the only difference is weather they use jQuery or CSS for fading the opcaity. There is an image wrapped in a link. Inside of this link there is a span element. By setting the span to dispaly block, setting the width and height of the span, and setting a higher z-index than the image; the span element covers the image. </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">By setting the background image and color the span element hides the original image. Setting the opacity to zero on the span element allows the thumbnail image to be seen. To create the overlay effect we simply change the opacity of the span element to 70% <em style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-style: initial; border-top-width: 0px; font-style: italic; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">(or whatever you want to use for your project)</em>. One method uses jQuery to apply this opacity, the other method uses CSS3 transitions and opacity settings.</span></div></span><br /> <div style="text-align: justify;"><span class="Apple-style-span" style="color: #2d2d2d; font-family: Arial, Helvetica, sans-serif; font-weight: bold; line-height: 18px;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #2d2d2d; font-family: Arial, Helvetica, sans-serif; font-weight: bold; line-height: 18px;"><span class="Apple-style-span" style="font-size: large;"><br /> </span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #2d2d2d; font-family: Arial, Helvetica, sans-serif; font-weight: bold; line-height: 18px;"><span class="Apple-style-span" style="font-size: large;">jQuery Method</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #2d2d2d; font-family: Arial, Helvetica, sans-serif; font-weight: bold; line-height: 18px;"><span class="Apple-style-span" style="font-size: large;"><br /> </span></span></div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-style: initial; border-top-width: 0px; line-height: 24px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 10px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: justify; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">The jQuery method is cross browser safe, and unlike the CSS3 method fades the magnifying glass both in AND out. This method uses jQuery to set the opacity of the span element when hovered over. Here is the HTML for this method:</span></div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-style: initial; border-top-width: 0px; line-height: 24px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 10px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: justify; vertical-align: baseline;"><span class="Apple-style-span" style="line-height: normal; white-space: pre;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></span></div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-style: initial; border-top-width: 0px; line-height: 24px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 10px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: justify; vertical-align: baseline;"><span class="Apple-style-span" style="line-height: normal; white-space: pre;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><a class="image" href="#"></span></span></div><pre><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"> <span class="roll" ></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"> <img class="imgborder" alt="" src="images/pic.jpg"></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"></a></span></div></pre><pre style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> </span></pre><pre style="text-align: justify;"><span class="Apple-style-span" style="line-height: 24px; white-space: normal;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Here is the CSS for this method:</span></span></pre><pre style="text-align: justify;"><span class="Apple-style-span" style="line-height: 24px; white-space: normal;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> </span></span></pre><pre><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 24px; white-space: normal;"><span class="Apple-style-span" style="line-height: normal;"><pre><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue;">span.roll {</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue;"> background:url(images/mag.png) center center no-repeat #000;</span></div><span class="Apple-style-span" style="color: blue;"> height: 346px; position: absolute; width: 347px; </span><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue;"> -moz-box-sh</span></div><span class="Apple-style-span" style="color: blue;"> z-index: 10; -webkit-box-shadow: 0px 0px 4px #000 ;adow: 0px 0px 4px #000; box-shadow: 0px 0px 4px #000; </span><div style="text-align: justify;"></div><span class="Apple-style-span" style="color: blue;">}</span></pre><pre style="text-align: justify;"></pre></span></span><span class="Apple-style-span" style="line-height: 24px; white-space: normal;"><div style="text-align: justify;">And the jQuery:</div></span></span></pre><pre style="text-align: justify;"><span class="Apple-style-span" style="line-height: 24px; white-space: normal;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> </span></span></pre><pre><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 24px; white-space: normal;"><span class="Apple-style-span" style="line-height: normal;"><pre><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue;">$(function() {</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue;">// OPACITY OF BUTTON SET TO 0%</span></div><span class="Apple-style-span" style="color: blue;">$(".roll").css("opacity","0"); </span><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue;">er(function () {</span></div><span class="Apple-style-span" style="color: blue;">// ON MOUSE OVER $(".roll").ho v // SET OPACITY TO 70% </span><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue;"> opacity: .7 }, "slow");</span></div><span class="Apple-style-span" style="color: blue;">$(this).stop().animate( { }, // ON MOUSE OUT function () { </span><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue;">stop().animate({ opacity: </span></div><span class="Apple-style-span" style="color: blue;">// SET OPACITY BACK TO 50% $(this) .0 }, "slow"); }); </span><div style="text-align: justify;"></div><span class="Apple-style-span" style="color: blue;">});</span></pre><pre style="text-align: justify;"></pre></span></span><span class="Apple-style-span" style="line-height: 23px; white-space: normal;"><h3 style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-style: initial; border-top-width: 0px; color: #2d2d2d; line-height: 1em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 40px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 5px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: justify; vertical-align: baseline;"><span class="Apple-style-span" style="font-size: large;">CSS3 Method</span></h3><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-style: initial; border-top-width: 0px; line-height: 24px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 10px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: justify; vertical-align: baseline;">With the increasing support for CSS3 in modern browsers I just had to try this method using CSS3 opacity and transitions. Here’s the HTML for the CSS (no javascript used) method:</div></span></span><pre></pre><span class="Apple-style-span" style="color: blue;"><a class="image" href="#"></span><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="white-space: normal;"><pre><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue;"> <span class="rollover" ></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue;"> <img class="imgborder" alt="" src="images/pic2.jpg"></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue;"></a></span></div></pre><pre style="text-align: justify;"></pre></span><span class="Apple-style-span" style="line-height: 24px; white-space: normal;"><div style="text-align: justify;">Here’s the CSS, where all the magic happens:</div></span></span></pre><pre style="text-align: justify;"><span class="Apple-style-span" style="line-height: 24px; white-space: normal;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> </span></span></pre><pre><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 24px; white-space: normal;"><span class="Apple-style-span" style="line-height: normal;"><pre><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue;">span.rollover {</span></div><span class="Apple-style-span" style="color: blue;"> opacity: 1; </span><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue;">n-duration: 1s; -moz-transi</span></div><span class="Apple-style-span" style="color: blue;"> -o-transiti otion-duration: 1s; </span><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue;"> -webkit-transform 1s; background:url(ima</span></div><span class="Apple-style-span" style="color: blue;"> -webkit-transition :ges/mag.png) center center no-repeat #000; cursor: pointer; </span><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue;">10; opacity: 0</span></div><span class="Apple-style-span" style="color: blue;"> height: 346px; width: 347px; position: absolute; z-index: ; } span.rollover:hover { opacity: .7; -o-transition-duration: 1s; </span><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue;">1s; -webkit-box-shadow: 0px 0</span></div><span class="Apple-style-span" style="color: blue;"> -moz-transition-duration: 1s; -webkit-transition: -webkit-transform px 4px #000; -moz-box-shadow: 0px 0px 4px #000; box-shadow: 0px 0px 4px #000; </span><div style="text-align: justify;"></div><span class="Apple-style-span" style="color: blue;">}</span></pre></span></span></span></pre></div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/8472448211262689043-4737274224158988189?l=advancedphptutorial.blogspot.com' alt='' /></div><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=VPHAPqvZ4m4:4PSaJxnKiik:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=VPHAPqvZ4m4:4PSaJxnKiik:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=VPHAPqvZ4m4:4PSaJxnKiik:-BTjWOF_DHI"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=VPHAPqvZ4m4:4PSaJxnKiik:-BTjWOF_DHI" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=VPHAPqvZ4m4:4PSaJxnKiik:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=VPHAPqvZ4m4:4PSaJxnKiik:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=VPHAPqvZ4m4:4PSaJxnKiik:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=VPHAPqvZ4m4:4PSaJxnKiik:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=VPHAPqvZ4m4:4PSaJxnKiik:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=VPHAPqvZ4m4:4PSaJxnKiik:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=VPHAPqvZ4m4:4PSaJxnKiik:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=VPHAPqvZ4m4:4PSaJxnKiik:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=VPHAPqvZ4m4:4PSaJxnKiik:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=l6gmwiTKsz0" border="0"></img></a> </div>http://advancedphptutorial.blogspot.com/2011/10/create-fading-magnifying-glass-overlay.htmlnoreply@blogger.com (LearnPHP)0tag:blogger.com,1999:blog-8472448211262689043.post-5124153673208402082Wed, 21 Sep 2011 17:49:00 +00002011-09-21T10:51:50.571-07:00PHPJquery8 Very Detailed jQuery Image and Content Slider Tutorials<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;"><span class="Apple-style-span" style="color: #54595d; line-height: 20px;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">In the last few years image and content sliders become very popular and you can see them in thousand of blogs and websites.It is useful for a blog owner to show the featured contents and i also think it is a great way to attract the visitors which also gives a beautiful look to blogs.Implementing these plugins are not very difficult but of course creating these kind of sliders need a special knowledge about coding.Today i’ve collected very detailed Image Gallery and Content Sliders tutorials.Hope you like them!!!</span></span></div><a name='more'></a><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span><br /> <div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif; font-size: large;"><span class="Apple-style-span" style="line-height: 20px;"><b><a href="http://designm.ag/tutorials/image-rotator-css-jquery/" target="_blank">1. Create an Image Rotator with Description (CSS/jQuery)</a></b></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #54595d; line-height: 20px;"><span style="border-bottom-color: rgb(97, 137, 181); border-bottom-style: dotted; border-bottom-width: 1px; color: #496e97; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #54595d; line-height: 20px;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery. Although there are many great plugins already, this tutorial will help you understand how the image rotator works and helps you create your own from scratch.</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #54595d; line-height: 20px;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></span></div><div class="separator" style="clear: both; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="205" src="http://3.bp.blogspot.com/-beNWJrglep0/TnohSwfS98I/AAAAAAAAAIk/vvCNtJ1e_Bg/s400/1.Image-slider-jquery-tutorial_.jpg" width="400" /></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: #54595d; line-height: 20px;"><span class="Apple-style-span" style="line-height: 19px;"></span></span></span></div><div style="line-height: 1.7; margin-bottom: 13px; margin-top: 3px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://www.sohtanaka.com/web-design/examples/image-rotator/" style="border-bottom-color: rgb(97, 137, 181); border-bottom-style: dotted; border-bottom-width: 1px; color: #496e97; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">VISIT THE DEMO</a></span><br /> <span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">by:<a href="http://www.sohtanaka.com/" style="border-bottom-color: rgb(97, 137, 181); border-bottom-style: dotted; border-bottom-width: 1px; color: #496e97; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Soh TANAKA</a></span></div><div style="line-height: 1.7; margin-bottom: 13px; margin-top: 3px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><strong style="font-style: normal; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><br /> </strong></span></span><br /> <span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: blue; font-size: large; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><strong style="font-style: normal; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">2.<span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><a target="_blank" href="http://www.queness.com/post/443/jquery-image-gallerynews-slider-with-caption-tutorial" style="border-bottom-color: rgb(97, 137, 181); border-bottom-style: dotted; border-bottom-width: 1px; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">jQuery Image Gallery/News Slider with Caption Tutorial</a></span></strong></span></span></div><div style="line-height: 1.7; margin-bottom: 13px; margin-top: 3px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">A really cool News Slider that uses two scrollers to create very slick effect. It uses scrollTo to scroll both description and image items and it comes with previous, next, play, stop and mouseover events.</span></div><div class="separator" style="clear: both; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="273" src="http://1.bp.blogspot.com/-_3U0aSek0Zk/TnohgxkkeyI/AAAAAAAAAIo/R1jbB1TX6mc/s400/2.Image-slider-jquery-tutorial.jpg" width="400" /></span></div><div class="separator" style="clear: both; text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue; line-height: 19px;"></span></span><br /> <div style="line-height: 1.7; margin-bottom: 13px; margin-top: 3px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue; line-height: 19px;"><a href="http://www.queness.com/resources/html/newsslider/index.html" style="border-bottom-color: rgb(97, 137, 181); border-bottom-style: dotted; border-bottom-width: 1px; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">VISIT THE DEMO</a></span></span></div><div style="line-height: 1.7; margin-bottom: 13px; margin-top: 3px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue; line-height: 19px;">by:<a href="http://www.queness.com/" style="border-bottom-color: rgb(97, 137, 181); border-bottom-style: dotted; border-bottom-width: 1px; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Kevin LIEW</a></span></span><br /> <span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><h2 style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue; font-size: large; line-height: 19px;"><span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><strong style="font-style: normal; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">3.</strong></span><span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><strong style="font-style: normal; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span style="border-bottom-color: rgb(97, 137, 181); border-bottom-style: dotted; border-bottom-width: 1px; font-weight: bold; line-height: 1.3; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; text-decoration: none;"><a target="_blank" href="http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/" style="border-bottom-color: rgb(97, 137, 181); border-bottom-style: dotted; border-bottom-width: 1px; font-weight: bold; line-height: 1.3; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; text-decoration: none;" target="_blank">Create a Slick and Accessible Slideshow Using jQuery</a></span></strong></span></span></span></h2><h2 style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue; font-size: large; line-height: 19px;"><span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><strong style="font-style: normal; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><br /> </strong></span></span></span></h2><div style="line-height: 1.7; margin-bottom: 13px; margin-top: 3px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: #54595d; line-height: 19px;">In this in-depth web development tutorial, you’ll learn how to create a usable and web accessible slideshow widget for your site using HTML, CSS, and JavaScript (jQuery). In the process, you’ll see the concept of Progressive Enhancement in action.</span></span></div><div class="separator" style="clear: both; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: #54595d; line-height: 19px;"><img border="0" height="221" src="http://3.bp.blogspot.com/-7DslItiW7TQ/TnohrwU4AOI/AAAAAAAAAIs/rayhlEkIzoo/s400/3.Image-slider-jquery-tutorial.jpg" width="400" /></span></span></div><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 19px;"></span></span><br /> <div style="line-height: 1.7; margin-bottom: 13px; margin-top: 3px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 19px;"><a href="http://sixrevisions.com/demo/slideshow/final.html" style="border-bottom-color: rgb(97, 137, 181); border-bottom-style: dotted; border-bottom-width: 1px; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank"><span class="Apple-style-span" style="color: blue;">VISIT THE DEMO</span></a></span></span><br /> <span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 19px;"><span class="Apple-style-span" style="color: blue;">by:<a href="http://sixrevisions.com/" style="border-bottom-color: rgb(97, 137, 181); border-bottom-style: dotted; border-bottom-width: 1px; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Jacob GUBE</a></span></span></span></div><h2 style="color: #2b2828; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 19px;"><span style="font-size: large; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><br /> </span></span></span></h2><h2 style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 19px;"><span style="color: blue; font-size: large; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">4.<strong style="font-style: normal; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><a target="_blank" href="http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/" style="border-bottom-color: rgb(97, 137, 181); border-bottom-style: dotted; border-bottom-width: 1px; font-weight: bold; line-height: 1.3; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; text-decoration: none;" target="_blank">Fancy Thumbnail Hover Effect w/ jQuery</a></span></strong></span></span></span></h2><div style="color: #54595d;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 19px;"><span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><strong style="font-style: normal; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><br /> </strong></span></span></span></div><div class="separator" style="clear: both; color: #54595d; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 19px;"><img border="0" height="156" src="http://4.bp.blogspot.com/-yHdG397_2O4/Tnoh1wMaHdI/AAAAAAAAAIw/XfI_oCW9j6U/s400/4.Image-slider-jquery-tutorial.jpg" width="400" /></span></span></div><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 19px;"><div style="color: #54595d; line-height: 1.7; margin-bottom: 13px; margin-top: 3px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><a href="http://www.sohtanaka.com/web-design/examples/image-zoom/" style="border-bottom-color: rgb(97, 137, 181); border-bottom-style: dotted; border-bottom-width: 1px; color: #496e97; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">VISIT THE DEMO</a><br /> by:<a href="http://www.sohtanaka.com/" style="border-bottom-color: rgb(97, 137, 181); border-bottom-style: dotted; border-bottom-width: 1px; color: #496e97; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Soh TANAKA</a></div><div style="line-height: 1.7; margin-bottom: 13px; margin-top: 3px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><div style="color: #54595d;"><span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><strong style="font-style: normal; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><br /> </strong></span></div><span style="font-size: large; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><strong style="font-style: normal; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span class="Apple-style-span" style="color: #54595d;">5.</span><span style="color: blue; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><a target="_blank" href="http://www.queness.com/post/152/simple-jquery-image-slide-show-with-semi-transparent-caption" style="border-bottom-color: rgb(97, 137, 181); border-bottom-style: dotted; border-bottom-width: 1px; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Simple JQuery Image Slide Show with Semi-Transparent Caption</a></span></strong></span></div><div style="color: #54595d; line-height: 1.7; margin-bottom: 13px; margin-top: 3px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">a simple image slide show with a semi-transparent caption with jQuery. This example is suitable to display news headlines, or a image slide show in your website frontpage.</div><div class="separator" style="clear: both; color: #54595d; text-align: justify;"><img border="0" height="165" src="http://3.bp.blogspot.com/-Y8oBBR0zm38/Tnoh_imUxpI/AAAAAAAAAI0/Ke-pQoDc5hE/s400/5.Image-slider-jquery-tutorial.jpg" width="400" /></div><div style="color: #54595d; line-height: 1.7; margin-bottom: 13px; margin-top: 3px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><br /> </div></span><span class="Apple-style-span" style="line-height: 19px;"><div style="color: #54595d; line-height: 1.7; margin-bottom: 13px; margin-top: 3px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><a href="http://www.queness.com/resources/html/slideshow/jquery-slideshow.html" style="border-bottom-color: rgb(97, 137, 181); border-bottom-style: dotted; border-bottom-width: 1px; color: #496e97; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">VISIT THE DEMO</a><br /> by:<a href="http://www.queness.com/" style="border-bottom-color: rgb(97, 137, 181); border-bottom-style: dotted; border-bottom-width: 1px; color: #496e97; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Kevin LIEW</a></div><h1 style="color: #2b2828; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><br /> </span></h1><h1 style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span class="Apple-style-span" style="color: #2b2828; font-size: large;">6.</span><span style="color: blue; font-size: large; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><a target="_blank" href="http://jqueryfordesigners.com/slider-gallery/" rel="bookmark" style="border-bottom-color: rgb(97, 137, 181); border-bottom-style: dotted; border-bottom-width: 1px; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Slider Gallery</a></span></span></h1><div style="color: #54595d; line-height: 1.7; margin-bottom: 13px; margin-top: 3px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">explaining how to create a similar effect used to showcase the products on the <a href="http://www.apple.com/mac/" style="border-bottom-color: rgb(97, 137, 181); border-bottom-style: dotted; border-bottom-width: 1px; color: #496e97; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;">Apple</a> web site.</div><div class="separator" style="clear: both; color: #54595d; text-align: justify;"><img border="0" height="122" src="http://1.bp.blogspot.com/-ojuDrjeJdpA/TnoiHoZjyXI/AAAAAAAAAI4/-_gVzMcl6gw/s400/6.Image-slider-jquery-tutorial.jpg" width="400" /></div><div style="color: #54595d; line-height: 1.7; margin-bottom: 13px; margin-top: 3px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><a href="http://jqueryfordesigners.com/demo/slider-gallery.html" style="border-bottom-color: rgb(97, 137, 181); border-bottom-style: dotted; border-bottom-width: 1px; color: #496e97; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">VISIT THE DEMO</a><br /> by:<a href="http://remysharp.com/" style="border-bottom-color: rgb(97, 137, 181); border-bottom-style: dotted; border-bottom-width: 1px; color: #496e97; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Remy SHARP</a></div></span><span class="Apple-style-span" style="line-height: 19px;"><h1 style="color: #2b2828; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><br /> </span></h1><h1 style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span class="Apple-style-span" style="color: #2b2828; font-size: large;">7.</span><span style="color: blue; font-size: large; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><a target="_blank" href="http://net.tutsplus.com/tutorials/javascript-ajax/building-a-jquery-image-scroller/" style="border-bottom-color: rgb(97, 137, 181); border-bottom-style: dotted; border-bottom-width: 1px; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Building a jQuery Image Scroller</a></span></span></h1><div><span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><br /> </span></div><div style="color: #54595d; line-height: 1.7; margin-bottom: 13px; margin-top: 3px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Building an image scroller, making use of jQuery’s excellent animation features and generally having some fun with code.</div><div class="separator" style="clear: both; color: #54595d; text-align: justify;"><img border="0" height="126" src="http://1.bp.blogspot.com/-8krlRZIBmFg/TnoiQrS-fYI/AAAAAAAAAI8/0Rylz-sxRH4/s400/7.Image-slider-jquery-tutorial.jpg" width="400" /></div><div style="color: #54595d; line-height: 1.7; margin-bottom: 13px; margin-top: 3px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><br /> </div></span><span class="Apple-style-span" style="line-height: 19px;"><div style="color: #54595d; line-height: 1.7; margin-bottom: 13px; margin-top: 3px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><a href="http://nettuts.s3.amazonaws.com/300_jquery/image%20Scroller/imageScroller.html" style="border-bottom-color: rgb(97, 137, 181); border-bottom-style: dotted; border-bottom-width: 1px; color: #496e97; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">VISIT THE DEMO</a><br /> by:<a href="http://net.tutsplus.com/author/danwellman/" style="border-bottom-color: rgb(97, 137, 181); border-bottom-style: dotted; border-bottom-width: 1px; color: #496e97; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" title="Posts by Dan Wellman">Dan WELLMAN</a></div><h2 style="color: #2b2828; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><br /> </span></h2><h2 style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span class="Apple-style-span" style="color: #2b2828;">8. </span><span style="color: blue; font-size: large; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><a target="_blank" href="http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/" style="border-bottom-color: rgb(97, 137, 181); border-bottom-style: dotted; border-bottom-width: 1px; font-weight: bold; line-height: 1.3; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; text-decoration: none;" target="_blank">Sliding Boxes and Captions with jQuery</a></span></span></h2><div><span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><br /> </span></div><div style="color: #54595d; line-height: 1.7; margin-bottom: 13px; margin-top: 3px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Play around with animations of the sliding element to either show or cover up the viewing area, thus creating the sliding effect.</div><div class="separator" style="clear: both; color: #54595d; text-align: justify;"><img border="0" height="157" src="http://3.bp.blogspot.com/-vp-BvMnS1b0/TnoiZ6gRpBI/AAAAAAAAAJA/Va-WbGaxDMo/s400/8.Image-slider-jquery-tutorial.jpg" width="400" /></div></span><span class="Apple-style-span" style="color: #54595d; line-height: 19px;"><div style="line-height: 1.7; margin-bottom: 13px; margin-top: 3px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><a href="https://buildinternet.s3.amazonaws.com/live-tutorials/sliding-boxes/index.htm" style="border-bottom-color: rgb(97, 137, 181); border-bottom-style: dotted; border-bottom-width: 1px; color: #496e97; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">VISIT THE DEMO</a><br /> by:<a href="http://www.onemightyroar.com/" style="border-bottom-color: rgb(97, 137, 181); border-bottom-style: dotted; border-bottom-width: 1px; color: #496e97; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Sam DUNN</a><br /> <br /> </div></span></span></div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/8472448211262689043-5124153673208402082?l=advancedphptutorial.blogspot.com' alt='' /></div><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=aVL1K7me3u0:LYPjmrL8i_0:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=aVL1K7me3u0:LYPjmrL8i_0:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=aVL1K7me3u0:LYPjmrL8i_0:-BTjWOF_DHI"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=aVL1K7me3u0:LYPjmrL8i_0:-BTjWOF_DHI" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=aVL1K7me3u0:LYPjmrL8i_0:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=aVL1K7me3u0:LYPjmrL8i_0:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=aVL1K7me3u0:LYPjmrL8i_0:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=aVL1K7me3u0:LYPjmrL8i_0:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=aVL1K7me3u0:LYPjmrL8i_0:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=aVL1K7me3u0:LYPjmrL8i_0:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=aVL1K7me3u0:LYPjmrL8i_0:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=aVL1K7me3u0:LYPjmrL8i_0:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=aVL1K7me3u0:LYPjmrL8i_0:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=l6gmwiTKsz0" border="0"></img></a> </div>http://advancedphptutorial.blogspot.com/2011/09/8-very-detailed-jquery-image-and.htmlnoreply@blogger.com (LearnPHP)0tag:blogger.com,1999:blog-8472448211262689043.post-1555764089496180211Tue, 20 Sep 2011 17:21:00 +00002011-09-20T10:21:44.624-07:00PHPloginFacebookTwitterPHP script for Login with Facebook and Twitter<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;"><span class="Apple-style-span" style="background-color: white; line-height: 24px;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Facebook and Twitter have become large in the social network world and both networks offering oAuth support. We developed a system to login with Twitter and Facebook. Nowadays web users not interested to filling the big registration forms. This script helps you to avoid registration forms, It’s is very useful and simple to integrate.</span></span></div><a name='more'></a><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span><br /> <div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-q7Ctrzu4qXM/TnjKq23OkSI/AAAAAAAAAIg/3h2J59w7B3Q/s1600/FacebookTwitterLogin.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="185" src="http://3.bp.blogspot.com/-q7Ctrzu4qXM/TnjKq23OkSI/AAAAAAAAAIg/3h2J59w7B3Q/s400/FacebookTwitterLogin.png" width="400" /></span></a></div><div style="text-align: justify;"><span class="Apple-style-span" style="background-color: white; line-height: 24px;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="background-color: white; line-height: 24px;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b><span class="Apple-style-span" style="font-size: large;">Database</span></b></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Sample database users table columns id, email, oauth_uid, oauth_provider and username.</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">CREATE TABLE users</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">(</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">id INT PRIMARY KEY AUTO_INCREMENT,</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">email VARCHAR(70), </span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">oauth_uid int(11),</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">oauth_provider VARCHAR(100),</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">username VARCHAR(100), </span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">twitter_oauth_token VARCHAR(200), </span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">twitter_oauth_token_secret VARCHAR(200) </span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">);</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">The tutorial contains three folders called facebook,twitter and config with PHP files.</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>facebook </b>//Facebook OAUTH library </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>twitter </b>//Twitter OAUTH library </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>config</b></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">-- functions.php </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">-- dbconfig.php //Database connection </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">-- fbconfig.php //Facebook API connection</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">-- twconfig.php //Twitter API connection</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">index.php</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">home.php</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">login-twitter.php</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">login-facebook.php</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">getTwitterData.php</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b><span class="Apple-style-span" style="font-size: large;">Facebook Setup</span></b></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">You have to create a application. Facebook will provide you app id and app secret id, just modify following code </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>fcconfig.php</b></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;"><?php</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">define('APP_ID', 'Facebook APP ID');</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">define('APP_SECRET', 'Facebook Secret ID');</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">?></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>Twitter Setup</b></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Create a twitter application click here. Some like Facebook Twitter provide you consumer key amd consumer secret key using these modify following code.</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>twconfig.php</b></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;"><?php</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">define('YOUR_CONSUMER_KEY', 'Twitter Key');</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">define('YOUR_CONSUMER_SECRET', 'Twitter Secret Key');</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">?></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>dbconfig.php</b></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Database configuration file. </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;"><?php</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">define('DB_SERVER', 'localhost');</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">define('DB_USERNAME', 'User Name');</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">define('DB_PASSWORD', 'Password');</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">define('DB_DATABASE', 'DATABASE');</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">$connection = mysql_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD) or die(mysql_error());</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">$database = mysql_select_db(DB_DATABASE) or die(mysql_error());</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">?></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>login-twitter.php</b></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">In root directory find out the below line at login-twitter.php code and replace yourwebsite. </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;"><br /> </span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">$request_token= $twitteroauth->getRequestToken('http://yourwebsite.com/getTwitterData.php');</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>index.php</b></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b><br /> </b></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">If you want to modify your web project existing login or index pages, just use following code. </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;"><?php</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">session_start();</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">if (isset($_SESSION['id'])) {</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">// Redirection to login page twitter or facebook</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">header("location: home.php");</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">}</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">if (array_key_exists("login", $_GET)) </span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">{</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">$oauth_provider = $_GET['oauth_provider'];</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">if ($oauth_provider == 'twitter')</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">{</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">header("Location: login-twitter.php");</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">}</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">else if ($oauth_provider == 'facebook')</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;"> {</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">header("Location: login-facebook.php");</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">}</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">}</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">?></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;">//HTML Code</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;"><a href="?login&oauth_provider=twitter">Twitter_Login</a></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: blue;"><a href="?login&oauth_provider=facebook">Facebook_Login</a></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">If any queries please comment here. </span></div></div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/8472448211262689043-1555764089496180211?l=advancedphptutorial.blogspot.com' alt='' /></div><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=8n5uSc8dvfM:BuXfymShZdU:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=8n5uSc8dvfM:BuXfymShZdU:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=8n5uSc8dvfM:BuXfymShZdU:-BTjWOF_DHI"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=8n5uSc8dvfM:BuXfymShZdU:-BTjWOF_DHI" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=8n5uSc8dvfM:BuXfymShZdU:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=8n5uSc8dvfM:BuXfymShZdU:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=8n5uSc8dvfM:BuXfymShZdU:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=8n5uSc8dvfM:BuXfymShZdU:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=8n5uSc8dvfM:BuXfymShZdU:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=8n5uSc8dvfM:BuXfymShZdU:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=8n5uSc8dvfM:BuXfymShZdU:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=8n5uSc8dvfM:BuXfymShZdU:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=8n5uSc8dvfM:BuXfymShZdU:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=l6gmwiTKsz0" border="0"></img></a> </div>http://advancedphptutorial.blogspot.com/2011/09/php-script-for-login-with-facebook-and.htmlnoreply@blogger.com (LearnPHP)2tag:blogger.com,1999:blog-8472448211262689043.post-2200207459918420419Tue, 19 Jul 2011 17:22:00 +00002011-07-19T10:22:16.343-07:00ChartJquery5 Top jQuery Chart Libraries for Interactive Charts<div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Nowadays the need for an easy way to add interactive charts becomes essential because we are shifting from pc applications to web application. jQuery and other libraries allows to make accessible data visualization in (x)HTML, giving us this needed functionality.</span></div><a name='more'></a><br /> <div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">In this article we are going to present 5 chart libraries that suit different needs from simple charts to high complex charts. Most of them are free for personal and commercial use.</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://codecanyon.net/item/graphup-jquery-plugin/108025"><span class="Apple-style-span" style="font-size: large;">GraphUp Jquery Plugin – $15</span></a></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">“GraphUp is a very flexible and lightweight jQuery (v1.4+) plugin to spice up your data tables. It visualizes the values using color, bar charts and bubbles.”</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div class="separator" style="clear: both; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="202" src="http://4.bp.blogspot.com/-UnLtYdQnK3U/TiW53B5ktWI/AAAAAAAAAHY/X5qoprdU9Hg/s400/graphup1.jpg" width="400" /></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"></div><div style="text-align: justify;"></div><ul><li><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Many options — Pick a data cleaner and a painter: fill, bars, bubbles; configurable decimal point (dot or comma); customizable color maps and CSS classes; and<a href="http://www.geertdedeckere.be/shop/graphup/#options"> more</a>.</span></li> <li><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Lightweight — The plugin takes only 4kB to load.</span></li> <li><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Extensible — Easily create your own cleaners, painters or color maps. Also, a callback is available to perform any operations on a cell before painting. Super flexible, endless possibilities! Check out the demos.</span></li> <li><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Progressive enhancement — Your original table is still viewable without JavaScript enabled.</span></li> <li><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Well documented — Check out the <a href="http://www.geertdedeckere.be/shop/graphup/">live examples and documentation</a>.</span></li> </ul><br /> <br /> <span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="color: #515151; line-height: 18px;">Compatible Browsers: Chrome 5, FireFox 2, FireFox 3, IE7, IE8, Opera, Safari.</span></span><br /> <div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; line-height: 18px;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></span></div><div style="text-align: justify;"></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif; font-size: large;"><span class="Apple-style-span" style="line-height: 18px;"><b><a href="http://www.filamentgroup.com/lab/jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas/">1. jQuery Visualize Plugin</a></b></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><br /> </span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">jQuery Visualize Plugin is the perfect plugin if you have a table and want to generate a chart out of it. It offers different types of charts such as Bar, Area, Pie & Line charts.</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><br /> </span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">Examples</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><br /> </span></span></div><div class="separator" style="clear: both; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="400" src="http://1.bp.blogspot.com/-Zvco0bh3wu8/TiW6gR6UkCI/AAAAAAAAAHc/pdRB9hLnHRw/s400/visualize2.png" width="266" /></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><br /> </span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"></span></div><div style="line-height: 18px; text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><b>Type of Charts</b>: Bar, Area, Pie & Line.</span></div><div style="line-height: 18px; text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><b>Requirements</b>: jQuery, excanvas (included)</span></div><div style="line-height: 18px; text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><b>Browser Support</b>: IE6*, IE7*, IE8*, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9.</span></div><div style="line-height: 18px; text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;">* HTML 5 canvas element is not supported by IE but Google maintains a library that translates canvas scripting into VML, allowing it to work in all versions of internet explorer.</span></div><div style="line-height: 18px; text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><b>Demo</b>: <a href="http://www.filamentgroup.com/examples/charting_v2/index_2.php">http://www.filamentgroup.com/examples/charting_v2/index_2.php</a></span></div><div style="line-height: 18px; text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><b>License</b>: MIT and GPL licenses</span></div><div style="line-height: 18px; text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="line-height: 18px; text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><b><a href="http://www.highcharts.com/"><span class="Apple-style-span" style="font-size: large;">2. Highcharts</span></a></b></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><br /> </span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">Highcharts is a really impressive jQuery Chart Library. In a few words Highcharts is compatible with most Browsers and even the iPhone; numerous chart types are supported; it is a dynamic plugin because you can add, remove and modify series, axes or points at any time after chart creation and you can load data from external files; tooltip labels are also supported which is great for detailed information in a point of a chart; zooming and last but not least all text labels can be rotated in any angle.</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><br /> </span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><b>Examples</b></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><br /> </span></span></div><div class="separator" style="clear: both; text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><img border="0" height="203" src="http://4.bp.blogspot.com/-C6ObAE7wLo0/TiW7BirVU1I/AAAAAAAAAHg/vp3mucBT-T8/s400/jquery-highcharts-12.png" width="400" /></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><br /> </span></span></div><div style="text-align: justify;"></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><b>Type of Charts</b>: Bar, Area, Areaspline , Pie, Line, Spline, Column & Scatter.</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><b>Requirements</b>: jQuery or MooTools</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><b>Browser Support</b>: IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9 and iPhone!</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><b>Demo</b>: <a href="http://www.highcharts.com/demo/">http://www.highcharts.com/demo/</a></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><b>License</b>: Creative Commons Attribution  Non-Commercial 3.0 License. Free for personal website, a school site or a non-profit organization. For a single commercial Website the license costs $80.</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><br /> </span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><br /> </span></span></div><div style="text-align: justify;"></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><b><a href="http://code.google.com/p/flot/"><span class="Apple-style-span" style="font-size: large;">3. Flot</span></a></b></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><br /> </span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">Flot is as the authors call it an “Attractive Javascript plotting for jQuery” which is true. The charts look simple and nice, it is easy to create charts and all settings are optional. Some key features of plot is turning series on/off, zooming, interacting with the data points and it integrates a simple tooltip feature.</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><br /> </span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><b>Examples</b></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><br /> </span></span></div><div class="separator" style="clear: both; text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><a href="http://2.bp.blogspot.com/-zb1pBtUYuaI/TiW7cSBHgMI/AAAAAAAAAHk/GLWfi-jDkqg/s1600/jquery-flot-chart2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="203" src="http://2.bp.blogspot.com/-zb1pBtUYuaI/TiW7cSBHgMI/AAAAAAAAAHk/GLWfi-jDkqg/s400/jquery-flot-chart2.png" width="400" /></a></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><br /> </span></span></div><div style="text-align: justify;"></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><b>Type of Charts:</b> Bar, Area, Point & Line.</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><b>Requirements</b>: jQuery</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><b>Browser Support</b>: IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9 and Konqueror 4+.</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><b>Demo</b>: <a href="http://people.iola.dk/olau/flot/examples/">http://people.iola.dk/olau/flot/examples/</a></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><b>License</b>: MIT License</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><br /> </span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><br /> </span></span></div><div style="text-align: justify;"></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><b><a href="http://omnipotent.net/jquery.sparkline/"><span class="Apple-style-span" style="font-size: large;">4. jQuery Sparklines</span></a></b></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><br /> </span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">Sparklines generates small inline charts either inline in the HTML or via JavaScript. It is really good for displaying mini graphs notably because most of them just take 1 line of HTML or JavaScript code. Another great feature is it self-refreshing capabilities. You can see it in their Mouse-Speed demo which shows you the power of live charting.</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><br /> </span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><b>Example</b></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><br /> </span></span></div><div class="separator" style="clear: both; text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><img border="0" height="203" src="http://1.bp.blogspot.com/-Bxgc--8bsDo/TiW7z7SsEBI/AAAAAAAAAHo/InFIj8vYuxI/s400/jQuery-Sparklines2.png" width="400" /></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><br /> </span></span></div><div style="text-align: justify;"></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><b>Type of Charts</b>: Bar, Tristate, Bullet, Box Plot & Line.</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><b>Requirements</b>: jQuery</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><b>Browser Support</b>: IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9 and Google Chrome.</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><b>Demo</b>: <a href="http://omnipotent.net/jquery.sparkline/">http://omnipotent.net/jquery.sparkline/</a></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><b>License</b>: New BSD License</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><br /> </span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><br /> </span></span></div><div style="text-align: justify;"></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><b><a href="http://www.jqplot.com/"><span class="Apple-style-span" style="font-size: large;">5. jqPlot</span></a></b></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><br /> </span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">jqPlot did not catch my eye at first glance but after further research I found it to be one of the best and free jQuery chart library. Numerous graphical options are available you can even add shadows and interact per drag&drop in the charts! It even automatically computes trend lines. We could compare it to highcharts in terms of features and functionality.</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><br /> </span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><b>Examples</b></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><br /> </span></span></div><div class="separator" style="clear: both; text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><img border="0" height="303" src="http://3.bp.blogspot.com/-H2eMt4eGCxM/TiW8LbMcZ7I/AAAAAAAAAHs/xgXDf074RCE/s400/jqPlot-12.png" width="400" /></span></div><div class="separator" style="clear: both; text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><img border="0" height="278" src="http://4.bp.blogspot.com/-eRm7z7cbX_U/TiW8TyK-smI/AAAAAAAAAHw/cpaw6XgCn7o/s400/jqPlot-22.png" width="400" /></span></div><div class="separator" style="clear: both; text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><img border="0" height="238" src="http://1.bp.blogspot.com/-QoUY1xMxARY/TiW8bk-9MDI/AAAAAAAAAH0/TJUbj9Gh0Jw/s400/jqPlot-32.png" width="400" /></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><br /> </span></span></div><div style="text-align: justify;"></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><b>Type of Charts</b>: Bar, Pie & Line.</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><b>Requirements</b>: jQuery</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><b>Browser Support</b>: IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9 and Google Chrome.</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><b>Demo</b>: <a href="http://www.jqplot.com/tests/">http://www.jqplot.com/tests/</a></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><b>License</b>: MIT and GPL version 2 licenses</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><br /> </span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><br /> </span></span></div><div style="text-align: justify;"></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><b><span class="Apple-style-span" style="font-size: large;">Conclusion</span></b></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><br /> </span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">As you may have seen from this 5 jQuery chart libraries they suit different needs. First Sparklines generates a small inline chart which is perfect for charts where the precision is not important. You look at the small chart and you should directly know what happened.</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><br /> </span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">Highcharts, Flot and jqPlot are very powerful jQuery chart libraries. My personal favourites is Highcharts and jqPlot. The visual quality of Highcharts charts are better than jqPlot but the last one is free. I recommend you to test at least one of them and you will see that they are really powerful.</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><br /> </span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">Finally jQuery Visualize is really easy to use and specially adapted if you want to create a chart out of a table, just like you would do it in excel. This can be convenient when you need a table and a chart to visualize your thoughts. Feel free to give your feedback via comments section.:)</span></span></div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/8472448211262689043-2200207459918420419?l=advancedphptutorial.blogspot.com' alt='' /></div><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=rCLwXAOOrD4:m8xsNRIq76I:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=rCLwXAOOrD4:m8xsNRIq76I:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=rCLwXAOOrD4:m8xsNRIq76I:-BTjWOF_DHI"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=rCLwXAOOrD4:m8xsNRIq76I:-BTjWOF_DHI" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=rCLwXAOOrD4:m8xsNRIq76I:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=rCLwXAOOrD4:m8xsNRIq76I:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=rCLwXAOOrD4:m8xsNRIq76I:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=rCLwXAOOrD4:m8xsNRIq76I:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=rCLwXAOOrD4:m8xsNRIq76I:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=rCLwXAOOrD4:m8xsNRIq76I:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=rCLwXAOOrD4:m8xsNRIq76I:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=rCLwXAOOrD4:m8xsNRIq76I:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=rCLwXAOOrD4:m8xsNRIq76I:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=l6gmwiTKsz0" border="0"></img></a> </div>http://advancedphptutorial.blogspot.com/2011/07/5-top-jquery-chart-libraries-for.htmlnoreply@blogger.com (LearnPHP)0tag:blogger.com,1999:blog-8472448211262689043.post-3544974421923540558Wed, 13 Jul 2011 18:15:00 +00002011-07-13T11:15:21.886-07:00PluginsJqueryjQuery Plugin: Table of Contents with Smooth Scrolling<div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Hey guys, have you noticed that pretty box on WordPress codex that gives us a preview about what we can see on a page? So, I haven’t seen too many blogs use this kind of feature and it is really useful for our readers, since they can just skip to the content that they are interested in and avoid wasting time. Wikipedia has a table of contents that makes it easier for readers to skip around, right?</span></div><a name='more'></a><br /> <div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">I’m not the very first to do <a href="http://www.google.com/search?q=table+of+contents+jquery+plugin&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:pt-BR:official&client=firefox-a">something like this</a> with jQuery. But our goal in here is to develop a complete jQuery plugin, from start to finish, with options, and that is easy to customize. And, of course, something that I hope is useful to you</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">So, let’s rock!</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: large;">STOC – Smooth Table of Contents jQuery plugin</span></b></div><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></b></div><br /> <div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Since there are a lot of “tocs” around the web, our plugin will be called STOC and the main features are:</span></div><br /> <ul><li style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Automatically adds the table of contents to target element</span></li> <li style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">You can select to search just a part of you page</span></li> <li style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">You can select what is the first heading we will have to search (h1, h2…)</span></li> <li style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">You can select the “depth” of the search</span></li> <li style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">SubItems are made of sublists inside parent item</span></li> <li style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">You can select which text will display before the table (title)</span></li> <li style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">You can select whether ol or ul to you listing</span></li> <li style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">You can enable / disable smooth scrolling</span></li> </ul><br /> <div class="separator" style="clear: both; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div class="separator" style="clear: both; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="217" src="http://1.bp.blogspot.com/-wYsWIx6LIPI/Th3c-36r-2I/AAAAAAAAAHU/hkpcEc7_5uY/s400/stoc.jpg" width="400" /></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><br /> <div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Planning and planning – Before code, let’s think about it</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">The main idea is to have a jQuery plugin that generates a table of content inside the target element. To have this working we need some basic customization with these options:</span></div><br /> <ul><li style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>Where to search</b> – If the table is generated based on entire page, just a section content</span></li> <li style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>Depth of H’s</b> – How many “levels” of titles we will have in our search</span></li> <li style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>Start tag</b> – Which level of heading will be the first on set (h1, h2, h3)</span></li> <li style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>Title if the box</b> – What to display as box’s title</span></li> <li style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>List type</b> – whether to have ordered or unordered list</span></li> </ul><br /> <div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">The hardest thing when we are doing something just for fun is to define the scope. Actually it is hard too when we have a “real” project, but when it comes to pet projects it is harder because you just can’t measure accurately what will bring you the expected revenue (fun).</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">So, what do I do in these cases is list anything that I could do on it, and just cut down what will take too much time and will not be so good to do.</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">In this case, for example I listed these features:</span></div><br /> <ul><li style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>Customizable via options</b> – I think this one was essential, so I just kept it</span></li> <li style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>Smooth scrolling</b> - This one I didn’t see in any other plugin / snippet. It would be good to have, so I kept it.</span></li> <li style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>Accordion for hierarchy</b> - I found this idea really cool, but useless, I drop it.</span></li> <li style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>Preview of the text on hover</b> - I’ve stolen this idea of one site but actually didn’t find it useful also, so I drop it.</span></li> </ul><br /> <div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">So what I’ve done here is to define which of the cool features had big potential to be a waste of time. Even if I had more time to code I would never use them, just because they haven’t the expected benefit (fun x time).</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Now that we now what we want to do, let’s start to code.</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: large;"><b>Basic plugin structure with options</b></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">First we need to create our file. The standard for jQuery plugins files names is jQuery.PLUGINNAME.js so, our file will be jquery.stoc.js.</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">We also have all our options defined above, so we need now to save a variable for each one of them, so our user can send his own parameters.</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Here is our commented code:</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><br /> <div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">/*</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">This line creates our function "wrapped" by jQuery container, so we won't have any problem with others libraries</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">*/</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">(function($){</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">/*</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">Here the standard is $.fn.PLUGINNAME. so when we call $(element).stoc() jquery will run this code</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">Pay attention that we pass options to our funcion, so when user defines it we can extend our plugin</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">*/</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">  $.fn.stoc = function(options) {</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">  //Our default options</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">  var defaults = {</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">      search: "body", //where we will search for titles</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">      depth: 6, //how many hN should we search</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">      start: 1, //which hN will be the first (and after it we go just deeper)</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">      stocTitle: "<h2>Contents</h2>", //what to display before our box</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">      listType: "ul", //could be ul or ol</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">      smoothScroll: 1</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">  };</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">  //let's extend our plugin with default or user options when defined</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">  var options = $.extend(defaults, options);</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">  return this.each(function() {</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">      //our functions here</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">      alert("I'm a beta tester alert box!");</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">  });</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">};</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">})(jQuery);</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; line-height: 18px;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Let’s try a simple demo to see it working. Create this HTML in same folder as our plugin:</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: #515151; line-height: 18px;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></span></div><br /> <div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><html xmlns="http://www.w3.org/1999/xhtml"><head></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">  <title>Smooth Table Of Contents jQuery plugin - DEMO</title></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">  <script type="text/javascript" src="jquery.stoc.js"></script></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">  <script type="text/javascript"></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">      $(function(){</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">          $("#items").stoc();</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">      });</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">  </script></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">  <style type="text/css"></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">      body {</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">          background: #fafafa url(handmadepaper.png); //via subtlepatterns</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">      }</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">          #container {</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">              position: relative;</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">              top: 50px;</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">              width: 960px;</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">             margin: 0 auto;</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">              padding-bottom: 20px;</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">          }</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">          #container p, #container h1, #container h2, #container h3, #container h4, #container h5 {</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">              font-family: "arial";</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">              padding: 10px 20px 0;</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">              margin: 0</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">          }</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">          #items {</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">              float: right;</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">              width: 260px;</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">              padding-bottom: 10px;</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">              margin:0 0 10px 20px;</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">              /* rgba with ie compatibility */</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">              background-color: transparent;</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">              background-color: rgba(255,255,255,0.4);</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">              filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#20ffffff,endColorstr=#20ffffff);</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">              -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#20ffffff,endColorstr=#20ffffff)";</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">          }</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">              #items ul {</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">                  margin: 0 0 0 20px;</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">                  padding: 0 0 5px;</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">                  list-style-type: none;</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">              }</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">                  #items ul ul {</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">                      font-size: 90%;</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">                  }</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">              #items ul a {</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">                  font-family: "arial";</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">                  text-decoration: none;</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">                  color: #c10000;</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">              }</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">                  #items ul a:hover { color: #ff0000 }</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">  </style></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"></head></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><body id="page-1"></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">  <div id="container"></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">      <div id="items"></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">      </div></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">      <h1>1 - Phasellus vulputate</h1></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus est, egestas vel aliquet at, pellentesque nec lorem. Pellentesque molestie bibendum eros, eu suscipit nisi volutpat fringilla. Vivamus fringilla nisl ut ante commodo porta. </p></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">      [... lot of more lipsum text with h's here]</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;">  </div></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"></body></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"></html></span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="line-height: 18px;"><br /> </span></span></div><br /> <div style="line-height: 18px; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">If you create this file, when you load it you should see our pretty beta tester alert. So our plugin is being called (make sure that you add jquery before it, as I’ve done including api.googleapis…). if you want to overwrite any option defined before, you just have to pass it as .stoc({ OPTIONNAME: VALUE }) instead of just .stoc(). For example, to define our search just in #container, add .stoc({ search: "#container" }).</span></div><div style="line-height: 18px; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="line-height: 18px; text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: large;">How should we select our headings?</span></b></div><div style="line-height: 18px; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="line-height: 18px; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Now we have to prepare our plugin to get all h’s that we have to (based in our options). What we can do is get all the headings we have to, and when we loop through each one of them we will discover which level it is. I think it is easier than trying to get the whole hierarchy for each “tree” of headings.</span></div><div style="line-height: 18px; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="line-height: 18px; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Since our current object can change as we run our code, we have also to “cache” our current object so we will always now which object we are modifying. Our code now will be:</span></div><div style="line-height: 18px; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><br /> <div style="text-align: justify;"><span class="Apple-style-span" style="line-height: 18px;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">return this.each(function() {</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="line-height: 18px;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">   //"cache" our target and search objects</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="line-height: 18px;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">   obj = $(this); //target</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="line-height: 18px;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">   src = $(options.search); //search</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="line-height: 18px;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">   //let's declare some variables. We need this var declaration to create them as local variables (not global)</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="line-height: 18px;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">   var appHTML = "", tagNumber = 0, txt = "", id = "", before = "", after = "", previous = options.start, start = options.start, depth = options.depth, i = 0, srcTags = "h" + options.start, cacheHN = "";</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="line-height: 18px;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">   //which tags we will search</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="line-height: 18px;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">   while ( depth > 1) {</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="line-height: 18px;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">       start++; //we will just get our start level and numbers higher than it</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="line-height: 18px;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">       srcTags = srcTags + ", h" + start;</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="line-height: 18px;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">       depth--; //since went one level up, our depth will go one level down</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="line-height: 18px;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">   }</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="line-height: 18px;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"> });</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="line-height: 18px;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><br /> </span></span></div><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"></span><br /> <div style="line-height: 18px; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">If you alert you srcTags you will see something like this “h1, h2, h3, h4, h5, h6?. This is what we will pass to jQuery as the elements that we want to search for.</span></div><div style="line-height: 18px; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="line-height: 18px; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Building our table</span></div><div style="line-height: 18px; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="line-height: 18px; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">We have all our elements, what we have to do is run a function on each one of them with the wonderful each() jQuery function.</span></div><div style="line-height: 18px; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="line-height: 18px;"></div><ul><li style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Inside each element, we need to:</span></li> <li style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Know which level the current element is (tagNumber)</span></li> <li style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Set one id to this element, if it doesn’t have one</span></li> <li style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Get the elements text</span></li> <li style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Test if is its level is lower, higher or equal than previous element and open / close ul’s based on this</span></li> <li style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">If element number is higher than previous means that we went down one level (e.g. from h2 to h3)</span></li> <li style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">If element number is equals to previous means that we stay on same level (e.g. h4)<span class="Apple-style-span" style="line-height: 18px;">If element number is lower than previous means that we went up, but we don’t know how many levels (e.g. from h4 to h1)</span></span></li> </ul><br /> <br /> <br /> <br /> <span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"></span><br /> <div style="line-height: 18px;"></div><ul><li style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Append element HTML to our target item.</span></li> </ul><div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">We also have to correct the last item because if it is not top-level it will let some uls open, and we don’t want it :D</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Our commented code now will be:</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">/* our setup stuff here */</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">/*inside our return function */</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"> //which tags we will search</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">     while ( depth > 1) {</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">         start++; //we will just get our start level and numbers higher than it</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">         srcTags = srcTags + ", h" + start;</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">         depth--; //since went one level up, our depth will go one level down</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">     }</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">     src.find(srcTags).each(function() {</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">         //we will cache our current H element</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">         cacheHN = $(this);</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">         //if we are on h1, 2, 3...</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">         tagNumber = ( cacheHN.get(0).tagName ).substr(1);</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">         //sets the needed id to the element</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">         id = cacheHN.attr('id');</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">         if (id == "") { //if it doesn't have only, of course</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">             id = "h" + tagNumber + "_" + i;</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">             cacheHN.attr('id', id);</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">         }</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">         //our current text</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">         txt = cacheHN.text();</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">         switch(true) { //with switch(true) we can do comparisons in each case</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">             case (tagNumber > previous) : //it means that we went down one level (e.g. from h2 to h3)</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">                     appHTML = appHTML + "<" + options.listType +"><li>"+ before +"<a href=\"#"+ id + "\">" + txt + "</a>";</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">                     previous = tagNumber;</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">                 break;</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">             case (tagNumber == previous) : //it means that stay on the same level (e.g. h3 and stay on it)</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">                     appHTML = appHTML + "</li><li>"+ before +"<a href=\"#"+ id + "\">" + txt +  "</a>";</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">                 break;</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">             case (tagNumber < previous) : //it means that we went up but we don't know how much levels  (e.g. from h3 to h2)</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">                     while(tagNumber != previous) {</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">                         appHTML = appHTML + "</" + options.listType +"></li>";</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">                         previous--;</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">                     }</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">                     appHTML = appHTML + "<li>"+ before +"<a href=\"#"+ id + "\">" + txt + "</a></li>";</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">                 break;</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">         }</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">         i++;</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">     });</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">     //corrects our last item, because it may have some opened ul's</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">     while(tagNumber != options.start) {</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">         appHTML = appHTML + "</" + options.listType +">";</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">         tagNumber--;</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">     }</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">     //append our html to our object</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">     appHTML = options.stocTitle + "<"+ options.listType + ">" + appHTML + "</" + options.listType + ">";</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">       obj.append(appHTML);</span></div></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: large;"><b>How to Make our STOC smoother</b></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">I’ve stolen <a href="http://css-tricks.com/snippets/jquery/smooth-scrolling/">CSS trick’s smooth scroll code</a>, but I hope they don’t mind :D</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">What we have to do here is just put this (compressed) function to load when our smooth scroll in on (if the user doesn’t set it as 0).</span></div></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">/*all code above in here*/</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">  //append our html to our object</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">      appHTML = options.stocTitle + "<"+ options.listType + ">" + appHTML + "</" + options.listType + ">";</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">      obj.append(appHTML);</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">      //our pretty smooth scrolling here</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">      // acctually I've just compressed the code so you guys will think that I'm the man . Source: http://css-tricks.com/snippets/jquery/smooth-scrolling/</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">      if (options.smoothScroll == 1) {</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">          $(window).load(function(){</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">              function filterPath(string){return string.replace(/^\//,'').replace(/(index|default).[a-zA-Z]{3,4}$/,'').replace(/\/$/,'')}var locationPath=filterPath(location.pathname);var scrollElem=scrollableElement('html','body');obj.find('a[href*=#]').each(function(){var thisPath=filterPath(this.pathname)||locationPath;if(locationPath==thisPath&&(location.hostname==this.hostname||!this.hostname)&&this.hash.replace(/#/,'')){var $target=$(this.hash),target=this.hash;if(target){var targetOffset=$target.offset().top;$(this).click(function(event){event.preventDefault();$(scrollElem).animate({scrollTop:targetOffset},400,function(){location.hash=target})})}}});function scrollableElement(els){for(var i=0,argLength=arguments.length;i<argLength;i++){var el=arguments[i],$scrollElement=$(el);if($scrollElement.scrollTop()>0){return el}else{$scrollElement.scrollTop(1);var isScrollable=$scrollElement.scrollTop()>0;$scrollElement.scrollTop(0);if(isScrollable){return el}}}return[]}</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">          });</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;">        }</span></div></div><div style="text-align: justify;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><br /> </span></div><span class="Apple-style-span" style="color: #515151; line-height: 18px;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Our final result is this:</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="line-height: 18px;"><span class="Apple-style-span" style="color: blue; font-family: Arial, Helvetica, sans-serif;"><br /> </span></span></div><div><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><div style="color: blue; line-height: 18px; text-align: justify;">(function($){</div><div style="color: blue; line-height: 18px; text-align: justify;"> $.fn.stoc = function(options) {</div><div style="color: blue; line-height: 18px; text-align: justify;">  //Our default options</div><div style="color: blue; line-height: 18px; text-align: justify;">  var defaults = {</div><div style="color: blue; line-height: 18px; text-align: justify;">      search: "body", //where we will search for titles</div><div style="color: blue; line-height: 18px; text-align: justify;">      depth: 6, //how many hN should we search</div><div style="color: blue; line-height: 18px; text-align: justify;">      start: 1, //which hN will be the first (and after it we go just deeper)</div><div style="color: blue; line-height: 18px; text-align: justify;">      stocTitle: "<h2>Contents</h2>", //what to display before our box</div><div style="color: blue; line-height: 18px; text-align: justify;">      listType: "ul", //could be ul or ol</div><div style="color: blue; line-height: 18px; text-align: justify;">      smoothScroll: 1</div><div style="color: blue; line-height: 18px; text-align: justify;">  };</div><div style="color: blue; line-height: 18px; text-align: justify;">  //let's extend our plugin with default or user options when defined</div><div style="color: blue; line-height: 18px; text-align: justify;">  var options = $.extend(defaults, options);</div><div style="color: blue; line-height: 18px; text-align: justify;">  return this.each(function() {</div><div style="color: blue; line-height: 18px; text-align: justify;">      //"cache" our target and search objects</div><div style="color: blue; line-height: 18px; text-align: justify;">      obj = $(this); //target</div><div style="color: blue; line-height: 18px; text-align: justify;">      src = $(options.search); //search</div><div style="color: blue; line-height: 18px; text-align: justify;">      //let's declare some variables. We need this var declaration to create them as local variables (not global)</div><div style="color: blue; line-height: 18px; text-align: justify;">      var appHTML = "", tagNumber = 0, txt = "", id = "", before = "", after = "", previous = options.start, start = options.start, depth = options.depth, i = 0, srcTags = "h" + options.start, cacheHN = "";</div><div style="color: blue; line-height: 18px; text-align: justify;">      //which tags we will search</div><div style="color: blue; line-height: 18px; text-align: justify;">      while ( depth > 1) {</div><div style="color: blue; line-height: 18px; text-align: justify;">          start++; //we will just get our start level and numbers higher than it</div><div style="color: blue; line-height: 18px; text-align: justify;">          srcTags = srcTags + ", h" + start;</div><div style="color: blue; line-height: 18px; text-align: justify;">          depth--; //since went one level up, our depth will go one level down</div><div style="color: blue; line-height: 18px; text-align: justify;">      }</div><div style="color: blue; line-height: 18px; text-align: justify;">      src.find(srcTags).each(function() {</div><div style="color: blue; line-height: 18px; text-align: justify;">          //we will cache our current H element</div><div style="color: blue; line-height: 18px; text-align: justify;">          cacheHN = $(this);</div><div style="color: blue; line-height: 18px; text-align: justify;">          //if we are on h1, 2, 3...</div><div style="color: blue; line-height: 18px; text-align: justify;">          tagNumber = ( cacheHN.get(0).tagName ).substr(1);</div><div style="color: blue; line-height: 18px; text-align: justify;">          //sets the needed id to the element</div><div style="color: blue; line-height: 18px; text-align: justify;">          id = cacheHN.attr('id');</div><div style="color: blue; line-height: 18px; text-align: justify;">          if (id == "") { //if it doesn't have only, of course</div><div style="color: blue; line-height: 18px; text-align: justify;">              id = "h" + tagNumber + "_" + i;</div><div style="color: blue; line-height: 18px; text-align: justify;">              cacheHN.attr('id', id);</div><div style="color: blue; line-height: 18px; text-align: justify;">          }</div><div style="color: blue; line-height: 18px; text-align: justify;">          //our current text</div><div style="color: blue; line-height: 18px; text-align: justify;">          txt = cacheHN.text();</div><div style="color: blue; line-height: 18px; text-align: justify;">          switch(true) { //with switch(true) we can do comparisons in each case</div><div style="color: blue; line-height: 18px; text-align: justify;">              case (tagNumber > previous) : //it means that we went down one level (e.g. from h2 to h3)</div><div style="color: blue; line-height: 18px; text-align: justify;">                      appHTML = appHTML + "<" + options.listType +"><li>"+ before +"<a href=\"#"+ id + "\">" + txt + "</a>";</div><div style="color: blue; line-height: 18px; text-align: justify;">                      previous = tagNumber;</div><div style="color: blue; line-height: 18px; text-align: justify;">                  break;</div><div style="color: blue; line-height: 18px; text-align: justify;">              case (tagNumber == previous) : //it means that stay on the same level (e.g. h3 and stay on it)</div><div style="color: blue; line-height: 18px; text-align: justify;">                      appHTML = appHTML + "</li><li>"+ before +"<a href=\"#"+ id + "\">" + txt +  "</a>";</div><div style="color: blue; line-height: 18px; text-align: justify;">                  break;</div><div style="color: blue; line-height: 18px; text-align: justify;">              case (tagNumber < previous) : //it means that we went up but we don't know how much levels  (e.g. from h3 to h2)</div><div style="color: blue; line-height: 18px; text-align: justify;">                      while(tagNumber != previous) {</div><div style="color: blue; line-height: 18px; text-align: justify;">                          appHTML = appHTML + "</" + options.listType +"></li>";</div><div style="color: blue; line-height: 18px; text-align: justify;">                          previous--;</div><div style="color: blue; line-height: 18px; text-align: justify;">                      }</div><div style="color: blue; line-height: 18px; text-align: justify;">                      appHTML = appHTML + "<li>"+ before +"<a href=\"#"+ id + "\">" + txt + "</a></li>";</div><div style="color: blue; line-height: 18px; text-align: justify;">                  break;</div><div style="color: blue; line-height: 18px; text-align: justify;">          }</div><div style="color: blue; line-height: 18px; text-align: justify;">          i++;</div><div style="color: blue; line-height: 18px; text-align: justify;">      });</div><div style="color: blue; line-height: 18px; text-align: justify;">      //corrects our last item, because it may have some opened ul's</div><div style="color: blue; line-height: 18px; text-align: justify;">      while(tagNumber != options.start) {</div><div style="color: blue; line-height: 18px; text-align: justify;">          appHTML = appHTML + "</" + options.listType +">";</div><div style="color: blue; line-height: 18px; text-align: justify;">          tagNumber--;</div><div style="color: blue; line-height: 18px; text-align: justify;">      }</div><div style="color: blue; line-height: 18px; text-align: justify;">      //append our html to our object</div><div style="color: blue; line-height: 18px; text-align: justify;">      appHTML = options.stocTitle + "<"+ options.listType + ">" + appHTML + "</" + options.listType + ">";</div><div style="color: blue; line-height: 18px; text-align: justify;">      obj.append(appHTML);</div><div style="color: blue; line-height: 18px; text-align: justify;">      //our pretty smooth scrolling here</div><div style="color: blue; line-height: 18px; text-align: justify;">      // acctually I've just compressed the code so you guys will think that I'm the man . Source: http://css-tricks.com/snippets/jquery/smooth-scrolling/</div><div style="color: blue; line-height: 18px; text-align: justify;">      if (options.smoothScroll == 1) {</div><div style="color: blue; line-height: 18px; text-align: justify;">          $(window).load(function(){</div><div style="color: blue; line-height: 18px; text-align: justify;">              function filterPath(string){return string.replace(/^\//,'').replace(/(index|default).[a-zA-Z]{3,4}$/,'').replace(/\/$/,'')}var locationPath=filterPath(location.pathname);var scrollElem=scrollableElement('html','body');obj.find('a[href*=#]').each(function(){var thisPath=filterPath(this.pathname)||locationPath;if(locationPath==thisPath&&(location.hostname==this.hostname||!this.hostname)&&this.hash.replace(/#/,'')){var $target=$(this.hash),target=this.hash;if(target){var targetOffset=$target.offset().top;$(this).click(function(event){event.preventDefault();$(scrollElem).animate({scrollTop:targetOffset},400,function(){location.hash=target})})}}});function scrollableElement(els){for(var i=0,argLength=arguments.length;i<argLength;i++){var el=arguments[i],$scrollElement=$(el);if($scrollElement.scrollTop()>0){return el}else{$scrollElement.scrollTop(1);var isScrollable=$scrollElement.scrollTop()>0;$scrollElement.scrollTop(0);if(isScrollable){return el}}}return[]}</div><div style="color: blue; line-height: 18px; text-align: justify;">          });</div><div style="color: blue; line-height: 18px; text-align: justify;">      }</div><div style="color: blue; line-height: 18px; text-align: justify;">  });</div><div style="color: blue; line-height: 18px; text-align: justify;"> };</div><div style="color: blue; line-height: 18px; text-align: justify;">})(jQuery);</div><div style="color: blue; line-height: 18px; text-align: justify;"><br /> </div><div><div style="text-align: justify;"><span class="Apple-style-span" style="line-height: 18px;"><b><span class="Apple-style-span" style="font-size: large;">Are you hungry yet?</span></b></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="line-height: 18px;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="line-height: 18px;">What about you help me with some improvements on this plugin? Do you have any tip? Anything that you can think of a better way to do?</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="line-height: 18px;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="line-height: 18px;">Do you have any other features in mind? Or even another plugin idea that you’d like to see a tutorial on?</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="line-height: 18px;"><br /> </span></div><div style="text-align: justify;"><span class="Apple-style-span" style="line-height: 18px;">Share your thoughts with us! </span></div></div></span></div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/8472448211262689043-3544974421923540558?l=advancedphptutorial.blogspot.com' alt='' /></div><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=1A_PnOImLxQ:Zr1fCfgA11U:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=1A_PnOImLxQ:Zr1fCfgA11U:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=1A_PnOImLxQ:Zr1fCfgA11U:-BTjWOF_DHI"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=1A_PnOImLxQ:Zr1fCfgA11U:-BTjWOF_DHI" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=1A_PnOImLxQ:Zr1fCfgA11U:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=1A_PnOImLxQ:Zr1fCfgA11U:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=1A_PnOImLxQ:Zr1fCfgA11U:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=1A_PnOImLxQ:Zr1fCfgA11U:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=1A_PnOImLxQ:Zr1fCfgA11U:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=1A_PnOImLxQ:Zr1fCfgA11U:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=1A_PnOImLxQ:Zr1fCfgA11U:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?i=1A_PnOImLxQ:Zr1fCfgA11U:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?a=1A_PnOImLxQ:Zr1fCfgA11U:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/AdvancedPhpTutorial?d=l6gmwiTKsz0" border="0"></img></a> </div>http://advancedphptutorial.blogspot.com/2011/07/jquery-plugin-table-of-contents-with.htmlnoreply@blogger.com (LearnPHP)0