Usage Examples | MaxImage 2.0 Caution: This example is meant for expert users. Remember, with FillElement you can often accomplish an offset scheme very easily... just set your containing element where you want the images to be displayed. Because the first rule of Maximage 2.0 is to try to remain hands off and out of your way, the built in support for offsets have been dropped with version 2.0. This doesn't mean they aren't possible. With a little elbow grease they can still be accomplished (and are better). What I am doing with the below code is creating curtains / offsets that live in front of the slideshow. Once we have our curtains up, the slideshow is still resizing to the full window and we want to have it maximize within the viewable area... our window size minus our offsets. View Example
Paging and Custom WordPress Loops Last week I published two articles using custom loops. The first was about how to create a custom loop. The second was how to retrieve posts based on custom fields. I’d like to thank Aaron Harun from Anthology of Ideas for supplying the code used in this post. Paging, and why it doesn’t work with WP_Query The paging magic happens in a file called ‘link-template.php‘ in the ‘wp-includes‘ folder. Most themes have basic paging built in, with the help of two functions: next_posts_link and previous_posts_link. These functions, as well as several others, make use of a global variable called $wp_query. How to make paging work with a custom loop As Aaron mentioned, the paging functions rely on a global variable called $wp_query. In the example below, I’ll show how to display the last five recent articles with our own custom loop with paging intact. <h3>Recent Articles</h3><ul><? Notice in the query above that we have these parameters: $wp_query->query('showposts=5'.' <? The Full Code Conclusion Howdy!
Quick Wordpress Tip: Limiting Post Excerpt Word Count in your Wordpress themes - Cuppa UPDATE: A great alternative to the solution below is using the built in function wp_trim_words(); is was added in WordPress version 3.3.0. Check out the wordpress codex on this. Here is a quick tip that enables you to have more control over your post excerpts word count. Put this code snippet in your functions.php file (If you do not currently have a functions.php file in your theme you will need to create one). This code replaces your <? To choose the amount of words you would like to display all you need to do is change the second parameter of the limit_words function. Making a web page fit an iPhone screen I’ve made three simplified pages that demonstrate the problem and solution. The basic HTML on all three pages is the same, and looks like this: <body><div id="wrapper"><p>Some paragraphs here...</p><p>More text...</p></div></body> The first example is here. width: 600px; And, in common with many recommendations I’ve seen for getting websites to display properly on the iPhone, the page has this meta tag: This causes problems though, as the CSS’s set width seems to take precedence over that meta tag’s “width=device-width” and the page comes out too large. OK, so we need to fix something. If your webpage is narrower than 980 pixels, then you should set the width of the viewport to fit your web content. OK, so let’s try our same example page, with the same CSS, but with the viewport meta tag like this: Here’s the second example, with the new meta tag, and here’s how it looks, again in Safari on the left, and opened from the Home Screen on the right: That surprised me. max-width: 600px; Success!
jQuery Ajax - load() method AJAX stands for Asynchronous JavaScript And XML, it is a technique for creating fast and dynamic web pages. Ajax lets us send requests from the browser to the server, and manage the server response without page reload, so we can update a part of the page while the user remains on the same page. jQuery has multiple methods (functions) for AJAX. In this tutorial it's presented the load() method. The load() method is a simple AJAX function that loads data from the server and place the returned HTML into the matched element on the current web page. Syntax: $('element').load(url, data, complete) - url - specifies the URL to which the request is sent. - data - (optional) a string that is sent to the server with the request. - complete - (optional) a function that is executed when the request completes. For security reasons, the external file with the content you load must be stored on the same domain (server) as the web page from which your script is running. Let's see a simple example. <! <! <!
11 Best jQuery Plugins December 2011 In this post, we have compiled 11 best jquery plugin for december 2011 that are used to let you stand out unique in the latest web trend. Enjoy !. An amazing plugin for jQuery 1.6+ & HTML5 fancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages. With this jQuery plugin, you can extend the animate function to support the CSS box shadow-property. PicStrips adds a little style to your images to help them stand out from the crowd. The jQuery webcam plugin is a transparent layer to communicate with a camera directly in JavaScript. Textualizer is a jQuery plug-in that allows you to transition through blurbs of text. Tubular is a jQuery plugin that lets you set a YouTube video as your page background. The contextMenu Plugin was designed for web applications in need of menus on a possibly large amount of objects. Craftyslide is a tiny (just 2kb) slideshow built on jQuery.
Tiny Circleslider: A lightweight circular carousel for jQuery What is it? Tinycircleslider is a circular slider / carousel. That was built to provide webdevelopers with a cool but subtle alternative to all those standard carousels. Tiny Circleslider can blend in on any wepage. It was built using the javascript jQuery library. Features IOS and Android support. Need support or custom features? Anything is possible! Examples $(document).ready(function(){ $('#circleslider1').tinycircleslider();}); Note: There is no lightbox natively in tiny circleslider for this example fancybox was used. To get a better understanding of how it all comes together I made a (corny) styled example. Constructor Properties Methods Events Usage The image below displays how you calculate the radius of your circleslider.
jqPagination, a jQuery pagination plugin (obviously) Introduction jqPagination is a jQuery plugin that provides a newer method of pagination for your web site or application. Instead of displaying a list of page numbers like traditional pagination methods jqPagination uses an interactive 'Page 1 of 5' input that, when selected, allows the user to enter their desired page number. Download Fork on GitHub Here are a few key points: Design agnostic Customisable Degrades beautifully Super simple to integrate with your app / site Uses jQuery... who doesn't love jQuery?! Demo It's oversized too, so you can try it when you're drunk! Show / hide event log: Installation Installation is super easy, for a basic setup you'll need the following HTML: And now we'll need to initialise the plugin against our HTML: Customisation jqPagination is built to be basic, but it does have a couple options and callbacks for customisation. Options current_page - option, default: 1 Sets the current page, can also be set using the current-page data attribute on the input element.
11 Best jQuery Plugins December 2011 In this post, we have compiled 11 best jquery plugin for december 2011 that are used to let you stand out unique in the latest web trend. Enjoy !. An amazing plugin for jQuery 1.6+ & HTML5 fancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages. It is built at the top of the popular JavaScript framework jQuery and is both easy to implement and a snap to customize. With this jQuery plugin, you can extend the animate function to support the CSS box shadow-property. PicStrips adds a little style to your images to help them stand out from the crowd. The jQuery webcam plugin is a transparent layer to communicate with a camera directly in JavaScript. Textualizer is a jQuery plug-in that allows you to transition through blurbs of text. Tubular is a jQuery plugin that lets you set a YouTube video as your page background. Craftyslide is a tiny (just 2kb) slideshow built on jQuery.
tubular, a YouTube Background Player jQuery Plugin | Sean McCambridge Design Video controls:Play | Pause | Volume Up | Volume Down | Mute Tubular is a jQuery plugin that lets you set a YouTube video as your page background. Just attach it to your page wrapper element, set some options, and you're on your way. $(page content wrapper element).tubular(options); Tubular's hello, world Assuming you're happy with the default options and you use a wrapper div with the id of wrapper, you simply attach to your wrapper div and specify the video you want to load: and Presto! A word of caution Tubular does not design your website for you. Options and defaults ratio: 16/9 // usually either 4/3 or 16/9 -- tweak as needed videoId: 'ZCAnLxRvNNc' // toy robot in space is a good default, no?
Waste Creative untitled