background preloader

A free jQuery slideshow by Pixedelic

A free jQuery slideshow by Pixedelic
A simple slide This is the "simple anathomy" of a slide: Captions You can add a caption to the slide, just put a div with class "camera_caption" into the div above: <div data-src="images/image_1.jpg"><div class="camera_caption">The text of your caption</div></div> By adding one more class to the "camera_caption" div you can decide the effect of the caption. HTML elements You can also put some HTML elements into your slides. <div data-src="images/image_1.jpg"><div class="fadeIn camera_effected">The text of your html element</div></div> An HTML element can have a class "fadeIn": in this case it will be displayed with a fading effect. Videos To include a video into your slideshow you must put an iframe into one of your slides: As you can see I set the width and the height of the iframe to 100%, so it changes its size according with the size of the slideshows (I mean the iframe, the video in the iframe will mantain its ratio). The "data-" attributes or a particular alignment for one slide only:

jQuery Mobile Tutorial: Creating a Restaurant Picker Web App Mar 08 2012 With an increase in the number, diversity and complexity of smartphones, more and more companies want to have their own mobile app, but creating a native app can be pretty expensive. It requires special skills, as well as special coding tools, and then there is also the need to build an app per platform (Android, iOs, BlackBerry, Windows Phone, etc). All of this figures in to a higher price tag for the app development. The jQuery framework has been around the web for a while now, but the jQuery base technology was basically designed for browser apps. jQuery Mobile is a framework based on jQuery that enables web designers to create web-apps that are optimized for use on a mobile device (Smartphone and tablets). In this jQuery Mobile tutorial, we will create a nice demo app from scratch, to show some of the things that can be easily done using this powerful tool. The Concept of the Mini App: Restaurant Picker Wireframing Our Application. Home Screen : Choose a Plate Choose a Town

Aptana Vinaora Nivo Slider « Vinaora - Free Templates, Extensions and Tutorials Vinaora Nivo Slider is a great slideshow module for Joomla. It allows you to easily create an image slider (slideshow) using Nivo Slider. This javascript slider created by dev7studios and was the world’s most awesome jQuery slider. You can choose slick themes to show your gallery. Screenshots Features Joomla 3.x, Joomla 2.5, Joomla 1.5 compatibility3 demos included3 Slick Themes16 unique transition effectsSimple clean & valid markupLoads of settings to tweakBuilt in directional and control navigationSupports linking imagesKeyboard NavigationFree to use How to run demo Open menu “Module Manager“, double click “Vinaora Nivo Slider” module, and then go to “Basic Options“. FAQs Does the Vinaora Nivo Slider support transparent PNG’s? Download Vinaora Nivo Slideshow Vinaora Nivo Slider 3.3.0 (for Joomla 3.3, Joomla 3.x) (Released: 2014-10-02)Vinaora Nivo Slider 2.5.30 (for Joomla 2.5 – 1.7 – 1.6) (Released: 2013-08-03)Vinaora Nivo Slider 1.5.0 (for Joomla 1.5) (Released: 2012-03-05)

Using Backbone.js with jQuery Mobile Backbone.js is an architectural framework that helps you write well-structured Web applications. It is not, however, a user interface framework and it therefore doesn’t help you with the way your application looks. Backbone’s confined scope is a good thing: it’s lightweight, non-intrusive, not coupled to things you don’t need, and it lets you use the UI toolkit of your choice or simply roll your own styles and widgets. Quest for a Mobile UI Toolkit After that post, I wanted to create a mobile version of the same application; a version that I could package with PhoneGap and that would look and behave like a native app. Another Way to Use jQuery Mobile jQuery Mobile (jQM) is one option that I’ve explored before (here and here), but it fits more in the category of full-stack frameworks that tie together architectural structure and UI controls and behaviors. Sample Application NOTE: Another approach would be to use jQM’s “routing” instead of Backbone’s. Here is the app: How it works Source Code

PHP Development Chapters PHP Support Aptana Studio 3 is shipped with a built-in support for PHP editing. Creating a PHP Project Although it is possible to edit single PHP files, the full strength of the IDE will be available when the PHP files are in the Studio's workspace as PHP projects. There are two ways to create a project: Creating a project using the new-project wizard The PHP project wizard can be accessed through multiple locations in the workspace. Creating a project using the import wizard A project can be imported to the workspace using the 'Import Wizard' through File->Import and then selecting General->Existing Project Into Workspace. Once a project is imported, you may need to add the 'PHP Nature' order to enable some PHP-specific features. Editing Paste in your files, import them or create new ones using the new file wizard. The PHP editor provides these features: Syntax Coloring according to the selected theme in the preferences. Syntax Coloring Code Assist Auto Indentation & Code Formatting

Sauvegarder, restaurer, déplacer un site Joomla! 3 Akeeba Backup CINNK Au cours de ce chapitre, nous allons voir comment faire une sauvegarde d'un site Joomla 3, comment transférer cette sauvegarde en local (sur votre ordinateur), et comment la réinstaller sur un serveur local afin de la tester. Il existe plusieurs façons de sauvegarder un site Joomla!, nous allons en voir deux, la sauvegarde “manuelle”, et la sauvegarde à l'aide du composant Akeeba Backup qui permet de sauvegarder un site en quelques clics. Pour rappel, les données d'un site Joomla! sont stockées à deux endroits différents : Sur un serveur auquel vous pouvez accéder par FTPSur une base de données Pour que la sauvegarde soit complète, et pour que le site fonctionne, il faut évidemment sauvegarder ces deux parties. Pré-requis : Afin de pouvoir tester vos sauvegardes en local, vous devez avoir préalablement installé un serveur local sur votre ordinateur. Sauvegarde manuelle Sauvegarder un site manuellement n'a rien de compliqué si vous avez en votre possession : Transfert des fichiers dossiers 1.

jQuery Mobile – Entwicklung einer kleinen Website / App (Tutorial) » Seite, jQuery, Mobile, Website, Kontakt, Attribut » iPhone Entwicklung und Programmierung Ich hatte ja bereits vor einiger Zeit über das Framework “jQuery Mobile” berichtet. Die Handhabung ist nicht besonders schwer und jeder, der etwas Ahnung von HTML hat, kann in relativ kurzer Zeit seine eigene, mobile Website erstellen. Die Funktionsweise von jQuery möchte ich an dieser Stelle in einem kurzen Tutorial vorstellen. Wer möchte, scheint sich vorab die fertige Beispiel Version an. Bücher zu jQuery Mobile Wer sich nach dem Tutorial etwas genauer mit der Materie befassen möchte und gerne etwas festes in der Hand hat, der hat momentan schlechte Karten. Erste Schritte – jQuery Implementierung Zunächst können die benötigten Dateien (jQuery und jQuery Mobile + CSS) heruntergeladen werden, sofern man diese selber hosten möchte. Wer die Dateien selber hosten möchte, muss hier entsprechend die Links ändern. Rufen wir jetzt die bestehende Seite auf, gibt es leider noch allzu viel zu sehen – bis auf eine leere weiße Seite. Grunstruktur der Mobile Website Ergebnis: ) angezeigt werden.

Responsive Web Design foreword by Jeremy Keith From mobile browsers to netbooks and tablets, users are visiting your sites from an increasing array of devices and browsers. Are your designs ready? Learn how to think beyond the desktop and craft beautiful designs that anticipate and respond to your users’ needs. Ethan Marcotte will explore CSS techniques and design principles, including fluid grids, flexible images, and media queries, demonstrating how you can deliver a quality experience to your users no matter how large (or small) their display. Contents Our Responsive WebThe Flexible GridFlexible Images (Read this chapter online)Media QueriesBecoming Responsive Techniques in responsive web design We’ve talked a lot about responsive design here on Webdesigner Depot, and shared a lot of valuable resources. Today we’re sharing another valuable resource: at the end of this article are details for getting a discount on Chris Converse’s responsive design course on MightyDeals. CSS3 media queries allow us to dynamically alter the design and layout of a web page in order to deliver an optimal user experience from a single set of HTML and CSS markup. The techniques in this article explain how we can leverage this powerful capability of CSS to also change imagery, alter the navigation on hand-held devices, and set up default CSS for compatibility older browsers. Creating different images When altering your design for different devices, consider creating multiple versions of your graphics. The example below shows the different sizing, and cropping choices, in addition to the varying amounts of compression that are applied to each set of images. Assign images to HTML elements .

10 handy jQuery mobile tips and snippets to get you started As with any new technology, getting started is often the hardest part. With this frustration in mind, we have put together some of my handiest tips, tricks and code snippets related to the jQuery Mobile library. Because this is not a full-on primer for using the library, we will skip over some of the things that become rather obvious as you get started and instead get straight to the items that become rather frustrating or troublesome. Also be sure to let us know in the comments which snippets you found useful and of any others that you know of that can be useful. 1. I find myself needing the full mark-up for a basic page over and over again. <! 2. When I got started using this awesome extension to jQuery, I immediately found myself wanting to modify things on the page before the mobile plug-in was triggered. As it turns out, the recommended solution is to simply put traditional jQuery calls before the reference that loads the mobile plug-in. 3. 4. For list items: For footer content: 5. 6. 7.