tag:blogger.com,1999:blog-70018870556932135112024-02-18T19:04:09.852-08:00ZZ TutorialsPHP/MySQL,jQuery,CSS3,html,Ajax,Apps,Design Related,Photoshop Tutorials,Javascriptetkalmhttp://www.blogger.com/profile/00079170688544289459noreply@blogger.comBlogger20125tag:blogger.com,1999:blog-7001887055693213511.post-5674856869793656512010-08-22T19:46:00.000-07:002010-08-22T19:47:58.410-07:00AutoSprites – A jQuery Menu Plugin<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://laroouse.files.wordpress.com/2010/08/menu.png"><img style="float: left; margin: 0pt 10px 10px 0pt; cursor: pointer; width: 387px; height: 242px;" src="http://laroouse.files.wordpress.com/2010/08/menu.png" alt="" border="0" /></a><br /><div style="text-align: left;"><a href="http://www.gethifi.com/blog/autosprites-jquery-menu-plugin" target="_blank"><img src="http://laroouse.files.wordpress.com/2010/01/paste31.jpg" alt="" width="276" height="58" /></a></div> <p><a href="http://files.www.gethifi.com/posts/autosprites/index.html" target="_blank"><img src="http://laroouse.wordpress.com/files/2010/01/paste11.jpg" alt="" width="276" height="58" /></a></p> <p><a href="http://files.www.gethifi.com/posts/autosprites/autosprites.zip" target="_blank"><img src="http://laroouse.wordpress.com/files/2010/01/paste6.jpg" alt="" width="276" height="60" /></a></p>etkalmhttp://www.blogger.com/profile/00079170688544289459noreply@blogger.com0tag:blogger.com,1999:blog-7001887055693213511.post-24921096274084261702010-08-22T19:42:00.000-07:002010-08-22T19:45:46.921-07:00Add Facebook Like Box to Your Site<p>Facebook pages are becoming more and more popular with brands, bands, organisations and celebrities who want to boost their social exposure on the web. Facebook’s social plugins and widgets are a great way to link your Facebook page with your website. Let’s look at how to not only insert the popular Like Box code onto your website, but also how to customize it to fit with your design, and make sure the code correctly validates.</p> <p><span id="more-1326"></span></p> <p><a href="http://line25.com/wp-content/uploads/2010/facebook/demo/index.html"><img src="http://line25.com/wp-content/uploads/2010/facebook/7.jpg" alt="View the Facebook Like Box demo" /></a></p> <p class="btn"><a href="http://line25.com/wp-content/uploads/2010/facebook/demo/index.html">View the Facebook Like Box demo</a></p> <h3 class="header">Setting up the Like Box widget</h3> <p><img src="http://line25.com/wp-content/uploads/2010/facebook/1.png" alt="" /></p> <p>First things first, let’s get the basic Like Box widget set up. Log into your Facebook account and click the ‘Edit page’ link on the left side of your page’s profile. Over on the right you’ll see the link ‘<a href="http://developers.facebook.com/docs/reference/plugins/like-box">Promote with a Like Box</a>‘.</p> <p><img src="http://line25.com/wp-content/uploads/2010/facebook/2.png" alt="" /></p> <p>The first thing you’ll need is the ID of your Facebook page. You can find this by checking the URL of most of the links on your page profile.</p> <p><img src="http://line25.com/wp-content/uploads/2010/facebook/3.png" alt="" /></p> <p>Enter the size and configure the options of your page, then hit the ‘Get Code’ button. Getting the full potential out of a Like Box takes a lot of time and effort. If you’re looking for a quick solution the iFrame code quickly and easily inserts a box onto your webpage, but don’t expect to be able to customize it too much. If you have an hour or two to spare, copy the XFBML code.</p> <div class="code"> <pre><div id="fb-root"></div><br /><script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script><br /><script type="text/javascript">FB.init("API-KEY-HERE");</script><br /><fb:fan profile_id="PAGE-ID-HERE" connections="18" width="403" height="360"></fb:fan><br /></pre> </div> <p>In order to use the FBML code, you’ll need some fancy Javascript SDK. Luckily for those of us who aren’t Javascript Wizards, you can find the code already written out from <a href="http://www.iandavidchapman.com/facebook-fan-box/" title="How to add a Facebook Fan Box to your WordPress blog">tutorials on the web</a>. <em>Note:</em> The code here uses the old <code><fb:fan></fb:fan></code> code rather than the new <code><fb:like-box></fb:like-box></code> code, so remember to change that in your snippet.</p> <p><img src="http://line25.com/wp-content/uploads/2010/facebook/4.png" alt="" /></p> <p>To get the Javascript method working you’ll also need an API key. To get one, head over to <a href="http://www.facebook.com/developers/apps.php">http://www.facebook.com/developers/apps.php</a> and set up a new application. You can leave most of the details blank, as long as you end up with a key of some sort to insert into the SDK code.</p> <p><img src="http://line25.com/wp-content/uploads/2010/facebook/5.jpg" alt="" /></p> <p>Give the page a test. You should see the box load and display correctly, despite being in the boring default Facebook colours. It’s time to start customizing!</p> <h3 class="header">Customizing the Facebook Like Box</h3> <div class="code"> <pre>css="http://line25.com/wp-content/uploads/2010/facebook/demo/style.css?1"<br /></pre> </div> <p>Link your CSS stylesheet by adding a new attribute to the <code><fb:fan></fb:fan></code> code. The <code>?1</code> at the end is a requirement and needs changing every time you make changes to the your CSS file, otherwise the old styling will be used from Facebook’s cache. So basically if you make a change and reupload the CSS file, don’t forget to also change the index file to <code>?2</code> and so on.</p> <div class="code"> <pre><br /></pre> </div> <p>If you’re adding the Facebook Like Box to a WordPress theme, you could use WordPress tags to render out the stylesheet URL.</p> <p><img src="http://line25.com/wp-content/uploads/2010/facebook/6.jpg" alt="" /></p> <p>The <a href="https://addons.mozilla.org/en-US/firefox/addon/1843/">Firebug</a> plugin for Firefox makes it easy to edit and customize your Like Box in the browser. This saves plenty of time not having to change the stylesheet identifier and re-upload all the files. Just configure the styling how you wish, then replicate the CSS in your stylesheet.</p> <div class="code"> <pre><span style="font-size:85%;">.fan_box .full_widget {<br /> background: none; border: none;<br />}<br />.fan_box .connections_grid .grid_item {<br /> padding: 0 8px 10px 8px;<br />}<br /> .fan_box .connections_grid .grid_item a img {<br /> box-shadow: 0px 0px 10px #333; -moz-box-shadow: 0px 0px 10px #333; -webkit-box-shadow: 0px 0px 10px #333;<br /> }<br /> .fan_box .connections_grid .grid_item a:hover img {<br /> box-shadow: 0px 3px 10px #333; -moz-box-shadow: 0px 3px 10px #333; -webkit-box-shadow: 0px 3px 10px #333;<br /> }<br />.fan_box .full_widget .connect_top {<br /> background: url(http://line25.com/wp-content/uploads/2010/facebook/demo/images/blue.png);<br /> border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;<br />}<br />.fan_box .connections .connections_grid {<br /> padding-top:16px;<br />}<br />.fan_box .connections {<br /> border-top: none;<br /> padding:15px 0 0;<br /> color: #ccc;<br /> font: italic 21px Georgia;<br /> text-align: center;<br /> text-shadow: 0px 1px 4px #000;<br />}<br /> .fan_box .connections span.total {<br /> color: #fff;<br /> }<br /><br />.fan_box .connections_grid .grid_item .name {<br /> color: #ccc;<br /> font-size: 11px;<br />}<br />.fan_box .profileimage {<br /> margin: 0;<br />}</span><br /></pre> </div> <p>Here’s the CSS I’ve edited and added to generate the styling used in the demo. Most of the CSS rules clear out the default styling, for example: <code>border: none;</code>, but there’s also some fancy additions such as the CSS3 <code>text-shadow</code> styling.</p> <p><img src="http://line25.com/wp-content/uploads/2010/facebook/7.jpg" alt="" /></p> <p>It’s up to you how far you go with the customization. You could simply remove or change the background and border colours, or completely rearrange the elements into something completely unique.</p> <h3 class="header">Fixing the validation errors</h3> <p><img src="http://line25.com/wp-content/uploads/2010/facebook/8.png" alt="" /></p> <p>The Facebook Like Box now looks great, but the FBML code doesn’t do your webpage validation any favours. Don’t worry, there’s a quick and easy fix for that…</p> <div class="code"> <pre><div id="fb-root"></div><br /><script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script><br /><script type="text/javascript">FB.init("fd161b28d6338cb852d8ed87878f67c3");</script><br /><!-- FBML <fb:fan profile_id="119754924730147" connections="18" width="403" height="360" css="http://line25.com/wp-content/uploads/2010/facebook/demo/style.css?5"></fb:fan> FBML --><br /><script src="js/fbvalidate.js" type="text/javascript"></script><br /></pre> </div> <p>Download the handy Javascript file from <a href="http://www.ka-mediendesign.de/blog/fbml-in-xhtml-neue-version/">ka-mediendesign.de</a>. The author’s blog is in German, but you can figure out how it’s implemented pretty easily. Basically you need to reference the Facebook Validation Javascript file underneath the FBML code, then wrap the tags with <code><!-- FBML</code--> comments. The Javascript will then magically fix those validation errors!</code></p> <p><a href="http://line25.com/wp-content/uploads/2010/facebook/demo/index.html"><img src="http://line25.com/wp-content/uploads/2010/facebook/7.jpg" alt="View the Facebook Like Box demo" /></a></p> <p style="font-weight: bold; text-align: center; color: rgb(255, 0, 0);" class="btn"><a href="http://line25.com/wp-content/uploads/2010/facebook/demo/index.html">View the Facebook Like Box demo</a></p>etkalmhttp://www.blogger.com/profile/00079170688544289459noreply@blogger.com0tag:blogger.com,1999:blog-7001887055693213511.post-71296558462860208252010-08-22T19:38:00.000-07:002010-08-22T19:41:48.064-07:00Social Light Icon Set<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://aext.net/wp-contents/uploads/2010/08/pr-social-gray-500x392.jpg"><img style="float: left; margin: 0pt 10px 10px 0pt; cursor: pointer; width: 416px; height: 327px;" src="http://aext.net/wp-contents/uploads/2010/08/pr-social-gray-500x392.jpg" alt="" border="0" /></a><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><h3>Download for free</h3><p>These icons are absolutely free to download. Feel free to use them for personal or commercial projects. They come in 2 sizes PNG format with two different sizes – 48 x 48px and 128 x 128px. No re-distribution allowed! If you’d like to share this set of icons, help us spread the word by linking back to this original page.</p><ul><li>Download Type: PNG</li><li>Download Size: 209 KBs</li><li>Download Link: <a href="http://aext.net/wp-content/uploads/freebies/social-media-icon-light.zip" title="social media icon">Social Media Light Icon Set</a></li></ul><p>We will continue to release more freebies for our readers, stay tuned!</p>etkalmhttp://www.blogger.com/profile/00079170688544289459noreply@blogger.com0tag:blogger.com,1999:blog-7001887055693213511.post-66077534342677402592010-07-11T19:50:00.000-07:002010-07-11T19:53:05.496-07:00Really Useful Tutorials You Should Have Read in June 2010<p>This update covers really useful tutorials, tips and techniques that you should have read in June 2010. Featured publications include: Justin Tadlock, Nettuts+, David Walsh Blog, Smashing Magazine, Tutorialzine, A List Apart, Perishable Press, Carsonified, Marcofolio, Nicolas Gallagher, Codrops, Onextrapixel, Digging into WordPress, Six Revisions, Line25, 1stWebDesigner, Alex Marandon, and Voosh Themes.</p> <p><img src="http://content.w3avenue.com/2010/updates/tutorials-2010-june/cover.jpg" alt="" width="500" height="250" /></p> <p>Featured authors include: Justin Tadlock, David Walsh, Martin Angelov, Nicolas Gallagher, Jeff Starr, Marco Kuiper, Faruk Ates, Chris Coyier, Chris Spooner, Richard Fink, Dan Wellman, Rafael Soto, Lorna Jane Mitchell, Divyang Patel, John Cox, Mary Lou, Irina Borozan, Jonathan Phillips, Paras Chopra, Alex Marandon, Darren, and Chris Creed.</p> <p><span id="more-1945"></span></p> <ul><li><a href="http://www.1stwebdesigner.com/tutorials/distance-finder-google-maps-api/" target="_blank">How to Build a Distance Finder with Google Maps API</a><br />By Irina Borozan, June 29th, 2010<br />Site: 1stwebdesigner</li><li><a href="http://line25.com/articles/super-cool-css-flip-effect-with-webkit-animation" target="_blank">Super Cool CSS Flip Effect with Webkit Animation</a><br />By Chris Spooner, June 28th, 2010<br />Site: Line25</li><li><a href="http://digwp.com/2010/06/shortcode-for-includes/" target="_blank">WordPress Shortcode for Includes</a><br />By Chris Coyier, June 28th, 2010<br />Site: Digging into WordPress</li><li><a href="http://tympanus.net/codrops/2010/06/27/beautiful-photo-stack-gallery-with-jquery-and-css3/" target="_blank">Beautiful Photo Stack Gallery with jQuery and CSS3</a><br />By Mary Lou, June 27th, 2010<br />Site: Codrops</li><li><a href="http://www.smashingmagazine.com/2010/06/24/the-ultimate-guide-to-a-b-testing/" target="_blank">The Ultimate Guide To A/B Testing</a><br />By Paras Chopra, June 24th, 2010<br />Site: Smashing Magazine</li><li><a href="http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/" target="_blank">Taking Advantage of HTML5 and CSS3 with Modernizr</a><br />By Faruk Ateş, June 22nd, 2010<br />Site: Perishable Press</li><li><a href="http://www.marcofolio.net/webdesign/jquery_quickie_unlimited_scroll_using_the_twitter_api.html" target="_blank">Unlimited Scroll Using the Twitter API</a><br />By Marco Kuiper, June 22nd, 2010<br />Site: Marcofolio</li><li><a href="http://alexmarandon.com/articles/web_widget_jquery/" target="_blank">How to Build a Web Widget (Using jQuery)</a><br />By Alex Marandon, June 22nd, 2010<br />Site: Alex Marandon</li><li><a href="http://net.tutsplus.com/tutorials/javascript-ajax/an-introduction-to-cookies/" target="_blank">An Introduction to Cookies</a><br />By Tom Clement, June 21st, 2010<br />Site: Nettuts+</li><li><a href="http://perishablepress.com/press/2010/06/21/how-to-micro-optimize-your-css/" target="_blank">How to Micro-Optimize Your CSS</a><br />By Jeff Starr, June 21st, 2010<br />Site: Perishable Press</li><li><a href="http://tympanus.net/codrops/2010/06/17/latest-post-blogroll-slider/" target="_blank">Latest Post Blogroll Slider with jQuery and PHP</a><br />By Mary Lou , June 17th, 2010<br />Site: Codrops</li><li><a href="http://tutorialzine.com/2010/06/apple-like-retina-effect-jquery-css/" target="_blank">Apple-like Retina Effect With jQuery</a><br />By Martin Angelov, June 16th, 2010<br />Site: Tutorialzine</li><li><a href="http://net.tutsplus.com/tutorials/html-css-techniques/html5-microdata-welcome-to-the-machine/" target="_blank">HTML5 Microdata: Welcome to the Machine</a><br />By John Cox, June 14th, 2010<br />Site: Nettuts+</li><li><a href="http://line25.com/articles/getting-started-with-tumblr-and-custom-theme-design" target="_blank">Getting Started with Tumblr & Custom Theme Design</a><br />By Chris Spooner, June 14th, 2010<br />Site: Line25</li><li><a href="http://www.1stwebdesigner.com/tutorials/create-buddypress-theme/" target="_blank">How to Create Your Own BuddyPress Theme</a><br />By Darren, June 14th, 2010<br />Site: 1stwebdesigner</li><li><a href="http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/" target="_blank">Multiple Backgrounds and Borders with CSS 2.1</a><br />By Nicolas Gallagher, June 10th, 2010<br />Site: Nicolas Gallagher</li><li><a href="http://net.tutsplus.com/tutorials/php/how-to-authenticate-your-users-with-facebook-connect/" target="_blank">How to Authenticate Users With Facebook Connect</a><br />By Rafael Soto, June 10th, 2010<br />Site: Nettuts+</li><li><a href="http://justintadlock.com/archives/2010/06/10/a-refresher-on-custom-taxonomies" target="_blank">A Refresher on Custom Taxonomies</a><br />By Justin Tadlock, June 10th, 2010<br />Site: Justin Tadlock</li><li><a href="http://tutorialzine.com/2010/06/making-first-chrome-extension/" target="_blank">Making Your First Google Chrome Extension</a><br />By Martin Angelov, June 9th, 2010<br />Site: Tutorialzine</li><li><a href="http://www.onextrapixel.com/2010/06/08/mysql-has-functions-part-1-date-time-functions/" target="_blank">MySQL Has Functions</a><br />By Jonathan Phillips, June 8th, 2010<br />Site: Onextrapixel</li><li><a href="http://www.alistapart.com/articles/fonts-at-the-crossing/" target="_blank">Web Fonts at the Crossing</a><br />By Richard Fink, June 8th, 2010<br />Site: A List Apart</li><li><a href="http://www.marcofolio.net/css/animated_wicked_css3_3d_bar_chart.html" target="_blank">Animated Wicked CSS3 3D Bar Chart</a><br />By Marco Kuiper, June 7th, 2010<br />Site: Marcofolio</li><li><a href="http://carsonified.com/blog/dev/9-magic-methods-for-php/" target="_blank">9 Magic Methods for PHP</a><br />By Lorna Jane Mitchell, June 7th, 2010<br />Site: Carsonified</li><li><a href="http://www.vooshthemes.com/blog/wordpress-tip/create-a-professional-portfolio-using-wordpress-3-0-custom-post-types/" target="_blank">Create a Professional Portfolio Using WordPress 3.0 Custom Post Types</a><br />By Chris Creed, June 7th, 2010<br />Site: Voosh Themes</li><li><a href="http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-drop-down-nav-menu-with-html5-css3-and-jquery/" target="_blank">How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery</a><br />By Dan Wellman, June 7th, 2010<br />Site: Nettuts+</li><li><a href="http://sixrevisions.com/web_design/google-font-api-guide/" target="_blank">A Guide to Google Font API</a><br />By Divyang Patel, June 1st, 2010<br />Site: Six Revisions</li><li><a href="http://justintadlock.com/archives/2010/06/01/goodbye-headaches-hello-menus" target="_blank">Goodbye, Headaches. Hello, Menus!</a><br />By Justin Tadlock, June 1st, 2010<br />Site: Justin Tadlock</li><li><a href="http://davidwalsh.name/mootools-drag-ajax" target="_blank">Using jQuery or MooTools For Drag, Drop, Sort, Save</a><br />By David Walsh, June 1st, 2010<br />Site: David Walsh Blog</li></ul> So which tutorials you found most useful. Also feeetkalmhttp://www.blogger.com/profile/00079170688544289459noreply@blogger.com0tag:blogger.com,1999:blog-7001887055693213511.post-39213820155483147632010-07-10T15:27:00.000-07:002010-07-10T16:58:25.458-07:00A jQuery-powered social dropdown menu<!-- BEGIN MAIN --><a href="http://www.skyrocketlabs.com/categories/tutorials/jquery-social-dropdown-menu/demo/index.html" title="View the demo"><img style="width: 458px; height: 343px;" src="http://www.skyrocketlabs.com/img/articles/jquery-social-dropdown-menu.png" alt="View the demo" class="screenshot" /></a> <ul class="buttons"><li><a href="http://www.skyrocketlabs.com/categories/tutorials/jquery-social-dropdown-menu/demo/index.html">Skip the code & show me the demo</a></li><li><a href="http://www.skyrocketlabs.com/categories/tutorials/jquery-social-dropdown-menu/jquery-social-dropdown-menu.zip">Download (.zip)</a></li></ul> <h3>Features @ a glance</h3> <ul class="basic"><li><strong>Flexibility</strong> for you to add as many items as you wish (although how many social networks could you possibly be registered with? Wait...don't answer that).</li><li><strong>The menu remains locked</strong> to the top-right of your page as you vertically scroll, for added accessibility (although this feature it does not work in IE6).</li><li>A dash of <strong>CSS3 dropshadow</strong> effect adds a little extra dimension to the display (not visible in IE).</li><li>Amaze your <strong>dog</strong>, your <strong>cat</strong> or your <strong>neighbor's goldfish</strong> with yet another menu script you probably don't need.</li></ul> I've tested it across browsers but, as mentioned, there are some positioning issues with IE6etkalmhttp://www.blogger.com/profile/00079170688544289459noreply@blogger.com0tag:blogger.com,1999:blog-7001887055693213511.post-64184534193222482742010-07-10T15:07:00.000-07:002010-07-10T15:27:49.488-07:00jQuery Plugin <h2 style="color: rgb(204, 0, 0);" class="title">jQuery Plugin - imgBox</h2>So, a couple of weeks ago I started working on challenging project - imgBox. imgBox is a jQuery plugin that implements a smooth zoom effect on images. Download it, try it, let me know what you think.<div class="intro"> </div> <p> You can see the demo at <a href="http://jqueryglobe.com/labs/imgbox/">this page</a>, and you can download the complete source code with examples <a href="http://fancybox.googlecode.com/files/jquery.imgbox-1.0.0.zip">from here</a>. </p> <h2><span style="font-size:100%;">What’s So Great About this Plugin?</span></h2> <ul><li>Elegant looking, Mac-like effect</li><li>Popup blockers are no problem. The content opens within the active browser window</li><li>Multiple images can be opened at the same time</li><li>Can be customized with settings and CSS</li><li>It’s just 7KB (packed)</li><li>All modern browsers supported, including IE6</li></ul>
<br /><h2 style="color: rgb(204, 0, 0);" class="title">jQuery Plugin - Feature List</h2>I love the simplicity of using (and more important re-using) jQuery plugins. So I decided to release a plugin that came from my personal need - Feature List. This jQuery plugin enables simple and easy creation of an interactive "Featured Items" widget. <div class="intro"> </div> <p> You can see the demo at <a href="http://jqueryglobe.com/labs/feature_list/">this page</a>, and you can download the complete source code with examples <a href="http://jqueryglobe.com/labs/feature_list/jquery.featureList-1.0.0.zip">from here</a>. </p> <h2><span style="font-size:100%;">What’s So Great About this Plugin?</span></h2> <ul><li>Slick effect, no Flash needed</li><li>It’s just 2K</li><li>Reusable on multiple containers</li><li>Cycles items via slideshow</li><li>Can be styled with custom HTML/CSS</li></ul>
<br /><h2 style="color: rgb(204, 0, 0);">jQuery show/hide list information</h2><span style="font-weight: bold;">Information</span><div id="information"> <p>This version of show / hide information uses jQuery and an unordered list. The list items all have the same classname and can be used anywhere on your page. The first word in each list item has a classname that is the same as the id of the div to be shown or hidden. The div can contain any information and can be styled as you want.</p> <p>Tested in IE6, IE7, IE8, Firefox, Opera, Safari (PC) and Google Chrome.</p> <h2><a href="http://www.stunicholls.com/various/jquery-more-list.html">Download</a></h2> <p>All the information you need for this demo is in the page source code. You will also need a copy of jQuery.</p><p style="color: rgb(204, 0, 0);">
<br /></p><h2 style="color: rgb(204, 0, 0);">jQuery - show me some more</h2><span style="font-weight: bold;">Information</span><div id="information"> <p>Yet another 'show me some more / less' routine, but this time using jQuery to add a little animation and to simplify the script.</p> <p>Just click the 'more ....' to expose the extra information and the '.... less' to close it.</p> <p>The jQuery is just a couple of lines long and all that is needed is to enclose the hidden information in a div with a class="hidden", then immediately after this div have an element with a classname 'show'. This demo uses an empty <i> element into which the jQuery routine adds 'more ....' and is changed to '.... less' when displaying the extra imformation. I have used jQuery to hide the extra information and to display the 'more / less' clickable areas so that if javascript is turned off then the full text will be shown without the 'more... / .... less' text.</p> <p>Tested in IE6, IE7, IE8, Firefox, Opera, Safari(PC) and Google Chrome.</p> <h2><a href="http://www.stunicholls.com/various/jquery-more-less.html">Download</a></h2> <p>All the information you need for this can be found in the source code and you will also need a copy of jQuery.</p> </div>
<br /> </div>
<br /><h2 style="color: rgb(204, 0, 0);">jQuery - Getting the Day from a Date</h2><div id="information"> <h2><span style="font-size:85%;">Information</span></h2> <p>This is a jQuery/javascript routine which allows you to select the date and it will display the day of the week for this date.</p> <p>The date picker routine will automatically alter the number of days depending on the month selected and the year. Leap years will automatically allow for February 29th.</p> <p>If you select a date of the 31st for instance and then change the month to one with fewer days then the date will adjust to the last day of the new month.</p> <p>You will need a copy of <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js&downloadBtn=">jQuery</a> to be able to use this routine.</p> <p>If you would like a copy of this demonstration then please email me and make a donation to support stunicholls.com.</p> </div> <!-- end of information --><h2><a href="http://www.stunicholls.com/various/jquery-days.html">Download</a></h2>etkalmhttp://www.blogger.com/profile/00079170688544289459noreply@blogger.com0tag:blogger.com,1999:blog-7001887055693213511.post-30539886584223121542010-07-10T03:46:00.000-07:002010-07-10T03:48:25.003-07:00Create Windows 7 start menu using CSS3 only<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.jankoatwarpspeed.com/image.axd?picture=2010%2f4%2fwin7startmenu.png"><img style="float: left; margin: 0pt 10px 10px 0pt; cursor: pointer; width: 436px; height: 364px;" src="http://www.jankoatwarpspeed.com/image.axd?picture=2010%2f4%2fwin7startmenu.png" alt="" border="0" /></a><br />I am fascinated with how much you can do with so little using CSS3. Many user interface elements that require images in order to have appropriate visual appearance now can be styled only with CSS3. In order to prove that I assigned myself a task to create Windows 7 start menu only with CSS3 (and some icons).<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><h1><a href="http://www.jankoatwarpspeed.com/post/2010/04/06/windows-7-start-menu-css3.aspx"><span style="font-size:85%;">Create Windows 7 start menu using CSS3 only</span></a></h1>etkalmhttp://www.blogger.com/profile/00079170688544289459noreply@blogger.com0tag:blogger.com,1999:blog-7001887055693213511.post-18330064094965824462010-07-10T03:41:00.000-07:002010-07-10T03:45:45.097-07:00Simple AJAX Commenting System<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://tutorialzine.com/wp-content/uploads/2010/06/i11.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 413px; height: 306px;" src="http://tutorialzine.com/wp-content/uploads/2010/06/i11.jpg" alt="" border="0" /></a>This time, we are making a Simple AJAX Commenting System. It will feature a gravatar integration and demonstrate how to achieve effective communication between jQuery and PHP/MySQL with the help of JSON.<br /><a href="http://tutorialzine.com/2010/06/simple-ajax-commenting-system/#comment-7371"><br /><span style="font-weight: bold;">Simple AJAX Commenting System</span></a>etkalmhttp://www.blogger.com/profile/00079170688544289459noreply@blogger.com0tag:blogger.com,1999:blog-7001887055693213511.post-85911169369091942292010-07-09T19:10:00.000-07:002010-07-09T19:13:12.596-07:00Simple Website Layout Tutorial Using HTML 5 and CSS 3<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.designzzz.com/wp-content/uploads/2010/02/final-630x478.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 485px; height: 367px;" src="http://www.designzzz.com/wp-content/uploads/2010/02/final-630x478.jpg" alt="" border="0" /></a><br /><br />As most of us know HTML 5 has created a big buzz on internet and is sure to give Adobe a hard time. Apple believes that HTML5 is what will define the web and would love to see more developers adopt it instead of Flash. Now that big video sites such as YouTube are testing support for HTML5 (Mashable).<br /><br />HTML 5 is a breakthrough which will improve the sites from design view point, seo etc. It when combined with css3 can make amazing web sites. For this you should check out this collection of all HTML 4 & 5<br /><br /><a href="http://www.designzzz.com/website-layout-tutorial-html-5-css-3/"><br /><span style="font-weight: bold;">Simple Website Layout Tutorial Using HTML 5 and CSS 3</span></a>etkalmhttp://www.blogger.com/profile/00079170688544289459noreply@blogger.com0tag:blogger.com,1999:blog-7001887055693213511.post-58790165117806751002010-07-09T19:07:00.000-07:002010-07-09T19:09:31.395-07:005 Simple Basic Steps to Create Facebook Application<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.crunchbase.com/assets/images/resized/0000/4561/4561v1-max-450x450.png"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;width: 245px; height: 100px;" src="http://www.crunchbase.com/assets/images/resized/0000/4561/4561v1-max-450x450.png" border="0" alt="" /></a><br />This article explains the basic steps needed to create Facebook Application. The steps and test application created in this example can be used as a template for your next more sophisticated applications. At the end of the article you will be presented with resources for the documentation, forum, blogs, and feeds to keep you up to date with the current Facebook platform status, since it is still evolving constantly.<br /><span style="font-weight:bold;"><br /><a href="http://www.dijexi.com/2009/07/5-simple-basic-steps-to-create-facebook-application/">5 Simple Basic Steps to Create Facebook Application</a></span>etkalmhttp://www.blogger.com/profile/00079170688544289459noreply@blogger.com0tag:blogger.com,1999:blog-7001887055693213511.post-86585847577668924652010-07-09T19:05:00.000-07:002010-07-09T19:06:48.671-07:00How to change upload file size on a Windows localhostIn a localhost Apache + PHP it is easy to change the uploaded file size to something larger than the default 16M.<br /><br />An example below show you how to change the upload file size to say 50M.<br /><br /> * Locate the PHP.ini file, for example in c:/xampp/Apache/bin/php.ini and open it with any text editor like WordPad by right-clicking -> Open With -> then choose WordPad.<br /><br /><br /><span style="font-weight:bold;"><a href="http://www.dijexi.com/2009/06/how-to-change-upload-file-size-on-a-windows-localhost/">How to change upload file size on a Windows localhost</a></span>etkalmhttp://www.blogger.com/profile/00079170688544289459noreply@blogger.com0tag:blogger.com,1999:blog-7001887055693213511.post-23441863678487535142010-07-09T19:00:00.000-07:002010-07-09T19:02:17.346-07:00CodeIgniter Tutorial: [Creating Accounting Application] Part 5 The Mainpage<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.dijexi.com/wp-content/uploads/2010/05/image_thumb.png"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 404px; height: 484px;" src="http://www.dijexi.com/wp-content/uploads/2010/05/image_thumb.png" border="0" alt="" /></a><br /><br /><br /><br />Ok, let’s start with the easiest one first. We will create a simple menu page that contains links to other modules on the system. We put it on the Mainpage controller class.<br /><br />Look at the Mainpage.php controller file. There is a function on it named exactly the same with the filename: Mainpage(). This should be exactly the same including the case. This is the constructor or initialization function of the class. Each time the class is called or instantiate, this function is called automatically. We put some initialization lines inside it:<br /><br /><span style="font-weight:bold;"><a href="http://www.dijexi.com/2010/05/codeigniter-tutorial-creating-accounting-application-part-5-the-mainpage/">CodeIgniter Tutorial: [Creating Accounting Application] Part 5 The Mainpage</a></span>etkalmhttp://www.blogger.com/profile/00079170688544289459noreply@blogger.com0tag:blogger.com,1999:blog-7001887055693213511.post-12978336254723252092010-07-09T18:57:00.000-07:002010-07-09T19:00:21.486-07:00CodeIgniter Tutorial: [Creating Accounting Application] Part 4 Preparing to Code<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.dijexi.com/wp-content/uploads/2009/09/PHP5templatecodegeneratedfromstarUML_thumb.png"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 504px; height: 436px;" src="http://www.dijexi.com/wp-content/uploads/2009/09/PHP5templatecodegeneratedfromstarUML_thumb.png" border="0" alt="" /></a><br /><br /><br />After installing StarUML PHP 5 Code Generator Template , StarUML will have a capability to generate PHP template code based on the models we have defined before. But there’s a little hack to be done so that the naming of the file generated complies with CodeIgniter.<br /><span style="font-weight:bold;"><br /><a href="http://www.dijexi.com/2009/09/codeigniter-tutorial-creating-accounting-application-part-4-preparing-to-code/">CodeIgniter Tutorial: [Creating Accounting Application] Part 5 The Mainpage</a></span>etkalmhttp://www.blogger.com/profile/00079170688544289459noreply@blogger.com0tag:blogger.com,1999:blog-7001887055693213511.post-12751261890421471962010-07-09T17:26:00.000-07:002010-07-09T17:28:18.977-07:00CodeIgniter Tutorial: [Creating Accounting Application] Part 3 ER Diagram and Creating Database<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.dijexi.com/wp-content/uploads/2009/08/Blankmysqlmodelonmysqlworkbench_thumb.png"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 504px; height: 408px;" src="http://www.dijexi.com/wp-content/uploads/2009/08/Blankmysqlmodelonmysqlworkbench_thumb.png" border="0" alt="" /></a><br /><br /><br />In the previous parts of this tutorial series we have discussed how to setup the application environment using XAMPP and CodeIgniter, and the application specification. We have done the analysis and design using UML use case and class diagram with free UML diagram tool StarUML.<br /><br />In this part, we will discuss the database design for our application. This database is needed to hold the data for our application.<br /><br />We are going to draw the entity relationship diagram (ERD) using a free tool called MySQL workbench, formerly fabForce ERD tools for MySQL. Before continuing, please download the program here and install it to your computer.<br /><br />At the end of the designing process, we will create our database structure directly to a MySQL server that can be used by our application.<br /><br /><span style="font-weight:bold;"><a href="http://www.dijexi.com/2009/08/codeigniter-tutorial-creating-accounting-application-part-3-er-diagram-and-creating-database/">CodeIgniter Tutorial: [Creating Accounting Application] Part 3 ER Diagram and Creating Database</a></span>etkalmhttp://www.blogger.com/profile/00079170688544289459noreply@blogger.com0tag:blogger.com,1999:blog-7001887055693213511.post-11024372007294638682010-07-09T17:22:00.001-07:002010-07-09T17:24:04.988-07:00CodeIgniter Tutorial: [Creating Accounting Application] Part 2 The Application Specification and UML Diagrams<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.dijexi.com/wp-content/uploads/2009/08/MainUseCase_thumb.jpg"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 502px; height: 446px;" src="http://www.dijexi.com/wp-content/uploads/2009/08/MainUseCase_thumb.jpg" border="0" alt="" /></a><br /><br />In this part of the tutorial series we will discuss about the application specification. After defining the user requirements we will do the analysis and designing the using UML use cases and class diagram. We are going to use a free UML diagramming tool called StarUML. You can download the program here if you have not installed it in your computer.<br /><br /><span style="font-weight:bold;"><a href="http://www.dijexi.com/2009/08/codeigniter-tutorial-creating-accounting-application-part-2-the-application-specification-and-uml-diagrams/">CodeIgniter Tutorial: [Creating Accounting Application] Part 2 The Application Specification and UML Diagrams</a></span>etkalmhttp://www.blogger.com/profile/00079170688544289459noreply@blogger.com0tag:blogger.com,1999:blog-7001887055693213511.post-82482367402712465952010-07-09T17:17:00.000-07:002010-07-09T17:19:16.597-07:00CodeIgniter Tutorial: [Creating Accounting Application] Part 1 Setting Up the Environment<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.dijexi.com/wp-content/uploads/2009/07/XAMPPSuccessfullyinstalled_thumb.png"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 504px; height: 427px;" src="http://www.dijexi.com/wp-content/uploads/2009/07/XAMPPSuccessfullyinstalled_thumb.png" border="0" alt="" /></a><br />This tutorial series explain how to develop a web based application using CodeIgniter, the PHP application framework. As you might already know, CodeIgniter is a powerful PHP framework with a very small footprint, built for PHP coders who need a simple and elegant toolkit to create full-featured web applications.<br /><br />In this tutorial, we took the case of developing a basic web based accounting application that can input cash book and bank book data transaction and journal entry.<br /><br />The tutorial series will cover:<br /><br /> * Part 1 Setting Up the Environment: XAMPP (apache, mysql, and PHP) and CodeIgniter<br /> * Part 2 The application specification, analysis and design using UML use case and class diagram using free UML diagram tool StarUML.. (download here if you have not install it in your computer) . We also need to install StarUML PHP 5 Code Generator Template to automatically generate the class files from class diagram created<br /> * Part 3 ER Diagram and Creating Database using MySQL workbench, formerly fabForce ERD tools for MySQL<br /> * Part 4, preparing to code in CodeIgniter, exporting class diagram to PHP scripts<br /> * Part 5 Coding, the Mainpage<br /> * Part 6 Coding, the and COA Module explain the application coding using CodeIgniter<br /> * Part 8 Coding, the Cashbook Module explain the application coding using CodeIgniter<br /> * Part 7 Coding, the Bankbook Module explain the application coding using CodeIgniter<br /> * Part 8 Coding, the Journal Module explain the application coding using CodeIgniter<br /> * Part 9 Coding, the Reporting Module explain the application coding using CodeIgniter<br /> * Part 10 Conslusion and Further Development: AJAX, Facebook Application<br /><br /><br /><a href="http://www.dijexi.com/2009/07/codeigniter-tutorial-creating-accounting-application-part-1-setting-up-the-environment/">CodeIgniter Tutorial: [Creating Accounting Application] Part 1 Setting Up the Environment<br /></a>etkalmhttp://www.blogger.com/profile/00079170688544289459noreply@blogger.com0tag:blogger.com,1999:blog-7001887055693213511.post-32810405663249560092010-07-09T17:13:00.000-07:002010-07-09T17:15:30.259-07:0040+ CodeIgniter Framework Tutorials for Kick-Ass PHP Application<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2expertsdesign.com/wp-content/uploads/2009/10/Framework-CodeIgniter/8-image.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 500px; height: 328px;" src="http://2expertsdesign.com/wp-content/uploads/2009/10/Framework-CodeIgniter/8-image.jpg" border="0" alt="" /></a><br /><br />Here is the list of 40+ Excellent And Useful CodeIgniter Application Development Framework Tutorials & Resources that includes some useful tutorials and few great resources that has been developed for programer and designers. We are hoping that you will learn further on CodeIgniter Application Development Framework after reading out this post.<br /><br /><br /><br /><br /><span style="font-weight:bold;"><a href="http://www.2expertsdesign.com/2009/10/15/codeigniter-framework-tutorials-for-php-application">40+ CodeIgniter Framework Tutorials for Kick-Ass PHP Application</a></span>etkalmhttp://www.blogger.com/profile/00079170688544289459noreply@blogger.com0tag:blogger.com,1999:blog-7001887055693213511.post-48400011357713335742010-07-09T13:09:00.000-07:002010-07-09T17:10:55.295-07:00Youtube like Rating with Jquery and Ajax<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBqi5TQO6raSLZektyY41htJiNsMHtEr3pkvGyTMl63s_5GVba-hPYZdLsLIQXylRYwvoZM8f-TTO32x2cR6yIUNpoMoTx5_N3QFMsC7QMW_R8vXcbWIdm95DjY2zJykxbWwfkDtO3puA/s1600/Youtube_rating.png"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 320px; height: 108px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBqi5TQO6raSLZektyY41htJiNsMHtEr3pkvGyTMl63s_5GVba-hPYZdLsLIQXylRYwvoZM8f-TTO32x2cR6yIUNpoMoTx5_N3QFMsC7QMW_R8vXcbWIdm95DjY2zJykxbWwfkDtO3puA/s320/Youtube_rating.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5492001583357371858" /></a><br /><br />Are you looking for Google style CAPTCHA (Human verification code) script for PHP projects, Please take a look at this post. <br />I want to explain how to implement cool-php-captcha script for forms. Use it and add security to your web projects.<br /><br /><br /><span style="font-weight:bold;"><a href="http://www.9lessons.info/2010/07/youtube-like-rating-jquery-and-ajax.html">Youtube like Rating with Jquery and Ajax</a></span>etkalmhttp://www.blogger.com/profile/00079170688544289459noreply@blogger.com0tag:blogger.com,1999:blog-7001887055693213511.post-79885440534697239152010-07-09T12:51:00.000-07:002010-07-09T17:11:44.361-07:00Making a Slick MobileApp Website with jQuery & CSS<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipFtqMVlMkz6siv5VtdHX7DAI-5CdOhBp1yebojjer2Fi5IFMiQTqsuKlMze1RmVRA0zgAJSqKEQoGS-zXI20G5i72gRYt4gVWMpaG3efW70K9lBfnH7HiExvITKHmbixBB0piHllTSxk/s1600/blackberry.png"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 216px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipFtqMVlMkz6siv5VtdHX7DAI-5CdOhBp1yebojjer2Fi5IFMiQTqsuKlMze1RmVRA0zgAJSqKEQoGS-zXI20G5i72gRYt4gVWMpaG3efW70K9lBfnH7HiExvITKHmbixBB0piHllTSxk/s320/blackberry.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5491997099790275346" /></a><br /><br /><br />As a web developer, you have to bring creativity and attention to detail to your work. It is often the little things that leave a lasting impression to a visitor. Be it a lovable character illustration, or unique slideshow, it is usually not the information you present that is memorable, but the way you present it.<br /><br />Today we are making a complete jQuery & CSS website for a fictional mobile application. It is going to feature semantic markup and a progressively enhanced slideshow effect. It will allow the user to see four of the most popular smartphones running the mobile app.<br /><br /><a href="http://tutorialzine.com/2010/07/making-slick-mobileapp-website-jquery-css/">Making a Slick MobileApp Website with jQuery & CSS</a>etkalmhttp://www.blogger.com/profile/00079170688544289459noreply@blogger.com0tag:blogger.com,1999:blog-7001887055693213511.post-38945453757881662722010-07-05T18:22:00.000-07:002010-07-09T17:12:06.810-07:0010 examples of futuristic CSS3 techniques<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgToeKFXDiVj1g7HJ480JBT8yi7YmZM6LXnbC3Qackjoo69LqlR_SJtNk169I4c-cr-H28oBbYDTRiKeugL8V6SHx-LcXLK5SVTu48OKivJvVH6fBXVXadfprE-q3lwpoTkvw1YuvwxovM/s1600/rgba-css3-buttons.png"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 320px; height: 127px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgToeKFXDiVj1g7HJ480JBT8yi7YmZM6LXnbC3Qackjoo69LqlR_SJtNk169I4c-cr-H28oBbYDTRiKeugL8V6SHx-LcXLK5SVTu48OKivJvVH6fBXVXadfprE-q3lwpoTkvw1YuvwxovM/s320/rgba-css3-buttons.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5491995656565509474" /></a><br /><br /><br /><span style="font-weight:bold;">CSS3 has not been here for a long time, but talented designers have already found a lot of great ways to use it to create beautiful and efficient techniques. In this article, I'll show you the top 10 examples of what you can do using the power of CSS3.<br /><br /><a href="http://www.catswhocode.com/blog/10-examples-of-futuristic-css3-techniques">10 examples of futuristic CSS3 techniques</a><br /></span>etkalmhttp://www.blogger.com/profile/00079170688544289459noreply@blogger.com0