concrete5: Mastering Auto-Nav for Advanced Navigation Exclusive offer: get 50% off this eBook here concrete5 Beginner's Guide — Save 50% Create and customize your own website with the Concrete5 Beginner's Guide by Remo Laubacher | April 2011 | Beginner's Guides Open Source Web Development Creating a navigation isn't complicated but there are a few things you have to know if you want to customize the navigation. We're going to start with information about the use of the block. (For more resources on concrete5, see here.) Before we start customizing the autonav block, we're going to have a quick look at the different options and the output. Preparation You may have the autonav block included in your theme, more precisely in header.php of your theme. Open header.php from your theme; it's located in the themes/c5book/elements directory (Code Download-ch:7).Since the following code snippet doesn't show the complete file, make sure you replace the correct lines. What just happened? We had to undo a modification done before this article. Page order <?
Home | BookedUp concrete5 SooperFish drop down navigation « CodeBlog.ch Creating a drop down navigation is an old technique by now but it’s still used in a lot of cases to hide parts of a navigation. In addition to the plain CSS menu I wrote more than 2 years ago, I decided to write a new tutorial which uses JavaScript as well. You might ask why: Avoiding JavaScript is nice but creating something as complex as a drop down navigation without any JavaScript leads to a few ugly work arounds. You’ll also have some difficulties to add a fade out and fade in effect unless you’re using CSS3 which isn’t well supported yet. But at the end it’s up to you, both solutions can work just fine! Using SooperFish is also a bit easier for us, you’ll see at the end of the tutorial how little code you needed. Prerequisite to create your drop down menu It’s rather simple, the only thing you need is the jQuery drop down plugin called SooperFish. Once you’ve got the ZIP file, extract all the files into a folder of your choice, we’ll later use some (not all) files from it.
jQuery Table Manipulation: Part 1 | Packt Publishing Technical & IT Book Store Exclusive offer: get 50% off this eBook here jQuery 1.4 Reference Guide — Save 50% This book and eBook is a comprehensive exploration of the popular JavaScript library by Jonathan Chaffer Karl Swedberg | August 2007 | AJAX Open Source Web Development In this article by Karl Swedberg and Jonathan Chaffer, we will use an online bookstore as our model website, but the techniques we cook up can be applied to a wide variety of other sites as well, from weblogs to portfolios, from market-facing business sites to corporate intranets. In this article, we will use jQuery to apply techniques for increasing the readability, usability, and visual appeal of tables, though we are not dealing with tables used for layout and design. But this is not the place for an extended discussion on the proper role of tables. Some of the techniques we apply to tables in this article can be found in plug‑ins such as Christian Bach's Table Sorter. One of the most common tasks performed with tabular data is sorting.
Make a concrete5 theme Concrete5 is a new-generation CMS, with which non-engineers can develop a website. This CMS system is ease to use. You can use the application to change your pages from the front-end of your site. It's a system with a low learning curve. In this tutorial you would learn to make your own theme for Concrete5. First of all we would explain the construction of a standard Concrete5 theme. csselementsimgjs Create a 'description.txt' file in the root of your theme. First line with a titleSecond line with a short description Now you can add a 'thumbnail.png' file in the root of your theme. width: 120pxheight: 90px Create a 'typography.css' file in the root of your theme. Now your ready to develop the theme. <? After we've developed our 'header.php' we could create the 'default.php' file in the root of your theme. <? After we've developed our 'default.php' file we could create a 'footer.php' file in the before created 'elements' folder. <? <? The 'view.php' is used by Concrete5 to show 'single pages'.
Drag Drop Shopping Cart Using JQuery There are a lot tutorial about creating drag and drop shopping cart, in this post I want to share my version still with JQuery, but the different is this example only shows the code on the client side, which mean all of data are hardcoded on the html, and counting price and total items will be handle by javascript. The drag and drop feature used from JQuery UI, this will be used on the item list and on the cart item list to see all the items on the cart by dragging the cart horizontally. View Demo | Download Source The Html Like I said there is no server side scripting, so this code just a hardcoded item list, this example use 10 items, but the code below shows only two to make it simple. </b>*} < label class = "title" >T-Shirt 1</ label > < label class = "price" >$ 20</ label > < label class = "title" >T-Shirt 2</ label > < label class = "price" >$ 24</ label > < span >Shopping Cart</ span > < a href = "" id = "btn_next" >></ a > < a href = "" id = "btn_clear" >Clear Cart</ a > The JQuery The CSS
a collection of menus, galleries and web resources Blue print mega menu A responsive mega menu, more great work from Tympanus Blueprints. jQuery 1.9.1 Click action mega menu Great for those touch devices, nice job from Script Tutorials. Red Team CSS menu Slick animation on hover. Sky Blue menu One of the nicest dropdown menus we've seen. DD levels menu This is one of the smartest menus that we've come across. Fancy dropdown menu We almost used this menu for our newly designed Piccante Web Design site, but it tripped up in an old version of Internet Explorer. Soh Tanaka Another nice product from Soh Tanaka. Smooth dropdown horizontal menu Based on the DD levels menu, this has the same features, but it is just... smoother. Smooth dropdown vertical menu Based on the DD levels menu, this has the same features as its horizontal counterpart, but it is ,well, vertical.. Superfish dropdown menu A jquery version of the (fairly) famous Suckerfish menu. 'Droppy' dropdown menu Multi-level smooth dropdown menu. Sooperfish dropdown menu Grid menus Mega menu Tree menus
Easy Ajax with jQuery This article was written in 2011 and remains one of our most popular posts. If you’re keen to learn more about jQuery, you may find this recent article on jQuery 1.9 of great interest. Ajax is changing web applications, giving them a responsiveness that’s unheard of beyond the desktop. But behind all the hype, there’s not much to Ajax — HTML, JavaScript, and XML are nothing new, and in this tutorial, I’ll show you how to simplify the process of adding Ajax to your application even further with the help of jQuery. What’s Ajax? You’ve probably heard about Ajax before, or at least used an Ajax-based application — Gmail, for instance. Unfortunately, in-depth tutorials on practical ways to enter the world of Ajax are few and far between. What’s jQuery? jQuery is another mature JavaScript library that offers some features that the others do not. Assumed Knowledge To complete this tutorial, you’ll need some basic JavaScript knowledge. jQuery 101 $("div.foo").append("Hello World!"). Easy!
jQuery: The Write Less, Do More, JavaScript Library Fancy lightbox alternative| How to use 1. First, make sure you are using valid DOCTYPE This is required for FancyBox to look and function correctly. 2. Include necessary JS files Loading jQuery from CDN (Content Delivery Network) is recommended Optional - Add transitions as jQuery by default supports only "swing" and "linear" Optional - Enable "mouse-wheel" to navigate throught gallery items 3. Don`t forget to change background image paths if CSS file is not in the same directory. Also, check src paths for AlphaImageLoader as they are relative to the HTML document, while regular CSS background images are relative to the CSS document (read more). 4. Images Inline content <a id="inline" href="#data">This shows content of element who has id="data"</a><div style="display:none"><div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Iframe <a href=" Ajax <a href=" takes content using ajax</a> Optional - Use the title attribute for anchors if you want to show a caption 5.