Blogfreakz - Web Design and Web Development resources » Ajax http://blogfreakz.com A site dedicated to keeping up with the latest trends on Web Design Thu, 17 May 2012 00:27:50 +0000 en hourly 1 http://wordpress.org/?v=3.1.4 How To Add A “Load More Posts” Button In WordPress http://blogfreakz.com/wordpress-tutorial/how-to-add-a-load-more-posts-button-in-wordpress/ http://blogfreakz.com/wordpress-tutorial/how-to-add-a-load-more-posts-button-in-wordpress/#comments Tue, 10 Apr 2012 10:17:01 +0000 Keith@Blogfreakz http://blogfreakz.com/?p=26779 Today’s featured WordPress tutorial comes from Michael Martin and it’s about replacing the “Older Posts” link on your blog with a button that extends the length of the current web page instead of reloading it; it is similar to how you view older tweets on Twitter.

Load More Posts How To Add A Load More Posts Button In WordPressA partial screenshot of the button

You can check it out on the demo here.

In Michael’s tutorial, you’ll be using AJAX to create the plugin which will have the following features:

  • Multiple clicks – First clicks will load page 2?s posts, second will load page 3 etc.)
  • Check for posts first – If there are no more posts that can be loaded, we’ll tell the user.
  • Degrade gracefully – If a visitor doesn’t use JavaScript, we won’t change the site at all.

Below is a snippet taken from the javascript that makes the AJAX call:

$('.pbd-alp-placeholder-'+ pageNum).load(nextLink + ' .post',
function() {
//   Update page number and nextLink.
pageNum++;
nextLink   = nextLink.replace(/\/page\/[0-9]?/, '/page/'+ pageNum);
//   Add a new placeholder, for when user clicks again.
$('#pbd-alp-load-posts')
.before('<div  ></div>')
//   Update the button message.
if(pageNum   <= max) {
$('#pbd-alp-load-posts   a').text('Load More Posts');
}   else {
$('#pbd-alp-load-posts   a').text('No more posts to load.');
}
}
);

On that note, if you want to see the rest of the code, you can download the completed files as a plugin. All you have to do is upload them in to your WordPress directory and activate it. But if you want to know more about the plugin’s nuts and bolts, you can check out Michael’s tutorial by clicking here.

Incoming search terms for the article:

]]> http://blogfreakz.com/wordpress-tutorial/how-to-add-a-load-more-posts-button-in-wordpress/feed/ 0 Create a Slideshow With HTML5 http://blogfreakz.com/tutorial/create-a-slideshow-with-html5/ http://blogfreakz.com/tutorial/create-a-slideshow-with-html5/#comments Mon, 02 Apr 2012 10:54:59 +0000 Keith@Blogfreakz http://blogfreakz.com/?p=26627 Finally, there’s no need for you to upload a PowerPoint (.pps) file and embed a code on your webpage just to be able to display a slideshow presentation. Here’s a great script I found over at AjaxShake that’ll teach you how to create an amazing slideshow in an HTML5 environment!

HTML5 slideshow Create a Slideshow With HTML5

The code is created by Luke Mahe and Marcin Wichary. Using it is pretty easy and simple; just copy/paste the code in a new file and save it in your hard drive. Once you’re ready to use it, you can just edit the content to your liking. Two templates are also available.

Click on the respective links for more info about the code and its demo.

Incoming search terms for the article:

]]> http://blogfreakz.com/tutorial/create-a-slideshow-with-html5/feed/ 1 Use Ajax to Save Changes in Contenteditable as JSON http://blogfreakz.com/tutorial/use-ajax-to-save-changes-in-contenteditable-as-json/ http://blogfreakz.com/tutorial/use-ajax-to-save-changes-in-contenteditable-as-json/#comments Fri, 30 Mar 2012 08:58:28 +0000 Keith@Blogfreakz http://blogfreakz.com/?p=26581 Contents of any HTML5 element with a contenteditable attribute can be live-edited inside the browser window. But any changes that you apply won’t be saved on the actual document itself that is located in the server, so these changes won’t appear anymore once you refresh the page.

To get around this and have the data saved is to wait for the Return key to be pressed, which then sends the new inner HTML of the element as an AJAX call and blurs the element. you can then press Esc to return the element to its pre-edited state.

You can see more of this in Remy Sharp’s demo .

JavaScript

document.addEventListener('keydown', function (event) {
var esc = event.which == 27,
nl = event.which == 13,
el = event.target,
input = el.nodeName != 'INPUT'   && el.nodeName != 'TEXTAREA',
data = {};
if (input) {
if (esc) {
// restore state
document.execCommand('undo');
el.blur();
} else if (nl) {
// save
data[el.getAttribute('data-name')] = el.innerHTML;
// we could send an ajax request to   update the field
/*
$.ajax({
url:   window.location.toString(),
data: data,
type: 'post'
});
*/
log(JSON.stringify(data));
el.blur();
event.preventDefault();
}
}
}, true);
function log(s) {
document.getElementById('debug').innerHTML = 'value changed to: ' + s;
}

 

 

Incoming search terms for the article:

]]> http://blogfreakz.com/tutorial/use-ajax-to-save-changes-in-contenteditable-as-json/feed/ 0 Create AJAX Loading Animation with CSS3 http://blogfreakz.com/tutorial/create-ajax-loading-animation-with-css3/ http://blogfreakz.com/tutorial/create-ajax-loading-animation-with-css3/#comments Fri, 24 Feb 2012 06:00:47 +0000 Keith@Blogfreakz http://blogfreakz.com/?p=25500

Now we don’t have to rely on animated gifs in creating AJAX loading animation effects. This CSS3 tutorial will teach us how to create three different types of loading animation.

Animation Create AJAX Loading Animation with CSS3

Let’s start off with our HTML markup.

HTML Markup

<div id='loading'>
<div id='Column1'   class='Columns'></div>
<div id='Column2'   class='Columns'></div>
<div id='Column3'   class='Columns'></div>
<div id='Column4'   class='Columns'></div>
<div id='Column5'   class='Columns'></div>
<div id='Column6'   class='Columns'></div>
</div>

 

Each <div class=’Columns’> basically represents each of the bars in our animated loader. Now on to CSS!

CSS Markup for the first loading animation

#loading{
margin-top:30px;
float:left;
width:95px;
height:32px;
background-color:#779ec2;
margin-left:30px;
/* CSS3   Border  Radius for rounded corner */
-webkit-border-radius:   5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.Columns{
background-color:#fff;
border:1px solid   #fff;
float:left;
height:30px;
margin-left:5px;
width:10px;
/* Here we will   define an animation name and then we will animate it later */
-webkit-animation-name:   animation;
/* total time   for animation to complete one cycle */
-webkit-animation-duration: 3s;
/* Number of   loops for animation cycle we set it infinite */
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: linear;
/* Initially the   opacity of Columns is zero */
opacity:0;
/* Scale it to   0.8 in starting */
-webkit-transform:scale(0.8);
}
#Column1{
/* Column1   animation delay by .3 seconds */
-webkit-animation-delay: .3s;
}
#Column2{
/* Column2   animation delay by .4 seconds */
-webkit-animation-delay: .4s;
}
#Column3{
/* Column3   animation delay by .5 seconds */
-webkit-animation-delay: .5s;
}
#Column4{
/* Column4   animation delay by .6 seconds */
-webkit-animation-delay: .6s;
}
#Column5{
/* Column5   animation delay by .7 seconds */
-webkit-animation-delay: .7s;
}
#Column6{
/* Column6   animation delay by .8 seconds */
-webkit-animation-delay: .8s;
}
/* Earlier we have defined animation-name as animation now the   animation properties will set here */
@-webkit-keyframes animation{
/* opacity of Column   will be 0 at beginning of animation */
0%{opacity:0;}
/* opacity of Column   will be 1 at middle of animation */
50%{opacity:1;}
/* Back to   opacity zero when animation completes its cycle */
100%{opacity:0;}
}

 

Second loading animation CSS Markup

#loading1{
margin-top:30px;
float:left;
margin-left:30px;
}
.Columns1{
background-color:#39F;
border:1px solid   #00F;
float:left;
height:30px;
margin-left:5px;
width:8px;
-webkit-animation-name:   animation1;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: linear;
opacity:0.2;
-webkit-transform:scale(0.6);
}
#Column11{
-webkit-animation-delay: .3s;
}
#Column22{
-webkit-animation-delay: .4s;
}
#Column33{
-webkit-animation-delay: .5s;
}
#Column44{
-webkit-animation-delay: .6s;
}
#Column55{
-webkit-animation-delay: .7s;
}
#Column66{
-webkit-animation-delay: .8s;
}
@-webkit-keyframes animation1{
0%{-webkit-transform:   scale(.9);opacity:1;}
100%{-webkit-transform:   scale(.2);opacity:0.1;}
}

 

Third loading animation CSS Markup

#loading2{
margin-top:30px;
float:left;
margin-left:30px;
}
.Columns2{
-webkit-border-radius:   10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color:#39F;
float:left;
height:20px;
margin-left:5px;
width:20px;
-webkit-animation-name:   animation2;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: linear;
opacity:0;
}
#Column111{
-webkit-animation-delay: .1s;
}
#Column222{
-webkit-animation-delay: .3s;
}
#Column333{
-webkit-animation-delay: .5s;
}
#Column444{
-webkit-animation-delay: .7s;
}
@-webkit-keyframes animation2{
0%{opacity:0;}
50%{opacity:1;}
100%{opacity:0;}
}

 

Pretty short, quick, and easy, isn’t it? Have fun using it in your website!

 

Incoming search terms for the article:

]]> http://blogfreakz.com/tutorial/create-ajax-loading-animation-with-css3/feed/ 0 Rcarousel: A Continuous jQuery UI Carousel http://blogfreakz.com/web-design/rcarousel-a-continuous-jquery-ui-carousel/ http://blogfreakz.com/web-design/rcarousel-a-continuous-jquery-ui-carousel/#comments Mon, 09 Jan 2012 08:50:41 +0000 Keith@Blogfreakz http://blogfreakz.com/?p=24115 55m35 Rcarousel: A Continuous jQuery UI Carousel

Before you toss this off as just another slider review, check out this innovative content slider and carousel made with jQuery, called the rcarousel.

Created by front-end developer Wojciech rrh Ryrych, this continuous carousel is basically a jQuery UI widget which latest version (v1.1) was just released recently. Its inherent capabilities from its predecessor include custom events and a simple API.

Rcarousel supports HTML content: just place anything inside a DIV container, install the widget, and that’s it. It is highly customizable and allows the user to navigate through the content with bullets or set the scrolling to auto mode without navigation.

What sets this carousel from the others is that it has the multi carousel feature!

Check out the demo. Cool, isn’t it?

You can customize the rcarousel’s appearance by indicating the number of visible elements and a step (number of elements to scroll by). Another nice feature is loading elements on demand at runtime via API. With little effort you can fetch XML, JSON, parse them and then add elements with ‘append’ method.

Its other features are:
• Many options to choose from
• Simple to use
• Supports IMG images with links
• Auto mode
• Custom pagination

Rcarousel supports many browsers and has been tested successfully in the following:
• Internet Explorer 7+
• Firefox 3.0+
• Chrome
• Opera 10.10+
• Safari 4.0.5+

Click on the following links to download the rcarousel or its source code, and if needed, to report bugs.

If you enjoyed this carousel, you may also want to consider using Ryrych’s jQuery UI mediabox, called
rlightbox2 .

Incoming search terms for the article:

]]> http://blogfreakz.com/web-design/rcarousel-a-continuous-jquery-ui-carousel/feed/ 1 2012 Web Development and Tech Forecasts http://blogfreakz.com/web-design/2012-web-development-and-tech-forecasts/ http://blogfreakz.com/web-design/2012-web-development-and-tech-forecasts/#comments Sat, 31 Dec 2011 12:00:24 +0000 Carmela@Blogfreakz http://blogfreakz.com/?p=24002 AS we usher in 2012, the web development community has been coming up with several forecasts for the industry. Although most of this surrounds an influx of greater improvements in the technological frontier, it may also spell doom for some brands. The question is, how will these changes affect the entire tech landscape for users, developers, designers, and marketers?

Let’s check out some of the latest online buzz:

  • IT enterprise vendors seek to reduce failures from the past year and use them as leverage for future improvements.

  • Mobile competition becomes steeper with rapid developments in functionality, though this may result in some popular mobile brands falling behind the race.

  • Dominant frameworks such as jQuery, Node.js, Socket.io, Fitvids, JavascriptMVC and SproutCore, as well as HTML5 will take the lead in the web development industry. Same goes for software as independent support for hardware.

  • Some tech editors predict exciting, if sometimes drastic changes in the industry, from the rise of OpenFlow to patent wars, to the resurrection of the music distribution business, all founded on a common theme: consumerization.

    • Awesome, isn’t it? And if you’re still hankering for more juicy info on what’s in store for us this year, check out this list of web design trends and 15 hot technologies, which are probably more than enough to last us the next 6 months.

    And with that, we at Blogfreakz.Com wish you all a wonderful 2012!

    Incoming search terms for the article:

    ]]>     http://blogfreakz.com/web-design/2012-web-development-and-tech-forecasts/feed/ 0     7 jQuery Plugins To Jazz Up Your Website http://blogfreakz.com/jquery/7-jquery-plugins-to-jazz-up-your-website/ http://blogfreakz.com/jquery/7-jquery-plugins-to-jazz-up-your-website/#comments Wed, 28 Dec 2011 10:47:33 +0000 Keith@Blogfreakz http://blogfreakz.com/?p=23950 jquerylogo256 200x200 7 jQuery Plugins To Jazz Up Your Website
    blueberry fruits 545711 200x200 7 jQuery Plugins To Jazz Up Your Website
    211 200x200 7 jQuery Plugins To Jazz Up Your Website
    The following jQuery plugins are great for for event management, animation and Ajax interactions, and will certainly turn your website into eye-candy for your visitors!

    1. Ninja UI – This plugin is one big pack of web interface:  it has buttons, icons, tooltips, sliders, and more!  Its design gets plenty of rave reviews for being beautiful, efficient and unobtrusive.

      2.  

    2. Mobiscroll – This one is optimized for touchscreen devices. Although it’s mainly used for scheduling tasks, dates, and appointments, it can also be used for other values such as images. It also works well as a dropdown list alternative. Check out its demo.

      3.  

    3. Elycharts – A pure Javascript charting library, this one is easy to use and completely customizable. With this you can create interactive charts with key features such as legend and label support, mouse tracking, tooltips, and animation. It doesn’t require any client side plugins like Flash or Java, and runs on the client browsers so installation isn’t necessary. View the demo here.

      4.  

    4. Timelinr – Thanks to its customizable layouts, speed, and transparency, you can say goodbye to boring old timelines. Check out its demo.

      5.  

    5. jQuery.fracs – This impressive plugin helps determine the visible fractions of an element that is currently in the viewport. It allows users to easily skip through different sections of a website, making it ideal for one-page websites. Get a load of the demo.

      6.  

    6. PikaChoose – This extremely lightweight jQuery slideshow plugin integrates smoothly with jCarousel and has API hooks for lightbox and Fancybox integration too.

      7.  

    7. Blueberry –  This image slider plugin was written specifically to work with responsive web layouts. Enjoy its responsiveness here.

    Incoming search terms for the article:

    ]]>     http://blogfreakz.com/jquery/7-jquery-plugins-to-jazz-up-your-website/feed/ 0     Upload Your Files with These 10 Powerful jQuery Uploader Plugins http://blogfreakz.com/jquery/upload-your-files-with-these-10-powerful-jquery-uploader-plugins/ http://blogfreakz.com/jquery/upload-your-files-with-these-10-powerful-jquery-uploader-plugins/#comments Wed, 21 Dec 2011 02:21:23 +0000 Marvin@Blogfreakz http://blogfreakz.com/?p=23609 Today’s web developers are unstoppable about creating newer and better plugins for your web site, so I’ve gathered 10 of the most powerful jQuery File Uploaders for your web site or blog. One of the plugins featured here is the jQuery upload which lets you upload your files by Ajax style.

    Ajax Upload by Valums

    Ajax Upload provides good user experiences everywhere. It uses XHR for multiple uploads of files with progress bar in FF3.6+, Safari4+, Chrome and goes back to the hidden iframe based-upload in other browsers.

    Plupload v1.5.1.1

    This file uploader lets you upload your files using Silverlight, Flash, HTML5 Gears and BrowserPlus. It also allows resizing of image and shows you its upload progress.

    Uploadify

    This plugin combines Javascript and other known server-side languages. It has multiple file upload abilities and a large support community with the docs.

    Ajax Multiple File Upload Form using jQuery

    This plugin permits the user to upload multiple files easily.

    Multiple File Upload Plugin

    This is an unobtrusive plugin which helps the user to select multiple files with ease, provides basic validation functionality, and helps identify errors without before you upload our files.

    Uploadprogress v0.3 – jQuery + PHP plug-in

    It allows users to select files individually and provides information about the uploading progress.

    jQuery Form Plugin

    A basic file uploader form that allows you to test your files.

    Fancy Upload – Swiff meets Ajax v3.0

    This plugin is easy to set up, server-independent, uses MooTools to work on all modern browsers and styleable through XHTML and CSS. It features a multiple file selection menu and queued upload with animated progress bar.

    SWFUpload jQuery Plugin

    The SWFUploader, which was rewritten by Adam Royle, uses jQuery to make a real event dispatcher. It makes multiple SWFupload instances on single page easier to manage, completely separates SWFUpload object from UI codes, and has the ability to assign multiple callbacks per event.

    IqUploader

    This plugin sends the file you choose the email address you input.

    Incoming search terms for the article:

    ]]>     http://blogfreakz.com/jquery/upload-your-files-with-these-10-powerful-jquery-uploader-plugins/feed/ 0     Ajax AutoComplete For jQuery http://blogfreakz.com/jquery/ajax-autocomplete-for-jquery/ http://blogfreakz.com/jquery/ajax-autocomplete-for-jquery/#comments Thu, 12 May 2011 12:36:54 +0000 Mufti Ali http://blogfreakz.com/?p=19809 2pfFAe Ajax AutoComplete For jQueryAjax Autocomplete for jQuery is plugin for allows you to easily create autocomplete/autosuggest boxes for text input fields.It is built with focus on performance. Results for every query are cached and pulled from local cache for the same repeating query. If there are no results for particular query it stops sending requests to the server for other queries with the same root.

    jquery autocomplete Ajax AutoComplete For jQuery

    Web page that provides data for Ajax Autocomplete, for example autocomplete.ashx will receive GET request with querystring ?query=Li, and it must return JSON data.

    Requirements: jQuery Framework
    Demo: http://www.devbridge.com/projects/autocomplete/jquery/
    License: MIT License

    Incoming search terms for the article:

    ]]>     http://blogfreakz.com/jquery/ajax-autocomplete-for-jquery/feed/ 0     One Line Ajax Requests With jQuery-ahm http://blogfreakz.com/jquery/one-line-ajax-requests-with-jquery-ahm/ http://blogfreakz.com/jquery/one-line-ajax-requests-with-jquery-ahm/#comments Wed, 06 Apr 2011 13:19:37 +0000 Mufti Ali http://blogfreakz.com/?p=18418 jquery-ahm is a light-weight jquery plugin that reduces ajax requests to one-line. jquery-ahm is a replacement for $.ajax. With $.ajax, every ajax request needs a callback, resulting in a lot of javascript. $.ahm reduces javascript code by letting the response data define the actual callbacks.


    jquery ahm One Line Ajax Requests With jQuery ahm

    Features

    • Super light-weight: ~1KB minified
    • Reduces ajax requests to one-line (including ajax form validation)
    • No more custom callbacks for every ajax request
    • Lets back-end define post ajax callbacks (applied automagically)
    • Supports all jquery + custom callbacks in back-end code
    • Drop in replacement for $.ajax() (supports all $.ajax options)

    Requirements: jQuery Framework
    Demo: http://www.jqueryahm.com/examples
    License: MIT License

    Incoming search terms for the article:

    ]]>     http://blogfreakz.com/jquery/one-line-ajax-requests-with-jquery-ahm/feed/ 0