SimcoMedia Professional Web Design » JQuery

JQuery Toggle Panel

SimcoMedia Design — Tue, 16 Mar 2010 21:10:36 +0000

Sometimes we’re convinced that certain special effects we see in web pages are some sort of cult voodoo and appear mysterious. The ‘slide toggle’ effect is one of those. We’re going to show you just how easy it is to use this cool feature for revealing hidden content.

We’re going to make a simple panel slider using the JQuery toggle function. Here’s how the code will look:

Code Explanation

Let’s break this down to show how simple it is using JQuery

$(document).ready(function() {: Our standard JQuery statement declaring that when the document is fully loaded we can execute the following
$(“.trigger”).click(function(){: Here we are stating that our page element with the class ‘trigger’ is going to do something when it’s clicked on
$(“.panel”).slideToggle(“slow”);: Here we see the details of our instructions for when the ‘trigger’ is clicked. Essentially telling the div with the class name ‘panel’ to ‘slide – Toggle’ open. The ‘Toggle’ part means that it will open when clicked then close when clicked again.

The HTML

The HTML is relatively simple. First, though, we need a little styling for our elements

Followed by our HTML which is entirely up to you how you want it to look. For our demo purposes we’re using just the standard Lorem Ipsum text jargon:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Section 1.10.32 of de Finibus Bonorum et Malorum, written by Cicero in 45 BC

The standard Lorem Ipsum passage, used since the 1500s

Live Demo

To get a live view of the sliding/toggling panel Click Here

Using JQuery’s Ajax Functions

SimcoMedia Design — Tue, 16 Mar 2010 18:58:42 +0000

AJAX methods can be way over used but at the same time can provide a great way to consolidate related content into a confined space. JQuery provides an easy way to use their AJAX functionality with some simple code and, of course, the JQuery library. Here’s a simple example.First we have to understand the way JQuery works. Once we’ve done that then modifying this code becomes much simpler.JQuery is a library of functions that you can call upon to perform various tasks. The ones we will be working with today are the ‘load’ and ‘onClick’ functions. Our goal is to summon an external file ( .txt, .html, etc.) into an element in our page, preferably a div element. The functions will be called when someone clicks on a hyperlink (or, an image could be used or even a button). Here’s the basic code:

$(document).ready(function(){
  $("#link1").click(function() {
  $('#text').load('latin.txt');
});
  $("#link2").click(function() {
  $('#text').load('latin2.txt');
});
  $("link3").click(function() {
  $('text').load('latin3.txt');
  });
});

Ok, what we’ve created here is a series of functions that specify the id’s of 3 hyperlinks (shown below) that, when clicked, will ‘load’ the external pages referenced (latin.txt, latin2.txt and latin3.txt) into the same div element with the id of ‘text’. Here’s the HTML:






This text will be replaced when you click the hyperlinks below

Link One
Link Two
Link Three

Explaining The Code

JQuery is pretty easy to learn once you get the hang of how the functions flow. Here’s some tidbits about this simple AJAX call:

$(document).ready(function(){: JQuery uses the $(document).ready(function() { to ensure that the document is fully loaded and ready to provide you with the ability to execute your code
$(“#link1″).click(function(){: We are stating here that the hyperlink with the #id of link1 should perform a function when it is clicked. So, basically, if you read it like a sentence it states “when someone clicks on the #link1 do the following”.
$(‘#text’).load(‘latin.txt’);: The function we want to perform is to insert content into a specific div element in our page. The first part, $(‘#text’) identifies the element by using it’s id tag #text, the id of our target div. The second part, .load(‘latin.txt’);, tells what content to load into that location. So, reading it like a sentence it says: “find the div with the id of ‘text’ and load this file into that location”.

I’ve repeated the process three times in order to identify the 3 different links. The hyperlinks can be placed anywhere on your page and point to your target div. The content you summon can be a wide variety of formats including txt, html, images, etc..

For our external files they reside in my public folder and contain the standard Lorem Ipsum text for this demo. Here is the ‘live’ example of how this would look when arriving at your page.

Link One | Link Two | Link Three

This text will be replaced when you click the hyperlinks below

Clicking on the links will summon the different content without having to refresh the page. This saves on load time and at the same time allows you to designate a specific area for as much content as you’d like to cycle through instead of having a new page for each one.

Live Demo

To see this work Click Here

Recent Ajax Projects

SimcoMedia Design — Sat, 12 Dec 2009 19:46:59 +0000

Two recent projects involved extensive use of Ajax for displaying content. One of the great features about using Ajax is the ability to pull in external pages that can be pre-formatted with any time of content into the containing div using a common menu. Here are examples of how we’ve deployed Ajax in different ways to assist with the navigation of client websites:

Example #1 – Using Ajax in the Main Menu

When we say ‘main menu’ we are referring to the main method of navigation for the website. This is usually a horizontal or vertical menu (in this case a vertical unordered list styled with CSS) that is present on every page of the site. This image below illustrates how the site was laid out to accommodate the display of the external content into the container div (click to enlarge):

Ajax menu by SimcoMedia

Example #2 – Using Ajax in a Sub-menu

In this example the site has a main menu horizontally to provide navigation to all the various sections of the site. Within those sections are sub-menus that allow the related content to be displayed via Ajax into a container div located to the right of the sub-menu. This is extremely helpful in keeping the visitor ‘on topic’ while reviewing your site content. The image below illustrates the layout (click to enlarge):

Ajax menu by SimcoMedia

Ajax can be used in a variety of ways to improve the speed and ease of navigation for your website. Overuse of Ajax can be a site killer. For more information on how Ajax could be integrated into your website please contact us.