Retina.js | Retina graphics for your website How it works When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place. The script assumes you use Apple's prescribed high-resolution modifier (@2x) to denote high-resolution image variants on your server. For example, if you have an image on your page that looks like this: <img src="/images/my_image.png" /> The script will check your server to see if an alternative image exists at this path: "/images/my_image@2x.png" How to use JavaScript The JavaScript helper script automatically replaces images on your page with high-resolution variants (if they exist). Place the retina.js file on your server Include the script on your page <script type="text/javascript" src="/scripts/retina.js"></script> (put it at the bottom of your template, before your closing </body> tag) That's it! Steps: Download Download zip Download source Contribute
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)
20 Best Responsive Navigation and Menu Patterns - 9KDesigns Not having a responsive menu well coded, will break your website on smaller screens. These are the best solutions to solve this problem. Responsive design it’s not a trend anymore; it’s a necessity. By far, one of the most challenging part of developing responsive websites is to create cool menu designs that work on both small and larger screens. Today, we’re going to show you what’s best in terms of responsive menu design, CSS techniques or jQuery plugins. You may also like – Ultimate Resources to Responsive Design 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. jPanelMenu – a jQuery plugin that creates a paneled-style menu 12. jQuery Navobile – a jQuery plugin that makes mobile navigation easy 13. 14. slimMenu – a lightweight jQuery plugin 15. 16. 17. 18. 19. 20.
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: Smooth Scrolling Internal Anchor Links | Sycha Web Design & Development November 13th, 2010Charlie Evans Here’s a neat little jQuery trick to fancy up your internal anchor links, by making them scroll smoothly to their target as opposed to jumping instantly. Internal anchor links are very common place, e.g. “back to top” links, or FAQ pages which list all the questions at the top. This is what it looks like in action, click the following link:Scroll to comments This technique is very simple. Set up your link as you normally would, e.g. href=”#comments” (where comments is the id of your target) Add a class=”scroll” attribute to the link element, so it now looks something like this: Finally add the following jQuery code wherever is most appropriate And that’s all there is to it A common mistake in implementing this script is using “named anchors” for your target, instead of an id attribute on your target element.
Slide and Push Menus Fixed menus that will slide out from the sides of the page and in case of the right and left side optionally move the body. View demo Download source A set of fixed menus that will slide out from any of the edges of the page. The two menus that slide out from the left and right side can also be used in combination with the body moving to the left or right side, respectively, hence being “pushed”. There are examples of how to trigger the opening and closing of the menus and some example media queries. The HTML The CSS Note: Classie is being used here – class helper functions by @desandro. Box - responsive jQuery modal window plugin Examples Image gallery (possibility of navigation with keyboard arrows) pictures by: Basik, TomoZ, Burla2222 this is my inline content Usage Include VenoBox css and javascript after jQuery library Insert one or more links with its custom class <a class="venobox_custom" data-type="iframe" href=" iFrame</a> For Google Maps use the iFrame href attribute of map's embed code and set data-type="iframe" For videos use the simple url of the video, such as: or For inline contents set a hidden element with custom id, and call it from your link href Initialize plugin Gallery To activate navigation between every type of content assign the same data attribute data-gall to each link, like the example below Options If the content is not an image you have to specify its type via data attribute data-type Available values: iframe inline ajax youtube vimeo Optional: set title attribute to show a description Additional settings
Expandable Search bar with Css I was just thinking that today Lot of Website Contains search bar with expandable effects so I decided to have that tutorial on that effects . So today we will learn how to create an Expandable search bar effects with simple HTML and CSS .The main Advantage of this is that it requires less space on the website and it can expand over other Elements also. creating the page Index.html <body> <div class="container"><!-- Top Navigation --> <header> <h1>Expanding Search Bar <span>A click-to-expand search input</span></h1> <hr color="white"> </header> <p>The search bar can be opened on click And its gets Expanded</p> </div> <div > <div id="sb-search" class="sb-search"><form> <input class="sb-search-input" placeholder="Search Here.." type="text" value="" name="search" id="search"> <input class="sb-search-submit" type="submit" value=""> <span class="sb-icon-search"></span> </form> </div> </div> </div> </div><! Styling The Page component.css styling Searchbar open state
Multi-Level Push Menu An experimental push menu with multi-level functionality that allows endless nesting of navigation elements. View demo Download source Today we want to share another menu experiment with you. For sure you are familiar with the off-canvas navigation on mobile apps and the implementations for responsive websites like the one by David Bushell. Working with nested structures is quite tricky because when we, for example, move the parent then all children will of course move as well. Please note that we are using 3D Transforms which only work in modern browsers. We are using the following nested structure for the menu: …where each level is wrapped into a division with the class mp-level. Where we set the following styles for the elements: This will allow the content to be scrolled when the menu is closed and it will also make the menu being 100% of the window height. This is how the plugin can be called: new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ) );
5 jQuery Touch Swipe Image Gallery Plugins Today we are sharing you what we think the 5 coolest jQuery Touch Swipe Image Gallery Plugins you can use to showcase your products or portfolio where the user could swipe up/down and left/right to change the image. Worth checking out ;) Related Posts: 1. A Javascript library for multi-touch gestures. Source Demo 2. TouchSwipe is a jquery plugin to be used with jQuery on touch input devices such as iPad, iPhone etc.. 3. Allows you to obtain the wipe event on an iPhone, iPad or iPod Touch which can be used for example to scroll through an image gallery (see demo below). Source 4. Another cool responsive slider with swipe support. Source + Demo 5. Free and ultra lightweight mobile touch slider with hardware accelerated transitions (where supported) and amazing native behavior. AUTHOR: Sam Deering .